Bootstrap之页面排版样式
Bootstrap
是由
Twitter
公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript
的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于
PC
及移动端设备的
Web
页面需求。
1.
Bootstrap
特点
Bootstrap
非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：
(1).
跨设备、跨浏览器，可以兼容所有现代浏览器，包括比较诟病的
IE7、8。
(3).
提供的全面的组件，Bootstrap
提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。
(4).
内置
jQuery
插件，Bootstrap
提供了很多实用性的
jquery
插件，这些插件方便开发者实现
Web
中各种常规特效。
(5).
支持
HTML5、CSS3，HTML5
语义化标签和
CSS3
属性，都得到很好的支持。
(6).
支持
LESS
动态样式，LESS
使用变量、嵌套、操作混合编码，编写更快、更灵活的
CSS，它和
Bootstrap
能很好的配合开发。
2.
引入Boostrap
//第一个
Bootstrap
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title>Bootstrap</title>
<link
rel="stylesheet"
href="css/bootstrap.min.css"
rel="external
nofollow"
>
</head>
<body>
<button
class="btn
btn-info">Bootstrap</button>
<script
src="js/jquery.min.js"></script>
<script
src="js/bootstrap.min.js"></script>
</body>
</html>
3.
Boostrap的排版样式
页面主体
Bootstrap
将全局
font-size
设置为
14px，line-height
行高设置为
1.428(即
20px)；
段落元素被设置等于
1/2
行高(即
10px)；颜色被设置为#333。
设置文本对齐
Bootstrap
框架
//居左
Bootstrap
框架
//居中
Bootstrap
框架
//居右
Bootstrap
框架
//两端对齐，支持度不佳
Bootstrap
框架
//不换行
设置英文文本大小写
Bootstrap
框架
//小写
Bootstrap
框架
//大写
Bootstrap
框架
//首字母大写
缩略语
Bootstrap<abbr
title="Bootstrap">框架</abbr>
地址文本
//设置地址，去掉了倾斜，设置了行高，底部
20px
<address>
Twitter,
Inc.
795
Folsom
Ave,
Suite
600
San
Francisco,
CA
94107
<abbr
title="Phone">P:</abbr>
(123)
456-7890
</address>
引用文本
//默认样式引用，增加了做边线，设定了字体大小和内外边距
<blockquote>Bootstrap
框架</blockquote>
//反向
<blockquote
class="blockquote-reverse
">Bootstrap
框架</blockquote>
列表排版
//移出默认样式
<ul>
<li>Bootstrap
框架</li>
<li>Bootstrap
框架</li>
<li>Bootstrap
框架</li>
<li>Bootstrap
框架</li>
<li>Bootstrap
框架</li>
</ul>
//设置成内联
<ul>
<li>Bootstrap
框架</li>
<li>Bootstrap
框架</li>
<li>Bootstrap
框架</li>
<li>Bootstrap
框架</li>
<li>Bootstrap
框架</li>
</ul>
//水平排列描述列表
<dl>
<dt>Bootstrap</dt>
<dd>Bootstrap
提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
</dl>
代码
<code><section></code>
//内联代码
press
<kbd>ctrl
+
,</kbd>
//用户输入
<pre>
Please
input...
</pre>
//代码块
此外，Bootstrap
还列举了<var>表示标记变量，<samp>表示程序输出，只不过没有重新复写
CSS。
一、段落
段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：
1、全局文本字号为14px(font-size)。
2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。
3、颜色为深灰色（#333）；
二、文字样式
在实际项目中，对于一些重要的文本，希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
1.粗体：在Bootstrap中，可以使用<b>和
标签让文本直接加粗。
2.斜体：在Bootstrap中，可以使用<em>或<i>来实现文本斜体。
三、强调类
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
<div
class="text-muted">.text-muted
效果</div>
<div
class="text-primary">.text-primary效果</div>
<div
class="text-success">.text-success效果</div>
<div
class="text-info">.text-info效果</div>
<div
class="text-warning">.text-warning效果</div>
<div
class="text-danger">.text-danger效果</div>
效果如下：
四、文本对齐
在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：
☑
左对齐，取值left
☑
居中对齐，取值center
☑
右对齐，取值right
☑
两端对齐，取值justify
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
☑
.text-left：左对齐
☑
.text-center：居中对齐
☑
.text-right：右对齐
☑
.text-justify：两端对齐
有了文字样式，使得排版效果更清晰简洁，希望大家在自己的作品中多使用一些简单大方的文字样式，使作品脱颖而出，更加具有吸引力。