BootStrap4
文字排版
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .font-weight-bold 加粗文本
.font-weight-normal 普通文本
.font-weight-light 更细的文本
.font-italic 斜体文本
.lead 让段落更突出
.small 指定更小文本(为父元素的85%)
.text-left 左对齐
.text-center 居中
.text-right 右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled 移除默认的列表样式，列表项中左对齐(<ul>和<ol>中，如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行 尝试一下
.pre-scrollable 使<pre>元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
|
颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div class="container">
<h2>代表指定意义的文本颜色</h2>
<p class="text-muted">柔和的文本。</p>
<p class="text-primary">重要的文本。</p>
<p class="text-success">执行成功的文本。</p>
<p class="text-info">代表一些提示信息的文本。</p>
<p class="text-warning">警告文本。</p>
<p class="text-danger">危险操作文本。</p>
<p class="text-secondary">副标题。</p>
<p class="text-dark">深灰色文字。</p>
<p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
<p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div class="container">
<h2>文本颜色</h2>
<p>鼠标移动到链接。</p>
<a href="#" class="text-muted">柔和的链接。</a>
<a href="#" class="text-primary">主要链接。</a>
<a href="#" class="text-success">成功链接。</a>
<a href="#" class="text-info">信息文本链接。</a>
<a href="#" class="text-warning">警告链接。</a>
<a href="#" class="text-danger">危险链接。</a>
<a href="#" class="text-secondary">副标题链接。</a>
<a href="#" class="text-dark">深灰色链接。</a>
<a href="#" class="text-light">浅灰色链接。</a>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
| <div class="container">
<h2>背景颜色</h2>
<p class="bg-primary text-white">重要的背景颜色。</p>
<p class="bg-success text-white">执行成功背景颜色。</p>
<p class="bg-info text-white">信息提示背景颜色。</p>
<p class="bg-warning text-white">警告背景颜色</p>
<p class="bg-danger text-white">危险背景颜色。</p>
<p class="bg-secondary text-white">副标题背景颜色。</p>
<p class="bg-dark text-white">深灰背景颜色。</p>
<p class="bg-light text-dark">浅灰背景颜色。</p>
</div>
|
图像形状
.rounded类可以让图片显示圆角效果：
1
| <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
|
.rounded-circle类可以设置椭圆形图片:
1
| <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
|
.img-thumbnail类用于设置图片缩略图(图片有边框):
1
| <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
|
使用.float-right类来设置图片右对齐，使用.float-left类设置图片左对齐:
1
2
| <img src="paris.jpg" class="float-left">
<img src="cinqueterre.jpg" class="float-right">
|
可以通过在img标签中添加.img-fluid类来设置响应式图片。.img-fluid类设置了max-width:100%;、height:auto;
1
| <img class="img-fluid" src="img_chania.jpg" alt="Chania">
|
Jumbotron
Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息，Jumbotron里头可以放一些HTML标签，也可以是Bootstrap的元素。
1
2
3
4
| <div class="jumbotron">
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！！！</p>
</div>
|
如果你想创建一个没有圆角的全屏幕，可以在.jumbotron-fluid类里头的div添加.container或.container-fluid 类来实现。
1
2
3
4
5
6
| <div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！！！</p>
</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
25
26
| <table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
|
通过在table里添加.table-striped 类，您将在tbody内的行上看到条纹。
通过在table里添加.table-bordered类可以为表格添加边框。
通过在table里添加.table-hover类可以为表格的每一行添加鼠标悬停效果（灰色背景）
通过在table里联合使用.table-dark和.table-striped类可以创建黑色的条纹表格。
通过在table里联合使用.table-dark和.table-hover类可以设置黑色背景表格的鼠标悬停效果。
通过指定意义的颜色类可以为表格的行或者单元格设置颜色。
1
2
3
4
5
6
7
8
9
10
| .table-primary 蓝色: 指定这是一个重要的操作
.table-success 绿色: 指定这是一个允许执行的操作
.table-danger 红色: 指定这是可以危险的操作
.table-info 浅蓝色: 表示内容已变更
.table-warning 橘色: 表示需要注意的操作
.table-active 灰色: 用于鼠标悬停效果
.table-secondary 灰色: 表示内容不怎么重要
.table-light 浅灰色，可以是表格行的背景
.table-dark 深灰色，可以是表格行的背景
在tr，td里添加相应的类，表格的行或者单元格会有相应的背景颜色。
|
.thead-dark类用于给表头添加黑色背景，.thead-light类用于给表头添加灰色背景
1
2
| <thead class="thead-dark">
<thead class="thead-light">
|
通过在table里.table-sm类用于通过减少内边距来设置较小的表格
.table-responsive类用于创建响应式表格：在屏幕宽度小于992px时会创建水平滚动条，如果可视区域宽度大于992px则显示不同效果。
1
2
3
| <div class="table-responsive">
<table>...</table>
</div>
|
1
2
3
4
| .table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
|
wechat
alipay