本网站只能被运行在支持JavaScript脚本的环境中

第4章 使用Bootstrap美化文字与表格效果

本节概述

本节介绍如何使用Bootstrap制作Web应用程序中用于显示信息与数据的文字、表格、分页及弹出提示信息。

标题元素

设计不同级别的标题

在Bootstrap中,针对h1~h6元素(以下称为标题元素)提供基本样式。

在笔者写作时,为h1~h6元素准备了h1,h2,…,h6这几个class。因此,当需要为文章结构使用h3元素,但是想让其显示为h5元素时,可以将h3元素的class属性值指定 为h5。

<h3 class="h5">h3  Bootstrap标题.</h3>

在标题元素内使用子标题

可以通过在标题元素内使用small元素,或将元素的class属性值指定为small的方法将元素的字体变小、颜色变淡。当需要设计子标题时这个设计手法将变得非常有用。

<h1>h1. Bootstrap标题<br/><small>副标题</small></h1>
<h2>h2. Bootstrap标题<br/><small>副标题</small></h2>
<h3>h3. Bootstrap标题<br/><small>副标题</small></h3>
<h4>h4. Bootstrap标题<br/><small>副标题</small></h4>
<h5>h5. Bootstrap标题<br/><small>副标题</small></h5>
<h6>h6. Bootstrap标题<br/><small>副标题</small></h6>

错误、警告等设计

虽然在Web网站中并不多见,但是在Web应用程序中经常会看见错误、警告等提示。

在Bootstrap中,为错误、警告等提供如下表所示的class。

class 说明
active 用于表示正在被选择的灰色背景
success 用于表示处理完毕、处理成功的绿色背景
info 用于表示信息的蓝色背景
warning 用于表示警告的黄色背景
danger 用于表示错误的红色背景

p元素

如果将p元素的class属性值指定为"bg-primary"、"bg-success"、"bg-info"、"bg-warning"或"bg-danger",则可以修改p元素的背景色。当需要将文字左对齐时,可以为p元素 或其他块元素指定"text-left"class,当需要将文字居中对齐时,可以为p元素或其他块元素指定"text-center"class,当需要将文字右对齐时,可以为p元素或其他块元素指定"text- right"class,当需要将文字两端对齐时,可以为p元素或其他块元素指定"text-justify"class。可以为p元素指定多个class,class与class之间使用空格进行分隔。

<div>
    <p class="bg-primary text-left">重要</p>
    <p class="bg-success text-center">成功</p>
    <p class="bg-info text-right">信息</p>
    <p class="bg-warning">警告</p>
    <p class="bg-danger">危险</p>
</div>

如果为p元素使用如下表所示的class,则可以指定p元素中的文字颜色。

用途 class 颜色
暗示 text-muted 灰色
重要 text-primary 蓝色
成功 text-success 绿色
信息 text-info 浅蓝色
警告或提醒注意 text-warning 桔色
错误或危险性提示 text-danger 红色
<p class="text-muted">暗示信息</p>
<p>普通</p>
<p class="text-primary">重要</p>
<p class="text-success">成功</p>
<p class="text-info">信息</p>
<p class="text-warning">警告</p>
<p class="text-danger">危险</p>

abbr元素的样式

用于缩略语的abbr元素下部添加点划线,当鼠标指针移动到元素上时鼠标指针的外观也会产生变化。可以通过将元素的class属性值指定为initialism的方法使文字变小。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

引用

引用的样式

在Bootstrap中,为引用准备了基本样式,使用示例如下所示(将引文来源书写在footer元素中)。

<blockquote>
    <ul>
        <li>一、 Bootstrap内部使用HTML 5与CSS 3…</li>
        <li>二、 Bootstrap可以用于自适应Web设计…</li>
        <li>三、 Bootstrap提供大量Web部件…</li>
    </ul>
    <footer>引自陆凌牛著《使用Bootstrap制作自适应Web网站》</footer>
</blockquote>

表格

表格的使用方法

虽然在Bootstrap中没有特别针对table元素提供样式,但是推荐将table元素的class属性值指定为table(用于创建没有垂直边框的默认表格)。

<table class="table">
  :
</table>

之所以没有针对table元素指定样式,是因为当使用日历与日期拾取器等其他扁平式设计元素时必须避免重复样式。

隔行变色

当行数较多时有时难以看清,这时可以为table元素使用table-striped这个class。但是,由于该样式使用了CSS 3中的“:nth-child”选择器,所以在IE 8浏览器中无效 。

<table class="table table-striped">
  :
</table>

表格线的显示

在Bootstrap中,表格的默认设计为只有横向表格线,但有时我们想显示竖向表格线,这时可以为table元素使用table-bordered这个class。

<table class="table table-bordered">
  :
</table>

当鼠标指针移到行上时改变背景色

可以通过为table元素指定table-hover这个class的方法来定义当鼠标指针移动到某行上时改变其背景色。

<table class="table table-hover">
  :
</table>

缩小行间距

在Bootstrap的表格设计中,指定了充足的行间距。当基于行数较多等原因需要缩小行间距时可以为table元素使用table-condensed这个class。

<table class="table table-condensed">
  :
</table>

修改背景色

为tr元素指定如下所示的class(含义参照“错误、警告等设计”小节),Bootstrap将自动为行指定背景色。

