本篇文章就给大家介绍bootstrap布局之排版样式、列表样式、表格样式。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问：bootstrap教程！
bootstrap 它认为每一个网页都应该会拥有固定的宽度，它会在容器里面水平垂直居中或者是占满容器的100% 的宽度。
Bootstrap 将全局 font-size 设置为 14px ，行高为 1.428（20px）， 段落行高设置为等于1/2（10px），颜色为 #333
1） 固定的宽度
.container 类用于固定宽度并支持响应式布局的容器（水平居中）。
2） 百分比宽度
.container-fluid 用于 100% 宽度，占据全部可视化窗口的容器。
排版样式
.text-center 居中对齐
.text-right 居右对齐
.text-left 居左对齐
.text-uppercase 用于将小写字母转换为大写字母
.text-lowercase 用于将大写字母转换为小写字母
.text-capitalize 用于实现首字母大写
标签指示简称或缩写，比如 "WWW" 或 "NATO"(有利于搜索引擎搜索)
突出显示文本（加底纹）
以下是bootstrap复写过样式的标签
用于表示计算机源代码或者其他机器可以阅读的文本内容。（加底纹）
<span style="color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;text-align:left;background-color:rgb(253,252,248);">常见应用表示计算机的源代码（加底纹和边框）</span></span></span></p>
<p><span style="color:rgb(204,102,0);"><strong><span style="font-size:18px;">列表样式</span></strong></span><br></p>
<p><span style="font-size:14px;color:#000000;"><strong>列表：有序列表，无序列表，定义列表。</strong></span></p>
<p><span style="font-size:14px;color:#000000;"><em>.sr-only </em>隐藏一个元素，可以是行可以是列，也可以是整个 table</span></p>
<p><span style="font-size:14px;color:#000000;"><em>.list-unstyled</em> 用来将列表前面的项目符号去掉，同时去除列表默认的 margin 值</span></p>
<p><span style="font-size:14px;color:#000000;">.list-inline 将列表中的内容排列成同一行，并且增加少量的 padding 值</span></p>
<p><span style="font-size:14px;color:#000000;">.dl-horizontal</span><span style="font-size:14px;color:#ff6666;"> 给定义列表来使用</span><span style="font-size:14px;color:#000000;">，将定义标题与定义描述信息排列在同一行，将 dt 标记与 dd 标记里面的内容排列在同一行</span></p>
<p><span style="color:rgb(0,0,0);"><span style="color:rgb(204,102,0);"><strong><span style="font-size:18px;">表格样式</span></strong></span><br></span></p>
<p><span style="font-size:14px;color:#000000;"><em>.table</em> 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式，少量 的 padding 和水平方向的分割线。</span></p>
<p><span style="font-size:14px;color:#000000;"><em>.table-bordered</em> 为表格和其中的每个单元格增加边框线</span></p>
<p><span style="font-size:14px;color:#000000;"><em>.table-striped </em>实现各行变色的效果（</span><span style="font-size:14px;color:#ff6666;">IE8不支持</span><span style="font-size:14px;color:#000000;">）</span></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">table.table-striped tr:nth-child(odd){
background:red;
}
/*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/
.table-hover实现鼠标放上的效果
table.table-hover tr:hover{
background:red;
}
/*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/.table-condensed 紧凑型的表格，将 padding 值减半
.table-responsive 给表格父元素设置响应式，当屏幕小于 768px 时， 四周出现边框
状态类
只能给 tr 或者 td 或者 th 来设置，不能给 table 标记来设置
通过这些状态类可以为行或单元格设置颜色
| 类 | 描述 | 实例 |
|---|---|---|
| .active | 将悬停的颜色应用在行或者单元格上 | 尝试一下 |
| .success | 表示成功的操作 | 尝试一下 |
| .info | 表示信息变化的操作 | 尝试一下 |
| .warning | 表示一个警告的操作 | 尝试一下 |
| .danger | 表示一个危险的操作 | 尝试一下 |
具体请看：
| 商品名称 | 商品价格 | 商品状态 | success颜色 |
| 小米手机 | 1499 | 代发货 | active颜色 |
| 小米手机 | 1499 | 代发货 | info颜色 |
| 小米手机 | 1499 | 代发货 | warning颜色 |
| 小米手机 | 1499 | 代发货 | danger颜色 |
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。
以上是bootstrap布局之排版样式、列表样式、表格样式介绍的详细内容。更多信息请关注PHP中文网其他相关文章！
