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 |
要素からテキストを隠す |