bootstrap5.x 基础三（通用类，终篇）_bootsrap5 常用类-优快云博客

本文介绍如何快速上手 Bootstrap 5，包括基本文件引入、背景颜色设置、边框及边框颜色调整等实用技巧，并涵盖响应式设计、浮动与清除浮动、交互特性等多项重要内容。

通用类

前置准备:到官网或者中文网下载好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>