メインコンテンツにスキップ
Bootstrap 4 の新しいバージョンがあります。

フレームワークの一部の使用からカスタム コンポーネントやレイアウトまで、さまざまなサンプルを使用してプロジェクトをすばやく開始できます。

ソースコードをダウンロード

カスタム コンポーネント

Bootstrap をすぐに使い始め、フレームワークに追加するためのベスト プラクティスを示すのに役立つ、まったく新しいコンポーネントとテンプレート。

アルバムのスクリーンショット
アルバム

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

価格のスクリーンショット
価格

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

チェックアウトのスクリーンショット
チェックアウト

フォーム コンポーネントとその検証機能を示すカスタム チェックアウト フォーム。

製品のスクリーンショット
製品

広範なグリッドと画像を使用した無駄のない製品中心のマーケティング ページ。

表紙のスクリーンショット
カバー

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

カルーセルのスクリーンショット
カルーセル

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

ブログのスクリーンショット
ブログ

ヘッダー、ナビゲーション、注目のコンテンツを備えた雑誌のようなブログ テンプレート。

ダッシュボードのスクリーンショット
ダッシュボード

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

サインインのスクリーンショット
ログイン

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

固定フッターのスクリーンショット
固定フッター

ページ コンテンツが短い場合は、ビューポートの下部にフッターを追加します。

固定フッターのナビゲーション バーのスクリーンショット
固定フッター ナビゲーション バー

ビューポートの下部にフッターを固定上部ナビゲーション バーに接続します。

フレームワーク

Bootstrap が提供する組み込みコンポーネントの使用を実装することに焦点を当てた例。

スターター テンプレートのスクリーンショット
スターター テンプレート

コンパイルされた CSS と JavaScript だけです。

グリッドのスクリーンショット
グリッド

4 つの層すべて、ネストなどを含むグリッド レイアウトの複数の例。

ジャンボトロンのスクリーンショット
ジャンボトロン

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

ナビゲーションバー

デフォルトの navbar コンポーネントを使用して、移動、配置、および拡張する方法を示します。

ナビゲーションバーのスクリーンショット
ナビゲーションバー

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

ナビゲーションバーの静的スクリーンショット
Navbar 静的

いくつかの追加コンテンツとともに静的なトップ ナビゲーション バーの単一のナビゲーション バーの例。

Navbar 固定スクリーンショット
ナビゲーションバーが修正されました

いくつかの追加コンテンツとともに固定トップ ナビゲーション バーを持つ単一のナビゲーション バーの例。

ナビゲーションバー下部のスクリーンショット
ナビゲーションバーの下部

いくつかの追加コンテンツとともに下部ナビゲーション バーを含む単一のナビゲーション バーの例。

実験

将来を見据えた機能や手法に焦点を当てた例。

フローティング ラベルのスクリーンショット
フローティング ラベル

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

オフキャンバスのスクリーンショット
オフキャンバス

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