--- title: コピペでできるBootstrap3、簡単レスポンシブ(Grid System)させてみよう【グリッドシステム】 tags: Bootstrap HTML CSS JavaScript author: fgnhssb slide: false --- いま仕事で使ってるけど忘れないように書いておきます。 # コピペでBootstrapとJQuery導入 まずは空HTMLファイル用意して以下コピペしてみましょう。 ```html:index.html タイトルタイトル ``` これでBootstrapとJQueryが導入できました。 必要でしたらローカルにJSとCSSをダウンロードしましょう。 # レスポンシブさせてみる ブラウザ幅判定して要素の位置を変更させてくれるのがレスポンシブです。 まずは**グリッドの列数は12**と覚えましょう。横に12個要素が入りますみたいなイメージです。 グリッドは`
col-md-3
`みたいなやつです。 とりあえず bodyに以下追加してみましょう。 ```html:
ノーパソ3
ノーパソ3
ノーパソ3
ノーパソ3
``` ブラウザの幅広げると横4つグリッド入って一定以下になると縦1列になりますよね。 これにはBootstrapには折り返し地点が決められています。 **Bootstrapの折り返し地点と対応クラス名**
ウインドウ幅デバイスの種類クラス名
0px以上スマートフォンcol-xs-N
768px以上タブレットcol-sm-N
992px以上ノートPCcol-md-N
1200px以上大画面PCcol-lg-N
これを基準に進めていきます。Nの部分に数字入れてclassで指定してあげます。 画像でイメージ出すとこんな感じです。 ![html5app11_13.jpg](https://qiita-image-store.s3.amazonaws.com/0/110510/130a47cf-c996-6669-39b8-18afe6c8935b.jpeg)
先ほどの例だとグリッドのcol-md-3×4で12なので992px以下になると折り返されます。 次にタブレット幅の場合は2つ横にグリッド表示されるよう書き換えてみましょう。 ```html:
タブ6ノーパソ3
タブ6ノーパソ3
タブ6ノーパソ3
タブ6ノーパソ3
``` これで768px以下で横1つ、768~992pxの場合横2つ、992px以上で横4つになります。 こんな感じでレスポンシブ対応ができます。