Chapter 2: Bootstrap page layout style_javascript skills

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.

Learning points:

1. Page layout

In this lesson, we mainly learn about the layout style in Bootstrap global CSS style, including regular content such as title, page body, alignment, and list.

1. Page layout

Bootstrap provides some commonly designed page layout styles for developers to use.

1. Page body

Bootstrap sets the global font-size to 14px and line-height to 1.428 (i.e. 20px);

the paragraph element is set equal to 1/2 line height (i.e. 10px); the color is set to # 333.

//创建包含段落突出的文本
<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p> 

2. Title

//从 h1 到 h6
<h1>Bootstrap 框架</h1>//36px
<h2>Bootstrap 框架</h2>//30px
<h3>Bootstrap 框架</h3>//24px
<h4>Bootstrap 框架</h4>//18px
<h5>Bootstrap 框架</h5>//14px
<h6>Bootstrap 框架</h6>//12px 

We learned from viewing elements in Firebug that Bootstrap has reconstructed CSS styles for h1 ~ h6 respectively, and also supports ordinary inline element definition class=(.h1 ~ h6) to achieve the same function.

//内联元素使用标题字体
<span class="h1">Bootstrap</span> 

Note: Viewing elements through Firebug also shows that the font color, font style, and line height are all fixed, thus ensuring uniformity, while the native ones will be determined based on the system's built-in preferred font. The color is blackest.

Between h1 ~ h6 elements, you can also embed a small element as a subtitle,

//在标题元素内插入 small 元素
<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>
<h2>Bootstrap 框架 <small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架 <small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架 <small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架 <small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架 <small>Bootstrap 小标题</small></h6> 

Viewed through Firebug, we found that the size of the small element under h1 ~ h3 only accounts for 65% of the parent element. Then through calculation (see the style calculated by Firebug), the small under h1 ~ h3 is 23.4px, 19.5px, 15.6px; the size of small elements under h4 ~ h6 only accounts for 75% of the parent element, respectively: 13.5px, 10.5px, 9px. The small style under h1 ~ h6 has also been changed, the color becomes light gray: #777, the line height is 1, and the thickness is 400.

3. Inline text elements

//添加标记，<mark>元素或.mark 类
<p>Bootstrap<mark>框架</mark></p> 
//各种加线条的文本
<del>Bootstrap 框架</del>//删除的文本
<s>Bootstrap 框架</s>//无用的文本
<ins>Bootstrap 框架</ins>//插入的文本
<u>Bootstrap 框架</u>//效果同上，下划线文本 
//各种强调的文本
<small>Bootstrap 框架</small>//标准字号的 85%
<strong>Bootstrap 框架</strong>//加粗 700
<em>Bootstrap 框架</em>//倾斜 

4. Alignment

//设置文本对齐
<p class="text-left">Bootstrap 框架</p>//居左
<p class="text-center">Bootstrap 框架</p>//居中
<p class="text-right">Bootstrap 框架</p>//居右
<p class="text-justify">Bootstrap 框架</p>//两端对齐，支持度不佳<p class="text-nowrap">Bootstrap 框架</p>//不换行 

5. Capitalization

//设置英文文本大小写
<p class="text-lowercase">Bootstrap 框架</p> //小写
<p class="text-uppercase">Bootstrap 框架</p> //大写
<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

6. Abbreviations

//缩略语
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

7. Address text

//设置地址，去掉了倾斜，设置了行高，底部 20px
<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>

8. Quote text

//默认样式引用，增加了做边线，设定了字体大小和内外边距
<blockquote>
　　Bootstrap 框架
</blockquote> 
//反向
<blockquote class="blockquote-reverse ">
　　Bootstrap 框架
</blockquote>

9. List layout

//移出默认样式
<ul class="list-unstyled">
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
</ul> 
//设置成内联
<ul class="list-inline">
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
</ul> 
//水平排列描述列表
<dl class="dl-horizontal">
　　<dt>Bootstrap</dt>
　　<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
</dl> 

10. Code

//内联代码
<code><section></code> 
//用户输入
press <kbd>ctrl + ,</kbd> 
//代码块
<pre class="brush:php;toolbar:false"><p>Please input...</p>

Bootstrap also enumerates to represent tag variables, and to represent program output, but it does not rewrite CSS.

The above is the knowledge about Bootstrap page layout style introduced by the editor. I hope it will be helpful to everyone!