活版印刷スケール

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

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

本文の例

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

強調の使用

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。

注: HTML5 では<b>とを自由に使用できますが、使用方法が少し変更されています。主に音声、技術用語などのためのものですが、追加の重要性を伝えることなく単語やフレーズを強調することを目的としています.<i><b><i>

住所の例

<address>タグの使用例を 2 つ示します。

略語の例

略語は、大文字のテキストと薄い点線の下枠でスタイル設定されます。また、ホバー時にヘルプ カーソルが表示されるため、ユーザーはホバー時に何かが表示されることを追加で示すことができます。

HTMLは食パン以来最高のものです。

単語属性の省略形はattrです。

ブロック引用を含めるには、HTML<blockquote>を引用としてラップします。ストレート クォートの場合は、 をお勧めします。<p>

ソースを引用するためのオプションの要素を含めると、スタイリングのためにその前に<small>em ダッシュが表示されます。—

<ブロック引用>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 前のベネナティスを元に戻す整数。</p>
  <small>有名人</small>
</blockquote>

デフォルトの引用符は、次のようにスタイル設定されています。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 前のベネナティスを元に戻す整数。

作品の中で有名な人

blockquote を右にフロートするには、次を追加しclass="pull-right"ます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 前のベネナティスを元に戻す整数。

作品の中で有名な人

順不同

<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 class="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>ます。

たとえば、<code>セクション</ code >はインラインでラップする必要があります。  

基本ブロック

<pre>複数行のコードに使用します。適切にレンダリングするために、キャレットを Unicode 文字に変換してください。

<p>サンプル テキストはこちら...</p>

<プレ>
  <p>サンプル テキストはこちら...</p>
</プレ>

注:タグ内のコード<pre>はできるだけ左側に配置してください。すべてのタブをレンダリングします。

Googleプリティファイ

同じ<pre>要素を使用して、レンダリングを強化するための 2 つのオプション クラスを追加します。

<p>サンプル テキストはこちら... </p>

<pre class = "prettyprint 
     線数" >
  <p>サンプル テキストはこちら...</p>
</プレ>

google-code-prettifyをダウンロードし、使用方法の readme を表示します。

<テーブル>
  <スレッド>
    <tr>
      <番目> … </番目>
      <番目> … </番目>
    </tr>
  </スレッド>
  <本体>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</表>

テーブルは、読みやすさを確保し、構造を維持するために、いくつかの境界線のみで自動的にスタイル設定されます。2.0 では、.tableクラスが必要です。

<テーブルクラス= "テーブル" > 
  …
</表>

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

注:スプライト テーブルは:nth-childCSS セレクターを使用し、IE7 ～ IE8 では使用できません。

<table class = "table table-striped" > 
  …
</表>

審美的な目的で、テーブル全体に境界線を追加し、角を丸くします。

<テーブルクラス= "テーブル テーブル罫線" > 
  …
</表>

.table-condensedテーブル セルのパディングを半​​分 (8px から 4px) にカットするクラスを追加して、テーブルをよりコンパクトにします。

<table class = "table table-condensed" > 
  …
</表>

使用可能なクラスのいずれかを利用して、さまざまな外観を実現するために、任意のテーブル クラスを自由に組み合わせてください。

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</表>

柔軟な HTML と CSS

Bootstrap のフォームの最も優れた点は、マークアップでどのように作成しても、すべての入力とコントロールが見栄えがすることです。余分な HTML は必要ありませんが、必要な方のためにパターンを提供しています。

より複雑なレイアウトには、簡単なスタイリングとイベント バインディングのための簡潔でスケーラブルなクラスが付属しているため、すべてのステップでカバーされます。

4つのレイアウトが含まれています

Bootstrap では、次の 4 種類のフォーム レイアウトがサポートされています。

• 垂直 (デフォルト)
• 探す
• 列をなして
• 水平

さまざまなタイプのフォーム レイアウトでは、マークアップにいくつかの変更が必要ですが、コントロール自体はそのままで同じように動作します。

制御状態など

Bootstrap のフォームには、input、textarea、select などのすべての基本フォーム コントロールのスタイルが含まれています。ただし、追加入力や先頭追加入力、チェックボックスのリストのサポートなど、多数のカスタム コンポーネントも付属しています。

フォーム コントロールの種類ごとに、エラー、警告、成功などの状態が含まれます。無効なコントロールのスタイルも含まれています。

v2.0 では、フォーム スタイルのデフォルトがより軽量でスマートになりました。追加のマークアップは不要で、フォーム コントロールのみです。

デフォルトの WebKit スタイルを反映して、.form-search丸い検索フィールドを追加するだけです。

入力は、開始するブロック レベルです。.form-inlineとには.form-horizontal、インライン ブロックを使用します。

含まれるもの

