BomBoxBomBoxWordPressとかマイニングの情報をまとめます。iconBootstrapブートストラップはWeb開発用のデザインフレームワークで、全世界の有名なウェブサイトが採用していることで「Web用フレームワーク」のトップの座を勝ち取りました。4」をWebサイトのメインデザインとして使ってみた感想や、コーディングのしやすさなどを綴ろうと思います。その前に!「なぜBootstrap4は普及しない」?現在Bootstrapといえば現在のところバージョン3が主流になっています。現在Bootstrap4がまだAlpha版であることを考慮すると、さほど不思議なことでは無いと思うかもしれません。Alpha版であることは、公式が「そろそろ移行した方がいいよー」と言っているようなものです。BootstrapBootstrap4にあく移行しろよぉぉ!!!!(迫真)それなのに、移行しない人は多いようです。?それは、「Bootstrap3が大ヒットしすぎてインターネット上のBootstrapの資料がバージョン3のもので溢れかえっている」からです。裏を返せば、Bootstrap4の資料を集めにくい、ということにつながります。今後自分はできるだけ多くBootstrap4の情報を更新していこうと思っています。Bootstrap4を普及させ、より多くの人に最新バージョンを使う楽しさを味わって欲しいからです。今回の記事をキッカケに、ぜひBootstrap4を試してみてください。(簡単セットアップ)こちらのソースをheadタグ内に記述してください。全部で5つほどの変更点があります。このあたりはBootstrap3→Bootstrap4にするのか、それとも元々Bootstrap4で最初からコーディングをするのかで作業量は大きく変わってきます。新たに544pxでの指定が行えるようになりました。6のポートレート/ランドスケープ時に、それぞれ表示を切り替えることができるので、より柔軟にモバイル最適化が行えるようになりました。グリッドシステムがよりわかりやすくなりました。「Panel」「Well」「Thumbnail」のコンポーネントが「カード」に統合されました。panelsの3つのコンポーネントが廃止となり、cardsという新しいコンポーネントに統合されました。今後はいわゆるグリッドの中にコンテンツを入れるような場合は、このcardsコンポーネントを利用すればよさそうです。今どきのトレンドを取り入れて、画像の上にテキストをオーバーレイするような見せ方や、Pinterest風のレイアウトも実現できるようです。Qiitaの記事より引用このCardsは自分、ものすごくお気に入りです。イマドキのUIを簡単に作ることができるからです。ナビゲーションバーのデザイン変更Bootstrap3とBootstrap4のナビゲーションバーでは多少デザインが異なります。class=”navbar-brand”>を書くことで簡単にロゴ、及びロゴ画像を挿入することができました。(この画像では”Navbar”というテキストがnavbar-brandにあたります)。試行錯誤してみたものの、ダメでした。悩んでいたときに、ぽかーっとBootstrap4の公式サイトを見ていると...ちゃんとロゴが入っている!!ちゃんと入っています。あれれ...と思いつつ、一応HTMLのソース載せておきます。'Blog');">Blog</a></li></ul></div></nav>btn-primaryボタンの色が変わったBootstrapで最も多く使われてきた(?)ボタンカラーであるbtn-primaryのカラーコードか変更されました。Bootstrap3では深い青色だったものが、Bootstrap4では明るい青色に変更されています。Windows10を連想させるような色ですね...。個人的にはこっちの色の方が好きですし、使いやすいです。前の色は少し古くさい感じがして使うことに抵抗があったので助かります。まとめ自分はWebデザインフレームワークの世界一はBootstrapだと思っています。GoogleのMaterialやその他の派生のものもありますが、ユーザビリティを十分考慮されていて、コーディングする側の立場のことも配慮されていることから、Bootstrapを開発したTwitterには本当に感謝しています。今後この記事は随時更新してゆく可能性があります。1つ1つのコンポーネントのために新たに記事を書くかもしれません。そのときはこの記事の下あたりにBootstrap4関連の記事のリンクを全て貼っておくので、「公式ドキュメントのここがわからない!」という時には活用してみてください。)꜆꜄꜆ヨッシーWeb開発が大好きです。HTML+CSS、Bootstrapを使っています。仮想通貨関連も最近はいじくりまわしている。見つかりませんでした。