Bootstrap の使用体験 text_html/css_WEB-ITnose

カテゴリ: WEB フロントエンド 時間: 2015 年 7 月 7 日

この記事では、主に Bootstrap テキストでよく使用されるいくつかのクラスを紹介します。タイトル、ページ本文、強調、小さなテキスト、強調、斜体、略語、アドレスの配置、強調、説明、および横方向に配置された説明が含まれます。

1. h1~h6 タイトル

から

までのすべてのタイトルタグが使用可能です。さらに、インライン属性を持つテキストにタイトル スタイルを与えるための .h1 ～ .h6 クラスも提供されており、タイトルにはサブタイトルをマークするための d015d241ae6d34c34210679b5204fe85 タグまたは .small 要素を含めることもできます。例:

h1。第 1 レベルのタイトル

h2。第 2 レベルのタイトル

h1. レベル 1 のサブタイトル

h2. レベル 2 タイトルのサブタイトル

h3. レベル 3 タイトルのサブタイトル

>

2. ページ本文と通常の段落

ブートストラップは、グローバル font-size を 14px に、line-height を 1.428 に設定します。これらのプロパティは、6c04bd5ca3fcae76e30b72ad730ca86d およびすべての段落要素に直接割り当てられます。さらに、e388a4556c0f65e1904146cc1a846bee (段落) も 1/2 行の高さ (つまり 10px) に等しい下マージンを設定して、段落を強調表示することができ、フォントは 21px、font-weight :

300 の場合。

例:

raykaeso、将来有望なプログラマーになってください!

raykaeso、将来有望なプログラマーになってください!

a. 強調する必要のない小さなテキストの場合は、d015d241ae6d34c34210679b5204fe85 タグを使用して、テキストのフォント サイズの 85% に設定します。親コンテナ (斜体)。 title 要素内のネストされた 要素は、異なるフォント サイズに設定されます。

のように、インライン要素に .small を割り当てて、

のようにすることもできます。

c. イタリック体 HTML5 で定義されている a4b561c25d9afb9ac8dc4d70affff419 要素を使用してテキストを強調することもできます。 a4b561c25d9afb9ac8dc4d70affff419 は、追加の重要性を追加せずに単語またはフレーズを強調することを意味し、主にスピーチや技術的なフレーズなどで使用されます。例:

raykaeso,做一个有为程序员！

d. 強調クラス これらのクラスは、色を使用して強調を表現します。また、リンクに適用して、リンク上にマウスを置くと、デフォルトのリンク スタイルと同様に、リンクの色が濃くなるようにすることもできます。

<strong>raykaeso,做一个有为程序员！</strong>

これは HTML テキストの一部です....

raykaeso,做一个有为程序员！

これは HTML テキストの一部です....

これは HTML テキストの一部です....

これは HTML テキストです....

これは HTML テキストです....

これは HTML テキストです....

e 、略語の完全な内容を表示したい場合は、略語の上にマウスを置くことができますが、フォント サイズを小さくするには、略語に .initialism 属性を追加する必要があります。 。例:

f. アドレスにより、日常使用に最も近い形式で連絡先情報を表示できます。目的のスタイルを維持するには、各行の末尾に 0c6dc11e160d3b678d68754cc175188a を追加します。例:

住所

html HTML

8888 xx Building, xx Street, Hubei 電話: (123) 456-7890

効果:

3. 配置

テキスト配置クラスを使用すると、テキストを簡単かつ便利に再配置できます。例:

左揃え

中央揃え

右揃え

その他のタイポグラフィ クラス

次の表は、その他のタイポグラフィ クラスの例を示していますブートストラップ タイポグラフィ クラス:

类	描述
.lead	使段落突出显示
.small	设定小文本 (设置为父文本的 85% 大小)
.text-left	设定文本左对齐
.text-center	设定文本居中对齐
.text-right	设定文本右对齐
.text-justify	设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap	段落中超出屏幕部分不换行
.text-lowercase	设定文本小写
.text-uppercase	设定文本大写
.text-capitalize	设定单词首字母大写
.initialism	显示在 8a7974376be5f6c00c121222b727adb9 元素中的文本以小号字体展示
.blockquote-reverse	设定引用右对齐
.list-unstyled	移除默认的列表样式，列表项中左对齐 ( ff6d136ddc5fdfeffaf53ff6ee95f185 和 c34106e0b4e09414b63b2ea253ff83d6 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline	将所有列表项放置同一行
.dl-horizontal	该类设置了浮动和偏移，应用于 5c69336ffbc20d23018e48b396cdd57a 元素和 73de882deff7a050a357292d0a1fca94 元素中，具体实现可以查看实例
.pre-scrollable	使 e03b848252eb9375d56be284e690e873 元素可滚动 scrollable