Bootstrap基本教程

Bootstrapプラグイン

Bootstrap 網格システムの例：水平堆積 Bootstrap HTMLコーディング基準

Bootstrap CSSコーディング基準

文法

タブ（tab）の代わりに2つのスペースを使用します。 -- すべての環境で一貫した表示を保証できる唯一の方法です。
セレクタをグループ化する際は、単独のセレクタを別行に配置します。
コードの読みやすさのために、各声明ブロックの左括弧の前にスペースを追加します。
声明ブロックの右括弧は別行で書かれるべきです。
各声明语句の : :
後ろにスペースを挿入する必要があります。
より正確なエラーレポートを得るために、各宣言は一行に独占する必要があります。
すべての宣言文はセミコロンで終了する必要があります。最後の宣言文の後のセミコロンはオプションですが、このセミコロンを省略すると、コードがより誤りやすい可能性があります。box-カンマで区切られた属性値に対して、各カンマの後ろにスペースを挿入する必要があります（例えば、）。
shadow rgb()、rgba()、hsl()、hsla() または rect() の値内部の後ろにスペースを挿入することで、複数の属性値（カンマとスペースが含まれる）から複数の色値（カンマのみ、スペースなし）を区別することができます。
属性値や色パラメータの場合、小于 1 の小数点前の 0 （例えば、.5 代わりに 0.5；-.5px 代わりに -0.5px）。
十六進値はすべて小文字でなければなりません。例えば、#fff。ドキュメントをスキャンする際には、小文字はより識別しやすく、形式がより区別しやすいです。
短縮形式の十六進値を使用することをお勧めします。例えば、 #fff 代わりに #ffffff。
選択子の属性にダブルクォートを追加する、例えば、input[type="text"]。特定の状況でのみオプションです、しかし、コードの統一のために、すべてにダブルクォートを追加することをお勧めします。
0 値に単位を指定することを避けるべきです。例えば、 margin: 0; 代わりに margin: 0px;。

ここで使用されている用語について疑問がある場合は、Wikipediaのカラースキーマ - 文法。

/* 悪いCSS */
.selector, .selector-サブシードリー, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-影:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* 良いCSS */
.selector,
.selector-サブシードリー,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

宣言順序

関連する属性宣言は一組にまとめ、以下の順序で並べるべきです：

ポジショニング

ボックスモデル

タイポグラフィ

ビジュアル

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

他属性只是影响组件的内部（inside）または前2つの属性に影響を与えないため、後ろに配置されています。

完全な属性リスト及其順序については、参照してくださいインセット。

.declaration-order {
  /* ポジショニング */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* ボックス-モデル */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  /* タイポグラフィ */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  /* ビジュアル */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  /* その他 */
  opacity: 1;
}

を使用しない `@import`

と <link> タグと比較して、@import 命令を使用する場合、遅くなるだけでなく、追加のリクエスト回数が増え、予期せぬ問題が発生する可能性があります。代替方法は以下の通りです：

複数の <link> 要素
SassやLessなどのCSSプレプロセッサを使用して、複数のCSSファイルを1つのファイルにコンパイル
Rails、Jekyll、または他のシステムで提供されているCSSファイルの統合機能

参照してください Steve Soudersの記事もっと詳しく知りたい場合は。

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

メディアクエリ（Media query）の場所

メディアクエリをできるだけ関連するルールの近くに配置します。それらを1つのスタイルファイルにまとめたり、ドキュメントの最下部に配置したりしないでください。分けて配置すると、将来忘れられる可能性があります。以下に典型的な例を示します。

.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

前缀付き属性

特定のメーカーの前缀付き属性を使用する場合、インデントの方法で、各属性の値を垂直方向に整列させ、多行編集を便利にします。

Textmateで、使用 テキスト → 選択範囲の各行を編集 (⌃⌘A)。在 Sublime Text 2 中、使用 Selection → Add Previous Line (⌃⇧↑) および Selection → Add Next Line (⌃⇧↓)。

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

单行规则声明

对于只包含一条声明のスタイル、読みやすさと迅速な編集のために、同じ行に文を配置することをお勧めします。複数の宣言を持つスタイルの場合、宣言を複数の行に分けるべきです。

この方法の重要な要素は、エラー検出のためです -- 例えば、CSS検証器は 183 行に構文エラーがあります。単一行の単一の宣言の場合、このエラーを無視しません；単一行の複数の宣言の場合、エラーを避けるために注意深く分析する必要があります。

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

簡略化形式の属性宣言

すべての値を明示的に設定する必要がある場合、簡略化形式の属性宣言の使用をできるだけ制限するべきです。一般的な簡略化形式の属性宣言の濫用の例は以下の通りです：

