.acms-containerで囲うと幅940px中央揃えに変わります。ブロックをレイアウトするために使います。合計12カラムで計算します。
※Ver.1.0.1ではacms-grid
とacms-grid-r
でレスポンシブ対応にするか分けていましたが、Ver.1.1.0からはacms-col-
のクラス名の指定の仕方で管理できるように変更しました。従来のacms-grid
(レスポンシブ対応しないようにするクラス)を使う場合は、acms-col-
クラスをお使いください。
<div class="acms-container"> <div class="acms-grid"> <div class="acms-col-5"> ... </div> <div class="acms-col-7"> ... </div> </div> </div>
<div class="acms-container"> <div class="acms-grid-r"> <div class="acms-col-md-5"> ... </div> <div class="acms-col-md-7"> ... </div> </div> </div>
<div class="acms-container"> <div class="acms-grid-r"> <div class="acms-col-md-7 acms-col-sm-6"> ... </div> <div class="acms-col-md-5 acms-col-sm-6"> ... </div> </div> <div class="acms-grid-r"> <div class="acms-col-md-7 acms-col-sm-6 acms-col-lg-4"> ... </div> <div class="acms-col-md-5 acms-col-sm-6 acms-col-lg-8"> ... </div> </div> <div class="acms-grid-r"> <div class="acms-col-md-7 acms-col-sm-6 acms-col-lg-4 acms-col-xl-8"> ... </div> <div class="acms-col-md-5 acms-col-sm-6 acms-col-lg-8 acms-col-xl-4"> ... </div> </div> </div>
クラス名 | デフォルトのブレイクポイント |
---|---|
acms-col- | 全て |
acms-col-sm- | 480px以上〜 |
acms-col-md- | 768px以上〜 |
acms-col-lg- | 1024px以上〜 |
acms-col-xl- | 1440px以上〜 |
<div class="acms-grid"> <div class="acms-col-md-4"> ... </div> <div class="acms-col-md-8"> <div class="acms-grid"> <div class="acms-col-md-5"> ... </div> <div class="acms-col-md-7"> ... </div> </div> </div> </div>
.acms-push-5にするとグリッドが右側にきて、.acms-pull-7にするとグリッドが左側にきます。
<div class="acms-grid"> <div class="acms-col-md-7 acms-push-md-5"> ... </div> <div class="acms-col-md-5 acms-pull-md-7"> ... </div> </div>
タブレット幅のときに.acms-push-md-5にするとグリッドが右側にきて、.acms-pull-md-7にするとグリッドが左側にきます。
<div class="acms-grid-r"> <div class="acms-col-md-7 acms-push-md-5"> ... </div> <div class="acms-col-md-5 acms-pull-md-7"> ... </div> </div>
スマートフォンの幅のときに.acms-push-sm-5にするとグリッドが右側にきて、.acms-pull-sm-7にするとグリッドが左側にきます。
<div class="acms-grid-r"> <div class="acms-col-sm-7 acms-push-sm-5"> ... </div> <div class="acms-col-sm-5 acms-pull-sm-7"> ... </div> </div>
タブレット幅のときにpush、pullを解除する
<div class="acms-grid-r"> <div class="acms-push-5 acms-col-md-7 acms-push-md-auto"> ... </div> <div class="acms-pull-7 acms-col-md-5 acms-pull-md-auto"> ... </div> </div>
スマートフォン幅のときにpush、pullを解除する
<div class="acms-grid-r"> <div class="acms-push-5 acms-col-md-7 acms-push-md-5 acms-col-sm-7 acms-push-sm-auto"> ... </div> <div class="acms-pull-7 acms-col-md-5 acms-pull-md-7 acms-col-sm-5 acms-pull-sm-auto"> ... </div> </div>