bootstrap笔记-栅格布局
1. .clearfix
这个类可以在栅格布局中起到一个不占空间的clear的作用,如下:可以尝试带.clearfix和不带它的区别
<div class="container-fluid" >
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3Resize your viewport or check it out on your phone for an example. </div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
</div>
2.在col栅格内再增加.row可以再次嵌套 内部嵌套满12则占满这个col栅格,不满则只占该col栅格的X/12。
3.通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。 ???
push将在前,pull将在后
4.栅格总结:row应该在container或者container-fluid中,col应该在row中,col-xs-x决定了占十二分之几的大小,offset将按12百分比来向右偏移,.clearfix可以不占位置的清楚两边,push在前pull在后
bootstrap笔记-栅格布局的更多相关文章
- bootstrap的栅格布局不支持IE8该如何解决
用bootstrap的栅格布局在IE8上出现失效的情况,通常有两种解决方式 方法/步骤 方法一:引用第三方js,一个叫respond.js的东西,github上可以搜到 方法二:由于IE8不支 ...
- bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
- Bootstrap 框架 栅格布局系统设计原理
如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...
- 【转及总结】Bootstrap 框架 栅格布局系统底层设计原理
如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...
- Bootstrap内栅格布局,表格,按钮,图片的个人总结
栅格布局: container,固定宽度的容器. container-fluid,百分百宽度的容器. 使用行(row)在水平方向上创建一组列(colmun). 每一行中最多能够包含12列,超出的列则另 ...
- 使用bootstrap的栅格布局,用row后出现横向滚动条
原因: **row默认有:margin-left:-15px; margin-right:-15px: 解决办法: **row外层需要包裹container或者container-fluid,一句话就 ...
- css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...
- bootstrap栅格布局-v客学院知识分享
今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义cla ...
- bootstrap(关于栅格布局)
栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...
随机推荐
- Diablo2 1.13版&PlugY10.00 男巫存档
下载地址: http://files.cnblogs.com/files/xiandedanteng/20160805D2113NanwuL83Backup.rar 解压后文件放到Diablo2游戏的 ...
- h5的radio和check选中和不选中返回的checkd值
h5的radio和check选中和不选中返回的checkd值 alert($('input[type=checkbox]').attr('checked')); //存在返回checked,不存在返回 ...
- Advanced REST client
好用的测试工具,老是忘记名字chrome插件 Advanced REST client
- Android onMeasure方法介绍
onMeasure方法在控件的父元素正要放置它的子控件时调用.它会问一个问题,“你想要用多大地方啊?”,然后传入两个参数——widthMeasureSpec和heightMeasureSpec. 它们 ...
- Android--ViewPager制作APP引导页
ViewPager使用FragmentStatePagerAdapter做Adapter,引导页使用多Fragment形式. FragmentStatePagerAdapter代码如下: public ...
- django静态文件数据库设置
STATIC_URL = '/static/'STATICFILES_DIRS = ( os.path.join(BASE_DIR,'static')) DATABASES = { ...
- 成都PC网站建设需要考虑哪些费用呢
亿合科技PC建设小编分享下:成都PC网站建设需要考虑哪些费用呢?随互联网的发展,越来越多人想建设自己网站,站长最关心的问题之一就是网站建设需要多少钱.每个网站建设的费用都是不一样的,但是都需要涵盖几个 ...
- 《30天自制操作系统》12_day_学习笔记
harib09a: 定时器:(Timer)每隔一段时间,会向CPU发送一个中断.这样CPU不用记住每一条指令的执行时间.没有定时器很多指令CPU都很难执行.例如HLT指令,这个指令的执行时间不是个固定 ...
- CentOS 升级PHP
wget http://download.fedoraproject.org/pub/epel/5/x86_64/epel-release-5-4.noarch.rpm wget http://rpm ...
- 创建和导出SVG的技巧(转载)
本文转载自: 创建和导出SVG的技巧