A tutorial on the methods of Bootstrap3.0 page layout 01/19 Update SLTechnology News&Howtos

A tutorial on the methods of Bootstrap3.0 page layout

2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Shulou(Shulou.com)06/03 Report--

This article mainly explains the "Bootstrap3.0 page layout method tutorial", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and study the "Bootstrap3.0 page layout method tutorial" bar!

Title

All title tags in Html can be used from to. Class from. H2 to. H7 is also provided to style the title to the text of the inline attribute.

The code is as follows:

Title

H2. Bootstrap heading

H3. Bootstrap heading

H4. Bootstrap heading

H5. Bootstrap heading

H6. Bootstrap heading

H7. Bootstrap heading

Let's just look at the effect.

You can also include tags or .small elements within the title, which can be used to mark the subtitle.

The code is as follows:

Title

H2. Bootstrap headingSecondary text

H3. Bootstrap headingSecondary text

H4. Bootstrap headingSecondary text

H5. Bootstrap headingSecondary text

H6. Bootstrap headingSecondary text

H7. Bootstrap headingSecondary text

Page body

Bootstrap sets the global font-size to 14px, line line, and height to 1.428. These attributes are assigned directly to all paragraph elements. In addition,

(paragraph) is also set to a bottom margin (margin) equal to 1 to 2 lines high (that is, 10px).

The code is as follows:

Page body

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

It is obvious through the demonstration of the effect.

Lead body copy

Paragraphs can be highlighted by adding .lead.

The code is as follows:

Lead Body Copy

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

By comparing with the main body of the page above, you can see the obvious effect.

Emphasize

Use the tags used for emphasis in HTML directly and give them a little style.

1. Trumpet text

For text of type inline or block that does not need to be emphasized, use a label wrap, and the text inside will be set to 85% of the font size of the parent container. The elements nested in the title element are set to different font-size.

You can also assign .small to the elements in the line instead of any tag.

The code is as follows:

This line of text is meant to be treated as fine print.

two。 Focus on

Emphasize a paragraph of text by adding font-weight.

The code is as follows:

Rendered as bold text

3. Italic

Emphasize a paragraph of text in italics.

The code is as follows:

Rendered as italicized text

4. Align class

Through text alignment class, you can easily realign text.

The code is as follows:

Left aligned text.

Center aligned text.

Right aligned text.

It is obvious that the first line is aligned to the left, the second line is centered, and the third line is aligned to the right.

5. Emphasize class

These class are emphasized by color. It can also be applied to links, where the color darkens when the mouse hovers over the link, just like the default link style.

The code is as follows:

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.

Thumbnail image

The full content is displayed when the mouse hovers over acronyms and acronyms, and Bootstrap implements an enhanced style for HTML elements. The acronym element has a title attribute and appears as a shallow dotted frame that becomes a pointer with a "question mark" when the mouse moves over it. If you want to see the complete content, you can hover over the acronym, but you need to include the title attribute.

Basic acronym

If you want to see the complete content, you can hover over the acronym, but you need to include the title attribute.

The code is as follows:

Attr

I see the effect, but there is no way to capture the picture.

Initialism

Add. Initialism to the acronym to make its font-size smaller.

The code is as follows:

HTML

Or just go to the code and see for yourself.

Address

Let the contact information be presented in a format that is closest to everyday use. Add at the end of each line

You can keep the style you want.

The code is as follows:

Twitter, Inc.

795 Folsom Ave, Suite 600

San Francisco, CA 94107

P: (123) 456-7890

Full Name

Mailto:# "> first.last@example.com

Quote

Quote content from other sources in your document.

Reference to the default styl

Anything wrapped in it can be represented as a reference. For direct references, we recommend using tags. Wrapped in it, it can be shown as a quote. For direct references, we recommend using tags.

The code is as follows:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat an ante.

Reference option

For standard styles, you can change the style and content with a few simple variants.

Named source: add a tag to indicate the source of the reference. The source name can be placed in the label.

The code is as follows:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat an ante.

Someone famous in Source Title

There will be one more Source Title

Another display style

Use .pull-right to show the effect of moving and aligning references to the right.

The code is as follows:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat an ante.

Move the forehead to the right, and of course there is a corresponding pull-left.

List

Unordered list

A list of elements that do not matter in order.

The code is as follows:

Lorem ipsum dolor sit amet

This is obviously the same as Html's.

Ordered list

A group of elements whose order is critical.

The code is as follows:

Lorem ipsum dolor sit amet

In the same way, ordered lists.

No style list

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

The code is as follows:

Lorem ipsum dolor sit amet

Inline list

All elements are placed in the same column by setting display: inline-block; and adding a small amount of inscription.

The code is as follows:

Lorem ipsum dolor sit amet

The effect is, of course, on one line.

Description

List of phrases with description.

The code is as follows:

.Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet

Remember that this tag also exists in Html.

Description of horizontal arrangement

. dl-horizontal can put the inner phrase and its description on one line. At first it is stacked like the default style and arranged as the navigation bar expands.

The code is as follows:

.Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet

Summary

It is mainly a simple review, and if you are familiar with it when you use it, it should not be a problem.

Finally, add another point of knowledge, maybe it can be used in some cases.

Inline code: a code snippet that wraps an inline style through a tag in the body.

The code is as follows:

For example, should be wrapped as inline.

A simple effect

Basic code is fast: tags can be used in multiple lines of code. In order to show the code correctly, pay attention to escaping the angle brackets.

The code is as follows:

Sample text here...

Simple effect

You can also use .pre-scrollableclass, which sets max-height to 350px and displays the scroll bar vertically.

Thank you for your reading, the above is the content of the "Bootstrap3.0 page layout method tutorial", after the study of this article, I believe you have a deeper understanding of the Bootstrap3.0 page layout method tutorial, the specific use of the need for you to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.