Bootstrapで最近人気の高いレイアウトやコンポーネントを簡単に実装できるテンプレートのまとめ
Post on:2015年7月31日
sponsors
上部固定のScrollspy対応ナビゲーション、アニメーションがかっこいいオフキャンバスメニュー、ブラウザの高さいっぱい・半分に画像を配置、複数のコンテンツを配置するレスポンシブ対応のコンポーネントなど、最近よく見かける人気の高いレイアウトやコンポーネントを簡単に実装できるBootstrap用のテンプレートを紹介します。
実装方法のほとんどは、Bootstrapの最小限の構成に数行のHTMLと外部スタイルシートを記述するだけです。
Bootstrapの基本的な使い方は、下記の記事を参考にどうぞ。
以下のテンプレートはApache 2.0ライセンスで、個人でも商用でも無料で利用できます。
Scrolling Nav
Scrolling Nav -GitHub
デモページ
縦長ページ用のナビゲーション、スクロールするとナビゲーションの高さが狭くなります。ナビゲーションの各アイテムはそのコンテンツが表示されているとハイライトするScrollspy対応で、各コンテンツにはスムーズなアニメーションでスクロールします。
Simple Sidebar
Simple Sidebar -GitHub
デモページ
スマホでよく見かけるオフキャンバスタイプのスライドするサイドバー。
Logo Nav
Logo Nav -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マップメーカーなど、アニメーションが気持ちいい縦長ページ。
sponsors
