タグ :

Bootstrapの固定幅レスポンシブデザインのメモ : CSS

投稿日 : 2012年11月2日 | 更新日 : 2012年11月02日 前のページへ戻る

Pocket

Bootstrapで固定幅のレスポンシブデザインを行うメモ。

参考にしたテンプレート
Get started > Examples > Basic marketing siteを参考にする。

  • bootstrap-responsive.cssを追加で読み込む
  • rowクラスとspan1~12クラスでレイアウトする。

span1~12クラスは最大でも足して12にする。

<div class="row">
    <div class="span1">span1</div>
    <div class="span11">span11</div>
</div>

レスポンシブデザインは端末のサイズにより5段階で調整される。

種類 ブラウザサイズ1 固定幅2 span1横幅 span1のgutter幅(margin-left)
Large display 1200px and up 1170px 70px 30px
Default 980px and up 940px 60px 20px
Portrait tablets 768px and above 724px 42px 20px
Phones to tablets 767px and below ブラウザサイズ-403 なりゆき4 なし
Phones 480px and below ブラウザサイズ-40 なりゆき なし

Scaffolding > Responsive desgin > Supported devices

span1~12の幅

ブラウザサイズ span サイズ
Large display span2 span1の幅 × 2 + span1のgutter × 1 = 170
Large display span3 span1の幅 × 3 + span1のgutter × 2 = 270
Large display span4 span1の幅 × 4 + span1のgutter × 3 = 370
Large display span5 470
Large display span6 570
Large display span7 670
Large display span8 770
Large display span9 870
Large display span10 970
Large display span11 1070
Large display span12 1170

» Demo

» Bootstrap


  1. スクロールバーも含む。 
  2. containerクラスの幅。 
  3. span1(~12)はcntainerの横幅いっぱいで1段組になる。 
  4. Large display, Default, Portrait tabletsはbodyの左右余白0, Phones to tablets, Phonesはbodyの左右に20pxのpaddingがつく(containerはブラウザサイズ-40)。 

CSS,Programming | 固定リンク | Comments (0)

このページの上へ移動

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 

 

 


このページの上へ