グリッド
xl 大画面モニター
|
1200px〜
|
lg ノート
|
992px〜
|
md タブレット
|
768px〜
|
sm ファブレット
|
576px〜
|
スマホ
|
576未満
|
一番注目すべき点は576未満が追加されたこと。そして今までcol-xs-12と書いてきたがcol-12と記述するようになった。
スポンサードリンク
BootStrapヘルパークラス
4ではvisibleはなくなったので要注意。
hiddenクラスの使い方が変わった。
画像のレスポンシブ化
.img-responsiveの代わりに.img-fluidを使用する
ブロック要素をセンターにする。
< div class = “mx-auto”>
</ div >
divにwidthを与えてやればセンターになる
Flex boxを起動させる
以下のクラスを適用させる
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
例えば
<div class=”d-sm-flex”>
</div>
とすると576px〜767pxでflexが有効になる
レスポンシブスライダー skipperの使い方 応用
よく使っている横いっぱいスライダーのskipper。
今回の案件であんまりやりたくないけどPCとSPのスライダーの表示を切り替える事例が発生しました。
まあ、簡単なんだけど以下のようにしました。Bootstrap4で表示の制御をして、theTargetのIDを変更して、最後に貼り付けるJSをそれにあわせてこちらも変更するだけです。外側のDivは高さを決めるものです。
見本で使用されているhidden-md-upはbetaでは廃止されました。これはブレークポイントに応じて、blockにしたりhiddenにしたりするものでした。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="hidden-sm-down" id="slider_01"> <div class="hidden-sm-down" id="theTarget_PC"> <div style="background-image: url(img/main_top01.jpg);"></div> <div style="background-image: url(img/main_top02.jpg);"></div> <div style="background-image: url(img/main_top03.jpg);"></div> <div style="background-image: url(img/main_top04.jpg);"></div> </div> </div> <div class="hidden-md-up" id="slider_02"> <div class="hidden-md-up" id="theTarget_SP"> <div style="background-image: url(img/main_top01@2x.jpg);"></div> <div style="background-image: url(img/main_top02@2x.jpg);"></div> <div style="background-image: url(img/main_top01@2x.jpg);"></div> <div style="background-image: url(img/main_top02@2x.jpg);"></div> </div> </div> |
hiddenについて
d-*-none
あるいは
d-*-block
とすることで、ブレークポイントによってhiddenになったり、blockになったりする。
「*」にはsmやxsに対応するものがはいってくる。
.d-none d-sm-block
とすることで、スマホサイズのみ消すことができるし、
.d-none d-md-block
とすることでタブレット端末以上での表示が可能になる。
body直前に入れるjs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function () { $("#theTarget_PC").skippr(); }); </script> <script> $(document).ready(function () { $("#theTarget_SP").skippr(); }); </script> |
これだけ。
あと、基本的なところでいつもとちるのがjQueryより後にskipper.jsを読み込ませること。