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

Header

!!!グリッドレイアウト !!ビューポート *ピクセル幅により、次に4種類に分類 ++Extra small(-768px) ++Small(768 - 992px) ++Medium(992 - 1200px) ++Large(1200px -) !!コンテナ *Bootstrap3では、コンテンツ全体を
でくくる使い方を想定している *これにより、デフォルトのマージンが確保される !!段組 !基本クラス *col-xs-n コンテナの12分のn(1〜12) の幅を占める *ネストさせることも可能 ::2段組み
1
2
!空きを作る *オフセットを指定し、指定した幅だけ枠を開けることができる
test
!列を入れ替える *col-xs-push-XX,col-xs-pull-XX を利用(XXは1〜12)する
test1
test2
!ブラウザの幅に応じて段組を変える ,接頭辞,意味 ,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