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-control
s. - 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 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 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