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