Bootstrap 3.0 study notes page layout

This time we will mainly learn about layout, which also exists in most of the basic HTML tags, so it is relatively simple. In order to ensure the completeness of the series, we will also review it and record it. The main contents are as follows:

1. Title

2. Page body

3. Emphasis

4. Abbreviations

5. Address

6. References

7. Lists

8. Summary

title

All heading tags in HTML, from <h1> to <h6>, can be used. In addition, classes from .h1 to .h6 are provided to give the inline text a title style.

Copy code

The code is as follows:

<div class="container">
<h1 class="page-header">Title</h1>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
</div>

Just look at the effect

You can also include a <small> tag or a .small element within a heading to mark a subheading.

Copy code

The code is as follows:

<div class="container">
<h1 class="page-header">Title</h1>
<h1>h1. Bootstrap heading</h1><small>Secondary text</small>
<h2>h2. Bootstrap heading</h2><small>Secondary text</small>
<h3>h3. Bootstrap heading</h3><small>Secondary text</small>
<h4>h4. Bootstrap heading</h4><small>Secondary text</small>
<h5>h5. Bootstrap heading</h5><small>Secondary text</small>
<h6>h6. Bootstrap heading</h6><small>Secondary text</small>
</div>

Page body

Bootstrap sets the global font-size to 14px and line-height to 1.428. These properties are assigned directly to <body> and all paragraph elements. Additionally, <p> (paragraph) is given a bottom margin equal to half the line height (i.e. 10px).

Copy code

The code is as follows:

<h1 class="page-header">Page body</h1>
<div style="border:1px solid">
<p style="border:1px solid ">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.

The spherical penicillin and magnis parturient montes, nascetur ridiculus mus. The ullamcorper nulla is not measured by auctor fringilla. In mollis, it is not common luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. The ullamcorper nulla is not measured by auctor fringilla.

The sedum was very small and had a very small size. It was not very big at all. As it was not very big, it was very hard to get a ligament, and I had to take a sedative measure.</p>
</div>

It is very obvious through the effect display.

Lead body copy

By adding .lead you can make a paragraph stand out.

Copy code

The code is as follows:

<h1 class="page-header">Lead Body Copy</h1>
<div style="border:1px solid">
<p class="lead" style="border:1px solid ">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.

The spherical penicillin and magnis parturient montes, nascetur ridiculus mus. The ullamcorper nulla is not measured by auctor fringilla. In mollis, it is not common luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. The ullamcorper nulla is not measured by auctor fringilla.

The sedum was very small and had a very small size. It was not very big at all. As it was not very big, it was very hard to get a ligament, and I had to take a sedative measure.</p>
</div>
<h1></h1>

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

emphasize

Simply use the HTML tags for emphasis and give them a little styling.

1. Small text

For inline or block text that does not need to be emphasized, wrap it with a <small> tag. The text inside will be set to 85% of the parent container's font size. The <small> elements nested within the heading element are given a different font-size .

You can also assign .small to inline elements instead of any <small> tag.

Copy code

The code is as follows:

<small>This line of text is meant to be treated as fine print.</small>

2. Focus

Emphasize a section of text by increasing its font-weight.

Copy code

The code is as follows:

rendered as bold text

3. Italics

Emphasize a piece of text using italics.

Copy code

The code is as follows:

rendered as italicized text

4. Align classes

Text alignment classes make it easy to realign text.

Copy code

The code is as follows:

<p class="text-left">Left aligned text.</p>
Center aligned text.
<p class="text-right">Right aligned text.</p>

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

5. Emphasize class

These classes are emphasized by color. Can also be applied to links, which will darken when the mouse is hovering over the link, just like the default link style.

Copy code

The code is as follows:

<h1>Emphasis on Class</h1>
<p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
<p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
<p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<h1></h1>

Thumbnail

When you hover over abbreviations and acronyms, the full content is displayed. Bootstrap implements enhanced styles for the HTML <abbr> element. The abbreviation element has a title attribute and appears as a light dotted box. When the mouse moves over it, it turns into a pointer with a question mark. If you want to see the full content, hover your mouse over the abbreviation, but the title attribute must be included.

Basic abbreviations

If you want to see the full content, hover your mouse over the abbreviation, but title attribute must be included.

Copy code

The code is as follows:

I saw the effect, but I couldn't take a screenshot.

Initialism

Adding .initialism to the abbreviation can make its font-size smaller.

Copy code

The code is as follows:

Or just post the code and see the effect yourself.

address

