実例:カスタムコンポーネント
Bootstrapをすぐに使い始められるように、新しいコンポーネントとテンプレートを用意し、フレームワークに追加するための最善の使用例を紹介。
※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
![アルバム アルバム](https://bootstrap-guide.com/files/example_files/1/album.png)
アルバムv5.3.0設定変更
写真ギャラリー、ポートフォリオなどのためのシンプルな1ページテンプレート。
![価格設定案内 価格設定案内](https://bootstrap-guide.com/files/example_files/2/pricing.png)
価格設定案内v5.3.0設定変更
カードで構築され、カスタムのヘッダーとフッターを備えた価格設定ページの実例。
![精算フォーム 精算フォーム](https://bootstrap-guide.com/files/example_files/3/checkout.png)
精算フォームv5.3.0設定変更
フォームコンポーネントとその入力検証機能を示すカスタム精算フォーム。
![製品紹介 製品紹介](https://bootstrap-guide.com/files/example_files/4/product.png)
製品紹介v5.3.3設定変更
豊富なグリッドと画像を使用した、製品に焦点を絞ったマーケティング・ページ。
![カバー カバー](https://bootstrap-guide.com/files/example_files/5/cover.png)
カバーv5.3.0設定変更
シンプルで美しいホームページを構築するための1ページのテンプレート。
![カルーセル カルーセル](https://bootstrap-guide.com/files/example_files/6/carousel.png)
カルーセルv5.3.1設定変更
ナビゲーションバーとカルーセルをカスタマイズし、新しいコンポーネントを追加。
![ブログ ブログ](https://bootstrap-guide.com/files/example_files/7/blog.png)
ブログv5.3.1設定変更
ヘッダー、ナビゲーション、おすすめコンテンツ付き雑誌のようなブログテンプレート。
![ダッシュボード ダッシュボード](https://bootstrap-guide.com/files/example_files/8/dashboard.png)
ダッシュボードv5.3.1設定変更
固定サイドバーとナビゲーションバーを備えた基本的な管理ダッシュボードシェル。
![サインインページ サインインページ](https://bootstrap-guide.com/files/example_files/9/sign-in.png)
サインインページv5.3.2設定変更
シンプルなログインフォーム用のカスタムフォームレイアウトとデザイン。
![等幅ナビゲーションバー 等幅ナビゲーションバー](https://bootstrap-guide.com/files/example_files/10/justified-nav.png)
等幅ナビゲーションバーv5.3.0設定変更
等幅のリンクを持つカスタムのナビゲーションバーを作成。
![フッタを画面下部に固定 フッタを画面下部に固定](https://bootstrap-guide.com/files/example_files/11/sticky-footer.png)
フッタを画面下部に固定v5.3.0設定変更
コンテンツがビューポートより短い場合は、フッタをビューポートの下部に貼り付ける。
![固定ナビゲーションバーでフッタを画面下部に固定 固定ナビゲーションバーでフッタを画面下部に固定](https://bootstrap-guide.com/files/example_files/12/sticky-footer-navbar.png)
固定ナビゲーションバーでフッタを画面下部に固定v5.3.1設定変更
上部に固定されたナビゲーションバーを使用して、ビューポートの下部にフッターを取り付ける。
![コンテンツ付きジャンボトロン コンテンツ付きジャンボトロン](https://bootstrap-guide.com/files/example_files/33/jumbotron-contents.png)
コンテンツ付きジャンボトロンv5.3.0カテゴリ変更 v5.3.1設定変更
ナビゲーションバーといくつかの基本的なグリッドの列をジャンボトロンの周りに構築。
![狭小ジャンボトロン 狭小ジャンボトロン](https://bootstrap-guide.com/files/example_files/34/jumbotron-narrow.png)
狭小ジャンボトロンv5.3.0カテゴリ変更 v5.3.0設定変更
デフォルトのコンテナとジャンボトロンを絞り込んで、さらにカスタムページを作成。