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    
posted @   ChuckLu  阅读(441)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用
历史上的今天:
2017-07-06 out
2017-07-06 TortoiseSvn安装的时候,将svn的命令行工具单独隔离出来
2015-07-06 Binary to Text (ASCII) Conversion
2015-07-06 Pizza pieces
点击右上角即可分享
微信分享提示