新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ

2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。
Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。
※pxはメディアクエリとグリッドのみ。

新しくなった、そして改訂された、Bootstrap 4の基本テンプレート、ナビゲーション、コンポーネントを紹介します。

サイトのキャプチャ

Bootstrap

Bootstrap 4の基本テンプレート

まずは、Bootstrap 4の基本となるテンプレートから。ナビゲーションやコンポーネントを使用する際のベースにもなります。

テンプレートのキャプチャ

Bootstrap 4 Starter Template

最もシンプルなテンプレート。
新しくページを作成する時に、基本となるテンプレートです。

テンプレートのキャプチャ

Bootstrap 4 Grid

Bootstrap 4で利用できるグリッドのテンプレート。
ブレイクポイントは、下記のように設定されています。

テンプレートのキャプチャ

Bootstrap 4 Jumbotron

ナビゲーションバーと基本的なグリッドで構成されたテンプレート。ジャンボトロンと呼ばれる大きな吹き出しと3つのコンテンツが用意されています。

Bootstrap 4のナビゲーションバーのテンプレート

デフォルトのナビゲーションバーと配置例、拡張用のテンプレートです。

テンプレートのキャプチャ

Bootstrap 4 ナビゲーションバー

デフォルトのナビゲーションバー。ナビゲーションは大きく分けて2タイプあり、1つはビューポートいっぱいの幅、もう1つはコンテンツエリア内に幅が限定されます。

テンプレートのキャプチャ

Bootstrap 4 ナビゲーションバー: スタティック

静的なナビゲーションバーのテンプレート。上部に配置されています。

テンプレートのキャプチャ

Bootstrap 4 ナビゲーションバー: 固定

スクロールしても固定表示されるナビゲーションバーのテンプレート。

テンプレートのキャプチャ

Bootstrap 4 ナビゲーションバー: 最下部

ページの最下部に配置されるナビゲーションバーのテンプレート。コンテンツが少なくても最下部に配置されます。

Bootstrap 4のコンポーネントのテンプレート

Bootstrap 4では、Webページやスマホアプリでよく見かけるコンポーネントもたくさん用意されています。

テンプレートのキャプチャ

Bootstrap 4 Album

写真ギャラリーやポートフォリオでよく見かける縦長ページ用のテンプレート。今までのものとは異なり、スマホでのレンダリングを改善するよう設計されています。

テンプレートのキャプチャ

Bootstrap 4 Pricing

新しいコンポーネントで、カードとユーティリティで実装された価格一覧のテンプレート。カスタマイズにも優れており、レスポンシブ対応です。

テンプレートのキャプチャ

Bootstrap 4 Checkout

Bootstrap 4で実装された新しいフォームのテンプレートで、お支払い用の入力項目と検証機能が実装されています。グリッドも新しいものが利用されており、スマホ時のフォームとしても優れたデザインです。

テンプレートのキャプチャ

Bootstrap 4 Product

これも新しいコンポーネントで、プロダクトの紹介に特化されたAppleスタイルのテンプレートです。

テンプレートのキャプチャ

Bootstrap 4 Cover

シンプルで美しいページを構築するための縦長ページ用のテンプレート。

テンプレートのキャプチャ

Bootstrap 4 Carousel

上部にカルーセルを備えたテンプレートで、新しいコンポーネントがいくつか追加されています。

テンプレートのキャプチャ

Bootstrap 4 Blog

マガジンスタイルのブログ用のテンプレート。ヘッダ・ナビゲーション・フィーチャーコンテンツが用意されています。

テンプレートのキャプチャ

Bootstrap 4 Dashboard

固定のサイドバーを備えた管理画面の基本テンプレート。サイドバーのアイテムにはアイコンが添えられており、グラフはChartJSで実装されています。

テンプレートのキャプチャ

Bootstrap 4 Sign-in

サインインのシンプルなテンプレート。フォームの項目やデザインなどのカスタマイズも簡単です。

テンプレートのキャプチャ

Bootstrap 4 Sticky footer

フッタを最下部に固定表示するテンプレート。コンテンツが少ない場合でも最下部に配置されます。

テンプレートのキャプチャ

Bootstrap 4 Sticky footer with fixed navbar

上記のSticky footerに、固定のナビゲーションバーを加えたテンプレート。スクロールしても、常にナビゲーションバーとフッタは表示されます。

Bootstrap 4の実験的なテンプレート

実験的なテンプレートでは、ユーザフレンドリーを考慮した新機能を楽しむことができます。
※実験的なもののため、正式版で変更されることがあります。

テンプレートのキャプチャ

Bootstrap 4 Floating Labels

入力時にラベルがフロートするフォームのテンプレート。フロートはCSSのみで実装されています。

テンプレートのキャプチャ

Bootstrap 4 Offcanvas

ナビゲーションバーをオフキャンバスにするテンプレート。スマホ時にナビゲーションは横から引き出すようにアニメーションで表示されます。

sponsors

top of page

©2018 coliss