とほほのBootstrap 3入門

はじめに

このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。

Bootstrap とは

Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。

レスポンシブデザインとは

スマートフォン、タブレット、デスクトップなどの画面の広さに応じて、横並びを縦並びにしたり、狭い画面ではサイドバーを表示しないなどを自動的に調整し、同じデザインで異なる大きさの画面に対応するためのデザイン技術です。

【広い画面】
Header
Menu Main Info
【狭い画面】
Header
Menu
Main

Bootstrap 3 では、下記の4つのレベルの画面サイズを定義しています。

種別Extra smallSmallMediumLarge
略称xssmmdlg
デバイススマートフォンなどタブレット中型ディスプレイ大型ディスプレイ
画面サイズ768px未満768～991px992～1199px1200px以上

ダウンロード

下記のサイトから Bootstrap をダウンロードしてください。

基本テンプレート

Bootstrap 3 を使用する際の基本テンプレートを下記に示します。IE=edge は、IE の互換表示を抑止し、常に標準モードで表示させるための記述です。html5shiv.js は、IE8 などで HTML5 のタグを使用するためのライブラリです。respond.js は、IE6～IE8 で max-width, min-width などの CSS を模倣するためのライブラリです。

Code
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>タイトル</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap CDN

Bootstrap CDN を利用することで、Bootstrap をダウンロードしなくても CDN サーバ上の Bootstrap を利用することができます。

Code
  <head>
      :
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
      :
  </head>
  <body>
      :
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>

コンテナ

固定的コンテナ

コンテナはページの基本シートとなる要素で、Bootstrap の各要素をコンテナの中に記述します。container は固定的コンテナを生成します。ウィンドウの横幅に応じて段階的に横幅が変動します。スマートフォンサイズ(768px未満)の場合は全幅、タブレットサイズ(768～991px)の場合は 750px固定、中型ディスプレイ(992～1199px)の場合は 970px固定、大型ディスプレイ(1200px以上)の場合は 1170px 固定となります。コンテナはセンタリングされ、左右には少なくとも 15px のパディングが付きます。

Sample
container
Code
<div class="container bg-info">
container
</div>

流動的コンテナ

container-fluid は流動的コンテナを生成します。ウィンドウの横幅に応じてスムーズに横幅が変動します。

Sample
container-fluid
Code
<div class="container-fluid bg-info">
container-fluid
</div>

グリッドシステム

グリッド

Bootstrap では、コンテナを12個のグリッドに分割してレイアウトを制御します。下記では 2:6:2:2(合計12) の割合でコンテナを分割しています。

Sample
col-xs-2
col-xs-6
col-xs-2
col-xs-2
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2 bg-info">col-xs-2</div>
    <div class="col-xs-6 bg-success">col-xs-6</div>
    <div class="col-xs-2 bg-warning">col-xs-2</div>
    <div class="col-xs-2 bg-danger">col-xs-2</div>
  </div>
</div>

カラムの合計が 12 を超える場合は複数行で表示されます。

Sample
col-xs-8
col-xs-4
col-xs-4
col-xs-8

マルチデバイス対応

col-xs-* を使用した場合、カラムは常に横に並びます。col-sm-* を使用すると、タブレットサイズ(768px)以上の画面では横並び、それ未満では縦並びになります。col-md-* を使用すると、中型ディスプレイサイズ(992px)以上で横並び、それ未満で縦並びになります。col-lg-* を使用すると、大型ディスプレイサイズ(1200px)以上で横並び、それ未満で縦並びになります。

Sample
col-xs-2
col-xs-6
col-xs-2
col-xs-2

col-sm-2
col-sm-6
col-sm-2
col-sm-2

col-md-2
col-md-6
col-md-2
col-md-2

col-lg-2
col-lg-6
col-lg-2
col-lg-2

デバイスサイズに応じて比率を変更することも可能です。下記の例では、スマートフォンサイズでは 3:3:3:3、タブレットサイズでは 6:2:2:2、中型ディスプレイでは 2:2:2:6 の割合で分割します。

