Bootstrap 3.3.7 コンテンツの基本要素

BootstrapでWebページに載せる一般的なコンテンツをどう書くか、主要な要素を整理して説明する。
Tags:

ヘッダー、見出し、本文

コンテンツの基本はヘッダー、見出し、本文である。Bootstrapでも基本的には通常のHTMLタグを使う。

見出しには<h1>から<h3>、本文には<p>、引用には<blockquote>を使う。page-headerクラスを使うとヘッダー部分を視覚的に区切れる。

<div class="page-header">
  <h1>内容表示</h1>
  <h2>サブタイトル</h2>
</div>
<h3>小見出し</h3>
<p>これは本文です。</p>
<blockquote>
  <p><small>引用テキスト</small></p>
</blockquote>
<blockquote class="pull-right">
  <p><small>引用テキスト</small></p>
</blockquote>

基本的なコンテンツは通常のHTMLとして書けばよい。Bootstrapでは必要に応じて見た目を整えるクラスを追加する。

テーブル

テーブルは通常の<table>タグで作成する。Bootstrapにはテーブル用のスタイルクラスが用意されている。

クラス 説明
table 基本テーブル。横幅を100%にし、行ごとに横線を付ける。
table-striped <tbody>内の偶数行と奇数行に背景色を付ける。:nth-childを使うためIE8以下では適用されない。
table-bordered 表全体とセル間に罫線を付ける。
table-hover マウスポインタがある行の背景色を変える。
table-condensed 行の高さを小さくする。 
<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr class="success">
      <td>Notebook</td>
      <td>1,000,000</td>
    </tr>
  </tbody>
</table>

active、success、info、warning、dangerなどの背景色クラスは<tr>、<td>、<th>に追加できる。

横スクロール

狭い画面で大きな表を縮めずに表示したい場合は、table-responsiveで囲む。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

パネル

パネルは、ページ本体とは別の内容、注意、警告などをコンパクトに表示したい場合に便利である。

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">タイトル</h3>
  </div>
  <div class="panel-body">内容</div>
  <div class="panel-footer">フッター</div>
</div>

パネルのスタイルにはpanel-default、panel-primary、panel-success、panel-info、panel-warning、panel-dangerがある。

ジャンボトロン

ジャンボトロンは、特定のコンテンツや情報を目立たせる大きなボックスである。角丸の灰色ボックスとして表示され、中の文字サイズも大きくなる。

<div class="jumbotron">
  <div class="container">
    表示する内容
  </div>
</div>

class="jumbotron well"のようにwellを追加すると、輪郭が少し明確なスタイルになる。