Bootstrap 类 ====================================== 主要针对Bootstrap4.0
栅格系统
.container 最基础容器
.container-fluid 最基础容器
Extra small
Small
Medium
Large
Extra large
.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%
Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
最大容器宽度
None (auto)
540px
720px
960px
1140px
Class 前缀
.col-
.col-sm-
.col-md-
.col-lg-
.col-xl-
# of columns
12
间隙
30px (15px on each side of a column)
嵌套
Yes
Column ordering
Yes
row-cols- 112, 可以控制整体栅格 row-cols- smxl -1~12, 可以控制各尺寸时的整体栅格
版式 标题 强调
Class
功能
颜色
.text-muted
提示
浅灰色
.text-primary
主要
蓝色
.text-success
成功
浅绿色
.text-info
通知
浅蓝色
.text-warning
警告
浅黄色
.text-danger
提示
浅红色
对齐
Class
功能
.text-left
左对齐
.text-right
右对齐
.text-center
居中
缩略 abbr标签 配合 title属性
按钮 .btn 按钮基础样式
Class
功能
颜色
.btn-primary
主要
蓝色
.btn-success
成功
浅绿色
.btn-info
通知
浅蓝色
.btn-warning
警告
浅黄色
.btn-danger
提示
浅红色
.btn-light
提示
浅灰色
.btn-dark
提示
黑色
Class
大小
.btn-lg
大号按钮
.btn-sm
小号按钮
.btn-xs
迷你按钮
Class
状态
.disabled
禁用
.active
激活
图片
Class
功能
.img-thumbnail
缩略图(添加边框)
.img-fluid
最大(原尺寸)
.rounded
圆角
布局 浮动
Class
功能
.float-left
左浮动
.float-right
右浮动
.mx-auto d-block
居中
Vertical alignment
Class
功能
.align-items-start
元素位于容器的开头
.align-items-center
元素位于容器的上下居中
.align-items-end
元素位于容器的底部
.justify-content-start
元素位于容器的开头
.justify-content-center
元素位于容器的中心
.justify-content-end
元素位于容器的结尾
.justify-content-around
元素位于周围有空白的容器内
.justify-content-between
元素位于两端对齐,项目之间的间隔都相等
工具
z-index
Class
功能
$zindex-dropdown:
1000 !default;
$zindex-sticky:
1020 !default;
$zindex-fixed:
1030 !default;
$zindex-modal-backdrop:
1040 !default;
$zindex-modal:
1050 !default;
$zindex-popover:
1060 !default;
$zindex-tooltip:
1070 !default;
CSS组件 下拉菜单 下拉菜单必须放在 dropdown
类容器中
1 2 3 4 5 6 7 8 9 10 <div class="dropdown" > <button class="btn btn-secondary dropdown-toggle" type ="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" > <a class="dropdown-item" href="#" >Action</a> <a class="dropdown-item" href="#" >Another action</a> <a class="dropdown-item" href="#" >Something else here</a> </div> </div>
a标签型 1 2 3 4 5 6 7 8 9 10 11 <div class="dropdown" > <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > Dropdown link </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" > <a class="dropdown-item" href="#" >Action</a> <a class="dropdown-item" href="#" >Another action</a> <a class="dropdown-item" href="#" >Something else here</a> </div> </div>
按钮分割型 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!-- Example split danger button --> <div class="btn-group" > <button type ="button" class="btn btn-danger" >Action</button> <button type ="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > <span class="sr-only" >Toggle Dropdown</span> </button> <div class="dropdown-menu" > <a class="dropdown-item" href="#" >Action</a> <a class="dropdown-item" href="#" >Another action</a> <a class="dropdown-item" href="#" >Something else here</a> <div class="dropdown-divider" ></div> <a class="dropdown-item" href="#" >Separated link</a> </div> </div>
上拉菜单 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!-- Default dropup button --> <div class="btn-group dropup" > <button type ="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > Dropup </button> <div class="dropdown-menu" > <!-- Dropdown menu links --> </div> </div> <!-- Split dropup button --> <div class="btn-group dropup" > <button type ="button" class="btn btn-secondary" > Split dropup </button> <button type ="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > <span class="sr-only" >Toggle Dropdown</span> </button> <div class="dropdown-menu" > <!-- Dropdown menu links --> </div> </div>
左菜单 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!-- Default dropleft button --> <div class="btn-group dropleft" > <button type ="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > Dropleft </button> <div class="dropdown-menu" > <!-- Dropdown menu links --> </div> </div> <!-- Split dropleft button --> <div class="btn-group" > <div class="btn-group dropleft" role="group" > <button type ="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > <span class="sr-only" >Toggle Dropleft</span> </button> <div class="dropdown-menu" > <!-- Dropdown menu links --> </div> </div> <button type ="button" class="btn btn-secondary" > Split dropleft </button> </div>
右菜单 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!-- Default dropright button --> <div class="btn-group dropright" > <button type ="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > Dropright </button> <div class="dropdown-menu" > <!-- Dropdown menu links --> </div> </div> <!-- Split dropright button --> <div class="btn-group dropright" > <button type ="button" class="btn btn-secondary" > Split dropright </button> <button type ="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > <span class="sr-only" >Toggle Dropright</span> </button> <div class="dropdown-menu" > <!-- Dropdown menu links --> </div> </div>
自定义菜单(Form,text) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div class="dropdown-menu" > <form class="px-4 py-3" > <div class="form-group" > <label for ="exampleDropdownFormEmail1" >Email address</label> <input type ="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com" > </div> <div class="form-group" > <label for ="exampleDropdownFormPassword1" >Password</label> <input type ="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password" > </div> <div class="form-group" > <div class="form-check" > <input type ="checkbox" class="form-check-input" id="dropdownCheck" > <label class="form-check-label" for ="dropdownCheck" > Remember me </label> </div> </div> <button type ="submit" class="btn btn-primary" >Sign in </button> </form> <div class="dropdown-divider" ></div> <a class="dropdown-item" href="#" >New around here? Sign up</a> <a class="dropdown-item" href="#" >Forgot password?</a> </div>
下拉菜单选项 可以控制按钮和菜单之间的距离
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <div class="d-flex" > <div class="dropdown mr-1" > <button type ="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20" > Offset </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset" > <a class="dropdown-item" href="#" >Action</a> <a class="dropdown-item" href="#" >Another action</a> <a class="dropdown-item" href="#" >Something else here</a> </div> </div> <div class="btn-group" > <button type ="button" class="btn btn-secondary" >Reference</button> <button type ="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent" > <span class="sr-only" >Toggle Dropdown</span> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuReference" > <a class="dropdown-item" href="#" >Action</a> <a class="dropdown-item" href="#" >Another action</a> <a class="dropdown-item" href="#" >Something else here</a> <div class="dropdown-divider" ></div> <a class="dropdown-item" href="#" >Separated link</a> </div> </div> </div>
相关class
Class
功能
.active
激活状态
.disabled
禁用状态
.dropdown-menu-right(.dropdown-menu- 尺寸 -right)
右对齐
.dropdown-header
菜单标题
.dropdown-divider
菜单分割线
菜单的安装方法
添加 `data-toggle=”dropdown” 到链接或是按钮来创建一个菜单1 2 3 4 5 6 7 8 <div class="dropdown" > <button id="dLabel" type ="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > Dropdown trigger </button> <div class="dropdown-menu" aria-labelledby="dLabel" > ... </div> </div>
添加js代码1 $('.dropdown-toggle' ).dropdown()
按钮组 定义按钮组 使用 .btn-group
和一系列的a标签及按钮,组成一个按钮工具条
基础样式 1 2 3 4 5 <div class="btn-group" role="group" aria-label="Basic example" > <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>
按钮工具栏 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups" > <div class="btn-group mr-2" role="group" aria-label="First group" > <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" role="group" aria-label="Second group" > <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" role="group" aria-label="Third group" > <button type ="button" class="btn btn-secondary" >8</button> </div> </div>
立式按钮 1 2 3 <div class="btn-group-vertical" > ... </div>
组合 可以根据自己的需要进行 按钮 + 菜单 按钮 + Form 各种形式的组合
导航 定义导航组件,基础导航 使用nav及nav-item,nav-link, disabled
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <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="#" tabindex="-1" aria-disabled="true" >Disabled</a> </li> </ul>
立式导航 使用flex-colum来控制导航方向
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <ul class="nav flex-column" > <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="#" tabindex="-1" aria-disabled="true" >Disabled</a> </li> </ul>
Tab型导航 使用nav-tabs控制样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <ul class="nav nav-tabs" > <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="#" tabindex="-1" aria-disabled="true" >Disabled</a> </li> </ul>
Pills型(按钮型) 使用nav-pills控制样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <ul class="nav nav-pills" > <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="#" tabindex="-1" aria-disabled="true" >Disabled</a> </li> </ul>
自动填充型 使用nav-fill或是nav-justified
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <ul class="nav nav-pills nav-fill" > <li class="nav-item" > <a class="nav-link active" href="#" >Active</a> </li> <li class="nav-item" > <a class="nav-link" href="#" >Much longer nav 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="#" tabindex="-1" aria-disabled="true" >Disabled</a> </li> </ul>
下拉导航 使用dropdown及dropdown-item
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <ul class="nav nav-tabs" > <li class="nav-item" > <a class="nav-link active" href="#" >Active</a> </li> <li class="nav-item dropdown" > <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" >Dropdown</a> <div class="dropdown-menu" > <a class="dropdown-item" href="#" >Action</a> <a class="dropdown-item" href="#" >Another action</a> <a class="dropdown-item" href="#" >Something else here</a> <div class="dropdown-divider" ></div> <a class="dropdown-item" href="#" >Separated link</a> </div> </li> <li class="nav-item" > <a class="nav-link" href="#" >Link</a> </li> <li class="nav-item" > <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" >Disabled</a> </li> </ul>
JavaScript动作 配合bootstrap.js可以简单实现tab功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <ul class="nav nav-tabs" id="myTab" role="tablist" > <li class="nav-item" role="presentation" > <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" >Home</a> </li> <li class="nav-item" role="presentation" > <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" >Profile</a> </li> <li class="nav-item" role="presentation" > <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" >Contact</a> </li> </ul> <div class="tab-content" id="myTabContent" > <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" >...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" >...</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab" >...</div> </div>
Javascript代码
1 2 3 4 5 6 7 8 9 $('#myTab a' ).on('click' , function (e) { e.preventDefault() $(this).tab('show' ) }) $('#myTab a[href="#profile"]' ).tab('show' ) // Select tab by name $('#myTab li:first-child a' ).tab('show' ) // Select first tab $('#myTab li:last-child a' ).tab('show' ) // Select last tab $('#myTab li:nth-child(3) a' ).tab('show' ) // Select third tab
导航条 使用navbar
.navbar-brand 公司,产品,项目的名称.
.navbar-nav 自动轻量级导航支持下拉菜单.
.navbar-toggler 导航折叠展开及切换的动作
.form-inline 提供Form组件
.navbar-text 提供垂直居中的文字效果
.collapse.navbar-collapse 用于组分类隐藏导航栏效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <nav class="navbar navbar-expand-lg navbar-light bg-light" > <a class="navbar-brand" href="#" >Navbar</a> <button class="navbar-toggler" type ="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon" ></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent" > <ul class="navbar-nav mr-auto" > <li class="nav-item active" > <a class="nav-link" href="#" >Home <span class="sr-only" >(current)</span></a> </li> <li class="nav-item" > <a class="nav-link" href="#" >Link</a> </li> <li class="nav-item dropdown" > <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown" > <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> <li class="nav-item" > <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" >Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0" > <input class="form-control mr-sm-2" type ="search" placeholder="Search" aria-label="Search" > <button class="btn btn-outline-success my-2 my-sm-0" type ="submit" >Search</button> </form> </div> </nav>
面包屑 使用breadcrumb
1 2 3 4 5 6 7 <nav aria-label="breadcrumb" > <ol class="breadcrumb" > <li class="breadcrumb-item" ><a href="#" >Home</a></li> <li class="breadcrumb-item" ><a href="#" >Library</a></li> <li class="breadcrumb-item active" aria-current="page" >Data</li> </ol> </nav>
修改分割符
1 2 3 $breadcrumb -divider: quote(">" ); //纯字符$breadcrumb -divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+); //base64图片$breadcrumb -divider: none; //删除
分页 使用 pagenation
1 2 3 4 5 6 7 8 9 <nav aria-label="Page navigation example" > <ul class="pagination" > <li class="page-item" ><a class="page-link" href="#" >Previous</a></li> <li class="page-item" ><a class="page-link" href="#" >1</a></li> <li class="page-item" ><a class="page-link" href="#" >2</a></li> <li class="page-item" ><a class="page-link" href="#" >3</a></li> <li class="page-item" ><a class="page-link" href="#" >Next</a></li> </ul> </nav>
添加左右按钮
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <nav aria-label="Page navigation example" > <ul class="pagination" > <li class="page-item" > <a class="page-link" href="#" aria-label="Previous" > <span aria-hidden="true" >«</span> </a> </li> <li class="page-item" ><a class="page-link" href="#" >1</a></li> <li class="page-item" ><a class="page-link" href="#" >2</a></li> <li class="page-item" ><a class="page-link" href="#" >3</a></li> <li class="page-item" > <a class="page-link" href="#" aria-label="Next" > <span aria-hidden="true" >»</span> </a> </li> </ul>
利用 .disabled
和 .active
来改变按钮的激活状态。
标签和徽章 label 和 badge-secondary来替代 label标签实现圆角样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <button type ="button" class="btn btn-primary" > Notifications <span class="badge badge-light" >4</span> </button> <span class="badge badge-primary" >Primary</span> <span class="badge badge-secondary" >Secondary</span> <span class="badge badge-success" >Success</span> <span class="badge badge-danger" >Danger</span> <span class="badge badge-warning" >Warning</span> <span class="badge badge-info" >Info</span> <span class="badge badge-light" >Light</span> <span class="badge badge-dark" >Dark</span> <span class="badge badge-pill badge-primary" >Primary</span> <span class="badge badge-pill badge-secondary" >Secondary</span> <span class="badge badge-pill badge-success" >Success</span> <span class="badge badge-pill badge-danger" >Danger</span> <span class="badge badge-pill badge-warning" >Warning</span> <span class="badge badge-pill badge-info" >Info</span> <span class="badge badge-pill badge-light" >Light</span> <span class="badge badge-pill badge-dark" >Dark</span>
警告框 使用 alert实现各种警告样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div class="alert alert-primary" role="alert" > A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert" > A simple secondary alert—check it out! </div> <div class="alert alert-success" role="alert" > A simple success alert—check it out! </div> <div class="alert alert-danger" role="alert" > A simple danger alert—check it out! </div> <div class="alert alert-warning" role="alert" > A simple warning alert—check it out! </div> <div class="alert alert-info" role="alert" > A simple info alert—check it out! </div> <div class="alert alert-light" role="alert" > A simple light alert—check it out! </div> <div class="alert alert-dark" role="alert" > A simple dark alert—check it out! </div>
还可以配合Javascript动作
方法
说明
$().alert()
监控指定元素的click事件,来执行alert()方法
$().alert(‘close’)
关闭警告提示框并删除相应DOM,如果存在.fade和.show,效果为淡出
$().alert(‘dispose’)
禁止元素提示警告