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),不过在行的外层还需 ...
随机推荐
- Java学习-001-JDK安装配置
本节主要讲述在 Win7 64bit 系统下安装.配置 JDK8u25,敬请参阅.详细步骤如下: 一.JDK下载 您可到 官方网站 或 我的云盘 下载,对应的JDK8u25的安装程序,下载过程不再赘述 ...
- WebService 学习
WebService是一种跨编程语言和跨操作系统平台的远程调用技术. XML+XSD, SOAP 和 WSDL 是构成WebService平台的三大技术. SOAP = HTTP协议 + XML数据格 ...
- 获取windows磁盘的可用空间函数
<?php /* *获取某个磁盘的剩余空间 *$param 关联数组,下标是哪个盘,单位,可以是B,KB,MB,GB *可以设置获取多个磁盘,例如:array('C'=>'KB','D'= ...
- 浏览器浏览记忆(history)几则技巧记录
一般浏览记录模式 假设有三个页面, start.html, 通过点击start.html上的链接跳转到 first.html, 然后点击first.html上链接跳转到 second.html, 那么 ...
- textarea与XSS攻击
textarea用法 一般是用来接收用户输入,用于提交到服务器端,例如 网站的评论框. 如果此框也用于显示服务器端回传的内容,则有如下两种用法 法1 后台直接插入 <textarea>&l ...
- JDBC增删改查,PreparedStatement和Statement的区别
此篇是在上一篇的基础上使用PreparedStatement对象来实现JDBC增删改查的 具体工具类JDBCTools和实现类和配置文件在上一篇Statement对象实现的时候有写. 上一篇地址htt ...
- C# “快捷方式” 实现程序开机启动
添加引用: COM : Windows Script Host Object Model Name: Interop.IWshRuntimeLibrary 添加命名空间: using IWshRunt ...
- 转:客制FORM调用会计科目弹性域/根据科目取得CODE_COMBINATION_ID
1.首先在创建数据表时,添一个字段用来保存会计科目的ID.如:CODE_COMBINATION_ID 2.在FORM相应的数据块增加两个ITEM,用来显示科目NUMBER与DESCRITION. 例: ...
- Qt信号与槽应用实例一
..... connect(m_pGlobelWidget,signal(globeControlClick(object,object)),this,slot(globeControlClick(o ...
- 关于OpenGL的性能方面的技巧(不时更新)
显示列表可以有效提高渲染性能渲染顺序顶点层次分配内存管理递归查找 在有引擎的情况下,同一个模型对象会使用同一份内存和显存 优化裁剪算法,去掉无需渲染的对象 纹理阴影比体阴影效率要高 尽量使用UVW贴图 ...