bootstrap5.x 基础二（组件）

jayLog

已于 2022-01-27 19:09:24 修改

阅读量3k

点赞数 2

分类专栏：蓝桥web 文章标签： bootstrap 前端 javascript

于 2022-01-27 18:45:20 首次发布

本文链接：https://blog.csdn.net/jayLog/article/details/122722135

版权

蓝桥web 专栏收录该内容

29 篇文章 5 订阅

订阅专栏

这里所使用的版本为5.x

本文主要整理两大块：

bootstrap组件
bootstrap通用类

前言：

开始前先了解一个缩写词（aria）
Accessible Rich Internet Application
可取得的丰富的互联网应用.

html5针对html tag增加的属性：role 和 aria-*。
role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button。
而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。比如，
<div role="checkbox" aria-checked="checked"></div>
辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。
当然，这些在页面都没有实际作用。

文中用说明部分的bs指代bootstrap，代码部分bs就是bs

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

组件

手风琴

这里需要说明的可能就是，几个属性。

accordion-header 里面的按钮，点击的时候需要展开关联的内容，这里是把关联属性的id记录在按钮的data-bs-target属性中，来确定点击的时候要展开那个内容
在accordion-collapse 中，需要添加两个属性，一个是关联的header的id，保存在aria-labelledby属性中，还有一个是保存整个accordion的id的属性data-bs-parent

内容上加了属性后默认是隐藏的，添加show类名的时候展示，而列表项则用是否有collapsed类来判断是否为展开，有标示展开状态，去掉标示关闭状态

组件这块每个结构都需要记住，没多需要讲的，一般就直接复制主体，修改内容

例子：

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

警告框（alerts）

语法：基础类：alert

警告框类型： alert-{type}

type的可用值：primary、secondary、success、danger、warning、info、light、dark

例子：

<div class="alert alert-danger">
  有一个错误需要处理一下
</div>

提示框的显示和隐藏：默认是显示出来，可添加fade类名使其淡出

例如：

<div class="alert alert-danger fade">  有一个错误需要处理一下</div>

徽章

基础类： badge

样式类： bg-{type}

type的可用值： primary、secondary、success、danger、warning、info、light、dark

例子：

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>

面包屑导航

面包屑导航最外层是由 <nav aria-label="breadcrumb">标签包裹着，多个层级用写在列表内，列表需要添加类名breadcrumb,每个列表项需要使用breadcrumb-item。可通过在列表项中添加active标示当前页面

分隔符是通过为元素::before添加的，通过添加行内样式来修改符号，具体如下（间符号修改为 > ）：

style="–bs-breadcrumb-divider: ‘>’;"

例子：

<!-- 面包屑导航 -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">中文手册</li>
    <li class="breadcrumb-item">组件</li>
    <li class="breadcrumb-item active" aria-current="page">面包屑导航</li>
  </ol>
</nav>

卡片（Card）

例子：

<div class="card" style="width: 18rem;">
<img src="./img/luxy.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">卡片内容............</p>
</div>
</div>

效果

请添加图片描述

轮播图（carousel）

基本的轮播图的架构如下

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <!-- active 类名来标示轮播开始页,如果不加就没有效果 -->
        <div class="carousel-item active">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
    </div>
</div>

注意: active也是必要类名,没有的话轮播图不生效

轮播图的左右切换控件

<div id="carouselExampleControls" class="carousel slide"  data-bs-ride="carousel">    
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

注: data-bs-target 要写上轮播组件的id,data-bs-slide区别切换上一张(prev)还是下一张(next)

指示器(标识当前为幻灯片的位置,切换到指定的幻灯片)

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
</div>

注: data-bs-target标明轮播图组件id,data-bs-slide-to标明关联的轮播图索引, 类名active标明当前的幻灯片

带字幕

在任意.carousel-item中使用.carousel-caption给幻灯片添加字幕

例子:

<!-- ... -->
<div class="carousel-item">
 <img src="..." class="d-block w-100" alt="...">
    <div class="carousel-caption">
      <h5>Second slide label</h5>
      <p>Some representative placeholder content for the second slide.</p>
    </div>
</div>
<!-- ... -->

淡入淡出的幻灯片

将.carousel-fade加到轮播中即可

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <!-- ... -->
</div>

时间间隔

在.carousel-item上添加data-bs-interval=<延迟时间,单位毫秒>,来设置跳转到下个幻灯片的间隔时间

<!-- ... -->
<!-- 这张轮播图(幻灯片)设置两秒的间隔时间-->
<div class="carousel-item" data-bs-interval="2000">
 <img src="..." class="d-block w-100" alt="...">
</div>
<!-- ... -->

js事件

