Bootstrap でテーブル スタイルを設定する方法

Bootstrap ファイルを外部から導入することでテーブル スタイルを設定できます。導入後、Bootstrap ファイル内のテーブル スタイルのクラス名を HTML に追加します。特定のスタイルを追加するコード

今日は、Bootstrap を使用してテーブル スタイルを迅速に構築する方法を紹介します。これは一定の参考価値があり、皆さんのお役に立てれば幸いです。

【おすすめコース: Bootstrap チュートリアル】

Bootstrap の意味:

Bootstrap は、Web アプリケーションと Web サイトを迅速に開発するためのフロントエンド フレームワークです。ブートストラップは主に HTML、CSS、および JavaScript 言語ドキュメントに基づいています。

これには次の特徴があります。

CSS には、基本的な HTML 要素スタイル、拡張可能なクラス、その他の機能を定義するグローバル CSS 設定があります。同時に、画像、ドロップダウン メニュー、ナビゲーション、アラート ボックス、ポップアップ ボックスなどを作成するための再利用可能なコンポーネントも十数個含まれています。ブートストラップに含まれる JavaScript プラグインには、コード内で

を直接使用して、ブートストラップを通じてテーブル スタイルを迅速に構築できます。 (1) 外部から Bootstrap ファイルをインポートする

<link type="text/css" rel="stylesheet" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">
 <script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.css"></script>

(2) HTML コードを通じてテーブルを作成する

 <table>
            <thead>
                <tr>
                    <th>标题一</th>
                    <th>标题二</th>
                    <th>标题三</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>示例一</td>
                    <td>示例一</td>
                    <td>示例一</td></tr>
                <tr>
                    <td>示例二</td>
                    <td>示例二</td>
                    <td>示例二</td></tr>
                <tr>
                    <td>示例三</td>
                    <td>示例三</td>
                    <td>示例三</td></tr>
                </tbody>
        </table>

レンダリング:

(3) 次に外部からBootstrapを導入してテーブルスタイルを手早く構築します

.table .table-striped .table-border.table-hover.table-condensed##

   <table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
            <thead>
                <tr>
                    <th>标题一</th>
                    <th>标题二</th>
                    <th>标题三</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>示例一</td>
                    <td>示例一</td>
                    <td>示例一</td></tr>
                <tr>
                    <td>示例二</td>
                    <td>示例二</td>
                    <td>示例二</td></tr>
                <tr>
                    <td>示例三</td>
                    <td>示例三</td>
                    <td>示例三</td></tr>
                </tbody>
        </table>

レンダリング:

基本的なスタイルを追加します(のみ)水平区切り文字)
92cee25da80fac49f6fb6eec5fd2c22a にゼブラ ストライプを追加します (IE8 ではサポートされていません)
すべての表のセルに境界線を追加します。
< tbody 内の任意の行のマウスオーバー状態を有効にします;
テーブルをよりコンパクトにします

#さらに、テーブルに背景色を追加することもできます。具体的なコードは次のとおりです。

#.active ホバー色を特定の行またはセルに適用します 成功または肯定的なアクションを示します 注意が必要な警告を示します 危険なアクションまたは潜在的にマイナスなアクションを示します レンダリング:

	.success
	.warning
	.danger
	<table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px"> <thead> <tr class="active"> <th>标题一</th> <th>标题二</th> <th>标题三</th> </tr> </thead> <tbody> <tr class="success"> <td>示例一</td> <td>示例一</td> <td>示例一</td></tr> <tr class="warning"> <td>示例二</td> <td>示例二</td> <td>示例二</td></tr> <tr class="danger"> <td>示例三</td> <td>示例三</td> <td>示例三</td></tr> </tbody> </table>

概要: 上記がこの記事の全内容です

この記事が、Bootstrap を外部から導入してテーブル スタイルをすばやく作成する方法を皆さんに学んでいただくのに役立つことを願っています。

以上がBootstrap でテーブル スタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。