ブートストラップ フレームワークは、その使いやすさ、美しいレイアウト、応答性の高いレイアウトのため、広く使用されています。この記事では、ブートストラップ テーブルの例を使用して、ブートストラップでのテーブルの使用方法とテーブルの関連スタイルについて説明します。一定の参考値があり、興味のある友人はそれを参照できます。
ブートストラップ フレームワーク レイアウトを使用する前に、まず関連する jQuery、CSS、および JS ファイルを導入する必要があります。不明な場合は、以前の記事「HTML でブートストラップ フレームワークを使用する方法」を参照してください。 ページを参照するか、Bootstrap ビデオ チュートリアル を参照してください。
1. 基本的なテーブル
基本的なレイアウトが完了したら、クラス名.table を
タグに追加して、基本的なテーブル スタイルを実現します。少量のコンテンツ）パディングと水平分割線）。 ブートストラップ テーブルの例: 生徒の統計情報用に 6 行 4 列のテーブルを作成します。具体的なコードは次のとおりです。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table class="table" style="width: 800px;" >
<thead>
<tr><th>学号</th><th>姓名</th><th>年龄</th><th>地址</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
<tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
<tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
<tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
<tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
</tbody>
</table>
</body>
</html>レンダリング:
2. ストライプ化テーブル
基本テーブルを元に、 タグにクラス名 .table-striped を追加します。 ; 各行にゼブラストライプパターンを追加します。 <table class="table table-striped " style="width: 800px;" >
効果は次の図に示されています:
3 枠線付きの表
は タグ内にクラス class name.table-border を追加して、テーブルとその中の各セルに境界線を追加します。
<table class="table table-bordered " style="width: 800px;" >
効果は図に示すとおりです:
4 テーブルの上にマウスを置きます。 # タグにクラス class name.table-hover を追加して、 の各行がマウス ホバー状態に応答するようにします。マウスが最初の行の上を通過すると、最初の行の背景色が灰色に変わります。 <table class="table table-hover " style="width: 800px;" >
結果は次の図に示されています:
5 テーブルを圧縮します。
タグに class name.table-condensed を追加すると、テーブルがよりコンパクトになり、セル内のパディングが半分になります。 <table class="table table-condensed " style="width: 800px;" >
上の図を比較して、テーブルの圧縮の効果を確認してください:
6 つ、
6 つ、応答性の高いテーブル
クラス名 .table を含む要素をクラス名 .table-sensitive を含む要素で囲み、画面が 768px より小さい場合は横にスクロールします。画面が幅 768px より大きい場合、水平スクロールバーが表示されなくなります。
<table class="table" >
<thead>
<tr><th>学号</th><th>姓名</th><th>年龄</th><th>地址</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
<tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
<tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
<tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
<tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
<tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
<tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
<tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
<tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
<tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
</tbody>
</table>効果は次の図に示されています。
#上記では、ブートストラップ テーブルの例を使用して、テーブル テーブルと関連スタイルの使用方法を紹介しています。よくわからない場合は、ブートストラップ フレームワークの公式 Web サイト (http://v3.bootcss.com) にアクセスしてください。この記事が役立つことを願っています。関連チュートリアルの詳細については、Bootstrap オンライン マニュアル
を参照してください。
以上がブートストラップ フレームワークでのテーブルと関連スタイルの使用についての詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