Bootstrap为轮播图提供了两个事件

事件标识	说明
slide.bs.carousel	当调用slide方法时会触发
slid.bs.carousel	每个轮播图完成切换后都会触发此事件

例子:

let carousel =  document.getElementById('#<轮播图id>')
carousel.addEventListener('slid.bs.carousel', function(e){
    // ...
})
// jq
$('#<轮播图id>').on('slid.bs.carousel', function(e){
    console.dir(e)
})

关闭按钮

例子:
```
<button type="button" class="btn-close" disabled aria-label="Close"></button>
```
disabled设置为警用,按钮样式会变灰

btn-close 为按钮提供样式

需要关闭警告框的话需要添加 data-bs-dismiss="alert"

折叠

与手风琴相比，他是单个的、独立的内容折叠。

定义个按钮,用于控制内容的折叠。必要的属性：data-bs-toggle="collapse",aria-controls="<按钮id>"

<!-- data-bs-toggle用来说明它是bootstrap的折叠列表，aria-controls用来指明操作的内容  -->
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
折叠、展开
</a>

想要使用多个按钮控制同一个内容折叠时。标明是多内容控制data-bs-target=".multi-collapse"然后在aria-controls="<id> <id>"中添加需要控制的内容id,多个间用空格分割

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>

定义折叠内容。

<div class="collapse" id="collapseExample">
    <div class="card card-body">
        折叠内容。。。，按钮可以用button标签或者a标签
    </div>
</div>

下拉菜单

“下拉列表是可切换的上下文覆盖，用于显示链接列表等”

注意点：

下拉的按钮必须保护属性data-bs-toggle="dropdown"
下拉列表必须与按钮同级且在按钮之后，还需要添加类名dropdown-menu

定义一个下拉菜单。（如果是多个下拉菜单，拉菜单之间会覆盖的，因此最外层要加个div包括起来）

<div class="btn-group">
    <button claas="btn btn-primary" data-bs-toggle="dropdown">下拉按钮</button>
  <div class="dropdown-menu">
      下拉的内容一般为列表，这里偷懒直接用个div了。也是把下拉组件最基本的元素列出来了
  </div>
</div>

定义一个菜单项。以及菜单项的激活和禁用状态

<ul class="dropdown-menu">
    <!-- 菜单项需要添加类名dropdown-item,激活状态需要用active，禁用使用disabled，都是类名！！ -->
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item active" href="#">Action</a></li>
  <li><a class="dropdown-item disable" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

菜单的对齐方式(下拉菜单出现在按钮的相对位置)

语法： drop{position}

position 可用值： end(右)、start（左）、up（上）

例子：

// 必须加载外层div上, dropstart\dropend\dropup
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

列表组

一般就用来当作二级菜单了，加载折叠项中

<ul class="list-group">
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
        First checkbox
    </li>
</ul>

模态框

.modal-dialog 中加入 .modal-dialog-scrollable 來創建一個 body 可滾動互動視窗。
定义一个模态框点开按钮，绑定模态框的id。data-bs-target指明模态框id，data-bs-toggle指明按钮为操作模态框
```
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
```

定义模态框

必要属性是id

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        </div>
    </div>
</div>

导航栏和选项卡

基本类名： nav
导航栏样式类： nav-{style}

style的可用值： pills(胶囊样式)、tabs（选项卡）、fill(每个项目等大)

例如：

<div class="nav nav-pills"></div>

导航栏或选项卡的项, 有 nav-item和nav-link两种。link用于给a标签使用

激活状态使用类名： active，（在a标签上生效）

一个完整的导航栏例子

<div class="nav nav-pills">
    <a class="nav-link active">
        首页
    </a>
    <a class="nav-link">
        新闻
    </a>
    <a class="nav-link">
        关于
    </a>
</div>

导航工具条（navbar）

语法: nav-bar-{color}

color的可用值: light、dark

导航工具条有什么用? 可用添加导航栏，多级菜单等，

例子

<nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
    <span class="navbar-text">
    Navbar text with an inline element
    </span>
    </div>
</nav>

品牌（brand）

<a class="navbar-brand" href="#">Navbar text</a>

滑动导航

什么是滑动导航？点击触发按钮后，一个页面从网站顶部或左边或者右边出现了，这样的功能被叫做滑动导航。

滑动导航由两部分组成：1. 触发按钮 2. 导航页

定义一个滑动导航触发按钮

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<!-- data-bs-target 有带#  -->

data-bs-toggle指明类型,data-bs-target指明操作对象,aria-controls指明控制着的对象

定义滑倒导航

<div class="offcanvas" id="offcanvasScrolling" tabindex="-1" aria-labelledby="offcanvasExampleLabel">
    内容。。。。
    <!-- 关闭按钮-->
    <button class="btn btn-close" data-bs-dismiss="offcanvas"></button>
