BootStrap4

最新推荐文章于 2022-09-14 08:12:34 发布
最新推荐文章于 2022-09-14 08:12:34 发布
阅读量1.2k 收藏 10
点赞数
文章标签： 列表 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45027950/article/details/108863838
版权

[[toc]]

Bootstrap4.4介绍

  1. 全球最受欢迎的前端组件库
  2. 用于开发响应式布局、移动设备优先的 WEB 项目
  3. 基于JQuery

Bootstrap4.4的安装

  1. 本地安装
    官网：https://v4.bootcss.com/
  2. 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>
  3. NPM安装
    npm install bootstrap
npm i jquery
npm i @popperjs/core

栅格系统

视口尺寸划分

视口类型标识尺寸
超小视口xs视口宽 < 576px
小视口sm视口宽 ≥ 576px
中等视口md视口宽 ≥ 576px
大视口lg视口宽 ≥ 992px
超大视口xl视口宽 ≥ 1200px

容器宽度

容器类xssmmdlgxl
.container100%540px720px960px1140px
.container-sm100%540px720px960px1140px
.container-md100%100%720px960px1140px
.container-lg100%100%100%960px1140px
.container-xl100%100%100%100%1140px
.container-fluid100%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

元素显隐表

类xssmmdlgxl
.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">&times;</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">&times;</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>&laquo;</span></a></li>
<!-- 下一页 -->
<li class="page-item"><a class="page-link" href="#"><span>&raquo;</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">&times;</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>

资源下载

  1. bootstrap-4.4.1-dist.zip
  2. jquery.zip
  3. popper.zip
