Bootstrap全局样式 - 排版与链接

知识点

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

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

排版与链接

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

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

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

    
h1. 36px 副标
    
h2. 30px 副标
    
h3. 24px 副标
    
h4. 18px 副标
    
h5. 14px 副标
    
h6. 12px 副标

页面主体
font-sie:!4px;line-height:1.428，这些属性直接赋予 元素和所有段落元素；

元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
.lead让文本突出。

内联文本元素

1. mark：
2. 删除：
3. 无用文本：
4. 插入文本：
5. 带下划线的文本：
6. 小号文本：或.small
7. 着重：
8. 斜体：

对齐

    
Left aligned text.
    
Center aligned text.
    
Right aligned text.
    
Justified text.
    
No wrap text.

大小写

    
Lowercased text.
    
Uppercased text.
    
Capitalized text.

缩略语

    attr
    HTML

地址

引用

，来源的名称可以包裹进 标签中；直接引用使用

；
.blockquote-reverse可以用引用的文本呈现居右对齐；

---

实例

    
    
    
    
    
    
    
    
    




    
container-fluid：宽度100%


    
固定宽度container
    
    测试链接




    
h1. 36px 副标
    
h2. 30px 副标
    
h3. 24px 副标
    
h4. 18px 副标
    
h5. 14px 副标
    
h6. 12px 副标
    

    
验证段落p，一般文本
    
添加了lead类的文本
    

    
Left aligned text.
    
Center aligned text.
    
Right aligned text.
    
Justified text.
    
No wrap text.
    

    
Lowercased text.
    
Uppercased text.
    
Capitalized text.
    

    attr
    HTML