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

実例(Examples)

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

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

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

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

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

アルバム
アルバムv4.4.0設定変更

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

価格設定案内
価格設定案内v4.1.3設定変更

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

精算フォーム
精算フォームv4.1.3設定変更

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

製品紹介
製品紹介v4.1.3設定変更

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

カバー
カバー

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

カルーセル
カルーセルv4.6.1設定変更

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

ブログ
ブログv4.6.1設定変更

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

ダッシュボード
ダッシュボードv4.5.0設定変更

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

サインインページ
サインインページ

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

等幅ナビゲーションバー
等幅ナビゲーションバーv4.6.2設定変更

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

フッタを画面下部に固定
フッタを画面下部に固定v4.4.0設定変更

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

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

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

フレームワーク 2

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

スターターテンプレート
スターターテンプレートv4.6.2設定変更

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

グリッドの実例
グリッドの実例v4.4.0一部追加

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

ジャンボトロン 5

ジャンボトロンコンポーネントのコンテナオプションのデモ。

基本のジャンボトロン
基本のジャンボトロン

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

幅一杯にジャンボトロン
幅一杯にジャンボトロン

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

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

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

狭小ジャンボトロン
狭小ジャンボトロンv4.4.0設定変更

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

背景が画像のジャンボトロン
背景が画像のジャンボトロン

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

ナビゲーションバー 8

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

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

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

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

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

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

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

レスポンシブ・ナビゲーションバー
レスポンシブ・ナビゲーションバーv4.4.0一部追加 v4.6.2設定変更

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

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

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

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

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

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

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

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

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

実験 2

将来のフレンドリーな機能やテクニックに焦点を当てた例。

フローティングラベル
フローティングラベルv4.6.0設定変更

インプット入力にフローティングラベルが付いた美しくシンプルなフォーム。

オフキャンバス
オフキャンバスv4.6.2設定変更

拡張可能なナビゲーションバーをスライドオフキャンバスメニューに変更。

Sassオプション 4

カスタム変数ファイルにある一部のSass変数の設定をカスタマイズした例。

box-shadow スタイルを有効にする
box-shadow スタイルを有効にする

Bootstrap4の $enable-shadows を有効にした場合に変更されるCSSをピックアップ。

グラデーションを有効にする
グラデーションを有効にする

Bootstrap4の $enable-gradients を有効にした場合に変更されるCSSをピックアップ。

レスポンシブ・フォントサイズを有効にする
レスポンシブ・フォントサイズを有効にするv4.3.0新設

Bootstrap4の $enable-responsive-font-sizes を有効にした場合に変更される見出しのスタイル。

border-radius スタイルを無効にする
border-radius スタイルを無効にする

Bootstrap4の $enable-rounded を無効にした場合に変更されるCSSをピックアップ。

Javascript 1

JSサンプル集

Bootstrap4のJavaScriptプラグインのオプションなどのサンプル。