深入理解BootStrap Item7 -- 栅格系统(布局)
来源:互联网 发布:原画梦的网络课怎么样 编辑:程序博客网 时间:2024/04/28 19:47
1、栅格系统(布局)
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。
我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:
网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
在使用的时候大家可以根据实际情况重新编译LESS(或Sass)源码来修改12这个数值(也就是换成24或32,当然你也可以分成更多,但不建议这样使用)。
2、使用规则
Bootstrap内置了一套响应式、移动设备。
3、栅格选项
通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。
从上面的截图可以看出来,Bootstrap针对不同尺寸的屏幕(包括手机、平板、PC等等)设置了不同的样式类,这样让开发人员在开发时可以有更多的选择。根据我的理解:如果在一个元素上使用多个不同的上面的样式类,那么元素会根据在不同尺寸选择最合适(匹配最理想的)的样式类。简单的举例进行说明:比如在一个元素上我们使用了两个样式类:.col-md-和.col-lg。可以对照上面的截图来看
第一种情况:尺寸》=1200px;那么会选择.col-lg。
第二种情况:尺寸》=992px 并且尺寸《=1200px;那么会选择.col-md。
第三种情况如果尺寸《992px;那么这两个样式类都将不会作用于元素上。
4、基本用法
网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式,在这一节中所涉及到的示例,我们都以中屏(970px)为例进行介绍,其他屏幕的使用也类似这一种。
7、列的嵌套
8、总结
本文都是通过最简单的案例,来剖析案例中涉及到的布局要点。这一篇下来,自己感觉学到的还是蛮多的,感觉需要从头再看一遍。其中对有些地方的理解可能不是很到位,希望有理解的、并且看到的前辈大牛可以帮小弟指正一下,小弟在此先谢过你们了。写完这一篇感觉很不错,学到了好多,当然也希望对各位看官能有点儿帮助。
- 深入理解BootStrap Item7 -- 栅格系统(布局)
- 深入理解BootStrap-- 栅格系统(布局)
- 深入理解BootStrap-- 栅格系统(布局)7
- 深入理解BootStrap之栅格系统(布局)
- Bootstrap栅格系统(布局)
- bootstrap栅格系统布局
- Bootstrap-栅格系统自适应布局
- Bootstrap-栅格系统自适应布局
- Bootstrap中的栅格布局系统
- 【Web】Bootstrap栅格布局系统设计原理
- Bootstrap栅格系统详解,响应式布局
- Bootstrap 栅格系统响应式布局
- Bootstrap V3 栅格系统的小理解
- bootstrap栅格布局笔记(1)
- bootstrap栅格布局
- Bootstrap-栅格布局实例
- bootstrap-栅格布局
- BootStrap栅格布局
- (解题报告)HDU2048--神、上帝以及老天爷!(错排)
- BaiduMap 使用小结
- android面试攻略(3)
- WinPcap笔记(6):过滤数据包
- light oj 1245 - Harmonic Number (II)【规律】
- 深入理解BootStrap Item7 -- 栅格系统(布局)
- CentOS 7.1 linux 裁剪 嵌入式 系统 定制
- iOS在程序中控制系统的屏幕亮度
- C++11新特性
- 硬盘分区重新调整后,双系统不能进入Ubuntu14.04
- 第二十章 无状态Web应用集成
- 几种防止过拟合的方法介绍
- android面试攻略(4)
- Android Studio断点调试图文详解(超简单,一看就会)