Comprehensive Analysis of Bootstrap typographical usage (text style) _ javascript skills

This article comprehensively analyzes the use of Bootstrap layout. This article focuses on text style settings in Bootstrap layout. If you are interested, refer I. Paragraph

A paragraph is another important element in typographical layout. In Bootstrap, a global text style is set for the text (the text here refers to the text ):

1. The global text font size is 14px (font-size ).

2. The line height is 1.42857143 (line-height), which is about 20px (You may have doubts when you see a string of decimal places. In fact, it is calculated by the LESS compiler, of course, Sass also has this function ).

3. The color is dark gray (#333 );

Ii. Text Style

In actual projects, some important texts that you want to emphasize will be processed separately. Bootstrap also makes some lightweight processing on this part.

To highlight a paragraph p, you can add the class name ". the role of lead is to increase the text font size, bold text, and the line height and margin are also processed accordingly.

1. Bold:In Bootstrap, you can useAndLabel to make the text bold directly.

2. italic:In Bootstrap, you can useOrText italic.

Iii. Emphasis class

. Text-muted:Tip: Use light gray (#999)
. Text-primary:Mainly, use blue (# 428bca)
. Text-success:Succeeded. Use light green (# 3c763d)
. Text-info:Notification Information, with light blue (# 31708f)
. Text-warning:Warning, use yellow (# 8a6d3b)
. Text-danger:Dangerous, use brown (# a94442)

. Text-muted effect
. Text-primary effect
. Text-success Effect
. Text-info Effect
. Text-warning effect
. Text-danger Effect

The effect is as follows:

Iv. Text alignment

Text alignment is indispensable in typographical layout. In CSS, text-align is often used to set the text align style. There are four main styles:

☑Left alignment,Value: left

☑Center alignment,Value center

☑Right alignment,Set the value to right.

☑Alignment at both ends,Value: justify

Bootstrap usesDefine four class namesTo control the text alignment style:

☑. Text-left:Left aligned

☑. Text-center:Center alignment

☑. Text-right:Right alignment

☑. Text-justify:Alignment at both ends

With the text style, the typographical effect is clearer and more concise. We hope that you can use some simple and generous text styles in your work to make the work stand out and be more attractive.