简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

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


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 までご連絡ください。
著者別の最新記事
最新の問題
Nuxt.js に jQuery をインストールする手順 プロジェクトに jQuery を追加しようとしましたが、定義されていないというエラーが表示されます。 plugins:[{src:'~/plugins/js/svgSprite.j...
から 2023-11-06 16:41:50
0
1
225
npm run devを実行した後でも、Laravel 9はまだApp.cssとApp.jsを見つけることができません Laravel は初めてなので、始める前に Laravel9 のドキュメントを必ずチェックしましたが、見逃した場合に備えて、artisan が提供するリンクに app.css と ...
から 2023-10-26 23:41:22
0
1
489
Bootstrap 4 のグリッド システム ブレークポイントをカスタマイズする デザインにデスクトップからタブレット、または xl から lg までそれぞれ 1280 個のブレークポイントが必要なアプリケーションがあります。ただし、Bootstrap 自体には...
から 2023-10-18 23:01:50
0
2
197
ヘッダー画像、テキスト、ボタンをレスポンシブにする方法 Bootstrap5を使ってWebサイトを作っています。ウェブサイトのヘッダーでは、Bootstrap のカルーセルをヘッダーに使用しています。カルーセル画像では、テキストやボタン...
から 2023-09-17 09:51:15
0
1
283
Bootstrap ナビゲーション バーが正しくレンダリングされないのはなぜですか? Bootstrap4 を使用してナビゲーション バーを作成しようとしていますが、コードが機能しないようです。私のコードはチュートリアルとほぼ同じですが、nav-brand にいくつ...
から 2023-09-16 16:14:06
0
1
522
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！