3、bootstrap3.0 栅格偏移 布局中的一个特产
理解了栅格化,那么栅格偏移也相对容易理解了。v3的偏移分别有以下几种:
- offset:左外边距(margin-left);
- pull:右位移(right);
- push:左位移(left)。
其中offset使用的频率最高。不同的列宽度对应的外边距是不同的,所以每一种类型偏移都有四种,以offset为例(以下皆以offset为例):
- xs:col-xs-offset-0 ~ col-xs-offset-12
- sm:col-sm-offset-0 ~ col-sm-offset-12
- md:col-md-offset-0 ~ col-md-offset-12
- lg:col-lg-offset-0 ~ col-lg-offset-12
<label class="col-sm-2 col-md-offset-1 control-label">返利啦</label>
3、bootstrap3.0 栅格偏移 布局中的一个特产的更多相关文章
- Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...
- andriod8.1.0源码编译中的一个坑-package com.sun.javadoc does not exist
这里记录编译过程中的一个坑!!! 编译过程中出现了下面的报错 external/doclava/src/com/google/doclava/ClassInfo.java:20: error: pac ...
- Bootstrap3基础 栅格系统 列中有行,行中有列
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- 解决div布局中第一个div的margin-top在浏览器中显示无效果问题。
原味来源:http://www.hicss.net/do-not-tell-me-you-understand-margin/ 垂直外边距合并问题 别被上面这个名词给吓倒了,简单地说,外边距合并指的是 ...
- Bootstrap3.0的栅格布局系统实现原理
这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...
- Bootstrap3.0学习第三轮(栅格系统案例)
Bootstrap3.0学习第三轮(栅格系统案例) 前言 在前面的一篇文章当中http://www.cnblogs.com/aehyok/p/3400499.html主要学习了栅格系统的基本原理,以及 ...
- Bootstrap3.0学习第六轮(表单)
Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...
- Bootstrap3.0入门学习系列教程
可视化布局:http://www.runoob.com/try/bootstrap/layoutit/ 1.浏览器兼容性:你可以去看看大牛的一篇文章http://www.cnblogs.com/lhb ...
- BootStrap的栅格式布局
1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...
随机推荐
- WebX配置文件、启动与响应流程
** 最近几天一直在看Spring的Ioc和AOP的源码介绍,还有Webx的使用.看Spring的源代码让人眼花缭乱,webx的配置文件也会让人感觉错综复杂无从下手.今天把之前看到的想到的webx相关 ...
- USACO3.42American Heritage(二叉树)
已知中前 求后序 递归一下 有一些小细节 /* ID: shangca2 LANG: C++ TASK: heritage */ #include <iostream> #include& ...
- bzoj3876
不高兴的回忆啊啊啊当初这种简单题因为自己作死就暴零0了这题在OJ上是简单的最小有下界费用流,增广到正费用为止因为算的是总时限但实际的话似乎要用pacman吃豆豆那题的方法先用dp跑出第一次的增广路再用 ...
- C# Sending data using GET or POST ZZ
In this short article, I'll show you how to send data to a website from a C# application using GET o ...
- HDU-4300 Clairewd’s message
http://acm.hdu.edu.cn/showproblem.php?pid=4300 很难懂题意.... Clairewd’s message Time Limit: 2000/1000 MS ...
- 【转】QTP书写程序技巧
一.添加固定注释 新建一TXT文档,将要添加的注释写在文档中 将文档名改为:ActionTemplate.mst 将文件放到QTP安装目录的dat文件夹中 设置好后,在QTP中每次新建一个测试就会自动 ...
- CentOS环境下yum安装LAMP(Linux+Apache+Mysql+php)
CentOS下使用yum命令 安装LAMP详细过程.我们使用的软件是CentOS的最新版本CentOS 6.3,其他版本的也基本类似. 第一步:更新系统内核(如果不想更新可以跳过本步). 首先更新系统 ...
- ubuntu 手动添加jar到本地仓库
前言:maven仓库的下载速度太慢了,而且有些jar不存在,或者加入自己开发的依赖包,还是要学会自己手动加入jar.下面以 javax.servlet-api为例. 1.获取下载的javax.serv ...
- wall
wall 是在linux中用于发送广播信息的命令,他可以让所有的在线用户都收到信息 wall hi 然后,按Ctrl + c 退出
- Jquery Mobile左右滑动效果
首先在一个页面里面定义两个< div data-role="page">,这里为了突出重点,就没有写出footer和header.定义的页面如下: <body&g ...