例 | Twitter Bootstrap リファレンス

例

Bootstrapの多くのコンポーネントと、基本のテンプレートをもとに構築されます。我々は、あなたの個別のプロジェクトのニーズに合わせて、Bootstrapのカスタマイズと適応を行うことをお勧めします。

下記のそれぞれのサンプルコードは、Bootstrapのリポジトリからダウンロードしてください。 docs/examples/ディレクトリに格納されています。

何も無い基本的なテンプレートです。コンパイルされたCSSとJavaScriptが含まれます。

視覚的な部分に拡張が施された任意のBootstrapテーマを読み込んでいるサンプルです。

列、入れ子等を使用したグリッドレイアウトの複数のサンプルです。

ジャンボトロンを中心に、ナビゲーションバーと幾つかの基本的なグリッド列から構築されたサンプルです。

幅の狭いコンテナとジャンボトロンを使用して、よりカスタマイズされたページを構築しています。

ナビゲーションバーと、それに沿った幾つかのコンテンツを含む非常に基本的なテンプレートです。

ページトップの静的(Static)ナビゲーションバーと、それに沿った幾つかのコンテンツを含む非常に基本的なテンプレートです。

ページトップにFixされたナビゲーションバーと、それに沿った幾つかのコンテンツを含む非常に基本的なテンプレートです。

シンプルで綺麗なホームページを作るための、単一ページのテンプレートです。

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

カスタマイズされたナビゲーション、ヘッダー、タイポグラフィを使用したシンプルな2カラムのブログ用レイアウトです。

管理者のダッシュボードのための基本的な構造です。

Sign-in用にレイアウトされたフォームです。

均等(Justified)幅にされたリンクを使用してナビゲーションバーをカスタマイズしたものです。 Safariには適さないので注意してください。

コンテンツがビューポート(viewport)よりも短い場合に、そのビューポートの下部に張り作るようにフッターを割り当てます。

ビューポートの下部にフッターを割り当て、上部(トップ)にFixされたナビゲーションが配置された例です。

Bootstrapのレスポンシブ機能を簡単に無効化することが可能です。ドキュメントを確認してください。

Bootstrapと一緒に使用するための、切り替え可能なoff-canvasナビゲーション・メニューを構築しています。

このページは、ページトップのリンク先のBootstrap公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。