Home > Others

Bootstrap Precautions (ii)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1.Inline Sub-caption

You can also include a <small> tag or an element of the. Small class within the title, which you can use to mark subheadings.

<! DOCTYPE html>

  6. <title>Bootstrap instances-inline subheadings </title>
  8. <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
  12. <body>
  14. I was Heading 1 H1. <small> I was subtitled 1 H1</small>
  16. I was heading 2 H2. <small> I was subtitled 2 H2</small>
  18. I was heading 3 h3. <small> I was subtitled 3 H3</small>
  20. I was heading 4 h4. <small> I was subtitled 4 h4</small>
  22. I was heading 5 h5. <small> I was subtitled 5 h5</small>
  24. I was heading 6 h6. <small> I was subtitled 6 h6</small>
  26. </body>
Page body

Bootstrap sets the global font-size to 14px, Line-height is set to 1.428. These attributes are directly assigned to the <body> element and all paragraph elements. In addition, the,<p> (paragraph) element is also set to the bottom margin (margin) equal to 1/2 rows high (that is, 10px).

Center Content

The paragraph can be highlighted by adding the . lead class.

No, no .Lead:

This is an instance that demonstrates the usage of the boot principal replica. This is an instance that demonstrates the usage of the boot principal replica. This is an instance that demonstrates the usage of the boot principal replica. This is an instance that demonstrates the usage of the boot principal replica. This is an instance that demonstrates the usage of the boot principal replica. This is an instance that demonstrates the usage of the boot principal replica. This is an instance that demonstrates the usage of the boot principal replica. This is an instance that demonstrates the usage of the boot principal replica.

Add a lead:

This is an instance that demonstrates the usage of the boot principal replica. This is an instance that demonstrates the usage of the boot principal replica.

This is an instance that demonstrates the usage of the boot principal replica. This is an instance that demonstrates the usage of the boot principal replica.

This is an instance that demonstrates the usage of the boot principal replica. This is an instance that demonstrates the usage of the boot principal replica.

This is an instance that demonstrates the usage of the boot principal replica. This is an instance that demonstrates the usage of the boot principal replica.

Build with less tools

The two less variables defined in the variables.less file determine the typographic dimensions: @font-size-base and @line-height-base. The first variable defines the global Font-size datum, and the second variable is the Line-height datum. We use these variables and some simple formulas to calculate the margin, padding, and line-height of all the other page elements. Customize these variables to change the default style of Bootstrap.

2.Inline text ElementsMarked text

Highlight run text due to the relevance in another context, use the <mark> tag.

    1. You can use the mark tags to <mark>highlight</Mark> text.
    2. You can use the Mark tag to highlight text. Tag text
Text that was deleted

Use <del> tags for deleted text.

    1. <del> This line of text was meant to betreated as deleted text. </del>
    2. This line of text was meant to be treated as deleted text. Text that was deleted
Useless text

For useless text use <s> tags.

    1. <s> This line of text was meant to betreated as no longer accurate. </s>
    2. This line of text was meant to be treated as no longer accurate. Useless text
Insert text

Additional inserted text using <ins> tags.

    1. <ins> This line of text was meant to being treated as an addition to thedocument. </ins>
    2. This line of text was meant to being treated as an addition to the document. Insert text
underlined text

Underline text, using the <u> tag.

    1. <u> this line oftext would render as underlined</u>
    2. This line of text would render as underlined underlined text
Small text

For text that does not need to be stressed inline or block type, the text in the <small> tag is set to 85% of the font size of the parent container. The <small> elements nested in the caption element are set to different font-size.

You can also assign the. Small class to the inline element in place of any <small> element.

    1. <small> This line of text was meant to betreated as fine print. </small>
    2. This line of text was meant to be treated as fine print. Small text
Focuses on

Emphasize a piece of text by increasing the Font-weight value.

    1. The following snippet of text is<strong>rendered as bold text</Strong >
    2. The following snippet of text is rendered as bold text. Focus on
Italic body

Emphasize a paragraph of text in italics.

    1. The following snippet of text is <em>rendered as italicized text</em .
    2. The following snippet of text is rendered as italicized text. Italic
Alternate elements

<b> and <i> tags can be used with confidence in HTML5. <b> used to highlight words or phrases without any emphasis, while <i> tags are mainly used for speeches, technical vocabulary, etc.

3.Change the case

These classes allow you to change the case of the text.

    1. <p Class="Text-lowercase">lowercased text. </p> lowercased text.
    2. <p Class="Text-uppercase">uppercased text. </p> uppercased TEXT.
    3. <p Class="Text-capitalize">capitalized text. </p> capitalized Text.

4.Abbreviations

The full content is displayed when the mouse hovers over abbreviations and abbreviations, and Bootstrap implements an enhanced style of HTML <abbr> elements. The abbreviation element has the title attribute, which appears as a lighter dashed box with a pointer to a "question mark" when the mouse moves over it. If you want to see the full content you can hover over the abbreviation (also visible to the user using assistive technology), but you need to include the title attribute.

Basic abbreviations

    1. <abbr Title="attribute">attr</abbr>

Acronym for Initials

Add the. initialism class to the abbreviation to make the font-size slightly smaller.

    1. <abbr Title="hypertext Markup Language" class="initialism">HTML </abbr>

<! DOCTYPE html>
<link rel= "stylesheet" href= "/stylesheets/bootstrap.min.css" >
<body>
<div class= "Container" >
<p>an abbreviation of the word attribute is <abbr title= "attribute" >attr</abbr>.</p>
</div>
</body>

5.Address

Let contact information be presented in the format closest to everyday use. Add <br> at the end of each line to preserve the style you want.

<! DOCTYPE html>
<link rel= "stylesheet" href= "/stylesheets/bootstrap.min.css" >
<body>
<div class= "Container" >
<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:#" >[email protected]</a>
</address>
</div>
</body>

Effect:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P:(123) 456-7890 Full Name
[email protected]No Style list

Removes a set of elements for the default List-style style and left margin (for direct child elements only). This is for direct child elements , meaning that you need to add this class to all nested lists to have the same style.

    1. <ul Class="list-unstyled">
    2. <li>... </li>
    3. </ul>
Inline list

by setting the Display:inline-block; and add a small amount of inner complement (padding), placing all the elements has been one line.

    1. <ul Class="List-inline">
    2. <li>... </li>
    3. </ul>
Describe

A list of phrases with descriptions.

    1. <dl>
    2. <dt>... </dt>
    3. <dd>... </dd>
    4. </dl>
Automatic truncation

With the Text-overflow property, a horizontally arranged list of descriptions will truncate the phrase that is too long on the left. Within a narrower viewport (viewport), the list becomes the default stacking arrangement.

Bootstrap Precautions (ii)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
surface ii g1x ii srec ii quartus ii best bootstrap codecademy bootstrap stackpath bootstrap

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More