Bootstrap 3.0 の特殊効果の学習ノート（表示と非表示、フローティングの除去、閉じるボタンなど）

この記事の主な内容は次のとおりです。

1. 閉じるボタン

2.キャレット

3. フローティングを素早く設定

4. コンテンツエリアを中央に配置する

5. クリアフロート

6. コンテンツを表示または非表示にする

7. スクリーンリーダー向けコンテンツ

8. 画像の置き換え

9. まとめ

閉じるボタン

閉じるを表すアイコンを使用して、モーダルダイアログとアラートを消すことができます。

コードをコピー

コードは次のとおりです。

キャレット

キャレットを使用して、ドロップダウンの機能と方向を示します。デフォルトでは、ドロップダウンメニューでキャレットが自動的に反転されることに注意してください。

コードをコピー

コードは次のとおりです。

クイックセットアップフロート

これら 2 つのクラスにより、ページ要素を左右にフロートさせることができます。 !important は特定の問題を回避するために使用されます。これら 2 つのクラスをミックスインのように使用することもできます。

コードをコピー

コードは次のとおりです。

コードをコピー

コードは次のとおりです。

// クラス .pull-left { float: left !important; } .pull-right { float: right !important; } // ミックスインとして使用 .element { .pull-left(); } .another-element { .pull-right(); }

ナビゲーションバーには使用しないでください

ナビゲーションバー上でコンポーネントを揃える場合は、必ず .navbar-left または .navbar-right を使用してください。詳細については、ナビゲーションバーのドキュメントを参照してください。

コンテンツ領域を中央に配置する

ページ要素を display: block に設定し、余白を設定して中央に配置します。ミックスインまたはクラスとして使用できます。

コードをコピー

コードは次のとおりです。

コードをコピー

コードは次のとおりです。

// クラスとして使用 .center-block { display: block; margin-left: auto; margin-right: auto; } // ミックスインとして使用 .element { .center-block(); }

クリアフロート

.clearfix を使用して、ページ要素のフロートをクリアします。 Nicolas Gallagher のマイクロクリアフィックスを使用しました。ミックスインのように使用することもできます。

コードをコピー

コードは次のとおりです。

コードをコピー

コードは次のとおりです。

// Mixin 自体 .clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } } // Mixin としての使用 .element { .clearfix(); }

コンテンツを表示または非表示にする

.show メソッドと .hidden メソッドを使用すると、任意のページ要素（スクリーンリーダーを含む）を強制的に表示または非表示にすることができます。これら 2 つのクラスは競合を避けるために !important を使用します。これら 2 つのクラスはブロックレベル要素にのみ使用でき、ミックスインとしても使用できます。

.hide はまだ機能しますが、スクリーンリーダーでは機能せず、v3.0.1 以降では非推奨としてマークされています。 .hidden または .sr-only を使用してください。

さらに、.invisible を使用して要素の可視性のみを切り替えることもできます。つまり、要素の表示は変更されず、ドキュメントフロー内の要素に引き続き影響を与えることができます。

コードをコピー

コードは次のとおりです。

コードをコピー

コードは次のとおりです。

// クラス .show { display: block !important; } .hidden { display: none !important; visibility: hidden !important; } .invisible { visibility: hidden; } // ミックスインとして使用 .element { .show(); } .another-element { .hidden(); }

スクリーンリーダー向けコンテンツ

スクリーンリーダー以外のすべてのデバイスから要素を非表示にするには、.sr-only を使用します。このクラスはミックスインとしても使用できます。

コードをコピー

コードは次のとおりです。

<a class="sr-only" href="#content">メインコンテンツへスキップ</a>

コードをコピー

コードは次のとおりです。

// Mixin としての使用 .skip-navigation { .sr-only(); }

画像の置き換え

ページ要素のテキストコンテンツを背景画像に置き換えるには、.text-hideclass (ミックスインとしても使用可能) を使用します。

コードをコピー

コードは次のとおりです。