Sample
 
 
 
 
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3 col-sm-6 col-md-2 bg-info my-media-1"> </div>
    <div class="col-xs-3 col-sm-2 col-md-2 bg-success my-media-2"> </div>
    <div class="col-xs-3 col-sm-2 col-md-2 bg-warning my-media-3"> </div>
    <div class="col-xs-3 col-sm-2 col-md-6 bg-danger my-media-4"> </div>
  </div>
</div>

オフセット

col-*-offset-* を指定することにより、カラムとカラムの間に隙間を開けることができます。下記の例では、5カラムと 6カラムの間に 1カラムの隙間を開けています。

Sample
col-xs-5
col-xs-6
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-5 bg-info">col-xs-5</div>
    <div class="col-xs-offset-1 col-xs-6 bg-success">col-xs-6</div>
  </div>
</div>

入れ子

グリッドを入れ子にすることも可能です。この場合、row > col > row > col... の様に入れ子していきます。

Sample
col-xs-6
col-xs-3
col-xs-9
col-xs-6
col-xs-3
col-xs-9
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 bg-danger">
      col-xs-6
      <div class="row">
        <div class="col-xs-3 bg-info">col-xs-3</div>
        <div class="col-xs-9 bg-success">col-xs-9</div>
      </div>
    </div>
    <div class="col-xs-6 bg-warning">
      col-xs-6
      <div class="row">
        <div class="col-xs-3 bg-info">col-xs-3</div>
        <div class="col-xs-9 bg-success">col-xs-9</div>
      </div>
    </div>
  </div>
</div>

カラム順序

.col-*-push-* はカラムを右方向に、.col-*-pull-* はカラムを左方向にシフトします。これにより、カラムの順序を入れ替えることが可能です。

Sample
1
2
3
4
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2 col-xs-push-4 bg-danger">1</div>
    <div class="col-xs-2 bg-info">2</div>
    <div class="col-xs-2 col-xs-pull-4 bg-success">3</div>
    <div class="col-xs-2 bg-warning">4</div>
  </div>
</div>

タイポグラフィ

ヘッダ

ヘッダには <h1>～<h6> を使用します。.h1～.h6 のクラスも使用できます。<small> で副題をつけることもできます。

Sample

H1 Bootstrap入門 Secondary text

H2 Bootstrap入門 Secondary text

H3 Bootstrap入門 Secondary text

Code
<h1>H1 Bootstrap入門 <small>Secondary text</small></h1>
<h2>H2 Bootstrap入門 <small>Secondary text</small></h2>
<h3>H3 Bootstrap入門 <small>Secondary text</small></h3>

本文・リード

本文には <p> を用います。.lead は記事のリード(要旨)を示します。

Code

Bootstrap 入門へようこそ

Bootstrap は・・・

Sample
<p class="lead">Bootstrap 入門へようこそ</p>
<p>Bootstrap は・・・</p>

インラインテキスト要素

<mark>, <del>, <s>, <ins>, <u>, <small>, <strong>, <em> はそれぞれ下記の様に使用します。

Sample

<mark> は 重要なテキスト を示します。

<del> は 削除されたテキスト を示します。

<s> は 取り消されたテキスト を示します。

<ins> は 挿入されたテキスト を示します。

<u> を指定すると 下線付き で表示されます。

<small> を指定すると 小さなテキスト で表示されます。

<strong> は 強調されたテキスト を示します。

<em> は emphasis(強調された) text を示します。

Code
<p><mark> は <mark>重要なテキスト</mark> を示します。</p>
<p><del> は <del>削除されたテキスト</del> を示します。</p>
<p><s> は <s>取り消されたテキスト</s> を示します。</p>
<p><ins> は <ins>挿入されたテキスト</ins> を示します。</p>
<p><u> を指定すると <u>下線付き</u> で表示されます。</p>
<p><small> を指定すると <small>小さなテキスト</small> で表示されます。</p>
<p><strong> は <strong>強調されたテキスト</strong> を示します。</p>
<p><em> は <em>emphasis(強調された) text</em> を示します。</p>

アライメント

