1.标题
bootstrap和普通的HTML页面一样,都是使用h1到h6。为了让非标题元素和标题使用相同的样式定义了.h1~.h6六个类名
<div class="h1">bootstrap标题一</div>
此外bootstrap使用了small标签来制作副标题
<h1>bootstrap标题一<small>副标题</small></h1>
<div class="h1">标题<span class="small">副标题</span></div>
2.段落(正文文本)
强调内容
如果想让一个段落p突出显示,可以通过添加类名.lead实现,其作用就是增大文本字号,加粗文本对行高和margin也做了相应处理
<p>普通文本</p>
<p class="lead">突出文本</p>
文本对齐风格
bootstrap通过定义四个类名来控制文本对齐风格
.text-left:左对齐
.text-right:右对齐
.text-center:居中对齐
.text-justify:两端对齐
<p class="text-center">居中<p>
3.列表
普通列表
ul>li 和我们平时使用的一样
有序列表
ol>li 用法和我们平时用法一样
去点列表
在列表中添加类名.list-unstyled去除默认的列表项目符号同时将左边内距清0
<ul class="list-unstyled">
<li>列表项</li>
</ul>
4.代码
code显示单行内联代码
pre显示多行代码
kbd显示用户输入代码
<code><code></code>
<pre><pre></pre>
<kbd><kbd></lbd>
注:可以在pre添加类名.pre-scrollable,就可以控制代码区域最大高度为340px,一旦超出Y轴就会显示滚动条
5.表格
基础表格
给表格设置了margin-bottom:20px以及设置单元内距
在thead底部设置了一个2px的浅灰实线
每个单元格顶部设置了一个1px的浅灰实线
在table上添加类名.table来实现bootstrap基础表格
<table class="table">
.....
</table>
斑马线表格
在bootstrap表格基础上添加类名.table-striped
<table class="table table-striped">
.....
</table>
带边框表格
在基础表格上添加类名.table-bordered
<table class="table table-bordered">
.....
</table>
鼠标悬浮高亮表格
在基础表格上添加类名.table-hover
<table class="table table-hover">
.....
</table>
注:鼠标悬浮高亮表格可以和其他表格混合使用,只需给表格添加类名.table-hover
紧凑型表格
在基础表格上添加类名.table-condensed
<table class="table table-condensed">
.....
</table>
响应式表格
在基础表格上添加类名.table-responsive
当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条
<table class="table table-responsive">
.....
</table>