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

実例(Examples)

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

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

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

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

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

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

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

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

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

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

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

カバー
カバー

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

カルーセル
カルーセル

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

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

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

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

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

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

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

等幅ナビゲーションバー
等幅ナビゲーションバー

等幅のリンクを持つカスタムのナビゲーションバーを作成。 注意喚起!ちょっとSafariには優しくない。

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

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

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

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

フレームワーク 2

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

スターターテンプレート
スターターテンプレート

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

グリッドの実例
グリッドの実例

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

ジャンボトロン 5

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

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

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

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

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

コンテンツ付きジャンボトロン
コンテンツ付きジャンボトロン

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

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

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

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

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

ナビゲーションバー 8

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

幅一杯にナビゲーションバー
幅一杯にナビゲーションバー

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

サイトの本体と同じ幅のナビゲーションバー
サイトの本体と同じ幅のナビゲーションバー

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

メニューのみがサイトの本体と同じ幅のナビゲーションバー
メニューのみがサイトの本体と同じ幅のナビゲーションバー

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

レスポンシブ・ナビゲーションバー
レスポンシブ・ナビゲーションバー

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

静的トップナビゲーションバー
静的トップナビゲーションバー

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

トップ固定のナビゲーションバー
トップ固定のナビゲーションバー

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

ボトム固定のナビゲーションバー
ボトム固定のナビゲーションバー

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

最上部に達すると固定されるナビゲーションバー
最上部に達すると固定されるナビゲーションバー

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

実験 2

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

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

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

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

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

Sassオプション 3

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

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

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

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

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

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

Javascript 1

JSサンプル集

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