Bootstrap basic layout that you must learn every day_javascript skills

This time I mainly want to learn about typesetting. Most of this also exists in the basic tags of HTML, so it is relatively simple. In order to ensure the completeness of the series, I will also review it and record it. The main content is as follows:

• 1.Title
• 2. Page body
• 3. Emphasis
• 4.Abbreviations
• 5. Address
• 6. Quote
• 7. List

1. Title
All title tags in HTML, from

to

can be used. In addition, classes from .h1 to .h6 are provided to give the text of the inline attribute a title style.

<div class="container"> 
  <h1 id="标题">标题</h1>
  <h1 id="h-Bootstrap-heading">h1. Bootstrap heading</h1>
  <h2 id="h-Bootstrap-heading">h2. Bootstrap heading</h2>
  <h3 id="h-Bootstrap-heading">h3. Bootstrap heading</h3>
  <h4 id="h-Bootstrap-heading">h4. Bootstrap heading</h4>
  <h5 id="h-Bootstrap-heading">h5. Bootstrap heading</h5>
  <h6 id="h-Bootstrap-heading">h6. Bootstrap heading</h6>
 </div> 

Let’s see the effect directly

The title can also contain the tag or the .small element , which can be used to mark subtitles.

 <div class="container"> 
  <h1 id="标题">标题</h1>
  <h1 id="h-Bootstrap-heading">h1. Bootstrap heading</h1><small>Secondary text</small>
  <h2 id="h-Bootstrap-heading">h2. Bootstrap heading</h2><small>Secondary text</small>
  <h3 id="h-Bootstrap-heading">h3. Bootstrap heading</h3><small>Secondary text</small>
  <h4 id="h-Bootstrap-heading">h4. Bootstrap heading</h4><small>Secondary text</small>
  <h5 id="h-Bootstrap-heading">h5. Bootstrap heading</h5><small>Secondary text</small>
  <h6 id="h-Bootstrap-heading">h6. Bootstrap heading</h6><small>Secondary text</small>
 </div> 

2. Page body
Bootstrap sets the global font-size to 14px and line-height to 1.428. These properties are assigned directly to

and all paragraph elements. In addition,

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

 <h1 id="页面主体">页面主体</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.
 
 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.</p>
 </div>

It is obvious through the effect display.

Lead body copy
Paragraphs can be highlighted by adding .lead.

 <h1 id="Lead-Body-Copy">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.
 
 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.</p>
 </div>
 <h1></h1>

You can see the obvious effect by comparing it with the main body of the page above.

3. Emphasis
Just use HTML tags for emphasis and give them a little style.
1. Small text
For inline or block type text that does not need to be emphasized, use the tag to wrap it, and the text within it will be set to 85% of the font size of the parent container. Nested elements within the title element are set to different font-sizes.
You can also give inline elements .small in place of any tags.

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

2. Focus
Emphasize a piece of text by increasing font-weight.

<strong>rendered as bold text</strong>

3.Italics
Emphasize a piece of text in italics.

<em>rendered as italicized text</em>　　

4. Align class
Using the text alignment class, you can easily and conveniently realign text.

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

Obviously the first line is left aligned, the second line is centered, and the third line is right aligned.
5. Emphasis on class
These classes use color to express emphasis. Can also be applied to links so that when the mouse hovers over the link, its color will become darker, just like the default link style.

<h1 id="强调Class">强调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>

4. Thumbnails
The complete content will be displayed when the mouse is hovered over abbreviations and abbreviations. Bootstrap implements enhanced styles for the HTML element. The abbreviation element has a title attribute and appears as a light dotted frame. When the mouse is moved over it, it will turn into a pointer with a "question mark". If you want to see the complete content, you can hover the mouse over the abbreviation, but you need to include the title attribute.
Basic abbreviations
If you want to see the complete content, you can hover the mouse over the abbreviation, but you need to include the title attribute.

<abbr title="attribute">attr</abbr>

I can see the effect, but I can’t take a screenshot.
Initialism
Adding .initialism to an abbreviation will set its font-size smaller.

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

Just upload the code and see the effect yourself. ​
5. Address
Let contact information be presented in a format that is closest to everyday use. Add
at the end of each line to preserve the desired style.

<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:#">first.last@example.com</a>
</address>

 

六、引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在

之中即可表现为引用。对于直接引用，我们建议用

标签。

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

 

引用选项
对于标准样式的

，可以通过几个简单的变体就能改变风格和内容。
命名来源:添加标签来注明引用来源。来源名称可以放在标签里面。

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

会多一个Source Title
另一种展示风格

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。   

 <blockquote class="pull-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>

向右对齐移动了额，当然也有相应的pull-left。　　
七、列表
 无序列表 
顺序无关紧要的一列元素。

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

这个也很明显和Html的一样。
有序列表
顺序至关重要的一组元素。

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

同理有序列表
无样式列表
移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。

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

内联列表
通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列。

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

效果当然就是在一行了。

以上就是Bootstrap基础排版的全部内容，希望大家好好阅读，再结合相关文章进行扩展性的学习。