具体参考官方文档：https://v3.bootcss.com/css/
一、标题
HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
<h4>bootstrap 基本模本<small>text副标题</small></h4> 
二、页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
1、内联文本元素：
被删除的文本，带下划线的文本，小号文本，斜体等参考官方文档
2、对齐
通过文本对齐类，可以简单方便的将文字重新对齐。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p> 
3、改变文本的大小写
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p> 
三、表格
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。
1、基本设置
斑马条纹样式：<table> 标签添加 .table-striped 类可以给 <tbody> 之内的每一行
带边框样式：添加 .table-bordered 类为表格和其中的每个单元格增加边框。
鼠标悬停样式：添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
紧缩表格：添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
<div class="container">
<h4>bootstrap 表格</h4>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>用户名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李斯</td>
<td>男</td>
<td>28</td>
</tr>
<tr>
<td>小白</td>
<td>女</td>
<td>17</td>
</tr>
</tbody>
</table>
</div> 
2、状态类
通过这些状态类可以为行或单元格设置颜色。
| Class | 描述 |
|---|---|
.active | 鼠标悬停在行或单元格上时所设置的颜色 |
.success | 标识成功或积极的动作 |
.info | 标识普通的提示信息或动作 |
.warning | 标识警告或需要用户注意 |
.danger | 标识危险或潜在的带来负面影响的动作 |
<tr>
<td class="success">张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr class="info">
<td >李斯</td>
<td>男</td>
<td>28</td>
</tr>
3、响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格。
<div class="table-responsive">
<table class="table">
...
</table>
</div>区别：当表格有固定宽度的时候：
有table-responsive，表格有滚动条
没有table-responsive，网页有滚动条
551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