左側に表示されているのは、サポートされているすべての既定のフォーム コントロールです。箇条書きのリストは次のとおりです。

• テキスト入力 (テキスト、パスワード、メールなど)
• チェックボックス
• 無線
• 選択する
• 複数選択
• ファイル入力
• テキストエリア

v2.0 での新しいデフォルト

v1.4 までは、Bootstrap のデフォルトのフォーム スタイルは水平レイアウトを使用していました。Bootstrap 2 では、その制約を取り除き、あらゆるフォームに対してよりスマートでスケーラブルなデフォルトを設定しました。

再設計されたブラウザの状態

Bootstrap は、ブラウザーがサポートするフォーカスとdisabled状態のスタイルを特徴とします。デフォルトの Webkit を削除し、代わりに をoutline適用します。box-shadow:focus

フォームの検証

また、エラー、警告、および成功の検証スタイルも含まれています。使用するには、周囲の にエラー クラスを追加します.control-group。

<フィールドセット
  クラス= "コントロール グループ エラー" >
  …
</フィールドセット>

入力の先頭と末尾に追加

入力グループ (追加または先頭に追加されたテキスト) は、入力のコンテキストを簡単に提供する方法を提供します。良い例としては、Twitter ユーザー名の @ 記号や財務の $ などがあります。

チェックボックスとラジオ

v1.4 までは、Bootstrap はチェックボックスとラジオをスタックするために追加のマークアップを必要としていました。<label class="checkbox">これで、をラップするを繰り返すだけの簡単なことです<input type="checkbox">。

インラインのチェックボックスとラジオもサポートされています。orに追加.inlineするだけで完了です。.checkbox.radio

インラインフォームと追加/前置

インライン フォームで入力の先頭または追加を使用するには、必ずスペースを入れずに同じ行に.add-onandを配置してください。input

フォームのヘルプ テキスト

フォーム入力のヘルプ テキストを追加するには、input 要素の後にインライン ヘルプ テキスト<span class="help-inline">またはヘルプ テキスト ブロックを含めます。<p class="help-block">

アクションのボタン

慣習として、ボタンはアクションにのみ使用し、ハイパーリンクはオブジェクトに使用する必要があります。たとえば、「ダウンロード」はボタン、「最近のアクティビティ」はリンクにする必要があります。

アンカーとフォームの場合

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

注:すべてのボタンに.btnクラスを含める必要があります。一貫性を保つために、ボタン スタイルを<button>および<a>要素に適用する必要があります。

複数のサイズ

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

主なアクション アクション

主なアクション アクション

無効状態

無効なボタンの場合は.btn-disabled、リンクと要素に使用し:disabledます<button>。

主なアクション アクション

主なアクション アクション

クロスブラウザの互換性

IE9 では、すべてのボタンのグラデーションを削除して、角を丸くするようにしています。

関連して、IE9 は無効化buttonされた要素をジャンク化し、テキストをグレーにして厄介なテキスト シャドウを表示します。残念ながら、これを修正することはできません。

スプライトとして構築

すべてのアイコンを追加のリクエストにする代わりに、それらをスプライトにコンパイルしました。これは、CSS を使用して画像を配置する 1 つのファイル内の一連の画像background-positionです。これは、私たちが Twitter.com で使用している方法と同じであり、うまく機能しています。

すべてのアイコン クラスには.icon-、他のコンポーネントと同様に、適切な名前空間と範囲を指定するために がプレフィックスとして付けられます。これにより、他のツールとの競合を回避できます。

Glyphiconsは、ドキュメントにリンクとクレジットを提供する限り、オープンソース ツールキットでハーフリング セットを使用することを許可してくれました。プロジェクトで同じことを行うことを検討してください。

使い方

v2.0.0 では、<i>すべてのアイコンにタグを使用することを選択しましたが、ケース クラスはなく、共有プレフィックスのみです。使用するには、次のコードをほぼ任意の場所に配置します。

<i class = "icon-search" ></i> 

反転した (白い) アイコンに使用できるスタイルもあり、1 つの追加クラスで準備できます。

<i class = "icon-search icon-white" ></i> 

アイコンには 120 のクラスから選択できます。<i>適切なクラスのタグを追加するだけで準備完了です。完全なリストは、sprites.lessまたはこのドキュメントのここにあります。

ユースケース

アイコンは素晴らしいものですが、どこで使用するのでしょうか? ここにいくつかのアイデアがあります：

• サイドバー ナビゲーションのビジュアルとして
• 純粋にアイコン駆動のナビゲーションの場合
• アクションの意味を伝えるボタン
• ユーザーの目的地に関するコンテキストを共有するためのリンク付き

<i>基本的に、タグを配置できる場所にはどこでもアイコンを配置できます。

リフレッシュ チェックアウト 消去

コメント 設定 より詳しい情報