第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 地址标签的使用

上一章目录下一章