1.安装
使用bootstrap库CDN
2.创建
bootstrap对移动设置友好，可以触屏缩放
<meta name="viewport" content="width=device-width,initial-scale=1">
width=device-width:宽度是设备屏幕宽度
initial-scale=1 表示初始的缩放比例容器：需要容器来包裹网站内容
.container类：固定宽度并支持响应式布局的容器 .container-fluid类：用于100%宽度，占据全部视图的容器
3.容器
固定宽度的响应式页面，宽度随屏幕宽度同比例放大缩小: .container
100%宽度，全屏幕尺寸容器: .container-fluid
内边距： pt-n（1<=n<=5）
背景颜色： bg-color
文本颜色： text-color
4.网格系统：
bootstrap 5的网格系统是响应式的，列会跟着屏幕大小自动重新排序，每一行中列的总和等于或小于 12
网格系统有6个类：
.col-:针对所有设备
.col-sm-:平板
.col-md- 桌面显示器
.col-lg- 大桌面显示器
.col-xl- 特大桌面显示器
.col-xxl- 超大桌面显示器
网格系统基本结构：
1.创建一行，然后添加所需要的列，同一行的数字相加为12.
<div class='row'>//创建一行
<div class='col-设备-数字'>添加需要的列</div>
<div class='col-设备-数字'>添加需要的列</div>
<div class='col-设备-数字'>添加需要的列</div>
//设备：sm、md、lg、xl 数字相同为等宽，不相同为不等宽响应式，数字相加为12 需要几列就创建几个col
</div>2.创建相等宽度的列，自动布局
<div class='row'>//创建一行
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
//不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等，两个 "col" ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25% 的宽度，以此类推
</div>3.平板和桌面端
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6">
</div>
<div class="col-sm-9 col-md-6">
</div>
</div>
</div> 在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。
5.文字排版
控制标题样式：.display-1 .display-2 .display-3等
创建字号更小颜色更浅的文本：<small></small>标签
黄色背景且有一定内边距：.mark类和<mark></mark>标签
文本底部的虚线边框：<abbr></abbr>
引用：
<blockquote class='blockquote'>
//内容
<footer class='bloakquote-footer'>从哪里被引用</footer>
</blockquote>6.表格
基础表格：.table类
条纹表格：.table-striped类
带边框表格：.table-bordered类
鼠标悬停表格（表格每一行添加鼠标悬停灰色背景效果）：.table-hover类
<table class="table table-dark"></table>无边框表格：.table-borderless
<table class='table table-borderless'></table>7.图像形状
圆角图片：.rounded类
<img src="" class='rounded'>椭圆图片：.rounded-circle
<img src="" class="rounded-circle">缩略图（图片有边框）：.img-thumbnail
<img src="" class="img-thumbnail">图片对齐方式：.float-start左对齐 .float-end右对齐
<img src="paris.jpg" class="float-start">
<img src="cinqueterre.jpg" class="float-end">8.信息提示框
.alert-success
:指定操作成功提示信息
.alert-warning
:设置警告信息
.alert-info
:请注意这个信息
.alert-danger
:失败的操作
.alert-primary
:首选
提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接:
<a href="#" class="alert-link">//alert-link:将链接的颜色与提示框颜色匹配关闭提示框
在提示框的div中添加
.alert-dismissible
，然后在关闭按钮的链接上添加
class="btn-close"
和
data-bs-dismiss="alert"
类来设置提示框的关闭操作
<div class="alert alert-success alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>成功的提示信息</strong>
</div>提示框动画：
设置提示框在关闭时的淡出和淡入效果：
.fade
和
.show
类
<div class='alert alert-warning alert-dismissible fade show'>
<button class="btn-close" data-bs-dismiss="alert"></button>
<strong>警告提示框</strong>
</div>9.按钮(可用于<a>、<button>、<input>)
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-default">默认按钮</button>
<button type="button" class="btn btn-danger">表示危险的按钮</button>
<input type="button" class="btn btn-info" value="输入框按钮">
<a href="#" class="btn btn-info" role="button">链接按钮</a>
type="button":
规定按钮的类型，包括
"button","reset",“sumbit”
sumbit:该按钮是提交按钮
button:该按钮是可点击的按钮
reset:该按钮是重置按钮（清除表单数据）
class="btn"
:为按钮添加基本样式，不同的class对应的按钮是不同的样式
按钮设置边框：btn-outline-样式颜色
<button type="button" class="btn btn-outline-primary">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">次要按钮</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
块级按钮：在button中添加
.btn-block
类可以设置块级元素，
.d-grid
类设置在父级元素中
块级按钮
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">按钮 </button>
</div>多个块级元素(使用.gap-*类来设置)
<div class="d-grid gap-3">
<button type="button" class="btn btn-primary btn-block">块级按钮</button>
<button type="button" class="btn btn-primary btn-block">块级按钮</button>
<button type="button" class="btn btn-primary btn-block">块级按钮</button>
</div>
激活和禁用的按钮：
.active
类是可用的，
disabled
属性是禁用不可点击，注意<a>元素不支持
disabled
属性，那就要
disabled
类
<button type="button" class="btn btn-primary active">可点击的按钮</button>
<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
<a href="#" class="btn btn-primary disabled">禁止点击的链接</button>加载按钮：spinner-border类
<button class="btn btn-primary">
<span class="spinner-border spainner-border-sm"></span>
Loading...
</button>10.样式颜色
Bootstrap默认为很多组件都提供了5种颜色的样式，这5种颜色分别是：
primary（重点蓝）、success（成功绿）、info（信息蓝）、warning（警告橙）、
danger（危险红）。
定义规则是：组件名称-颜色类型，如btn-primary、alert-info。
11.按钮组（将按钮放在同一行上）：在
div
元素上添加
.btn-group
类来创建按钮组
<div class="btn-group">
<button class="btn btn-warning">按钮1</button>
<button class="btn btn-success">按钮2</button>
<button class="btn btn-primary">按钮1</button>
</div>
在div元素中，我们可以使用
.btn-group-lg|sm|xs
类来设置按钮组的大小
<div class="btn-group btn-group-lg">...</div>:大号按钮组
<div class="btn-group btn-group">...</div>:默认按钮组
<div class="btn-group btn-group-sm">...</div>:小号按钮组
垂直的按钮组：
.btn-group-vertical
类
<div class="btn-group-vertical">
<button type="button" class="btn-primary">按钮1</button>
<button type="button" class="btn-primary">按钮2</button>
</div>
内嵌按钮组及下拉菜单：在div元素上添加
.btn-group
类，button元素中添加
.dropdown-toggle
类(下拉)**,在
button
元素上添加
**data-bs-toggle="collapse"
属性（控制内容的隐藏与显示）
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">可以下拉</button>
<ul class="dropdown-menu">//dropdown-menu:下拉菜单
<li><a class="dropdown-item" href="#">内容1</a></li>
<li><a class="dropdown-item" href="#">内容2</a></li>
<li><a class="dropdown-item" href="#">内容3</a></li>
</ul>
</div>12.徽章（badges)
徽章（Badges）主要用于突出显示新的或未读的项。。如需使用徽章，只需要将
.badge
类加上带有指定意义的颜色类 (如
.bg-secondary
) 添加到
<span>
元素上即可。 徽章可以根据父元素的大小的变化而变化
使用徽章只需要给
<span>
元素添加一个
.badge
类，背景颜色和文本颜色自行添加
<div>大傻子<span class="badge bg-secondary text-primary">11</span></div>
药丸形状徽章：
.badge(徽章类)
.rounded-pill(药丸形状)
<span class="badge rounded-pill bg-primary">药丸蓝色徽章</span>13.进度条
进度条步骤：
1.添加一个带有
.progress
类的
<div>
2.在div内，添加另一个带有
.progress-bar
的空的div，在这个div中添加一个带有百分比表示宽度的
style
属性
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>进度条高度通过css的height属性来修改
可以通过
.progress-bar-striped
类来设置条纹进度条
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:80%"></div>
</div>
使用
.progress-bar-animated
类可以为进度条添加动画
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:50%"></div>
</div>
14.加载中效果：
.spinner-border
<div class="spinner-border"></div>
闪烁的加载效果：
.spinner-grow类
<div class="spinner-grow"></div>15.分页
创建分页：
ul元素添加.pagination类，
li元素上添加.page-item类，
li的a标签上添加.page-link类
<ul class="pagination">
<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>
</ul>高亮显示：.active类
<ul class="pagination">
<li class="page-item"><a class="page-link">previous</a></li>
<li class="page-item active"><a class="page-link">1</a></li>16.列表组
要创建列表组，可以在
<ul>
元素上添加
.list-group
类, 在
<li>
元素上添加
.list-group-item
类
<ul class="list-group">
<li class="list-item">第一</li>
<li class="list-item">第二</li>
</ul>
激活列表项：通过添加
.active
类来设置激活状态的列表项
<ul class="list-group">
<li class="list-item active">active类是激活列表项</li>
<li class="list-group-item">第三项</li>
</ul>
禁用的列表项：
.disabled
类用于设置禁用的列表项
<ul class="list-group">
<li class="list-item disabled">disabled类是禁用</li>
<li class="list-group-item">第二项</li>
</ul>
水平列表组:我们可以将
.list-group-horizontal
类添加到
.list-group
类后面来创建水平列表组
<ul class="list-group list-group-horizontal"></ul>
17.卡片：
.card
和
.card-body
类
<div class="card">
<div class="card-header">头部</div>
<div class="card-body">内容</div>
<div class="card-footer">底部</div>
</div>
给
img
添加
.card-img-top
（图片在文字上方） 或
.card-img-bottom
（图片在文字下方 来设置图片卡片)
18 .下拉菜单
.dropdown
<ul class="dropdown-menu">
<li><a class="dropdown-item">1</a></li>
</ul>
19.折叠
.collapse用于指定一个折叠元素
控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加
data-bs-toggle=”collapse”
属性。
data-target=”#id”
属性是对应折叠的内容 (<div id=”demo”>)。<a> 元素上你可以使用 href 属性来代替 data-bs-target 属性
<a href="#demo" class="btn btn-primary" data-bs-toggle="collapse">内容</a>
<div id="demo" class="collapse">内容</div>
20.导航
.nav类
在
<ul>
元素上添加
.nav
类，在每个
<li>
选项上添加
.nav-item
类，在每个链接上添加
.nav-link
类:
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">导航栏1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">导航栏2</a>
</li>
</ul>
21.导航栏
水平导航栏：
//删除 .navbar-expand-xxl|xl|lg|md|sm 类会变成垂直导航栏
<nav class="navbar navbar-expend-sm bg-primary">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">导航1</a>
</li>
<li class="nav-item">
<a class="nav-item" href="#">导航2</a>
</li>
</nav>
给nav标签添加
.justify-content-center
类可以创建居中对齐的导航栏，其他保持不变
折叠导航栏：
<nav class="navbar bg-dark navbar-dark">
//nav-brand:logo栏
<a class="nav-brand">导航logo栏</a>
//折叠按钮
<button class="navbar-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#折叠id">
//按钮样式
<span class="navbar-toggle-icon"></span>
</button>
//被折叠的内容
<div class="collapse navbar-collapse1" id="折叠id">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">折叠1</a>
</li>
<li class="nav-item">
<a class="nav-link">折叠2</a>
</li>
</ul>
</div>
导航栏容器可以包含以下几个常用组成：
1、品牌LOGO（.navbar-brand ）
2、导航菜单（.navbar-nav）
3、导航文本（.navbar-text）
4、折叠导航按钮（.navbar-toggle）
5、表单（.form-inline）
6.
导航菜单一般使用ul、li来定义
<nav class="navbar navbar-expand-md bg-light nav-light"> <ul class="navbar-nav"> <li class="nav-item active"> <a href="#" class="nav-link ">菜单</a> </li> </ul> </nav>
导航菜单可用样式：
| .navbar-nav | 应用于ul标签 |
|---|---|
| .nav-item 、 .active | 应用于li标签 |
| .nav-link 、 .disabled | 应用于a标签 |
导航组成解释：
nav标签：在创建一个导航栏时，你需要把它放在nav标签里
.navbar类：该类创建一个标准的导航栏
navbar-expand-lg
：该类用于设置响应式折叠断点，比方说，就用
navbar-expand-lg
，那么当屏幕尺寸小到
lg
断点时，菜单就会被折叠，而如果使用其它类似的，比方说
navbar-expand-md
，那么只有当屏幕尺寸小于
md
断点时，菜单才会被折叠。删除该类，那么导航栏将变为垂直排列。
navbar-brand
：该类用于装饰你的网站名字，或者说商标。
navbar-toggler
：该类修饰button按钮，如果不加该类，那么你的button按钮会很难看
data-toggle=”collapse” ：可以看到在button按钮中有这么一个属性，该属性用于设置button的行为，即单击一次打开导航栏，再单击一个关闭导航栏，如果不设置该属性，那么你的button按钮即使被点击了也将毫无反应。
data-target=”#navbarSupportedContent” ：该属性用于设置button按钮需要打开的导航栏，它的值为一个id，你会发现该id刚好是下面的导航栏的id，所以button按钮才能打开它。如果不设置该值，那么你的button按钮将形同虚设。
navbar-toggler-icon
: 这个设置的其实就是按钮里面的那三条杠，没有它的话，按钮就只是一个普通的按钮了，很丑。
collapse ：该类定义了导航栏在屏幕尺寸小于断点的初始状态下是否会被隐藏。什么意思呢，对于屏幕尺寸大于断点的情况，该类没什么用，对于屏幕尺寸小于断点的情况，如果加上这个类，那么初始状态下导航栏是被折叠的状态，如果不加该类，那么初始状态下导航栏是未被折叠的状态，当然不管加不加该类，都不影响导航栏之后因为单击按钮而被隐藏或者显示这一功能，因为按钮不会被隐藏。
navbar-collapse：该类定义了导航栏在屏幕尺寸大于断点的初始状态下是否会被隐藏。如果不加该类，那么在大于断点的情况下，导航栏会被隐藏，但小于断点的情况不受影响。另外，如果不加该类，那么在大于断点的情况下，导航栏就真的被隐藏了，因为这时按钮也会被隐藏，所以无法通过任何行为来显示导航栏。 ———————————————— 版权声明：本文为CSDN博主「二十七º」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：
详细说明基于 Bootstrap4 编写 一个响应式导航栏_二十七º的博客-CSDN博客_bootstrap4响应式导航
22.轮播
| 类 | 描述 |
|---|---|
|
创建一个轮播 |
|
为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。 |
|
添加要切换的图片 |
|
指定每个图片的内容 |
|
添加左侧的按钮，点击会返回上一张。 |
|
添加右侧按钮，点击会切换到下一张。 |
|
与 .carousel-control-prev 一起使用，设置左侧的按钮 |
|
与 .carousel-control-next 一起使用，设置右侧的按钮 |
|
切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。 |
23.模态框（modal）
模态框是覆盖在父窗体上的子窗体
24.提示框
通过向元素添加
data-bs-toggle=”tooltip”
来来创建提示框
记得引入js代码
25。弹出框
通过向元素添加
data-bs-toggle=”popover”
来来创建弹出框
记得引入js代码
26.滚动监听（scollspy）
记得引入js代码
<div class="nav nav-pills" id="nav">
<a class="nav-link active"></选项一</a>
<a class="nav-link active"></选项二</a>
<a class="nav-link active"></选项三</a>
</div>
<div class="">
27.浮动与清除浮动
元素往右浮动使用
.float-end类
，向左浮动使用
.float-start
类，
.clearfix类
清除浮动
设置元素居中对齐：
.mx-auto类
28.间距
间距设置语法如下:
{property}{sides}-{size}
property
代表属性，包含：
-
m
– 用来设置
margin
-
p
– 用来设置
padding
sides
主要指方向：
-
t
– 用来设置
margin-top
或
padding-top
-
b
– 用来设置
margin-bottom
或
padding-bottom
-
l
– 用来设置
margin-left
或
padding-left
-
r
– 用来设置
margin-right
或
padding-right
-
x
– 用来设置
*-left
和
*-right
-
y
– 用来设置
*-top
和
*-bottom
-
blank – 用来设置元素在四个方向的
margin
或
padding
size
指的是边距的大小：
-
0
– 设置
margin
或
padding
为
0
-
1
– 设置
margin
或
padding
为
$spacer * .25
-
2
– 设置
margin
或
padding
为
$spacer * .5
-
3
– 设置
margin
或
padding
为
$spacer
-
4
– 设置
margin
或
padding
为
$spacer * 1.5
-
5
– 设置
margin
或
padding
为
$spacer * 3
-
auto
– 设置
margin
为 auto
29.弹性盒子
设置弹性盒子： 使用 d-flex 类创建一个弹性盒子容器
创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类
水平方向：
.flex-row
可以设置弹性盒子元素水平显示
.flex-row-reverse
类用于设置右对齐显示，即与
.flex-row
方向相反。
垂直方向：
.flex-column
类用于设置弹性子元素垂直方向显示
.flex-column-reverse
用于翻转子元素
等宽：
.flex-fill类强制设置各个弹性盒子的宽度一样
扩展：
.flex-grow-1:用于设置元素剩下的使用空间，其他子元素只设置了它们所需要的空间，使用该属性的子元素获取剩余空间
排序：
.order
类可以设置弹性子元素的排序，从
.order-1
到
.order-12
，数字越低权重越高(
.order-1
排在
.order-2
之前)
30。表单（
.form-control
）
表单布局：堆叠表单（垂直）、内联表单（水平）
.form-label
类来确保标签元素有一定的内边距。
.form-control类是表单
内联表单：表单元素并排显示（使用.row和.col）
<form>
<div class="row">
<div class="col">
<input type="text"(输入的是文本) class="form-control" placeholder="Enter email">
</div>
< <div class="col">
<input type="password"(输入的是密码) class="form-control" placeholder="Enter password" name="pswd">
</div>
</form>
31.文本框
使用 textarea 标签创建文本框提交表单，使用
.form-control
类渲染文本框 textareas 标签
<label for="comment">请输入评论：</label> <textarea class="form-control" rows="2" id="comment" name="text"> </textarea>
禁止/只读表单：
使用
disabled/readonly
属性设置输入框禁用/只读
取色器：
使用 .form-control-color 类可以创建一个取色器
纯文本输入
使用
.form-control-plaintext
类可以删除输入框的边框
32.下拉菜单（
.form-select
）
下拉菜单
<select>
元素可以使用
.form-select
类来渲染
<label for="sel1" class="form-label">单选下拉菜单：</label> <select class="form-select" id="sel1" name="sellist1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select>
在select中multiple属性设置多选下拉菜单
33.复选框：
class=”form-check-input“渲染复选框的样式
type=”checkbox”：设置复选框，设置小方块
checked 属性用于设置默认选中的选项
单选框：
type=”radio”：设置单选框的样式，设置小圆块
34.选择区间
要设置一个选择区间可以在
input
元素中添加
type=”range”
并使用
.form-range
类
选择区间：<input type="range" class="form-range" >
step设置步长值，默认步长为1，即默认情况下step=10
35.输入框组
使用
.input-group
类来向表单输入框中添加更多的样式，如图标、文本或者按钮。
.input-group-text
类来设置文本的样式，是固定的样式。
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
36.输入框组标签
在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id 对应，点击标签后可以聚焦输入框
<label class="demo">这里输入邮箱</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Email"
id="demo" name="email">
<span class="input-group-text">@runoob.com</span>
</div>
37.表单浮动标签
表单标签浮动效果：
<div class="form-floating">
<input type="text" class="form-contorl" placeholder="Enter email" >
<label>Email</label>
</div>
.form-floating类给div添加浮动样式
.form-contorl类给input添加表单样式
<label> 元素必须在 <input> 元素之后，并且每个 <input> 元素都需要 placeholder 属性
form-select类是浮动样式结果
可以在选择菜单上使用浮动标签，它将始终显示在选择菜单的左上角，不会有点击浮动效果
<div class="form-floating">
<select class="form-select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
38.表单验证
给form元素添加
.was-validated
类，input输入字段将出现绿色（有效）或红色（无效）边框效果，用于说明表单是否需要输入内容，
.valid-feedback
或
.invalid-feedback
类提示用户缺少什么信息。
<form class=was-validated">
<div class="form-group">
<label for="biaodan1">表单1</label>
<input type="text" class="form-control" id="biaodan1">
<div class="valid-feedback">验证成功</div>
<div class="invalid-feedback">请输入用户名</div>
</div>
<div class="form-group">
<label for="biaodan2">表单2</label>
<input class="password" class="form-control" id="biaodan2">
<div class="valid-feedback">验证成功</div>
<div class="invalid-feedback">请输入密码</div>
</div>
</