bootstrap< Basic three > typesetting

Original:bootstrap< basic three > typesetting

Bootstrap uses Helvetica Neue, Helvetica, Arial, and Sans-serif as their default font stacks.

Using the Bootstrap layout feature, you can create headings, paragraphs, lists, and other inline elements.

Title

All of the HTML headings (H1 to H6) are defined in Bootstrap. Take a look at the following example:

<! DOCTYPE html>
The results are as follows:
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:
<! DOCTYPE html>
The results are as follows:
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:
<! DOCTYPE html>
The results are as follows:
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:
 <! DOCTYPE html>
The results are as follows:
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>.
<! DOCTYPE html>
The results are as follows:
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.
<! DOCTYPE html>  Some City, State XXXXX<br>  <abbr title= "Phone" >P:</abbr> (123) 456-7890</address><address >  <strong>full name</strong><br>  <a href= "mailto:#" >[email protected]</a ></address></body>
The results are as follows:
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:
<! DOCTYPE html>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" >source title</cite></small></ Blockquote></body>
The results are as follows:
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.
 
        
 
       
The following example shows a list of these types:
<! DOCTYPE html>
The results are as follows:
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
 
           
 
          
 
         
 
        
Series Articles:Bootstrap < Fundamentals > CSS Overview
bootstrap< Basic two > network system
bootstrap< Basic three > typesetting
bootstrap< basic Four > code
Bootstrap < Fundamentals five > forms
bootstrap< basic six > form
Bootstrap < basic seven > button
Bootstrap < basics eight > pictures
bootstrap< Basic Nine > Auxiliary class
bootstrap< Basic 10 > responsive Utility
bootstrap< Basic 11 > Font icons (glyphicons)
Bootstrap < Basics 12 > drop-down menu (dropdowns)
bootstrap< Basic 13 > button Group
bootstrap< Basic 14 > button drop-down menu
bootstrap< Basic 15 > Input Frame Group
bootstrap< basic 16 > Navigation elements
bootstrap< basic 17 > Navigation Bar Bootstrap < basic 18 > Breadcrumb navigation (Breadcrumbs) Bootstrap < Fundamentals 19 > Pagination bootstrap< Basics 20 > Tags Bootstrap < fundamentals 21 > badges (Badges) Bootstrap < basic 22 > Oversized screen (Jumbotron) Bootstrap < basic 23 > page title Header) bootstrap< Basic 24 > Thumbnail Bootstrap < basic 25 > Warning (Alerts) Bootstrap < basic 26 > progress bar
bootstrap< Basic three > typesetting