クイックスタートの例

簡単なテンプレートが必要ですか? まとめたこれらの基本的な例を確認してください。

デフォルトのグリッド

Bootstrap の一部として提供されるデフォルトのグリッド システムは、幅 940px の 16 列のグリッドです。これは人気のある 960 グリッド システムのフレーバーですが、左右に追加のマージン/パディングはありません。

グリッド マークアップの例

ここに示すように、基本的なレイアウトは 2 つの「列」で作成できます。各列は、グリッド システムの一部として定義した 16 の基本的な列にまたがっています。その他のバリエーションについては、以下の例を参照してください。

<divクラス= "行" > 
  <divクラス= "span6" > 
    ...
  </div>
  <divクラス= "span10" > 
    ...
  </div>
</div>

列のネスト

.row既存の列内にを作成する必要がある場合は、コンテンツをネストします。

ネストされた列の例

<divクラス= "行" > 
  <divクラス= "span12" > 
    列のレベル 1
    <divクラス= "行" > 
      <divクラス= "span6" > 
        レベル2
      </div>
      <divクラス= "span6" > 
        レベル2
      </div>
    </div>
  </div>
</div>

独自のグリッドをロール

Bootstrap には、デフォルトの 940px グリッド システムをカスタマイズするためのいくつかの変数が組み込まれています。少しカスタマイズすることで、列のサイズ、ガター、およびそれらが存在するコンテナーを変更できます。

グリッド内

現在、グリッド システムを変更するために必要な変数はすべて にありますvariables.less。

これからカスタマイズ

グリッドを変更するということは、3 つの@grid-*変数を変更し、Less ファイルを再コンパイルすることを意味します。

Bootstrap には、最大 24 列のグリッド システムを処理する機能が備わっています。デフォルトは 16 です。グリッド変数を 24 列のグリッドにカスタマイズすると、次のようになります。

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

再コンパイルすると、設定が完了します。

固定レイアウト

単一の<div.container>.

<本体>
  <divクラス= "コンテナ" > 
    ...
  </div>
</body>

流動的なレイアウト

最小幅と最大幅、および左側のサイドバーを備えた、代替の柔軟で流動的なページ構造。アプリやドキュメントに最適です。

<本体>
  <div class = "コンテナ流体" > 
    <divクラス= "サイドバー" > 
      ...
    </div>
    <divクラス= "コンテンツ" > 
      ...
    </div>
  </div>
</body>

見出しとコピー

Web ページを構造化するための標準のタイポグラフィ階層。

文字体裁グリッド全体は、variables.less ファイル内の 2 つの Less 変数に基づいています:@basefontと@baseline. 1 つ目は全体で使用されるベースの font-size で、2 つ目はベースの line-height です。

これらの変数といくつかの計算を使用して、すべてのタイプのマージン、パディング、および行の高さなどを作成します。

h1. 見出し 1

h2. 見出し 2

h3. 見出し 3

h4. 見出し 4

h5. 見出し 5

h6. 見出し 6

段落の例

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nasceturridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

見出しの例サブ見出しがあります…

その他 要素

強調、住所、略語の使用

<strong> <em> <address> <abbr>

いつ使用するか

強調タグ (<strong>および<em>) は、周囲のコピーに関連する単語またはフレーズの追加の重要性または強調を示すために使用する必要があります。<strong>重要性と<em>ストレス強調に使用します。

段落内の強調

Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero、pharetra augue。

注:<b> HTML5 でおよびタグを使用することは引き続き問題<i>なく、それぞれ太字と斜体のスタイルにする必要はありません (ただし、より意味のある要素がある場合はそれを使用してください)。<b>重要性を増やさずに単語やフレーズを強調することを目的としています<i>が、主に音声、技術用語などを対象としています。

住所

この<address>要素は、その最も近い先祖、または作品全体の連絡先情報に使用されます。以下に、その使用方法の 2 つの例を示します。

注:の各行は<address>改行 ( ) で終了するか、コンテンツを適切に構成するために<br />ブロック レベルのタグ ( など) で囲む必要があります。<p>

略語

略語と頭字語については、<abbr>タグを使用します (<acronym>はHTML5 では非推奨です)。タグ内に短縮形を置き、完全な名前のタイトルを設定します。

