概要

HTML5 doctype

BootstrapはHTML5が必要です。

<!DOCTYPE html>
<html lang="en">
  ...
</html>

モバイルファースト

Bootstrapはモバイルファーストです。

適切にレンダリングされ、タッチでズームされるように、
<head> 内にviewportメタタグを追加して下さい。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ズーム機能をオフにすることもできますが、おすすめしません。
- user-scalable=noを追加
  - スクロールしかできません。よりネイティブアプリのような感じにできます。
  - 注意して使用して下さい。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

関連: HTML5/ページ全般/meta要素表示領域を設定する - TAG index Webサイト

　レスポンシブイメージ

親要素に合わせてイメージの大きさが変化します。

.img-responsiveをimgタグに追加

<img src="..." class="img-responsive" alt="Responsive image">

　文字とリンク

Bootstrapの基本スタイル

bodyにbackground-color: #fff;を設定しています
文字のベースとして@font-family-base, @font-size-base, @line-height-base属性を使っています
全体のリンクの色は@link-colorで設定します。下線は:hoverのみに適用しています

これらのスタイルはscaffolding lessで見つけて下さい。

ノーマライズ

よりよいブラウザのレンダリングのために、normalizeを使用しています。

コンテナ

.container内にコンテンツをラップすることで、ページコンテンツを中央に配置しています。

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

グリッドシステム

Bootstrapのグリッドシステムは、デバイスやviewportに合わせ最大12列に増大します。
そのためにクラスが用意されています。
mixinsを使えます

導入

グリッドシステムはコンテンツを保持する行と列の連続でレイアウトを組むために使われます。

行は.container内に配置する。(3.1では.container-fluidも可)
行は水平方向に列のグループを作るためにつかう。
コンテンツは列の中に配置する。列のみが行の直下の要素であるべき
グリッドレイアウトをすぐに作れるように、.rowや.col-xs-4といったクラスが定義されています。よりセマンティックなレイアウトのためにLESSのmixinsを使えます
列は、列の間の隙間をpaddingを用いて作ります。最初と最後の列については、このpaddingは.rowに定義されたネガティブマージンによって相殺されます。
グリットカラム（列）は12の利用可能な列を指定することで作成できます。
- 例: 3等分する列は.col-xs-4を使う

適用する際はサンプルをご覧下さい。

最大幅レイアウトとグリッド
viewportの最大幅まで広がる流動的なレイアウトを作成するときは、 .rowに指定されているmargin: 0 -15pxを相殺するために、グリッドのコンテンツをpadding: 0 15px;を持つ要素でラップすること。

ラップしないとはみ出したり、画面のふちに文字がきたりする。

f:id:tkymtk:20131125120444p:plain

メディアクエリ

グリッドオプション

Gridクラスは、同じかより大きいスクリーンに適用され、小さいサイズ用のクラスを上書きする

.col-md-はミディアムサイズと、より大きいデバイスの両方に影響する。
（.col-lg-が設定されていない限り）

文字

Headings

<h1>から<h6>まで利用可能。また、インラインでヘディングのスタイルが欲しいときように.h1から.h6 までのクラスがある。
heading内のサブテキスト用に<small>タグまたは.smallを使える

Bodyの文字

デフォルトでは

font-sizeは14px line-heightは1.428
<p>はline-heightの半分が計算されて、下のマージンとなる。（デフォルトでは10px）
リード文には.leadクラスをつけて目立たせることが出来る。
variables.less内のLESS変数を編集できる: @font-size-base @line-height-base

表現

小さい文字
- <small>タグで親要素の85%の大きさ
- インラインの要素には<small>タグの代わりに.smallを使える
太字
- <strong>
イタリック
- <em>

代替表現
HTML5えは自由に<b>や<i>を使って良い。<b>は特別な意味を持たせずに、太字を強調するとき。 <i>は声や、技術表現などにつかう。

配置用クラス

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

特殊性への対処
他のセレクターとの兼ね合いで表現用クラスが効かないときは、文字を<span>で囲ってやるとよい。

略記

基本的な略記
- <abbr>タグとtitle属性。カーソルを置き続けると、title属性の文字が表示される。

<abbr title="attribute">attr</abbr>

イニシャル
- やや小さめの文字で表示される。class="initialism"を指定

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

アドレス
- <address>タグ。<br>をラインの末尾につけてフォーマットを保つ。

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

引用（Blockquotes）

デフォルト
任意のHTMLを<blockquote>で囲みます。
普通の用途には<p>がおすすめです。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

オプション
- <small>タグを使い情報源を記します。
  - Bootstrap3.1.0では<footer>
- 情報源の名前を<cite>タグで囲みます（引証を表す）
- <blockquote>タグに.pull-rightを使うことで、右寄せにできます。
  - Bootstrap3.1.0では.blockquote-reverse

<blockquote　class="pull-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>