知识点

Bootstrap 3 中，移动设备优先。
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。注意，这种方式应视情况去使用，并不是所有的网站都适用。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

排版与链接

为 body 元素设置 background-color: #fff;
使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数
为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

布局容器
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
注意：这两种容器类不能互相嵌套。

标题
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式；
标题中还包含small标签和small类，用来标记副标题；

    <h1>h1. 36px <small>副标</small></h1>
    <h2>h2. 30px <small>副标</small></h2>
    <h3>h3. 24px <small>副标</small></h3>
    <h4>h4. 18px <small>副标</small></h4>
    <h5>h5. 14px <small>副标</small></h5>
    <h6>h6. 12px <span class="small">副标</span></h6>

页面主体
font-sie:!4px;line-height:1.428，这些属性直接赋予 <body> 元素和所有段落元素；
 元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
.lead让文本突出。

内联文本元素

mark：
删除：<del>
无用文本：<s>
插入文本：<ins>
带下划线的文本：
小号文本：或.small
着重：
斜体：

对齐

    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>
    <p class="text-justify">Justified text.</p>
    <p class="text-nowrap">No wrap text.</p>

大小写

    <p class="text-lowercase">Lowercased text.</p><!--全部小写-->
    <p class="text-uppercase">Uppercased text.</p><!--全部大写-->
    <p class="text-capitalize">Capitalized text.</p><!--首字母大写-->

缩略语

    <abbr title="attribute">attr</abbr>
    <abbr title="HyperText Markup Language" class="initialism">HTML</abbr><!--font-size:90%;-->

地址
<address>

引用
<blockquote>，来源的名称可以包裹进 <cite> 标签中；直接引用使用 ；
.blockquote-reverse可以用引用的文本呈现居右对齐；

实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Resource-type" content="Document"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>排版</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        <!--
        .line{border-top:1px solid #afd9ee;margin:20px 0;}
        -->
    </style>
</head>
<body>
<!--容器-->
<div class="container-fluid">
    <p>container-fluid：宽度100%</p>
</div>
<div class="container">
    <p>固定宽度container</p>
    <!--为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线-->
    <a href="#">测试链接</a>
</div>

<!--排版-->
<div class="container">
    <h1>h1. 36px <small>副标</small></h1>
    <h2>h2. 30px <small>副标</small></h2>
    <h3>h3. 24px <small>副标</small></h3>
    <h4>h4. 18px <small>副标</small></h4>
    <h5>h5. 14px <small>副标</small></h5>
    <h6>h6. 12px <span class="small">副标</span></h6>
    <div class="line"></div>
    <p>验证段落p，一般文本</p>
    <p class="lead">添加了lead类的文本</p>
    <div class="line"></div>
    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>
    <p class="text-justify">Justified text.</p>
    <p class="text-nowrap">No wrap text.</p>
    <div class="line"></div>
    <p class="text-lowercase">Lowercased text.</p><!--全部小写-->
    <p class="text-uppercase">Uppercased text.</p><!--全部大写-->
    <p class="text-capitalize">Capitalized text.</p><!--首字母大写-->
    <div class="line"></div>
    <abbr title="attribute">attr</abbr>
    <abbr title="HyperText Markup Language" class="initialism">HTML</abbr><!--font-size:90%;-->

</div>

</body>
</html>