樊尘大大怪
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
设置主轴方向和弹性盒子换行~~~~
weixin_57320268的博客
02-14 3532
1. 主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction 属性值 作用 row 行, 水平(默认值) column *列, 垂直 row-reverse 行, 从右向左 column-reverse 列, 从下向上 flex-direction：column; 修改完毕，主轴是Y轴， 侧轴是X轴。 2.弹性盒子换行 特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，
Bootstrap 5-圆角
最新发布
m0_73839298的博客
05-10 269
【代码】Bootstrap 5-圆角。
jquery 给类名元素添加行内样式_bootstrap4常用样式整理
weixin_39861823的博客
11-19 410
使用bootstrap需要的文件css文件<js文件<bootstrap官网传送门：https://v4.bootcss.com/docs/getting-started/introduction/组件传送门：https://v4.bootcss.com/docs/components/alerts/更多轮播图推荐传送门：https://www.swiper.com.cn/容器和网格系...
bootstrap常见样式
坚持原创
04-11 960
container有padding-left,padding-right:15px row有margin-left,margin-right:-15px 所以container跟row一起用就会抵消内外边距 col有padding-left,padding-right:15px row就相当于flex，尺寸在达到col-sm的时候才有水平排列（display:flex）的效果 <div ...
Bootstrap类名
qq_46615920的博客
08-22 1369
字体 .lead 用于一个段落的文字，使其显示效果显著。 .display-1 6倍根元素字体大小 .display-2 5.5倍根元素字体大小 .display-3 4.5倍根元素字体大小 .display-4 3.5倍根元素字体大小 .samll 小号字体，同samll标签 .mark 带有记号的文本，同mark标签 .initialism 字体大小为90%，字母大写 列表 .list-unstyled 无样式，无左内边距 .list-inl
bootstrap4实现购物商城
06-18
在"bootstrap4实现购物商城"这个项目中，我们将会探讨如何利用Bootstrap 4的强大功能来创建一个功能完备、视觉吸引人的在线购物平台。 首先，Bootstrap 4 提供了一套完整的网格系统，允许开发者轻松地创建多列布局...
select2-bootstrap4-theme：Bootstrap4的Select2 v4主题
01-29
select2-bootstrap4-主题 Bootstrap4的 v4主题（与boostrap 4.0.0+兼容） 现场演示 :backhand_index_pointing_right: 安装 CDN < link rel =" stylesheet " href =" /path/to/select2.css " > < link ...
bootstrap4中文离线手册.zip
12-07
这个"bootstrap4中文离线手册.zip"文件包含了所有关于Bootstrap 4的基础知识、组件、工具和最佳实践，方便开发者在没有网络连接的情况下查阅。 1. **基础知识**：Bootstrap 4 基于 HTML5 和 CSS3，使用 Less 作为预...
bootstrap-slider：Bootstrap 3和Bootstrap 4的滑块控件
01-29
从主要版本11.0.0开始，我们仅支持Bootstrap 4！ 安装 要使用凉亭吗？ bower install seiyria-bootstrap-slider 要使用npm吗？ npm install bootstrap-slider 想要从CDN获得它吗？ 基本设定 从目录中获取已编译...
AxureRP8 Bootstrap4元件库亲测可用
10-22
Bootstrap4是目前非常流行的一款前端开发框架，它简化了网页设计和开发流程，提供了丰富的预设样式、组件和JavaScript插件。而AxureRP8是一款交互原型设计工具，广泛用于产品经理、设计师和开发者进行产品原型设计。...
bootstrap4--常用布局组件二
zxn200125的博客
12-17 1054
bootstrap4常用布局组件中图像形状、信息提示框、进度条、加载效果、徽章等功能介绍与演示
bootstrap5 常用类大全
O8088的博客
09-14 1695
x – 设置padding-left和padding-right或margin-left和margin-right。y – 设置padding-top和padding-bottom或margin-top和margin-bottom。1 – 将边距或填充设置为.25rem(如果font-size为16px则为4px)5 – 将边距或填充设置为3rem(如果font-size为16px则为48px)3 – 将边距或填充设置为1rem(如果字体大小为16px，则为16px)
bootstrap+css实现表单透明效果
go
07-04 4873
前言: 前端网页小案例,使用bootstrap中的栅格布局，js插件登录注册模态框和css样式实现表单透明效果,具体效果如下: html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>联系我们</title> <link rel="stylesheet" href="css/bootstrap.min.cs
bootstrap ---- 边框效果
Cg_Companion_Xi的博客
05-10 767
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> .
Bootstrap的颜色与边框
jwz934738949的博客
07-04 2748
颜色 使用.text-实现特定的颜色，其中可以为success,danger,warning,primary,secondary,light,dark,muted,white,black 其中white与black还可以设置为text-white-50，text-black-50,分别表示颜色的一半 使用.text-*也可以实现超链接的点击与悬停，但是white与muted不支持 .bg-可以实现背景颜色的设置，其中与文本颜色一致，多一个transparent，用来设置背景色为透明 边框 使用.bor
bootstrap设置按钮样式
水中月
08-04 2177
href="http://www.bootcss.com/" class="button button-tiny">Go href="http://www.bootcss.com/" class="button button-rounded button-tiny">Go href="http://www.bootcss.com/" class="button button-pill b
10Bootstrap5徽章
醉瑾_的博客
12-10 272
10Bootstrap5徽章 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5徽章</title> <link rel="sty
bootstrap 圆角_Bootstrap的边框样式
weixin_34599904的博客
02-01 7061
使用边框通用定义类来快速设置元素的边框和边框半径，适用于图像、按钮或任何其他元素。添加border添加边框属性，显示指定边框。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...
bootstrap椭圆形按钮+css覆盖
温和的跳跃
10-24 2883
最直接的方式是用CSS覆盖掉Bootstrap的默认样式。可以通过针对Bootstrap中使用的class编写你自己的样式来实现。比如说，可以通过增加以下代码来使你的按钮变得更圆滑：   .btn { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; ...
Bootstrap 4入门与布局指南
《Bootstrap4 Cookbook》是一本专注于前端编程的实用指南，专为开发人员提供Bootstrap 4框架的深入理解和应用技巧。Bootstrap 4是流行的前端开发工具，它致力于简化网页设计与开发流程，使响应式布局和组件化开发变...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值