第4章 Bootstrap基础布局
4.1 基础排版
排版主要是针对HTML元素进行样式设置及布局定位，排版在Web前端开发中十分重要。Bootstrap提供了一套CSS样式，可以方便快速地渲染HTML元素，让页面排版更加便捷。
4.1.1 标题
1．标题元素<h1><h6>
Bootstrap可以使用HTML中的<h1>～<h6>这6个标题标签，并赋予了它们半粗体属性及由大到小的字体font-size属性。
【实例4-1】 标题标签的使用，代码如下。
运行【实例4-1】代码，页面效果如图4-1所示。
2．使用样式类.h1～.h6
Bootstrap除了基础的<h1>～<h6>这6个标题元素，还相应提供了6个样式类.h1～.h6，使用它们可以给内联属性的文本赋予不同级别的标题样式。
【实例4-2】 标题样式类的使用，代码如下。
运行【实例4-2】代码，页面效果如图4-2所示。
3．小标题
当一个标题内部含有小标题（子标题或副标题）时，可以在该标题内嵌套添加<small>元素（字体大小是父元素的0.85），也可以给小标题内容应用.small样式类（字体大小是父元素的0.65），这样可以得到一个更小、颜色更浅的文本。
图4-1 使用标题元素<h1><h6>
图4-2 使用样式类.h1～.h6
【实例4-3】 小标题的设置，代码如下。
运行【实例4-3】代码，页面效果如图4-3所示。
图4-3 小标题
4.1.2 段落
1．基本段落
Bootstrap将页面<body>元素中的全局字体大小font-size设置为14px，行高line-height设置为1.428。<body>和<p>元素都被赋予了这些属性，另外，<p>元素还被设置了等于1/2行高(10px)的底部外边距（margin-bottom）。
2．中心内容
Bootstrap为了突出多个段落中的某一个段落，也就是强调文本，可以添加class="lead"，这将得到更大更粗、行高更高的文本。
【实例4-4】 突出段落，代码如下。
运行【实例4-4】代码，页面效果如图4-4所示。
图4-4 突出段落
4.1.3 文本样式
1．常用文本格式的重定义
HTML网页中，为了让文字富有变化，或者强调某一部分，例如为文字设置粗体、斜体或下画线效果，Bootstrap针对文本格式元素的样式进行了重新定义，表4-1列出了常用的格式元素。
表4-1 常用文本格式样式
【实例4-5】 常用文本格式元素的使用，代码如下。
运行【实例4-5】代码，页面效果如图4-5所示。
图4-5 常用文本格式的重定义
2．文本的对齐方式与强调
Bootstrap针对文本的对齐提供了.text-left、.text-right、.text-center、.text-nowrap等文本对齐类，如表4-2所示。
表4-2 常用文本对齐与强调样式
【实例4-6】 常用文本对齐与强调样式的使用，代码如下。
运行【实例4-6】代码，页面效果如图4-6所示。
图4-6 常用文本对齐与强调样式
3．字母大小写与缩写
Bootstrap提供了.text-lowercase（将大写转换为小写）、.text-uppercase（将小写转换为大写）、.text-capitalize（将首字母转换为大写）几个类，可以方便地改变文本的字母大小写。
Bootstrap定义<abbr>元素的样式为显示在文本底部的一条虚线边框，当鼠标指针悬停在上面时会显示完整的文本，实现方式是为<abbr>元素的title属性添加了文本说明。
【实例4-7】 文本大小写转换与缩写类的使用，代码如下。
运行【实例4-7】代码，页面效果如图4-7所示。
4．地址
使用地址标签<address>可以在网页上显示联系信息。由于<address>默认为“display:block;”，所以需要使用<br>标签来为封闭的地址文本添加换行。
【实例4-8】 地址标签<address>的使用，代码如下。
运行【实例4-8】代码，页面效果如图4-8所示。
图4-7 文本大小写转换与缩写类的使用
图4-8 地址标签的使用