0. Introduction

There are official Chinese documents , written in great detail
I just put the information here, where possible, mention of the open class again, also cited from Chinese official website

1. Basic Template

This is a simple Bootstrap page, denoted code1

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 下载后可以换成相对路径 -->

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1> <!-- 字体做了一定的美化 -->
    <!-- (1) 下文的代码，写在此处 -->

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  </body>
</html>

2. layout container

Code written in code1 at (1)

2.1 container

Centered by default
A fixed width
Support responsive layout

<div class="container" style="height:100px;background:red">
      container
</div>

2.2 container-fluid

A width of 100%
Occupy the entire viewport (viewport)

<div class="container-fluid" style="height:100px;background:green">
      container-fluid
</div>

3. Grid System

Bootstrap provides a responsive, mobile device priority streaming grid system, with the increase of the screen or viewport (the viewport) size, the system will automatically be divided into a maximum of 12
It contains easy to use predefined classes , there is a strong mixin for generating more semantic layouts

3.1 Introduction

Grid system is used to create page layouts by combining a series of rows (row) and column (column), you can put the contents of these create a good layout

3.2 grid parameters

A detailed view of Bootstrap grid system by the following table is how to work on a variety of screen devices

	Ultra-small screen phones (<768px)	Small screen tablet (≥768px)	Medium screen desktop monitor (≥992px)	Big screen big desktop monitor (≥1200px)
Grid system behavior	Always arranged horizontally	Initially stacked together, it becomes greater than the threshold level arrangement C
`.container` Maximum width	None (automatic)	750px	970px	1170px
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
column number of columns	12
The maximum column width	automatic	~62px	~81px	~ 97px
gutter width	30px (each column are around 15px)
Nestable	Yes
Offsets Offset	Yes
Column sorting	Yes

Example 3.3: from the stack to a horizontal arrangement

Using a single set of .col-md-*grid class, you can create a basic grid system, beginning on phones and tablet devices are stacked together (ultra-small screen to the small screen this range), desktop (medium) screen becomes horizontal alignment device
All "column (column) must be placed" .rowwithin
The table is arranged to simulate the situation; for col-md-1some length, so I cm-1made instead of

From the stack to a horizontal arrangement
cm-1	cm-1	cm-1	cm-1	cm-1	cm-1	cm-1	cm-1	cm-1	cm-1	cm-1	cm-1
col-md-8								col-md-4
col-md-4				col-md-4				col-md-4
col-md-6						col-md-6

Example: The following is a three-column layout

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 col-xs-1 col-sm-6" style="background:coral">col-md-3</div>
        <div class="col-md-6 col-xs-1 col-sm-3" style="background:rosybrown">col-md-6</div>
        <div class="col-md-3 col-xs-1 col-sm-3" style="background:dimgray">col-md-3</div>
    </div>
</div>

2.4 mobile devices and desktop screen

According to the actual size of the display screen size set
You can resize your browser to see the effect

Offset 2.5

Shut up the examples

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-md-offset-2" style="background:#659">col-md-4</div>
        <div class="col-md-4" style="background:red">col-md-4</div>
        <div class="col-md-4" style="background:pink">col-md-4</div>
    </div>
</div>

2.6 Nested Column

Shut up the examples

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6" style="background:red;height:40px">
            <div class="row">
                <div class="col-md-6" style="background:blue;height:20px"></div>
            </div>
        </div>
    <div class="col-md-6" style="background:pink;height:40px"></div>
    </div>
</div>

2.7 Other

Line arrangement
Column sorting
Wait

4. Response tool

In order to speed up the mobile device-friendly page development work, the use of media queries and use these tools for different devices can easily show or hide the content of the page; also includes tools for printers to show or hide content
Targeted use of such tools, in order to avoid creating a completely different versions of the same site; the contrary, can provide different forms of presentation on different devices by using these tools

4.1 available classes

By alone or in combination classes listed below, for different screen sizes can hide or display the page

	Ultra-small mobile phone screen (<768px)	Small flat-screen (≥768px)	Moderate desktop screen (≥992px)	Large screen desktops (≥1200px)
`.visible-xs-*`	visible	hide	hide	hide
`.visible-sm-*`	hide	visible	hide	hide
`.visible-md-*`	hide	hide	visible	hide
`.visible-lg-*`	hide	hide	hide	visible
`.hidden-xs`	hide	visible	visible	visible
`.hidden-sm`	visible	hide	visible	visible
`.hidden-md`	visible	visible	hide	visible
`.hidden-lg`	visible	visible	visible	hide

From v3.2.0 version, shaped like .visible-*-*the screen size for each class has three variants for each CSS in different displayproperties listed below:

Clusters	CSS `display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Therefore, the ultra-small screen ( xs), for example, the available .visible-*-*categories .visible-xs-blockare: , .visible-xs-inlineand.visible-xs-inline-block
.visible-xs, .visible-sm, .visible-mdAnd .visible-lgclasses also exist; however starting from v3.2.0 version is no longer recommended ; except <table>in exceptional circumstances related to the elements, and they are .visible-*-blockmuch the same

5. typesetting

5.1 Title

All title tag in HTML, <h1>to <h6>be used
In addition, also provided .h1to .h6the class, in order to give the inline text (inline) gives the title style attribute
In the header may further comprise <small>a label or imparting .smalltype elements, can be used to mark subtitle
Shut up the examples

<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>
<p class="h1 text-center">h1. Bootstrap <small>heading</small></p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

5.2 Other

Inline text elements
Align
Change Case
Abbreviations
address
Quote
List
Wait

6. Form

Examples of basic 6.1

Any <table>label added .tableclass for imparting basic styles - the amount of complement (padding) and a horizontal direction dividing line
这种方式看起来很多余！？但是官方觉得，表格元素使用的很广泛，如果他们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以他们选择将此样式独立出来

6.2 举例

<!--
    table-striped   条纹状表格
    table-bordered  带边框的表格
    table-hover     鼠标悬停
    table-condensed 紧缩表格
-->
<table class="table table-striped table-bordered table-hover table-condensed">
    <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>性别</td>
    </tr>
    <tr>
        <td>1</td>
        <td>zhangsan</td>
        <td>nan</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Lisi</td>
        <td>nan</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Wangwu</td>
        <td>nan</td>
    </tr>
</table>

6.3 其他

条纹状表格
带边框的表格
紧缩表格
状态类
响应式表格

7. 表单

7.1 基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列
少废话，上例子

<input type="text" class="form-control">

7.2 其他

内联表单
水平排列的表单
下拉列表(select)
静态控件
焦点状态
禁用状态
只读状态
校验状态
等

[Web front-end] 031 bootstrap and global use css styles

0. Introduction

1. Basic Template

2. layout container

2.1 container

2.2 container-fluid

3. Grid System

3.1 Introduction

3.2 grid parameters

Example 3.3: from the stack to a horizontal arrangement

2.4 mobile devices and desktop screen

Offset 2.5

2.6 Nested Column

2.7 Other

4. Response tool

4.1 available classes

5. typesetting

5.1 Title

5.2 Other

6. Form

Examples of basic 6.1

6.2 举例

6.3 其他

7. 表单

7.1 基本实例

7.2 其他

Guess you like