Bootstrap layout and bootstrap text Layout
Previous
This article describes in detail the typographical content in Bootstrap.
Title
[H]
All title tags in HTML,ToAvailable
By default, the font-size from h1 to h6 is as follows:
2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
In the initial condition, 1em = 16px, the conversion is as follows:
32px -> 24px -> 18.72px -> 16px -> 13.28px -> 10.72px;
Bookers reset the font-size of the h1-h6, as shown below
36px -> 30px -> 24px -> 18px -> 14px -> 12px;
In addition.h1To.h6Class, in order to give the title style to the text of the inline (inline) attribute, except for the display attribute, other attributes are the same as the
h1,.h1{ font-size: 36px; margin-top: 20px; margin-bottom: 10px; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;} [Small]
You can also include<small>Label or assign.smallCan be used to mark the subtitle. <Small> labels and. small Class elements have the same style
h1 small,.h1 small, h1 .small, .h1 .small{ font-size: 65%; font-weight: normal; line-height: 1; color: #777;} <H1> Title 1 <small> subtitle 1 </small>
Section
[Body]
By default, the page font-size is 16px, and the line height (in chrome) is 1.334.
Bootstrap will be globalfont-sizeSet to 14px,line-heightSet to 20px. These attributes are directly assigned<body>Elements and all paragraph Elements
body{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #333; background-color: #fff;
margin:0;}
[P]
In addition,<p>The (section) element is also set to the bottom margin (margin) equal to 1/2 rows (that is, 10 px)
p{ margin: 0 0 10px;}
[. Lead]
Add.leadClass to highlight a paragraph
.lead { margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4;}
<P> general content </p> <p class = "lead"> central content </p> <p> general content </p>
Inline text
Mark text]
Text needs to be marked, use the <mark> label
mark, .mark { padding: .2em; background-color: #fcf8e3;}
Delete text]
Use the <del> label for the deleted text
[Useless text]
Use the <s> label for useless text
Insert text]
Use the <ins> label to insert additional text.
[Underlined text]
Add an underline to the text and use the <u> label
[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 the. small class to the row element to replace any <small> element.
small, .small { font-size: 85%;}
[Emphasis]
Emphasize a piece of text by adding the font-weight Value
[Italic]
Highlight a piece of text in Italic
[Note] <B> and <I> labels can be safely used in HTML5. <B> it is used to highlight words or phrases without any significance. <I> tags are mainly used for speeches and technical words.
<div> You can use the mark tag to <mark>highlight</mark> text.</div><div> <del>This line of text is meant to be treated as deleted text.</del></div><div> <s>This line of text is meant to be treated as no longer accurate.</s></div><div> <ins>This line of text is meant to be treated as an addition to the document.</ins></div><div> <u>This line of text will render as underlined</u></div><div> <small>This line of text is meant to be treated as fine print.</small></div><div> <strong>rendered as bold text</strong></div><div> <em>rendered as italicized text</em></div>
Alignment
Text alignment class allows you to easily realign text
.text-left { text-align: left;}.text-center { text-align: center;}.text-right { text-align: right;}.text-justify { text-align: justify;}.text-nowrap { white-space: nowrap;}
<p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p><p class="text-nowrap">No wrap text.</p>
Case sensitivity
These classes can change the case sensitivity of text.
.text-lowercase { text-transform: lowercase;}.text-uppercase { text-transform: uppercase;}.text-capitalize { text-transform: capitalize;}
<p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p>
Abbreviations
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 the mouse over the abbreviation (this is also visible to users using the auxiliary technology), but it must contain the title attribute.
[Basic abbreviations]
abbr[title], abbr[data-original-title] { cursor: help; border-bottom: 1px dotted #777;}
[Abbreviations]
Add abbreviations.initialismClass to make the font-size slightly smaller
.initialism { font-size: 90%; text-transform: uppercase;}
<abbr title="attribute">attr</abbr><abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Address
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.
address { margin-bottom: 20px; font-style: normal; line-height: 1.42857143;}
<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<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>
Reference
[Reference of the default style]
Wrap any HTML element in <blockquote> to show a reference style. For direct reference, we recommend that you use the <p> label
blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee;}
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>
[Multiple reference styles]
For standard <blockquote>, you can use several simple variants to change the style and content.
1. Naming Source
Add <footer> to indicate the reference source. The source name can be enclosed in the <cite> label.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote>
2. Another display style
By assigning the. blockquote-reverse class, you can make the reference to display the right-aligned effect of the content.
<blockquote class="blockquote-reverse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote>
.blockquote-reverse, blockquote.pull-right { padding-right: 15px; padding-left: 0; text-align: right; border-right: 5px solid #eee; border-left: 0;}
List
[Unordered list]
An element of a column that is irrelevant to the order
ul, ol { margin-top: 0; margin-bottom: 10px;
<ul> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li></ul>
[Ordered list]
A group of elements that are of critical sequence.
<ol> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit</li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li></ol>
[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 to say, you need to add this class to all nested lists to have the same style.
.list-unstyled { padding-left: 0; list-style: none;}
<ul class="list-unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li></ul>
[Inline list]
Place all elements in the same row by setting display: inline-block and adding a small number of padding (padding)
.list-inline { padding-left: 0; margin-left: -5px; list-style: none;}
<ul class="list-inline"> <li>Lorem ipsum</li> <li>Phasellus iaculis</li> <li>Nulla volutpat</li></ul>
[Description]
List of phrases with descriptions.
dl { margin-top: 0; margin-bottom: 20px;}dt { font-weight: bold;}dt, dd { line-height: 1.42857143;}dd { margin-left: 0;}
<dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd></dl>
Description of horizontal arrangement]
. Dl-horizontal can arrange the phrases and their descriptions in <dl> in a row. The default style of <dl> is stacked together and arranged in a row as the navigation bar expands
.dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap;}.dl-horizontal dd { margin-left: 180px;}
<dl class="dl-horizontal"> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dt>Felis euismod semper eget lacinia</dt> <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd></dl>
Code
[Inline code]
Use the <code> label to wrap the inline style code snippet.
code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px;}
[User input]
The <kbd> label is used to mark the content entered by the user through the keyboard.
kbd { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #333; border-radius: 3px; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);}
[Code block]
The <pre> label can be used for multiple lines of code. To correctly display the Code, be sure to escape the angle brackets.
pre { display: block; padding: 9.5px; margin: 0 0 10px; font-size: 13px; line-height: 1.42857143; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px;}
You can also use.pre-scrollableClass, which is used to set max-height to 350px and display the scroll bar in the vertical direction.
.pre-scrollable { max-height: 340px; overflow-y: scroll;}
Variable]
Tag variables using the <var> label
Program output]
The <samp> label is used to mark the output content of the program.
<div> For example, <code><section></code> should be wrapped as inline.</div><div> To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd></div><div> <pre><p>Sample text here...</p></pre></div><div> <pre class="pre-scrollable"><p>Sample text here...</p></pre></div><div> <var>y</var> = <var>m</var><var>x</var> + <var>b</var></div><div> <samp>This text is meant to be treated as sample output from a computer program.</samp></div>
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
