Bootstrap study notes--bootstrap the use of typesetting class

Title

Bootstrap defines the style of all HTML headings (H1 to H6), which is no different from normal HTML. Take a look at the following example:

Inline sub-caption
If you need to add an inline subtitle to any heading, simply add the <small> on either side of the element, or add the . Small class, so you can get a lighter text with a smaller font size, as shown in the following example:
    <div class= "Text-center" >        
Display effect:
Boot principal copy
To add accent text to a paragraph, you can add class= "lead", which will get larger, thicker, higher-line text, as shown in the following example:
    class="text-center">        Class= "  Lead "> India wants to send more troops to South China, India to increase troop increase in South Tibet Chinese female soldiers to India to increase troop increase in South Tibet Chinese women in India to increase troops in South Tibet Chinese Women in India              Chinese women in India to increase troops in South Tibet Chinese Women in             India to increase the increase in South Tibet Chinese women in India to increase the increase in South Tibet Chinese women in India to increase the increase in South Tibet Chinese women in India to increase the surge of South Tibet Chinese Women </p>    </div>
Display effect:
Emphasize
The default Accent label for HTML <small> (set text to 85% of the parent text size), <strong> (set text to be thicker), <em> (set Text to italic).
Bootstrap provides some classes for emphasizing text, as shown in the following example:
<small> our content is within the label </small><br> <strong> our content is within the tag </strong><br> <em> Our content is within the label and rendered as italic </em><br> <pclass="Text-left"> Left align align </p> <pclass="Text-center"> Center aligned align </p> <pclass="Text-right"> Right align Align </p> <pclass="text-muted"> The bank's content is weakened </p> <pclass="text-primary"> The contents of the bank with a primaryclass</p> <pclass="text-success"> The contents of the bank with a successclass</p> <pclass="Text-info"> The bank's content comes with an infoclass</p> <pclass="text-warning"> The contents of the bank with a warningclass</p> <pclass="Text-danger"> The contents of the bank with a dangerclass</p>
Display effect:
Abbreviation
HTML elements provide tags for abbreviations, such as WWW or HTTP. The style of the Bootstrap definition <abbr> element is a dashed border that appears at the bottom of the text, and the full text is displayed when the mouse hovers over it (as long as you add text to the <abbr> title property). In order to get text for a smaller font, add. initialism to <abbr>.
    <abbr title="WorldWide Web">WWW</abbr><br>    <abbr title="  Real Simple Syndication"class="initialism " >RSS</abbr>
Display effect:
Address
With the <address> tab, you can display contact information on a Web page. Since <address> defaults to Display:block, you need to use
Label to add a line break for the enclosing address text.
    <address>        <strong>some Company, inc.</strong><br>        007 street<br>         Some City, State XXXXX<br>        <abbr title="Phone">p:</ Abbr>        (123456-7890    </address>
Display effect:
References (Blockquote)
You can use the default <blockquote> next to any HTML text. Other options include adding a <small> tag to identify the source of the reference, using Class. pull-right to align the reference to the right. The following examples demonstrate these features:
<blockquote><p> This is a default reference instance. This is a default reference instance. This is a default reference instance. This is a default reference instance. This is a default reference instance. This is a default reference instance. This is a default reference instance. This is a default reference instance.   in <cite title="Source title"class="pull-right  " in <cite title="Source title">source title</cite ></small></blockquote>
Display effect:
List
Bootstrap supports ordered, unordered, and defined lists.

 
  

  
   
 
    
Sequential Tables : A list of sequential tables refers to lists that begin with numbers or other ordered characters.
 
    
unordered list: Unordered lists are lists that do not have a particular order, and are lists that begin with a traditional style of emphasis. If you do not want to display these emphasis numbers, you can use class. list-unstyled to remove the style. You can also put all the list items on the same line by using the class . List-inline .
 
    
definition list : In this type of list, each list item can contain <dt> and <dd> elements. <dt> stands for defining terms , just like dictionaries, which are defined as belonging (or phrases). Then,<dd> is the description of <dt>. You can use class Dl-horizontal to display the descriptions in <dl> rows side-by-side.
 
   
 
  
1</li> <li>item2</li> <li>item3</li> <li>item4</li></ol>1</li> <li>item2</li> <li>item3</li> <li>item4</li></ul>class="list-unstyled"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li></ul>class="List-inline"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li></ul>1</dt> <dd>item1</dd> <dt>description2</dt> <dd>item2List of definitions for </dd></dl>class="Dl-horizontal"> <dt>description1</dt> <dd>item1</dd> <dt>description2</dt> <dd>item2</dd></dl>
Display effect:
More Typesetting classes
The following table provides examples of Bootstrap more typographic classes:

 
  

  
   
 
    
 
     
class
 
     
Description
 
    
 
    
 
     
. Lead
 
     
Make a paragraph appear highlighted
 
    
 
    
 
     
. Small
 
     
Set Wenben (set to 85% size of parent text)
 
    
 
    
 
     
. text-left
 
     
Set text to align Left
 
    
 
    
 
     
. text-center
 
     
Set Text Center alignment
 
    
 
    
 
     
. text-right
 
     
Set text right-aligned
 
    
 
    
 
     
. text-justify
 
     
Set text alignment to wrap text in paragraph beyond the screen section
 
    
 
    
 
     
. text-nowrap
 
     
Paragraph beyond the screen part does not break line
 
    
 
    
 
     
. text-lowercase
 
     
Set Text lowercase
 
    
 
    
 
     
. text-uppercase
 
     
Set text capitalization
 
    
 
    
 
     
. text-capitalize
 
     
Set the first letter of the word capital
 
    
 
    
 
     
. initialism
 
     
Text that appears in the <abbr> element is displayed in a small font
 
    
 
    
 
     
. blockquote-reverse
 
     
Set reference right to justify
 
    
 
    
 
     
. list-unstyled
 
     
Removes the default list style, left-aligned in list items (<ul> and <ol>). This class applies only to direct child list items (if you need to remove nested list items, you need to use that style in a nested list)
 
    
 
    
 
     
. list-inline
 
     
Place all list items on the same line
 
    
 
    
 
     
. dl-horizontal
 
     
This class sets up floats and offsets, applies to <dl> elements and <dt> elements, and enables you to view instances
 
    
 
    
 
     
. pre-scrollable
 
     
Enable <pre> elements to scroll scrollable
 
    
 
   
 
  
Bootstrap study notes--bootstrap the use of typesetting class