浅谈bootstrap之栅格系统
2017-03-13 22:35
260 查看
bootstrap的强大功能之一也许就是他的栅格系统了吧!这是一套以移动设备优先的系统,通过其系统以及相关的设置,你可以很快的构建一个响应式的网站;
首先要使用grid(栅格)系统就必须在有一个父类.container(或者是.container-fluid百分比的栅格布局)包括着.row(行)类,然后每一行里面真正包含的内容就是栅格系统的关键所在了,在不同的屏幕尺寸的下,如下配置:
![](https://img-blog.csdn.net/20170313224303610?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY29kZXNXYXk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
但在这里自己主要谈的是自己对栅格系统的一些总结:
1.栅格系统可以嵌套,只需要在可以嵌套的位置(某一列中添加类.row元素即可,其他的照旧即可,但嵌套的列不会超过12);
2.对于栅格系统,如果在某种屏幕尺寸下(如col-sm-*)的和大于12,那么多出来的部分其整体会被挤到下面的一行及进行显示;
3.对于关于栅格系统的列偏移,说白了,就是在某种特定的屏幕尺寸做下某一列(几列)进行偏移(margin)如:
使用
4.不过一般而言,在利用栅格系统进行布局的时候要经常的配合.clearfix类和响应式工具类来进行综合布局;
注:在利用bootstrap进行响应式布局的时候,不要一味的想使用bootstrap的自带的一些现有的一些东西,说白了响应式布局的原理还是@media,自己原生的也要会写吧
首先要使用grid(栅格)系统就必须在有一个父类.container(或者是.container-fluid百分比的栅格布局)包括着.row(行)类,然后每一行里面真正包含的内容就是栅格系统的关键所在了,在不同的屏幕尺寸的下,如下配置:
但在这里自己主要谈的是自己对栅格系统的一些总结:
1.栅格系统可以嵌套,只需要在可以嵌套的位置(某一列中添加类.row元素即可,其他的照旧即可,但嵌套的列不会超过12);
2.对于栅格系统,如果在某种屏幕尺寸下(如col-sm-*)的和大于12,那么多出来的部分其整体会被挤到下面的一行及进行显示;
3.对于关于栅格系统的列偏移,说白了,就是在某种特定的屏幕尺寸做下某一列(几列)进行偏移(margin)如:
使用
.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用
*选择器为当前元素增加了左侧的边距(margin)。例如,
.col-md-offset-4类将
.col-md-4元素向右侧偏移了4个列(column)的宽度(也只是当屏幕尺寸符合md的时候才会出现偏移)。
4.不过一般而言,在利用栅格系统进行布局的时候要经常的配合.clearfix类和响应式工具类来进行综合布局;
注:在利用bootstrap进行响应式布局的时候,不要一味的想使用bootstrap的自带的一些现有的一些东西,说白了响应式布局的原理还是@media,自己原生的也要会写吧
相关文章推荐
- BootStrap :环境搭建;布局容器;视口:在移动设备上使用,用于比例缩小视口内容;栅格系统;Col-屏幕尺寸-所占栅格数
- 【03】Bootstrap — 栅格系统
- 学习——Bootstrap网格(栅格)系统
- Bootstrap3.0学习第二轮(栅格系统原理)
- Bootstrap-导航条-栅格系统-Carousel(轮播效果)-标签页
- bootstrap栅格系统显示规则
- Bootstrap 栅格系统
- bootstrap3.0 栅格系统
- 【7】了解Bootstrap栅格系统基础案例(2)
- 对于Bootstrap框架中栅格系统的一些心得
- bootstrap的栅格系统
- Bootstrap3.0学习第三轮(栅格系统案例)
- bootstrap栅格系统自定义列
- 【Web】Bootstrap栅格布局系统设计原理
- Bootstrap 框架 栅格布局系统设计原理
- Bootstrap 栅格系统
- 栋栋晓08:Bootstrap学习总结:栅格系统
- bootstrap栅格系统示例代码分享
- 【BootStrap】栅格系统、表单样式与按钮样式-附有源码
- bootstrap学习2--全局css之栅格系统