とほほのBootstrap 4入門

トップ > Bootstrap 4入門

索引

はじめに

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

Bootstrap とは

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

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

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

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

基本テンプレート

Bootstrap 4 を使用する際の基本テンプレートを下記に示します。ダウンロード版を使用したり、npm 等の環境に組み込んで使用する手順については説明を割愛します。

Code
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <title>タイトル</title>
  </head>
  <body>
    <!-- ここに本文を記述します -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

ダウンロード

Bootstrap は下記からダウンロードすることができます。

ダウンロードファイルには、下記のファイルが含まれています。

インストール

npm, gem, composer 等でインストールすることも可能です。

Linux
$ npm install bootstrap

$ gem bootstrap -v 4.1.1

$ composer require twbs/bootstrap:4.1.1

Reboot

Bootstrap 4 では、リセットCSS として Normalize.css をベースとした Reset.css を採用しています。Reboot.css は下記の特徴を持ちます。

  1. 長さの単位として em の代わりに rem を採用。
  2. h1~h6, ol, ul, pre など大半の要素の margin-top を 0 に設定。
  3. デフォルトフォントとして、システムフォントを利用。
  4. box-sizing のデフォルト値を content-box から border-box に変更。

Bootstrap のバージョン

Bootstrap のバージョンは下記で参照することができます。

Code
$.fn.tooltip.Constructor.VERSION   // =< 4.1.1

レスポンシブブレークポイント

Bootstrap 3 では、画面の横幅に応じて、下記の4つのレベルの画面サイズを定義していました。

Bootstrap 4 では、xl が追加され、サイズがひとつシフトしました。

コンテナ

コンテナはページの基本シートとなる要素で、Bootstrap の各要素をコンテナの中に記述します。

段階的コンテナ

container は段階的コンテナを生成します。ウィンドウの横幅に応じて段階的に横幅が変動します。xs(~575px)の時は 100%、sm(576~767px)の時は 540px、md(768~991px)の時は 720px、lg(992~1199px)の時は 960px、xl(1200px~)の時は 1140px 固定となります。コンテナはセンタリングされます。

Sample
container
Code
<div class="container">
    :
</div>

流動的コンテナ

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

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

グリッド

等幅グリッド

下記の例では、画面を 5個のカラムに等分します。

Sample
A
B
C
D
E
Code
<div class="container-fluid">
  <div class="row">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
  </div>
</div>

width: 100% の div を入れることで、強制的に改行することができます。

Sample
A
B
C
D
E
Code
<div class="container-fluid">
  <div class="row">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="w-100"></div>
    <div class="col">D</div>
    <div class="col">E</div>
  </div>
</div>

カラム指定グリッド

カラム指定では、画面の横幅を 12個のカラムに分割し、そのうちの何個分を使用するかを指定します。下記の例では 6個分、3個分、3個分のカラムに区切って表示します。

Sample
col-6
col-3
col-3
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
    <div class="col-3">col-3</div>
  </div>
</div>

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

Sample
col-6
col-3
col-3
col-3
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
    <div class="col-3">col-3</div>
    <div class="col-3">col-3</div>
  </div>
</div>

マルチデバイス対応

画面の広さに応じて、表示方法を変更することもできます。下記の例では、画面サイズが sm 以上の時(576px以上の時)は 3分割となり、それより小さい場合は縦方向に並びます。

Sample
A
B
C
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-sm">A</div>
    <div class="col-sm">B</div>
    <div class="col-sm">C</div>
  </div>
</div>

下記の例では、sm サイズの時には 4:4:4 の割合で、md サイズ以上の場合は 2:8:2 の割合で、sm サイズより小さな場合は縦方向に並びます。

Sample
A
B
C
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 col-md-2">A</div>
    <div class="col-sm-4 col-md-8">B</div>
    <div class="col-sm-4 col-md-2">C</div>
  </div>
</div>

col-xs-* は定義されていません。代わりに col-* を使用します。

Code
<div class="container-fluid">
  <div class="row">
    <div class="col-4 col-md-2">A</div>
    <div class="col-4 col-md-8">B</div>
    <div class="col-4 col-md-2">C</div>
  </div>
</div>

縦方向のアライン(row)

align-items-* を指定することで、上寄せ、中央寄せ、下寄せすることができます。

