Bootstrap3の便利なヘルパーclassの使い方

2017-01-23

Bootstrap3で使える便利なヘルパークラスの使い方を紹介します。

Bootstrap3のコンポーネントはよく使われるのですが、ヘルパークラスは以外と使ったことがない、知らないという人多いんじゃないでしょうか？以外と痒いところに手がとどく感じで、いろいろと便利なスタイルが用意されているので、一通り目を通しておくことをおすすめします。

デモページはこちら

Bootstrap3のHelper Class

画像に使えるヘルパークラス

画像タグにつけることで簡単に画像の形を変えたり、レスポンシブ化することができます。

Class名	概要
`.img-responsive`	画像のレスポンシブ化
`.img-rounded`	画像を角丸にする
`.img-circle`	画像を円にする
`.img-thumbnail`	画像に枠を付ける

<img src="..." alt="..." class="img-responsive">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

テキストカラーのヘルパークラス

テキストの色を変えることができるclass。エラー表示などで使用することが多いですね。

Class名	概要
`.text-muted`	テキストを薄い色に変更
`.text-primary`	テキストを青色に変更
`.text-success`	テキストを緑色に変更
`.text-info`	テキストを水色に変更
`.text-warning`	テキストを黄色に変更
`.text-danger`	テキストを赤色に変更

<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>

テキストレイアウト

テキストの配置を変更することができます。.text-justifyは横幅ピッタリにテキストを入れたい場合に使用、.text-nowrapは横幅を突き抜けて１行で表示されるようになります。

Class名	概要
`.text-left`	テキストを左揃え
`.text-center`	テキストを中央揃え
`.text-right`	テキストを右揃え
`.text-justify`	テキストを横幅ぴったりに揃える
`.text-nowrap`	テキストを横に突き抜けさせる

<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>

背景カラーのヘルパークラス

背景に色をつけられます。デフォルトだとpadding入ってないのでCSSで見栄えを良くしておきましょう。

Class名	概要
`.bg-primary`	背景を青色に変える
`.bg-success`	背景を緑色に変える
`.bg-info`	背景を水色に変える
`.bg-warning`	背景を黄色に変える
`.bg-danger`	背景を赤色に変える

<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>

デモページはこちら