.text-left, .text-center, .text-right, .text-justify, .text-nowrap はそれぞれ、下記の様に指定します。

Sample

左寄せテキスト

中央寄せテキスト

右寄せテキスト

両端揃えテキスト

改行禁止テキスト

Sample
<p class="text-left">左寄せテキスト</p>
<p class="text-center">中央寄せテキスト</p>
<p class="text-right">右寄せテキスト</p>
<p class="text-justify">両端揃えテキスト</p>
<p class="text-nowrap">改行禁止テキスト</p>

トランスフォーメーション

.text-lowercase はテキスト全体を小文字に、.text-uppercase はテキスト全体を大文字に、.text-capitalize は各単語の先頭文字を大文字に変換して表示します。

Sample

Lowercased text.

Uppercased text.

Capitalized text.

Sample
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

略語

<abbr> は略語を示します。title="..." を指定すると略語が点線の下線付きで表示され、マウスを乗せると説明が表示されます。.initialism を指定すると、略語が少し小さく表示されます。

Sample

HTML is ...

HTML is ...

Code
<p><abbr title="HyperText Markup Language">HTML</abbr> is ...</p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is ...</p>

引用

<blockquote> は引用を示します。<footer> は引用元、<cite> は引用元のタイトルを示します。

Sample

吾輩は猫である。名前はまだ無い。

夏目漱石 「吾輩は猫である」
Code
<blockquote>
<p>吾輩は猫である。名前はまだ無い。</p>
<footer>夏目漱石 <cite>「吾輩は猫である」</cite></footer>
</blockquote>

リスト

リストに .list-unstyled を指定すると、先頭マークの無いリストを表示します。

Sample
  • HTML
  • CSS
  • JavaScript
Code
<ul class="list-unstyled">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

インラインリスト

.list-inline は横方向に並ぶインラインリストを表示します。

Sample
  • HTML
  • CSS
  • JavaScript
Code
<ul class="list-inline">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

垂直ディスクリプション

.dl-horizontal は縦方向に並ぶインラインリストを表示します。

Sample
HTML
HTMLは...
CSS
CSSは...
JavaScript
JavaScriptは...
Code
<dl class="dl-horizontal">
<dt>HTML</dt>
<dd>HTMLは...</dd>
<dt>CSS</dt>
<dd>CSSは...</dd>
<dt>JavaScript</dt>
<dd>JavaScriptは...</dd>
</dl>

コード

インラインコード

<code> はインラインコードを示します。

Sample
インラインコードは <code> で指定します。
Code
インラインコードは <code>&lt;code&gt;</code> で指定します。

ユーザ入力

<kbd> は、キーボードからのユーザ入力を示します。

Sample
終了するには ctrl + C と入力してください。
Code
終了するには <kbd>Ctrl + C</kbd> と入力してください。

基本ブロック

<pre> は複数行からなるコードを示します。

Sample
This is Japan.
Code
<pre>This is Japan.</pre>

変数

<var> は変数を示します。

Sample
E = mc2
Code
<var>E</var> = <var>m</var><var>c</var><sup>2</sup>

サンプル出力

<samp> はサンプル出力を示します。

Sample
File not found.
Code
<samp>File not found.</samp>

テーブル

基本テーブル

.table クラスを指定すると、Bootstrap の標準のテーブルとなります。

Sample
NameAge
Yamada16
Suzuki26
Tanaka36
Code
<table class="table">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Yamada</td><td>16</td></tr>
  <tr><td>Suzuki</td><td>26</td></tr>
  <tr><td>Tanaka</td><td>36</td></tr>
</table>

ストライプテーブル

.table-striped は 1行おきに背景色をつけます。IE8 など :nth-child 未サポートブラウザでは使用できません。

Sample
NameAge
Yamada16
Suzuki26
Tanaka36
Code
<table class="table table-striped">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Yamada</td><td>16</td></tr>
  <tr><td>Suzuki</td><td>26</td></tr>
  <tr><td>Tanaka</td><td>36</td></tr>
</table>

ボーダー付きテーブル

.table-bordered はテーブルの各セルにボーダーをつけます。

