How to realize the typesetting of bootstrap3.0 01/18 Update SLTechnology News&Howtos

How to realize the typesetting of bootstrap3.0

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

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

This article mainly explains "how to achieve bootstrap3.0 typesetting," interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to realize bootstrap3.0 typesetting"!

All title tags in Html, from to, can be used. Classes.h2 through.h7 are also provided to style the text of the inline attribute with a title.

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 see how it works.

You can also include a tag or.small element within the title, which can be used to mark subtitles.

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

body of the page

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

(Paragraph) is also set to a bottom margin equal to 1/2 line height (i.e. 10px).

The code is as follows:

body of the page

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's obvious through the effect display.

Lead body copy

You can highlight paragraphs 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 it with the main body of the page above, you can see the obvious effect.

stressed

Use HTML tags for emphasis and give them a little style.

1. Small Text

For inline or block type text that does not require emphasis, wrap it with labels, and the text inside will be set to 85% of the parent container font size. The nested elements within the title element are set to different font-sizes.

You can also assign.small to inline elements instead of any label.

The code is as follows:

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

2. emphatically

Emphasize a paragraph of text by adding font-weight.

The code is as follows:

rendered as bold text

3. italics

Italicize a passage of text.

The code is as follows:

rendered as italicized text

4. align class

Text alignment classes make it easy to realign text.

The code is as follows:

Left aligned text.

Center aligned text.

Right aligned text.

Obviously the first row is left justified, the second row is centered, and the third row is right justified.

5. Emphasis on class

These classes are emphasized by color. It can also be applied to links, which darken when the mouse hovers over them, just like the default link style.

The code is as follows:

Emphasis on 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

When the mouse hovers over abbreviations and acronyms to display the full content, Bootstrap implements enhanced styling of HTML elements. Abbreviations elements have title attributes and appear as boxes with lighter dotted lines that, when moved over, become pointers with question marks. To see the full text, hover over the acronym, but include the title attribute.

Basic acronyms

To see the full text, hover over the acronym, but include the title attribute.

The code is as follows:

attr

See the effect, but there is no way to intercept the map.

Initialism

Adding.initialism to an acronym can make its font-size smaller.

The code is as follows:

HTML

Or just code yourself to see the effect.

address

Make contact information appear in a format 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.

Folsom Ave, Suite 600

San Francisco, CA 94107

P: (123) 456-7890

Full Name

mailto:#">first.ldddddddast@examdddddddple.com

reference

Reference content from other sources in your documents.

References to default styles

Anything wrapped in it can be represented as a quote. For direct references, we recommend labels. Wrapped in it, it appears as a quote. For direct references, we recommend labels.

The code is as follows:

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

reference options

For standard styles, style and content can be changed with a few simple variations.

Naming Source: Add a label to indicate the source of the citation. Source names can be placed inside labels.

The code is as follows:

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

Someone famous in Source Title

One more Source Title.

Another presentation style

Use.pull-right to make the reference appear shifted and aligned to the right.

The code is as follows:

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

Right alignment shifted the forehead, of course, there is also a corresponding pull-left.

list

unordered list

A list of elements whose order does not matter.

The code is as follows:

Lorem ipsum dolor sit amet

This is the same as Html.

ordered list

A group of elements whose order is critical.

The code is as follows:

Lorem ipsum dolor sit amet

The same is true for ordered lists.

No Style List

A set of elements (direct children only) that remove the default list-style style and left margin. This is for direct child elements, meaning that 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

List of lists

Place all elements in the same column by setting display: inline-block; and adding a small amount of padding.

The code is as follows:

Lorem ipsum dolor sit amet

The effect is, of course, in one line.

described

A list of phrases with descriptions.

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 allows inner phrases and their descriptions to line up. It starts out stacked like the default styles, and then it spreads out as the navigation bar unfolds.

The code is as follows:

.Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet

summary

Mainly a simple review, in use when familiar with it, should not be what the problem.

And I might add that there may be cases where the amount is still used.

Inline code: Code fragments wrapped in inline style by tags in the body.

The code is as follows:

For example, should be wrapped as inline.

simple effect

Basic Code Fast: Multiple lines of code can use tags. For proper presentation of the code, note that angle brackets are escaped.

The code is as follows:

Sample text here...

simple effect

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

At this point, I believe that everyone has a deeper understanding of "how to achieve bootstrap3.0 typography", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

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.