最近再び「Bootstrap」を触っているんですが、「Bootstrap」が「Bootstrap4」に進化していたんですよね。
そしたら、いろいろやらかしました。
個人的な備忘録として残しておきます。
「col-xs」は使えない
私はいつも通り、「col-xs」を使っていたんですよね。
そしたら、なんだか利かないわけです。
あれー？おかしいな・・・と思いつつも、独自でクラス付けたりしてやりくりしていたわけです。
しかし、あまりにもうまく動かないので、なんかインポートとかの設定間違ってるのかなーと思って調べたら、衝撃の事実が発覚しました。
なんと、「Bootstrap4」から「col-xs」なくなったんですって。
・・・え？
はっはっはっ
道理で利かないわけです。
「xs」いらないそうですよ。
例：「col-xs-6」→「col-6」
でいいそうです。
早く言ってよ・・・
margin、paddingクラスが追加
なんと、margin、paddingクラスが追加されました。
ちょっとした位置の調整なんかに非常に便利なんですよね。
これに気付かず、独自クラスを設定してちまちまやっていたので、知ったときはたまらぬショックでしたね。
広さが1～5で調整できるので、割と柔軟にいけます。
個人的に4→5の変化率大きすぎると思うので、そこは調整が必要かもですね。
書き方はこんな感じです。
例：ml-4
marginは「ｍ」、paddingは「ｐ」を付けて、上下左右のオプションを下記の形で追加します。
上：t
下：b
右：r
左：l
上下：y
左右：x
つまり、「ml-4」は「margin-left」を4の大きさでつけます、ということですね。
下記のサイトが詳しいのでぜひご覧くださいな。
https://webnetamemo.com/coding/bootstrap4/201710065870#margin
独自クラスを付ける前に調べよう
これで最後ですが、本当にこれ大事です。
独自クラスを付ける前に、本当にやりたいことが「Bootstrap4」のクラスでできないかを調べることをおすすめします。
公式ドキュメント：https://getbootstrap.com/docs/4.2/components/alerts/
「Bootstrap4」は本当にクラスの数も豊富で、大体のクラスがデフォルトで用意されています。
特殊なことをやらない限り、用意されているクラスで事足りることがほとんどです。
なので、いったん調べてから実装することをおすすめします。
私は最初のほうすぐに独自でクラスを付けて調整をしてしまったので、かなりカオスになってしまいました。
これを整理するのはしんどいなー嫌だなーと思いながら日々過ごしております。
きちんと「Bootstrap4」で用意されているクラスを活用し始めた後半のコーディングは非常にシンプルで視認性が高いかつ、調整をしやすい形になっています。
なぜならクラスを見ただけでどういう調整をしたかがわかるからです。
いちいちCSS見に行かなくていいですからね。
なので、なるべく独自クラスをつけずにやり過ごす方法を探されることをおすすめします。
独自でバリバリ書くぜー！って方は、独自優先で最後まで行かれるとよいかもですね！
まとめ
まー色々と書いてきましたが、結局何が言いたかったかというと、
「Bootstrap」って便利
ってことです。
使い慣れるまでは本当に微調整きかなくてめんどいなーと思っていたのですが、慣れてきてからは様様状態であります。
何ごとも慣れって大事ですよね。
個人的に一番ありがたいのは、デザインテンプレートがたくさん用意されているところですね。
このようなサイトでよさげなデザインを探してカスタマイズすれば、すぐにそれなりの画面ができてしまいます。
私のようにセンスのない人間にとっては本当にありがたいなと思ったのでした。