Bootstrap 3.0 study notes page layout

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:
<abbr title="attribute">attr</abbr>

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:

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

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>&lt;section&gt;</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>&lt;p&gt;Sample text here...&lt;/p&gt;</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

Recommend

Vue backend management system implementation of paging function example

This article mainly introduces the implementation...

Detailed installation and configuration tutorial of MySQL flashback tool binlog2sql

Overview binlog2sql is an open source MySQL Binlo...

Detailed explanation of MYSQL character set setting method (terminal character set)

Preface Every time I use the terminal to create a...

How to implement Nginx configuration detection service status

1. Check whether the check status module is insta...

Page Speed ​​Optimization at a Glance

I believe that the Internet has become an increas...

Several ways to easily traverse object properties in JS

Table of contents 1. Self-enumerable properties 2...

Introduction to building a DNS server under centos7

Table of contents 1. Project environment: 2: DNS ...

Some common mistakes with MySQL null

According to null-values, the value of null in My...

MySQL configuration SSL master-slave replication

MySQL5.6 How to create SSL files Official documen...

Solve the problem that the directory mounted by docker cannot be read and written

Use the following command to create a container a...

How to authorize remote connections in MySQL in Linux

Note: Other machines (IP) cannot connect to the M...

The best way to automatically mount shared directories on Ubuntu 16.04 startup under Virtualbox

People who use virtual machines usually set up sh...

Basic HTML directory problem (difference between relative path and absolute path)

Relative path - a directory path established based...

MySQL 5.7.18 Green Edition Download and Installation Tutorial

This article records the detailed process of down...

Detailed process of SpringBoot integrating Docker

Table of contents 1. Demo Project 1.1 Interface P...