bootstrap5.x 基础二（组件）
这里所使用的版本为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实际上是个checkbox的角色，为选中状态。
当然，这些在页面都没有实际作用。
文中用说明部分的bs指代bootstrap，代码部分bs就是bs
前置准备:到官网或者中文网下载好bootstrap5.x的包。其次是页面的基本文件引入，css文件在头部引入，js文件在底部引入确保能读取到节点。如下：
doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Hello, world!title>
head>
<body>
<h1>Hello, world!h1>
<script src="dist/js/bootstrap.bundle.min.js" >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-bodycode>, 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-bodycode>, 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">Primaryspan>
<span class="badge bg-secondary">Secondaryspan>
面包屑导航
面包屑导航最外层是由 标签包裹着，多个层级用写在列表内，列表需要添加类名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"> <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">Previousspan> 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">Nextspan> 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 labelh5> <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>"<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,多个间用空格分割" <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 elementsbutton> -
定义折叠内容。
<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"> <li><span class="dropdown-item-text">Dropdown item textspan>li> <li><a class="dropdown-item active" href="#">Actiona>li> <li><a class="dropdown-item disable" href="#">Another actiona>li> <li><a class="dropdown-item" href="#">Something else herea>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"> 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 titleh5> <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">Closebutton> <button type="button" class="btn btn-primary">Save changesbutton> 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 texta>
滑动导航
-
什么是滑动导航？点击触发按钮后，一个页面从网站顶部或左边或者右边出现了，这样的功能被叫做滑动导航。
滑动导航由两部分组成：1. 触发按钮 2. 导航页
-
定义一个滑动导航触发按钮
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrollingbutton>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 navbotton> <div class="offcanvas offcanvas-bottom" id="offcanvasBottom"> 底部滑动导航 <button class="btn btn-close" data-bs-dismiss="offcanvas">button> div>
分页导航Pagination
挺简单的，不用多说了，看例子：
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previousa>li>
<li class="page-item"><a class="page-link" href="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>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="#">Previousa>li> <li class="page-item active"><a class="page-link" href="#">1a>li> <li class="page-item"><a class="page-link" href="#">2a>li> <li class="page-item"><a class="page-link" href="#">3a>li> <li class="page-item"><a class="page-link" href="#">Nexta>li> ul>进度条
外层用
progress来指定进度条的最大值内部用
progress-bar来指定进度条当前的值
<div class="progress">
<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">#onea> <a class="nav-link" href="#two">#twoa> <a class="nav-link" href="#three">#threea> 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
h2> <h2 id="two">two
h2> <h2 id="three">three
h2> div> div>
读取图标
-
读取图标是用于项目中显示加载状态。
-
基于无障碍的目标，此处每个加载器都需要包含
role="status"和嵌套的Loading.... 意思是：为了让其他人能了解到它的作用当然你可以不加，像以下的例子也是可以正常使用
<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"> <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的堆叠，一般我们添加的提示不止一两个的。加一个外框使她们的位置更加好看
<div class="toast-container"> <div class="toast">...div> <div class="toast">...div> <div class="toast">...div> <div class="toast">...div> div>