コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

清浅
リリース： 2019-01-17 09:05:51
オリジナル
10074 人が閲覧しました


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

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

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>
ログイン後にコピー

レンダリング:

Image 10.jpg

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

.table .table-striped にゼブラ ストライプを追加します (IE8 ではサポートされていません) .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>
ログイン後にコピー
レンダリング:
基本的なスタイルを追加します(のみ)水平区切り文字)
すべての表のセルに境界線を追加します。
< tbody 内の任意の行のマウスオーバー状態を有効にします;
テーブルをよりコンパクトにします

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

#.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 を外部から導入してテーブル スタイルをすばやく作成する方法を皆さんに学んでいただくのに役立つことを願っています。

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

関連ラベル：
bootstrap
ソース：php.cn
前の記事：JavaScript コードを使用するにはどうすればよいですか? HTMLページを導入するにはどうすればいいですか？ 次の記事：JavaScriptのコールバックとは何ですか
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
Web ページのサイズを変更するとブートストラップ スイッチが正しく動作しない これはコードです: <navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"clas...
から 2024-04-05 08:45:39
0
1
3443
Laravel のブートストラップ モードで AWS PDF ファイルを表示する https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf のよ...
から 2024-04-04 22:16:18
0
1
1450
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート