Bootstrap 表格

Bootstrap 表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

标签  描述
<table> 为表格添加基础样式。
<thead> 表格标题行的容器元素（<tr>），用来标识表格列。
<tbody> 表格主体中的表格行的容器元素（<tr>）。
<tr>    一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td>    默认的表格单元格。
<th>    特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption>   关于表格存储内容的描述或总结。

Bootstrap 图片

在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

响应式图片

通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。
.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：
实例

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">

Bootstrap 辅助类

文本

以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：

<a class="text-muted" >链接使用了样式 "text-muted"。</a>

<a class="text-primary" >链接使用了样式 "text-primary"。</a>

<a class="text-success" >链接使用了样式 "text-success"。</a>

<a class="text-info" >链接使用了样式 "text-info"。</a>

<a class="text-warning" >链接使用了样式 "text-warning"。</a>

<a class="text-danger" >链接使用了样式 "text-danger"。</a>

其他

<div class="container">
    <h2>实例</h2>
    <div class="pull-left">元素浮动到左侧</div>
    <div class="pull-right">元素浮动到右侧</div>
</div>

<div class="container">
    <h2>实例</h2>
    <div class="center-block" style="width:150px;background-color:#ccc;">该 div 显示在中间</div>
</div>

.clearfix 清除浮动

<div class="container-fluid">
    <h1>Hello World!</h1>
    <div class="row">
        <div class="col-xs-6 col-sm-3" style="background-color:lavender;">
         列 1<br>
        重置窗口大小，查看效果。也尝试删除有 clearfix  的 div 查看效果。
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color:lavenderblush;">列 2</div>
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">列 3</div>
        <div class="col-xs-6 col-sm-3" style="background-color:lightgray;">列 4</div>
    </div>
</div>