Sample
A
B
A
B
A
B
Code
<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col">A</div>
    <div class="col">B</div>
  </div>
  <div class="row align-items-center">
    <div class="col">A</div>
    <div class="col">B</div>
  </div>
  <div class="row align-items-end">
    <div class="col">A</div>
    <div class="col">B</div>
  </div>
</div>

縦方向のアライン(カラム)

align-self-* を指定することで、カラムをそれぞれ個別に上寄せ、中央寄せ、下寄せすることができます。

Sample
A
B
C
Code
<div class="container-fluid">
  <div class="row">
    <div class="col align-self-start">A</div>
    <div class="col align-self-center">B</div>
    <div class="col align-self-end">C</div>
  </div>
</div>

横方向のアライン

justify-content-* を用いることよより、横方向の配置を指定することができます。start は左寄せ、center は中央寄せ、end は右寄せ、around は左右に適度なスペースを入れる、between はカラム間に適度なスペースを入れます。

Sample
A
B
A
B
A
B
A
B
C
A
B
C
Code
<div class="container-fluid">
  <div class="row justify-content-start">
    :
  </div>
  <div class="row justify-content-center">
    :
  </div>
  <div class="row justify-content-end">
    :
  </div>
  <div class="row justify-content-around">
    :
  </div>
  <div class="row justify-content-between">
    :
  </div>
</div>

カラム順序

order-* を指定することで、カラムを表示する順序を入れ替えることができます。下記の例では、カラムB と カラムC の表示順序を入れ替えて表示しています。* には 1~12 の値を指定することができます。order-first は最初、order-last は最後を指定します。order-sm-3 の様に、特定の画面サイズの時に適用するオーダーを指定することもできます。

Sample
A
B
C
Code
<div class="container-fluid">
  <div class="row>
    <div class="col order-1">A</div>
    <div class="col order-3">B</div>
    <div class="col order-2">C</div>
  </div>
</div>

オフセット

offset-* を指定することにより、カラム間に隙間を開けることができます。下記の例では 6 の幅のカラムA と、5 の幅のカラムC の間に 1の幅のオフセットを指定しています。offset-sm-1 の様に、特定の画面サイズの時にオフセットを指定することもできます。

Sample
A
C
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-6">A</div>
    <div class="col-5 offset-1">C</div>
  </div>
</div>

マージン

mr-auto は右側に、ml-auto は左側に最大限のマージンをとります。

Sample
A
B
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-3">A</div>
    <div class="col-3 ml-auto">B</div>
  </div>
</div>

入れ子

下記の様に、グリッドを入れ子にすることも可能です。

Sample
A
X
Y
Z
B
Code
<div class="container-fluid">
  <div class="row">
    <div class="col-6">A
      <div class="row">
        <div class="col-4">X</div>
        <div class="col-4">Y</div>
        <div class="col-4">Z</div>
      </div>
    </div>
    <div class="col-6">B</div>
  </div>
</div>

ガーター無し

no-gutters を指定すると、カラムのガーター(左右のパディング)を無くすことができます。row に設定されていた -15px のマイナスマージンも削除されるため、全体の横幅は短くなります。

Sample
row
row
row
row, no-gutters
row, no-gutters
row, no-gutters
container, row
container, row
container, row
container, row, no-gutters
container, row, no-gutters
container, row, no-gutters
Code
<div class="row">
  :
</div>

<div class="row no-gutters">
  :
</div>

<div class="container-fluid">
  <div class="row">
    :
  </div>
</div>

<div class="container-fluid">
  <div class="row no-gutters">
    :
  </div>
</div>

メディアオブジェクト

media および media-body を用いて、画像と説明を下記の様に配置することができます。

Sample
64x64
HTML 5.2
This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features continue...
Code
<div class="media">
  <img class="mr-3" src="img/64x64.gif" alt="64x64 image">
  <div class="media-body">
    <h5 class="mt-0">HTML 5.2</h5>
    This specification defines the 5th major version,
    second minor revision of the core language of the
    World Wide Web: the Hypertext Markup Language (HTML).
    In this version, new features continue...
  </div>
</div>

<img> に align-self-start, align-self-center, align-self-end を指定することで、画像を上寄せ、中央寄せ、下寄せすることができます。

Sample
64x64
HTML 5.2
This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features continue...
Code
<div class="media">
  <img class="mr-3 align-self-end" src="img/64x64.gif" alt="64x64 image">
  <div class="media-body">
    :
  </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日
http://www.tohoho-web.com/ex/bootstrap.html