bootstrap5.x 基础三（通用类，终篇）

通用类

前置准备:到官网或者中文网下载好bootstrap5.x的包。其次是页面的基本文件引入，css文件在头部引入，js文件在底部引入确保能读取到节点。如下：

<!doctype html>
<html lang="en">
  <head>
    <!-- 必须要引入 viewport的规则 确保实现正确的响应式布局行为 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- 方式 1: 直接引入打包后的文件 ,确保路径是正确  -->
    <script src="dist/js/bootstrap.bundle.min.js" ></script>

    <!-- O方式2: 分开引入文件，最终的效果和方式1一样 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
  </body>
</html>

背景颜色

• 语法： bg-{color}

• color可用值 (bs的那11种颜色，再提一次)： primary 、secondary 、success 、danger 、info 、warning 、light 、dark 、body 、white 、transparent

• 颜色梯度，让背景颜色梯度显示

  .bg-gradient

  例子：

  <div class="p-3 mb-2 bg-primary text-white bg-gradient">.bg-primary</div>
  

边框

• 增加边框

  语法： border{-side}

  side 可用值： top(加上边框)、bottom(加下边框)、end(加右边框)、start(加左边框)、{不加}

  例如：<div class="border"></div><div class="border-top"></div>

• 减少边框

  语法：border-{side}-0

  side可用值: top(去上边框)、bottom(去下边框)、end(去右边框)、start(去左边框)、{不加则去除四边}

  例如：<div class="border-0"></div><div class="border-top-0"></div>

• 边框颜色

  语法： border-{color}

  color可用值: bs那11种

• 边框半径

  语法: rounded-{type}

  type可用值：top(上两角)、bottom(下两角)、end(右两角)、start(左两角)、circle圆、pill(胶囊)

• 边框框度

  语法： border-{number}

  number可用值 ： 1、2、3、4

字体颜色

• 语法：text-{color}

  可用值：bs的11种颜色

浮动和清除浮动

• 清除浮动：在父元素上添加clearfix即可

  <div class="clearfix">...</div>
  

• 浮动

  语法： float-{position}

  position可用值:start（左浮动），end（右浮动），none（不浮动）

• 响应式浮动

  语法： float-{size}-{position}

  size可用值：sm、、md、lg、、xxl、xl

互动

• 文字选择

  <p class="user-select-all">当使用者点选时，这个段落将会被全选。</p>
  <p class="user-select-auto">这个段落具有预设的提取行为。</p>
  <p class="user-select-none">当使用者点选的时候，此段落将不会被提取</p>
  

• pointer事件

  pe-none:添加后不可被点击

  <p>
      <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">这个连接不可被点击这个连接不可被点选</a>
  </p>
  <p><a href="#" class="pe-auto">这个连接可以被点击（此为预设行为）.</a> 
  </p>
  

溢出

<div class="overflow-auto">溢出出现y轴滚动条...</div>
<div class="overflow-hidden">溢出隐藏...</div>
<div class="overflow-visible">溢出显示不出现滚动条，超出也显示...</div>
<div class="overflow-scroll">溢出出现两边的滚动条...</div>

位置

• 定位类型

  语法： position-{status}

  status 可用值 ：static、relative、absolute、fixed、sticky

• 定位位置值：

  语法：{direct}-{value}

  direct可用值： top、start、end、bottom（不用我解释了吧）

  value可用值： 0（0%）、50（50%）、100（100%）

例子：

<div class="position-absolute top-50 start-50"></div>

阴影

• 语法： shadown-{size}

  size取值：none、sm、lg、{默认大小}

  例子：

  <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
  <div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
  

尺寸

• bs预设的几种宽高：25%，50%，75%，100%和auto

• 语法： {attribute}-{value}

  attribute可用值： w、h

  value: 25%，50%，75%，100%和auto

<div class="w-100"> </div>
<!-- 如果使用高度的，请确保父级有高度了 -->

垂直对齐方式

<span class="align-baseline">baseline 基准线对齐</span>
<span class="align-top">top 顶部对齐</span>
<span class="align-middle">middle 中间对齐</span>
<span class="align-bottom">bottom 底部对齐</span>
<span class="align-text-top">text-top </span>
<span class="align-text-bottom">text-bottom</span>

可视性

• 即显示和隐藏（visible可视 、 invisible隐藏）

  例子：

  <div class="visible">...反隐藏（显示）</div>
  <div class="invisible">...视觉上隐藏，还占着位置</div>