一、标题
二、段落
=》如果想让一个段落p突出显示,
添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理
=》文本状态
.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
=》文本的对齐方式
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐
三、列表(ul/ol/dl)
》通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
》通过添加类名“.list-inline”来实现内联列表,即水平导航
》给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
2、列表组( .list-group 列表容器 .list-group-item 列表具体项)
列表组的状态
四、代码展示
》使用<code></code>来显示单行内联代码
》使用<pre></pre>来显示多行块代码
》使用<kbd></kbd>来显示用户输入代码
五、表格
1、基本样式
.table:基础表格(“.table”主要有三个作用:
给表格设置了margin-bottom:20px以及设置单元内距,
在thead底部设置了一个2px的浅灰实线,
每个单元格顶部设置了一个 1px的浅灰实线)
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格
Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水
平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。
除了”.active”之外,其他四个类名和”.table-hover”配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,直接在table上加class=“table-hover”就行
注:不管制作哪种表格都离不开类名“table”