Bootstrap源码解读排版（1）
源码解读Bootstrap排版
粗体
可以使用<b>和<strong>标签让文本直接加粗。
例如：
<p>我在学习<strong>Bootstrap</strong></p>
源码
b,
strong{
font-weight:bold;
}
斜体
使用标签<em>或<i>来实现。
例如：
<p>我在学<i>Bootstrap</i>。</p>
强调相关的类
强调类都是通过颜色来表示强调
.text-muted：提示，使用浅灰色（#777）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
例如：
<divclass="text-primary">.text-primary效果</div>
源码
.text-muted{
color:#777;
}
.text-primary{
color:#428bca;
}
a.text-primary:hover{
color:#3071a9;
}
.text-success{
color:#3c763d;
}
a.text-success:hover{
color:#2b542c;
}
.text-info{
color:#31708f;
}
a.text-info:hover{
color:#245269;
}
.text-warning{
color:#8a6d3b;
}
a.text-warning:hover{
color:#66512c;
}
.text-danger{
color:#a94442;
}
a.text-danger:hover{
color:#843534;
}
文本对齐风格
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐
例如：
<pclass="text-left">我居左</p>
源码：
.text-left{
text-align:left;
}
.text-right{
text-align:right;
}
.text-center{
text-align:center;
}
.text-justify{
text-align:justify;
}
目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。所以项目中慎用。
列表
Bootstrap对于列表，只是在margin上做了一些调整
源码：
ul,
ol{
margin-top:0;
margin-bottom:10px;
}
ulul,
olul,
ulol,
olol{
margin-bottom:0;
}
去点列表
给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
例如：
<olclass="list-unstyled"> <li>不带项目编号</li> <li>不带项目编号</li> </ol>
源码：
.list-unstyled{
padding-left:0;
list-style:none;
}
内联列表
通过添加类名“.list-inline”来实现内联列表，其实就是把垂直列表换成水平列表，而且去掉项目符号，保持水平显示。可以用来做水平导航。
源码：
.list-inline{
padding-left:0;
margin-left:-5px;
list-style:none;
}
.list-inline>li{
display:inline-block;
padding-right:5px;
padding-left:5px;
}
定义列表
Bootstrap只是调整了行间距，外边距和字体加粗效果
源码：
dl{
margin-top:0;
margin-bottom:20px;
}
dt,
dd{
line-height:1.42857143;
}
dt{
font-weight:bold;
}
dd{
margin-left:0;
}
水平定义列表
水平定义列表就像内联列表一样，添加类名“.dl-horizontal”给定义列表实现水平显示效果。
源码：
@media(min-width:768px){
.dl-horizontaldt{
float:left;
width:160px;
overflow:hidden;
clear:left;
text-align:right;
text-overflow:ellipsis;
white-space:nowrap;
}
.dl-horizontaldd{
margin-left:180px;
}
}
此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。当缩小浏览器屏幕时，水平定义列表将回复到原始的状态。
代码
主要提供了三种代码风格：
<code></code>显示单行内联代码，一般是针对于单个单词或单个句子的代码
<pre></pre>来显示多行块代码，一般是针对于多行代码（也就是成块的代码）
<kbd></kbd>来显示用户输入代码，一般是表示用户要通过键盘输入的内容
在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
源码：
.pre-scrollable{
max-height:340px;
overflow-y:scroll;
}
表格
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。
.table：基础表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格
例如要使用斑马线表格并且鼠标悬停高亮：
<tableclass="tabletable-stripedtable-borderedtable-hover">
响应式表格的用法和其他几个不同。
Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<tableclass="table">置于这个容器当中，这样表格也就具有响应式效果。
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下：
<divclass="table-responsive"> <tableclass="tabletable-bordered"> … </table> </div>
表格行的类
tr有五种不同的类名，可以显示行的不同的颜色
.active表示当前活动的信息
.success表示成功或者正确的行为
.info表示中立的信息或行为
.warning表示警告，需要特别注意
.danger表示危险或者可能是错误的行为
例如：
<trclass="active">
本文系列教程整理到：Bootstrap基础教程专题中，欢迎点击学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。