bootstrap栅格化系统

Bootstrap栅格化系统

Bootstrap 的栅格化系统采用将页面布局分为12列,再根据页面宽度采用预定义类控制模块占用宽度比例的思想,实现响应式布局。此方法论下的实现可以兼容较多种比例的页面布局,命名比较规范,多列布局页面开发值得借鉴;

栅格化系统的工作规范

(1).container(.container-fluid)>.row>.col-md-;采用容器内行(row)列(column)布局方式,.col-md-必须包含在.row中,.row必须包含在.container中;.container可以包含多个.row,.row可以包含多个.col-md-;

例子:   <div class="container"><div class="row"><div class="col-md-12">.......</div></div></div>

<div class="container"><div class="row"><div class="col-md-4">....</div><div class="col-md-4">...<div><div class="col-md-4">...<div></div></div>

栅格参数

超小屏幕 手机 (<768px)

小屏幕 平板 (≥768px)

中等屏幕 桌面显示器 (≥992px)

大屏幕 大桌面显示器 (≥1200px)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容