Bootstrapのよく使うスタイルシートまとめ

BootstrapのCSSの基本

Bootstrapのスタイルシートの基本的な設定について、サンプルコードを使用しわかりやく説明していきます。

通常のスタイルシートと違い「width設定の幅が最優先される」

例えば以下のコードの場合、ボックス全体の横幅が「200px」となる。

通常のスタイルシートでは、「width:200px」+「padding-left:10px」+「padding-right:10px」+「border-left:10px」+「border-right:10px」となり、ボックス全体の横幅は「240px」となります。
しかし、Bootstrapでは「width」や「height」が最優先されますので、ボックス全体の横幅が「200px」となり、内訳は「width:160px」+「padding-left:10px」+「padding-right:10px」+「border-left:10px」+「border-right:10px」となります。

行揃えのclass属性が用意されています!

わざわざスタイルシートで下記のように個別に「text-align」など記述する必要はありません。

以下のクラス指定をするだけで行揃えができます。
text-left左寄せ
text-center中央揃い
text-rihgt右寄せ

text-centerではなく、要素そのものを水平中央に位置されるクラス

「class=”center-block”」を指定してください。画像をセンタリングしたい場合によく使います!

色のclass属性もあります!

例えば、テキストの色の設定は「text-warning」や「text-success」、
背景色の設定は「bg-primary」や「bg-success」のように設定します。

テキストを青色
背景を緑


クラスの色
primary
success
info水色
warning黄色
danger

装飾とてhタグのように表示するclass属性

「class=”h2″」と指定するとh2タグのように表示されます。

タイトルの下に下線を表示したい場合

「class=”page-header”」と指定します。よく使いますので覚えておきましょう。

リストタグの設定

「class=”list-unstyled”」・(マーカー)が非表示になります。

「class=”list-inline”」リストが横並びになります。

dlタグの設定

「class=”dl-horizontal”」を指定すると横並びになります。

画像関連でよく使うクラス

imgとともに使うクラス
class=”img-rounded”角丸になる
class=”img-circle”円形になる
class=”img-thumbnail”枠線がつく
class=”center-block”水平中央に配置
class=”img-responsive”列の横幅に合わせて表示する。(列からのはみ出しを防止して縮小表示する。列の横幅より小さい画像はそのまま表示される)

float機能もクラスで指定できます!

floatを設定するクラス
class=”pull-left”style=”float:left”と同じ
class=”pull-right”style=”float:right”と同じ
class=”cleafix”floatを解除する

※表示例

float左 float右


「well」クラスの使い方

ちょっとだけ背景色を変更して強調したい場合によく使います。

well ノーマル
well-sm 小
well-lg 大

BootstrapのCSS一覧は下記のページで確認できます!

追記

タブレットサイズでnavbarの表示がおかしくなる対処方法

以下のページで紹介されているCSSを追記するだけでOKです。
PadでBootstrapのnavbarをcollapseさせる – Qiita