検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >Boostrap を使用してテーブル インスタンスを作成する

Boostrap を使用してテーブル インスタンスを作成する

零下一度
零下一度オリジナル
2017-06-23 10:05:572211ブラウズ

前に話します

Boosttrap は、非常に美しく使いやすいテーブル スタイルを提供します。Boosttrap を使用すると、さまざまなスタイルのテーブルを簡単に作成できます

基本的な例

Boostrap 変換。 tables 

table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
}


任意の <table> タグに <code>.table クラスを追加します。基本的なスタイルを与える — 少量のパディングと水平分割線 <table>标签添加.table类可以为其赋予基本的样式—少量的内边距(padding)和水平方向的分隔线 

<table>
  <caption>Optional table caption.</caption>
  <thead><tr>  <th>#</th>  <th>First Name</th>  <th>Last Name</th>  <th>Username</th></tr>
  </thead>
  <tbody><tr>  <th scope="row">1</th>  <td>Mark</td>  <td>Otto</td>  <td>@mdo</td></tr><tr>  <th scope="row">2</th>  <td>Jacob</td>  <td>Thornton</td>  <td>@fat</td></tr><tr>  <th scope="row">3</th>  <td>Larry</td>  <td>the Bird</td>  <td>@twitter</td></tr>
  </tbody></table>


 

条纹状表格

　　通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式

　　[注意]条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被IE8-支持

<table class="table">
  ...</table>
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}


 

带边框表格

　　添加 .table-bordered

<table class="table table-striped">
  ...</table>


ストライプテーブル

は、.table-striped クラス &lt で指定できます。 ; tbody> 内の各行にゼブラ ストライプ スタイルを追加します。 [注] ストライプ テーブルは :nth-child CSS セレクターに依存しており、この機能は IE8 サポートではサポートされていません 

<table class="table table-bordered">
  ...</table>
<table class="table table-hover">
  ...</table>


ボーダー付きテーブル

テーブルとテーブル内の各セルにボーダーを追加するための .table-bordered クラスを追加しました

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}


悬 マウスホバー

.table-hover クラスを追加して、 & lt; tBody & gt; がマウス ホバー ステータスに応答できるようにします。 。 table-condensed クラスを使用すると、テーブルをよりコンパクトにすることができ、セル内のパディングが半分になります。要素を使用して、水平方向にスクロールする小さな画面デバイス ( 768px 未満) で見栄えのする応答性の高いテーブルを作成します。画面の幅が 768 ピクセルより大きい場合、水平スクロールバーが表示されなくなります

<table class="table table-condensed">
  ...</table>

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

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：画像の読み込みを遅らせるにはどうすればよいですか?次の記事：画像の読み込みを遅らせるにはどうすればよいですか?

関連記事

続きを見る