ブロッククオート

<blockquote> <p> <small>

引用方法

ブロック引用を含めるには、折り返し<blockquote>てタグ<p>を付けます。<small>要素を使用し<small>てソースを引用すると、その前に em ダッシュが表示—されます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

ジュリアス・ヒバート博士

<ブロック引用>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small>ジュリアス・ヒバート博士</small>
</blockquote>

順不同<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• マッサで整数痴漢ロレム
• プレチウム ニスル アリケのファシリシス
• Nulla volutpat aliquam velit
  • インゲンマメ iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

スタイルなし<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• マッサで整数痴漢ロレム
• プレチウム ニスル アリケのファシリシス
• Nulla volutpat aliquam velit
  • インゲンマメ iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

順序付けられました<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. マッサで整数痴漢ロレム
4. プレチウム ニスル アリケのファシリシス
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

説明dl

説明リスト

説明リストは、用語を定義するのに最適です。

ユースモッド

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

マレスアダ ポルタ

Etiam porta sem malesuada magna mollis euismod.

コード

<code> <pre>

2 つのシンプルなタグを使用してコードをスタイリッシュに表示します。JavaScript を使用してさらに素晴らしいものを得るには、Google のコード整形ライブラリをドロップすれば準備完了です。

コードの提示

適切なタグでラップするだけで、インラインのコード、ブロックのブロック、または単なるスニペットをスタイリッシュに表示できます。複数行にまたがるコード ブロックの場合は、<pre>要素を使用します。インライン コードの場合は、<code>要素を使用します。

<div>
  <h1>見出し</h1>
  <p>ここに何か...</p>
</div>

<div> <h1>見出し</h1> <p>ここに何か... </p> </div>
  
  

インライン ラベル

<span class="label">

本文のフレーズに注意を喚起したり、フラグを付けたりします。

何にでもラベルを付ける

これらのファンシーな新しいものの 1 つが今までに必要でした! またはコードを書くときの重要なフラグ? さて、今あなたはそれらを持っています。デフォルトで含まれるものは次のとおりです。

メディア グリッド

HTML フットプリントが小さく、スタイルが最小限のページに、さまざまなサイズのサムネイルを表示します。

サムネイルの例

のサムネイルは.media-grid任意のサイズにできますが、組み込みの Bootstrap グリッド システムに直接マップすると最適に機能します。90、210、および 330 などのイメージ幅は、数ピクセルのパディングと組み合わされて、、、および列のサイズと等しく.span2なり.span4ます.span6。

大きい

中くらい

小さな

それらをコーディングする

メディア グリッドは使いやすく、マークアップ側ではかなり単純です。それらの寸法は、含まれている画像のサイズに純粋に基づいています。

<ul class = "メディアグリッド" > 
  <リ>
    <a href = "#" > 
      <imgクラス= "サムネイル" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <リ>
    <a href = "#" > 
      <imgクラス= "サムネイル" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

テーブルの作成

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

テーブルは、さまざまな用途に最適です。ただし、優れたテーブルには、(コード レベルで) 有用で、スケーラブルで、読みやすいものにするために、多少のマークアップ愛が必要です。役立つヒントをいくつか紹介します。

<thead>階層が<thead>> <tr>>であるように、常に列ヘッダーをラップします<th>。

列ヘッダーと同様に、すべてのテーブルの本文コンテンツは でラップする必要がある<tbody>ため、階層は<tbody>> <tr>><td>です。

例: デフォルトのテーブル スタイル

すべての表は、読みやすさを確保し、構造を維持するために、必要な境界線のみで自動的にスタイル設定されます。クラスや属性を追加する必要はありません。

<テーブル>
  ...
</表>

例: 要約表

より狭いスペースでより多くのデータを必要とするテーブルの場合、パディングを半​​分に削減する凝縮フレーバーを使用します。また、デフォルトのテーブル スタイルと同様に、ボーダーやゼブラ ストライプと組み合わせて使用​​することもできます。

例: ボーダー テーブル

テーブルの角を丸くしたり、すべての側面に境界線を追加したりして、テーブルを少し滑らかに見せます。

<テーブルクラス= "ボーダーテーブル" > 
  ...