Sample
NameAge
Yamada16
Suzuki26
Tanaka36
Code
<table class="table table-bordered">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Yamada</td><td>16</td></tr>
  <tr><td>Suzuki</td><td>26</td></tr>
  <tr><td>Tanaka</td><td>36</td></tr>
</table>

ホバーテーブル

.table-hover はテーブルの列にマウスを乗せた際に背景色を変更します。

Sample
NameAge
Yamada16
Suzuki26
Tanaka36
Code
<table class="table table-hover">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Yamada</td><td>16</td></tr>
  <tr><td>Suzuki</td><td>26</td></tr>
  <tr><td>Tanaka</td><td>36</td></tr>
</table>

凝縮テーブル

.table-condensed は通常よりも行幅の狭いテーブルにします。

Sample
NameAge
Yamada16
Suzuki26
Tanaka36
Code
<table class="table table-condensed">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Yamada</td><td>16</td></tr>
  <tr><td>Suzuki</td><td>26</td></tr>
  <tr><td>Tanaka</td><td>36</td></tr>
</table>

コンテキストクラス

.active, success, .info, .warning, .danger はテーブルの列に状況に応じた色をつけます。

Sample
ClassDescription
.activeThis is a active message.
.successThis is a success message.
.infoThis is a information message.
.warningThis is a warning message.
.dangerThis is a danger message.
Code
<table class="table table-condensed">
  <tr><th>Class</th><th>Description</th></tr>
  <tr class="active"><td>.active</td><td>This is a active message.</td></tr>
  <tr class="success"><td>.success</td><td>This is a success message.</td></tr>
  <tr class="info"><td>.info</td><td>This is a information message.</td></tr>
  <tr class="warning"><td>.warning</td><td>This is a warning message.</td></tr>
  <tr class="danger"><td>.danger</td><td>This is a danger message.</td></tr>
</table>

レスポンシブテーブル

.table-responsive は、画面の横幅が狭くなるとスクロールバーを表示します。上が table-responsive を指定したテーブル、下が指定していないテーブルです。

Sample
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
Code
<div class="table-responsive">
  <table class="table">
    <tr><th>AAAAAAA</th><th>AAAAAAA</th><th>AAAAAAA</th><th>AAAAAAA</th><th>AAAAAAA</th></tr>
  </table>
</div>
<div>
  <table class="table">
    <tr><th>AAAAAAA</th><th>AAAAAAA</th><th>AAAAAAA</th><th>AAAAAAA</th><th>AAAAAAA</th></tr>
  </table>
</div>

フォーム

基本フォーム

基本フォームは、入力項目のグループに .form-group を、入力部品に .form-control を指定します。

Sample
Code
<form>
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" id="name" class="form-control">
  </div>
  <div class="form-group">
    <label for="description">Description:</label>
    <textarea id="description" class="form-control"></textarea>
  </div>
  <div class="form-group">
    <label for="selection">Selection:</label>
    <select id="selection" class="form-control">
      <option>AAA
      <option>BBB
    </select>
  </div>
  <input type="button" value="OK">
</form>

インラインフォーム

.form-inline は、横に並ぶインラインフォームを表示します。

Sample
Code
<form class="form-inline">
    :
</form>

垂直フォーム

.form-horizontal は、縦型のフォームを表示します。*-sm-* を指定しているので、スマホなどの狭いディスプレイではラベルと入力欄も縦型になります。

Sample
Code
<form class="form-horizontal">
  <div class="form-group">
    <label for="name2" class="control-label col-sm-2">Name:</label>
    <div class="col-sm-10">
      <input type="text" id="name2" class="form-control">
    </div>
  </div>
    :
  <input type="button" value="OK" class="col-sm-offset-2">
</form>

インラインチェックボックス

.checkbox-inline は、インラインチェックボックスを表示します。

Sample
Code
<form>
  <label class="checkbox-inline">
    <input type="checkbox" name="cb1">CB1
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" name="cb2">CB2
  </label>
</form>

インラインラジオボタン

.radio-inline は、インラインチェックボックスを表示します。

