ブートストラップフレームワークでのテーブルと関連スタイルの使用についての詳細な図による説明-CSSチュートリアル-php.cn

ブートストラップフレームワークでのテーブルと関連スタイルの使用についての詳細な図による説明

yulia

リリース： 2018-10-16 10:56:56

オリジナル

7781 人が閲覧しました

ブートストラップフレームワークは、その使いやすさ、美しいレイアウト、応答性の高いレイアウトのため、広く使用されています。この記事では、ブートストラップテーブルの例を使用して、ブートストラップでのテーブルの使用方法とテーブルの関連スタイルについて説明します。一定の参考値があり、興味のある友人はそれを参照できます。

ブートストラップフレームワークレイアウトを使用する前に、まず関連する 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="max-width:90%" >

ログイン後にコピー

効果は次の図に示されています:

ブートストラップフレームワークでのテーブルと関連スタイルの使用についての詳細な図による説明

3 枠線付きの表

は

タグ内にクラス class name.table-border を追加して、テーブルとその中の各セルに境界線を追加します。

 <table class="table table-bordered "   style="max-width:90%" >

ログイン後にコピー

効果は図に示すとおりです:

ブートストラップフレームワークでのテーブルと関連スタイルの使用についての詳細な図による説明

4 テーブルの上にマウスを置きます。 #

タグにクラス class name.table-hover を追加して、 の各行がマウスホバー状態に応答するようにします。マウスが最初の行の上を通過すると、最初の行の背景色が灰色に変わります。

 <table class="table table-hover "   style="max-width:90%" >

ログイン後にコピー

結果は次の図に示されています:

ブートストラップフレームワークでのテーブルと関連スタイルの使用についての詳細な図による説明 5 テーブルを圧縮します。

タグに class name.table-condensed を追加すると、テーブルがよりコンパクトになり、セル内のパディングが半分になります。

 <table class="table table-condensed "   style="max-width:90%" >

ログイン後にコピー

上の図を比較して、テーブルの圧縮の効果を確認してください:

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