CSS
グローバル CSS 設定、拡張可能なクラスでスタイルおよび強化された基本的な HTML 要素、および高度なグリッド システム。
概要
より良く、より速く、より強力な Web 開発へのアプローチを含む、Bootstrap のインフラストラクチャの重要な部分について詳しく説明します。
HTML5 文書型
Bootstrap は、HTML5 doctype の使用を必要とする特定の HTML 要素と CSS プロパティを利用します。すべてのプロジェクトの最初に含めます。
<!DOCTYPE html>
<html lang="en">
...
</html>モバイルファースト
Bootstrap 2 では、フレームワークの主要な側面に対してオプションのモバイル フレンドリーなスタイルを追加しました。Bootstrap 3 では、最初からモバイル フレンドリーになるようにプロジェクトを書き直しました。オプションのモバイル スタイルを追加する代わりに、コアに直接組み込まれています。実際、Bootstrap はモバイル ファーストです。モバイル ファースト スタイルは、個別のファイルではなく、ライブラリ全体で見つけることができます。
適切なレンダリングとタッチ ズームを確実に行うには、viewport メタ タグを<head>.
<meta name="viewport" content="width=device-width, initial-scale=1">user-scalable=noビューポート メタ タグに追加することで、モバイル デバイスのズーム機能を無効にすることができます。これにより、ズームが無効になり、ユーザーはスクロールのみが可能になり、サイトはネイティブ アプリケーションのように感じられます。全体として、すべてのサイトでこれを推奨しているわけではないので、注意してください!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">タイポグラフィとリンク
Bootstrap は、基本的なグローバル表示、タイポグラフィ、およびリンク スタイルを設定します。具体的には、
background-color: #fff;上に設定body@font-family-base、@font-size-base、および@line-height-base属性をタイポグラフィのベースとして使用する- 経由でグローバル リンクの色を設定し、
@link-colorリンクの下線のみを適用します。:hover
これらのスタイルは 内にありますscaffolding.less。
正規化.css
クロスブラウザー レンダリングを改善するために、 Nicolas GallagherとJonathan NealによるプロジェクトであるNormalize.cssを使用します。
コンテナ
Bootstrap には、サイト コンテンツをラップし、グリッド システムを収容するための包含要素が必要です。プロジェクトで使用する 2 つのコンテナーのいずれかを選択できます。paddingおよびその他の理由により、どちらのコンテナも入れ子にできないことに注意してください。
.containerレスポンシブ固定幅コンテナーに使用します。
<div class="container">
...
</div>.container-fluidビューポートの幅全体にまたがる、全幅のコンテナに使用します。
<div class="container-fluid">
...
</div>グリッドシステム
Bootstrap には、デバイスまたはビューポートのサイズの増加に応じて最大 12 列まで適切にスケーリングする、レスポンシブでモバイルな最初の流体グリッド システムが含まれています。簡単なレイアウト オプションのための事前定義されたクラスと、よりセマンティックなレイアウトを生成するための強力な mixin が含まれています。
序章
グリッド システムは、コンテンツを格納する一連の行と列を介してページ レイアウトを作成するために使用されます。Bootstrap グリッド システムの仕組みは次のとおりです。
- 適切な配置とパディングのために、行は
.container(固定幅) または(全幅)内に配置する必要があります。.container-fluid - 行を使用して、列の水平グループを作成します。
- コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます。
.rowおよびのような事前定義されたグリッド クラス.col-xs-4を使用して、グリッド レイアウトをすばやく作成できます。より少ない mixin は、よりセマンティックなレイアウトにも使用できます。- 列は、 を介してガター (列のコンテンツ間のギャップ) を作成します
padding。そのパディングは、s の負のマージンを介して、最初と最後の列の行でオフセットされます.row。 - 以下の例がアウトデントされている理由は、負のマージンです。これは、グリッド列内のコンテンツが非グリッド コンテンツと並ぶようにするためです。
- グリッド列は、スパンする使用可能な 12 列の数を指定することによって作成されます。たとえば、3 つの等しい列は three を使用します
.col-xs-4。 - 12 を超える列が 1 つの行に配置されている場合、余分な列の各グループは 1 つの単位として新しい行に折り返されます。
- グリッド クラスは、画面幅がブレークポイント サイズ以上のデバイスに適用され、より小さいデバイスをターゲットとするグリッド クラスをオーバーライドします。したがって、たとえば
.col-md-*、要素に任意のクラスを適用すると、クラスが存在しない場合、中型デバイスだけでなく大型デバイスでもそのスタイルに影響します.col-lg-*。
これらの原則をコードに適用する例を参照してください。
メディアクエリ
Less ファイルで次のメディア クエリを使用して、グリッド システムに主要なブレークポイントを作成します。
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }max-widthCSS をより狭いデバイスのセットに制限するために、これらのメディア クエリを拡張して を含めることがあります。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }グリッド オプション
Bootstrap グリッド システムの側面が複数のデバイスでどのように機能するかを、便利な表で確認してください。
| 超小型デバイス電話 (<768px) | 小型デバイスタブレット (≥768px) | 中型デバイスデスクトップ (≥992px) | 大型デバイスデスクトップ (≥1200px) | |
|---|---|---|---|---|
| グリッドの動作 | 常に水平 | 折りたたまれて開始、ブレークポイントの上に水平 | ||
| コンテナ幅 | なし（自動） | 750px | 970px | 1170px |
| クラスプレフィックス | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列数 | 12 | |||
| 列幅 | 自動 | 〜62ピクセル | 〜81px | 〜97ピクセル |
| ガター幅 | 30px (列の両側に 15px) | |||
| ネスト可能 | はい | |||
| オフセット | はい | |||
| 列の順序 | はい | |||
例: 水平に積み重ねる
グリッド クラスの 1 つのセットを使用して、.col-md-*デスクトップ (中) デバイスで水平になる前に、モバイル デバイスとタブレット デバイス (極小から小の範囲) で積み重ねられる基本的なグリッド システムを作成できます。任意の にグリッド列を配置します.row。
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>例：液体容器
.container一番外側を に変更して、固定幅のグリッド レイアウトを全幅のレイアウトに変えます.container-fluid。
<div class="container-fluid">
<div class="row">
...
</div>
</div>例: モバイルとデスクトップ
カラムを小さなデバイスに単純に積み上げたくないですか? 列に追加.col-xs-* .col-md-*して、極小および中規模のデバイス グリッド クラスを使用します。すべてがどのように機能するかについてのより良いアイデアについては、以下の例を参照してください。
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>例: モバイル、タブレット、デスクトップ
.col-sm-*前の例に基づいて、タブレットクラスを使用してさらに動的で強力なレイアウトを作成します。
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>例: 列の折り返し
12 を超える列が 1 つの行に配置されている場合、余分な列の各グループは 1 つの単位として新しい行に折り返されます。
.col-xs-9
.col-xs-4
9 + 4 = 13 > 12 なので、この 4 列幅の div は、1 つの連続した単位として新しい行にラップされます。
9 + 4 = 13 > 12 なので、この 4 列幅の div は、1 つの連続した単位として新しい行にラップされます。
.col-xs-6
後続の列は新しい行に沿って続きます。
後続の列は新しい行に沿って続きます。
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>レスポンシブ列のリセット
利用可能なグリッドの 4 つの層を使用すると、特定のブレークポイントで、一方が他方よりも高いため、列が完全にクリアされないという問題に遭遇することになります。.clearfixこれを修正するには、とレスポンシブ ユーティリティ クラスを組み合わせて使用します。
.col-xs-6 .col-sm-3
ビューポートのサイズを変更するか、スマートフォンで例を確認してください。
ビューポートのサイズを変更するか、スマートフォンで例を確認してください。
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>レスポンシブ ブレークポイントでの列のクリアに加えて、オフセット、プッシュ、またはプルのリセットが必要になる場合があります。グリッドの例でこれを実際に見てください。
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>列のオフセット
.col-md-offset-*クラスを使用して列を右に移動します。これらのクラスは、列の左マージンを列ごとに増やし*ます。たとえば、 4 つの列を.col-md-offset-4移動.col-md-4します。
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>.col-*-offset-0下位のグリッド層からのオフセットをクラスで上書きすることもできます。
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>列のネスト
コンテンツを既定のグリッドにネストするには、既存の列内に新しい.row一連の列を追加します。ネストされた行には、合計が 12 以下になる一連の列を含める必要があります (使用可能な 12 列すべてを使用する必要はありません)。.col-sm-*.col-sm-*
レベル 1: .col-sm-9
レベル 2: .col-xs-8 .col-sm-6
レベル 2: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>列の順序
.col-md-push-*および.col-md-pull-*修飾子クラスを使用して、組み込みのグリッド列の順序を簡単に変更します。
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>ミックスインと変数が少ない
Bootstrap には、レイアウトを高速化するための事前構築済みのグリッド クラスに加えて、独自のシンプルでセマンティックなレイアウトをすばやく生成するための Less 変数と mixin が含まれています。
変数
変数は、列数、ガター幅、および浮動列を開始するメディア クエリ ポイントを決定します。これらを使用して、上記の事前定義されたグリッド クラスを生成するだけでなく、以下にリストするカスタム ミックスインにも使用します。
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;ミックスイン
Mixin はグリッド変数と組み合わせて使用され、個々のグリッド列のセマンティック CSS を生成します。
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}使用例
変数を独自のカスタム値に変更するか、ミックスインをデフォルト値で使用することができます。以下は、既定の設定を使用して、間に隙間のある 2 列のレイアウトを作成する例です。
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>タイポグラフィ
見出し
までのすべての HTML 見出し<h1>を<h6>使用できます。見出しのフォント スタイルを一致させたいが、テキストをインラインで表示したい場合には、.h1throughクラスも利用できます。.h6
h1. ブートストラップの見出し |
セミボールド 36px |
h2. ブートストラップの見出し |
セミボールド 30px |
h3. ブートストラップの見出し |
セミボールド 24px |
h4. ブートストラップの見出し |
セミボールド 18px |
h5. ブートストラップの見出し |
セミボールド 14px |
h6. ブートストラップの見出し |
セミボールド 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6><small>一般的なタグまたは.smallクラスを使用して、見出しに軽い二次テキストを作成します。
h1. Bootstrap の見出し2 次テキスト |
h2. Bootstrap の見出し2 次テキスト |
h3. Bootstrap の見出し2 次テキスト |
h4. Bootstrap の見出し2 次テキスト |
h5. Bootstrap の見出し2 次テキスト |
h6. Bootstrap の見出し2 次テキスト |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>ボディコピー
Bootstrap のグローバル デフォルトfont-sizeは14pxで、aline-heightは1.428です。これは、<body>およびすべての段落に適用されます。さらに、<p>(段落) は、計算された行の高さの半分 (デフォルトでは 10px) の下余白を受け取ります。
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nasceturridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nasceturridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>リードボディコピー
を追加して、段落を目立たせ.leadます。
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>より少ないもので構築
タイポグラフィのスケールは、 variables.lessの 2 つの Less 変数に基づいて@font-size-baseいます@line-height-base。1 つ目は全体で使用されるベースの font-size で、2 つ目はベースの line-height です。これらの変数といくつかの簡単な計算を使用して、すべてのタイプのマージン、パディング、および行の高さなどを作成します。それらをカスタマイズすると、Bootstrap が適応します。
インライン テキスト要素
マークされたテキスト
別のコンテキストでの関連性のために一連のテキストを強調表示するには、<mark>タグを使用します。
マークタグを使用して、ハイライト文章。
You can use the mark tag to <mark>highlight</mark> text.削除されたテキスト
削除されたテキスト ブロックを示すには、<del>タグを使用します。
このテキスト行は、削除されたテキストとして扱われることを意図しています。
<del>This line of text is meant to be treated as deleted text.</del>取り消し線テキスト
関連性がなくなったテキスト ブロックを示すには、<s>タグを使用します。
このテキスト行は、もはや正確ではないものとして扱われることを意図しています。
<s>This line of text is meant to be treated as no longer accurate.</s>挿入されたテキスト
ドキュメントへの追加を示すには、<ins>タグを使用します。
このテキスト行は、ドキュメントへの追加として扱われることを意図しています。
<ins>This line of text is meant to be treated as an addition to the document.</ins>下線付きテキスト
テキストに下線を引くには、<u>タグを使用します。
このテキスト行は下線付きで表示されます
<u>This line of text will render as underlined</u>HTML のデフォルトの強調タグを軽量スタイルで利用します。
小さなテキスト
インラインまたはテキスト ブロックの強調を解除するには、<small>タグを使用してテキストを親の 85% のサイズに設定します。font-size見出し要素は、ネストされた要素に対して独自のものを受け取り<small>ます。
または、代わりに inline 要素を使用することもできます.smallany <small>.
このテキスト行は細字として扱われることを意図しています。
<small>This line of text is meant to be treated as fine print.</small>大胆な
より重いフォントウェイトでテキストのスニペットを強調します。
次のテキスト スニペットは太字で表示されます。
<strong>rendered as bold text</strong>斜体
テキストのスニペットを斜体で強調します。
次のテキストのスニペットは、イタリック体のテキストとして表示されます。
<em>rendered as italicized text</em>代替要素
<b>と<i>HTML5 で自由に使用してください。主に音声、技術用語などのためのものですが、<b>追加の重要性を伝えることなく単語やフレーズを強調することを目的としています.<i>
アライメント クラス
テキスト配置クラスを使用して、テキストをコンポーネントに簡単に再配置します。
左揃えのテキスト。
中央揃えのテキスト。
右揃えのテキスト。
正当化されたテキスト。
折り返しテキストはありません。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>変換クラス
テキストの大文字化クラスを使用して、コンポーネント内のテキストを変換します。
小文字のテキスト。
大文字のテキスト。
大文字のテキスト。
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>略語
<abbr>ホバー時に展開されたバージョンを表示するための、略語と頭字語の HTML 要素の様式化された実装。属性を持つ略語にtitleは、薄い点線の下の境界線とホバー時のヘルプ カーソルがあり、ホバー時および支援技術のユーザーに追加のコンテキストを提供します。
基本略語
単語属性の省略形はattrです。
<abbr title="attribute">attr</abbr>イニシャルリズム
.initialism若干小さいフォント サイズの省略形に追加します。
HTMLは食パン以来最高のものです。
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>住所
最も近い先祖または全作品の連絡先情報を提示します。すべての行を<br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 フルネーム
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 フルネーム
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>ブロッククオート
ドキュメント内の別のソースからコンテンツのブロックを引用する場合。
デフォルトのブロック引用
引用符としてHTMLを囲み<blockquote>ます。ストレート クォートの場合は、 をお勧めします。<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>引用オプション
標準の単純なバリエーションのスタイルと内容の変更<blockquote>。
ソースの命名
<footer>ソースを識別するために a を追加します。ソース作品の名前を で囲み<cite>ます。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>代替ディスプレイ
.blockquote-reverse右揃えのコンテンツを含むブロック引用に追加します。
<blockquote class="blockquote-reverse">
...
</blockquote>リスト
順不同
順序が明示的に重要でない項目のリスト。
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- マッサで整数痴漢ロレム
- プレチウム ニスル アリケのファシリシス
- Nulla volutpat aliquam velit
- インゲンマメ iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>順序付けられました
順序が明示的に重要なアイテムのリスト。
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- マッサで整数痴漢ロレム
- プレチウム ニスル アリケのファシリシス
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>スタイルなし
list-styleリスト項目のデフォルトおよび左余白を削除します(直接の子のみ)。これは直接の子リスト項目にのみ適用されます。つまり、ネストされたリストにもクラスを追加する必要があります。
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- マッサで整数痴漢ロレム
- プレチウム ニスル アリケのファシリシス
- Nulla volutpat aliquam velit
- インゲンマメ iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>列をなして
すべてのリスト項目を 1 行に配置しdisplay: inline-block;、若干のパディングを行います。
- ロレム・イプサム
- インゲンマメ
- ヌラ・ヴォルパット
<ul class="list-inline">
<li>...</li>
</ul>説明
関連する説明を含む用語のリスト。
- 説明リスト
- 説明リストは、用語を定義するのに最適です。
- ユースモッド
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- マレスアダ ポルタ
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>横の説明
用語と説明を<dl>並べて並べます。デフォルト<dl>のように積み重ねられた状態で開始しますが、ナビゲーションバーが展開されると、これらも展開されます。
- 説明リスト
- 説明リストは、用語を定義するのに最適です。
- ユースモッド
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- マレスアダ ポルタ
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>自動切り捨て
水平方向の説明リストは、長すぎて左側の列に収まらない用語を で切り捨てますtext-overflow。狭いビューポートでは、デフォルトのスタック レイアウトに変更されます。
コード
列をなして
コードのインライン スニペットを でラップし<code>ます。
たとえば、
<section>インラインとしてラップする必要があります。
For example, <code><section></code> should be wrapped as inline.ユーザー入力
を使用して、<kbd>通常はキーボードから入力される入力を示します。
ディレクトリを切り替えるには、
cd続けてディレクトリの名前を入力します。
設定を編集するには、 を押します。 ctrl + ,
設定を編集するには、 を押します。 ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>基本ブロック
<pre>複数行のコードに使用します。適切にレンダリングするために、コード内の山かっこを必ずエスケープしてください。
<p>サンプル テキストはこちら...</p>
<pre><p>Sample text here...</p></pre>オプションでクラスを追加できます.pre-scrollable。これにより、最大高さが 350px に設定され、y 軸スクロールバーが提供されます。
変数
変数を示すには、<var>タグを使用します。
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>サンプル出力
プログラムからのブロックのサンプル出力を示すには、<samp>タグを使用します。
このテキストは、コンピューター プログラムからのサンプル出力として扱われることを意図しています。
<samp>This text is meant to be treated as sample output from a computer program.</samp>テーブル
基本的な例
基本的なスタイリング (軽いパディングと水平方向の仕切りのみ) の場合、基本クラス.tableを anyに追加します<table>。非常に冗長に思えるかもしれませんが、カレンダーや日付ピッカーなどの他のプラグインでテーブルが広く使用されていることを考慮して、カスタム テーブル スタイルを分離することにしました。
| # | ファーストネーム | 苗字 | ユーザー名 |
|---|---|---|---|
| 1 | マーク | オットー | @mdo |
| 2 | ジェイコブ | ソーントン | @太い |
| 3 | ラリー | 鳥 | @ツイッター |
<table class="table">
...
</table>縞模様の行
.table-striped内の任意のテーブル行にゼブラ ストライプを追加するために使用します<tbody>。
クロスブラウザの互換性
ストライプ テーブルは:nth-child、Internet Explorer 8 では使用できない CSS セレクターを介してスタイル設定されます。
| # | ファーストネーム | 苗字 | ユーザー名 |
|---|---|---|---|
| 1 | マーク | オットー | @mdo |
| 2 | ジェイコブ | ソーントン | @太い |
| 3 | ラリー | 鳥 | @ツイッター |
<table class="table table-striped">
...
</table>ボーダーテーブル
.table-borderedテーブルとセルのすべての辺に罫線を追加します。
| # | ファーストネーム | 苗字 | ユーザー名 |
|---|---|---|---|
| 1 | マーク | オットー | @mdo |
| 2 | ジェイコブ | ソーントン | @太い |
| 3 | ラリー | 鳥 | @ツイッター |
<table class="table table-bordered">
...
</table>行にカーソルを合わせる
.table-hover内の表の行でホバー状態を有効にするために追加します<tbody>。
| # | ファーストネーム | 苗字 | ユーザー名 |
|---|---|---|---|
| 1 | マーク | オットー | @mdo |
| 2 | ジェイコブ | ソーントン | @太い |
| 3 | ラリー | 鳥 | @ツイッター |
<table class="table table-hover">
...
</table>要約表
.table-condensedセルのパディングを半分にカットして、テーブルをよりコンパクトにするために追加します。
| # | ファーストネーム | 苗字 | ユーザー名 |
|---|---|---|---|
| 1 | マーク | オットー | @mdo |
| 2 | ジェイコブ | ソーントン | @太い |
| 3 | 鳥のラリー | @ツイッター | |
<table class="table table-condensed">
...
</table>コンテキスト クラス
表の行または個々のセルに色を付けるには、コンテキスト クラスを使用します。
| クラス | 説明 |
|---|---|
.active |
特定の行またはセルにホバーカラーを適用します |
.success |
成功または肯定的なアクションを示します |
.info |
中立的な有益な変更またはアクションを示します |
.warning |
注意が必要な可能性がある警告を示します |
.danger |
危険または潜在的に否定的な行動を示します |
| # | 列見出し | 列見出し | 列見出し |
|---|---|---|---|
| 1 | 列の内容 | 列の内容 | 列の内容 |
| 2 | 列の内容 | 列の内容 | 列の内容 |
| 3 | 列の内容 | 列の内容 | 列の内容 |
| 4 | 列の内容 | 列の内容 | 列の内容 |
| 5 | 列の内容 | 列の内容 | 列の内容 |
| 6 | 列の内容 | 列の内容 | 列の内容 |
| 7 | 列の内容 | 列の内容 | 列の内容 |
| 8 | 列の内容 | 列の内容 | 列の内容 |
| 9 | 列の内容 | 列の内容 | 列の内容 |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>支援技術に意味を伝える
表の行または個々のセルに意味を追加するために色を使用しても、視覚的な表示が提供されるだけであり、スクリーン リーダーなどの支援技術のユーザーには伝わりません。.sr-only色で示される情報が、コンテンツ自体 (関連するテーブルの行/セルに表示されているテキスト) から明らかであるか、クラスで非表示の追加テキストなどの代替手段によって含まれていることを確認してください。
レスポンシブ テーブル
小さなデバイス (768 ピクセル未満) で水平方向にスクロールできるようにラップ.tableしてレスポンシブ テーブルを作成します。.table-responsive幅が 768 ピクセルを超えるもので表示すると、これらの表に違いは見られません。
垂直クリッピング/切り捨て
レスポンシブ テーブルはoverflow-y: hidden、テーブルの下端または上端を超えるコンテンツを切り取る を使用します。特に、これにより、ドロップダウン メニューやその他のサードパーティ製ウィジェットが切り取られる可能性があります。
Firefox とフィールドセット
widthFirefox には、レスポンシブ テーブルに干渉するいくつかの扱いにくいフィールドセット スタイルがあります。これは、Bootstrap で提供されていないFirefox 固有のハックなしではオーバーライドできません。
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}詳細については、このスタック オーバーフローの回答をお読みください。
| # | 表の見出し | 表の見出し | 表の見出し | 表の見出し | 表の見出し | 表の見出し |
|---|---|---|---|---|---|---|
| 1 | 表のセル | 表のセル | 表のセル | 表のセル | 表のセル | 表のセル |
| 2 | 表のセル | 表のセル | 表のセル | 表のセル | 表のセル | 表のセル |
| 3 | 表のセル | 表のセル | 表のセル | 表のセル | 表のセル | 表のセル |
| # | 表の見出し | 表の見出し | 表の見出し | 表の見出し | 表の見出し | 表の見出し |
|---|---|---|---|---|---|---|
| 1 | 表のセル | 表のセル | 表のセル | 表のセル | 表のセル | 表のセル |
| 2 | 表のセル | 表のセル | 表のセル | 表のセル | 表のセル | 表のセル |
| 3 | 表のセル | 表のセル | 表のセル | 表のセル | 表のセル | 表のセル |
<div class="table-responsive">
<table class="table">
...
</table>
</div>フォーム
基本的な例
個々のフォーム コントロールは、グローバル スタイルを自動的に受け取ります。<input>、<textarea>、およびのすべてのテキスト<select>要素は、デフォルトで.form-controlに設定さwidth: 100%;れています。.form-group最適な間隔でラベルとコントロールを包み込みます。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>フォーム グループと入力グループを混在させないでください
フォーム グループと入力グループを直接混在させないでください。代わりに、入力グループをフォーム グループ内にネストします。
インラインフォーム
左揃えおよびインライン ブロック コントロール.form-inlineのフォーム ( である必要はありません)に追加します。これは、幅が 768px 以上のビューポート内のフォームにのみ適用されます。<form>
カスタム幅が必要な場合があります
Bootstrap では、入力と選択がwidth: 100%;デフォルトで適用されています。インライン フォーム内では、width: auto;複数のコントロールを同じ行に配置できるようにリセットします。レイアウトによっては、追加のカスタム幅が必要になる場合があります。
常にラベルを追加する
すべての入力にラベルを含めないと、スクリーン リーダーでフォームに問題が発生します。.sr-onlyこれらのインライン フォームでは、クラスを使用してラベルを非表示にできます。aria-label、aria-labelledbyまたはtitle属性など、支援技術のラベルを提供する別の方法があります。これらのいずれも存在しない場合、スクリーン リーダーは、placeholder存在する場合は属性を使用することに頼ることができますがplaceholder、他のラベル付け方法の代わりに を使用することはお勧めできません。
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>横型
Bootstrap の事前定義されたグリッド クラスを使用し.form-horizontalて、フォームに追加することにより、ラベルとフォーム コントロールのグループを水平レイアウトに配置します (これは である必要はありません<form>)。そうする.form-groupことで、 がグリッド行として動作するように変更されるため、 は必要ありません.row。
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>サポートされているコントロール
サンプル フォーム レイアウトでサポートされている標準フォーム コントロールの例。
入力
最も一般的なフォーム コントロール、テキストベースの入力フィールド。すべての HTML5 タイプのサポートが含まれています: text、password、datetime、datetime-local、date、month、time、week、number、email、urlおよび。searchtelcolor
型宣言が必要
type入力が適切に宣言されている場合にのみ、入力は完全にスタイル設定されます。
<input type="text" class="form-control" placeholder="Text input">入力グループ
テキストベースの の前および/または後に統合されたテキストまたはボタンを追加するには、入力グループ コンポーネントを確認して<input>ください。
テキストエリア
複数行のテキストをサポートするフォーム コントロール。rows必要に応じて属性を変更してください。
<textarea class="form-control" rows="3"></textarea>チェックボックスとラジオ
チェックボックスはリスト内の 1 つまたは複数のオプションを選択するためのもので、ラジオは多数のオプションから 1 つを選択するためのものです。
無効なチェックボックスとラジオはサポートされていますが、親のホバーに「許可されていない」カーソルを提供するには、クラスを親に<label>追加する必要があります、、、、または。.disabled.radio.radio-inline.checkbox.checkbox-inline
デフォルト (スタック)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>インラインのチェックボックスとラジオ
同じ行に表示されるコントロールの一連のチェックボックスまたはラジオで.checkbox-inlineまたはクラスを使用します。.radio-inline
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>ラベル テキストのないチェックボックスとラジオ
内にテキストがない場合<label>、入力は期待どおりに配置されます。現在、インラインでないチェックボックスとラジオでのみ動作します。支援技術には何らかの形式のラベルを提供することを忘れないでください (たとえば、 を使用aria-label)。
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>セレクト
border-radius多くのネイティブな選択メニュー (Safari や Chrome など) は角が丸くなっており、プロパティから変更することはできません。
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><select>属性を持つコントロールの場合multiple、デフォルトで複数のオプションが表示されます。
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>静的制御
フォーム内のフォーム ラベルの横にプレーン テキストを配置する必要がある場合は.form-control-static、<p>.
<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">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>フォーカス状態
outline一部のフォーム コントロールのデフォルト スタイルを削除box-shadowし、代わりに を適用します:focus。
デモ:focus状態
上記の入力例では、ドキュメントのカスタム スタイルを使用して の:focus状態を示してい.form-controlます。
無効状態
入力に boolean 属性を追加してdisabled、ユーザーの操作を防ぎます。無効な入力は明るく表示され、not-allowedカーソルが追加されます。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>無効化されたフィールドセット
disabled属性を に追加して、内のすべてのコントロールを一度<fieldset>に無効にします。<fieldset>
のリンク機能に関する注意事項<a>
デフォルトでは、ブラウザーは 内のすべてのネイティブ フォーム コントロール ( <input>、<select>および<button>要素)<fieldset disabled>を無効として扱い、キーボードとマウスの両方の操作を防ぎます。ただし、フォームに<a ... class="btn btn-*">要素も含まれる場合、これらには のスタイルのみが与えられpointer-events: noneます。ボタンの無効状態に関するセクション (特にアンカー要素のサブセクション) で述べたように、この CSS プロパティはまだ標準化されておらず、Opera 18 以前または Internet Explorer 11 では完全にサポートされていません。キーボード ユーザーがこれらのリンクにフォーカスしたりアクティブにしたりできないようにしないでください。安全のために、カスタム JavaScript を使用してそのようなリンクを無効にしてください。
クロスブラウザの互換性
Bootstrap はこれらのスタイルをすべてのブラウザーに適用しますが、Internet Explorer 11 以前ではdisabled、<fieldset>. カスタム JavaScript を使用して、これらのブラウザーでフィールドセットを無効にします。
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>読み取り専用状態
readonly入力値の変更を防ぐために、入力に boolean 属性を追加します。読み取り専用の入力は (無効な入力と同じように) 明るく表示されますが、標準のカーソルは保持されます。
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>ヘルプテキスト
フォーム コントロールのブロック レベルのヘルプ テキスト。
ヘルプ テキストをフォーム コントロールに関連付ける
aria-describedbyヘルプ テキストは、属性の使用に関連するフォーム コントロールに明示的に関連付ける必要があります。これにより、スクリーン リーダーなどの支援技術が、ユーザーがコントロールにフォーカスしたり、コントロールに入ったりしたときに、このヘルプ テキストを確実にアナウンスします。
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>検証状態
Bootstrap には、フォーム コントロールのエラー、警告、および成功状態の検証スタイルが含まれています。使用するには、、、、またはを親要素に追加.has-warningします。その要素内の 、、およびは、検証スタイルを受け取ります。.has-error.has-success.control-label.form-control.help-block
支援技術と色盲のユーザーに検証状態を伝える
これらの検証スタイルを使用してフォーム コントロールの状態を示すことは、視覚的な色ベースの表示のみを提供し、スクリーン リーダーなどの支援技術のユーザーや色盲のユーザーには伝達されません。
状態の代替表示も提供されていることを確認してください。たとえば、フォーム コントロールの<label>テキスト自体に状態に関するヒントを含めたり (次のコード例の場合のように)、Glyphiconを含めたり(クラスを使用した適切な代替テキストを使用.sr-only- Glyphicon の例を参照)、または追加のヘルプ テキストブロック。aria-invalid="true"特に支援技術の場合、無効なフォーム コントロールにも属性を割り当てることができます。
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>オプションのアイコン付き
.has-feedbackと右のアイコンを追加して、オプションのフィードバック アイコンを追加することもできます。
フィードバック アイコンは、テキスト<input class="form-control">要素でのみ機能します。
アイコン、ラベル、および入力グループ
ラベルのない入力と、右側にアドオンがある入力グループでは、フィードバック アイコンを手動で配置する必要があります。アクセシビリティ上の理由から、すべての入力にラベルを提供することを強くお勧めします。ラベルを表示したくない場合は、.sr-onlyクラスで非表示にします。ラベルなしで行う必要があるtop場合は、フィードバック アイコンの値を調整します。入力グループのright場合、アドオンの幅に応じて値を適切なピクセル値に調整します。
アイコンの意味を支援技術に伝える
スクリーン リーダーなどの支援技術がアイコンの意味を正しく伝えるようにするには、追加の隠しテキストを.sr-onlyクラスに含め、使用に関連するフォーム コントロールに明示的に関連付ける必要がありaria-describedbyます。<label>あるいは、フォーム コントロールに関連付けられた実際のテキストを変更するなど、他の形式で意味 (たとえば、特定のテキスト入力フィールドに警告があるという事実) が伝えられるようにしてください。
次の例では、それぞれのフォーム コントロールの検証状態が<label>テキスト自体で既に言及されていますが、上記の手法 (.sr-onlyテキストとを使用aria-describedby) は説明目的で含まれています。
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>水平およびインライン フォームのオプションのアイコン
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>.sr-only非表示のラベルが付いたオプションのアイコン
.sr-onlyクラスを使用してフォーム コントロールを非表示にする場合<label>(属性などの他のラベル オプションを使用するのではなくaria-label)、アイコンが追加されると、Bootstrap はアイコンの位置を自動的に調整します。
（成功）
@
（成功）
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>サイズ変更の制御
のようなクラスを使用して高さを設定し.input-lg、 のようなグリッド列クラスを使用して幅を設定します.col-lg-*。
高さのサイジング
ボタンのサイズに合わせて、背の高いまたは短いフォーム コントロールを作成します。
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>横型フォーム グループのサイズ
または.form-horizontalを追加して、ラベルとフォーム コントロールのサイズをすばやく変更します。.form-group-lg.form-group-sm
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>列のサイズ
入力をグリッド列または任意のカスタム親要素にラップして、必要な幅を簡単に適用できます。
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>ボタン
ボタンタグ
でボタン クラスを使用する<a>、<button>、または<input>要素
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">コンテキスト固有の使用法
ボタン クラスは<a>および要素で使用できますが、nav および navbar コンポーネント内では要素<button>のみがサポートされます。<button>
ボタンとして機能するリンク
要素がボタンとして機能するために使用される場合<a>(現在のページ内の別のドキュメントまたはセクションに移動するのではなく、ページ内機能をトリガーする場合)、それらにも適切な を与える必要がありますrole="button"。
クロスブラウザー レンダリング
ベスト プラクティスとして、可能な限りこの要素を使用することを強くお勧めします<button>を使用して、クロスブラウザー レンダリングを確実に一致さ
特に、Firefox <30 にはバグline-heightがあり、 ofベースのボタンを設定でき<input>ず、Firefox の他のボタンの高さと正確に一致しません。
オプション
利用可能なボタン クラスのいずれかを使用して、スタイル付きボタンをすばやく作成します。
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>支援技術に意味を伝える
色を使用してボタンに意味を追加しても、視覚的な表示のみが提供され、スクリーン リーダーなどの支援技術のユーザーには伝わりません。.sr-only色で示される情報が、コンテンツ自体 (ボタンの表示テキスト) から明らかであるか、クラスで非表示の追加テキストなどの代替手段によって含まれていることを確認してください。
サイズ
より大きなボタンまたはより小さなボタンが好きですか? 追加.btn-lgのサイズについては、、、.btn-smまたはを追加します。.btn-xs
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>を追加して、ブロック レベルのボタン (親の全幅にわたるボタン) を作成します.btn-block。
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>アクティブな状態
アクティブな場合、ボタンは押されたように見えます (背景が暗くなり、枠線が暗くなり、影が挿入されます)。<button>要素の場合、これは を介して行われます:active。<a>要素の場合は、.active. ただし、.activeon <button>s を使用することはできます (およびaria-pressed="true"アクティブな状態をプログラムで複製する必要がある場合
ボタン要素
:active疑似クラスなので追加する必要はありませんが、強制的に同じ外観にする必要がある場合は、追加して.activeください。
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>アンカー要素
.activeボタンにクラスを追加し<a>ます。
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>無効状態
でボタンをフェードバックして、ボタンをクリックできないようにしopacityます。
ボタン要素
disabledボタンに属性を追加し<button>ます。
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>クロスブラウザの互換性
disabledこの属性を に追加する<button>と、Internet Explorer 9 以前ではテキストが灰色になり、修正できない厄介なテキスト シャドウが表示されます。
アンカー要素
.disabledボタンにクラスを追加し<a>ます。
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>.disabledここでは共通クラスと同様にユーティリティ クラスとして使用する.activeため、接頭辞は必要ありません。
リンク機能に関する注意事項
このクラスはpointer-events: noneのリンク機能を無効にするために使用します<a>が、その CSS プロパティはまだ標準化されておらず、Opera 18 以下、または Internet Explorer 11 では完全にサポートされていません。pointer-events: noneナビゲーションは影響を受けません。つまり、目の見えるキーボードのユーザーや支援技術のユーザーは、これらのリンクを有効にすることができます。安全のために、カスタム JavaScript を使用してそのようなリンクを無効にしてください。
画像
レスポンシブ画像
.img-responsiveクラスを追加することで、Bootstrap 3 の画像をレスポンシブ対応にすることができます。これはmax-width: 100%;、画像height: auto;に適用さdisplay: block;れ、親要素に合わせて適切にスケーリングされます。
.img-responsiveクラスを使用する画像を中央に配置するには、.center-block代わりに を使用し.text-centerます。使用方法の詳細については、ヘルパー クラスのセクション.center-blockを参照してください。
SVG 画像と IE 8-10
Internet Explorer 8 ～ 10 では、SVG 画像.img-responsiveのサイズが不均衡です。これを修正するには、必要に応じて追加width: 100% \9;します。Bootstrap はこれを自動的に適用しません。これは、他の画像形式が複雑になるためです。
<img src="..." class="img-responsive" alt="Responsive image">画像形状
クラスを<img>要素に追加して、任意のプロジェクトでイメージのスタイルを簡単に設定します。
クロスブラウザの互換性
Internet Explorer 8 では角丸がサポートされていないことに注意してください。
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">ヘルパー クラス
コンテキスト カラー
いくつかの重要なユーティリティ クラスを使用して、色で意味を伝えます。これらはリンクにも適用でき、デフォルトのリンク スタイルと同様にホバーすると暗くなります。
Fusce dapibus、tellus ac cursus commodo、tortor mauris nibh。
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>特異性の扱い
別のセレクターの特異性のために強調クラスを適用できない場合があります。ほとんどの場合、十分な回避策は、テキストを<span>クラスでラップすることです。
支援技術に意味を伝える
色を使用して意味を追加しても、視覚的な指示しか提供されず、スクリーン リーダーなどの支援技術のユーザーには伝わりません。色で示される情報がコンテンツ自体から明らかであるか (文脈上の色は、テキスト/マークアップに既に存在する意味を強調するためにのみ使用されます)、または.sr-onlyクラスで非表示の追加テキストなどの代替手段によって含まれていることを確認してください。 .
文脈上の背景
コンテキスト テキスト カラー クラスと同様に、要素の背景を任意のコンテキスト クラスに簡単に設定できます。アンカー コンポーネントは、テキスト クラスと同様にホバーすると暗くなります。
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>特異性の扱い
別のセレクターの特異性が原因で、コンテキスト バックグラウンド クラスを適用できない場合があります。場合によっては、要素のコンテンツを<div>クラスでラップすることで十分な回避策があります。
支援技術に意味を伝える
文脈上の色と同様に、色によって伝えられる意味は、純粋に表現的なものではない形式でも伝えられるようにしてください。
閉じるアイコン
モーダルやアラートなどのコンテンツを閉じるには、一般的な閉じるアイコンを使用します。
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>キャレット
キャレットを使用して、ドロップダウンの機能と方向を示します。ドロップアップ メニューでは、デフォルトのキャレットが自動的に反転することに注意してください。
<span class="caret"></span>クイックフロート
クラスで要素を左または右にフロートします。!important特異性の問題を避けるために含まれています。クラスはミックスインとしても使用できます。
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}センターコンテンツブロック
要素を に設定し、display: blockを介して中央に配置しmarginます。ミックスインおよびクラスとして利用できます。
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}クリアフィックス
親要素にfloat追加することで、簡単にクリアできます。Nicolas Gallagher によって広められたように、micro clearfixを利用します。ミックスインとしても使用できます。.clearfix
<!-- Usage as a class -->
<div class="clearfix">...</div>// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}コンテンツの表示と非表示
およびクラスを使用して、要素を強制的に表示または非表示にします (スクリーン リーダーの場合を含む)。これらのクラスは、クイック フロートと同様に、特異性の競合を回避するために使用されます。これらは、ブロック レベルの切り替えでのみ使用できます。ミックスインとしても使用できます。.show.hidden!important
.hideは利用できますが、常にスクリーン リーダーに影響するわけではなく、v3.0.1 の時点で非推奨です。代わりに.hiddenまたはを使用してください。.sr-only
さらに、.invisible要素の可視性のみを切り替えるために使用できます。つまり、要素displayは変更されず、要素はドキュメントの流れに影響を与える可能性があります。
<div class="show">...</div>
<div class="hidden">...</div>// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}スクリーン リーダーとキーボード ナビゲーションのコンテンツ
スクリーン リーダーを除くすべてのデバイスに対して要素を非表示にし.sr-onlyます。と組み合わせる.sr-onlyと.sr-only-focusable、要素がフォーカスされたときに (キーボードのみのユーザーなどによって) 要素が再び表示されます。アクセシビリティのベスト プラクティスに従うために必要です。ミックスインとしても使用できます。
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}画像の置き換え
クラスまたは mixin を利用して.text-hide、要素のテキスト コンテンツを背景画像に置き換えます。
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}レスポンシブ ユーティリティ
モバイル フレンドリーな開発を迅速に行うには、これらのユーティリティ クラスを使用して、メディア クエリを介してデバイスごとにコンテンツを表示および非表示にします。また、印刷時にコンテンツを切り替えるためのユーティリティ クラスも含まれています。
これらを限定的に使用し、同じサイトのまったく異なるバージョンを作成しないようにしてください。代わりに、各デバイスのプレゼンテーションを補完するために使用してください。
利用可能なクラス
ビューポート ブレークポイント間でコンテンツを切り替えるには、使用可能なクラスを 1 つまたは組み合わせて使用します。
| 超小型デバイス電話 (<768 ピクセル) | 小型デバイスタブレット (≥768px) | 中型デバイスデスクトップ (≥992px) | 大型デバイスデスクトップ (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
見える | 隠れた | 隠れた | 隠れた |
.visible-sm-* |
隠れた | 見える | 隠れた | 隠れた |
.visible-md-* |
隠れた | 隠れた | 見える | 隠れた |
.visible-lg-* |
隠れた | 隠れた | 隠れた | 見える |
.hidden-xs |
隠れた | 見える | 見える | 見える |
.hidden-sm |
見える | 隠れた | 見える | 見える |
.hidden-md |
見える | 見える | 隠れた | 見える |
.hidden-lg |
見える | 見える | 見える | 隠れた |
v3.2.0 の時点で、各ブレークポイントのクラスには 3 つのバリエーションがあり、以下にリストされている CSS プロパティ値.visible-*-*ごとに 1 つです。display
| クラスのグループ | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
xsたとえば、極小 ( ) 画面の場合、使用可能な.visible-*-*クラスは.visible-xs-block、.visible-xs-inline、および.visible-xs-inline-blockです。
クラス.visible-xs、.visible-sm、.visible-md、および.visible-lgも存在しますが、v3.2.0 の時点で非推奨です。に関連する要素.visible-*-blockをトグルする特別なケースが追加されていることを除いて、これらは とほぼ同等です。<table>
印刷クラス
通常のレスポンシブ クラスと同様に、これらを使用してコンテンツを印刷用に切り替えます。
| クラス | ブラウザ | 印刷する |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
隠れた | 見える |
.hidden-print |
見える | 隠れた |
このクラス.visible-printも存在しますが、v3.2.0 では非推奨です。に関連する要素.visible-print-blockの特殊なケースが追加されていることを除いて、とほぼ同等です。<table>
テストケース
ブラウザーのサイズを変更するか、さまざまなデバイスにロードして、応答性の高いユーティリティ クラスをテストします。
目に見える...
緑色のチェックマークは、要素が現在のビューポートに表示されていることを示します。
極小
✔ 小さいサイズで表示
小さな
✔ 小さくても見える
中くらい
✔ 中程度に見える
大きい
✔ 大きく表示
✔ x-small と small に表示
✔ 中型および大型で表示可能
✔ x-small と medium で表示
✔ 小さくても大きくても見える
✔ 小さいサイズと大きいサイズで表示
✔ 小規模および中規模で表示可能
に隠されています...
ここで、緑色のチェックマークは、要素が現在のビューポートで非表示になっていることも示しています。
Less の使用
Bootstrap の CSS は、CSS をコンパイルするための変数、ミックスイン、関数などの追加機能を備えたプリプロセッサである Less 上に構築されています。コンパイルされた CSS ファイルの代わりにソースの Less ファイルを使用したい場合は、フレームワーク全体で使用する多数の変数と mixin を利用できます。
グリッド変数とミックスインについては、グリッド システム セクションで説明します。
ブートストラップのコンパイル
ブートストラップは、少なくとも 2 つの方法で使用できます: コンパイルされた CSS またはソースの Less ファイルです。Less ファイルをコンパイルするには、必要なコマンドを実行するために開発環境をセットアップする方法について、入門セクションを参照してください。
サードパーティのコンパイル ツールは Bootstrap で動作する場合がありますが、コア チームではサポートされていません。
変数
変数は、色、間隔、フォント スタックなどの一般的に使用される値を一元化して共有する方法として、プロジェクト全体で使用されます。完全な内訳については、カスタマイザーを参照してください。
色
グレースケールとセマンティックの 2 つの配色を簡単に利用できます。セマンティックには、意味のあるコンテキスト値に割り当てられたさまざまな色が含まれますが、グレースケール カラーは一般的に使用される黒の色合いにすばやくアクセスできます。
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;これらの色変数をそのまま使用するか、プロジェクトにとってより意味のある変数に再割り当てします。
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}足場
サイトのスケルトンの主要な要素をすばやくカスタマイズするためのいくつかの変数。
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;リンク
値が 1 つだけの適切な色で、リンクのスタイルを簡単に設定できます。
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}@link-hover-colorは、Less のもう 1 つの優れたツールである関数を使用して、適切なホバー カラーを自動的に作成することに注意してください。darken、lighten、saturate、およびを使用できますdesaturate。
タイポグラフィ
いくつかの簡単な変数を使用して、書体、テキスト サイズ、行送りなどを簡単に設定できます。Bootstrap はこれらを利用して、簡単なタイポグラフィック mixin を提供します。
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;アイコン
アイコンの場所とファイル名をカスタマイズするための 2 つの簡単な変数。
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";コンポーネント
Bootstrap 全体のコンポーネントは、共通の値を設定するためにいくつかのデフォルト変数を使用します。ここでは、最も一般的に使用されます。
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;ベンダー ミックスイン
ベンダー ミックスインは、コンパイル済みの CSS に関連するすべてのベンダー プレフィックスを含めることで、複数のブラウザーをサポートするのに役立つミックスインです。
ボックスサイジング
単一の mixin でコンポーネントのボックス モデルをリセットします。コンテキストについては、Mozilla のこの役立つ記事を参照してください。
mixin は、Autoprefixer の導入により、v3.2.0 で非推奨になりました。下位互換性を維持するために、Bootstrap は Bootstrap v4 まで内部的に mixin を使用し続けます。
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}丸い角
現在、最新のブラウザはすべて、接頭辞なしのborder-radiusプロパティをサポートしています。そのため、ミックスインはありません.border-radius()が、Bootstrap には、オブジェクトの特定の側面の 2 つの角をすばやく丸めるためのショートカットが含まれています。
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}ボックス (ドロップ) シャドウ
ターゲット ユーザーが最新かつ最高のブラウザーとデバイスを使用している場合は、必ずbox-shadowプロパティを単独で使用してください。古い Android (v4 より前) および iOS デバイス (iOS 5 より前) のサポートが必要な場合は、非推奨のmixin を使用して、必要な-webkitプレフィックスを取得してください。
Bootstrap は、標準プロパティをサポートしない古いプラットフォームを公式にサポートしていないため、mixin はv3.1.0 で廃止されました。下位互換性を維持するために、Bootstrap は Bootstrap v4 まで内部的に mixin を使用し続けます。
ボックスの影に色を使用rgba()して、背景とできるだけシームレスに調和するようにしてください。
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}トランジション
柔軟性のための複数の mixin。すべてのトランジション情報を 1 つに設定するか、必要に応じて別の遅延と期間を指定します。
ミックスインはv3.2.0 で廃止され、Autoprefixer が導入されました。下位互換性を維持するために、Bootstrap は Bootstrap v4 まで内部的に mixin を使用し続けます。
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}変換
オブジェクトを回転、拡大縮小、平行移動 (移動)、または傾斜させます。
ミックスインはv3.2.0 で廃止され、Autoprefixer が導入されました。下位互換性を維持するために、Bootstrap は Bootstrap v4 まで内部的に mixin を使用し続けます。
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}アニメーション
CSS3 のすべてのアニメーション プロパティを 1 つの宣言で使用するための単一の mixin と、個々のプロパティのその他の mixin。
ミックスインはv3.2.0 で廃止され、Autoprefixer が導入されました。下位互換性を維持するために、Bootstrap は Bootstrap v4 まで内部的に mixin を使用し続けます。
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}不透明度
すべてのブラウザーの不透明度を設定し、filterIE8 のフォールバックを提供します。
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}プレースホルダー テキスト
各フィールド内のフォーム コントロールにコンテキストを提供します。
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}コラム
単一の要素内で CSS を介して列を生成します。
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}グラデーション
任意の 2 色を背景のグラデーションに簡単に変換できます。さらに進んで方向を設定したり、3 色を使用したり、放射状グラデーションを使用したりします。単一の mixin を使用すると、必要なプレフィックス付きの構文をすべて取得できます。
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);標準の 2 色の線形グラデーションの角度を指定することもできます。
#gradient > .directional(#333; #000; 45deg);バーバー ストライプ スタイルのグラデーションが必要な場合は、それも簡単です。単一の色を指定するだけで、半透明の白いストライプがオーバーレイされます。
#gradient > .striped(#333; 45deg);賭け金を上げて、代わりに 3 色を使用します。最初の色、2 番目の色、2 番目の色のカラー ストップ (25% などのパーセンテージ値)、および 3 番目の色を次の mixin で設定します。
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);注意喚起！グラデーションを削除する必要がfilterある場合は、追加した IE 固有のものを必ず削除してください。.reset-filter()と一緒にミックスインを使用することでそれを行うことができますbackground-image: none;。
ユーティリティ ミックスイン
ユーティリティ mixin は、特定の目標またはタスクを達成するために、関連のない CSS プロパティを組み合わせた mixin です。
クリアフィックス
要素への追加を忘れてclass="clearfix"、代わりに.clearfix()適切な場所に mixin を追加してください。Nicolas Gallagherのmicro clearfixを使用します。
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}水平センタリング
親内の任意の要素をすばやく中央に配置します。必須widthまたはmax-width設定する必要があります。
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}サイジングヘルパー
オブジェクトの寸法をより簡単に指定します。
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }サイズ変更可能なテキストエリア
テキストエリアやその他の要素のサイズ変更オプションを簡単に設定できます。デフォルトは通常のブラウザの動作です ( both)。
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}テキストの切り捨て
単一の mixin を使用して、テキストを省略記号で簡単に切り捨てます。要素がblockまたはinline-blockレベルである必要があります。
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}網膜画像
2 つの画像パスと @1x 画像サイズを指定すると、Bootstrap は @2x メディア クエリを提供します。提供する画像が多数ある場合は、Retina 画像 CSS を 1 つのメディア クエリで手動で記述することを検討してください。
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}サスの使用
Bootstrap は Less 上に構築されていますが、公式の Sass ポートもあります。別の GitHub リポジトリで管理し、変換スクリプトで更新を処理します。
含まれるもの
Sass ポートには別のリポジトリがあり、わずかに異なる対象者を対象としているため、プロジェクトの内容はメインの Bootstrap プロジェクトとは大きく異なります。これにより、Sass ポートができるだけ多くの Sass ベースのシステムと互換性を持つようになります。
| 道 | 説明 |
|---|---|
lib/ |
Ruby gem コード (Sass 構成、Rails および Compass 統合) |
tasks/ |
コンバーター スクリプト (アップストリームの Less を Sass に変換) |
test/ |
コンパイル テスト |
templates/ |
Compass パッケージ マニフェスト |
vendor/assets/ |
Sass、JavaScript、およびフォント ファイル |
Rakefile |
rake や convert などの内部タスク |
Sassポートの GitHub リポジトリにアクセスして、これらのファイルの動作を確認してください。
インストール
Bootstrap for Sass をインストールして使用する方法については、GitHub リポジトリの readmeを参照してください。これは最新のソースであり、Rails、Compass、および標準の Sass プロジェクトで使用するための情報が含まれています。