Bootstrap-helper-classes
提供:Dev Guides
ブートストラップ-ヘルパークラス
この章では、Bootstrapの便利なヘルパークラスについて説明します。
閉じるアイコン
モーダルやアラートなどのコンテンツを閉じるには、一般的な閉じるアイコンを使用します。 クラス close を使用して、閉じるアイコンを取得します。
<p>Close Icon Example
<button type = "button" class = "close" aria-hidden = "true">
×
</button>
</p>
キャレット
キャレットを使用して、ドロップダウンの機能と方向を示します。 この機能を取得するには、クラス caret と<span>要素を使用します。
<p>Caret Example<span class = "caret"></span></p>
クイックフロート
クラス pull-left または pull-right を使用して、要素をそれぞれ左または右にフロートできます。次の例でこれを示します。
<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>
'_navbarsのコンポーネントをユーティリティクラスに揃えるには、代わりに .navbar-left または .navbar-right を使用します。 詳細については、リンク:/bootstrap/bootstrap navbar [navbar chapter]を参照してください。_
センターコンテンツブロック
クラス center-block を使用して、要素を中央に設定します。
<div class = "row">
<div class = "center-block" style = "width:200px; background-color:#ccc;">
This is an example for center-block
</div>
</div>
Clearfix
要素のフロートをクリアするには、*。clearfix *クラスを使用します。
<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
<div class = "pull-left" style = "background:#58D3F7;">
Quick Float to left
</div>
<div class = "pull-right" style = "background: #DA81F5;">
Quick Float to right
</div>
</div>
コンテンツの表示と非表示
クラス .show および .hidden を使用して、エレメントを強制的に表示または非表示にすることができます(スクリーンリーダーを含む)。
<div class = "row" style = "padding: 91px 100px 19px 50px;">
<div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
This is an example for show class
</div>
<div class = "hidden" style = "width:200px; background-color:#ccc;">
This is an example for hide class
</div>
</div>
スクリーンリーダーのコンテンツ
*.sr-only* クラスを使用すると、スクリーンリーダーを除くすべてのデバイスに対して要素を非表示にできます。
<div class = "row" style = "padding: 91px 100px 19px 50px;">
<form class = "form-inline" role = "form">
<div class = "form-group">
<label class = "sr-only" for = "email">Email address</label>
<input type = "email" class = "form-control" placeholder = "Enter email">
</div>
<div class = "form-group">
<label class = "sr-only" for = "pass">Password</label>
<input type = "password" class = "form-control" placeholder = "Password">
</div>
</form>
</div>
ここでは、両方の入力タイプのラベルにクラス sr-only が割り当てられていることがわかります。したがって、ラベルはスクリーンリーダーのみに表示されます。