You can also go to the series list to view the http://www.cnblogs.com/aehyok/p/3404867.html before reading
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:
1. Title
2. Page subject
3. Emphasize
4. Abbreviations
5. Address
6. Reference
7. List
8. Summary
All title tags in Html, from
Heading h1. Bootstrap heading h2. Bootstrap heading h3. Bootstrap heading h4. Bootstrap heading h5. Bootstrap heading h6. Bootstrap heading
Let's look at the results.
You can also include<small>Tag or.smallElement, which can be used to mark subtitles.
Title h1. Bootstrap headingSecondary text h2. Bootstrap headingSecondary text h3. Bootstrap headingSecondary text h4. Bootstrap headingSecondary text h5. Bootstrap headingSecondary text h6. Bootstrap headingSecondary text
Bootstrap will be globalfont-sizeSet to 14px,line-heightIt is 1.428. These attributes are directly assigned<body>And all section elements. In addition,<p>The margin (margin) (that is, 10px) at the bottom of the 1/2 rows is also set ).
Page subject
The results are obvious.
Lead body copy
Add.leadThe section can be highlighted.
Lead Body Copy
By comparing with the above page, we can see the obvious effect.
Directly use the highlighted tags in HTML and give them a few styles.
1. Small textFor inline or block text that does not need to be emphasized, use<small>Label package. The text in it is set to 85% of the font size of the parent container. Nested<small>Elements are set to differentfont-size.
You can also assign.smallTo replace any<small>Label.
This line of text is meant to be treated as fine print.2. Focus on
Emphasize a piece of text by adding font-weight.
rendered as bold text3. Italics
Highlight a piece of text in italic.
rendered as italicized text4. Alignment class
Text alignment class allows you to easily re-align text.
Left aligned text.Center aligned text.Right aligned text.
Obviously, the first row is left aligned, the second row is centered, and the third row is right aligned.
5. Emphasize classThese 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.
Emphasize Class Maecenas sed diam eget risus varius blandit sit amet non magna. maecenas sed diam eget risus varius blandit sit amet non magna .. maecenas sed diam eget risus varius blandit sit amet non magna. maecenas sed diam eget risus varius blandit sit amet non magna .. maecenas sed diam eget risus varius blandit sit amet non magna... maecenas sed diam eget risus varius blandit sit amet non magna.
When you hover the mouse over the abbreviation and abbreviation, the complete content is displayed. Bootstrap implements<abbr>Enhance the style of the element. Abbreviation elementtitleProperties, the appearance is a shallow dashed line. When you move the cursor over it, it will become 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.
If you want to see the complete content, you can hover the mouse over the abbreviation, but you need to includetitleAttribute.
attr
If you see the effect, you cannot cut the image.
InitialismAdd abbreviations.initialismYou can set the font-size to a smaller value.
HTML
You can view the results only by yourself.
Display the contact information in the format closest to that used in daily use. Add at the end of each line<br>You can retain the desired style.
Twitter, Inc. P: Full Name first.last@example.com
Reference content from other sources in your document.
Reference of the default StyleConvert any HTMLWrapped in<blockquote>Can be represented as reference. For direct reference, we recommend that you use<p>Label.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.Reference options
For standard<blockquote>You can use several simple variants to change the style and content.
Name Source: add<small>Label to indicate the reference source. The source name can be placed in<cite>Label.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous in Source Title
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Moving the amount to the right alignment, of course, also has the corresponding pull-left.
Unordered list
An element of a column that is irrelevant to the order.
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
This is obviously the same as Html.
Ordered listA group of elements that are of critical sequence.
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Similarly, ordered list.
No style listRemoved the defaultlist-styleA group of elements of the style and left margin (for direct child elements only ).This is for direct sub-elementsThat is to say, you need to add this class to all nested lists to have the same style.
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametInline list
Setdisplay: inline-block;Add a small number of inner supplements to place all elements in the same column.
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Of course, the effect is on one line.
DescriptionList of phrases with descriptions.
.Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet
Remember that this tag also exists in Html.
Horizontal description.dl-horizontalAllows<dl>The internal phrase and its description are arranged in one row. Start with an image<dl>The default style is stacked together and arranged in the same way as the navigation bar expands gradually.
<dl class="dl-horizontal"> <dt>.Lorem ipsum dolor sit amet</dt> <dd>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet</dd> </dl>
It is mainly a simple review. It should not be a problem if you are familiar with the application.
This article has been updated to the http://www.cnblogs.com/aehyok/p/3404867.html in the Series
Finally, I want to add another knowledge point, which may be used in some cases.
Inline code:Pass<code>Label packages inline style code snippets.
For example, section should be wrapped as inline.
Simple Effect
Quick Basic code:Multiple lines of code can be used<pre>Label. To correctly display the Code, be sure to escape the angle brackets.
pSample text here.../p
Simple Effect
You can also use.pre-scrollableClass, which is used to set max-height to 350px and display the scroll bar in the vertical direction.
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
