Bootstrap4 网格系统

学习注意事项

col-*-*

第一个*是设备类型，第二个*是控件宽度的占比

屏幕被等分为12，col-1宽度是1/12，col-6宽度是50%，col-12宽度是100%

给应用了class的element，添加上style="background-color: red"，通过背景色可以比较方便地看出效果。

 

Bootstrap4中的使用

http://www.runoob.com/bootstrap4/bootstrap4-grid-basic.html

Bootstrap 4 网格系统有以下 5 个类:

• .col- 针对所有设备
• .col-sm- 平板 - 屏幕宽度等于或大于 576px
• .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
• .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
• .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

Flex  新推出的

https://getbootstrap.com/docs/4.0/utilities/flex/ 

 

 

 

Bootstrap3

What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?

通过这个来控制控件的位置

 

online demo https://www.codeply.com/go/O1bv4op7Fh

 

Bootstrap3到Bootstrap4关于form的改变

https://getbootstrap.com/docs/4.0/migration/#forms-1

Horizontal forms overhauled:

• Dropped the .form-horizontal class requirement.
• .form-group no longer applies styles from the .row via mixin, so .row is now required for horizontal grid layouts (e.g., <div class="form-group row">).
• Added new .col-form-label class to vertically center labels with .form-controls.
• Added new .form-row for compact form layouts with the grid classes (swap your .row for a .form-row and go).

 

datatables的plugin，一般都有一个css和js文件。css控制样式，js控制行为。

 

作者:Chuck Lu    GitHub