</表>

例: ゼブラ ストライプ

.zebra-stripedクラスを追加するだけで、ゼブラ ストライプを追加して、テーブルを少し凝らせます。

注:ゼブラ ストライピングは、IE8 以下のような古いブラウザーでは利用できない漸進的な機能強化です。

<テーブルクラス= "ゼブラ ストライプ" > 
  ...
</表>

例: TableSorter.js を使用したゼブラ ストライプ

前の例では、 jQueryとTablesorterプラグインを介して並べ替え機能を提供することで、テーブルの有用性を向上させます。並べ替えを変更するには、任意の列のヘッダーをクリックします。

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<スクリプト> 
  $ (関数() { 
    $ ( "テーブル #sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<テーブルクラス= "ゼブラ ストライプ" > 
  ...
</表>

デフォルトのスタイル

すべてのフォームには、読みやすくスケーラブルな方法で表示するためのデフォルト スタイルが与えられています。スタイルは、テキスト入力、選択リスト、テキストエリア、ラジオ ボタンとチェックボックス、およびボタンに対して提供されます。

積み重ねられたフォーム

フォームの HTMLに追加.form-stackedすると、フィールドの左側ではなく、フィールドの上部にラベルが表示されます。これは、フォームが短い場合や、重いフォーム用に 2 列の入力がある場合に最適です。

フォーム フィールドのサイズ

マークアップにいくつかのクラスを追加するだけで、任意のフォーム、、または幅をinputカスタマイズselectします。textarea

v1.3.0 の時点で、フォーム要素のグリッド ベースのサイズ設定クラスが追加されました。既存.miniの.small、 などのクラスよりもこれらを使用してください。

ボタン

慣例として、ボタンはアクションに使用され、リンクはオブジェクトに使用されます。たとえば、「ダウンロード」はボタンで、「最近のアクティビティ」はリンクです。

すべてのボタンはデフォルトでライト グレー スタイルに設定されていますが、さまざまなカラー スタイルに多数の機能クラスを適用できます。これらのクラスには、青の.primaryクラス、水色の.infoクラス、緑の.successクラス、および赤.dangerのクラスが含まれます。

ボタンの例

ボタン スタイルは、apply があれば何にでも適用できます.btn。<a>通常、これらを、<button>、および select<input>要素にのみ適用する必要があります。外観は次のとおりです。

代替サイズ

より大きなボタンまたはより小さなボタンが好きですか? がんばれ！

無効状態

何らかの理由でアクティブになっていないか、アプリによって無効にされているボタンについては、無効状態を使用します。それ.disabledはリンク:disabled用と<button>要素用です。

リンク

ボタン

それは何ですか

トップバーは、Web サイトのロゴまたは名前、プライマリ ナビゲーション、および検索フォームを収容する固定バーです。

カスタマイズ可能

その中のすべての要素、およびトップバー全体もオプションです。ロゴ/名前、ナビゲーション、検索、およびセカンダリ ナビゲーション、またはそれらの任意の組み合わせを含めることを選択できます。

ドロップダウンが含まれています

メイン ナビゲーションの一部として、ナビゲーションにドロップダウンを追加する機能が含まれています。上のセカンダリ ナビゲーション (右揃え) をチェックして、その方法を確認してください。ドロップダウンliタグは.active、現在のページ選択の表示もサポートしています。

タブと丸薬

を使用して簡単なセカンダリ ナビゲーションを作成します<ul>。適切なクラスを追加して、タブまたはピルを交換します。

アカウント設定ページなどのコンテンツのサブセクションや、同様のコンテンツのページ間を切り替えるユーザー タイムラインに最適です。タブ付きまたは錠剤のスタイルで利用できます。

基本的なタブの例

タブは、通常のナビゲーション (同じタブに外部ページをロードする) として、またはコンテンツのペインを交換するためのタブ可能なコンテンツ領域として使用できます。後者を統合するために使用できるタブプラグインがあります。

• 家
• プロフィール
• メッセージ
• 設定
• コンタクト
• 落ちる
  • 二次リンク
  • ここに何か他のものがあります
  • 別のリンク

<ulクラス= "タブ" > 
  <li class = "active" ><a href = "#" >ホーム</a></li>  
  <li><a href = "#" >プロフィール</a></li> 
  <li><a href = "#" >メッセージ</a></li> 
  <li><a href = "#" >設定</a></li> 
  <li><a href = "#" >連絡先</a></li> 
</ul>

基本的な丸薬の例

• 家
• プロフィール
• メッセージ
• 設定
• コンタクト

<ulクラス= "丸薬" > 
  <li class = "active" ><a href = "#" >ホーム</a></li>  
  <li><a href = "#" >プロフィール</a></li> 
  <li><a href = "#" >メッセージ</a></li> 
  <li><a href = "#" >設定</a></li> 
  <li><a href = "#" >連絡先</a></li> 
</ul>

パン粉

ブレッドクラム ナビゲーションは、ユーザーがアプリまたはサイト内のどこにいるのかを示す方法として使用されますが、主要なナビゲーションには使用されません。

• 家

• ホーム /
• 中ページ

• ホーム /
• 中ページ /
• もう一つ

• ホーム /
• 中ページ /
• もうひとつ /
• あなたはここにいる

<ulクラス= "ブレッドクラム" > 
  <li><a href = "#" >ホーム</a> <span class = "divider" > / </span></li>   
  <li><a href = "#" >中ページ</a> <span class = "divider" > / </span></li>   
  <li><a href = "#" >もう一つ</a> <span class = "divider" > / </span></li>   
  <li class = "active" >ここにいます</li> 
</ul>

ページネーション

Rdio にインスパイアされた、非常に単純化された最小限のスタイルのページネーション。大きなブロックは見逃しにくく、簡単に拡張でき、大きなクリック領域を提供します。

<divクラス= "ページネーション" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← 前へ </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4​​ </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Next → </a></li>  
  </ul>
</div>

基本アラート

.alert-message

アクションの失敗、失敗の可能性、または成功を強調するための 1 行のメッセージ。フォームに特に役立ちます。

JavaScript を入手 »

サンプルコード

<div class = "alert-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong>聖ワカモレ！</strong>自分で確認してください。あなたはあまり格好良くありません。</p>
</div>

メッセージをブロックする

.alert-message.block-message

少し説明が必要なメッセージについては、段落スタイルのアラートがあります。これらは、長いエラー メッセージを泡立たせたり、保留中のアクションをユーザーに警告したり、単にページを強調するために情報を提示したりするのに最適です。

JavaScript を入手 »

サンプルコード

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong>聖ワカモレ！これは警告です！</strong>自分で確認してください。あなたはあまり格好良くありません。Nulla vitae elit libero、pharetra augue。Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <divクラス= "アラート アクション" > 
    <a class = "btn small" href = "#" >実行</a> <a class = "btn small" href = "#" >または実行</a>     
  </div>
</div>

モーダル

モーダル (ダイアログまたはライトボックス) は、バックグラウンド コンテキストを維持することが重要な状況でのコンテキスト アクションに最適です。

JavaScript を入手 »

ツールチップ

Twipsies は、混乱しているユーザーを助け、正しい方向に向けるのに非常に役立ちます。

JavaScript を入手 »

ポップオーバー

ポップオーバーを使用して、レイアウトに影響を与えずにサブテキスト情報をページに提供します。

JavaScript を入手 »

入門

JavaScript を Bootstrap ライブラリに統合するのは非常に簡単です。以下では、基本について説明し、開始するためのいくつかの素晴らしいプラグインを提供します!

JavaScript ドキュメントを見る »

含まれるもの

jQueryとEnderで動作する新しいカスタム プラグインを使用して、Bootstrap の主要なコンポーネントの一部を活用します。特定の開発ニーズに合わせて拡張および変更することをお勧めします。

JavaScriptは必要ですか？

いいえ！Bootstrap は、何よりもまず CSS ライブラリとして設計されています。この JavaScript は、含まれているスタイルの上に基本的なインタラクティブ レイヤーを提供します。

ただし、javascript が必要な場合は、上記のプラグインを提供して、Bootstrap を javascript と統合する方法を理解し、基本機能の迅速で軽量なオプションをすぐに提供できるようにします。

詳細といくつかのライブ デモについては、プラグインのドキュメント ページを参照してください。