新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ
Post on:2018年1月30日
sponsors
2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。
Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。
※pxはメディアクエリとグリッドのみ。
新しくなった、そして改訂された、Bootstrap 4の基本テンプレート、ナビゲーション、コンポーネントを紹介します。
Bootstrap 4の基本テンプレート
まずは、Bootstrap 4の基本となるテンプレートから。ナビゲーションやコンポーネントを使用する際のベースにもなります。
最もシンプルなテンプレート。
新しくページを作成する時に、基本となるテンプレートです。
Bootstrap 4で利用できるグリッドのテンプレート。
ブレイクポイントは、下記のように設定されています。
|
1 2 3 4 5 6 7 8 9 10 11 |
// Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } |
ナビゲーションバーと基本的なグリッドで構成されたテンプレート。ジャンボトロンと呼ばれる大きな吹き出しと3つのコンテンツが用意されています。
Bootstrap 4のナビゲーションバーのテンプレート
デフォルトのナビゲーションバーと配置例、拡張用のテンプレートです。
デフォルトのナビゲーションバー。ナビゲーションは大きく分けて2タイプあり、1つはビューポートいっぱいの幅、もう1つはコンテンツエリア内に幅が限定されます。
静的なナビゲーションバーのテンプレート。上部に配置されています。
スクロールしても固定表示されるナビゲーションバーのテンプレート。
ページの最下部に配置されるナビゲーションバーのテンプレート。コンテンツが少なくても最下部に配置されます。
Bootstrap 4のコンポーネントのテンプレート
Bootstrap 4では、Webページやスマホアプリでよく見かけるコンポーネントもたくさん用意されています。
写真ギャラリーやポートフォリオでよく見かける縦長ページ用のテンプレート。今までのものとは異なり、スマホでのレンダリングを改善するよう設計されています。
新しいコンポーネントで、カードとユーティリティで実装された価格一覧のテンプレート。カスタマイズにも優れており、レスポンシブ対応です。
Bootstrap 4で実装された新しいフォームのテンプレートで、お支払い用の入力項目と検証機能が実装されています。グリッドも新しいものが利用されており、スマホ時のフォームとしても優れたデザインです。
これも新しいコンポーネントで、プロダクトの紹介に特化されたAppleスタイルのテンプレートです。
シンプルで美しいページを構築するための縦長ページ用のテンプレート。
上部にカルーセルを備えたテンプレートで、新しいコンポーネントがいくつか追加されています。
マガジンスタイルのブログ用のテンプレート。ヘッダ・ナビゲーション・フィーチャーコンテンツが用意されています。
固定のサイドバーを備えた管理画面の基本テンプレート。サイドバーのアイテムにはアイコンが添えられており、グラフはChartJSで実装されています。
サインインのシンプルなテンプレート。フォームの項目やデザインなどのカスタマイズも簡単です。
フッタを最下部に固定表示するテンプレート。コンテンツが少ない場合でも最下部に配置されます。
Bootstrap 4 Sticky footer with fixed navbar
上記のSticky footerに、固定のナビゲーションバーを加えたテンプレート。スクロールしても、常にナビゲーションバーとフッタは表示されます。
Bootstrap 4の実験的なテンプレート
実験的なテンプレートでは、ユーザフレンドリーを考慮した新機能を楽しむことができます。
※実験的なもののため、正式版で変更されることがあります。
入力時にラベルがフロートするフォームのテンプレート。フロートはCSSのみで実装されています。
ナビゲーションバーをオフキャンバスにするテンプレート。スマホ時にナビゲーションは横から引き出すようにアニメーションで表示されます。
sponsors
