One, first of all, we come to know about what is the bootstrap
What is Bootstrap?
We must first of its profits, saying in a front-end development, how to quickly build a web page do?
Program in the world, the most is the lack of wheels, whatever you can think of needs, there are people who basically have thought, and has provided open out into components, just like you suddenly had an idea that the rich will be able to do this , to the pinnacle of life, search on Baidu will know a lot of people do not fly or have been tried and it has been a success.
In the front end of the world, a man named Bootstrap guy, twitter open source front-end framework set out by Ta can quickly develop web interface, it is characterized by his own from scratch than to write simple, intuitive, convenient, fast and save effort.
Bootstrap is a responsive UI framework is based on a simple HTML, CSS, JavaScript development, intuitive, and powerful front-end development UI framework that enables Web developers more quickly. Bootstrap from the beginning of the epidemic to now have a period of about four years, as the originator responsive UI framework, had swept the entire front end. jquery + composition became responsive bootstrap standard,
After the start there are many UI frameworks have written to imitate Bootstrap, we By the end of bootstrap, and now look at other popular UI framework can be found in the shadow of a large part of the bootstrap,
For now, the field of Bootstrap in the background there is a great market and market share. This is the reason why we want to learn Bootstrap, some students think Bootstrap obsolete, so that if, really wrong.
On completion of Bootstrap, watching his source, to understand his essence, you will find that writing a front-end component library for you are no longer out of reach.
Author: Wu Lei Battle
link: https: //zhuanlan.zhihu.com/p/39760410
Source: know almost
original link: with your Bootstrap front-end framework of Learning and Six -UI - Wu Lei battle of articles - know almost
https: //zhuanlan.zhihu .com / p / 39760410
Second, then, on your bootstrap grid layout you to know how much, this article will discuss with everyone under study and practice on your bootstrap grid layout
(1) a grid system is a core function of the framework Bootstrap
Grid system born out of the plane layout design, for use in web design to make the page more attractive and easy to read, for developers and more flexible in terms of specification.
After all, the grid system, in fact, the total width of the web 12 are divided into parts, parts can be freely combined according to different combinations of web interface in a simpler manner.
On the basis of the grid, there are a lot of basic layout components, such as typography, forms, buttons, forms, etc., these basic components can also be applied to Aung anywhere for building a variety of excellent compatibility page.
On the basis of these and then on the basis of the layout, add various css and js components, down to every aspect of the page, forming a complete and flexible css framework.
Author: IT skill tree comprehension hospital
link: https: //zhuanlan.zhihu.com/p/38303716
Source: know almost
1.1 Grid System
[Geeks Bootstrap Institute] in a Week
Break it down, it works like this:
1: Each row put inside the container or container-fuild
2: each row of each column row col, each row 12, 12 will be greater than the wrap
3: Bootstrap next page will in most cases have one or more .container to include the entire page, but do not nest .container! That is not to have a lower .container .container up. But .row can be nested,
vernacular interpretation of the picture:
手机 (<768px) container:100% col-xs
小屏幕(≥768px) container:750px col-sm
桌面显示器(≥992px) container:970px col-md
大桌面显示器(≥1200px) container:1170px col-lg
每一个类前缀 col-md-数量 总数是12
注意:col-md-4 会向上兼容 只要屏幕大于992px是 都会显示col-md-4 占4分
但是当屏幕小于992的时候 这个类名就失去了布局效果，成为普通的div块元素
栅格系统是Bootstrap响应式布局的框架，栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局：行（.row）必须包含在容器（container或container-fluid）里；在行内创建一组水平排开的列（.col）；每一行被分为12格，通过类似.col-sm-4的类来控制每一列占位多少格（这里是4格）；每一行的列所占格数超过12，便会引起换行；可以对不同大小的屏幕定义不同的布局。
作者：David
链接：https://zhuanlan.zhihu.com/p/21408006
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
1.2栅格列偏移
列偏移就是 不在当前的位置 想要当前写的列向后移动多少
比如：col-md-offset-4 就表示：在中屏电脑上向后面移动4列的位置
1.3栅格嵌套
栅格系统的.row是可以嵌套的，借此可以完成更加复杂的布局。在某一列下继续添加一行.row，可以再进行细分：
<div class="row user-list">
<div class="col-md-7 user">...</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-4 user">...</div>
<div class="col-md-4 user">...</div>
<div class="col-md-4 user">...</div>
</div>
</div>
</div>
自动布局列
利用特定于断点的列类来简化列大小，而无需使用类似的显式编号类.col-sm-6。
等宽
例如，以下是两个网格布局，从xs到分别应用于每个设备和视口xl。为所需的每个断点添加任意数量的无单元类，每列的宽度将相同。
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
等宽多行
By inserting a .w-100 column position you want to create a new line across multiple lines of equal-width columns. By .w-100 mixed with some of the utility of the display in response to the response responsive.
Safari flexbox there is a bug that caused the error does not work in the absence of an explicit flex-basis or circumstances border. For older versions of the browser, there are some solutions, but if the target browser does not belong to the buggy version, you do not need to do so.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Setting a width
Flexbox automatic layout grid columns also means that you can set the width of a column, and the column at the same level around which automatically resized. You can use predefined grid type (as shown), or inline mixing grid width. Please note that no matter how the width of the middle column, the other columns are resized.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Variable width content
Use col- {breakpoint} -auto class can be adjusted according to the size of the column width of the nature of the contents.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
alignment
Flexbox using alignment tools vertically and horizontally aligned columns. Flex when the container has the following min-height shown, Internet Explorer 10-11 does not support the flex vertically aligned items. For more detailed information, see Flexbugs # 3.
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
Learn about your bootstrap grid layout on the first stop here
For more information, please see the venue's official website Comments on bootstrap official website https://v4.bootcss.com/docs/layout/grid/ learning about grid layout and practice
