Bootstrap 4の使い方: 制作時のベースになるテンプレートのまとめ

先月リリースされたBootstrap 4 alphaのページ制作のベースになるシンプルなテンプレートをはじめ、グリッド、ナビゲーション、コンポーネントなどを実装する際に役立つテンプレートを紹介します。

Bootstrap 4のキャプチャ

Bootstrap 4 alpha

Bootstrap 4の特徴は、下記ページを参考にしてください。

Bootstrap 4の基本テンプレートのダウンロード

ここで紹介するBootstrap 4の基本テンプレートは、公式サイトからダウンロードできます。

Bootstrap 4のキャプチャ

Bootstrap 4 alpha

ダウンロードファイルには、以下のファイルが含まれています。

Bootstrap 4のファイル構成

ファイル構成

ベースとなるフレームワーク

Bootstrap 4でページを作る際に、ベースとなるフレームワークとなるテンプレートです。

Bootstrap 4のキャプチャ

Staerter Template

スターターキット。最小限のHTMLとCSS, JavaScriptがセットになったテンプレート。

Bootstrap 4のキャプチャ

Grid

Bootstap 4で利用できるグリッドのパターン。

Bootstrap 4のキャプチャ

Jumbotron

基本となるグリッドとナビゲーションで構成されたテンプレート。

Bootstrap 4のキャプチャ

Narrow Jumbotron
※オンライン無し

上記の幅を狭くしたテンプレート。

Bootstrap 4のナビゲーション

ナビゲーションは、シンプルな3タイプ。

Bootstrap 4のキャプチャ

Navbar

ナビゲーションバーを含んだ基本的なテンプレート。

Bootstrap 4のキャプチャ

Navbar Top Static

ナビゲーションバーをスタティックに配置したテンプレート。

Bootstrap 4のキャプチャ

Navbar Top Fixed

ナビゲーションバーを上部に固定配置させるテンプレート。

Bootstrap 4のコンポーネント

ブログやポートフォリオやギャラリーなど、さまざまなコンテンツに利用できるコンポーネントです。

Bootstrap 4のキャプチャ

Album

ギャラリーやポートフォリオなど、画像を複数掲載するためのシンプルな1ページ用のテンプレート。

Bootstrap 4のキャプチャ

Cover

背景いっぱいに写真画像を表示させる1ページ用のテンプレート。

Bootstrap 4のキャプチャ

Carousel

カスタマイズされたナビゲーションとカルーセルを備えたテンプレート。

Bootstrap 4のキャプチャ

Blog

2カラムのブログ用のテンプレート。

Bootstrap 4のキャプチャ

Dashboard

固定表示のサイドバーとナビゲーションバーを備えた管理画面用のテンプレート。

Bootstrap 4のキャプチャ

Sign-in

サインインのシンプルなテンプレート。

Bootstrap 4のキャプチャ

Sticky Footer

コンテンツの量に依存せず、常に最下部に表示されるフッタを備えたテンプレート。

Bootstrap 4のキャプチャ

Sticky Footer with Navbar

最下部固定表示のフッターに、最上部固定表示のナビゲーションバーのテンプレート。

Bootstrap 4の新しい試み

Bootstrap 4では、素晴らしいUXを提供できるよう新しい試みにもチャレンジしています。

Bootstrap 4のキャプチャ

Off-Canvas

現在よく見かけるものとは少し違ったオフキャンバスです。
デスクトップなど広い画面では何も変化がありませんが、コンテンツが表示幅を超える際に機能します。このままでは使い勝手はよくないですが、狭い画面で広いコンテンツを見せる方法としては面白いですね。

top of page

©2018 coliss