ブートストラップ学習ノート ブートストラップcomponent_html/css_WEB-ITnose

Bootstrap は、テーブルを作成するための明確なレイアウトを提供します。次の表は、Bootstrap でサポートされているいくつかのテーブル要素を示しています。

标签	描述
f5d188ed2c074f8b944552db028f98a1	为表格添加基础样式。
ae20bdd317918ca68efdc799512a9b39	表格标题行的容器元素（a34de1251f0d9fe1e645927f19a896e8），用来标识表格列。
92cee25da80fac49f6fb6eec5fd2c22a	表格主体中的表格行的容器元素（a34de1251f0d9fe1e645927f19a896e8）。
a34de1251f0d9fe1e645927f19a896e8	一组出现在单行上的表格单元格的容器元素（b6c5a531a458a2e790c1fd6421739d1c 或 b4d429308760b6c2d20d6300079ed38e）。
b6c5a531a458a2e790c1fd6421739d1c	默认的表格单元格。
b4d429308760b6c2d20d6300079ed38e	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 ae20bdd317918ca68efdc799512a9b39 内使用。
63bd76834ec05ac1f4c0ebbeaafb0994	关于表格存储内容的描述或总结。

テーブル クラス

テーブルでは次のテーブル スタイルを使用できます:

类	描述
.table	为任意 f5d188ed2c074f8b944552db028f98a1 添加基本样式 (只有横向分隔线)
.table-striped	在 92cee25da80fac49f6fb6eec5fd2c22a 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 92cee25da80fac49f6fb6eec5fd2c22a 内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑

次のクラスをテーブルの行またはセルに使用できます:

类	描述
.active	将悬停的颜色应用在行或者单元格上
.success	表示成功的操作
.info	表示信息变化的操作
.warning	表示一个警告的操作
.danger	表示一个危险的操作

パディングと水平分割のみを備えた基本的なテーブルがある場合は、次の例に示すようにクラス .table を追加します。

表示効果:

<div class="row">            <table class="table">                <caption class="text-center">基本表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                </tbody>            </table>        </div>

オプションのテーブル クラス

基本的な table タグと .table クラスに加えて、タグのスタイルを定義するために使用できるクラスもあります。これらのクラスを以下に紹介します。

ストライプ テーブル

.table-striped クラスを追加すると、以下の例に示すように、92cee25da80fac49f6fb6eec5fd2c22a 内の行にストライプが表示されます。

表示効果:

<div class="row">            <table class="table table-striped">                <caption class="text-center">条纹表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr>                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr>                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

ボーダーテーブル

.table-border クラスを追加すると、各要素の周囲にボーダーがあり、以下の例に示すように、テーブル全体が丸められます。

表示効果:

<div class="row">            <table class="table table-bordered">                <caption class="text-center">边框表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr>                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr>                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

ホバーテーブル

.table-hover を追加することによりこのクラスでは、次の例に示すように、ポインターが行の上に移動すると、明るい灰色の背景が表示されます。

表示効果:

<div class="row">            <table class="table table-hover">                <caption class="text-center">悬停表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr>                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr>                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

簡略化されたテーブル

.table-condensed クラスを追加すると、以下の例に示すように、パディングが半分にカットされ、テーブルがよりコンパクトに見えます。これは、情報をよりコンパクトに表示したい場合に便利です。

表示効果:

<div class="row">            <table class="table table-condensed">                <caption class="text-center">精简表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr>                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr>                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr>                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

コンテキスト クラス

以下の表にリストされているコンテキスト クラスを使用すると、テーブルの行または個々のセルの背景を変更できます。色。

这些类可以用到a34de1251f0d9fe1e645927f19a896e8、b6c5a531a458a2e790c1fd6421739d1c、b4d429308760b6c2d20d6300079ed38e中，如下面实例所示：

<div class="row">            <table class="table">                <caption class="text-center">上下文表格布局</caption>                <thead>                    <tr>                        <th>编号</th>                        <th>城市</th>                    </tr>                </thead>                <tbody>                    <tr class="active">                        <td>No.1</td>                        <td>北京</td>                    </tr>                    <tr class="success">                        <td>No.2</td>                        <td>上海</td>                    </tr>                    <tr class="warning">                        <td>No.3</td>                        <td>苏州</td>                    </tr>                    <tr class="danger">                        <td>No.4</td>                        <td>南京</td>                    </tr>                </tbody>            </table>        </div>

显示效果：

响应式表格

通过把任意的 .table 包在  .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

 <div class="table-responsive">        <table class="table">            <caption class="text-center">响应式表格布局</caption>            <thead>                <tr>                    <th>编号</th>                    <th>城市</th>                </tr>            </thead>            <tbody>                <tr>                    <td>No.1</td>                    <td>北京</td>                </tr>                <tr>                    <td>No.2</td>                    <td>上海</td>                </tr>                <tr>                    <td>No.3</td>                    <td>苏州</td>                </tr>                <tr>                    <td>No.4</td>                    <td>南京</td>                </tr>            </tbody>        </table>    </div>

显示效果：