Bootstrapレイアウト(テキストスタイル)の使い方を徹底分析_JavaScriptスキル

1. 段落

段落もタイポグラフィーにおける重要な要素です。 Bootstrap のテキストのグローバル テキスト スタイルを設定します (ここでのテキストは本文テキストを指します):

1. グローバルテキストフォントサイズは 14px (font-size) です。

2. 行の高さは 1.42857143 (line-height) で、約 20 ピクセルです (小数が続くと混乱するかもしれません。実際、これは LESS コンパイラーによって計算されます。もちろん、Sass にもあります)そのような機能）。

3. 色はダークグレー (#333) です。

2. テキストスタイル

実際のプロジェクトでは、重要なテキストの場合、強調表示したい部分が異なるスタイルで処理されます。 Bootstrap は、この部分の軽量処理も行います。

段落 p を強調表示したい場合は、クラス名「.lead」を追加することで実行できます。その機能は、テキストのフォント サイズを大きくし、テキストを太字にし、それに応じて行の高さと余白を処理することです。 。

1. 太字: Bootstrap では、 タグと f3e62287b9fb18ae34dc19a0b40355d9 または 5a8028ccc7a7e27417bff9f05adf5932 を使用してテキストを斜体にすることができます。

3. 強調カテゴリ

.text-muted: ヒント、ライトグレー (#999) を使用してください
.text-primary: プライマリ、青 (#428bca) を使用
.text-success: 成功、薄緑色 (#3c763d) を使用
.text-info: 通知情報、水色 (#31708f) を使用
.text-warning: 警告、黄色 (#8a6d3b) を使用してください
.text-danger: 危険です、茶色を使用してください (#a94442)

<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>

効果は次のとおりです:

4. テキストの配置

写植には文字の配置が欠かせません。 Text-align は、テキストの配置スタイルを設定するために CSS でよく使用されます。主なスタイルは 4 つあります:

☑ 左揃え、

は値を左に取ります

☑ 中央に揃えます。

が値の中心になります

☑ 右揃え、

は値を右に取得します

☑ 両端を揃えます。

は、justify の値をとります。

操作を簡素化し、使いやすくするために、Bootstrap はテキストの配置スタイルを制御する 4 つのクラス名

から を定義します。 ☑ .text-left：

左揃え ☑ .text-center：

中央揃え ☑ .text-right:

右揃え ☑ .text-justify：

両端を揃えます

テキスト スタイルを使用すると、レイアウト効果がより明確かつ簡潔になり、作品でよりシンプルで寛大なテキスト スタイルを使用して、作品をより目立たせることができると思います。