padding
margin
font
background
border
border-radius

ほとんどの場合、簡略化形式の属性宣言にすべての値を指定する必要はありません。例えば、HTMLのheading要素は上、下のマージン（margin）の値を設定するだけで十分です。必要な場合に、これらの値をオーバーライドするだけで十分です。簡略化形式の属性宣言の過度な使用はコードの混乱を引き起こし、属性値に不必要なオーバーライドを引き起こし、予期せぬ副作用を引き起こすことがあります。

MDN（Mozilla Developer Network）の非常に良いshorthand properties の文章は、簡略化属性宣言及其行動に不慣れなユーザーにとって非常に役立ちます。

/* 悪い例 */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}
/* 良い例 */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

LessおよびSassのネスト

不必要なネストを避けてください。なぜなら、ネストを使用できるとはいえ、それが必須であるという意味ではありません。スタイルを親要素内に制限する必要がある場合（例えば、子孫選択子）および、ネストが必要な複数の要素がある場合にのみ使用してください。

// ネストを使用しない場合
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// ネストを使用して
.table > thead > tr {
  > th { … }
  > td { … }
}

コードは人によって書かれ、保守されています。あなたのコードは自己説明的で、良いコメントがあれば他人に理解しやすくなります。良いコードのコメントは、文脈関係やコードの目的を伝えることができます。単にコンポーネントやクラス名を繰り返すことはしないでください。

長いコメントの場合は、完全な文を書かなくてはなりません；一般的な注解の場合は、簡潔な短文でかまいません。

/* 悪い例 */
/* Modalヘッダー */
.modal-header {
  ...
}
/* 良い例 */
/* .modalのラッピング要素-title and .modal-close */
.modal-header {
  ...
}

クラス命名

クラス名には小文字の文字とダッシュ（dashe）（アンダースコアやキャメルケース命名法ではありません）のみが含まれるべきです。ダッシュは関連するクラスの命名に使用されるべきです（例えば、.btn および .btn-danger）。
過度に任意の省略形を避けてください。.btn を表します buttonしかし、 .s どんな意味も表現できないようにしてください。
クラス名は可能な限り短く、明確でなければなりません。
意味のある名前を使用します。組織的または目的が明確な名前を使用し、表現形式（presentational）の名前は使用しないでください。
新しいクラスの接頭辞として、最も近い親クラスまたは基本（base）クラスを使用します。
使用します .js-* 行為を識別するためのクラス（スタイルに対して）を使用し、これらのクラスをCSSファイルに含めないでください。

SassやLessの変数の命名に際しても、上記に示した規範を参考にしてください。

/* 悪い例 */
.t { ... }
.red { ... }
.header { ... }
/* 良い例 */
.tweet { ... }
.important { ... }
.tweet-header { ... }

セレクタ

一般的な要素に対してクラスを使用することで、レンダリングパフォーマンスの最適化を利便にします。
頻繁に使用されるコンポーネントに対して、属性セレクタを使用することを避けます（例えば、[class^="..."]）。これらの要因によって、ブラウザのパフォーマンスに影響を与えます。
セレクタは可能な限り短く、セレクタを構成する要素の数を制限し、推奨されるのは、 3 。
ただし必要な場合のみ、クラスを最も近い親要素内に制限します（つまり、後裔セレクタ）（例えば、プレフィックス付きのクラスを使用しない場合など -- プレフィックスはネームスペースに似ています）。

拡張読本：

/* 悪い例 */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* 良い例 */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

コードの組織

コードをコンポーネント単位で構築します。
一貫したコメントの規範を制定します。
一貫したスペースを使用してコードをブロックに分けることで、大きなドキュメントのスキャンを利便にします。
複数のCSSファイルを使用している場合、ページではなくコンポーネントとして分割します。なぜなら、ページは再構成されるが、コンポーネントは移動されるだけだからです。

/*
 * Component section heading
 */
.element { ... }
/*
 * Component section heading
 *
 * 時には、全体のコンポーネントにオプションのコンテキストを含める必要があります。重要であれば、ここにそれを行います。
 */
.element { ... }
/* Contextual sub-component or modifer */
.element-heading { ... }

エディタの設定

以下の設定にエディタを設定して、一般的なコードの不一致や差異を避けます：

2つのスペースでタブを代用します（soft）。-タブはスペースで表す（tab 符号）。
ファイルを保存する際に、末尾の空白文字を削除します。
ファイルエンコーディングを UTF に設定します。-8。
ファイルの最後に空白行を追加します。

ドキュメントを参照して、これらの設定情報をプロジェクトに追加します。 .editorconfig ファイル中。例えば：Bootstrap での .editorconfig の例に関する更多信息は参照してください。 about EditorConfig。