Chapter 2: Bootstrap page layout style_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Chapter 2: Bootstrap page layout style_javascript skills

May 16, 2016 pm 03:03 PM

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); <p> the paragraph element is set equal to 1/2 line height (i.e. 10px); the color is set to # 333.

//创建包含段落突出的文本
&lt;p&gt;Bootstrap 框架&lt;/p&gt;
&lt;p class="lead"&gt;Bootstrap 框架&lt;/p&gt;
&lt;p&gt;Bootstrap 框架&lt;/p&gt;
&lt;p&gt;Bootstrap 框架&lt;/p&gt;
&lt;p&gt;Bootstrap 框架&lt;/p&gt;

Copy after login

2. Title

//从 h1 到 h6
&lt;h1&gt;Bootstrap 框架&lt;/h1&gt;//36px
&lt;h2&gt;Bootstrap 框架&lt;/h2&gt;//30px
&lt;h3&gt;Bootstrap 框架&lt;/h3&gt;//24px
&lt;h4&gt;Bootstrap 框架&lt;/h4&gt;//18px
&lt;h5&gt;Bootstrap 框架&lt;/h5&gt;//14px
&lt;h6&gt;Bootstrap 框架&lt;/h6&gt;//12px

Copy after login

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.

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

Copy after login

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 元素
&lt;h1&gt;Bootstrap 框架 &lt;small&gt;Bootstrap 小标题&lt;/small&gt;&lt;/h1&gt;
&lt;h2&gt;Bootstrap 框架 &lt;small&gt;Bootstrap 小标题&lt;/small&gt;&lt;/h2&gt;
&lt;h3&gt;Bootstrap 框架 &lt;small&gt;Bootstrap 小标题&lt;/small&gt;&lt;/h3&gt;
&lt;h4&gt;Bootstrap 框架 &lt;small&gt;Bootstrap 小标题&lt;/small&gt;&lt;/h4&gt;
&lt;h5&gt;Bootstrap 框架 &lt;small&gt;Bootstrap 小标题&lt;/small&gt;&lt;/h5&gt;
&lt;h6&gt;Bootstrap 框架 &lt;small&gt;Bootstrap 小标题&lt;/small&gt;&lt;/h6&gt;

Copy after login

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

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

Copy after login

4. Alignment

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

Copy after login

5. Capitalization

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

Copy after login

6. Abbreviations

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

Copy after login

7. Address text

//设置地址，去掉了倾斜，设置了行高，底部 20px
&lt;address&gt;
　　&lt;strong&gt;Twitter, Inc.&lt;/strong&gt;&lt;br&gt;
　　795 Folsom Ave, Suite 600&lt;br&gt;
　　San Francisco, CA 94107&lt;br&gt;
　　&lt;abbr title="Phone"&gt;P:&lt;/abbr&gt; (123) 456-7890
&lt;/address&gt;

Copy after login

8. Quote text

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

Copy after login

9. List layout

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

Copy after login

10. Code

//内联代码
&lt;code&gt;&lt;section&gt;&lt;/code&gt; 
//用户输入
press &lt;kbd&gt;ctrl + ,&lt;/kbd&gt; 
//代码块
&lt;pre&gt;&lt;p&gt;Please input...&lt;/p&gt;&lt;/pre&gt;

Copy after login

Bootstrap also enumerates <var> to represent tag variables, and <samp> 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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn