Home > Developer > JavaScript
Every day, Bootstrap must learn the basics of typographical, and bootstrap basic typographical.
This article mainly focuses on typographical layout. Most of the tags in HTML also exist, so it is relatively simple. To ensure the integrity of the series, we will also take a review and record it. The main content is as follows:
I. Title
All title tags in Html, from
<Div class = "container">
Let's look at the results.
You can also include<Small> label or. small elementCan be used to mark subtitles.
<Div class = "container">
Ii. Page subject
Bootstrap sets the global font-size to 14px and line-height to 1.428. These attributes are directly assigned to <body> and all paragraph elements. In addition, <p> (paragraph) is also set to the bottom margin (10px) equal to the height of 1/2 rows ).<H1 class = "page-header"> page subjectThe results are obvious.
Lead body copy
You can highlight a paragraph by adding. lead.
By comparing with the above page, we can see the obvious effect.
Iii. Emphasize
Directly use the highlighted tags in HTML and give them a few styles.
1. Small text
For inline or block text that does not need to be emphasized, use the <small> label to wrap the text in it, and set it to 85% of the font size of the parent container. The <small> element nested in the title element is set with different font-size values.
You can also assign. small to the row element to replace any <small> label.<small>This line of text is meant to be treated as fine print.</small>2. Focus on
Emphasize a piece of text by adding font-weight.<strong>rendered as bold text</strong>3. Italics
Highlight a piece of text in italic.<em>rendered as italicized text</em>4. Alignment class
Text alignment class allows you to easily re-align text.<p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p>Obviously, the first row is left aligned, the second row is centered, and the third row is right aligned.
5. Emphasize class
These classes are highlighted by colors. It can also be applied to links. When you hover your mouse over a link, its color will become deeper, just like the default link style.<H1> emphasize ClassIv. thumbnails
When you hover the mouse over the abbreviation and abbreviation, the complete content is displayed. Bootstrap implements an enhanced style for the <abbr> elements of HTML. The abbreviation element has the title attribute and its appearance is a shallow dotted box. When you move the cursor over it, it becomes a pointer with a question mark. If you want to see the complete content, you can hover your mouse over the abbreviation, but you need to include the title attribute.
Abbreviations
If you want to see the complete content, you can hover your mouse over the abbreviation, but you need to include the title attribute.<abbr title="attribute">attr</abbr>If you see the effect, you cannot cut the image.
Initialism
You can add. initialism to abbreviations to make their font-size smaller.<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>You can view the results only by yourself.
V. Address
Display the contact information in the format closest to that used in daily use. Add at the end of each line <br> to retain the desired style.<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><address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a></address>
Vi. References
Reference content from other sources in your document.
Reference of the default Style
Wrapping any HTML in <blockquote> is a reference. For direct reference, we recommend that you use the <p> label.<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>
Reference options
For standard <blockquote>, you can use several simple variants to change the style and content.
Naming Source: add the <small> label to indicate the reference source. The source name can be placed in the <cite> label.<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>There will be one more Source Title
Another display styleUse. Pull-rightAllows the reference to show the effect of moving and alignment to the right.
<blockquote class="pull-right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>Moving the amount to the right alignment, of course, also has the corresponding pull-left.
VII,List
Unordered list
An element of a column that is irrelevant to the order.<ul> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>This is obviously the same as Html.
Ordered list
A group of elements that are of critical sequence.<ol> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ol>Likewise, ordered list
No style list
Removed the default list-style and a group of elements on the left margin (for direct sub-elements only ). This is for direct sub-elements, that is, you need to add this class to all nested lists to have the same style.<ul class="list-unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>Inline list
By setting display: inline-block and adding a small number of inner supplements, all elements are placed in the same column.<ul class="list-inline"> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>Of course, the effect is on one line.
The above is all about the basic Bootstrap typographical content. I hope you can read it carefully and learn the extensibility in conjunction with relevant articles.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
