メインコンテンツへスキップ

実例(Examples)

フレームワークのパーツを使用することから、カスタムコンポーネントやレイアウトに至るまで、例を挙げてプロジェクトをすばやく手に入れることが可能。

ソースコードのダウンロード 実例のダウンロード

※公式サイトの実例なのでダウンロードファイルはいずれも英語だが、以下の各ファイルで日本語のソースコードがコピー可能

スニペット 8 v5.0.0-beta3新設

カスタムCSSなどを使用して既存のコンポーネントやユーティリティに基づいて構築するサイトやアプリを構築するための一般的なパターン。

ヘッダ
ヘッダv5.0.0設定変更

これらのヘッダコンポーネントを使用して、ブランド、ナビゲーション、検索などを表示。

ヒーロー
ヒーローv5.0.0設定変更

明確な行動を促すフレーズを特徴とするヒーローで、ホームページに舞台を設定。

注目事項
注目事項v5.0.0設定変更

マーケティングコンテンツの機能、利点、その他の詳細を説明。

サイドバー
サイドバーv5.0.1設定変更

オフキャンバスや複数列のレイアウトに最適な一般的なナビゲーションパターン。

フッタ
フッタv5.1.0新設

大小を問わず、すばらしいフッタですべてのページを強力に仕上げる。

ドロップダウン
ドロップダウンv5.1.0新設

フィルタ、アイコン、カスタムスタイルなどを使用して、ドロップダウンを強化。

リストグループ
リストグループv5.1.0新設

任意のコンテンツのユーティリティとカスタムスタイルを使用してリストグループを拡張。

モーダル
モーダルv5.1.0新設

これらのヘッダコンポーネントを使用して、ブランド、ナビゲーション、検索などを表示。

カスタムコンポーネント 12

人々を助けるための真新しいコンポーネントとテンプレートは、Bootstrapをすぐに使い始め、フレームワークに追加するための最善の使用例を提示。

アルバム
アルバムv5.0.0-beta1設定変更

写真ギャラリー、ポートフォリオなどのためのシンプルな1ページテンプレート。

価格設定案内
価格設定案内v5.0.0設定変更

カードで構築され、カスタムのヘッダーとフッターを備えた価格設定ページの実例。

精算フォーム
精算フォームv5.0.0-beta3設定変更

フォームコンポーネントとその入力検証機能を示すカスタム精算フォーム。

製品紹介
製品紹介v5.0.0-beta1設定変更

豊富なグリッドと画像を使用した、製品に焦点を絞ったマーケティング・ページ。

カバー
カバーv5.0.0-beta1設定変更

シンプルで美しいホームページを構築するための1ページのテンプレート。

カルーセル
カルーセルv5.1.1設定変更

ナビゲーションバーとカルーセルをカスタマイズし、新しいコンポーネントを追加。

ブログ
ブログv5.1.1設定変更

ヘッダー、ナビゲーション、おすすめコンテンツ付き雑誌のようなブログテンプレート。

ダッシュボード
ダッシュボードv5.0.2設定変更

固定サイドバーとナビゲーションバーを備えた基本的な管理ダッシュボードシェル。

サインインページ
サインインページv5.0.0-beta3設定変更

シンプルなログインフォーム用のカスタムフォームレイアウトとデザイン。

等幅ナビゲーションバー
等幅ナビゲーションバーv5.0.0-beta1設定変更

等幅のリンクを持つカスタムのナビゲーションバーを作成。

フッタを画面下部に固定
フッタを画面下部に固定v5.0.0-alpha1設定変更

コンテンツがビューポートより短い場合は、フッタをビューポートの下部に貼り付ける。

固定ナビゲーションバーでフッタを画面下部に固定
固定ナビゲーションバーでフッタを画面下部に固定v5.1.1設定変更

上部に固定されたナビゲーションバーを使用して、ビューポートの下部にフッターを取り付ける。

フレームワーク 4

Bootstrapによって提供される組み込みコンポーネントの使用の実装に焦点を当てた例。

スターターテンプレート
スターターテンプレートv5.0.0設定変更

基本は何もない:コンテナと一緒にCSSとJavaScriptをコンパイル。

