BomBox

WordPressでのブログ運営のノウハウやWeb開発、IT関連の情報を発信

Bootstrap4に移行しない理由なんてあるの? 新しく追加された便利機能まとめ!

Bootstrap4

BootstrapブートストラップはWeb開発用のデザインフレームワークで、全世界の有名なウェブサイトが採用していることで「Web用フレームワーク」のトップの座を勝ち取りました。

今回はそのBootstrapの最新バージョン「Bootstrap 4」をWebサイトのメインデザインとして使ってみた感想や、コーディングのしやすさなどを綴ろうと思います。

スポンサーリンク

その前に!「なぜBootstrap4は普及しない」?

現在Bootstrapといえば現在のところバージョン3が主流になっています。

Twitter Bootstrap3

現在Bootstrap4がまだAlpha版であることを考慮すると、さほど不思議なことでは無いと思うかもしれません。

しかし、Alpha版であることは、公式が「そろそろ移行した方がいいよー」と言っているようなものです。

Bootstrap
Bootstrap4にあく移行しろよぉぉ!!!!(迫真)

それなのに、移行しない人は多いようです。

なぜなのか?

それは、「Bootstrap3が大ヒットしすぎてインターネット上のBootstrapの資料がバージョン3のもので溢れかえっている」からです。裏を返せば、Bootstrap4の資料を集めにくい、ということにつながります。

今後自分はできるだけ多くBootstrap4の情報を更新していこうと思っています。なぜなら、Bootstrap4を普及させ、より多くの人に最新バージョンを使う楽しさを味わって欲しいからです。

今回の記事をキッカケに、ぜひBootstrap4を試してみてください。

Bootstrap4のCDN (簡単セットアップ)

こちらのソースをheadタグ内に記述してください。コピペでOKです。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

 Bootstrap4で追加された新たな機能

全部で5つほどの変更点があります。このあたりはBootstrap3→Bootstrap4にするのか、それとも元々Bootstrap4で最初からコーディングをするのかで作業量は大きく変わってきます。

グリッドの改善・新コンポーネント

グリッドシステムの改善

Bootstrap 3では4つだったブレークポイントが5つに増え、
新たに544pxでの指定が行えるようになりました。

(省略)

これによって例えばiPhone 5, 6のポートレート/ランドスケープ時に、
それぞれ表示を切り替えることができるので、
より柔軟にモバイル最適化が行えるようになりました。

グリッドシステムがよりわかりやすくなりました。さらに、「Panel」「Well」「Thumbnail」のコンポーネントが「カード」に統合されました。

新コンポーネント「Cards」の登場

wells, thumbnails, panelsの3つのコンポーネントが廃止となり、
cardsという新しいコンポーネントに統合されました。

サムネール(画像)やタイトル、リンクなどもcardsの中に内包できるので、
今後はいわゆるグリッドの中にコンテンツを入れるような場合は、
このcardsコンポーネントを利用すればよさそうです。

今どきのトレンドを取り入れて、画像の上にテキストをオーバーレイするような見せ方や、
Pinterest風のレイアウトも実現できるようです。

Qiitaの記事より引用

このCardsは自分、ものすごくお気に入りです。イマドキのUIを簡単に作ることができるからです。

ナビゲーションバーのデザイン変更

Bootstrap3とBootstrap4のナビゲーションバーでは多少デザインが異なります。

Bootstrap3 ナビゲーションバー

Bootstrap3でのスマホ表示のナビ

Bootstrap3ではハンバーガーメニューが右にあり、<a class="navbar-brand">を書くことで簡単にロゴ、及びロゴ画像を挿入することができました。

しかしBootstrap4からはというと…

Bootstrap4 ナビゲーションバー

Bootstrap4ではなんと、ロゴの部分がバー上に無い!!

あっ、あれ?

おかしいぞ…navbar-brandを付与するとナビゲーションバーを開いたときの下のエリアにロゴが表示される (この画像では"Navbar"というテキストがnavbar-brandにあたります)。

いろいろ試行錯誤してみたものの、ダメでした。

悩んでいたときに、ぽかーっとBootstrap4の公式サイトを見ていると…

Bootstrap4 公式サイト

ちゃんとロゴが入っている!!

ちゃんと入っています。あれれ…と思いつつ、一応HTMLのソース載せておきます。

理由が解明できたらまた記事にしようと思いますので、そのときはぜひ見てくださればと思います\( 'ω')/

<nav>

<div class="clearfix">
<button class="navbar-toggler float-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand hidden-sm-up" href="/">
Bootstrap
</a>
</div>


<div class="collapse navbar-toggleable-xs" id="bd-main-nav">

<ul class="nav navbar-nav">

<li class="nav-item active">
<a class="nav-item nav-link active" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
</li>


<li class="nav-item">
<a class="nav-item nav-link " href="/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
</li>


<li class="nav-item">
<a class="nav-item nav-link " href="/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>


<li class="nav-item">
<a class="nav-item nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">Themes</a>
</li>


<li class="nav-item">
<a class="nav-item nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
</li>


<li class="nav-item">
<a class="nav-item nav-link" href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
</li>

</ul>

</div>

</nav>

 btn-primaryボタンの色が変わった

Bootstrapで最も多く使われてきた(?)ボタンカラーであるbtn-primaryのカラーコードか変更されました。Bootstrap3では深い青色だったものが、Bootstrap4では明るい青色に変更されています。Windows10を連想させるような色ですね…。

Bootstrap4 btn-primary

個人的にはこっちの色の方が好きですし、使いやすいです。前の色は少し古くさい感じがして使うことに抵抗があったので助かります。

まとめ

自分はWebデザインフレームワークの世界一はBootstrapだと思っています。GoogleのMaterialやその他の派生のものもありますが、ユーザビリティを十分考慮されていて、コーディングする側の立場のことも配慮されていることから、Bootstrapを開発したTwitterには本当に感謝しています。

今後この記事は随時更新してゆく可能性があります。また、1つ1つのコンポーネントのために新たに記事を書くかもしれません。そのときはこの記事の下あたりにBootstrap4関連の記事のリンクを全て貼っておくので、「公式ドキュメントのここがわからない!」という時には活用してみてください。ではまた〜((꜆꜄ ՞ټ՞ )꜆꜄꜆

Web開発が大好きです。主にHTML+CSS、Bootstrapを使っています。仮想通貨関連も最近はいじくりまわしている。

-Bootstrap