一、Container
BootStrap4 同样需要一个containing 元素包裹正文内容。
.container 提供了一个固定的宽;.container-fluid提供了一个易变的宽。
二、网格系统
BootStrap的网格系统是基于flexbox,允许至多12个纵列。如果不想单独使用12个纵列,可以将多个纵列组合在一起成为更宽的列。
网格系统是反映敏感的,列将自动的安排,根据屏幕大小。确保列的总数至多12个或更少,不需要使用12个所有可用的列。
BootStrap4网格系统提供了五个类:
.col- 非常小的设备,小于576px;
.col-sm- 小设备,等于或大于576px;
.col-md- 中等的设备,等于或大于768px;
.col-lg- 大设备,等于或大于992px;
.col-xg- 超大设备,屏幕宽等于或大于1200px;
.col 让bootstrap处理布局
三、文本和排版
BootStrap 默认 font-size 16px,line-height: 1.5,font-familty: "Helvetica Neue"。
并且,<p> 元素,margin-top: 0px,margin-bottom: 1rem (16px default)
3.1 heading
<h1>~<h6>
3.2 display heading
比正常的heading更突显(更大的字体,更粗的亮度)
.display-1, .display-2, display-3, display-4
3.3 <small>
small用于在任何heading中创建较轻、次一级的文本。
3.4 <mark>
将为文本添加黄色背景和一些padding。
3.5 <abbr>
将在边框border底边加点。<abbr title="javaScript">JS</abbr>
3.6 blockquote
添加 .blockquote 到<blockquote>中,添加 .blockquote-foot 到<blockquote>中的<footer> 里面。
3.7 dl
<dl>
<dt></dt>
<dd></dd>
</dl>
3.8 <code>
3.9 快捷键的样式 <kbd>
3.10 <pre>
3.11 多种排版类型:
1)字体:加粗、更粗、正常、变细、更细、斜体。
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text.</p>
<p class="font-italic">Italic text.</p>
2)突显一行:.lead
3)更小的字体: .small
4)行对齐:左对齐、右对齐、居中对齐
.text-left
.text-right
.text-center
5) list 没有样式 .list-unstyled
6) 行内元素 .list-inline
四、颜色
4.1 文本颜色
.text-muted 柔和的; .text-primary 首要的;.text-success 成功;.text-info 消息;.text-warning 警告;
.text-danger 危险;.text-secondary 次要的;.text-white 灰色;.text-dark 暗色;.text-body 默认颜色(黑色);
.text-light 亮色
4.2 背景颜色
.bg-primary 主要的; .bg-success 成功; .bg-info 信息; .bg-warning 警告; .bg-danger 危险; .bg-secondary 次要的;
.bg-dark 暗色的; .bg-light 亮色的;
五、表格
5.1 基础的样式有一个轻填充和水平分割
.table <table class="table">
5.2 给行添加条纹
.table-striped <table class="table table-striped">
5.3 为表格添加边框
.table-bordered <table class="table table-bordered">
5.4 光标移动到表格上会变色: hover
.table-hover <table class="table table-hover">
5.5 黑色背景的表格
.table-dark <table class="table table-dark">
5.6 黑灰相间的条纹表 .table-dark .table-striped
<table class="table table-dark table-striped">
5.7 .table-dark 和 .table-hover 结合
<table class="table table-dark table-hover">
5.8 移除表格边框
<table class="table table-borderless">
5.9 contextual 与上下文相关颜色
能够使用在整个<table> 或者<tr> 或者<td>上
.table-primary 主要的; .table-success 成功; .table-danger 危险; .table-info 信息; .table-warning 警告; .table-active 活跃;
.table-secondary 次要的; .table-light 亮色; table-dark 暗色;
5.10 表格头颜色
.thead-dark 为表头添加一个黑色的背景颜色; .thead-light 为表头添加一个灰色
5.11 小表
.table-sm 小表, 让padding变为一半
5.12 反映敏感的表 .table-responsive
将会为 小于992px的屏幕添加一个滚动条 ,大于992px,不会有什么特殊效果
也可以使用:
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
六、图片
6.1 为图片添加圆角
.rounded
6.2 将图片塑造成一个圆形
.rounded-circle
6.3 为图片添加边框
.img-thumbnail
6.4 浮动图片到左边或浮到到右边
.float-right 浮动到右边
.float-left 浮动到左边
6.5 让图片居中
添加公用的两个类: .mx-auto 和 .d-block
6.6 敏感的图片 .responsive image
.img-fluid 将自动调节适应屏幕
七、大的灰色框,为了唤起某些东西的格外关注
.jumbotron 大的灰框,有圆角
.jumbotron-fluid 大的灰框,没有圆角, 同时添加一个 .container 或 .container-fluid 在内部。
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
</div>
八、警报信息 alert
8.1 alert
.alert-success;.alert-info;.alert-warning;.alert-danger;.alert-primary;.alert-secondary;.alert-light;.alert-dark
<div class="alert alert-success">
8.2 alert-link
alert-link
8.3 关闭警报信息
添加 .alert-dismissible 到 alert 内容上,并且添加class="close" 和 data-dismiss="alert" 到一个连接或按钮上
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
8.4 动画alert
添加 .fade
和 .show ,将会有一个渐变色,在关闭的时候
<div class="alert alert-dark alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Dark!</strong> Dark grey alert.
</div>
九、按钮的样式
9.1 BootStrap 提供了多种样式:
.btn 无色; .btn-primary;.btn-secondary;.btn-secondary;.btn-success ;.btn-info;.btn-warning;.btn-danger;.btn-dark;.btn-light;.btn-link
<button type="button" class="btn btn-primary">Primary</button>
这些类也可以用到 <a> 、<button>、<input>标签上
9.2 按钮的轮廓
.btn .btn-outline-primary
.btn .btn-outline-secondary
.btn .btn-outline-success
.btn .btn-outline-info
.btn .btn-outline-warning
.btn .btn-outline-danger
.btn .btn-outline-dark
.btn .btn-outline-light .text-dark
<button type="button" class="btn btn-outline-dark">Dark</button>
9.3 按钮的大小
.btn-lg、默认、.tn-sm
<button type="button" class="btn btn-primary btn-sm">Small</button>
9.4 块级按钮
btn-block
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
9.5 活跃按钮和不可用按钮
.active
.disabled 让按钮不能点击
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
让<a>在视觉上显示为不可用
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
9.6 动画 Spinner
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
十、按钮组
10.1 BootStrap允许将一组按钮组织到一起:
使用<div> 里面放 .btn-group
10.2 可以在按钮组中设置大小代替在每个按钮中设定大小
.btn-group-lg 大按钮组; 默认; .btn-group-sm 小按钮组;
10.3 垂直的按钮组
.btn-group-vertical
<div class="btn-group-vertical">
10.4 嵌套按钮-下滑菜单
嵌套按钮组可以创建下滑列表(关于下滑列表,后面提到)
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
10.5 分开的下滑列表
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
10.6 垂直下拉框
.btn-group-vertical
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
10.7 一个接着一个的按钮组
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>
十一、宪章
badges是用于添加附件信息
将 .badge 类和 上下文语义类(如: .badge-secondary) 结合在一起放在<span> 属性里,创造方形的宪章,其大小和父类元素大小一致。
11.1 上下文语义的 badge
.badge-primary ; .badge-secondary ; .badge-success ; .badge-danger ; .badge-warning ; .badge-info ; .badge-light ; .badge-dark
<span class="badge badge-danger">Danger</span>
11.2 球粒宪章,让四个角变圆
.badge-pill
<span class="badge badge-pill badge-primary">Primary</span>
11.3 将一个宪章放到一个元素的内部
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">4</span>
</button>
十二、进程条
12.1 基础进程条
添加 .progress 类到一个内容元素中,然后添加 .progress-bar 到其孩子元素中,并在孩子元素中设置 width属性,指定进程条的宽。
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
12.2 进程条的高
进程条的高默认为 16px,使用height属性可以改变,必须同时为进程条容器和进程条设置该属性
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
12.3 进程条的标签
在进度条上添加文本内容,让百分比可见
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
12.4 为进程条添加颜色
默认进程条为蓝色,可以使用任何的上下文背景颜色来改变进程条的颜色
<!-- Green -->
<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>
12.5 有条纹的进度条
.progress-bar-striped
添加一个这个类
12.6 动态进度条
.progress-bar-animated
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
12.7 一个进度条分割成多部分
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
十三、旋转球
使用 .spinner-border 创建一个旋转球
13.1 为旋转球添加颜色
添加颜色的文本属性: .text-muted 、.text-primary、text-success、text-info
13.2 让增长的圆圈代替旋转
.spinner-grow
13.3 旋转球的大小
使用 .spinner-border-sm 或 .spinner-grow-sm 让“变大的圆点”和“旋转的球”变小
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
13.4 在按钮中添加旋转球,使用或不使用文本颜色
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
十四、页码标注
14.1 一个web页面有很多页,希望为每个页面添加页码标注
添加一个 .pagination 到 <ul> 元素中,然后添加 .page-item 到每一个 <li>元素中,将.page-link添加到每一个 <li>内部的链接中。
<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>
14.2 高亮当前页码
.active 用于高亮当前页码
14.3 不可用状态
.disabled 能够让链接显示为不可用状态
14.4 页码的大小
可以将页码设置为更大或更小: .pagination-lg 设置为更大;.pagination-sm 设置为更小;
14.5 页码的排列
页码默认是靠左。通过设置 .justify-content-center 能够让页码居中;通过设置 .justify-content-end 能够让页码靠右
14.6 导航层次中当前页面的位置
.breadcrumb 和 .breadcrumb-item
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
十五、列表组
15.1 无序列表
一个基础的列表:<ul>标签里面使用 .list-group ; <li>标签里面使用 .list-group-item
15.2 活跃的状态
.active 在列表中添加
15.6 列组和链接项
为了使用连接项,使用<div> 代替 <ul>, 使用<a> 标签代替 <li>,如果想让当鼠标悬停在上面的时候,出现灰色的背景,添加 .list-group-item-action
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
15.7 让列表项不可用
.disabled 在 不可用的项上,如果使用链接, 鼠标悬停的效果将失效。
15.8 刷新或移除边框
使用 .list-group-flush 类移除一些边框或圆角
15.9 水平的列表组
如果想要水平代替垂直,添加 .list-group-horizontal 到 .list-group 所在的属性中
<ul class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
15.10 与语义相关的 类
在列表项上添加:.list-group-item-success
, list-group-item-secondary
, list-group-item-info
, list-group-item-warning
, .list-group-item-danger
, .list-group-item-primary
, list-group-item-dark
and list-group-item-light;
也可以在链接项上添加这些属性
15.11 带有印章的列表
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary badge-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
十六、卡片
在BootStrap4中,卡片是一个加边的盒子,在其内容周围有一些padding,其包含的选项有: headers、footers、content、color等。
16.1 基础的卡片
一个基础的卡片是被带有“.card”类,里面还有一个 .card-body 的盒子
<div class="card">
<div class="card-body">Basic card</div>
</div>
16.2 卡片的header和footer
.card-header 为卡片添加一个头,card-footer 为卡片添加一个尾
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
16.3 为卡片添加背景颜色
.bg-primary
, .bg-success
, .bg-info
, .bg-warning
, .bg-danger
, .bg-secondary
, .bg-dark
and .bg-light
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
16.4 卡片的标题、文本和连接
.card-title .card-text card-link
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some Card Context</p>
<a href="#" class="card-link">Card link!</a>
</div>
</div>
16.5 卡片的图片
可以将添加了 .card-img-top 类的 <img>元素放到 .card-body 上面或者 把添加了 .card-img-bottom 类的<img>元素放到 .card-body的下面。
<div class="card">
<img class="card-img-top" src="san.png" alt="san" />
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some Card Context</p>
<a href="#" class="card-link">Card link!</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some Card Context</p>
<a href="#" class="card-link">Card link!</a>
</div>
<img class="card-img-bottom" src="san.png" alt="san" />
</div>
16.6 让整个卡片成为一个连接
为 <a> 标签添加 .stretched-link 类,这将让整个卡片可以点击,并且会有鼠标悬停效果。
<div class="card">
<img class="card-img-top" src="san.png" alt="san" />
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some Card Context</p>
<a href="#" class="btn btn-primary stretched-link">Card link!</a>
</div>
</div>
16.7 让图片称为卡片的背景
使用 .card-img-overlay 替换 .card-body
<div class="card" style="width:500px">
<div class="card-img-overlay">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some Card Context</p>
<a href="#" class="card-link">Card link!</a>
</div>
<img class="card-img-bottom" src="san.png" alt="san" />
</div>
16.8 卡片栏目
使用.card-columns 包裹多个 .card ,效果就像大理石块,一个挨着一个,排列随着卡片数量会有调整。
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">
Primary Card<br>
Welcome to China
</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Primary Card</p>
</div>
</div>
</div>
16.9 卡片板子
使用 .card-deck 包裹多个 .card ,将创建等高等宽的卡片,排布自动调整,随着放入的卡片越来越多。
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">
Primary Card<br>
I have a dream
</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Primary Card</p>
</div>
</div>
</div>
16.10 卡片组
.card-group和 .card-deck 类似,唯一不同的是 .card-group 去除了卡片间的空白间距
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">
Primary Card<br>
I have a dream
</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Primary Card</p>
</div>
</div>
</div>
</div>
十七、下拉菜单
.dropdown 表明是一个下拉菜单;
为了打开下拉菜单,需要使用一个带有.dropdown-toggle的<input>或<a>元素,并且添加 data-toggle="dropdown" 属性;
添加 .dropdown-menu 类到一个<div> 元素中,去构建下拉菜单,然后在这个元素内部添加带有 .dropdown-item 类的按钮或a标签。
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
17.1 分割下拉菜单项
<div class="dropdown-divider"></div>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Others</a>
</div>
</div>
17.2 为下拉菜单添加头
.dropdown-header
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<div class="dropdown-header">header01</div>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<div class="dropdown-header">header02</div>
<a class="dropdown-item" href="#">Others</a>
</div>
</div>
17.3 让下拉菜单不可用或高亮下拉菜单
.active 高亮一个下拉菜单; .disabled 让下拉菜单不可用
17.4 下拉菜单的方位
通过在 .dropdown中添加 .dropright (右边的下拉菜单) .dropleft (左边的下拉菜单),注意,箭头是自动添加的。
<div class="dropdown dropleft">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Others</a>
</div>
</div>
17.5 下拉菜单居右
为了让下拉菜单居右,将 .dropdown-menu-right 添加到 .dropdown-menu中
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
This is a wider button, you can use dropdown-mean-right
</button>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-header">header01</div>
<a class="dropdown-item disabled" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item active" href="#">Link 3</a>
<div class="dropdown-header">header02</div>
<a class="dropdown-item" href="#">Others</a>
</div>
</div>
17.6 上拉菜单
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
This is a wider button, you can use dropdown-mean-right
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
17.7 不加修饰的下拉项
.dropdown-item-text 用于创造不加修饰的下拉项
<a class="dropdown-item-text" href="#">Text Link</a>
17.8 下拉框和按钮放在一个组里面
.btn-group
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
17.9 将按钮和下拉按钮分开
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
17.10 垂直的按钮组
.btn-group-vertical
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
十八、折叠
当想要显示或隐藏大量内容的时候使用。
一个带有 .collapse 的<div> 表明这是一个可折叠的元素,它的内容将显示和隐藏当点击按钮的时候。
为了控制可折叠内容,添加data-toggle="collapse" 属性到 <a> 或 <button>元素中,然后添加 data-target="#id" 去连接带有可折叠内容(<div id="demo">)
对于<a> 标签,可以使用 href 代替 data-target 属性。
18.1 默认情况下 可折叠内容是隐藏的,可以添加 .show 改变默认行为
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
18.2 手拉琴
通过拓展卡片组件,可以制作一个“手拉琴”风格的内容
使用 .data-parent 属性去确保所有的手拉琴元素位于一个指定的父元素中,这样当点击打开其他手拉琴元素的时候,当前手拉琴元素会关闭。
十九、导航菜单
19.1 水平的按钮
如果想要创建水平的按钮,添加.nav 到 <ul>上,里面的每一个<li>项使用 .nav-item ,<li>元素中的<a>中使用.nav-link。
<ul class="nav">
<li class="nav-item"><a class="nav-link" href="#">dream</a></li>
<li class="nav-item"><a class="nav-link" href="#">dream</a></li>
<li class="nav-item"><a class="nav-link" href="#">dream</a></li>
<li class="nav-item"><a class="nav-link" href="#">dream</a></li>
</ul>
19.2 校准导航菜单
让导航菜单居中,在<ul>上添加 .justify-content-center; 让导航栏菜单居右, 在<ul>上添加 .justify-content-end。
<ul class="nav justify-content-end">
19.3 让导航菜单垂直
添加 .flex-column 到 <ul> 上。
19.4 导航表格
添加 .nav-tabs 到 <ul>上。添加 .active 到 <a> 上,让项处于活跃状态
19.5 球状(pills)按钮
.nav-pills 使用在<ul> 上,让导航按钮变为球状按钮
19.6 调整导航菜单在一行上等宽
添加 .nav-justified 到 <ul> 上
<ul class="nav nav-pills nav-justified">
19.7 带有下拉菜单的 pills 或 tabs
<ul class="nav nav-pills">
<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="#">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</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="#">Disabled</a>
</li>
</ul>
19.8 选项卡
为了制作选项卡,添加 data-toggle="tab" 到每一个 <a> 中,然后添加 .tab-pane 到一个div中,这个div的ID和每一个选项卡ID相同,将这些带有 .tab-pane 的div包裹在 一个带有 .tab-content 的div中。
如果想让选项卡淡入淡出,添加 fade 到 带有.tab-pane 的div上 。
相同的操作对于 pill,只需要将 nav-tabs换成 nav-pills,将tab换成pill。
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="home">good</div>
<div class="tab-pane container fade" id="menu1">hello</div>
<div class="tab-pane container fade" id="menu2">world</div>
</div>
二十、导航栏
导航栏位于页面的顶部
一个基础的导航栏的导航栏:有一个带有.navbar 的 <nav>,后面跟着 navbar-expand-xl|lg|md|sm (使用屏幕:极大、大、中等、小);
在里面添加 带有 class="navbar-nav" 的<ul>,里面有带有.nav-item 的<li>,里面有.nav-link 的<a>。
<nav class="navbar navbar-expand-sm bg-info navbar-light justify-content-center">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
20.1 垂直的导航栏
将 navbar-expand-xl|lg|md|sm 去掉
20.2 将导航栏居中
添加 .justify-content-center 到 <nav> 标签的类中。
20.3 改变导航栏的背景颜色
.bg-primary
, .bg-success
, .bg-info
, .bg-warning
, .bg-danger
, .bg-secondary
, .bg-dark
and .bg-light
让导航栏里面的字体变成白色: .navbar-dark ;将导航栏里面的字体变成黑色: .navbar-light
20.4 商标或logo
.navbar-brand 用于高亮页面中商标、logo、项目的名字
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
...
</nav>
当使用 .navbar-brand 在<img>标签上的时候,bootstrap将自动调整图片的样式适应导航栏。
<img class="navbar-brand" src="san.png" style="width:40px;"/>
20.5 导航栏的折叠
前提条件:特别小的屏幕。
为了创建一个折叠的导航栏,使用一个带有 class="navbar-toggler" data-toggle="collapse"和 data-target="#thetarget" 的 <button> ,将导航栏的内容包裹在带有class="collapse navbar-collapse" 后面跟上匹配目标的id data-target,这里是 按钮 thetarget。
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<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" href="#">Link</a>
</li>
</ul>
</div>
</nav>
20.6 导航栏表格和按钮
使用 .form-inline将input和按钮组织在一起
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
还可以为输入框添加一个修饰:
使用 .input-group-prepend
或 .input-group-append 固定一个图标或者帮助文本到输入框中。
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
<!-- <input class="form-control mr-sm-2" type="text" placeholder="Search"> -->
<button class="btn btn-success" type="submit">Search</button>
</form>
20.7 导航文本
导航文本不能被点击。
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
20.8 固定导航条
无论滑动条如何变动,固定的导航条是不变的。
使用 .fixed-top 将导航条固定在页面顶部;使用 .fixed-bottom 将页面固定在底部。
使用 .sticky-top 将随着滚动条滚到顶部后,导航条固定到顶部(IE11 要用position:relative)。
二十一、 表单
BootStrap4 对表单的默认设置为:所有带有 .form-control的文本元素<input>
, <textarea>
, 和 <select>都是100%的宽。
21.1 表单布局
bootStrap4 提供了两种表单布局:
stacked form 宽度和屏幕宽度一直的表单;
行内表单;
21.2 stacked form
.form-group
21.3 行内表单
在行内表单中,所有的元素都是行内元素,并且居左。
注意:这种样式的应用需要屏幕的宽至少为 576px,如果小于576px,将按照 stacked form的样式。
21.4对行内元素进行公共设置
为行内元素添加一个右margin(空白),使用 .mr-sm-2。并且使用 mb-2 为输入框设置样式,以防当由于一行容纳不下的时候,上下表单项挨得太近。
21.5 表单的验证
可以使用不同种类的类,给用户提供可用的反馈意见。添加 .was-validated 或.needs-validation 给 <form>元素。取决你项提供给用户提示消息在表单提交之前或之后。表单的字段将会有一个绿色的或红色的边框,表明表单中哪些东西缺少了。也可以添加.valid-feedback 或 .invalid-feedback 准确的告诉用户哪些内容缺少或需要做,在提交之前。
二十二、表单输入框
Bootstrap 4 支持下面的表单控制:
input、textarea、checkbox、radio、select
22.1 BootStrap Input
bootStrap支持所有的input 类型: text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel、和 color。
注意: 如果类型没有合适的声明,Input将不会被样式化。
使用.form-control去样式化带有完整的宽和合适的padding。
<form action="/action">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" id="usr" name="username" class="form-control" />
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="password" class="form-control" />
</div>
</form>
22.2 BootStrap textarea
<div class="form-group">
<label for="comment">Comment:</label>
<textarea id="comment" class="form-control" name="comment" rows="5"></textarea>
</div>
22.3 BootStrap Checkbox
使用 class="form-check" 来确保标签和选择框之间有合适的空白;
给标签添加 .form-check-label , .form-check-input 给位于 .form-check 下选择框合适的样式;
<div class="form-check">
<label class="form-check-label" for="check1">
<input type="checkbox" class="form-check-input" id="check1" name="audio" value="">Option1
</label>
</div>
<div class="form-check">
<label class="form-check-label" for="check2">
<input type="checkbox" class="form-check-input" id="check2" name="audio" value="">Option2
</label>
</div>
<div class="form-check">
<label class="form-check-label" for="check3">
<input type="checkbox" class="form-check-input" id="check3" name="audio" value="" disabled>Option3
</label>
</div>
22.4 行内选择框
使用 .form-check-inline 替换.form-check
22.5 radio
样式和 checkbox一样,只需将checkbox换成radio。
22.6 可选列表
选择多个,或选择一个。
<div class="form-group">
<label for="sell">Select List(Select One):</label>
<select id="sell" name="sell" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<label for="sel2">Multiple select list (hold shift to select more than one):</label>
<select multiple id="sel2" name="selName" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</div>
22.7 form control的大小
在 .form-control 中添加 form-control-sm或 form-control 或 form-control-lg
22.8 把输入框设置为纯文本
使用 .form-control-plaintext 让输入框变为纯文本样式
22.9 form control range和 file
<div class="form-group">
<input type="range" class="form-control-range" name="range">
</div>
<div class="form-group">
<input type="file" class="form-control-file border" name="file">
</div>
二十三、输入组
input-group 类是一个容器,为了增强一个输入,通过输入框之前添加 图标、文本或按钮,或者在输入框后面添加帮助文本。
使用 .input-group-prepend 在输入框之前添加帮助文本;.input-group-append 在输入框之后。使用 .input-group-text 格式化指定的文本。
使用公共的 .mb-3 为输入组之间设置合适的空间。
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" placeholder="Username" class="form-control">
</div>
<div class="input-group mb-3">
<input type="text" placeholder="Email" class="form-control">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>
23.1 输入组的大小
使用 .input-group-sm 设定小输入框;使用 .input-group-lg 设定大输入框;
<div class="input-group mb-3 input-group-sm">
23.3 多个输入框和帮助
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">People</span>
</div>
<input type="text" placeholder="Username" class="form-control">
<input type="text" placeholder="Password" class="form-control">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">One</span>
<span class="input-group-text">Two</span>
<span class="input-group-text">Three</span>
</div>
<input type="text" placeholder="form-control" class="form-control">
</div>
23.4 带有checkbox或radio的输入组
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
<input type="text" placeholder="form-control" class="form-control">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio">
</div>
</div>
<input type="text" placeholder="input" class="form-control">
</div>
23.5 输入组按钮
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="button">Basic button</button>
</div>
<input type="text" placeholder="input" class="form-control">
</div>
<div class="input-group mb-3">
<input type="text" placeholder="input" class="form-control">
<div class="input-group-append">
<button class="btn btn-success" type="button">Basic button</button>
</div>
</div>
<div class="input-group mb-3">
<input type="text" placeholder="input" class="form-control">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Submit</button>
<button class="btn btn-danger" type="button">Console</button>
</div>
</div>
23.6 下拉菜单的input组
<div class="input-group mb-3">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
DropDown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<input type="text" placeholder="input" class="form-control">
</div>
23.7 输入组和外部的标签关联
将输入组外部<label> 中的 for 和 输入组id一直,当点击外部label的时候,光标会聚集在输入组中。
<label for="demo">Please entry:</label>
<div class="input-group mb-3">
<input type="text" placeholder="input" class="form-control" id="demo">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>
二十四、定制表单
BootStrap使用定制的元素,意味着能够代替浏览器默认的。
24.1 定制checkbox
为了创造一个自定义的盒子,先创建一个带有.custom-control和.custom-checkbox的容器元素(像<div>),用这个容器元素包裹着checkbox。然后添加 .custom-control-input 到input元素中,input的类型为:type="checkbox"。
如果使用标签作为伴随文本,添加 .custom-control-label 到伴随文中上,注意属性值应该和checkbox的id值匹配。
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="check1" name="example">
<label class="custom-control-label" for="check1">Check this custom checkbox</label>
</div>
24.2 自定义的开关
为了定制切换开关,包裹一个带有 .custom-control 和 .custom-checkbox 的容器在 checkbox周围,然后,添加 .custom-control-input 到checkbox上。
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1" name="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>
24.3 自定义一个radio按钮
为了制定radio按钮,包裹一个带有 .custom-control 和 .custom-radio 的来在radio按钮上。添加 .custom-control-input 到 radio类型的input元素上。
如果伴随有标签文本,添加 .custom-control-label 类到这个标签上,注意这个标签的属性值应该和radio的id相匹配。
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="radio1" name="radio1">
<label class="custom-control-label" for="radio1">Radio</label>
</div>
24.4 行内自定义控制
添加 .custom-control-inline 到包裹的元素中。
24.5 自定义的选择菜单
为了添加自定义的选择菜单,添加.custom-select 到<select>上。
<select name="cars" class="custom-select">
<option selected>Custom Select Menu</option>
<option value="vo">Vo</option>
<option value="fir">Fir</option>
<option value="audi">Audi</option>
</select>
24.6 自定义的菜单大小
在 .custom-select上添加 .custom-select-sm 或 .custom-select-lg 。
<select name="cars" class="custom-select custom-select-lg">
24.7 自定义的滑动条
使用 .custom-range
<label for="customRange">Custom Range</label>
<input type="range" class="custom-range" id="customRange" name="point1">
24.8 自定义的文件长传
为了自定义一个文件上传按钮,使用一个带有.custom-file 的类包裹在input周围,类型为 type="file" 。然后添加 .custom-control-input 到input上。
为了关联相关的文本,添加.custom-control-label 到这个文本上,注意它的属性值应该和input的id一致。
二十五、旋转式幻灯片
为了循环播放几张图片。
使用转向灯和控制器来创建循环播放的图片。
<div class="carousel slide" id="demo" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="nature01.jpg" alt="Los Angeles" style="width:100%">
</div>
<div class="carousel-item">
<img src="pink01.jpg" alt="Chicago" style="width:100%">
</div>
<div class="carousel-item">
<img src="seagull01.jpg" alt="New York" style="width:100%">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
.carousel 创建一个旋转幻灯片;
.carousel-indicators 添加指标到旋转幻灯片,有一些小圆点位于每个滑块的底部(将用于表明,有多少个滑块,以及当前用户正在浏览哪个滑块);
.carousel-inner 添加滑块;
.carousel-item 滑块的项目;
.carousel-control-prev 添加一个前置的按钮到旋转幻灯片上,用于在不同滑块之间进行切换;
.carousel-control-next 添加后置(右)的按钮到旋转幻灯片上;
.carousel-control-prev-icon 和 .carousel-control-prev 配合使用;
.carousel-control-next-icon 和 .carousel-control-next 配合使用;
.slide 添加滑动效果;
25.1 在滑动块上添加文字
在 <div class="carousel-item">里面添加 <div class="carousel-caption">。
<div class="carousel-item">
<img src="pink01.jpg" alt="Chicago" style="width:100%">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
二十六、模态框 modal
modal是一个对话弹框,出现在页面的顶端。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open Model
</button>
<!-- The Model -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal Body -->
<div class="modal-body">
Modal body...
</div>
<!-- MOdal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
26.1 添加动画
在 .modal上添加 .fade 类。
26.2 模态框的大小
在 带有 .modal-dialog 元素上添加 .modal-sm 或 .modal-lg 或.modal-xl。
26.3 让模态框在水平和垂直的方向上居中
在带有 .modal-dialog 元素上添加 .modal-dialog-centered 。
26.4 滚动的模态框
当有很多内容在模态框上的时候,添加一个滚动条。
在带有 .modal-dialog 元素上添加 .modal-dialog-scrollable
二十七、提示框
Tooltip组件是一个小的自动弹出的盒子,当用户移动鼠标到一个元素上面的时候会出现。
添加 data-toggle="tooltip" 到一个元素上,使用 title 属性指定提示框的内容。
注意: 使用 提示框,必要使用javaScript加载提示框。
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<div class="container">
<br><br><br>
<a href="#" data-toggle="tooltip" title="Hooray!" data-placement="top">Hover over me</a>
</div>
</body>
27.1 设定提示框的位置
使用 data-placement 可以设定提示框位于元素的:top, bottom, left 或 right
二十八、弹出框 Popover
popover组件和tooltips相似。当用户点击的时候,一个弹出框会出现。不同的是,Popover可以包含更多的内容。
为了创建一个Popover,添加 data-toggle="popover" 属性到一个元素中。
使用 title 属性指定popover的头内容;使用data-content 属性指定 popover的正文内容。
注意: Popover必须被JQuery初始化。选择那个指定的元素,然后调用popover() 方法。
28.1 popover 的位置
默认情况下,弹出框会出现在元素的右边,使用 data-placement 属性可以设置 popover处于元素的顶部、左边、右边。
28.2 关闭popover
默认情况下,popover 是被关闭,当再次点击popover的时候。能够使用 data-trigger="focus" ,当点击元素外面的时候popover被关闭。
如果想改变为,光标移到元素上面的时候popver显示,光标移出元素外面的时候popover不显示,使用 data-trigger="hover"。
二十九、Toast
toast非常像 alert,当一些事情发生之后(比如:当用于点击一个按钮,提交一个表单等等),它仅仅显示两秒钟之后消失。
为了创建toast,使用 .toast 类,并添加 .toast-header 和 .toast-body 在里面。
提示: toast必须使用 jQery进行初始化,选中那个元素,并调用 toast() 方法。
29.1 toast的显示和隐藏
默认情况下,Toasts是隐藏的,使用 data-autohide="false" 将其默认行为改为显示。为了关闭它,使用一个添加了 data-dismiss="toast" 的button元素。
三十、Scrollspy 卷轴
Scrollspy是用于基于卷轴的位置自动更新导航列表。
添加 data-spy="scroll" 到一个元素中,这个元素应该包含卷轴的区域(通常这个元素是 <body>)。
然后添加 带有id值或带有<nav>类“.navbar” 的data-target,这用于确保导航条和卷轴区域相连。
注意:导航条项目中的连接的<a href="section1"> 必须和卷轴元素的id相匹配<div id="section1">
data-offset 元素用于指定卷轴偏移顶部的位置。这是有用的,当你感觉到导航栏的变化太快或太早。
data-spy="scroll" 需要css位置属性,使用 “relative” 让其工作正常。
三十一、公共设施
BootStrap 中有很多公共设施,能够快速实现样式,不需要使用css代码。
31.1 边框
<div class="container">
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-left-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
</div>
31.2 边框的颜色
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
31.3 边框的拐角
<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
31.4 浮动
向左浮动使用: .float-left,右浮动使用: .float-right。清除浮动使用: .clearfix。
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>
31.5 敏感的浮动
浮动一个元素到左边或右边,使用敏感的浮动类: .float-*-left|right 。在这里“*” 代表 sm
(>=576px), md
(>=768px), lg
(>=992px) or xl
(>=1200px))。
<div class="float-sm-right">Float right on small screens or wider</div><br>
<div class="float-md-right">Float right on medium screens or wider</div><br>
<div class="float-lg-right">Float right on large screens or wider</div><br>
<div class="float-xl-right">Float right on extra large screens or wider</div><br>
<div class="float-none">Float none</div>
31.6 让元素水平居中
.mx-auto
31.7 设置元素的宽
w-* (.w-25
, .w-50
, .w-75
, .w-100
, .mw-100
)
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
31.8 设置元素的高
h-* (.h-25
, .h-50
, .h-75
, .h-100
, .mh-100
)
<div style="height:200px;" class="bg-dark">
<div class="h-25 bg-warning w-10 float-left">Height 25%</div>
<div class="h-50 bg-info w-10 float-left">Height 50%</div>
<div class="h-75 bg-success w-10 float-left">Height 75%</div>
<div class="h-100 bg-info w-10 float-left">Height 100%</div>
</div>
31.9 margin 和 padding
BootStrap为margin和padding设置了灵敏的属性:xs
(<=576px), sm
(>=576px), md
(>=768px), lg
(>=992px) 或 xl
(>=1200px))
格式为: {property}{sides}-{size} 对于屏幕大小为xs。格式: {property}{sides}-{breakpoint}-{size} 用于屏幕大小为: sm、md、lg、xl。
property为两者中的一个:
m : 设置 margin;
p: 设置 padding;
sides有如下几种选择:
t :顶部
b : 底部
l:左
r:右
x:左右
y: 上下
空格: margin和padding的四边
size可选的值有:
0 值为0px;
1 0.25rem 当font-size为16px时,size值为4px;
2 0.5rem 当font-zie为16px时,size值为8px;
3 1rem 当font-zie为16px时,size值为16px;
4 1.5rem 当font-zie为16px时,size值为24px;
5 3rem 当font-zie为16px时,size值为48px;
auto 设置margin的值为auto;
注意: margin的值也可以是负值:
n1 设置margin的值为-0.25rem 当font-size为16px时,size值为-4px;
n2 设置margin的值为-0.5rem 当font-size为16px时,size值为-8px;
n3 设置margin的值为-1rem 当font-size为16px时,size值为-16px;
n4 设置margin的值为-1.5rem 当font-size为16px时,size值为-24px;
n5 设置margin的值为-3rem 当font-size为16px时,size值为-48px;
31.10 为元素添加影子
.shadow-none、.shadow-sm、 shadow、 shadow-lg
31.11 align-
使用 align- 改变元素的排列。
.align-baseline .align-top .align-middle .align-bottom .align-text-top .align-text-bottom
31.12 创造基于父类宽的嵌入元素
使用 .embed-responsive 和 .embed-responsive-item-*bt* 放在父元素的类里面,包裹 带有.embed-responsive-item 的子元素(像 <iframe> 或 <video>)
31.13 可见度
.visible 或 .invisible
31.14 位置
使用 .fixed-top 让元素固定在页面的顶部。
使用 .fixed-bottom 让元素固定在页面的底部。
使用 .sticky-top
让任何元素滚动到顶部的元素固定在顶部。
31.15 关闭图标
使用 .close 样式化一个关闭的图标;“×” 象征着 “X”
31.16 屏读
使用 .sr-only 在所有设备上隐藏元素,除了屏读。
31.17 文本颜色
.text-muted
, .text-primary
, .text-success
, .text-info
, .text-warning
, .text-danger
, .text-secondary
, .text-white
, .text-dark
, .text-body
(默认颜色为 black) and .text-light
还可以为黑色和白色添加透明度
.text-black-50
或 .text-white-50
31.18背景颜色
.bg-primary
, .bg-success
, .bg-info
, .bg-warning
, .bg-danger
, .bg-secondary
, .bg-dark
和 .bg-light
31.19 块级元素
.d-block
d-*-block : d-sm-block d-md-block d-lg-block d-xl-block
三十二、活动的盒子
与BootStrap3 巨大的不同是,BootStrap4 使用 flexbox来代替浮动。
32.1 flexbox
创建带有 .d-flex 的容器,将容器里面的子元素都浮动。
使用 .d-inline-flex 创建 行内元素的浮动元素。
<div class="d-flex">
<div class="bg-success">Success</div>
<div class="bg-info">INFO</div>
</div>
<div class="d-inline-flex">
<div class="bg-success">Success</div>
<div class="bg-info">INFO</div>
</div>
使用 .flex-row 将元素在水平方向上一个接着一个,默认使用。
使用 .flex-row-reverse 将元素一个挨着一个靠右。
<div class="d-flex flex-row-reverse">
<div class="bg-success">Success</div>
<div class="bg-info">INFO</div>
</div>
32.2 垂直方向上
使用 .flex-column 将元素在垂直方向上排布,使用 .flex-column-reverse 让元素在垂直方向上倒序排布。
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
32.3 调整元素项在水平方向上的位置
使用 .justify-content-* ,可用的值有: start
(默认), end
, center
, between
或者 around
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
32.3 让元素项等宽
<div class="d-flex">
<div class="p-2 bg-info flex-fill">Flex item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-dark flex-fill">Flex item 3</div>
<div class="p-2 bg-secondary flex-fill">Flex item 3</div>
<div class="p-2 bg-success flex-fill">Flex item 3</div>
</div>
32.4 元素占用水平行剩余所有的空间
.flex-grow-1 让元素占用剩余行的空间
.flex-shrink-1 让元素缩小
32.5 元素的顺序
使用 .order-* (0-12) 类,值越小,等级越高。
<div class="d-flex">
<div class="p-2 bg-info order-5">Flex item 5</div>
<div class="p-2 bg-warning order-3">Flex item 3</div>
<div class="p-2 bg-dark order-4">Flex item 4</div>
<div class="p-2 bg-secondary order-1">Flex item 1</div>
<div class="p-2 bg-success flex-grow-1 order-2">Flex item 2</div>
</div>
32.6 添加自动的页面空白
.mr-auto 将元素放在空白的右边;
.ml-auto
将元素放在空白的左边;
<div class="d-flex">
<div class="p-2 bg-info mr-auto">Flex item 5</div>
<div class="p-2 bg-warning">Flex item 3</div>
<div class="p-2 bg-dark ">Flex item 4</div>
<div class="p-2 bg-secondary">Flex item 1</div>
<div class="p-2 bg-success">Flex item 2</div>
</div>
32.7 包裹
容器包裹元素有三种方式: .flex-nowrap (默认,将所有元素排在一行)、flex-wrap (正序,换行)、.flex-wrap-reverse (倒序,换行)。
32.8 校准垂直方向上内容(多行)
使用 .align-content-* (.align-content-start
(默认), .align-content-end
, .align-content-center
, .align-content-between
, .align-content-around
and .align-content-stretch
)
32.9 校准单行
.align-items-* (.align-items-start
, .align-items-end
, .align-items-center
, .align-items-baseline
, and .align-items-stretch
(默认).)
32.10 校准单个元素
.align-self-*
(.align-self-start
, .align-self-end
, .align-self-center
, .align-self-baseline
, and .align-self-stretch
(默认))
32.11 敏感的类型
三十三、图标
Bootstrap没有自己的图标,可以利用 Awesome 的icons
三十四、媒体对象
BootStrap提供了很方便的方式校准媒体对象。
媒体对象通常用于展示博客评论等
34.1 基础的媒体对象
为了创建媒体对象,添加 .media 到容器上。在里面使用 .media-body 包裹子元素。
34.2 内嵌的媒体对象
为了内嵌一个媒体对象,在 .media-body里面放置一个 .media
34.3 将图片放置在右边
为了将媒体对象放置在右边,在 .media-body 之后添加 图片。
<div class="media body p-2">
<div class="media-body p-3">
<h4>John Doe <small><i>Posted on February 19, 2016</i></small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
</div>
<img src="san.png" style="width: 60px;" class="rounded-circle ml-3 mt-3">
</div>
34.4 将图片放置在顶部、中部、底部
在图片上添加 align-self-start 或 align-self-center 或 align-self-end。
三十五、过滤( bootStrap的高级特性)
bootStrap 不提供这种功能,可以使用jquery实现:
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>