Bootstrapってなんなの?状態の初心者がBootstrapについて勉強してみる その3

公開日: : 未分類 , , , , , ,

Bootstrapってなんなの?状態の初心者がBootstrapについて勉強してみるのコーナーです。

今回で3回目になりました。

1回目は、Bootstrapってなんなの?ってことや、Bootstrapの始め方を勉強しました。

2回目は、Bootstrapでのボタンの指定の仕方を学び、その簡単さに驚かされました。

3回目の今回は、BootstrapでTableのスタイルを決めてみましょう。

 

BootstrapはTableも綺麗にしてくれるよ。

TableをBootstrapによって綺麗にしてもらうには、2つのルールをすべて満たす必要があります。

  1. table要素は、class=containerの要素の中に入れる必要がある
  2. table要素は、class=tableを指定する

となっています。

この2つのルールさえ守れば、後はBootstrapが綺麗に仕上げてくれるわけです。

 

ということで、早速、やってみました。

試してみたHTMLは以下のとおりです。「class=table」をわざと「class=container」の孫にしてみました。親と子のサンプルはよく目にしましたが孫でもできるんだということきちんと示したかったためです。


<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body class="container">
<div>
<p>Bootstrap 適用</p>
<table class="table">
<tr>
<th>カラム1</th>
<th>カラム2</th>
<th>カラム3</th>
</tr>
<tr>
<td>データ 1-1</td>
<td>データ 1-2</td>
<td>データ 1-3</td>
</tr>
<tr>
<td>データ 2-1</td>
<td>データ 2-2</td>
<td>データ 2-3</td>
</tr>
</table>
</div>
<div>
<p>Bootstrap 適用しない</p>
<table>
<tr>
<th>カラム1</th>
<th>カラム2</th>
<th>カラム3</th>
</tr>
<tr>
<td>データ 1-1</td>
<td>データ 1-2</td>
<td>データ 1-3</td>
</tr>
<tr>
<td>データ 2-1</td>
<td>データ 2-2</td>
<td>データ 2-3</td>
</tr>
</table>
</div>
</body>
</html>

結果は、

bootstrap-table

となりました。

HTMLベースでは、コーディング量はほとんど変わらないのに、表示した時の印象は別物ですね。

さすが、Bootstrapです。

 

class=tableと同時に指定可能なオプション


<table class="table">

と同時に指定することで表の表情を変えてくれるオプションがいろいろあるので、以下にまとめて置きます。

Noclass指定値効果
1table-striped1行間隔で背景色を変える
2table-borderedテーブルに枠線を追加
3table-hoverマウスオーバーしたときのエフェクトを追加
4table-condensedテーブルのpadding値を通常の半分にする

効果を見ると、どれも共存出来そうですよね。当然、全部指定することもできます。

結果はこうなります。

bootstrap-table-2

「table-condensed」の有り無しも載せてみました。

これ、自前でCSSを書くとなると結構大変なんですよね。それを「table-xxxx」って書くだけで対応してくれるなんて、Bootstrap最高ですね。

 

その他にもあるよ

その他にも、

  • trタグもしくは、tdタグに対し、「active」、「success」、「warning」、「danger」、「info」を指定すると、ボタン同様背景色を変えることが可能
  • 「div class=table-responsive」を「class=container」要素とtableタグの間に置くことでレスポンシブ対応可能

と言うのもあります。

 

table関連全部のせ

全部のせてみました。

レスポンシブ対応を見て見るため、Bootstrapしてないtableに、幅を指定しました。


<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body class="container">
<div>
<div class="table-responsive"></div>
<p>Bootstrap 適用 全部のせ</p>
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th>カラム1</th>
<th>カラム2</th>
<th>カラム3</th>
<th>カラム4</th>
<th>カラム5</th>
</tr>
<tr>
<td class="active">データ 1-1</td>
<td class="success">データ 1-2</td>
<td class="warning">データ 1-3</td>
<td class="danger">データ 1-4</td>
<td class="info">データ 1-5</td>
</tr>
<tr class="active">
<td>データ 2-1</td>
<td>データ 2-2</td>
<td>データ 2-3</td>
<td>データ 2-4</td>
<td>データ 2-5</td>
</tr>
<tr class="success">
<td>データ 3-1</td>
<td>データ 3-2</td>
<td>データ 3-3</td>
<td>データ 3-4</td>
<td>データ 3-5</td>
</tr>
<tr class="warning">
<td>データ 4-1</td>
<td>データ 4-2</td>
<td>データ 4-3</td>
<td>データ 4-4</td>
<td>データ 4-5</td>
</tr>
<tr class="danger">
<td>データ 5-1</td>
<td>データ 5-2</td>
<td>データ 5-3</td>
<td>データ 5-4</td>
<td>データ 5-5</td>
</tr>
<tr class="info">
<td>データ 6-1</td>
<td>データ 6-2</td>
<td>データ 6-3</td>
<td>データ 6-4</td>
<td>データ 6-5</td>
</tr>
</table>
</div>
<div>
<p>Bootstrap 適用しない</p>
<table style="width: 700px;border:1px solid;">
<tr>
<th>カラム1</th>
<th>カラム2</th>
<th>カラム3</th>
</tr>
<tr>
<td>データ 1-1</td>
<td>データ 1-2</td>
<td>データ 1-3</td>
</tr>
<tr>
<td>データ 2-1</td>
<td>データ 2-2</td>
<td>データ 2-3</td>
</tr>
</table>
</div>
</body>
</html>

windowの幅を狭めて見ると、Bootstrapはやや表情を変えてくれ、レスポンシブ対応を見せてくれました。

bootstrap-table-3

Bootstrap最高ですね。

 

ad

関連記事

no image

LPICレベル1合格を目指して その7

LPICレベル1を勉強するコーナーです。 これまで6回勉強してき...

記事を読む

no image

LPICレベル1取得を目指す

IT業界に努めて、早一回り経過しました。 今まで、資格とか取ったこと...

記事を読む

LPICレベル1合格を目指して その14

LPICレベル1の合格を目指して勉強をするコーナーです。その14になり...

記事を読む

no image

LPICレベル1合格を目指して その10

LPICレベル1合格を目指して勉強するのもようやく10回目になります。...

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