Twitter Bootstrap 逆引き

自分メモです。

テキストを右or左or中央揃えor均等割付にしたい

<p class="text-left">左揃え</p>
<p class="text-center">中央揃え</p>
<p class="text-right">左揃え</p>
<p class="text-justify">均等割</p>

テキストを改行させない

<p class="text-nowrap">No wrap text.</p>

順序無し(ul)リストを横並びにしたい

.list-inlineクラスを使えばよい。

<ul class="list-inline">
  <li>...</li>
</ul>

順序無しリスト(ul)のスタイルを無くしたい

.list-unstyledクラスを使えばよい。が、子要素のみに適用される。ネストした要素にも適用させたいときはクラスを追加する必要がある。

<ul class="list-unstyled">
  <li>...</li>
</ul>

右寄せ、左寄せを指定したい

.pull-left,.pull-rightクラスを使えばよい。

<div class="pull-left">左寄せ</div>
<div class="pull-right">右寄せ</div>

ブロック要素を中央揃えにしたい

.center-blockクラスを使えばよい。

<div class="center-block">...</div>

clearfixしたい

.clearfixクラスがある。

要素を表示/非表示にしたい

表示は.show、非表示は.hiddenを使う。非表示には.hideというクラスもあるが、スクリーンリーダーに影響がでるので非推奨とのこと。

<div class="show">...</div>
<div class="hidden">...</div>

タグの中の文字を消して背景画像で置き換えたい

画像を背景に入れて文字は消したい、みたいなときには.text-hideクラスを使えばよい。

<h1 class="text-hide">Custom heading</h1>