學習注意事項

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控制行為。

?

轉載于:https://www.cnblogs.com/chucklu/p/9272149.html

總結

以上是生活随笔為你收集整理的Bootstrap4 网格系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。