Bootstrap
01.Bootstrap4.x 入门
学习要点:
-
简单介绍
-
下载和目录
-
安装和测试
本节课我们来开始学习 Bootstrap,第一节课重点了解它的作用,下载安装以及测试。
一.简单介绍
- Bootstrap 是一款 CSS/HTML 的框架库,目前最新版本是 V4.3;
- 它集成了各种常用的前端(HTML、CSS 和 JavaScript)组件库;
- 用于响应式前端布局,移动设备优先的 Web 项目开发;
- 所以,在学习 Bootstrap 之前需要有 HTML5 的学习基础;
二.下载和目录
-
从官网上下载了压缩包:bootstrap-4.3.1-dist.zip;
-
解压后,有两个目录:css 和 js,以下是它的目录结构;
-
在上面的目录结构中,带 min 字样的是编译后的压缩版,可以用于生产部署环境, 不带 min 的可以用于开发调试环境;带 map 字样的是 CSS 地图查询文件,方便查询精确的 样式位置。
-
js 目录中没有 jquery 库文件,需要我们自行下载安装
三.安装和测试
-
创建一个 Bootstrap 文件夹目录,这里将存放以后课程中所有代码和实例;
-
创建子目录 01,并创建.html 代码,生成 HTML5 基本格式;
-
开发工具可以是 Sublime Text、Nodepad Plus 或者 WebStorm;
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>第一个 Bootstrap</title> <!-- 引入 Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- 移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <h1>开启,Bootstrap4!</h1> 属性注解: width=device-width 表示宽度是设备屏幕的宽度。 initial-scale=1 表示初始的缩放比例。 shrink-to-fit=no 自动适应手机屏幕的宽度。 <!-- 引入 jQuery 文件 --> <script src="js/jquery-3.3.1.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
02. 布局系统【上】
一.布局介绍
-
对于容器布局,Bootstrap4.x 提供了.container 和.container-fluid 两种;
-
这两种样式是启用布局栅格系统最基本的要素;
-
contianer 是固体自适应方式,.container-fluid 是流体 100%自适应方式;
-
容器布局可以嵌套,但一般来说,不推荐且很少使用到:
-
自适应对应的响应式方式如下 media:
// Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
-
从响应式的 media 可以看出,Bootstrap4 是以移动端为优先的。
二.栅格系统
-
Bootstrap4.x 的栅格系统是一个以移动为优先的网格系统;
-
基于 12 列的布局、5 种响应尺寸(面向不同屏幕设备);
-
完全使用 flexbox 流式布局构建的,完全支持响应式标准;
-
具体采用 div 容器的行、列和对齐内容来构建响应式布局;
-
首先,实现一个一行三列的布局,通过火狐浏览器切换屏幕测试;
<div class="container"> <div class="row"> <div class="col-sm">第一列</div> <div class="col-sm">第二列</div> <div class="col-sm">第三列</div> </div> </div>
-
为了显示的更加清楚,可以给行列加对比鲜明的 CSS 来观察;
-
row 表示一行,.col-*来表示一列,实现了智能三列;
-
sm 表示屏幕类型,本节先不去详细了解,下节课会探讨;
-
如果我们采用的是.container-fluid,那么会 100%占用屏幕宽度;
<div class="container-fluid">
...
</div>
在手机页面都是一样的,因为手机页面大小都是固定的。
-
在
.col-sm-*
的星号位置,还可以强制设定每列所占有的栅格列;<div class="container-fluid"> <div class="row"> <div class="col-sm-4">第一列</div> <div class="col-sm-4">第二列</div> <div class="col-sm-4">第三列</div> </div> </div>
-
所占的栅格位正好是 12 列,超过 12 列则会换行,小于 12 列则不能 100%;
-
以上智能计算和强制设置栅格位都是等宽的,我们也可以设置不对称的;
<div class="container-fluid"> <div class="row"> <div class="col-sm-8">第一列</div> <div class="col-sm-4">第二列</div> </div> </div>
03.布局系统【下】
学习要点:
一.栅格等级
-
栅格系统中有五个栅格等级,具体如下表:
如果只使用了超小屏幕的话,无论你拉到多大都会按照超小屏幕的大小来拉伸。
-
如果同时是使用两个或以上的级别,并且比例相同,则遵循移动端优先的原则;
<div class="container"> <div class="row"> <div class="c col-sm-4 col-lg-6 col-xl-12">第一列</div> <div class="c col-sm-4 col-lg-6 col-xl-12">第二列</div> <div class="c col-sm-4 col-lg-12 col-xl-12">第三列</div> </div> </div>
-
栅格系统支持只指定其中一种或几种,其它随机的方式,指定数字奇偶均可;
<div class="container"> <div class="row"> <div class="c col-sm">第一列</div> <div class="c col-sm-7">第二列</div> <div class="c col-sm">第三列</div> </div> </div>
-
可以通过两个或以上来实现不同设备不同比例的混合布局;
<div class="container"> <div class="row"> <div class="c col-sm-8 col-xl-12">第一列</div> <div class="c col-sm-4 col-xl-12">第二列</div> </div> </div>
-
使用.w-100 可以切割栅格栏位,进行分行操作;
<div class="container"> <div class="row"> <div class="c col">第一列</div> <div class="c col">第二列</div> <div class="w-100"></div> <div class="c col">第三列</div> <div class="c col">第四列</div> </div> </div>
-
如果强制设置了 col-3 数值,那切割后,将不会自动填充;
<div class="container"> <div class="row"> <div class="c col-3">第一列</div> <div class="c col-3">第二列</div> <div class="w-100"></div> <div class="c col-3">第三列</div> <div class="c col-3">第四列</div> </div> </div>
04. 对齐与排列
一.栅格对齐
1. 对于栅格系统中的行,我们可以其进行垂直对齐操作,如下表;
2. 要实现垂直效果,需要给行.row 和列.c 设置高度;
.row {
height: 100px;
margin: 20px 0;
border: dashed 1px red;
}
.c {
border: solid 1px blue;
height: 30px;
}
-
如果我们要垂直居中,那么直接设置:
.align-items-center
<div class="row align-items-center"> <div class="c col">第一列</div> <div class="c col">第二列</div> <div class="c col">第三列</div> </div>
-
对于列来说,也有三种垂直居中的方法,如下表;
-
使用三种列垂直方案;
<div class="row align-items-center"> <div class="c col align-self-start">第一列</div> <div class="c col align-self-center">第二列</div> <div class="c col align-self-end">第三列</div> </div>
-
如果我们要不足 100%填充的行实现水平对齐方式,参考下表;
比如说下面这个例子
<div class="row "> <div class="c col-3">第一列</div> <div class="c col-3">第二列</div> <div class="c col-3">第三列</div> </div>
这里多出来的这些是就给我们排序用的。
-
每个列只占 3 个栅格列,共 3 列,然后实现间隔相等分散对齐;
间隔相等分散:
<div class="row justify-content-around"> <div class="c col-3">第一列</div> <div class="c col-3">第二列</div> <div class="c col-3">第三列</div> </div>
两端对齐分散:
<div class="row justify-content-between"> <div class="c col-3">第一列</div> <div class="c col-3">第二列</div> <div class="c col-3">第三列</div> </div>
二.栅格排列
-
栅格的列可以排序,使用
.order-N
,N 最大值为 12; 2. 如果我们要给一个三列的行的第一列排到最后,可以如下设置; -
如果我们要给一个三列的行的第一列排到最后,可以如下设置;
<div class="row"> <div class="c col-3 order-3">第一列</div> <div class="c col-3 order-2">第二列</div> <div class="c col-3 order-1">第三列</div> </div>
-
使用.order-first,强行设置列为第一列,而.order-last 为最后一列;
<div class="row align-items-start"> <div class="c col-3 order-last">第一列</div> <div class="c col-3">第二列</div> <div class="c col-3 order-first">第三列</div> </div>
-
使用
.offset-N
或.offset-*-N 来设置列的偏移量,1 表示一个栅格列;<div class="row align-items-start"> <div class="c col-3 offset-1">第一列</div> <div class="c col-3">第二列</div> <div class="c col-3 offset-1">第三列</div> </div>
-
使用
.ml-N
或.mr-N
来微调列距离,使用.ml-auto
和.mr-auto
来左右对齐;<div class="row align-items-start"> <div class="c col-3">第一列</div> <div class="c col-3 ml-2">第二列</div> <div class="c col-3 ml-auto">第三列</div> </div>
ml-N向左边挤出去位置,就是向右偏移
mr-N向右寄出位置,那就是向左
05.内容排版
-
使用
<h1>~<h6>
可以创建不同尺寸的标题文字;<h1>Bootstrap</h1> <h2>Bootstrap</h2> <h3>Bootstrap</h3> <h4>Bootstrap</h4> <h5>Bootstrap</h5> <h6>Bootstrap</h6>
-
如果是使用其它元素标签,比如
或
,调用.h1~6 同样实现大标题;<p class="h1">Bootstrap</p> <div class="h2">Bootstrap</div>
-
通过
.text-muted
样式,构建大标题的附属小标题;使用了这个样式的字体会变暗<p class="h1"> Bootstrap <small class="text-muted">V4.3</small> </p> <div class="h2"> Bootstrap <small class="text-muted">V4.3</small> </div>
-
还有一种更大型,更加醒目的标题:
.display-1~4
<h1 class="display-1">Bootstrap</h1> <h1 class="display-2">Bootstrap</h1> <h1 class="display-3">Bootstrap</h1> <h1 class="display-4">Bootstrap</h1>
这个标题更加醒目,更加庞大!
二.文本类
- 想要指定一些段落中重要的内容,可以使用
.lead
强调;
<p class="lead"> 这是一段测试各种文本效果的话,本身没有意义!
</p>
-
比较常用的文本内联元素,来自 HTML5;
<p>这是一段测试各种文本<mark>效果的话</mark>,本身没有意义!</p> <p><del>这是一段测试各种文本效果的话,本身没有意义!</del></p> <p><s>这是一段测试各种文本效果的话,本身没有意义!</s></p> <p><ins>这是一段测试各种文本效果的话,本身没有意义!</ins></p> <p><u>这是一段测试各种文本效果的话,本身没有意义!</u></p> <p><small>这是一段测试各种文本效果的话,本身没有意义!</small></p> <p><strong>这是一段测试各种文本效果的话,本身没有意义!</strong></p> <p><em>这是一段测试各种文本效果的话,本身没有意义!</em></p>
效果如下图所示:
-
也可以使用
.mark
,.small
等方式实现同样元素的效果;<p>这是一段测试各种文本<span class="mark">效果</span>的话</p> <p class="small">这是一段测试各种文本效果的话,本身没有意义!</p>
-
使用.title 样式和缩略语给文本做提示;
提示
-
使用 Blockquote 设置来源备注或引用; 效果相比于不加blockquote的
<blockquote class="blockquote"> <p>这是一段测试各种文本效果的话,本身没有意义!</p> </blockquote>
-
使用.blockquote-footer 设置底部备注来源;
<blockquote> <p>这是一段测试各种文本效果的话,本身没有意义!</p> <footer class="blockquote-footer">--from a good people</footer> </blockquote>
-
可以对内容进行居中对齐.text-center 或居右对齐.text-right;
<blockquote> <p>这是一段测试各种文本效果的话,本身没有意义!</p> <footer class="blockquote-footer text-center">--from a good people</footer> </blockquote>
默认情况下都是居左的
三.列表类
-
使用
.list-unstyled
样式,可以将列表初始化;会将使用了这个类的元素前面的圆点去掉,并且靠左对齐,不留空隙。
<ul class="list-unstyled">
<li>A 班</li>
<li>B 班</li>
<li>C 班
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>马六</li>
</ul>
</li>
<li>D 班</li>
</ul>
最好只在最外层的ul里面加,如果在字列表里面也取消前面的圆点,会导致父集列表和子集列表都去掉圆点居左对齐,层次不太分明。
- 使用
.list-inline
和.list-inline-item
结合实现多列并排列表;
<ul class="list-inline">
<li class="list-inline-item">A 班</li>
<li class="list-inline-item">B 班</li>
<li class="list-inline-item">C 班</li>
<li class="list-inline-item">D 班</li>
</ul>
- 使用 dl、dt 和 dd 可以实现水平描述,使用
.text-truncate
可以省略溢出;
<div class="container">
<dl class="row">
<dt class="c col-sm-3">列表标题</dt>
<dd class="c col-sm-9">一个关于描述列表的内容</dd>
<dt class="c col-sm-3">列表标题</dt>
<dd class="c col-sm-4 text-truncate">一个关于描述列表的内容, 但是这个稍微长了一点点以至于换行!</dd>
</dl>
</div>
在这里如果你不去掉这个c和 col的高度他会很难看,但是去掉高度之后他会自适应。
如果设置了高度,不能自适应增长的话,我们就可以设置文字的内容截断。显示效果他会截断多出来的内容并且占一行内容。
06代码和图文
一.代码样式
- 使用
<code>
标签元素,可以将编程代码放入其中,但还是要手动转义特殊符号;
会有一个自带的样式:
<div>
<code>
<div>
</code>
- 使用
<pre>
标签元素,配合实现代码块的效果;所见即所得
<div> <span>这是一个代码块效果!<span><div>
<pre class="pre-scrollable" style="width: 500px;">
<code>
<div> <span>这是一个代码块效果!<span><div>
</code>
</pre>
-
可以在代码区域设置.pre-scrollable 样式,实现固定区域滚动,默认高 350px;
<pre class="pre-scrollable" style="width: 500px;">
-
使用标签元素标识变量部分;本身有一个倾斜功能!
y = m + b
<var>y</var> = <var>m</var> + <var>b</var>
-
使用标签元素标识键盘输入;
ctrl+shift+c
<kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>c</kbd>
-
使用<samp>
标签元素标识这是一个示例;
这是一段代码
<samp>这是一段代码</samp>
二.图文样式
-
给图片添加一个.img-fluid
样式或设置 max-width:100%,height:auto;
<img src="./img/banner.png" class=" img-fluid" alt="响应式图片">
-
给小图片加上一个缩略图的样式.img-thumbnail
,会设置一个空心边框;
<img src="img/thumb.png" class="img-thumbnail" alt="缩略图">
-
通过设置.float-left
和.float-right
来设置图片的左右浮动;
<img src="img/thumb.png" class="float-left" alt="左浮动">
<img src="img/thumb.png" class="float-right" alt="有浮动">
这里再次添加一个图片
<img src="img/thumb.png" class="img-thumbnail float-left" alt="缩略图">
<img src="img/thumb.png" class="img-thumbnail float-right" alt="缩略图">
<img src="img/thumb.png" class="img-thumbnail " alt="缩略图">
最后添加的图片因为之前的浮动影响了
使用老方法清除浮动
<img src="img/thumb.png" class="img-thumbnail float-left" alt="缩略图">
<img src="img/thumb.png" class="img-thumbnail float-right" alt="缩略图">
<div style="clear: both;">
<img src="img/thumb.png" class="img-thumbnail " alt="缩略图">
</div>
-
通过.d-block 设置为区块,再通过 margin 左右 auto 方式.mx-auto 实现居中;
<img src="/img/thumb.png" class="mx-auto d-block">
-
因为图片本身是内联块属性,所以,直接在父层用.text-center 也可以实现居中;
<div class="text-center">
<img src="img/thumb.png" class="img-thumbnail" alt="缩略图">
</div>
-
使用 HTML5 新标签
<picture>
<source srcset="img/banner2.png" media="(max-width:800px)">
<img src="img/banner.png" alt="大图">
</picture>
-
使用 figure
和 figcaption
实现图文组合显示;
<figure class="figure">
<img src="img/thumb.png" class="figure-img" alt="图文组合">
<figcaption class="figure-caption text-right"> 这是一张图片</figcaption>
</figure>
这里是外层包裹的figure要设置类为 figure,然后text-right才能居于这个figure区域的右侧,否则回到整个页面的最右侧
07表格样式
一.表格样式
-
使用.table 给表格设置一个基类,这是表格的基本样式;
<table class="table">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>性别</th>
<th>总成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>98</td>
</tr>
<tr>
<td>2</td>
<td>王五</td>
<td>男</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>马六2</td>
<td>男</td>
<td>97</td>
</tr>
</tbody>
</table>
-
使用.table-dark
样式,启用颜色反转对比效果;
-
在使用.thead-light
或.thead-dark
实现浅黑或深灰色调的标头;
<thead class="thead-light">
-
使用.table-striped
实现数据表的条纹状显示;
<table class="table table-striped">
-
条纹状显示也适用于反转色调上; 显示效果就是黑、浅黑间接交替出现。
<table class="table table-dark table-striped">
-
默认情况下,边框是不完全的,使用.table-bordered
设置表格边框;
<table class="table table-bordered">
-
表格边框也可以作用域反转色调上;
<table class="table table-bordered table-dark">
-
使用.table-borderless
设置无边框;
<table class="table table-borderless">
-
无边框效果也可以作用于反转色调上;
<table class="table table-borderless table-dark">
-
使用.table-hover
实现一行悬停效果;
初始状态下,整行表格是一个颜色,只有当你
<table class="table table-hover">
行悬停效果也可以作用于反转色调上;
<table class="table table-hover table-dark">
-
使用.table-sm
实现紧缩型表格,反转色调依然支持;
<table class="table table-sm">
-
使用.table-success
等语义化实现或、等效果,反转色调通用;
<tr class="table-success"> <td class="table-info">男</td>
PS:.table-*中的*包含:active、primary、secondary、danger、warning、info、light、dark。
-
使用.table-responsive
实现溢出时出现底部滚动条;
<table class="table table-responsive">
一般情况下是出现在手机端!
-
使用.table-responsive-sm 实现只有小于 768px 溢出时出现底部滚动条;
<table class="table table-responsive-sm">
08.边框和颜色
一.边框样式
-
使用.border
给元素增加相应的边框,默认是淡灰色;
-
如果颜色太淡,可以使用.border-*设置想要的场景,比如.border-success;
-
.border-*,包含:primary、secondary、success、danger、warning
info、light、dark 和 white;
<img src="img/img1.png" alt="边框" class=" border-success border">
<img src="img/img1.png" alt="边框" class=" border-success border-right">
<img src="img/img1.png" alt="边框" class=" border-success border-left">
<img src="img/img1.png" alt="边框" class=" border-success border-top">
<img src="img/img1.png" alt="边框" class=" border-success border-bottom">
-
使用.border-0
消减四周的边框,或使用.border-*-0
消减某一边的边框;
<img src="img/img1.png" alt="边框" class="border-success border border-0">
<img src="img/img1.png" alt="边框" class="border-success border border-top-0">
<img src="img/img1.png" alt="边框" class="border-success border border-bottom-0">
<img src="img/img1.png" alt="边框" class="border-success border border border-left-0">
<img src="img/img1.png" alt="边框" class="border-success border border border-right-0">
-
使用.rounded
和 .rounded-*
实现各种方位圆角
<img src="img/img2.png" alt="圆角" class="rounded">
<img src="img/img2.png" alt="圆角" class="rounded-top">
<img src="img/img2.png" alt="圆角" class="rounded-bottom">
<img src="img/img2.png" alt="圆角" class="rounded-left">
<img src="img/img2.png" alt="圆角" class="rounded-right">
<img src="img/img2.png" alt="圆角" class="rounded-circle">
<img src="img/img2.png" alt="圆角" class="rounded-pill">
<img src="img/img2.png" alt="圆角" class="rounded-0">
注意这里的rounded-pill
需要给他设置宽高才能看出这个效果:
.rounded-pill {
width: 200px;
height: 100px;
}
-
使用.rounded-sm
和.rounded-lg
实现圆角半径大小;
<img src="img/img2.png" alt="圆角" class="rounded-sm">
<img src="img/img2.png" alt="圆角" class="rounded-lg">
二.颜色样式
- 使用.text-*将文本设置成指定的颜色,比如:text-success;
<span class="text-primary">Bootstrap</span>
<span class="text-secondary">Bootstrap</span>
<span class="text-success">Bootstrap</span>
<span class="text-danger">Bootstrap</span>
<span class="text-warning">Bootstrap</span>
<span class="text-info">Bootstrap</span>
<span class="text-dark">Bootstrap</span>
<span class="text-body">Bootstrap</span>
<span class="text-muted">Bootstrap</span>
<span class="text-light bg-dark">Bootstrap</span>
<span class="text-white bg-dark">Bootstrap</span>
<span class="text-black-50">Bootstrap</span>
<span class="text-white-50 bg-dark">Bootstrap</span>
-
使用.text-*也可以实现悬停和焦点的超链接样式,white 和 muted 不支持;
<a href=# class="text-primary">Bootstrap</a>
<a href=# class="text-secondary">Bootstrap</a>
<a href=# class="text-success">Bootstrap</a>
<a href=# class="text-danger">Bootstrap</a>
<a href=# class="text-warning">Bootstrap</a>
<a href=# class="text-info">Bootstrap</a>
<a href=# class="text-dark">Bootstrap</a>
<a href=# class="text-body">Bootstrap(no)</a>
<a href=# class="text-muted">Bootstrap(no)</a>
<a href=# class="text-light bg-dark">Bootstrap</a>
<a href=# class="text-white bg-dark">Bootstrap(no)</a>
<a href=# class="text-black-50">Bootstrap</a>
<a href=# class="text-white-50 bg-dark">Bootstrap</a>
-
使用.bg-*
可以实现背景色,具体如下:
<div class="p-2 mb-2 bg-primary">Bootstrap</div>
<div class="p-2 mb-2 bg-secondary">Bootstrap</div>
<div class="p-2 mb-2 bg-success">Bootstrap</div>
<div class="p-2 mb-2 bg-danger">Bootstrap</div>
<div class="p-2 mb-2 bg-warning">Bootstrap</div>
<div class="p-2 mb-2 bg-light">Bootstrap</div>
<div class="p-2 mb-2 bg-dark">Bootstrap</div>
<div class="p-2 mb-2 bg-white">Bootstrap</div>
<div class="p-2 mb-2 bg-transparent">Bootstrap</div>
p-N ,这里的N默认是0,最大是5,6就会没有效果了。p-2:padding:0.5rem;
mb-2:margin-bottom :0.5rem
09. 工具类【上】
- 使用.close 和× 构建一个关闭按钮;
<button type="button" class="close" aria-label="关闭">
<span aria-hidden="true">×</span>
</button>
- 使用
.clearfix
给浮动的区域的父元素添加,实现清理浮动的功能;
div.border {
width: 200px;
height: 200px;
}
<div class="clearfix">
<div class="float-left border border-success">left</div>
<div class="float-right border border-success">right</div>
</div>
<div class="border border-warning">
both
</div>
浮动元素会脱离文档流,不占位,盒子重叠,内容不重叠;
如果想要内容都水平排列,需要所有的盒子都设置浮动
如果浮动的元素大于父元素的宽,显示不下就会另起一行,第二行显示
浮动不占位的副作用只会同级之间产生,浮动的副作用都是往下影响,不会影响上边的盒子
对其兄弟元素(非浮动)的影响
- 如果兄弟元素为块级元素,该元素会忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层(并且无法通过z-index属性改变他们的层叠位置),但它的内部文字和其他行内元素都会环绕浮动元素。
- 如果如果兄弟元素为内联元素,则元素会环绕浮动元素排列。
<div class="float-left border border-success">left</div>
<div class="float-right border border-success">right</div>
<div class="float-none border border-success">none</div>
解决方法:
1.传统的方式可以设置其不浮动:style ="clear:both"
2.bootstrap的方式:
在外层包裹一个div 设置class 为 "clearfix"
-
使用.text-hide 来隐藏元素标签内容,但本身还存在保持 SEO 优化;
<h1 class="text-hide" style="background:url('img/img1.png');">
Bootstrap4.x
</h1>
-
使用.overflow-auto 和.overflow-hidden 来设置区域显示方式;
<div class="overflow-auto">...</div><div class="overflow-hidden">...</div>
-
使用.visible
和.invisible
来设置内容可见或不可见;
<div class="visible">Bootstrap4.x</div>
<div class="invisible">Bootstrap4.x</div>
-
使用.align-*来设置内容文本的对齐方式;
<span class="align-baseline">baseline 基准</span>
<span class="align-text-top">text-top 文本顶部</span>
<span class="align-top">top 顶部</span>
<span class="align-middle">middle 垂直居中</span>
<span class="align-bottom">bottom 底部</span>
<span class="align-text-bottom">text-bottom 文本底部</span>
<table class="table table-bordered" style="height: 200px;">
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
PS:垂直对齐仅影响内联 inline、内联块 inline-block、内联表 inline-table、表格单元格 table cell 元素。
10工具类中
一.公共样式
-
使用.p-*
来设置内边距(padding),范围在 0-5 之间和 auto;
<span class="p-5">Bootstrap4.x</span>
padding: 3rem !important;
-
使用.m-*来设置外边距(margin),范围在 0-5 之间和 auto;
<span class="m-5">Bootstrap4.x</span>
.m-5 {
margin: 3rem !important;
}
-
使用.pt-
或 mt-
设置边缘的距离,这里的 t 可以是 top;
-
其它的还有 b(bottom)、l(left)、r(right)等;
<span class="pt-5">Bootstrap4.x</span>
<span class="mt-5">Bootstrap4.x</span>
.pt-5, .py-5 {
padding-top: 3rem !important;
}
.mt-5, .my-5 {
margin-top: 3rem !important;
}
-
使用.px-
*或 mx-*
设置左右边缘的距离,这里的 x 表示(left、right);
<span class="px-5">Bootstrap4.x</span>
<span class="mx-5">Bootstrap4.x</span>
-
使用.py-或 my-设置上下边缘的距离,这里的 y 表示(top、bottom);
<span class="py-5">Bootstrap4.x</span>
<span class="my-5">Bootstrap4.x</span>
-
使用.pt-*-5
,*可以是 md、lg 等响应式的方式来设置边缘;
就是设置在特定屏幕下面,这些屏幕的大小。
-
使用.w-*
设置元素的长度,包括 25%、50%、75%、100%和 auto;
<div class="p-3 w-25 bg-info">25%</div>
<div class="p-3 w-50 bg-info">50%</div>
<div class="p-3 w-75 bg-info">75%</div>
<div class="p-3 w-100 bg-info">100%</div>
<div class="p-3 w-auto bg-info">auto</div>
-
使用.h-*设置元素的高度,包括 25%、50%、75%、100%和 auto;
<div class="border border-success">
<div class="p-3 h-25 bg-info d-inline-block">25%</div>
<div class="p-3 h-50 bg-info d-inline-block">50%</div>
<div class="p-3 h-75 bg-info d-inline-block">75%</div>
<div class="p-3 h-100 bg-info d-inline-block">100%</div>
<div class="p-3 h-auto bg-info d-inline-block">auto</div>
</div>
-
使用.mw-
和.mh-
设置 max-width 和 max-height;
<div class="p-3 mw-100 mh-100 bg-info">max-100%</div>
-
使用.vw-和.vh-设置相对于窗口的大小;
因为上下高度有比较多意外,所以我们可以给他设置一个父元素容器。
<div class="p-3 vw-100 vh-100 bg-info">vw,vh 单位</div>
-
使用.shadow-*实现元素的阴影效果;
<div class="shadow-none mb-5">Bootstrap4.x</div>
<div class="shadow-sm mb-5">Bootstrap4.x</div>
<div class="shadow mb-5">Bootstrap4.x</div>
<div class="shadow-lg mb-5">Bootstrap4.x</div>
11. 工具类【下】
一.公共样式
-
使用.d-*
来设置元素的 display 模式,比如 inline、block 等;
-
none、inline、inline-block、block、table、table-row
-
flex、inline-flex 这些常用的均为 display 可以设置的模式;
-
也可以通过.d-md-*
中的 md 设置响应式的媒体查询效果;
这里的none代表消失啥也看不见。
<div class="p-2 bg-info d-md-none">Bootstrap4.x</div>
-
使用.embed-responsive
实现嵌入响应式,比如<iframe>、<embed>
等;
-
再使用.embed-responsive-16by9
实现响应式比例,还可以 21:9,4:3,1:1;
<div class="embed-responsive embed-responsive-21by9">
<iframe src="http://www.baidu.com"></iframe>
</div>
-
使用.text-*
设置文本的对齐方式,有 left、center、right;
-
也可以设置.text-md-*实现响应式的媒体查询效果;
<div class="p-2 text-center">Bootstrap4.x</div>
-
使用.text-warp
和.text-nowarp
实现文本溢出时是否换行;
<div class="p-2 text-nowrap text-center" style="width: 6rem;">Bootstrap 4.x</div>
-
使用.text-break
对于很长的字符串,且中间没有空格实现换行;
<div class="p-2 text-break"> Bootstrap4.x...Bootstrap4.x</div>
-
使用.text-lowercase
设置小写,.text-uppercase
设置大写,以及 .text-capitalize
设置首字母大写;
<img src="https://gitee.com/forgetc77/blog-img/raw/master/image-20211001194728969.png" alt="image-20211001194728969" style="zoom:67%;" />
```html
<div class="p-2 text-lowercase">the bootstrap4.x</div>
<div class="p-2 text-uppercase">the bootstrap4.x</div>
<div class="p-2 text-capitalize">the bootstrap4.x</div>
```
-
使用.font-weight-bold
加粗、.font-weight-normal
正常、 .font-weight-light
纤细、.font-weight-italic
倾斜;
<div class="p-2 font-weight-bold">Bootstrap4.x</div>
<div class="p-2 font-weight-normal">Bootstrap4.x</div>
<div class="p-2 font-weight-light">Bootstrap4.x</div>
<div class="p-2 font-italic">Bootstrap4.x</div>
-
使用.text-monospace
设置等宽字体;
<div class="p-2 text-monospace">Bootstrap 4.x</div>
-
使用.text-reset
实现字体颜色的重置;和父元素的效果一样。
<div class="text-muted"> Bootstrap 最新版本:
<a href="#" class="text-reset">V4.3</a>
</div>
-
使用.text-decoration-none
删除超链接下划线;
<a href="#" class="text-decoration-none">V4.3</a>
12Flex弹性布局
一.Flex 样式
-
使用.d-flex
和.d-inline-flex
实现开启 flex 布局样式;
<div class="d-flex">Flex 弹性布局</div>
.d-flex {
display: flex !important;
}
-
这一对样式,也支持响应式的媒体查询:.d-*-flex;
*可以是md或者是lg
-
.flex-row
可以呈现子元素水平方向的位置,默认居左并从左到右显示(1,2,3);
<div class="d-flex flex-row">
<div class="p-2">项目 1</div>
<div class="p-2">项目 2</div>
<div class="p-2">项目 3</div>
</div>
-
.flex-row-reverse
让子元素水平方向的位置居右并从左到右显示(3,2,1);
<div class="d-flex flex-row-reverse">
<div class="p-2">项目 1</div>
<div class="p-2">项目 2</div>
<div class="p-2">项目 3</div>
</div>
-
这一对样式,也支持响应式的媒体查询:.flex-*-row;
-
.flex-column
实现子元素垂直效果,并从上往下显示(1,2,3);
<div class="d-flex flex-column">
<div class="p-2">项目 1</div>
<div class="p-2">项目 2</div>
<div class="p-2">项目 3</div>
</div>
-
.flex-column-reverse
实现子元素垂直效果,并从上往下显示(3,2,1);
<div class="d-flex flex-column-reverse">
<div class="p-2">项目 1</div>
<div class="p-2">项目 2</div>
<div class="p-2">项目 3</div>
</div>
-
这一对样式,也支持响应式的媒体查询:.flex-*-column;
-
.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>
-
这五个内容对齐样式,也支持媒体查询:justify-content-*-start;
-
.align-items-start
(end、center、baseline、stretch)实现项目对齐;
这里要给一个高度,因为里面的元素和我们的父元素是百分之百的效果。
<div class="d-flex align-items-start" style="height:100px;">
<div class="d-flex align-items-end" style="height:100px;">
<div class="d-flex align-items-center" style="height:100px;">
<div class="d-flex align-items-baseline" style="height:100px;">
<div class="d-flex align-items-stretch" style="height:100px;">
-
这五个项目对齐,也支持媒体查询:align-items-*-start;
-
.align-self-start
(end、center、baseline、stretch)实现单项目对齐;
<div class="d-flex m-2 p-2" style="height:100px;">
<div class="p-2 align-self-start">项目 1</div>
<div class="p-2 align-self-end">项目 2</div>
<div class="p-2 align-self-center">项目 3</div>
<div class="p-2 align-self-baseline">项目 4</div>
<div class="p-2 align-self-stretch">项目 5</div>
</div>
13.弹性布局下
一.Flex 样式
-
使用.flex-fill
强制让每个元素项目占据相等的水平宽度;
<div class="d-flex">
<div class="p-2 flex-fill">项目 1</div>
<div class="p-2 flex-fill">项目 2</div>
<div class="p-2 flex-fill">项目 3</div>
</div>
-
三个项目同时设置了.flex-fill
,则它们等比例分割宽度,适合导航项目;
-
如果其中一个或两个没有设置.flex-fill
,则没有设置文本有多少就占据多少;
-
.flex-*-fill
也可以实现响应式的媒体查询操作;
-
使用.flex-grow-*
,*表示 0 或 1,也能实现.flex-fill 的功能,设置 1 即可;
<div class="d-flex">
<div class="p-2 flex-grow-1">项目 1</div>
<div class="p-2 flex-grow-1">项目 2</div>
<div class="p-2 flex-grow-1">项目 3</div>
</div>
-
通过元素生成的 CSS,我们可以看出,其实.flex-fill
就 flex 族的简写形式;
-
使用.flex-shrink-*
,*表示 0 或 1,表示是否强制更换到新行中;
<div class="d-flex">
<div class="p-2 w-100">项目 1</div>
<div class="p-2 flex-shrink-0">项目 2</div>
</div>
-
这一对样式,也支持响应式的媒体查询:.flex-*-grow|shrink-*
;
-
使用.mr-auto
等对齐方式,对 flex 元素进行浮动对
<div class="d-flex">
<div class="p-2 mr-auto">项目 1</div>
<div class="p-2">项目 2</div>
<div class="p-2">项目 3</div>
</div>
<div class="d-flex">
<div class="p-2">项目 1</div>
<div class="p-2">项目 2</div>
<div class="p-2 border ml-auto">项目 3</div>
</div>
-
对于垂直方向,也可以使用.mb-auto
和.mt-auto
来设置对象方向;
<div class="d-flex flex-column align-items-start" style="height: 200px;">
<div class="p-2 mb-auto">项目 1</div>
<div class="p-2">项目 2</div>
<div class="p-2">项目 3</div>
</div>
<div class="d-flex flex-column align-items-start" style="height: 200px;">
<div class="p-2">项目 1</div>
<div class="p-2">项目 2</div>
<div class="p-2 mt-auto">项目 3</div>
</div>
-
使用.flex-wrap(包裹)
和.flex-nowrap(不包裹,默认)
来设置子元素项目;
<div class="d-flex flex-wrap" style="width: 200px;">
<div class="p-2">项目 1</div>
<div class="p-2">项目 2</div>
<div class="p-2">项目 3</div>
<div class="p-2">项目 4</div>
<div class="p-2">项目 5</div>
<div class="p-2">项目 6</div>
<div class="p-2">项目 7</div>
<div class="p-2">项目 8</div>
<div class="p-2">项目 9</div>
<div class="p-2">项目 10</div>
</div>
不包裹的样式如下图所示:
包裹的样式如下图所示:
-
使用.flex-warp-reverse
进行项目排序顺序的倒序;
-
这三个样式,也支持响应式的媒体查询:.flex-*-warp 等
-
使用.order-*
,来设置子元素项目的排序顺序,支持.order-*-*
;
<div class="d-flex m-2 p-2 bg-secondary text-light flex-row">
<div class="p-2 border border-light order-3">项目1</div>
<div class="p-2 border border-light order-2 ">项目2</div>
<div class="p-2 border border-light order-1">项目3</div>
</div>
-
.align-content-start
(end、center、between、around、stretch)垂直对齐;
<div class="d-flex flex-wrap align-content-end"
style="height: 200px;">
-
.align-content-*-start
等支持媒体响应式查询;
14.警告提示框
一.警告框样式
-
使用.alert
设置警告框基础样式,并使用.alert-success
设置警告框颜色;
<div class="alert alert-success">Bootstrap4.x</div>
<div class="alert alert-primary">Bootstrap4.x</div>
<div class="alert alert-secondary">Bootstrap4.x</div>
<div class="alert alert-danger">Bootstrap4.x</div>
<div class="alert alert-warning">Bootstrap4.x</div>
<div class="alert alert-info">Bootstrap4.x</div>
<div class="alert alert-light">Bootstrap4.x</div>
<div class="alert alert-dark">Bootstrap4.x</div>
-
在使用了警告框的元素内部设置超链接.alert-link
会显示加粗的样子;
<div class="alert alert-success"> Bootstrap4.x
<a href="#" class="alert-link">V4.3</a>
</div>
-
使用.alert-heading
可以设置继承颜色,alert 本身也可以设置水平线段落等;
<div class="alert alert-success">
<h4 class="alert-heading">Bootstrap4.x</h4>
<hr>
<p>这是一个前端工具:Bootstrap4.x</p>
</div>
.alert-heading {color: inherit;}
二.警告框组件
-
在组件一栏,可以和浏览器实现交互功能,比如警告框的关闭效果;
<div class="alert alert-warning alert-dismissible fade show"> 警告:请理解更新你的系统~ <button class="close" data-dismiss="alert">×</button>
</div>
-
解释一下手册给的案例:data-dismiss="alert"
实现父元素关闭;
.fade
.show
实现了关闭后的淡出效果;
.alert-dismissible
从调试器可以看到是 padding-right:4rem;
也就是说,真正实现关闭效果的只有 data-dismiss="alert";
直接使用脚本的方式也可以关闭:
<div class="alert alert-warning alert-dismissible fade show updatesystem">
警告:请立即更新你的系统~
<button class="close updateclose">×</button>
</div>
$('.updateclose').click(function () { $('.updatesystem').alert('close');
});
15.徽章和面包屑导航
一.徽章样式
-
使用.badge
设置徽章基础样式,并使用.badge-success 等设置徽章颜色;
<h1>Bootstrap <span class="badge badge-secondary">4.x</span></h1>
<h2>Bootstrap <span class="badge badge-success">4.x</span></h2>
<h3>Bootstrap <span class="badge badge-info">4.x</span></h3>
<h4>Bootstrap <span class="badge badge-danger">4.x</span></h4>
<h5>Bootstrap <span class="badge badge-warning">4.x</span></h5>
<h6>Bootstrap <span class="badge badge-light">4.x</span></h6>
<h6>Bootstrap <span class="badge badge-primary">4.x</span></h6>
<h6>Bootstrap <span class="badge badge-dark">4.x</span></h6>
-
使用.badge-pill
将徽章设置成椭圆胶囊式;
<h3>Bootstrap
<span class="badge badge-info badge-pill">4.x</span>
</h3>
-
在超链接使用徽章,鼠标悬停时会有换色效果;
<h3>Bootstrap <a href="#" class="badge badge-success badge-pill">4.x</a>
</h3>
二.面包屑导航
-
使用.breadcrumb
设置一个层次导航(一行分割显示那种);
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">home </a>
</li>
<li class="breadcrumb-item">
<a href="#">library </a></li>
<li class="active breadcrumb-item">bootstrap</li>
</ol>
</nav>
16. 按钮和按钮组
一.按钮样式
- 使用
.btn
和.btn-*
实现按钮的预设样式;
<button type="button" class="btn btn-secondary">Bootstrap4.x</button>
<button type="button" class="btn btn-success">Bootstrap4.x</button>
<button type="button" class="btn btn-danger">Bootstrap4.x</button>
<button type="button" class="btn btn-warning">Bootstrap4.x</button>
<button type="button" class="btn btn-info">Bootstrap4.x</button>
<button type="button" class="btn btn-light">Bootstrap4.x</button>
<button type="button" class="btn btn-dark">Bootstrap4.x</button>
<button type="button" class="btn btn-link">Bootstrap4.x</button>
-
.btn
不单单在<button>
元素下使用,也可以在<a>、<input>
下使用;
<a href="#" class="btn btn-success">Bootstrap4.x</a>
<input type="submit" class="btn btn-danger" value="Bootstrap4.x">
-
使用.btn
.btn-outline-*
可以实现按钮的轮廓效果;
<button type="button" class="btn btn-outline-danger">Bootstrap4.x</button>
<button type="button" class="btn btn-outline-warning">Bootstrap4.x</button>
-
使用.btn-lg
.btn-sm
可以实现按钮尺寸的大和小;
<button type="button" class="btn btn-lg btn-success">Bootstrap4.x</button>
<button type="button" class="btn btn-sm btn-danger">Bootstrap4.x</button>
-
使用.btn-block
将按钮进行 block 区块设置;整个一行都被占有了
<button type="button" class="btn btn-success btn-block">Bootstrap4.x</button>
<button type="button" class="btn btn-danger btn-block">Bootstrap4.x</button>
-
使用.active
启用按钮(默认),使用.disabled
禁用按钮,特别注意的禁用;
<button type="button" class="btn btn-success active">Bootstrap4.x</button>
<button type="button" class="btn btn-success" disabled>Bootstrap4.x</button>
<a href="#" class="btn btn-success disabled">Bootstrap4.x</a> //写在 class 里
<input type="submit" class="btn btn-danger" disabled value="Bootstrap4.x">
disabled 属性只有a写在class里面,其他写在class外面
-
添加 data-toggle="button"
实现按钮切换效果,使用.active
可以默认按下;
<button type="button" class="..." data-toggle="button">Bootstrap4.x</button>
二.按钮组样式
-
使用.btn-group
实现传统方案的复选框和单选框样式;
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="checkbox" checked> PHP
</label>
<label class="btn btn-secondary"> <input type="checkbox"> Python
</label>
<label class="btn btn-secondary"> <input type="checkbox"> GO
</label> </div>
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="radio" name="options" checked> PHP
</label>
<label class="btn btn-secondary"> <input type="radio" name="options"> Python
</label>
<label class="btn btn-secondary"> <input type="radio" name="options"> GO
</label>
</div>
-
使用.btn-group
.btn-group-toggle
实现全新方案的复选框和单选框;
<div class="btn-group btn-group-toggle" data-toggle="buttons">
.btn-group-toggle 实现了选中后背景颜色加深
-
使用.btn-group
构建普通的按钮组;
<div class="btn-group">
<button type="button" class="btn btn-secondary">左</button>
<button type="button" class="btn btn-secondary">中</button>
<button type="button" class="btn btn-secondary">右</button>
</div>
-
使用.btn-toolbar
构建分页工具类;
就是把他们整体管理起来。
<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>
<button type="button" class="btn btn-secondary">5</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">7</button>
<button type="button" class="btn btn-secondary">8</button>
<button type="button" class="btn btn-secondary">9</button>
</div>
</div>
-
使用.btn-group-lg
和.btn-group-sm
实现大尺寸和小尺寸;
<div class="btn-group btn-group-lg">
<div class="btn-group btn-group-sm">
-
使用.btn-group-vertical
设置垂直按钮组;