検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >ブートストラップにはどのようなテーブル クラスがありますか?

ブートストラップにはどのようなテーブル クラスがありますか?

青灯夜游
青灯夜游オリジナル
2022-01-10 12:05:132743ブラウズ

Bootstrap のテーブル クラスには次のものが含まれます: 1. “.table”、基本テーブル; 2. “.table-triped”、ゼブラ ストライプ テーブル; 3. “.table-bordered”、枠線付きテーブル; 4. " .table-hover」、マウスオーバーで強調表示されたテーブルなど。

ブートストラップにはどのようなテーブル クラスがありますか?

このチュートリアルの動作環境: Windows7 システム、bootsrap3.3.7 バージョン、DELL G3 コンピューター

Bootstrap Table

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

##
# Tag Description
基本的なスタイルをテーブルに追加します。 テーブルのヘッダー行のコンテナ要素 () は、テーブルの列を識別するために使用されます。 テーブル本体内のテーブル行のコンテナ要素 ()。 単一行に表示されるテーブル セルのグループのコンテナ要素 (デフォルトのテーブルセル。 列または行を識別するために使用される特別なテーブル セル (範囲と位置に応じて)。 内で使用する必要があります。 テーブル ストレージの内容の説明または概要。
または )。

Bootstrap は、主に次のようなテーブルのさまざまなスタイルにさまざまなクラス名を提供します。

ClassDescription.table基本スタイル (水平方向の区切り文字のみ) を
#.table-striped にゼブラ ストライプを追加します (IE8 ではサポートされていません).table-bordered.table-hover ホバー状態内の任意の行でマウスを有効にします.table-condensed#Compact tableレスポンシブ数式テーブル#.table-bagged枠付きテーブル#

基本的なテーブル

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

Instance

##
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
	<caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>
結果は次のようになります:

ブートストラップにはどのようなテーブル クラスがありますか?

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

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

ストライプ テーブル

.table-striped クラスを追加すると、次のように

内の行にストライプが表示されます。上記の例##Example

<table class="table table-striped">
  <caption>条纹表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

#結果は次のとおりです:

ブートストラップにはどのようなテーブル クラスがありますか?Border table

.table-bordered

クラスを追加すると、以下に示すように、各要素の周囲に境界線があり、テーブル全体の角が丸くなっていることがわかります。例は次のとおりです:

Example

<table class="table table-bordered">
  <caption>边框表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

結果は次のとおりです:

ブートストラップにはどのようなテーブル クラスがありますか?

Hover table

.table-hover

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

例

<table class="table table-hover">
  <caption>悬停表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

結果は次のとおりです:

ブートストラップにはどのようなテーブル クラスがありますか?

#簡略化した形式

.table-condensed

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

インスタンス

<table class="table table-condensed">
  <caption>精简表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td></tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td></tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td></tr>
  </tbody></table>

結果は次のとおりです:

ブートストラップにはどのようなテーブル クラスがありますか?

コンテキスト クラス

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

## に追加します。
テーブルのすべてのセルに境界線を追加します
##.table-sensitive
クラス 説明.active特定の行またはセルに適用されます成功または肯定的なアクションを示すホバー色 .success.warning注意が必要な警告を示します。#危険なアクションまたはネガティブなアクションを示す#これらのクラス、例
#.danger
、または に適用できます。 
<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td></tr>
    <tr class="success">
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td></tr>
    <tr class="warning">
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td></tr>
    <tr class="danger">
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td></tr>
  </tbody></table>

結果は次のとおりです:


レスポンシブフォーム

ブートストラップにはどのようなテーブル クラスがありますか?## 任意の

.table
を

.table-sensitive クラス内でラップすると、小さなデバイス (768 ピクセル未満) に合わせてテーブルを水平にスクロールできます。 。幅 768 ピクセルを超える大きなデバイスで表示しても、違いはわかりません。

例

<div class="table-responsive">
  <table class="table">
    <caption>响应式表格布局</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td></tr>
      <tr>
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td></tr>
      <tr>
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td></tr>
      <tr>
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td></tr>
    </tbody>
  </table></div>
結果は次のとおりです:

##[関連する推奨事項: 「

ブートストラップ チュートリアル

」 》】

以上がブートストラップにはどのようなテーブル クラスがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

bootstrap 指针 class 内边距 padding table tbody td tr th
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScriptで等しくないことを表現する方法次の記事：JavaScriptで等しくないことを表現する方法

関連記事

続きを見る