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),不过在行的外层还需 ...
随机推荐
- centos7 开机画面定制
安装包 yum install plymouth-plugin-script 设置开机启动画面 mkdir /usr/share/plymouth/themes/tup 创建主题目录 cp /root ...
- 【译】使用UIKit进行面向对象的编程
在WWDC 2015上,Apple谈了Swift中面向协议编程的话题,令人深思.在那之后,好像每个人都在讨论关于协议扩展的话题,这个新的语言特性使每个人都有所困惑. 我阅读了许多关于Swift中协议的 ...
- 用nstimer实现倒计时
用nstimer实现倒计时 // [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timerFir ...
- VMware ESXI磁盘下载虚拟机迁移到另一台VMware ESXI
1.从10.8.9.156服务器下载虚拟机文件上传到10.8.9.160服务器使用. 2.选择虚拟文件夹点击下载到本地计算机. 3.浏览10.8.9.160数据存储. 4.把存放在本地计算机虚拟文件夹 ...
- DuiLib学习笔记1——编译运行demo
c++中皮肤问题比较麻烦,MFC自带的太难用.DirectUI界面库就比较强大了,之前像skin++之类的基于DirectUI收费昂贵.DuiLib是基于DirectUI的界面库,可以将用户界面和处理 ...
- 重启redis报错:Waiting for Redis to shutdown
重启redis,发现一直报:Waiting for Redis to shutdown service redis_6379 restart Stopping ... OK (error) NOAUT ...
- matlab实现分水岭算法处理图像分割
此程序为优化后的分水岭算法,避免了图像过分割 I= imread('D:\Images\pic_loc\1870405130305041503.jpg'); imshow(I); h=fspecial ...
- MySql 首记
1.连接数据: 格式是: -P 端口号 -h mysql主机名\ip -u root (用户) -p 2.显示数据库: show databases; 3.选择数据库: use databas ...
- 刨根问底U3D---Vector3 你到底是蔬菜呢还是水果呢?
事情的起因还是因为一段代码,因为在做一个2D TileBase的游戏 所以需要有一个简单的 Tile坐标到世界坐标的变换 public static Vector3 GetTileWorldPosBy ...
- objective-c第六章课后练习6
题6:接受从终端输入的整数,提取并用英语显示这个数的每一个数字,如932,显示nine three two (题目中注了.这个练习很难)的确有点难,自己想了很久网上也各种搜索.也算是找到参考了 cod ...