开发工具与关键技术:Adobe Dreamweaver CC 2017 前端
作者:刘剑鸿
撰写时间:2019年2月19日星期二
Bootstrap中的栅格系统
Bootstrap包含了一个强大的移动优先的网格系统,它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕),对网页布局非常方便和实用。Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容,完全基于flexbox流式布局构建的,完全支持响应式标准。
(本截图来自Bootstrap手册)
两个格之间的宽度并不是固定,也可通过代码设置该宽度。例如;
( 本截图来自Bootstrap手册)
在row类内,col-x中的x之和不能超过12.而且x也不能超过12,否则该效果无效。或者我们有时候没必要设置col-x中的x,我们可运用w-100来实现跨多个行等宽列,方法是使用w-100将其拆分,如下截图;
使用flexbox布局和它搭配,效果更好。可轻松的实现DIV空间布局的垂直、水平对齐
对网页的布局,排版有很大的帮助!