Sample
Code
<form>
  <label class="radio-inline">
    <input type="radio" name="rd" checked>RD1
  </label>
  <label class="radio-inline">
    <input type="radio" name="rd">RD2
  </label>
</form>

スタティックコントロール

.form-control-static は、静的な値を表示します。

Sample

admin@example.com

Code
<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">admin@example.com</p>
    </div>
  </div>
    :
</form>

バリデーションステータス

.has-success, .has-warning, .has-error は、入力部品の状態(正常、警告、エラー)を示します。JavaScript などで動的に適用します。

Sample
Code
<form class="form-horizontal">
  <div class="form-group has-success">
    <label for="vs1" class="control-label col-sm-2">Success</label>
    <div class="col-sm-10"><input type="text" id="vs1" class="form-control" placeholder="Correct data"></div>
  </div>
  <div class="form-group has-warning">
    <label for="vs2" class="control-label col-sm-2">Warning</label>
    <div class="col-sm-10"><input type="text" id="vs2" class="form-control" placeholder="Warning data"></div>
  </div>
  <div class="form-group has-error">
    <label for="vs3" class="control-label col-sm-2">Error</label>
    <div class="col-sm-10"><input type="text" id="vs3" class="form-control" placeholder="Invalid data"></div>
  </div>
</form>

フィードバックアイコン

.has-feedback, .form-control-feedback により、コントロールの内部にフィードバックアイコンを表示します。アイコンは、.glyphicon の次に、.glyphicon-ok, .glyphicon-warning-sign, .glyphicon-remove などを指定します。

Sample
Code
<form class="form-inline">
  <div class="form-group has-feedback has-success">
    <input type="text" class="form-control">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-feedback has-warning">
    <input type="text" class="form-control">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-feedback has-error">
    <input type="text" class="form-control">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</form>

アクセシビリティを高めるには下記の様に記述します。aria-describedby="..." には、この要素を説明する要素のIDを指定します。aria-hidden="true" は、この要素が非表示であり、スクリーンリーダー等でも読み上げられないように指定します。.sr-only クラスは、スクリーンリーダには読み上げられるが、画面には表示したくない要素に指定します。

Code
<div class="form-group has-success has-feedback">
  <label class="control-label" for="fbi1">Input with success</label>
  <input type="text" class="form-control" id="fbi1" aria-describedby="fbi1s">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="fbi1s" class="sr-only">(success)</span>
</div>

フォームグループサイズ

.form-group-sm, .form-group-lg により、小さな(大きな)フォームを表示します。

Sample
Code
<form class="form-horizontal">
  <div class="form-group form-group-sm">
    :
  </div>
  <div class="form-group">
    :
  </div>
  <div class="form-group form-group-lg">
    :
  </div>
</form>

ヘルプ

.help-block によりヘルプブロックを表示します。aria-describedby="..." によりコントロールとヘルプブロックを関係づけます。

Sample

Your telephone number. (e.g. 090-9xxx-xxxx)

Code
<form>
  <div class="form-group">
    <label for="phone" class="control-label">Phone number</label>
    <input type="text" id="phone" name="phone" class="form-control" aria-describedby="phone-help">
    <p id="phone-help" class="help-block">Your telephone number. (e.g. 090-9xxx-xxxx)</p>
  </div>
</form>

ボタン

ボタンオプション

.btn はボタンを示します。.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link によりボタンの種類を指定します。

Sample
Code
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button> 
<button class="btn btn-danger">Danger</button>
<button class="btn btn-link">Link</button>

ボタンの大きさ

.btn-lg, .btn-sm, .btn-xs でボタンの大きさを指定します。

Sample
Code
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-xs">x-mall</button>

ブロックボタン

.btn-block は横幅いっぱいのブロックボタンを表示します。

Sample
Code
<button class="btn btn-primary btn-block">Block button</button>

アクティブ

フォーカスがあたったボタンには .active が適用されます。

Sample
Code
<button class="btn btn-primary active">Active</button>
<button class="btn btn-primary">Normal</button>

ディスエイブル(無効化)

disabled を指定すると、無効化されたボタンとなります。