</div>

修改滑动导航位置

语法： offcanvas-{position} 这是额外的属性类

position可用值：start(左侧)，end(右侧)，bottom(底部)

例如：定义一个底部的滑动导航栏

<botton class="btn btn-primary" data-bs-toggle="offcanvas" type="button" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">display slide nav</botton>
<div class="offcanvas offcanvas-bottom" id="offcanvasBottom">
    底部滑动导航
    <!-- close btn -->
    <button class="btn btn-close" data-bs-dismiss="offcanvas"></button>
</div>

分页导航Pagination

挺简单的，不用多说了，看例子：

<!-- nav这个标签只是用来描述下用途-->
<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>

激活和禁用状态

在page-item中里添加 active或者disabled

大小：（额外的属性，加在pagination）。 pagination-{size}

size 可用值： lg、sm

<ul class="pagination pagination-sm">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

进度条

外层用progress来指定进度条的最大值

内部用progress-bar来指定进度条当前的值

<div class="progress">
    <!-- aria 用来描述，具体的数值需要添加长度 -->
    <div class="progress-bar" style="width:25%" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

进度条样式

.progress-bar-animated ：进度条添加动画
.progress-bar-striped : 进度条变为条纹样式

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

滚动条监控

例如文章的目录，当你滑动到对应标题的时候，目录的标题名称表为高亮。

滚动条检控有几点要求：
- 必须使用在bootstrap的导航栏组件(nav)或列表组(list-group)中
- a标签和锚点是必须要的，且必须指向到元素的id
- 需要在被监控元素上设置position:relative
- 要给被监控元素设置height和overflow-y:scroll; 旁边带有tabindex="0"以确保键盘兼容性

定义一个目录（导航栏）

<nav class="nav nav-pills" id="navbar-example">
    <a class="nav-link" href="#one">#one</a>
    <a class="nav-link" href="#two">#two</a>
    <a class="nav-link" href="#three">#three</a>
</nav>

定义一个内容区域

<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0" style="height:100px;overflow-y:scroll">
    <div>
        <h2 id="one">one
            <hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / >
        </h2>
        <h2 id="two">two<hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / >
        </h2>
        <h2 id="three">three<hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / ><hr / >
        </h2>
    </div>
</div>

读取图标

读取图标是用于项目中显示加载状态。
基于无障碍的目标，此处每个加载器都需要包含 role="status"和嵌套的 <span class="visually-hidden">Loading...</span>. 意思是：为了让其他人能了解到它的作用

当然你可以不加，像以下的例子也是可以正常使用
```
<div class="spinner-border">
</div>
```
颜色是通过字体颜色来修改的。可以使用bootstrap官方的给的通用类

text-{colorType}, colorType的可用值： primary\secondary\success\danger\warning\info\light\dark

例如：
```
<div class="spinner-border text-success" role="tatus">
    <span class="visually-hidden">loading...</span>
</div>
```
图标类型： spinner-grow（缩放）、spinner-border(边框旋转) 两种
图标大小（额外的属性！！）： spinner-{type}-{size}

type：即上面两种类型，缩放和边框旋转

size可用值：sm和{默认不加}

例子：
```
<div class="spinner-grow spinner-grow-sm" role="status">
    <span class="visually-hidden">loading...</span>
</div>
```

吐司消息

看效果吧,那两个弹窗就是吐司了

请添加图片描述

定义吐司(定义完默认是隐藏的)

<div class="toast">
    <!-- data-bs-autohide="false"加上去之后后面就必须添加关闭按钮,默认true -->
    <div class="toast-header" data-bs-autohide="false">
        标题
        <button class="btn btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
        内容
    </div>
</div>

激活(不激活你会发现这关闭按钮关闭不了的)

// 这里是js代码，然后确认下你已经引入了bootstrap.js 和jquery.js
// 激活过程就是获取dom节点，然后赋值给bootstrap.Toast对象, 每个都要激活
let toastList= $('.toast') // 直接激活全部
let componentList = [] // 用来保存实例化后的所有组件
let option = {animation:true,autohide:true,delay:5000}// 官网的默认值，实例化的时候不传则使用这些值
toastList.each((i,e)=>{
    componentList.push(new bootstrap.Toast(e,option))
})

toast的堆叠，一般我们添加的提示不止一两个的。加一个外框使她们的位置更加好看

<!-- 外层添加 .toast-container-->
<div class="toast-container">
    <div class="toast">...</div>
    <div class="toast">...</div>
    <div class="toast">...</div>
    <div class="toast">...</div>
</div>