グリッドの実例
グリッドの実例v5.0.0-alpha1追加

6つの階層、入れ子などのグリッドレイアウトの複数の実例。

チートシート
チートシートv5.0.0-beta1新設 v5.1.1設定変更

Bootstrapコンポーネントの素材集。

RTL版チートシート
RTL版チートシートv5.0.0-beta1新設 v5.1.1設定変更

アラビア語でのBootstrapコンポーネントの素材集。

ジャンボトロン 5

ジャンボトロンコンポーネントのコンテナオプションのデモ(v4のジャンボトロンのクラスがv5.0.0で削除されたため、他のユーティリティクラスを使用した設定例に変更)。

基本のジャンボトロン
基本のジャンボトロンv5.1.1設定変更

注目のコンテンツや情報に特別な注意を喚起するためのシンプルなジャンボトロンの実例。

幅一杯にジャンボトロン
幅一杯にジャンボトロンv5.1.1設定変更

親要素の全ての横方向の空白一杯に広がるように設定変更されたジャンボトロンの実例。

コンテンツ付きジャンボトロン
コンテンツ付きジャンボトロンv5.1.1設定変更

ナビゲーションバーといくつかの基本的なグリッドの列をジャンボトロンの周りに構築。

狭小ジャンボトロン
狭小ジャンボトロン

デフォルトのコンテナとジャンボトロンを絞り込んで、さらにカスタムページを作成。

背景が画像のジャンボトロン
背景が画像のジャンボトロンv5.1.1設定変更

ジャンボトロンの背景を画像にした場合の実例。

ナビゲーションバー 10

ナビゲーションバーコンポーネントのすべてのレスポンシブとコンテナオプションのデモ。

幅一杯にナビゲーションバー
幅一杯にナビゲーションバーv5.1.1設定変更

メニューがビューポートの両端に広がったナビゲーションバーの実例。

メニューのみがサイトの本体と同じ幅のナビゲーションバー
メニューのみがサイトの本体と同じ幅のナビゲーションバーv5.1.1設定変更

サイトの本体の両端と揃ったナビゲーションバーの実例。

サイトの本体と同じ幅のナビゲーションバー
サイトの本体と同じ幅のナビゲーションバーv5.1.1設定変更

メニュー部分のみがサイトの本体の両端と揃ったナビゲーションバーの実例。

レスポンシブ・コンテナを使用したナビゲーションバー
レスポンシブ・コンテナを使用したナビゲーションバーv5.0.0-alpha1新設 v5.1.1設定変更

ビューポートサイズに応じて両端の位置が変化するナビゲーションバーの実例。

レスポンシブ・ナビゲーションバー
レスポンシブ・ナビゲーションバーv5.0.0-alpha1一部追加 v5.1.1設定変更

ナビゲーションバーの様々な配置のバリエーション。

静的トップナビゲーションバー
静的トップナビゲーションバーv5.1.1設定変更

いくつかの追加コンテンツを持つ単一の静的なナビゲーションバーの実例。

トップ固定のナビゲーションバー
トップ固定のナビゲーションバーv5.1.1設定変更

いくつかの追加コンテンツを持つ固定されたトップナビゲーションバーの実例。

ボトム固定のナビゲーションバー
ボトム固定のナビゲーションバーv5.1.1設定変更

いくつかの追加コンテンツを持つ固定されたボトムナビゲーションバーの実例。

最上部に達すると固定されるナビゲーションバー
最上部に達すると固定されるナビゲーションバーv5.1.1設定変更

スクロールして最上部に達すると固定されるナビゲーションバーの実例。

オフキャンバスナビゲーションバー
オフキャンバスナビゲーションバーv5.0.0-beta3カテゴリ変更 v5.1.0設定変更

拡張可能なナビゲーションバーをスライドオフキャンバスメニューに変更(オフキャンバスコンポーネントは不使用)。

統合 1

外部ライブラリとの統合。

Masonry(カードカラム)
Masonry(カードカラム)v5.0.0-alpha1新設 v5.0.0-beta1設定変更

BootstrapグリッドとMasonryレイアウトの威力を組み合わせ。