CSS

公式ドキュメントのうち JavaScript に依存せず CSS だけで部品を装飾する Bootstrap 3 の機能をコード例とともに列挙します。公式ページは CSS Components および CSS です。 グリフアイコン [使用できるアイコン一覧](http://getbootstrap.com/components/#glyphicon

CSS は構造化が難しくスタイルを宣言していくだけで目的が達成できてしまいます。上書きの繰り返しによって肥大化しないための設計ヒントをまとめます。 詳細度の高騰が発生した CSS は破綻しやすい CSS の詳細度はルーティングテーブルのロンゲストマッチのようなものです。一致度の高いとされるセレクタで指定したスタイルが優先的に適用されます。同じ詳細度の場合は後から指定したスタイルで上書かれて適用され...

Sass (Syntactically Awesome Stylesheets) のチートシートです。インデントを多用した SASS 記法ではなく、広く普及している SCSS 構文の Sass を対象とします。 継承 (extend) 基本 .class1 { background-color: #f00; } .class2 { @extend .class1; colo...

JavaScript に依存した動的な部品をコード例とともに列挙します。公式ページは JavaScript です。いずれの部品を使用する場合でも以下のように jQuery と Bootstrap (JS) の読み込みが必要です。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">...

フォーム関連の Bootstrap 3 の機能をコード例とともに列挙します。公式ページは CSS/Forms です。JavaScript には依存せずに動作します。 標準的なレイアウト <div class="container"></div> に含めて使用します。まとまりごとに form-group で囲います。 <form> <!-- 一行入力 -...

グリッドレイアウトによるレスポンシブ Web デザインを Bootstrap 3 で行う方法を記載します。 すべての要素の入れ物であるコンテナ要素 公式ドキュメントの一番最初に記載されている container はすべての要素の入れ物です。コンテンツ全体を container で囲みます。container には四種類の幅があります。container の左右にはマージンが作られます。入れ子にする...

Bootstrap のメジャーバージョンは 2015-2-01(Sun) 現在 3 であり、最も人気のある HTML, CSS, JS のフレームワークです。Grid system という、いわゆるレスポンシブデザインを行うために便利な機能も利用できます。デザインの独自性にこだわらない業務アプリケーションなどを短期間で作る場合にも便利ですし、インターネットに公開する独自性が求められるアプリケーショ...