Bootstrapのメモ part1
朝夜が寒くなってきました。
末端冷え性に辛い季節が始まりますね。。。
Bootstrapを使い始めたのでそのメモを
今回はレイアウト関連
Bootstrap
そもそもBootstrapとは
Bootstrapはwebアプリケーションを作成するフロントエンドフレームワーク
#wikipedia 参照
デザインなどがとてもいい感じになるフレームワークです
対応言語
HTML,CSS,Javascript
できること
色々ある
- レスポンシブデザイン
- ドロップダウン
- ボタン
- などなど
使用前の準備
<¥--Bootstrap CDNを用いるとき-->
head部に以下の記述をする
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
また、Javascriptに関してはbody部に以下を読みこむ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
色々できることがあるのでまずはレスポンシブデザインに関わるところからやる
グリッドシステム(grid system)
グリッドシステムとは
Bootstrapに用意されているシステム
ディスプレイに応じて表示領域の調整を行うことができる
使用する前の準備
グリッドシステムを適応したいところをclass="row"で囲む
グリッドシステムの仕様
イメージとしてはこういう感じ
画面全体を12として分割してレイアウトすることができます
これをカラムごとにいくつの領域を使うか指定してレイアウトすることで画面サイズが変わっても対応できるようになっています。
グリッドシステムの使い方
分割したいコードをrow内でさらにカラムとして扱います
class="col-XX-YY"にまとめます
XX内には以下の内容を記述します
- xs:モバイル向け ~767px
- sm:タブレット向け 768~991px
- md:デスクトップ向け 992~1199px
- lg:デスクトップ(ワイド)向け 1200px~
これはディスプレイサイズに応じて画面の分割を変更するときにわけて書きます
YY内には以下の内容を記述します
1~12(11)の数字:画面全体の中のどれだけの幅を用いるかを数字で示します。横並びにするときは並べたいコンテンツを合計12になるように分割します。
------------参考文献---------------
