ヘルパー

挙動やスタイルを付け足しで制御するヘルパークラスを用意しています。

marginとpaddingを個別に調整するためにヘルパーが用意されています。
クラス名は下記の規則に従って、marginかpaddingか、余白を付ける方向、4px単位の4つの基準サイズを組み合わせたものになります。

例えば、要素に対してpadding-leftを4pxに指定したい場合は.plx、margin-topとmargin-bottomを16pxに指定したい場合は.mvlを要素に対してクラス指定することで、余白が確保できます。

要素に対して下記の通りクラス指定することで、左右にフロートさせることができます。 他クラスと、優先度に関する問題発生を避けるために、!important指定をしています。

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// クラス
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

navbarでは使用できないため、ユーティリティー・クラスでナビバーのコンポーネントを配置するには、代わりに .navbar-left か .navbar-right を利用してください。詳しくはBootstrap-navbarのドキュメントを参照してください。

親要素に .clearfix を指定することで、 float をクリアできます。 Nicolas Gallagher氏による、 the micro clearfix を利用しています。

<div class="clearfix">...</div>

要素に display: block を指定して、 margin で中央に配置します。

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

// クラス
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.show 、 .hidden クラスを指定することで、要素の表示/非表示を切り替えることができます（読み上げソフトを含む）。 フロートの指定と同様に、!important 指定をすることで他クラスとのスタイル競合を回避しています。このクラスは、ブロック要素にのみ、適用可能です。

また、 .invisible も利用可能ですが、要素の可視性を指定するためのクラスであり、要素の display プロパティに作用するものではないため、当クラスを指定した場合は、領域そのものは確保されたままになります。

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

// クラス
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

<p class="text-left">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-right">Right aligned text</p>
<p class="text-nowrap">No wrap text</p>
<p class="text-ellipsis" style="width:100%;">幅に収まりきらないテキストを「...」で丸めます。表組のセルに適用する場合には、widthと同じ値をmax-widthに指定する必要があります。</p>

.text-ellipsisで、幅に収まり切らないテキストを行末で「...」で丸めて省略した表示にできます。複数行には非対応です。表組のセルに適用する場合には、さらにwidthと同じ値をmax-widthに指定する必要があります。

強調用ユーティリティ・クラスを使うことで、色に意味を含める事ができます。リンクに対して適用することも可能ですし、通常のリンクのようにマウスオーバーで明暗させることも可能です。

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

コンテキストカラークラスと同様に、要素の背景にもコンテキストクラスを設定できます。アンカーに対して適用することで、通常のテキストクラスと同様にリンクへのマウスオーバーで明暗させることも可能です。

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