<tr class="active"> ... </tr>
<tr class="success"> ... </tr>
<tr class="warning"> ... </tr>
<tr class="danger"> ... </tr>
<tr class="info"> ... </tr>

另外,如果将这些class指定给th元素或td元素,可以改变单元格的背景颜色。

<tr>
    <td class="active"> ... </td>
    <td class="success"> ... </td>
    <td class="warning"> ... </td>
    <td class="danger"> ... </td>
    <td class="info"> ... </td>
</tr>

自适应表格

通常的表格为width:100%宽度,但有时水平方向太长的表格在智能手机中显示时单元格的文字换行太多会导致难以看清。可以通过为用于封装表格元素的div元素指定 table-responsive这个class的方法使表格在智能手机中显示时可以横向滚动。

<div class="table-responsive"<
    <table class="table">
    :
    </table>
</div>

分页

在Web系统中当数据量非常多时,经常需要将这些数据分成多页进行显示。

显示页号

当需要使用数值显示页号时,可以将ul元素的class属性值设置为“pagination”。通过在ul元素中放置li子元素来显示各页号,可以通过将li元素的class属性值指定为 “active”的方法来显示当前页号。

当需要控制用户不能点击时,可以将li元素的class属性值设置为“disabled”。例如当前页面为第1页时,需要为用于显示第1页的li元素使用“active”class,同时将 用于显示前1页按钮的li元素的class属性值设置为disable。

另外,在浏览器中,“&laquo;”显示为“«”,“&raquo”显示为“»”。

<ul class="pagination">
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>
<hr />

另外,当需要显示大尺寸的分页部件时,需要将ul元素的class属性值设置为“pagination pagination-lg”,当需要显示小尺寸的分页部件时,需要将ul元素的class属 性值设置为“pagination pagination-sm”。

标准尺寸的分页部件
大尺寸的分页部件
小尺寸的分页部件

只显示“上一页”、“后一页”按钮

当不需要显示页号,只需显示“上一页”、“下一页”按钮时,可以将ul元素的class属性值设置为“pager”。

当需要将“上一页”、“下一页”按钮放置在父元素两端时,可以分别将用于显示“上一页”按钮的li元素的class属性值设置为“previous”,将用于显示“下一页”按 钮的li元素的class属性值设置为“next”。

<ul class="pager">
    <li><a href="#">&laquo; 上一页</a></li>
    <li><a href="#">下一页 &raquo;</a></li>
</ul>
<ul class="pager">
    <li class="previous"><a href="#">&laquo; 上一页</a></li>
    <li class="next"><a href="#">下一页 &raquo;</a></li>
</ul>

提示信息

当在对用户在表单中输入的数据进行错误验证时,如果用户输入错误,或未输入必须输入的数据,可以使用alert部件来提示用户必须输入或应该输入什么数据。可以通过为 div元素使用如下表所示的class来使用alert部件。

用途 class 颜色
成功 alert-success 绿色
信息 alert-info 浅蓝色
警告或提醒注意 alert-warning 桔色
错误或危险性提示 alert-danger 红色

当需要在alert部件中放置链接时,需要将a元素的class属性值设置为“alert-link”。

<div class="alert alert-success">成功</div>
<div class="alert alert-info">信息</div>
<div class="alert alert-warning">注意</div>
<div class="alert alert-danger">错误
      点击<a href="#" class="alert-link">此处</a>
</div>

附加删除按钮的alert

在用户看清楚提示信息后,如果能够将其删除,则用户体验将会更好。在Bootstrap中,可以使用具有删除按钮的alert部件,使用方法为将div元素的class属性值设置为 “alert-dismissible”。为了制作alert中的删除按钮,需要将其中的button元素的class属性值设置为“close”,data-dismiss属性值设置为“alert”,同时使用“&times;” 显示“×”符号。

<div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">
        <span>&times;</span>
    </button>
    具有删除按钮的alert
</div>

Bootstrap中的其他基本样式

除上述样式外,在Bootstrap中还提供了各种各样丰富的class。接下来介绍一些网站设计中必不可缺的class。

与float相关的class

clearfix

clearfix是与float属性配合使用的一个class,其目的为解决由于float属性的浮动化特性引起的使用float属性的元素的父元素没有高度、从而导致不能指定背景、 布局混乱等问题。

使用方法为为使用了float属性的元素的父元素指定clearfix这个class。

<div class='clearfix'>
    <img src="..." alt='...' width="180" height="200" style='float:left'>
</div>
后续内容

快速浮动

用于简单实现从左向右浮动的class如下表所示。请注意这些class所用样式中都使用!important关键字。

class 说明
pull-left 向左浮动
pull-right 向右浮动

元素的显示与隐藏

通过使用如下表所示的几个class,可以轻松设置元素的隐藏与显示。

class 使用css 说明
show display: block; 请注意该class会将内联(inline)元素强制修改为块元素
hidden display: none !important; visibility: hidden !important;
invisible visibility: hidden; 虽然占据元素位置,但是不显示

请注意hidden class内部使用!important关键字,所以最好被使用在使用JavaScript或jQuery进行动态设置的场合中。

sr-only

当使用该class时,元素被设置为1px*1px的元素,所以变得不可见。之所以内部不使用display:none样式,是因为该class的使用目标是为了让视觉障碍者使用网站时可 以让屏幕阅读器将其大声读出。

当不想让元素显示,但是可以被读出声音时可以为元素使用这个class。