Help us understand the problem. What is going on with this article?

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

Bootstrap4が正式リリースした:hugging:

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

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

・公式
https://getbootstrap.com/

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

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

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

試した:hugging:

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

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

思ったより良かった:hugging:

上記デモページでもいくつか挙げているが、個人的に特に良かったところをまとめる。
そもそも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

ワンチャンあるっしょ:hugging:

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

  • カードがあるならトーストとか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/

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


(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でトーストとスピナー追加されてんじゃん:hugging:

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

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

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

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

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

v4.3.0も出てんじゃん:hugging:

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


:thinking:書いた人のTwitter:thinking:

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away