読者です 読者をやめる 読者になる 読者になる

IT業界のすみっこ暮らし

ふと気がついたときの記録

Bootstrapについて

※チーム内で簡単に説明するためにまとめた内容になります。

getbootstrap.com

Bootstrap

レスポンシブWebデザイン用 テーマ・色合いの変更が簡単 別途テーマを設定してない場合はデフォルトテーマ

モジュール化されており、LESSの様々な要素を実装している。 bootstrap.lessにはコンポーネントスタイルシートが含まれており、 利用者は使用するコンポーネントを選択して、ファイル自体を修正できる。 基本設計の修正は限定範囲で可能であり、LESSでの宣言により大規模な修正が可能となる。 LESS使用の際は、変数、関数、演算子、ネストされたセレクタだけでなく、Mixinが使用可能となる。 Ver2.0以来、ドキュメント内に特別な「カスタマイズ」オプションが追加された。 また、利用者は必要に応じて様々なオプションの値、 コンポーネント、修正をフォームで選択することができる。 その後生成されたパッケージには、構築済みのCSSが含まれる。

構成

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

bootstrap.css

テキスト、テーブルやフォーム要素などを見栄え良くするなど、全ての主要なHTMLコンポーネントに基本的なCSSスタイル定義を適用する機能がある。

bootstrap.js

jQueryプラグイン形式で一部のJavaScriptが使用可能であり、ダイアログボックス、ツールヒント、カルーセルなどの ユーザーインターフェイス機能のほか、入力欄のオートコンプリート機能を含む既存要素の拡張機能が利用できる。 Ver2.0では、Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel and TypeaheadなどのJavaScriptプラグインがサポートされている。

広告を非表示にする