使用例

フレームワークの一部を使ったものから、カスタムコンポーネントやレイアウトまで、私たちの例を使用することで、迅速にプロジェクトを開始できます。

これらの例を使用するためには、Bootstrapのソースコードをダウンロードしてください。

フレームワーク

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

基本テンプレート

コンパイル済みCSSとJavaScript:ベーシックなものだけです。

Grids

フレキシブルレイアウト、ネストなどを使ったグリッドレイアウトの複数の例。

Jumbotron

ナビゲーションバーやいくつかの基本的なGridカラムを使ったJumbotron周りの構築。

幅の狭いJumbotron

デフォルトのコンテナやJumbotronの幅を狭くしてカスタムページを構築します。

デフォルトのナビゲーションバーのコンポーネントを使ったり、それを移動、配置、拡張する方法を示します。

ナビゲーションバー

ナビゲーションバーといくつかのコンテンツを含んだ、とても基本的なテンプレート。

ページトップのナビゲーションバー

ページトップのナビゲーションバーといくつかのコンテンツを含んだ、とても基本的なテンプレート。

固定ナビゲーションバー

ページトップに固定されたナビゲーションバーといくつかのコンテンツを含んだ、とても基本的なテンプレート。

カスタムコンポーネント

すぐにBootstrapを使い始めるのを助け、フレームワークに追加するためのベストプラクティスをデモンストレーションするための、新しいコンポーネントやテンプレート。

Album

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

Cover

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

Carousel

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

Blog

カスタムナビゲーション、ヘッダー、タイプのシンプルな2列のブログのレイアウト。

Dashboard

固定サイドバーとナビゲーションバーを使用した基本的な管理ダッシュボードの骨組み。

サインインページ

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

両端揃えのナビゲーション

両端揃えのリンクを持つカスタムナビゲーションバーの作成。 注意! Safariフレンドリーではありません。

スティッキーフッター

コンテンツが表示領域の高さに満たない場合でも、表示領域の底にフッターを取り付けます。

ナビゲーションバーとスティッキーフッター

トップに固定されたナビゲーションを持つページの表示領域の底にフッターを取り付けます。

実験

将来的にフレンドリー(future-friendly)な機能や技術に焦点を当てる例です。

Offcanvas

Bootstrapを使用できるトグル可能なoff-canvasナビゲーションメニューを構築します。