Bootstrap4 betaの使い方

Posted on by ore_new
Bootstrap

グリッド

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にしたりするものでした。

hiddenについて

d-*-none
あるいは
d-*-block
とすることで、ブレークポイントによってhiddenになったり、blockになったりする。
「*」にはsmやxsに対応するものがはいってくる。
.d-none d-sm-block
とすることで、スマホサイズのみ消すことができるし、
.d-none d-md-block
とすることでタブレット端末以上での表示が可能になる。

body直前に入れるjs

これだけ。
あと、基本的なところでいつもとちるのがjQueryより後にskipper.jsを読み込ませること。