2nd Chapter Layout Style

Learning Essentials:
1. Page layout

Keynote Teacher: Li Tinghui

In this lesson, we mainly study the layout style in the Bootstrap global CSS style, including the general contents of title, page body, alignment, list and so on.

A Page layout
Bootstrap provides a number of general-designed page layout styles for developers to use.
1. page Body
Bootstrap set the global font-size to 14px,line-height row height to 1.428 (that is, 20px);<p> paragraph elements are set equal to 1/2 rows high (that is, 10px), and the color is set to #333.
Create text that contains paragraph highlighting
<p>bootstrap Frame </p>
<p class= "lead" >bootstrap frame </p>
<p>bootstrap Frame </p>
<p>bootstrap Frame </p>
<p>bootstrap Frame </p>

2. Title
From H1 to H6

As we learned from the Firebug view element, Bootstrap has a CSS-style refactoring of H1 to H6, and also supports the common inline element definition class= (. h1 ~ h6) to achieve the same functionality.
Inline elements use heading fonts
<span class= "H1" >Bootstrap</span>

Note: Through the Firebug view element also see, font color, font style, line height are fixed, thus ensuring the unity, and the original will be based on the system's preferred font is determined, the color is the most black.

Between the H1 ~ h6 elements, you can also embed a small element as a subtitle,
Inserting a small element inside a CAPTION element

Looking through Firebug, we found that the small element of the H1 ~ H3 only accounts for 65% of the parent element, then by calculation (see Firebug calculated style), H1 ~ H3 is 23.4px, 19.5px, small ~ h6 the size of the small element only accounts for 75% of the parent element, respectively: 13.5px, 10.5px, 9px. The small style under H1 ~ h6 has also been changed to a light gray color: #777, Row height is 1, and roughness is 400.

3. Inline text elements
Add tag,<mark> element or. Mark Class
<p>Bootstrap<mark> Frames </mark></p>

Various lines of text
<del>bootstrap Frame </del>//deleted text
<s>bootstrap Frame </s>//Useless text
<ins>bootstrap frame </ins>//Inserted text
<u>bootstrap frame </u>//effect Ibid., underlined text

A variety of stressed texts
<small>bootstrap frame </small>//85% of standard font size
<strong>bootstrap Frame </strong>//Bold 700
<em>bootstrap Frame </em>//Tilt

4. Align
Set text alignment
<p class= "Text-left" >bootstrap frame </p>//left
<p class= "Text-center" >bootstrap frame </p>//Center
<p class= "Text-right" >bootstrap frame </p>//Right
<p class= "text-justify" >bootstrap frame </p>//justified, poor support <p class= "Text-nowrap" >bootstrap frame </p >//No Line break

5. Case
Set English text to case
<p class= "Text-lowercase" >bootstrap frame </p>//lowercase
<p class= "Text-uppercase" >bootstrap frame </p>//Uppercase
<p class= "Text-capitalize" >bootstrap frame </p>//First letter capitalization

6. Abbreviations
Abbreviations
Bootstrap<abbr title= "Bootstrap" class= "initialism" > Frames </abbr>

7. Address text
Set the address, remove the tilt, set the row height, the bottom 20px
<address>
<strong>twitter, inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title= "Phone" >P:</abbr> (123) 456-7890
</address>

8. Reference text
Default style reference, added do edges, set font size and internal and external margins
<blockquote>
Bootstrap Frame
</blockquote>

Reverse
<blockquote class= "Blockquote-reverse" >
Bootstrap Frame
</blockquote>

9. List layout
Move out of the default style
<ul class= "list-unstyled" >
<li>bootstrap Frame </li>
<li>bootstrap Frame </li>
<li>bootstrap Frame </li>
<li>bootstrap Frame </li>
<li>bootstrap Frame </li>
</ul>

Set as inline
<ul class= "List-inline" >
<li>bootstrap Frame </li>
<li>bootstrap Frame </li>
<li>bootstrap Frame </li>
<li>bootstrap Frame </li>
<li>bootstrap Frame </li>
</ul>

Horizontal Arrangement Description List
<DL class= "Dl-horizontal" >
<dt>Bootstrap</dt>
<dd>bootstrap provides a number of general-designed page layout styles for developers to use. </dd>

</dl>

10. Code
Inline code
<code>&lt;section&gt;</code>

User input
Press <kbd>ctrl +,</kbd>

code block
<pre>&lt;p&gt; Please input...&lt;/p&gt;</pre>

Bootstrap also lists the <var> representation of the tag variable,<samp> the program output, except that the CSS is not re-replicated.

2nd Chapter Layout Style