Are you proficient in Bootstrap predefined typographical classes that require flexibility ?, Flexible understanding of bootstrap

Are you proficient in Bootstrap predefined typographical classes that require flexibility ?, Flexible understanding of bootstrap

With the typographical class pre-processed by the Bootstrap front-end framework, we do not have to write a lot of CSS code for each typographical Tag Element. We can use the typographical feature of Bootstrap, you can create titles, paragraphs, lists, and other inline elements with predefined styles to create a standard web page.

Next, let's take a look at how the bootstrap front-end framework predefines the typographical classes for us?

First:Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif as their default font stacks. These fonts are the most frequently used fonts on all webpages. From then on, we no longer need to define the global style font style for the body. As long as the Bootstrap front-end framework font-family is used, the above font series is used by default.
That is, font-family: sans-serif;
Let's verify it and open the framework cssfile bootstrap.css of the bootstrapfront end.

 

Dear friends, can we only use the default fonts of the bootstrap front-end framework? Obviously not. I will teach you how to customize the bootstrap framework and create the bootstrap framework that we like and want to implement.

Second:The bootstrapfront-end framework pre-defines the h1-h6cssformat. I extracted a part of the defined style from the bootstrapfront-end framework cssfile bootstrap.css, and we can see that the font-size attribute values are defined for hn respectively.
H1 {font-size: 36px ;}
H2 {font-size: 30px ;}
H3 {font-size: 24px ;}
H4 {font-size: 18px ;}
H5 {font-size: 14px ;}
H6 {font-size: 12px ;}
The actual effect is as follows:
Webpage code:

 

Webpage effect:

Third:Inline sub-title. To add an inline sub-title to any title, simply add <small> or. small class, so that you can get a text with a smaller font size and a lighter color, as shown in the following example:

Webpage code:

 

Webpage effect:

 

Fourth:Guide the subject copy. To add emphasized text to the section, you can add class = "lead", which will produce larger and higher texts, as shown in the following example:

Webpage code:

 

Webpage effect:

The following bootstrap front-end framework class is no longer used as an example. I only use it for writing, because it can be used as shown in the following example to test the effect.

Fifth:Emphasize: by default, HTML emphasize labels <small> (set the text to 85% of the size of the parent text) and <strong> (set the text to a more rough text), <em> (set the text to italic ).

Sixth:Abbreviation: HTML elements provide tags for abbreviations, such as WWW or HTTP. Bootstrap defines the <abbr> element style as a dotted border that is displayed at the bottom of the text, the complete text is displayed when you move the cursor over it (as long as you have added text to the <abbr> title attribute ). To get a smaller text, add. initialism to <abbr>.

Seventh:Address: Use the <address> label to display the contact information on the webpage. Because <address> the default value is display: block;, you need to use tags to add line breaks to closed address texts.

Eighth:You can use the default <Blockquote> next to any HTML text. Other options include adding a <small> label to identify the reference source and using class. pull-right to reference right. The following example demonstrates these features:

Ninth:List
Bootstrap supports ordered list, unordered list, and definition list.
 Ordered list:An ordered list is a list that starts with a number or other ordered characters.
 Unordered list:Unordered list refers to a list that does not have a specific order and starts with a duplicate number in the traditional style. If you do not want to display the duplicate numbers, you can use class. list-unstyled to remove the style. You can also put all list items in the same row by using class. list-inline.
 Definition list:In this type of list, each list item can contain <dt> and <dd> elements. <Dt> stands for defining a term, just like a dictionary, which is defined as a (or phrase ). Next, <dd> is the description of <dt>. You can use classdl-horizontal to display the attributes in the <dl> row along with the description.
For more bootstrap front-end frameworks, you must be familiar with the following skills.

. Lead to highlight a paragraph
. Small: Set small text (set to 85% size of parent text)
. Text-left: Set the left alignment of text.
. Text-center: set text center alignment
. Text-right: right-aligned text
. Text-justify: sets text alignment. text in a section that exceeds the screen is automatically wrapped.
. Text-nowrap section beyond the screen section does not wrap
. Text-lowercase: set lower-case text
. Text-uppercase: Set uppercase text
. Text-capitalize: upper-case letters
The text displayed in the <abbr> element in initialism is displayed in a small font.
. Blockquote-reverse sets the right alignment of the Reference
. List-unstyled removes the default list style. The list items are left aligned (<ul> and <ol> ). This class is only applicable to direct sub-list items (if you need to remove nested list items, you need to use this style in the nested list)
. List-inline: Place all list items in the same row
The. dl-horizontal class is set to float and offset and applied to <dl> elements and <dt> elements. You can view the instance for specific implementation.
. Pre-scrollable enables the <pre> element to scroll scrollable

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.