Bootstrapを使ったレスポンシブを確認


Bootstrapのテスト、現在(2017/2/21)のバージョンは 3.3.8
まずは、CDNを使う。
https://www.bootstrapcdn.com/

レスポンシブな感じにしてみる。

実際にメディアクエリを見てみると、

 

それぞれ、クラス名が、

  • .col-xs-
  • .col-sm-
  • .col-md-
  • .col-lg-

4つに分かれているらしい。
基本構造は「col-グリッドサイズ-カラム数」で合計12。
早速基本の配置をしてみる。

デモ:

続けて携帯用のハンバーガーメニューを出してみる。

 

 

Follow me!

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA