Bootstrapで最近人気の高いレイアウトやコンポーネントを簡単に実装できるテンプレートのまとめ

上部固定のScrollspy対応ナビゲーション、アニメーションがかっこいいオフキャンバスメニュー、ブラウザの高さいっぱい・半分に画像を配置、複数のコンテンツを配置するレスポンシブ対応のコンポーネントなど、最近よく見かける人気の高いレイアウトやコンポーネントを簡単に実装できるBootstrap用のテンプレートを紹介します。

サイトのキャプチャ

Bootstrap

実装方法のほとんどは、Bootstrapの最小限の構成に数行のHTMLと外部スタイルシートを記述するだけです。
Bootstrapの基本的な使い方は、下記の記事を参考にどうぞ。

参考

以下のテンプレートはApache 2.0ライセンスで、個人でも商用でも無料で利用できます。

デモのキャプチャ

Scrolling Nav
Scrolling Nav -GitHub
デモページ

縦長ページ用のナビゲーション、スクロールするとナビゲーションの高さが狭くなります。ナビゲーションの各アイテムはそのコンテンツが表示されているとハイライトするScrollspy対応で、各コンテンツにはスムーズなアニメーションでスクロールします。

デモのキャプチャ

Simple Sidebar
Simple Sidebar -GitHub
デモページ

スマホでよく見かけるオフキャンバスタイプのスライドするサイドバー。

デモのキャプチャ

Logo Nav
Logo Nav -GitHub
デモページ

ヘッダのロゴなど、デフォルトのテキストを画像に置換します。

デモのキャプチャ

Full
Full -GitHub
デモページ

上部にナビゲーションバーを固定表示し、画像をブラウザいっぱいに表示します。

デモのキャプチャ

The Big Picture
The Big Picture GitHub
デモページ

画像をブラウザいっぱいに画像を表示し、フッタは一番下に固定表示。

デモのキャプチャ

Full Width Pics
Full Width Pics -GitHub
デモページ

ランディングページや縦長ページ用で、ロゴなどのデザイン要素を含め、セクションいっぱいの幅に画像を配置します。

デモのキャプチャ

Full Slider
Full Slider -GitHub
デモページ

カルーセルのスライダーをブラウザいっぱいに表示します。

デモのキャプチャ

Half Slider
Half Slider -GitHub
デモページ

カルーセルのスライダーをブラウザいっぱいの半分の高さで表示します。

デモのキャプチャ

Round About
Round About -GitHub
デモページ

「About Us」などでよく見かけるサークル状にデザインされたエレメント。

デモのキャプチャ

4 Col Portfolio
4 Col Portfolio -GitHub
デモページ

ポートフォリオ用の4カラム、レスポンシブ対応でサイズやカラム数が変更されます。

デモのキャプチャ

3 Col Portfolio
3 Col Portfolio -GitHub
デモページ

ポートフォリオ用の3カラム、レスポンシブ対応でサイズやカラム数が変更されます。

デモのキャプチャ

2 Col Portfolio
2 Col Portfolio -GitHub
デモページ

ポートフォリオ用の2カラム、レスポンシブ対応でサイズやカラム数が変更されます。

デモのキャプチャ

1 Col Portofolio
1 Col Portfolio -GitHub
デモページ

ポートフォリオ用の2カラム、レスポンシブ対応でサイズや配置が変更されます。

デモのキャプチャ

Portfolio Item
Portfolio Item -GitHub
デモページ

メイン画像を使った大きいセクション、リストによるプロジェクトの説明、関連プロジェクトのサムネイル。

デモのキャプチャ

One Page Wonder
One Page Wonder -GitHub
デモページ

固定配置のナビゲーションバー、レスポンシブ対応のコンテンツ、基本要素が揃ったシンプルな縦長ページ。

デモのキャプチャ

Landing Page
Landing Page -GitHub
デモページ

固定配置のナビゲーションバー、レスポンシブ対応のコンテンツ、ソーシャルボタン、ブラウザいっぱいの背景画像を備えたランディングページ。

デモのキャプチャ

Stylish Portfolio
Stylish Portfolio -GitHub
デモページ

オフキャンバスのナビゲーション、ブラウザの高さいっぱいのヘッダセクション、スムーズなアニメーションのスクロール、ポートフォリオ、Googleマップ、ソーシャルボタンを備えたポートフォリオページ。

デモのキャプチャ

Freelancer
Freelancer -GitHub
デモページ

固定配置のナビゲーションバー、アイテムはScrollspy対応、ホバーエフェクト、モーダルウインドウ、フォームのフロートラベルなど、おしゃれなインタラクションが取り入れられたポートフォリオページ。

デモのキャプチャ

Grayscale
Grayscale -GitHub
デモページ

固定配置のナビゲーションバー、アイテムはScrollspy対応、スムーズスクロール、アウトラインボタン、Googleマップ、カスタムPNGマップメーカーなど、アニメーションが気持ちいい縦長ページ。

top of page

©2017 coliss