Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.
Key points for learning:
1. Page layout
In this lesson, we will mainly learn the layout style in Bootstrap global CSS style, including title, page body, alignment, list and other general content.
one. Page layout
Bootstrap provides some styles of regular design page layout for developers to use.
1. Page body
Bootstrap sets the global font-size to 14px, the line-height line height is set to 1.428 (i.e. 20px); the paragraph element is set to equal 1/2 line height (i.e. 10px); the color is set to #333.
//Create a text with paragraph highlighted <p>Bootstrap framework</p><p>Bootstrap framework</p><p>Bootstrap framework</p><p>Bootstrap framework</p><p>Bootstrap framework</p><p>Bootstrap framework</p>
2. Title
//From h1 to h6<h1>Bootstrap framework</h1>//36px<h2>Bootstrap framework</h2>//30px<h3>Bootstrap framework</h3>//24px<h4>Bootstrap framework</h4>//18px<h5>Bootstrap framework</h5>//14px<h6>Bootstrap framework</h6>//12px
We learned from Firebug that Bootstrap refactored h1 ~ h6 respectively, and also supports the definition of class=(.h1 ~ h6) for ordinary inline elements to achieve the same function.
//Inline elements use title font <span>Bootstrap</span>
Note: When viewing elements through Firebug, you can also see that the font color, font style, and line height are all fixed, thus ensuring uniformity. The native one will be determined based on the preferred font built in the system, and the color is the blackest.
Between h1 ~ h6 elements, a small element can also be embedded as a subtitle.
//Insert small element in the title element <h1>Bootstrap framework <small>Bootstrap subtitle</small></h1><h2>Bootstrap framework <small>Bootstrap subtitle</small></h2><h3>Bootstrap framework <small>Bootstrap subtitle</small></h3><h4>Bootstrap framework <small>Bootstrap subtitle</small></h4><h5>Bootstrap framework <small>Bootstrap subtitle</small></h5><h6>Bootstrap framework <small>Bootstrap subtitle</small></h6>
Through Firebug viewing, we found that the size of the small element under h1 ~ h3 only accounts for 65% of the parent element. Then through calculation (see the style calculated by Firebug), the small element under h1 ~ h3 is 23.4px, 19.5px, and 15.6px; the size of the small element under h4 ~ h6 only accounts for 75% of the parent element, namely: 13.5px, 10.5px, and 9px. The small style under h1 ~ h6 has also been changed, the color has become light gray: #777, the row height is 1, and the thickness is 400.
3. Inline text elements
//Add marks, <mark>elements or .mark class <p>Bootstrap<mark>frame</mark></p> //A variety of text with lines <del>Bootstrap</del>//Deleted text <s>Bootstrap framework</s>//Useless text <ins>Bootstrap framework</ins>//Insert text <u>Bootstrap framework</u>//The effect is the same as above, underlined text//A variety of text with emphasis <small>Bootstrap framework</small>//85% of the standard font size <strong>Bootstrap framework</strong>//Bold 700<em>Bootstrap framework</em>//Tilt
4. Align
//Set text alignment <p>Bootstrap framework</p>//On the left <p>Bootstrap framework</p>//Center <p>Bootstrap framework</p>//On the right <p>Bootstrap framework</p>//Aligned at both ends, poor support <p>Bootstrap framework</p>//No line wrapping
5.Case
//Set English text case <p>Bootstrap framework</p> //Lowercase <p>Bootstrap framework</p> //Uppercase <p>Bootstrap framework</p> //Uppercase <p>Bootstrap framework</p>//Original letter capitalization
6. Abbreviation
//Abbreviation Bootstrap<abbr>Frame</abbr>
7. Address text
//Set the address, remove the tilt, set the row height, bottom 20px<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr>P:</abbr> (123) 456-7890</address>
8. Quote text
//Default style reference, add edge lines, set font size and inner and outer margins<blockquote> Bootstrap framework</blockquote> //Reverse<blockquote> Bootstrap framework</blockquote>
9. List layout
//Move out the default style <ul> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li></ul> //Set inline <ul> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li></ul> //List the description list horizontally <dl> <dt>Bootstrap</dt> <dd>Bootstrap provides some styles for developers to use. </dd></dl>
10. Code
//Inline code <code><section></code> //User input press <kbd>ctrl + ,</kbd> //Code block <pre><p>Please input...</p></pre>
Bootstrap also lists <var> for markup variables and <samp> for program output, but CSS is not re-rewrited.
The above is the relevant knowledge about Bootstrap page layout style introduced to you by the editor. I hope it will be helpful to you!