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

Pocket

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は横幅を突き抜けて1行で表示されるようになります。

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>

デモページはこちら

レイアウトのヘルパークラス

横並びのコンテンツを作るのによくお世話になります。背景色がなぜか全体をカバーしないなんていう場合は.clearfixを使うとうまくいくことが多いですね。

Class名 概要
.pull-left 浮かせて左揃え
.pull-right 浮かせて右揃え
.center-block 要素を中央揃え
.clearfix floatを解除

Show&Hide

表示、非表示は普段display:noneを使いますが、Bootstrap3にはうまく隠してくれるclassが用意されています。とくに.text-hideはロゴ画像を使っている時に便利。

Class名 概要
.show 表示
.hidden 非表示
.text-hide 要素からテキストを隠す