ブートストラップにはどのようなテーブルクラスがありますか?-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2022-01-10 12:06:54

オリジナル

2648 人が閲覧しました

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 サイトの他の関連記事を参照してください。