カテゴリ: WEB フロントエンド 時間: 2015 年 7 月 7 日
この記事では、主に Bootstrap テキストでよく使用されるいくつかのクラスを紹介します。タイトル、ページ本文、強調、小さなテキスト、強調、斜体、略語、アドレスの配置、強調、説明、および横方向に配置された説明が含まれます。
1. h1~h6 タイトル
ブートストラップは、グローバル font-size を 14px に、line-height を 1.428 に設定します。これらのプロパティは、
およびすべての段落要素に直接割り当てられます。さらに、(段落) も 1/2 行の高さ (つまり 10px) に等しい下マージンを設定して、段落を強調表示することができ、フォントは 21px、font-weight <です。 🎜 >:
300 の場合。
例:
raykaeso、将来有望なプログラマーになってください!
raykaeso、将来有望なプログラマーになってください!
a. 強調する必要のない小さなテキストの場合は、 タグを使用して、テキストのフォント サイズの 85% に設定します。親コンテナ (斜体)。 title 要素内のネストされた 要素は、異なるフォント サイズに設定されます。
のように、インライン要素に .small を割り当てて、
のようにすることもできます。
c. イタリック体 HTML5 で定義されている 要素を使用してテキストを強調することもできます。 は、追加の重要性を追加せずに単語またはフレーズを強調することを意味し、主にスピーチや技術的なフレーズなどで使用されます。例:
raykaeso,做一个有为程序员！
d. 強調クラス これらのクラスは、色を使用して強調を表現します。また、リンクに適用して、リンク上にマウスを置くと、デフォルトのリンク スタイルと同様に、リンクの色が濃くなるようにすることもできます。
<strong>raykaeso,做一个有为程序员！</strong>
これは HTML テキストの一部です....
raykaeso,做一个有为程序员！
これは HTML テキストの一部です....
これは HTML テキストです....
これは HTML テキストです....
これは HTML テキストです....
e 、略語の完全な内容を表示したい場合は、略語の上にマウスを置くことができますが、フォント サイズを小さくするには、略語に .initialism 属性を追加する必要があります。 。例:
f. アドレスにより、日常使用に最も近い形式で連絡先情報を表示できます。目的のスタイルを維持するには、各行の末尾に
を追加します。例:
住所
html HTML
効果:
3. 配置
テキスト配置クラスを使用すると、テキストを簡単かつ便利に再配置できます。例:
左揃え
中央揃え
その他のタイポグラフィ クラス
次の表は、その他のタイポグラフィ クラスの例を示していますブートストラップ タイポグラフィ クラス:
| 类 | 描述 |
|---|---|
| .lead | 使段落突出显示 |
| .small | 设定小文本 (设置为父文本的 85% 大小) |
| .text-left | 设定文本左对齐 |
| .text-center | 设定文本居中对齐 |
| .text-right | 设定文本右对齐 |
| .text-justify | 设定文本对齐,段落中超出屏幕部分文字自动换行 |
| .text-nowrap | 段落中超出屏幕部分不换行 |
| .text-lowercase | 设定文本小写 |
| .text-uppercase | 设定文本大写 |
| .text-capitalize | 设定单词首字母大写 |
| .initialism | 显示在 元素中的文本以小号字体展示 |
| .blockquote-reverse | 设定引用右对齐 |
| .list-unstyled | 移除默认的列表样式，列表项中左对齐 (
|
| .list-inline | 将所有列表项放置同一行 |
| .dl-horizontal | 该类设置了浮动和偏移，应用于
|
| .pre-scrollable | 使 元素可滚动 scrollable |
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