Sample
Code
<button class="btn btn-primary" disabled>Disabled</button>
<button class="btn btn-primary">Normal</button>

イメージ

イメージ

.img-responsive を指定するとイメージのサイズが枠の大きさにフィットするように自動調整されます。.img-rounded は角を丸く、.img-circle は円形に、.img-thumbnaill は周りに枠線を表示します。

Sample
My cat
My cat
My cat
My cat
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3"><img src="../image/lemon.jpg" class="img-responsive" alt="My cat"></div>
    <div class="col-xs-3"><img src="../image/lemon.jpg" class="img-responsive img-rounded" alt="My cat"></div>
    <div class="col-xs-3"><img src="../image/lemon.jpg" class="img-responsive img-circle" alt="My cat"></div>
    <div class="col-xs-3"><img src="../image/lemon.jpg" class="img-responsive img-thumbnail" alt="My cat"></div>
  </div>
</div>

ヘルパークラス

コンテキストカラー

.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger はコンテキストに応じたテキストの色を指定します。

Sample

This is muted text.

This is primary text.

This is success text.

This is information text

This is warning text.

This is danger text

Code
<p class="text-muted">This is muted text.</p>
<p class="text-primary">This is primary text.</p>
<p class="text-success">This is success text.</p>
<p class="text-info">This is information text</p>
<p class="text-warning">This is warning text.</p>
<p class="text-danger">This is danger text</p>

コンテキスト背景色

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger はコンテキストに応じた背景色を指定します。

Sample

This is primary text.

This is success text.

This is information text

This is warning text.

This is danger text

Code
<p class="bg-primary">This is primary text.</p>
<p class="bg-success">This is success text.</p>
<p class="bg-info">This is information text</p>
<p class="bg-warning">This is warning text.</p>
<p class="bg-danger">This is danger text</p>

クローズアイコン

.close, &times; でクローズアイコンを表示します。スクリーンリーダに読み上げられないように aria-hidden="true" を指定します。

Sample

Sample
<p><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></p>

カレット

.caret は、カレットを表示します。

Sample
Sample
<span class="caret"></span>

クィックフロート

.pull-left, .pull-right は、メッセージを左端、右端に表示します。

Sample
Left message.
Right message.
Code
<div>
  <div class="pull-left">Left message.</div>
  <div class="pull-right">Right message.</div>
</div>

クリアフィックス

親ブロック要素は、.pull-left (float:left) や .pull-right (float:right) を指定した要素の高さを無視するため、上記の様に、Left message. や Right message が少し枠からはみ出してしまします。親要素に .clearfix を指定することでこの問題を回避することができます。

Sample
Left message.
Right message.
Code
<div class="clearfix">
  <div class="pull-left">Left message.</div>
  <div class="pull-right">Right message.</div>
</div>

センターブロック

.center-block は、ブロックを中央に表示します。

Sample
Center block
Sample
<div class="center-block bg-info text-center" style="width:300px">Center block</div>

表示・非表示

.show は要素をブロックとして表示します。.hidden は要素を非表示にします。.invisible は領域を確保したまま非表示にします。

Sample
[Show]
[]
[]
Code
<div class="show">[Show]</div>
<div>[<span class="hidden">Hidden</span>]</div>
<div>[<span class="invisible">Invisible</span>]</div>

スクリーンリーダのみ

.sr-only を指定した要素は、スクリーンリーダのみに読み上げられます。.sr-only-fucuable を指定すると、フォーカスがあたった場合のみ表示されます。

Sample
Sample
<input type="text" class="form-control" placeholder="Text1">
<input type="text" class="form-control sr-only" placeholder="Text2">
<input type="text" class="form-control sr-only sr-only-focusable" placeholder="Text3">

テキスト非表示

.text-hide はテキストを非表示にします。背景画像の説明などを記述します。

Sample
夏の風物詩
Sample
<div class="text-hide">夏の風物詩</div>

リンク

Copyright (C) 2015-2016 杜甫々
初版:2015年9月6日 最終更新:2016年10月2日
https://www.tohoho-web.com/ex/bootstrap.html