ブートストラップ学習ノートブートストラップcomponent_html/css

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

标签

描述

），用来标识表格列。）。内使用。


为表格添加基础样式。

表格标题行的容器元素（

表格主体中的表格行的容器元素（

一组出现在单行上的表格单元格的容器元素（	或	）。
		默认的表格单元格。
		特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在

关于表格存储内容的描述或总结。

テーブルクラス

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

内の行にストライプが表示されます。表示効果:

<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>

ログイン後にコピー

コンテキストクラス

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

这些类可以用到

、

类

描述

.table

为任意添加基本样式 (只有横向分隔线) 内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态

.table-striped	在
.table-bordered	为所有表格的单元格添加边框
.table-hover	在
.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 クラスを追加すると、以下の例に示すように、

、

中，如下面实例所示：

<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>

ログイン後にコピー

显示效果：