Webishブログ

未経験から海外でweb開発を目標に、必死に勉強している人のブログ

Bootstrap4になってる!

スポンサードリンク

僕がwebの勉強を始めた時に、初めて触ったフレームワークがBootstrapでした。

 

当時によく使われているのはBootstrap3でした。

 

勉強を始めた当時の感想としては

 

「こんな便利なものがこの世にあったのか!いやない(実はあった)」

 

といった感じでした。

 

Bootstrapを僕に教えてくれた方がいたのですが

 

「Bootstrap一つとっても、完璧にするだけで全然違う。Bootstrapを完璧に使えるようになるだけでエンジニアとしてやっていける」

 

といつも言っていました。

 

その、Bootstrapが4になったと言うことでめちゃくちゃ嬉しいと同時に、また新しい事を学ぶ事になるのか〜という大変さを感じます。

 

さて、今回新しいBootstrapになった事ですが

 

どう言うところが追加されたのか というところですよね。

 

全部を網羅できませんが、注目したい機能を見てみようと思います。

 

 

 

 

カラム数

 

Bootstrap3ではカラム数が4つでした。(xs, sm, md, lg)

 

しかし、Bootstrap4にはそこに、lgの次のxlが追加されたそうです。

 

たしかに、僕もMacのデスクトップを使っている時、ノートパソコンレベルのページで開いた場合、lgでもずれてしまう事があったので、それが解消できるのではないかな〜と思います。

 

これは嬉しい人も多いと思います。

 

Cardsクラス

 

このクラスの登場によって、panelやthumbnailsクラスが無くなったみたいです。

 

というより、同じような事がCardsクラスでできるようになったという感じでしょうか

 

いずれにしても、スッキリとしたデザインのbootstrapらしいものが出来上がります。

 

ちなみに、cardsの中にはヘッダーとフッターをつける事ができるそうです。

 

使い方としては

 

<div class="cards"></div>

 

で囲って

 

<div class="card-header"></div>

 

のようにする事で、cardボックスができるみたいです。

 

<div class="cards">

    <div class="card-header">

    ヘッダー

    </div>

    <div class="card-block">

    ボディ内の見出し

    </div>

    <div class="card-text">

    テキストエリア

    </div>

    <div class="card-footer">

    フッター

    </div>

</div>

 

 

このような感じになるのでしょうか。

 

cardの登場によって、楽になった所が多くなったような気がします!

 

 

タイポグラフィ

 

px指定からremに変更になりました。

 

これまでのbootstrapと同じように使えばそこまで気にする事もないと思うのですが

 

h1のクラスを入れた際の大きさが32pxから2.5remという感じになったようです。

 

大きさ的には変わらないのですが、これでHTML内で大きさの変更ができるようになったようです。

 

<p class="h1"></p>

 

のように使うようです。

 

 

これらが主にBootstrap4での変更点で、まだまだいくつか変更されていますが、個人的に注目すべきところだけをピックアップしてみました! 

 

Bootstrapは個人的にも好きなので、もっと勉強していきたいですね!