Bootstrap-网格系统学习笔记
来源:互联网 发布:网络大专 自考本科 编辑:程序博客网 时间:2024/06/01 10:38
什么是网格系统(Grid System)
Bootstrap的网格系统遵循“移动设备优先策略”,这个策略主要分成3个部分理解:①根据内容重要性进行优先显示,②优先设计更小设备的布局,具体表现为基础CSS是以移动设备优先,而平板、PC是根据媒体查询进行显示,③渐进增强,即随着屏幕大小的增加而添加元素。
Bootstrap网格系统的工作原理:
通过将内容放置于行或列中进行显示。
(1)行要使用类 .container,以获得合适的内边距以及对齐;
(2)使用行来创建列的水平组;
(3)只有列是行的直接子元素,内容放在列当中;
(4)可以使用预定义的网格类,如 .row 和 .col-xs-4,来创建行和列;
(5)列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
媒体查询:
(1)/* 超小设备(手机,小于 768px) */
/* Bootstrap 中默认情况下没有媒体查询 */
(2)/* 小型设备(平板电脑,768px 起) */
@media (min-width: @screen-sm-min) { ... }
(3)/* 中型设备(台式电脑,992px 起) */
@media (min-width: @screen-md-min) { ... }
(4)/* 大型设备(大台式电脑,1200px 起) */
@media (min-width: @screen-lg-min) { ... }
(5)在媒体查询代码中包含 max-width,从而将 CSS 的影响限制在更小范围的屏幕大小之内
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
- Bootstrap-网格系统学习笔记
- Bootstrap学习笔记—关于网格系统
- Bootstrap学习笔记(三) 网格系统
- Bootstrap学习笔记(四)网格系统
- Bootstrap学习笔记——网格系统
- Bootstrap学习:网格系统
- Bootstrap学习-网格系统
- Bootstrap学习-网格系统
- Bootstrap快速学习笔记(3)网格系统
- bootstrap 基础知识学习(图片+网格系统)
- Bootstrap 学习之 (一) ------ 网格系统
- bootstrap学习笔记(增加网格应用)
- bootstrap笔记 —— @media 与 Bootstrap 网格系统
- Bootstrap-网格布局系统
- Bootstrap 网格系统
- bootstrap布局 网格系统
- Bootstrap 网格系统
- 10003---BootStrap网格系统
- iOS-pushMeBaby经典错误解决
- P1908 逆序对
- FormData的详细介绍及使用
- 创业日志(五)脱不花妹妹
- 【redis】数据类型
- Bootstrap-网格系统学习笔记
- 【科学美国人2008年3月】THE LIMITS OF QUANTUM
- 儿子独立睡觉
- android网络通信之-Http(Android操作HTTP实现与服务器通信)
- VC++工程编译生成 LINK:fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
- 第68篇 摄像头屏蔽(六)
- CentOS7安装Python3.6.0
- 2017.2.5
- 关系映射级别注解