Present contact information in a format that is closest to everyday use. Adding <br> to the end of each line will preserve the desired styling.

Copy code

The code is as follows:

<address>
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
<abbr title="Phone">P:</abbr> (123) 456-7890
</address></p> <p><address>
Full Name
<a href="<a href="mailto:#">[email protected]</a">mailto:#">[email protected]</a</a>>
</address>

References

Cite other sources in your document.

Default style reference

Wrap anything in it to represent it as a reference. For direct quotes, we recommend using tags. Wrap it in it and it will appear as a reference. For direct quotes, we recommend using tags.

Copy code

The code is as follows:

<blockquote>
<p>I just sat there, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Citation Options

For the standard <blockquote> , there are a few simple variations that can change the style and content.

Name the source: Add a <small> tag to indicate the source of the citation. The source name can be placed inside the <cite> tag.

Copy code

The code is as follows:

<blockquote>
<p>I just sat there, consectetur adipiscing elit. Integer posuere erat a ante.</p>
Someone famous in Source Title
</blockquote>

There will be one more Source Title

Another display style

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

Copy code

The code is as follows:

<blockquote class="pull-right">
<p>I just sat there, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Aligning to the right moves the amount, and of course there is a corresponding pull-left.

List

Unordered list

A list of elements whose order does not matter.

Copy code

The code is as follows:

<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>

This is obviously the same as Html.

Ordered List

A set of elements where order is critical.

Copy code

The code is as follows:

<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ol>

Similarly for ordered lists.

Unstyled list

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

Copy code

The code is as follows:

<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>

Inline List

By setting display: inline-block; and adding a small amount of padding, all elements are placed in the same column.

Copy code

The code is as follows:

<ul class="list-inline">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>

The effect is of course in one line.

describe

List of phrases with descriptions.

Copy code

The code is as follows:

<dl>
<dt>.Lorem ipsum dolor sit amet</dt>
<dd>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</dd>
</dl>

Remember that this tag also exists in Html.

Horizontal description

.dl-horizontal allows the phrase and its description in <dl> to be aligned on one line. It starts out like the default <dl> style stacked together, and then arranged in the same way as the navigation bar gradually expands.

Copy code

The code is as follows:

<dl class="dl-horizontal">
<dt>.Lorem ipsum dolor sit amet</dt>
<dd>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</dd>
</dl>

Summarize

The main thing is to simply review it and familiarize yourself with it when using it, and it shouldn't be a problem.

Finally, I would like to add one more piece of knowledge, which may be useful in some situations.

Inline code: Wrap the inline style code snippet in the body of the text using the <code> tag.

Copy code

The code is as follows:

For example, <code><section></code> should be wrapped as inline.

Simple Effects

Fast basic code: Multiple lines of code can use the <pre> tag. To display the code correctly, be sure to escape the angle brackets.

Copy code

The code is as follows:

<pre><p>Sample text here...</p></pre>

Simple Effect

You can also use .pre-scrollable class, which sets the max-height to 350px and displays a vertical scroll bar.

The above is the full content of this article. Do you have a new understanding of these common HTML tags? As the saying goes, reviewing the past helps you learn new things. I hope it can be helpful to everyone.

<<: Centos8 builds nfs based on kdc encryption

>>: Summary of standard usage of html, css and js comments

Bootstrap 3.0 study notes page layout

An in-depth introduction to React refs

Complete steps to upgrade Nginx http to https

Next.js Getting Started Tutorial

CSS float (float, clear) popular explanation and experience sharing

Several ways to implement CSS height changing with width ratio

MySQL example of getting today and yesterday's 0:00 timestamp

Use Grafana+Prometheus to monitor MySQL service performance

Use Javascript to implement the function of sending SMS verification code interval

The most convenient way to build a Zookeeper server in history (recommended)

No-nonsense quick start React routing development

Recommend

Difference between MySQL btree index and hash index

Vue realizes the product magnifying glass effect

html+css+js to realize the function of photo preview and upload picture

Install Percona Server+MySQL on CentOS 7

How to publish a locally built docker image to dockerhub

React handwriting tab switching problem

A brief analysis of the differences and functions between transition, transform, and translate in CSS3

Implementation of formatting partitions and mounting in Centos7

Mobile web screen adaptation (rem)

How to implement HTML to detect that input is complete and automatically fill in the next content

MySQL database Load Data multiple uses

Solution to web page confusion caused by web page FOUC problem

Solution to the problem that elements with negative z-index cannot be clicked

Detailed explanation of special phenomena examples of sleep function in MySQL

MySQL multi-table query detailed explanation