最近になって、よ～やく「Bootstrap4」を把握しました。
いつまでも旧バージョンの「Bootstrap3」にしがみついてるわけにもいかず、重い腰を上げて最新版「4.1」の解説本を購入して勉強しました。
で、早速にサンプルサイトなどもBootstrap4で作ってみました。
「Bootstrap4」は「3」に比べると、大まかに以下のような特徴があります。
1，ブレークポイントの変更
2，長さの単位がpxからremへ
3，フレックスボックスに対応
ここらへんは他のブログにも散々書かれていることなので、当ブログではあえて解説しません。
今回は私が「Bootstrap4」を学んで、こいつは地味に便利だな～と感じた3つのクラス指定について書きます。
行揃えの指定
まず、行揃えを指定するクラスです。
行揃えのクラスに関しては、
Bootstrap3では
text-center・・中央揃え
text-left・・左揃え
text-right・・右揃え
text-justify・・両端揃え
text-nowrap・・折り返さずに配置
などがありました。
Bootstrap4では、これに加えて
レスポンシブ対応の行揃えが可能となりました。
基本形としては、
text-(添字)-(方向)
この「添字」の部分に
「sm」や「md」などの画面サイズの指定が入ります。
たとえば、ある要素のクラスに
「text-center text-md-left」と指定すると、
◇画面サイズ768px未満は中央揃え
◇画面サイズ768以上では左揃え
となります。
幅や高さを指定するクラス
Bootstrap4では、幅や高さを指定するクラスとして、以下のものが用意されました。
幅を指定するクラス）
w-25・・width:25%
w-50・・width:50%
w-75・・width:75%
w-100・・width:100%
mw-100・・max-width:100%
w-auto・・width:auto
高さを指定するクラス）
h-25・・height:25%
h-50・・height:50%
h-75・・height:75%
h-100・・height:100%
mh-100・・max-height:100%
h-auto・・max-height:auto
余白の指定
paddingとmarginを指定するクラスです。
以下のパターンになります。
p(方向)-(添字)-(数値) ・・paddingの指定
m(方向)-(添字)-(数値) ・・marginの指定
方向）
t ・・上
r ・・右
b ・・下
l ・・左
x ・・左右
y ・・上下
なし ・・上下左右
添字）
なし・・画面サイズ0px～
sm・・画面サイズ576px～
md・・画面サイズ768px～
lg・・画面サイズ992px～
xl・・画面サイズ1200px～
数値）
0・・0
1・・0.25rem
2・・0.5rem
3・・1rem
4・・1.5rem
5・・3rem
auto・・auto
たとえばクラス「pb-4」は
「padding-bottom:1.5rem」という意味です。
クラス「mx-3 mx-sm-5」は
◇画面サイズ576px未満は
「margin-left:1rem margin-right:1rem」
◇画面サイズ576px以上は
「margin-left:3rem margin-right:3rem」
という意味になります。
