ブートストラップのテーブル スタイルとは何ですか?

テーブル スタイルは 7 つあります: 1. 水平区切り記号のみを使用して基本的なテーブルを定義できる「.table」スタイル; 2. ゼブラ交差テーブルを定義できる「.table-striped」スタイル1 行おきに浅い線、灰色の背景色、3. 「.table-bordered」スタイル、すべての表のセルに枠線スタイルを追加するなど。

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

Bootstrap テーブルstyle

##☑ .table: 基本的なテーブル。基本的なスタイル (水平方向の区切り記号のみ) を

☑ に追加します。 table-striped: ゼブラストライプのテーブル

##☑ .table-border: 枠線のあるテーブル

☑ .table-hover: マウスホバー ハイライトされたテーブル

☑ .table-condensed：コンパクトなテーブル

##☑ .table-sensitive：レスポンシブなテーブル

#☑コンテキスト テーブル

以下は、上記のテーブル スタイルの簡単な紹介です:

1. 基本テーブル

Bootstrap では、基本的なテーブルtable はクラス名「.table」によって制御されます。

要素にクラス名を追加しない場合、テーブルにはスタイル効果がありません。基本的なテーブルを取得するには、「.table」クラス名を 要素に追加して、ブートストラップの基本的なテーブルを取得するだけです:

                                                                                                                                                    

基础表格

省份	城市
广东	深圳
广西	桂林
海南	三亚

レンダリングは次のとおりです:

".table" には主に 3 つの機能があります:

テーブルの margin-bottom:20px を設定し、セルのパディングを設定します

• #2 ピクセルのライトグレーの実線が広告の下部に設定されます

• #1 ピクセルのライトグレーの実線が各セルの上部に設定されます

• 2. 縞模様のテーブル

テーブルを読みやすくするために、テーブルを横断歩道に似たものにする必要がある場合があります。効果。簡単に言うと、テーブルに背景のストライプ効果を与えることです。 Bootstrap でこの種のテーブル効果を実現するのは難しくありません。 に基づいてクラス名 ".table-striped" を追加するだけです:

効果の図:

効果は、本体の 1 行おきに明るい灰色の背景色があることを除いて、基本的な表と比較されます。実装原理も非常にシンプルで、CSS3の構造セレクター「:nth-child」を利用して実装しているため、IE8以下のブラウザでは背景ストライプ効果はありません。

3. 境界線テーブル

基本的なテーブルでは、テーブルの一部にのみ境界線を付けることができますが、場合によっては、テーブル全体に境界線の効果を持たせる必要があります。実用的な目的で、Bootstrap はこのテーブル効果も考慮します。つまり、すべてのセルに 1 ピクセルの境界線があります。

Bootstrap でのボーダー付きテーブルの使用は、ゼブラ交差テーブルの使用に似ています。基本的なテーブル

に「.table-bordered」クラス名を追加するだけです。利用可能:

レンダリング:

4. テーブルをホバーする

マウスを上に置いたときテーブル 行には明るい背景色があり、この種のテーブルは人々に快適に見え、テーブル内のデータのどの行が読み取られているかを常にユーザーに知らせます。 Bootstrap はこの効果も考慮し、このテーブル効果を実現するために ".table-hover" クラス名を提供しました。

マウスホバーで強調表示される表も使いやすく、

要素にクラス名「table-hover」を追加するだけです:

エフェクト画像:

マウスホバーハイライトの効果は、主に「hover」イベントによって実現されます。「tr:hover」が設定されている場合、その背景色はそしてTDは新色です。

注: 実際、マウス ホバー ハイライト テーブルは他のブートストラップ テーブルと混合できます。簡単に言うと、テーブルにホバー ハイライト効果を持たせたい場合は、「table-hover」クラス名をテーブルに追加するだけです。たとえば、前に紹介したいくつかのテーブルを結合します:

<table class="table table-striped table-bordered table-hover">
…
</table>

5. コンテキスト テーブル

tr と td にスタイルを追加することで、行またはセルにスタイルを追加します 背景を指定しますコンテキストを強調表示するスタイルの色。一般的に使用されるスタイルには、アクティブ、成功、情報、危険、警告などがあります。以下に示すように:

<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>省份</th>
      <th>省会</th>
      <th>地级市数量</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>福建</td>
      <td>福州</td>
      <td>9</td></tr>
    <tr class="success">
      <td>广东</td>
      <td>广州</td>
      <td>21</td></tr>
    <tr class="warning">
      <td>广西</td>
      <td>南宁</td>
      <td>14</td></tr>
    <tr class="danger">
      <td>海南</td>
      <td>海口</td>
      <td>4</td></tr>
  </tbody>
</table>

レンダリング:

6. レスポンシブ フォーム

随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。

Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将

置于这个容器当中，这样表格也就具有响应式效果。

Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下：

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

七、紧凑型表格：

何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中，通过类名“table-condensed”重置了单元格内距值。

紧凑型表格的运用，也只是需要在

基础上添加类名“table-condensed”：

<table class="table table-condensed">

Bootstrap中紧凑型的表格与基础表格差别不大，因为只是将单元格的内距由8px调至5px。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

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