Typesetting of Bootstrap

Title

1. H1. H1 <small> emphasis on contentIf you want to make a paragraph PHighlighted, you can add the class name by adding the . Lead"Implementation, which is to increase the text size, bold text, and the line Takawa marginAlso do the corresponding treatment Bold BodyBold is to give the text bold, in ordinary elements we generally use the font-weight set to bold keyword text bold. In bootstrap, you can use the <b>And <strong>Label makes text bold directly  Italic BodyIn addition to setting styles for elements Font-styleValue is ItalicImplementation, you can also use the label in the bootstrap <em>Or <i>To achieve. emphasis on related classes

In Bootstrap, in addition to the use of labels <strong>, <em> and other descriptions of the importance of certain words and sentences, bootstrap also defines a set of class names, which is called the emphasis class name (similar to the previous ". lead "), these emphasis classes are highlighted by color, with this note as follows:

• . text-muted: Tip, use light grey (#999)
• . Text-primary: Main, using blue (#428bca)
• . text-success: Success, using light green (#3c763d)
• . TEXT-INFO: Notification information, using light blue (#31708f)
• . text-warning: Warning, using yellow (#8a6d3b)
• . Text-danger: Dangerous, using Brown (#a94442)

. text-muted effects-text-primary effects-text-success effects-text-info effects-text-warning effects-Text-danger effects Text alignment style

Bootstrap controls the alignment style of text by defining four class names:

? . Text-left: Left Justified

? . Text-center: Center Alignment

? . Text-right: Right-justified

? . Text-justify: Justify on both sides

Special statement: At present, both sides of the alignment in the browser under the resolution of the different, especially when applied to Chinese text. So the project is used with caution.   List

In an HTML document, there are three main types of list structures: sequential, unordered, and definition lists. The specific label used is described below:
Unordered list

<ul>    <li>...</li></ul>

Ordered list

<ol>    <li>...</li></ol>

Definition List

<dl>    <dt>...</dt>    <dd>...</dd></dl>

Bootstrap provides a list of six forms based on the usual usage situation:

? General List

? Ordered list

? Go to Dot List

? Inline list

? Description List

? Horizontal Description List

Lists can also be nested in bootstrap. By adding a class name to an unordered list " . list-unstyled", so you can remove the default style of the list style, and also the list default left inner marginAlso Qing 0。 Note: The class name " . list-unstyled"is added in Ol ul and so on above, and not on Li above bootstrap like to go to the point list, by adding the class name" . List-inline"To implement the inline list, simply say Change the vertical list to a horizontal list， and remove bullets (numbering)， Maintain horizontal display。 It can also be said that inline lists are created for horizontal navigation. Note: The class name " . List-inline"is added on the ol UL and so on above, not on the li above for the definition list, Bootstrap did not make much adjustment, just adjusted the Line Spacing， outer marginAnd Font BoldEffect. Level definition list Just like inline lists, bootstrap can add class names to <dl> " . Dl-horizontal"Displays the effect horizontally for the definition list. Only the screen Greater than 768px, add the class name " . Dl-horizontalTo have the horizontal definition list effect when the title width exceeds 160px, three ellipses will be displayed   CodeOften used on personal blogs more frequently, to show the style of the code. In Bootstrap, we mainly provide Three styles of code：
1. Use <code></code>To display single-line inline code
2. Use <pre></pre>To display multi-line block codes
3. Use <kbd></kbd>To display user input code when using code, users can use different types according to their specific needs:
1. <code>: It is generally aimed at single word or single sentenceThe Code
2. <pre>: It is generally aimed at multiple lines of code(i.e. block code)
3. <kbd>: It is generally expressed in What users want to enter via the keyboardNo matter which code style you use, you encounter the less than sign (<) in your code to use hard-coded“ &lt;"To replace, greater than (>) use" &gt;"To replace. And for the <pre> code block style, how many spaces are left in front of the label, and how many spaces will be left in the display effect. You just need to add the class name to the pre tag. . Pre-scrollable, you can control the maximum height of the code block area 340px, once this height is exceeded, it is scroll bar appears on Y axis。 TableBootstrap provides a table of 1 Basic StylesAnd 4 Additional StylesAnd a table that supports responsive expressions。 Mainly include:

? . Table: Base table

? . table-striped: Zebra crossing table

? . table-bordered: Table with borders

? . Table-hover: Table with mouse hover highlighting

? . table-condensed: Compact Form

? . table-responsive: Responsive table

Note: The class name is added to the table, and all the. Table classes are required. ". Table" is a basic table, but it also modifies the style of the default table, which has three main functions:

? Set the margin-bottom:20px for the table and set the cell padding

? A 2px grey solid line is set at the bottom of the thead.

? A 1px light gray line is set at the top of each cell

Bootstrap is also the row element of the table <tr>Provides five different class names, each of which controls the different background colors of the row, as shown in the following table:

class name	Description
. Active	Represents information for the current activity
. Success	To indicate success or correct behavior
. info	Information or behavior that is neutral
. Warning	To indicate a warning, need special attention
. Danger	An act that indicates danger or may be wrong

In addition, the Class name "table" is inseparable regardless of which form is produced. So when you use the bootstrap form, be aware that the class name "table" must not be missing from your <table> element. From: http://www.imooc.com/learn/141

Typesetting of Bootstrap