ブートストラップ-ヘルパークラス

この章では、便利なBootstrapのヘルパークラスのいくつかについて説明します。

アイコンを閉じる

モーダルやアラートなどのコンテンツを閉じるには、一般的な閉じるアイコンを使用します。クラスを使用するclose 閉じるアイコンを取得します。

<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">
      &times;
   </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>

navbarのコンポーネントをユーティリティクラスに揃えるには、 .navbar-left または .navbar-right代わりに。詳細については、ナビゲーションバーの章を参照してください。

センターコンテンツブロック

クラスを使用する 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、したがって、ラベルはスクリーンリーダーにのみ表示されます。