Bootstrap前端框架.docxBootstrap
标题（一）
Bootstrap和普通的HTML页面一样，定义标题都是使用标签 ＜h1＞到＜h6＞,只不过Bootstrap覆
盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示：
元素-
字#大如
计笄比恥
hl>
3 方 px，'
mar gin-top： 20px：>-
HGpxr
2
ma rsi*i-bottom： LU 阳
UpM* 170
lflpic a
Mpx ■ UEp
1 扛.「1
cnar ^in-bott-o m： 10px-<
14pK"-
通过比较可以发现，Bootstrap标题样式进行了以下显著的优化重置：
1、 重新设置了 margin-top 和margin-bottom 的值， h1~h3重置后的值都是 20px ； h4 ~h6重置后的值都是10px。
2、 所有标题的行高都是 （也就是font-），而且文本颜色和字体都继承父元 素的颜色和字体。
3、 固定不同级别标题字体大小， h仁36px ， h2=30px ， h3=24px ， h4=18px ， h5=14px 和 h6=12px 。
标题（二）
除此之外，我们在 Web的制作中，常常会碰到在一个标题后面紧跟着一行小的副标题。在 Bootstrap中他也考虑了这种排版效果，使用了 ＜small＞标签来制作副标题。这个副标题具
有其自己的一些独特样式：
1、 行高都是1，而且font-weight 设置了 normal变成了常规效果（不加粗），同时颜色 被设置为 灰色（#999 ）。
2、 由于＜small＞内的文本字体在 h1~h3内，其大小都设置为当前字号的 65% ；而在h4~h
6内的字号都设置为当前字号的 75% ；
详细代码请参阅 文件中第407行~第443行。
h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small, hl .small,
.hl .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
fon t-size: 65%;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
marg in-top: 10px;
margi n-bottom: 10px; } h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
fon t-size: 75%;
}
段落（正文文本）
段落是排版中另一个重要元素之一。 在Bootstrap中为文本设置了一个全局的文本样式（这
里所说的文本是指正文文本）：
1、 全局文本字号为 14px（fo nt-size）。
2、 （ line-height ），大约是20px （大家看到一串的小数或许会有疑惑，
其实他是通过LESS编译器计算出来的，当然 Sass也有这样的功能）。
3、 颜色为深灰色（#333）；
4、 字体为"Helvetica Neue", Helvetica, Arial, sans-serif; （ font-family ），或许这样的
字体对我们中文并不太合适， 但在实际项目中，大家可以根据自己的需求进行重置， 在此我
们不做过多阐述，我们回到这里。该设置都定义在 <body>元素上，由于这几个属性都是 继
承属性，所以Web页面中文本（包括段落 p元素）如无重置都会具有这些样式效果。
/*~280行*/
body {
fon t-family: "Helvetica Neue", Helvetica, Arial, san s-serif;
fon t-size: 14px;
lin e-height: ;
color: #333;
backgrou nd-color: #fff;
}
另外在Bootstrap中，为了让段落p元素之间具有一定的间距，便于用户阅读文本，特意设 置了 p元素的margin值（默认情况之下，p元素具有一个上下外边距，并且保持一个行高 的高度）：
/*源码
Bootstrap前端框架 来自淘豆网m.daumloan.com转载请标明出处.
