最新のWeb開発のチュートリアル
 

Bootstrap CSSタイポグラフィリファレンス


Bootstrap'sデフォルト設定

Bootstrap'sグローバルなデフォルトのfont-sizeで、14pxでline-height 1.428の。

これは、に適用される<body>とすべての段落。

また、すべての<p>要素は、(デフォルトでは10pxの)半分の彼らの計算された行の高さに等しい下マージンを持っています。


タイポグラフィ

以下の要素は、ブラウザのデフォルトよりもブートストラップによって少し違ったスタイルのされるHTML要素です。 結果/相違点を確認するには、 "それを試してみてください」の例を見てください。

クラスは、以下にさらに要素をスタイルするために使用されます。

要素/クラス 説明
<h1> - <h6>
or
.h1 - .h6
H1 - H6の見出し それを試してみてください
<small> 任意の見出しが軽く、二次テキストを作成します。

見出し(第二テキスト)

それを試してみてください
.small (親のサイズの85%に設定)より小さいテキストを示します小さいテキスト それを試してみてください
.lead テキストが目立つ: テキストをスタンド それを試してみてください
<mark>
or
.mark
ハイライトテキスト: 強調表示されたテキスト それを試してみてください
<del> 削除されたテキストを示します。 削除されたテキスト それを試してみてください
<s> もはや該当するテキスト :もはや関連するテキストを表示しません それを試してみてください
<ins> 挿入されたテキストを示します。 挿入されたテキスト それを試してみてください
<u> 下線のテキスト :下線付きのテキストを表示します それを試してみてください
<strong> 太字 :太字のテキストを表示します それを試してみてください
<em> イタリックのテキストを示します。 斜体のテキスト それを試してみてください
.text-left 左揃えのテキストを表示します それを試してみてください
.text-center 中央揃えのテキストを表示します それを試してみてください
.text-right 右揃えのテキストを表示します それを試してみてください
.text-justify 揃えテキストを表示します それを試してみてください
.text-nowrap 何のラップテキストを表示しません それを試してみてください
.text-lowercase 小文字TEXT:小文字テキストを表示します それを試してみてください
.text-uppercase 大文字のテキスト :大文字のテキストを表示します それを試してみてください
.text-capitalize 大文字のテキストを示します。 大文字のテキスト それを試してみてください
<abbr> <abbr>要素は、略語を示しています。 タイトルの略語はホバー上の追加のコンテキストを提供し、点線の下の境界とホバーのヘルプカーソルを持っている属性。 それを試してみてください
.initialism 内のテキストを表示します<abbr>若干小さいフォントサイズの要素 それを試してみてください
<address> 連絡先情報を提示 それを試してみてください
<blockquote> 別のソースからのコンテンツのブロックを示します それを試してみてください
.blockquote-reverse 右詰めコンテンツにBLOCKQUOTEを示します それを試してみてください
<ul> 順不同リストを示します それを試してみてください
<ol> 順序付きリストを表示します それを試してみてください
.list-unstyled リスト項目のデフォルトのリストスタイルと左マージンを削除します(両方で動作し<ul><ol> このクラスでは唯一の(、任意のネストされたリストからデフォルトのリストスタイルを削除するだけでなく、任意のネストされたリストにこのクラスを適用するために)直接の子リストのアイテムに適用されます それを試してみてください
.list-inline 単一ライン上の場所のすべてのリスト項目を それを試してみてください
<dl> 説明のリストを示します それを試してみてください
.dl-horizontal 中の用語と説明アップライン<dl>要素サイドバイサイド。 デフォルトのようにオフに開始する<dl>sが、ブラウザのウィンドウが拡大したとき、それはサイド・バイ・サイドをラインアップします それを試してみてください

コード

要素/クラス 説明
<var> 変数を示します: x = a b + y それを試してみてください
<kbd> 通常、キーボードから入力された入力を示します: CTRL + P それを試してみてください
<pre> 複数行のコードを示します それを試してみてください
<pre class="pre-scrollable"> スクロールバーを持つ複数行のコードを示します それを試してみてください
<samp> コンピュータプログラムの出力例を示します: サンプル出力 それを試してみてください
<code> :インラインコードのスニペットを示しspandiv それを試してみてください