[[toc]]
Bootstrap4.4介绍
- 全球最受欢迎的前端组件库
- 用于开发响应式布局、移动设备优先的 WEB 项目
- 基于JQuery
Bootstrap4.4的安装
- 本地安装
官网:https://v4.bootcss.com/ - CDN引用
<!-- Bootstrap4.4 CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"> <!-- jQuery3.4.1 --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script> <!-- popper1.16 --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <!-- Bootstrap4.4 javascript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
- NPM安装
npm install bootstrap npm i jquery npm i @popperjs/core
栅格系统
视口尺寸划分
视口类型 | 标识 | 尺寸 |
---|---|---|
超小视口 | xs | 视口宽 < 576px |
小视口 | sm | 视口宽 ≥ 576px |
中等视口 | md | 视口宽 ≥ 576px |
大视口 | lg | 视口宽 ≥ 992px |
超大视口 | xl | 视口宽 ≥ 1200px |
容器宽度
容器类 | xs | sm | md | lg | xl |
---|---|---|---|---|---|
.container | 100% | 540px | 720px | 960px | 1140px |
.container-sm | 100% | 540px | 720px | 960px | 1140px |
.container-md | 100% | 100% | 720px | 960px | 1140px |
.container-lg | 100% | 100% | 100% | 960px | 1140px |
.container-xl | 100% | 100% | 100% | 100% | 1140px |
.container-fluid | 100% | 100% | 100% | 100% | 100% |
各个容器类不能相互嵌套使用
栅格系统
行
.row
行,display:flex
.row .row-cols-{breakpoint}-{value}
指定每行的列数
.row .no-gutters
取消行中列的槽宽
{breakpoint}
取值:省略,sm,md,lg,xl
{value}
取值:1~6
列
.col
自动布局列,每列会平分改行
.col-{breakpoint}-{value}
指定视口下的列数,每行至多 12 列
.col-{breakpoint}-auto
根据内容调整宽度
.col .order-{breakpoint}-{order}
列排序,order 越小越靠前
.col .offset-{breakpoint}-{offset}
列向右偏移指定的列数
{breakpoint}
取值:省略,sm,md,lg,xl
{value}
取值:1~12
{order}
取值: 0~12,first,last
{offset}
取值:0~11
工具类
颜色
文本颜色
.text-{color}
设置文本颜色为指定的情景色
.text-black-50
设置文本颜色为 rgba(0,0,0,0.5)
.text-white-50
设置文本颜色为 rgba(255,255,255,0.5)
{color}
取值:primary,secondary,success,danger,warning,info,light,dark,body,muted,white
背景颜色
.bg-{color}
设置背景色为指定的请景色
.bg-transparent
设置背景色为透明
{color}
取值:primary,secondary,success,danger,warning,info,light,dark,white
请景色说明
请景色 | 说明 | 颜色值 | 色条 |
---|---|---|---|
primary | 重要的 | #007bff | |
secondary | 次要的 | #6c757d | |
success | 成功的 | #28a745 | |
danger | 危险的 | #dc3545 | |
warning | 警告的 | #ffc107 | |
info | 信息的 | #17a2b8 | |
light | 浅色的 | #f8f9fa | |
dark | 深色的 | #343a40 | |
white | 白色的 | #ffffff | |
body | 主体的 | #212529 | |
muted | 暗淡的 | #6c757d |
边框
添加边框
.border
设置四边边框
.border-top
设置上边框
.border-right
设置右边框
.border-bottom
设置下边框
.border-left
设置左边框
取消边框
.border-0
设置四边边框的宽度为0
.border-top-0
设置上边框的宽度为0
.border-right-0
设置右边框的宽度为0
.border-bottom-0
设置下边框的宽度为0
.border-left-0
设置左边框的宽度为0
边框颜色
.border .border-{color}
设置边框颜色为指定的请景色
{color}
取值:primary,secondary,success,danger,warning,info,light,dark,white
边框圆角
.rounded
设置四角为圆角
.rounded-top
设置左上角和右上角为圆角
.rounded-right
设置右上角和右下角为圆角
.rounded-bottom
设置左下角和右下角为圆角
.rounded-left
设置左上角和左下角为圆角
.rounded-circle
设置边框为原型
.rounded-pill
设置边框为胶囊型
.rounded-0
设置四角为直角
.rounded-sm
设置四角为小圆角
.rounded-lg
设置四角为大圆角
浮动
.clearfix
清除浮动,作用于父级元素
.float-{breakpoint}-left
左浮动
.float-{breakpoint}-right
右浮动
.float-{breakpoint}-none
不浮动
{breakpoint}
取值:省略,sm,md,lg,xl
Display
.d-{breakpoint}-{value}
设置元素的 display 属性
{breakpoint}
取值:省略,sm,md,lg,xl
{value}
取值:none,inline,inline-block,block,table,table-cell,table-row,flex,inline-flex
元素显隐表
类 | xs | sm | md | lg | xl |
---|---|---|---|---|---|
.d-none | × | × | × | × | × |
.d-none .d-sm-block | × | √ | √ | √ | √ |
.d-sm-none .d-md-block | √ | × | √ | √ | √ |
.d-md-none .d-lg-block | √ | √ | × | √ | √ |
.d-lg-none .d-xl-block | √ | √ | √ | × | √ |
.d-xl-none | √ | √ | √ | √ | × |
.d-block | √ | √ | √ | √ | √ |
.d-block .d-sm-none | √ | × | × | × | × |
.d-none .d-sm-block .d-md-none | × | √ | × | × | × |
.d-none .d-md-block .d-lg-none | × | × | √ | × | × |
.d-none .d-lg-block .d-xl-none | × | × | × | √ | × |
.d-none .d-xl-block | × | × | × | × | √ |
×
表示 隐藏√
表示 显示
Flex布局类
设置动态盒子(作用于父级类)
.d-{breakpoint}-flex
将元素设置为动态盒子
.d-{breakpoint}-inline-flex
将元素设置为内联动态盒子
{breakpoint}
取值:省略,sm,md,lg,xl
子盒子布局方向(作用于父级类)
.flex-{breakpoint}-row
布局方向为水平方向
.flex-{breakpoint}-column
布局方向为垂直方向
.flex-{breakpoint}-row-reverse
布局方向为反向水平方向
.flex-{breakpoint}-column-reverse
布局方向为反向垂直方向
{breakpoint}
取值:省略,sm,md,lg,xl
子盒子排版位置(作用于父级类)
.d-flex .justify-content-{breakpoint}-start
子盒子居左对齐
.d-flex .justify-content-{breakpoint}-end
子盒子居右对齐
.d-flex .justify-content-{breakpoint}-center
子盒子居中对齐
.d-flex .justify-content-{breakpoint}-between
子盒子两端对齐
.d-flex .justify-content-{breakpoint}-around
子盒子环绕对齐
.d-flex .align-items-{breakpoint}-start
子盒子居上对齐
.d-flex .align-items-{breakpoint}-end
子盒子居下对齐
.d-flex .align-items-{breakpoint}-center
子盒子居中对齐
.d-flex .align-items-{breakpoint}-baseline
子盒子基线对齐
.d-flex .align-items-{breakpoint}-stretch
子盒子拉伸对齐
{breakpoint}
取值:省略,sm,md,lg,xl
子盒子排版位置(作用于子级类)
.d-flex .align-self-{breakpoint}-start
子盒子居上对齐
.d-flex .align-self-{breakpoint}-end
子盒子居下对齐
.d-flex .align-self-{breakpoint}-center
子盒子居中对齐
.d-flex .align-self-{breakpoint}-baseline
子盒子基线对齐
.d-flex .align-self-{breakpoint}-stretch
子盒子拉伸对齐
{breakpoint}
取值:省略,sm,md,lg,xl
子盒子填充(作用于子级类)
.flex-{breakpoint}-file
子元素填充父级元素剩余空间
{breakpoint}
取值:省略,sm,md,lg,xl
子盒子自动换行(作用于父级盒子)
.d-flex .flex-{breakpoint}-nowrap
不自动换行
.d-flex .flex-{breakpoint}-wrap
自动换行
.d-flex .flex-{breakpoint}-wrap-reverse
反向自动换行
.d-flex .flex-wrap .align-content-{breakpoint}-start
子盒子换行后整体居上对齐
.d-flex .flex-wrap .align-content-{breakpoint}-end
子盒子换行后整体居下对齐
.d-flex .flex-wrap .align-content-{breakpoint}-center
子盒子换行后整体居中对齐
.d-flex .flex-wrap .align-content-{breakpoint}-between
子盒子换行后整体两端对齐
.d-flex .flex-wrap .align-content-{breakpoint}-around
子盒子换行后整体环绕对齐
.d-flex .flex-wrap .align-content-{breakpoint}-stretch
子盒子换行后整体拉伸对齐
{breakpoint}
取值:省略,sm,md,lg,xl
文本
.text-hide
隐藏文本
文本对齐
.text-justify
文本两端对齐
.text-{breakpoint}-left
文本左对齐
.text-{breakpoint}-center
文本居中对齐
.text-{breakpoint}-right
文本右对齐
{breakpoint}
取值:省略,sm,md,lg,xl
文本换行
.text-warp
文本换行
.text-nowarp
文本不换行
.text-truncate
文本截断
.text-break
单词中断
文本转换
.text-lowercase
将字母转为小写形式
.text-uppercase
将字母转为大写形式
.text-capitalize
将字母转为首字母大写形式
字体风格
.font-weight-bold
粗体
.font-weight-bolder
超粗体
.font-weight-normal
正常粗细
.font-weight-light
细体
.font-weight-lighter
超细体
.font-italic
斜体
.text-monospace
等宽体
.text-decoration-none
去除文本装饰
移除处理
.overflow-auto
溢出后显示滚动条
.overflow-hidden
溢出后隐藏
定位
.position-static
静态定位
.position-relative
相对定位
.position-absolute
绝对定位
.position-fixed
固定定位
.position-sticky
粘性定位
.fixed-top
固定到顶部
.fixed-bottom
固定到底部
.sticky-top
黏在顶部
阴影
.shadow
设置阴影
.shadow-none
取消阴影
.shadow-sm
设置小阴影
.shadow-lg
设置大阴影
尺寸
.w-25
width:25%
.w-50
width:50%
.w-75
width:75%
.w-100
width:100%
.w-auto
width:auto
.h-25
height:25%
.h-50
height:50%
.h-75
height:75%
.h-100
height:100%
.h-auto
height:auto
.mw-100
max-width:100%
.mh-100
max-height:100%
.min-vw-100
min-width:100vw
.min-vh-100
min-height:100vh
.vh-100
height:100vh
.vw-100
width:100vw
间隔
.m-{breakpoint}-{value}
设置四边外边距
.mt-{breakpoint}-{value}
设置上外边距
.mr-{breakpoint}-{value}
设置右外边距
.mb-{breakpoint}-{value}
设置下外边距
.ml-{breakpoint}-{value}
设置左外边距
.mx-{breakpoint}-{value}
设置X轴外边距
.my-{breakpoint}-{value}
设置Y轴外边距
.p-{breakpoint}-{value}
设置四边内边距
.pt-{breakpoint}-{value}
设置上内边距
.pr-{breakpoint}-{value}
设置右内边距
.pb-{breakpoint}-{value}
设置下内边距
.pl-{breakpoint}-{value}
设置左内边距
.px-{breakpoint}-{value}
设置X轴内边距
.py-{breakpoint}-{value}
设置Y轴内边距
{breakpoint}
取值:省略,sm,md,lg,xl
{value}
取值:0=>0rem,1=>0.25rem,2=>0.5rem,3=>1rem,4=>1.5rem,5=>3rem,auto
链接拉伸
a.stretched-link
链接拉伸,拉伸的范围为最近的定位父级元素
垂直对齐
.align-baseline
基线对齐
.align-top
顶部对齐
.align-middle
居中对齐
.align-bottom
底部对齐
.align-text-top
文本顶部
.align-text-bottom
文本底部
<img src="..." class="align-text-top">
<span>文本</span>
vertical-align 之作用于 inline、inline-block、table、table-cell 形式的元素
可见性
.invisible
隐藏元素,保留空间
.visible
显示元素
页面内容
排版
标题
.h1
一级标题样式
.h2
二级标题样式
.h3
三级标题样式
.h4
四级标题样式
.h5
五级标题样式
.h6
六级标题样式
.display-1
突出显示一级标题
.display-2
突出显示二级标题
.display-3
突出显示三级标题
.display-4
突出显示四级标题
段落
.lead
突出显示段落
文本元素
.small
小号文本
.mark
文本高亮
列表
ul.list-unstyled
取消列表风格
ul.list-inline>li.list-inline-item
列表项水平排列
图像
img.img-fluid
响应式图片
img.thumbnail
缩略图
img.rounded
圆角图片
表格
table.table
表格基础样式
table.table.table-dark
暗色表格
table.table.table-striped
隔行换色
table.table.table-bordered
设置表格内外边框
table.table.table-borderless
设置表格外边框
table.table.table-hover
鼠标悬浮突出显示行
table.table-sm
紧缩型表格
div.table-responsive-{breakpoint} > .table
响应式表格
thead.thead-dark
暗色表头
thead.thead-light
亮色表头
tr.table-{color}
设置行的背景色为指定的请景色
td.table-{color}
设置单元格的背景色为指定的请景色
{color}
取值:active,primary,secondary,success,danger,warning,info,light,dark
{breakpoint}
取值:省略,sm,md,lg,xl
图片区
<figure class="figure">
<img src="..." class="figure-img">
<figcaption class="figure-caption">标题</figcaption>
</figure>
组件
警告框
带情景色的警告框
<div class="alert alert-{color}">
A simple {color} alert—check it out!
</div>
{color}
取值:primary,secondary,success,danger,warning,info,light,dark
带链接的警告框
<div class="alert alert-primary">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
带标题的警告框
<div class="alert alert-success">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
</div>
可关闭的警告框
<div class="alert alert-warning alert-dismissible fade show">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
</div>
JavaScript操作
<body>
<button class="btn-close-alert">close alert</button>
<div class="alert alert-warning fade show">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>
<script>
// 关闭警告框
$('.btn-close-alert').click(function(){
$('.alert').alert('close')
})
// 关闭警告框后触发的事件
$('.alert').on('closed.bs.alert',function(){
console.log('closed')
})
</script>
</body>
徽章
带请景色的徽章
<span class="badge badge-{color}">Badge</span>
{color}
取值:primary,secondary,success,danger,warning,info,light,dark
胶囊徽章
<span class="badge badge-pill badge-primary">Pill badge</span>
链接徽章
<a href="#" class="badge badge-primary">Link badge</a>
标题中的徽章
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
按钮中的徽章
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>
面包屑导航
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Library</li>
</ol>
</nav>
按钮
带请景色的按钮
<button type="button" class="btn btn-{color}">button</button>
{color}
取值:primary,secondary,success,danger,warning,info,light,dark
链接形式的按钮
<button type="button" class="btn btn-link">Link</button>
按钮形式的元素
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
轮廓按钮
<button type="button" class="btn btn-outline-{color}">Primary</button>
{color}
取值:primary,secondary,success,danger,warning,info,light,dark
大号按钮
<button type="button" class="btn btn-primary btn-lg">Large button</button>
小号按钮
<button type="button" class="btn btn-primary btn-sm">Small button</button>
块级按钮
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
被激活的按钮
<a href="#" class="btn btn-primary btn-lg active">Primary link</a>
被禁用的按钮
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
可切换状态的按钮
<button type="button" class="btn btn-primary" data-toggle="button">
Single toggle
</button>
复选框按钮
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked> Checked
</label>
</div>
单选框按钮
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options"> Radio
</label>
</div>
javascript操作
<body>
<button class="toggle">toggle</button>
<hr/>
<button class="btn btn-primary">button</button>
<script>
// 切换按钮状态
$('.toggle').click(function(){
$('.btn').button('toggle')
})
</script>
</body>
下拉菜单
简单的下拉菜单
<div claas="dropdown">
<button class="btn btn-{color} dropdown-toggle" data-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-menu-item">...</a>
<a href="#" class="dropdown-menu-item">...</a>
<a href="#" class="dropdown-menu-item">...</a>
</div>
</div>
{color}
取值:primary,secondary,success,danger,warning,info,light,dark
下拉菜单项中的分割线
<div claas="dropdown">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-menu-item">...</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-menu-item">...</a>
</div>
</div>
纯文本的下拉菜单项
<div claas="dropdown">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a href="#" class="dropdown-menu-item">...</a>
<a href="#" class="dropdown-menu-item">...</a>
</div>
</div>
被激活的下拉菜单项
<div claas="dropdown">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-menu-item active">...</a>
<a href="#" class="dropdown-menu-item">...</a>
<a href="#" class="dropdown-menu-item">...</a>
</div>
</div>
被禁用的下拉菜单项
<div claas="dropdown">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-menu-item disabled">...</a>
<a href="#" class="dropdown-menu-item">...</a>
<a href="#" class="dropdown-menu-item">...</a>
</div>
</div>
分割形式的下拉菜单
<div claas="btn-group">
<button type="button" class="btn btn-danger">按钮</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
<div class="dropdown-menu">...</div>
</div>
大号下拉菜单
<div claas="dropdown">
<button class="btn btn-danger dropdown-toggle btn-lg" data-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">...</div>
</div>
小号下拉菜单
<div claas="dropdown">
<button class="btn btn-danger dropdown-toggle btn-sm" data-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">...</div>
</div>
上拉菜单
<div claas="btn-group dropup">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">dropup</button>
<div class="dropdown-menu">...</div>
</div>
右拉菜单
<div claas="btn-group dropright">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">dropright</button>
<div class="dropdown-menu">...</div>
</div>
左拉菜单
<div claas="btn-group dropleft">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">dropleft</button>
<div class="dropdown-menu">...</div>
</div>
菜单项右对齐
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-{breakpoint}-right">...</div>
</div>
{breakpoint}
取值:省略,sm,md,lg,xl
菜单项左对齐
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-{breakpoint}-left">...</div>
</div>
{breakpoint}
取值:省略,sm,md,lg,xl
在菜单项中添加标题
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">...</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">...</a>
<a class="dropdown-item" href="#">...</a>
</div>
</div>
纯文本的下拉菜单
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
...
</p>
<p class="mb-0">
...
</p>
</div>
带表单的下拉菜单
<div class="dropdown-menu">
<form class="px-4 py-3">
...
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">...</a>
<a class="dropdown-item" href="#">...</a>
</div>
调整下拉菜单的位置
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"data-offset="10,20">
Offset
</button>
<div class="dropdown-menu">...</div>
</div>
按钮组
简单按钮组
<div class="btn-group">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
简单的按钮工具条
<div class="btn-toolbar">
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
带输入框的按钮工具条
<div class="btn-toolbar mb-3">
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example">
</div>
</div>
大号按钮组
<div class="btn-group btn-group-lg">...</div>
小号按钮组
<div class="btn-group btn-group-sm">...</div>
带下拉框的按钮组
<div class="btn-group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
垂直方向的按钮组
<div class="btn-group-vertical">
...
</div>
输入组
基本输入组
<!-- 输入框为 input -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">¥</span>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">(元)</span>
</div>
</div>
<!-- 输入框为 textarea -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control"></textarea>
</div>
小号输入组
<div class="input-group input-group-sm">...</div>
大号输入组
<div class="input-group input-group-lg">...</div>
带有选择框的输入组
<!-- checkbox -->
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
<input type="text" class="form-control">
</div>
<!-- radio -->
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio">
</div>
</div>
<input type="text" class="form-control">
</div>
多输入框输入组
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">First and last name</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
多附件输入组
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">金额</span>
<span class="input-group-text">¥</span>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">.00</span>
<span class="input-group-text">元</span>
</div>
</div>
带按钮的输入组
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary">Button</button>
</div>
<input type="text" class="form-control">
</div>
带下拉框的输入组
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu">
...
</div>
</div>
<input type="text" class="form-control">
</div>
自定义选择框输入组
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
自定义文件域输入组
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Upload</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
更改文件域提示信息
<div class="custom-file">
<input type="file" class="custom-file-input">
<label class="custom-file-label" data-browse="浏览">Seleccionar Archivo</label>
</div>
表单
普通表单
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
文件域表单组
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
小号表单组件
<input class="form-control form-control-sm" type="text">
大号表单组件
<input class="form-control form-control-lg" type="text">
只读组件
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
只读的文本组件
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
滑块组件
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
选择框组件
<!-- 复选框 -->
<div class="form-group form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<!-- 单选框 -->
<div class="form-group form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
水平排列的选则框组
<!-- 复选框 -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<!-- 单选框 -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
无标签的选择框
<!-- 复选框 -->
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1">
</div>
<!-- 单选框 -->
<div class="form-check">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1">
</div>
表单组布局
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
</form>
表单网格布局
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
表单行布局
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
表单行组布局
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
</form>
水平布局的表单(标签和输入框同行)
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
</form>
大号水平布局的表单
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="inputEmail3">
</div>
</div>
</form>
小号水平布局的表单
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="inputEmail3">
</div>
</div>
</form>
表单元素整体垂直居中
<div class="form-row align-items-center"> ... </div>
自定义的表单组件
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto my-1">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
<label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
水平方向的自定义组件
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
开关组件
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
自定义滑块组件
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
内联表单
<form class="form-inline">...</form>
帮助文本
<div class="from-group">
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
</div>
表单验证
<form class="was-validated">
<input type="text" class="form-control" value="" required>
<input type="submit" value="提交">
</form>
不进行表单验证(表单验证不通过一样会提交)
<form class="was-validated" novalidate>
<input type="text" class="form-control" value="" required>
<input type="submit" value="提交">
</form>
表单验证的提示信息
<form class="was-validated">
<div class="form-row">
<input type="text" class="form-control col-4" value="" required>
<div class="col-4 valid-feedback">正确</div>
<div class="col-4 invalid-feedback">错误</div>
</div>
<input type="submit" value="提交">
</form>
服务器端控制有效性
<form>
<input type="text" class="form-control is-valid" value="有效的">
<input type="text" class="form-control is-invalid" value="无效的">
</form>
工具条提示信息
<form class="was-validated">
<div class="form-row">
<div class="col-4">
<input type="text" class="form-control" value="" required>
<div class="valid-tooltip">正确</div>
<div class="invalid-tooltip">错误</div>
</div>
<div class="col-4">
<input type="submit" value="提交">
</div>
</div>
</form>
卡片
普通卡片
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">...</h5>
<h6 class="card-subtitle">...</h6>
<p class="card-text">...</p>
<a href="#" class="card-link">...</a>
</div>
</div>
列表组卡片
<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
</ul>
</div>
卡片的头部和脚部
<div class="card">
<div class="card-header">...</div>
<div class="card-body">...</div>
<div class="card-footer">...</div>
</div>
带导航头的卡片
<div class="card">
<div class="card-header">
<ul class="nav nav-tabls card-header-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">...</a>
<a href="#" class="nav-link">...</a>
</li>
</ul>
</div>
<div class="card-body">...</div>
</div>
内容覆盖图片上方
<div class="card">
<img src="..." class="card-img">
<div class="card-img-overlay">...</div>
</div>
图文水平排版
<div class="card">
<div class="row nu-gutters">
<div class="col-4">
<img src="..." class="card-img">
</div>
<div class="col-4">
<div class="card-body">...</div>
</div>
</div>
</div>
卡片组(卡片之间无边距)
<div class="card-group">
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</div>
卡片组(卡片之间由边距)
<div class="card-deck">
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</div>
垂直布局的卡片组
类似于瀑布流,卡片的堆叠顺序是从上至下的
<div class="card-columns">
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</div>
设置垂直布局的卡片组的列数
.card-columns {
column-count: 5;
}
轮播
纯自动轮播
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100">
</div>
</div>
</div>
带左右控制器的轮播图
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">...</div>
<a href="#carousel-1" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carousel-1" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
带指示条的轮播图
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">...</div>
<a href="#carousel-1" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carousel-1" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
带标题的轮播图
<div id="carousel-1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
</div>
</div>
切换时有显隐动画的轮播图
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">...</div>
调整自动录播时的间隔时间
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item" data-interval="1000">...</div>
</div>
</div>
折叠(手风琴)
简单折叠
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">Link</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">Button</button>
</p>
<div class="collapse" id="collapseExample">...</div>
控制多个目标进行折叠
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".collapseExample">Button</button>
</p>
<div class="collapse collapseExample">...</div>
<div class="collapse collapseExample">...</div>
手风琴
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordionExample">
<div class="card-body">...</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordionExample">
<div class="card-body">...</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordionExample">
<div class="card-body">...</div>
</div>
</div>
</div>
巨幕
普通巨幕
<div class="jumbotron">
<div class="container">...</div>
</div>
流式巨幕
取消了圆角与左右内边距
<div class="jumbotron jumbotron-fluid">
<div class="container">...</div>
</div>
列表组
简单的列表组
<ul class="list-group">
<li class="list-group-item active">...</li>
<li class="list-group-item disabled">...</li>
<li class="list-group-item">...</li>
</ul>
链接组成的列表组
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">...</a>
</div>
按钮组成的列表组
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action">...</button>
</div>
列表项鼠标悬浮变色
<ul class="list-group">
<li class="list-group-item list-group-item-action">...</li>
</ul>
取消外边框
<ul class="list-group list-group-flush">...</ul>
水平方向的列表组
<ul class="list-group list-group-horizontal-{breakpoint}">...</ul>
{breakpoint}
取值:省略,sm,md,lg,xl
设置列表项的请景色
<ul class="list-group">
<li class="list-group-item list-group-item-{color}">...</li>
</ul>
{color}
取值:primary,secondary,success,danger,warning,info,light,dark
带徽章的列表项
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
item1
<span class="badge badge-primary badge-pill">14</span>
</li>
</ul>
切换面板功能
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content">
<div class="tab-pane fade show active" id="list-home">...</div>
<div class="tab-pane fade" id="list-profile">...</div>
<div class="tab-pane fade" id="list-messages">...</div>
<div class="tab-pane fade" id="list-settings">...</div>
</div>
</div>
</div>
媒体对象
普通媒体对象
<div class="media">
<img src="..." class="mr-3">
<div class="media-body">...</div>
</div>
嵌套媒体对象
<div class="media">
<img src="..." class="mr-3">
<div class="media-body">
...
<div class="media mt-3">
<img src="..." class="mr-3">
<div class="media-body">...</div>
</div>
</div>
</div>
图片排版方向
<!-- 顶部对齐 -->
<div class="media">
<img src="..." class="mr-3 align-self-start">
<div class="media-body">...</div>
</div>
<!-- 居中对齐 -->
<div class="media">
<img src="..." class="mr-3 align-self-center">
<div class="media-body">...</div>
</div>
<!-- 底部对齐 -->
<div class="media">
<img src="..." class="mr-3 align-self-end">
<div class="media-body">...</div>
</div>
图片在右侧
<div class="media">
<div class="media-body">...</div>
<img src="..." class="ml-3">
</div>
媒体对象列表
<ul class="list-unstyled">
<li class="media">
<img src="..." class="mr-3">
<div class="media-body">...</div>
</li>
</ul>
模态框
普通模态框
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">...</h5>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
</div>
使用按钮激活模态框
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">show modal</button>
<div class="modal fade" id="exampleModal">...</div>
静态的模态框
<button type="button" class="btn btn-primary" data-toggle="static" data-target="#exampleModal">show modal</button>
<div class="modal fade" id="exampleModal">...</div>
模态框滚动时显示滚动条
<div class="modal fade" id="exampleModal">
<div class="modal-dialog modal-dialog-scrollable">...</div>
</div>
垂直居中的模态框
<div class="modal fade" id="exampleModal">
<div class="modal-dialog modal-dialog-centered">...</div>
</div>
超大模态框
<div class="modal fade bd-example-modal-xl" id="exampleModal">
<div class="modal-dialog modal-xl">...</div>
</div>
大模态框
<div class="modal fade bd-example-modal-lg" id="exampleModal">
<div class="modal-dialog modal-lg">...</div>
</div>
小模态框
<div class="modal fade bd-example-modal-sm" id="exampleModal">
<div class="modal-dialog modal-sm">...</div>
</div>
通过JavaScript显示模态框
$('.modal').modal('show')
导航
简单导航
<!-- ul-li 导航 -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<!-- nav-a 导航 -->
<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
垂直方向的导航
<ul class="nav flex-column">...</ul>
标签导航
<ul class="nav nav-tabs">...</ul>
胶囊导航
<ul class="nav nav-pills">...</ul>
导航完全填充父级宽度(每个导航项不等宽)
<!-- ul-li 导航 -->
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a href="#" class="nav-link">...</a>
</li>
</ul>
<!-- nav-a 导航 -->
<nav class="nav nav-pills nav-fill">
<a href="#" class="nav-item nav-link">...</a>
</nav>
导航完全填充父级宽度(每个导航项等宽)
<!-- ul-li 导航 -->
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#" class="nav-link">...</a>
</li>
</ul>
<!-- nav-a 导航 -->
<nav class="nav nav-pills nav-justified">
<a href="#" class="nav-item nav-link">...</a>
</nav>
可切换的标签导航
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel-1">panel-1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel-2">panel-2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel-3">panel-3</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="panel-1">...</div>
<div class="tab-pane fade" id="panel-2">...</div>
<div class="tab-pane fade" id="panel-3">...</div>
</div>
导航条
基础导航条
<nav class="navbar navbar-expand-{breakpoint} navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">link3</a>
</li>
</ul>
</div>
</nav>
{breakpoint}
取值:省略,sm,md,lg,xl
带logo的导航条
<!-- 文本形式 -->
<nav class="navbar navbar-expand navbar-light bg-light">
<a href="#" class="navbar-brand">Logo</a>
<button>...</button>
<div class="collapse navbar-collapse" id="navbarNav">...</div>
</nav>
<!-- 图片形式 -->
<nav class="navbar navbar-expand navbar-light bg-light">
<a href="#" class="navbar-brand">
<img src="..." width="30" height="30" class="d-inline-block align-top">
</a>
<button>...</button>
<div class="collapse navbar-collapse" id="navbarNav">...</div>
</nav>
<!-- 图文形式 -->
<nav class="navbar navbar-expand navbar-light bg-light">
<a href="#" class="navbar-brand">
<img src="..." width="30" height="30" class="d-inline-block align-top">
Logo
</a>
<button>...</button>
<div class="collapse navbar-collapse" id="navbarNav">...</div>
</nav>
** 带dropdown的导航条**
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
带表单的导航条
<nav class="navbar navbar-expand navbar-light bg-light">
<a href="#" class="navbar-brand">Logo</a>
<button>...</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">...</ul>
<form class="form-inline">
<input type="text" class="form-control">
<button type="submit" class="btn btn-outline-success">搜索</button>
</form>
</div>
</nav>
带文本内容的导航条
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">...</span>
</nav>
暗色导航条
<nav class="navbar navbar-dark bg-dark">...</nav>
导航条网页居中
<!-- 方式一 -->
<div class="container">
<nav class="navbar navbar-dark bg-dark">...</nav>
</div>
<!-- 方式二 -->
<nav class="navbar navbar-dark bg-dark">
<div class="container">...</div>
</nav>
导航固定到顶部
<nav class="navbar navbar-light bg-light fixed-top">...</nav>
导航固定到底部
<nav class="navbar navbar-light bg-light fixed-bottom">...</nav>
导航黏在顶部
<nav class="navbar navbar-light bg-light sticky-top">...</nav>
控制导航外的区域显隐
<div class="collapse" id="navbarToggleExternalContent">...</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
分页
普通分页
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">上一页</a>
<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="#">下一页</a></li>
</ul>
</nav>
上一页和下一页的图标形式
<!-- 上一页 -->
<li class="page-item"><a class="page-link" href="#"><span>«</span></a></li>
<!-- 下一页 -->
<li class="page-item"><a class="page-link" href="#"><span>»</span></a></li>
分页项的状态
<!-- 激活状态 -->
<li class="page-item active">...</li>
<!-- 禁用状态 -->
<li class="page-item disabled">...</li>
分页尺寸
<!-- 小尺寸 -->
<ul class="pagination pagination-sm">...</ul>
<!-- 大尺寸 -->
<ul class="pagination pagination-lg">...</ul>
分页器位置
<!-- 页面居中 -->
<ul class="pagination justify-content-center">...</ul>
<!-- 页面居右 -->
<ul class="pagination justify-content-end">...</ul>
弹出框
普通弹出框
<button class="btn btn-danger" data-toggle="popover" title="标题" data-content="内容">...</button>
<style>
$('[data-toggle="popover"]').popover()
</style>
弹出框方向
<!-- 上部 -->
<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="top" data-content="">...</button>
<!-- 右部 -->
<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="right" data-content="">...</button>
<!-- 下部 -->
<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="bottom" data-content="">...</button>
<!-- 左部 -->
<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="left" data-content="">...</button>
弹框触发方式
<!-- 获取焦点弹框显示,失去焦点弹框消失 -->
<a tabindex="0" class="btn btn-danger" data-toggle="popover" data-trigger="focus" title="" data-content="">...</a>
<!-- 鼠标悬浮弹框显示,鼠标离开弹框消失 -->
<a tabindex="0" class="btn btn-danger" data-toggle="popover" data-trigger="hover" title="" data-content="">...</a>
进度条
普通进度条
<div class="progress">
<div class="progress-bar" style="width:25%"></div>
</div>
带标签的进度条
<div class="progress">
<div class="progress-bar" style="width:25%">25%</div>
</div>
设置进度条的高度
<div class="progress" style="height:1px">
<div class="progress-bar" style="width:25%"></div>
</div>
设置进度条的颜色
<div class="progress">
<div class="progress-bar bg-success" style="width:25%"></div>
</div>
多条进度指示的进度条
<div class="progress">
<div class="progress-bar" style="width: 15%"></div>
<div class="progress-bar bg-success" style="width: 30%"></div>
<div class="progress-bar bg-info" style="width: 20%"></div>
</div>
条纹进度条
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
带动画效果的进度条
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>
滚动监听
导航滚动监听
<!-- 水平方向 -->
<nav class="navbar navbar-light bg-light" id="navbar1">
<a class="navbar-brand" href="#">Logo</a>
<ul class="nav nav-pills">
<li class="nav-item"><a href="#one" class="nav-link">one</a></li>
<li class="nav-item"><a href="#two" class="nav-link">two</a></li>
<li class="nav-item"><a href="#three" class="nav-link">three</a></li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar1" data-offset="0" style="height: 300px;overflow: scroll;position: relative;">
<h4 id="one">one title</h4>
<p>...</p>
<h4 id="two">two title</h4>
<p>...</p>
<h4 id="three">three title</h4>
<p>...</p>
</div>
<!-- 垂直方向 -->
<div class="row">
<div class="col-4">
<nav class="navbar navbar-light bg-light flex-column" id="navbar2">
<a class="navbar-brand" href="#">Logo</a>
<nav class="nav nav-pills flex-column">
<a href="#one" class="nav-link">one</a>
<a href="#two" class="nav-link">two</a>
<a href="#three" class="nav-link">three</a>
</nav>
</nav>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#navbar2" data-offset="0" style="height: 300px;overflow: scroll;position: relative;">
<h4 id="one">one title</h4>
<p>...</p>
<h4 id="two">two title</h4>
<p>...</p>
<h4 id="three">three title</h4>
<p>...</p>
</div>
</div>
</div>
列表组滚动监听
<div class="row">
<div class="col-4">
<div class="list-group" id="listGroup">
<a class="list-group-item list-group-item-action" href="#one">ont</a>
<a class="list-group-item list-group-item-action" href="#two">two</a>
<a class="list-group-item list-group-item-action" href="#three">three</a>
</div>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#listGroup" data-offset="0" style="height: 300px;overflow: scroll;position: relative;">
<h4 id="one">one title</h4>
<p>...</p>
<h4 id="two">two title</h4>
<p>...</p>
<h4 id="three">three title</h4>
<p>...</p>
</div>
</div>
</div>
</div>
加载图标
图标形式
<!-- 边框形式 -->
<div class="spinner-border"></div>
<!-- 扩展形式 -->
<div class="spinner-grow"></div>
图标颜色
<div class="spinner-border text-{color}"></div>
{color}
取值:primary,secondary,success,danger,warning,info,light,dark
位置调整
<!-- 通过外边距调整 -->
<div class="spinner-border m-5"></div>
<!-- 通过flex父级容器调整 -->
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status"></div>
</div>
图标尺寸
<div class="spinner-border" style="width: 3rem; height: 3rem;"></div>
按钮形式的加载图标
<!-- 边框形式 -->
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<!-- 扩展形式 -->
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
轻量弹窗
基本使用
<button class="show_toast">show toast</button>
<div class="toast">
<div class="toast-header">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<script>
$('.toast').toast({
animation:true, // 开启动画效果
autohide:true, // 自动隐藏
delay:2000 // 显示时长 2s
})
// 点击按钮显示提示框
$('.show_toast').click(function(){
$('.toast').toast('show')
})
</script>
设置提示框的位置
<div class="toast" style="position: absolute;top: 10px;right: 10px;">...</div>
设置提示框停留时间
<div class="toast" data-delay="10000">...</div>
关闭自动隐藏
<div class="toast" data-autohide="false">...</div>
工具提示框
基本使用
<!-- 上方显示 -->
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<!-- 右边显示 -->
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<!-- 下边显示 -->
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<!-- 左边显示 -->
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
<!-- 包含HTML代码 -->
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
<script>
$('[data-toggle="tooltip"]').tooltip()
</script>