Bootstrap 4の使い方: 制作時のベースになるテンプレートのまとめ
Post on:2015年9月2日
sponsors
先月リリースされたBootstrap 4 alphaのページ制作のベースになるシンプルなテンプレートをはじめ、グリッド、ナビゲーション、コンポーネントなどを実装する際に役立つテンプレートを紹介します。
Bootstrap 4の特徴は、下記ページを参考にしてください。
Bootstrap 4の基本テンプレートのダウンロード
ここで紹介するBootstrap 4の基本テンプレートは、公式サイトからダウンロードできます。
ダウンロードファイルには、以下のファイルが含まれています。
ファイル構成
ベースとなるフレームワーク
Bootstrap 4でページを作る際に、ベースとなるフレームワークとなるテンプレートです。
スターターキット。最小限のHTMLとCSS, JavaScriptがセットになったテンプレート。
Bootstap 4で利用できるグリッドのパターン。
基本となるグリッドとナビゲーションで構成されたテンプレート。
Narrow Jumbotron
※オンライン無し
上記の幅を狭くしたテンプレート。
Bootstrap 4のナビゲーション
ナビゲーションは、シンプルな3タイプ。
ナビゲーションバーを含んだ基本的なテンプレート。
ナビゲーションバーをスタティックに配置したテンプレート。
ナビゲーションバーを上部に固定配置させるテンプレート。
Bootstrap 4のコンポーネント
ブログやポートフォリオやギャラリーなど、さまざまなコンテンツに利用できるコンポーネントです。
ギャラリーやポートフォリオなど、画像を複数掲載するためのシンプルな1ページ用のテンプレート。
背景いっぱいに写真画像を表示させる1ページ用のテンプレート。
カスタマイズされたナビゲーションとカルーセルを備えたテンプレート。
2カラムのブログ用のテンプレート。
固定表示のサイドバーとナビゲーションバーを備えた管理画面用のテンプレート。
サインインのシンプルなテンプレート。
コンテンツの量に依存せず、常に最下部に表示されるフッタを備えたテンプレート。
最下部固定表示のフッターに、最上部固定表示のナビゲーションバーのテンプレート。
Bootstrap 4の新しい試み
Bootstrap 4では、素晴らしいUXを提供できるよう新しい試みにもチャレンジしています。
現在よく見かけるものとは少し違ったオフキャンバスです。
デスクトップなど広い画面では何も変化がありませんが、コンテンツが表示幅を超える際に機能します。このままでは使い勝手はよくないですが、狭い画面で広いコンテンツを見せる方法としては面白いですね。
sponsors
