Bootstrap4が正式リリースした

2018年あけおめムードも落ち着いて来た頃、つい先日(2018/01/18)にBootstrap4が正式リリースの声明を発表した。

・ありがたいお言葉
https://blog.getbootstrap.com/2018/01/18/bootstrap-4/

全然盛り上がってない気がしてウケた

今やマテリアルデザインのCSSフレームワークなんて充実しまくってるし、選択肢はいくらでもあるし、今更Bootstrapなんて選ぶかよって感じですよ。
正直、筆者も永遠にBeta版なのかと思ってちっとも触ってなかった。
もっと言うとv4 alphaを取り込んでるサイトもちょいちょいあるし、だったら3.3.7でいいよねって思ってた。
中途半端に「マテリアルデザインっぽくしました！」感も否めないし、、、。

しかしこの度、満を持して(持すぎ)stableリリースしたので試してみた。
なんといっても5年ぶりのメジャーアップデートらしい。光陰矢の如し。
さぞナイスなライブラリに違いない。

試した

3系と比較して、良いなと思った機能を盛り込んだデモページを作った。

・Bootstrap4 かわいい説
https://suguruguruguru.github.io/bootstrap4-experience/
独自style、CSSなしで、HTMLとBootstrapのみで作成。

思ったより良かった

上記デモページでもいくつか挙げているが、個人的に特に良かったところをまとめる。
そもそも3と比較してもほとんど使い方は変わらないので、戸惑うことなくサクサク作れたのも好き。

・カードのコンポーネント追加

今更感ある。でも純粋に使いやすくて良かった。前はこれが欲しいがためにMaterializeとか入れてた。

・Flexbox対応

従来のグリッドシステムもわかりやすくて好きだけど、
row > col-3, col-3, col-6みたいなdiv構造作らんでも良い感じに整列できる。

・Style制御のクラスができた

個人的にこれが一番好き。以下のように"{頭文字}-{value}"の書き方で細かいstyle指定ができる。
Bootstrapに限らず、共通のマージン取るクラスとかをいちいち独自で作っていたのでこれは強力。

display

class	適用されるstyle
d-none	display: none
d-inline	display: inline
d-inline-block	display: inline-block
d-block	display: block
d-table	display: table
d-table-cell	display: table-cell
d-table-row	display: table-row
d-flex	display: flex
d-inline-flex	display: inline-flex

width,height

数値は25,50,75,100で指定。
以下はその組み合わせ例。

class	適用されるstyle
w-25	width: 25%
h-100	height: 100%
mh-100	max-height: 100%

margin,padding

数値は0～5で指定。
mがマージン、pがパディングで、2文字目にt、b、xなんかでtop,bottom,両端なんかの指定をできる。
以下は組み合わせ例。

class	適用されるstyle
p-2	padding: 0.5rem
py-5	padding-top: 3rem padding-bottom: 3rem
mt-0	margin-top: 0
mx-4	margin-right: 1.5rem margin-left: 1.5rem

ワンチャンあるっしょ

物足りない点も含めて、以下が総括。

カードがあるならトーストとかDatepickerとかも欲しかった。スイッチもない。また有志の拡張探して、検証してみて、良ければ導入、ちょっと微妙なら別のを探して…って結構面倒くさい。5年もあったんだし、”とりあえずこれ入れておけばOK”的な広辞苑CSSライブラリにしてほしかった…。
現世に蔓延しすぎていて毛嫌いされつつある「Bootstrapっぽさ」は相変わらずだけど、ボタンや色のクラスはカスタマイズすれば良いよね。そうだよね。Sassもあるしね…。
前項で最後に述べたスタイル指定クラスが個人的に超ありがたみ案件。もう要素ごとのスペーシングのstyleなんて書きたくないよ。

というわけで、~~本当に盛り上がっていない気がする~~Bootstrap4ですが、もともとめちゃくちゃ使ってた思い出補正も相まって結構好きでした。
今回のリリースを機に、皆様是非一度お手にとってはいかがでしょうか。

3系からも移行しやすいはず。

(2018/02/01 15:36追記)
移行しやすいとか書いておいて、もう一個そこそこ大事な変更点あった。

アイコン(glyphicon)がデフォルトでくっついて来なくなってオンデマンドになりました。
公式が推奨しているものは下記2つ。

・Iconic
https://useiconic.com/open/

・Octicons
https://octicons.github.com/

~~なんとかポジティブに考えて良い意味で言えば~~選択肢が増えてよかった

(2018/02/01 18:19追記)

@error_401 さんよりご指摘頂きました。
https://stackoverflow.com/questions/42095977/bootstrap-card-image-distorted-in-internet-explorer
カードコンポーネントに関して、IEやれEdgeやれで画像に対するheight:autoが効かないバグがBeta時代からあるようです。
IE11で画像のアス比がおかしくなっているのを確認しました。

(2019/06/27 なんでか一年半ぶりに追記)

v4.2.1でトーストとスピナー追加されてんじゃん

引くほどオシャレなトーストはこちら

逆になんで今までなかったの。
相変わらす階層ゴリゴリのHTMLだけど、やたら見た目が可愛くてアゲ

引くほど普通なスピナーはこちら

まあ非同期処理is当たり前な時代だし

あとこれらのコンポーネント以外だとUtilityクラスがこまごま追加されてます。
.font-weight-lighter、.font-weight-bolder、.text-decoration-none あたりはクラス名通りのスタイルが適用される。割と使いそうで良い
詳細は公式のありがたいお言葉を参照のこと。

v4.3.0も出てんじゃん

ストレッチリンクとかモーダル内スクロールとか、少しだけ痒いところに手が届きそうなもの。
~~取り上げるに足らないので~~詳細は公式のありがたいお言葉を参照のこと。

Bootstrap 4が全然盛り上がってないから試した → 思ったより良かった