!!!Bootstrap
[CSS][CSS3][レスポンシブWebデザイン][jQuery][Angular JS]
{{amazon 4798135992}}
*http://getbootstrap.com/
*https://qiita.com/akatsuki174/items/53b7367b04ed0b066bbf
!基本テンプレート
*http://getbootstrap.com/getting-started/
Bootstrap 101 Template
Hello, world!
!!ヘッダー
Header
!!!グリッドレイアウト
!!ビューポート
*ピクセル幅により、次に4種類に分類
++Extra small(-768px)
++Small(768 - 992px)
++Medium(992 - 1200px)
++Large(1200px -)
!!コンテナ
*Bootstrap3では、コンテンツ全体を でくくる使い方を想定している
*これにより、デフォルトのマージンが確保される
!!段組
!基本クラス
*col-xs-n コンテナの12分のn(1〜12) の幅を占める
*ネストさせることも可能
::2段組み
!空きを作る
*オフセットを指定し、指定した幅だけ枠を開けることができる
test
!列を入れ替える
*col-xs-push-XX,col-xs-pull-XX を利用(XXは1〜12)する
!ブラウザの幅に応じて段組を変える
,接頭辞,意味
,col-xs-,Extra small(-768px)
,col-sm-,Small(768 - 992px)
,col-md-,Medium(992 - 1200px)
,col-lg-,Large(1200px -)
::例
*Extra smallの場合、col-xs-12 が適用され、幅が12分の12(コンテナ一杯)となる
*Small以上の場合、col-sm-6 が適用され、幅が12分の6(コンテナ幅の半分)となる
Contents
!表示非表示を切り替える
,,Extra small,Small,Medium,Large
,visible-xs,○,×,×,×
,visible-sm,×,○,×,×
,visible-md,×,×,○,×
,visible-lg,×,×,×,○
,hidden-xs,×,○,○,○
,hidden-sm,○,×,○,○
,hidden-md,○,○,×,○
,hidden-lg,○,○,○,×
!!!UI
!!リスト
!横に並べる
!!フォーム
*form-groupでくくる
*入力コントロールの見出しには、control-label を指定する
*入力コントロールには form-control を指定する
*静的なテキストには form-control-static を指定する
*ラジオボタン、チェックボックスは オブジェクトとラベルを それぞれのクラスでくくる
*説明文にはhelp-block を設定する
*ボタンには btn クラスを適用する
::例
!!モーダルダイアログボックス
::ダイアログ
::ダイアログを開くボタン
""Bootstrap3では、JavaScriptを記述することなく、動きを作ることができ、「データ属性API(Data Attribute API)」という。data-toggle と data-target を用いているが、どのような属性を指定すべきなのかはコンポーネントごとに異なる。data- から始まる属性は、HTML5において、「独立データ属性」としてアプリケーション固有のデータを格納する目的で使用される
!!ボタン
!色
,クラス名,用途
,btn-default,デフォルト
,btn-primary,プライマリ
,btn-success,成功
,btn-info,情報
,btn-warning,警告
,btn-danger,危険(エラー)
!大きさ
,クラス名,大きさ
,btn-xs,極小
,btn-sm,小さく
,btn-lg,大きく
,btn-block,横一杯
!!エラーメッセージ
!アラートボックス
,クラス名,用途
,alert-success,成功
,alert-info,情報
,alert-warning,警告
,alert-danger,エラー
必須です
!!!リファレンス
!!ナビゲーションバー
*http://bootstrap3.cyberlab.info/components/navbar.html