参考: http://www.cnblogs.com/jnslove/p/5430481.html & https://blog.csdn.net/hly_coder/article/details/78968729

实现方式的区别:col-md-offset-,是利用margin-left实现的,col-md-push-/col-md-pull-是利用相对定位实现的。 效果的区别:
1、col-md-offset-
只能向右偏移,因为实现方式就是margin-left, 它后面所有的内容 都要依次向右移动; 而push/pull因为是相对定位,既可以左偏移也可以右偏移, 而且是只有当前使用了 列推拉的元素才会移动, 其他元素不会动, 因此, 就有可能发生 元素列之间的重叠! ~~如果一行的偏移量+实际的宽度综合超过12,col-md-offset会换行显示,也是因为margin,而push/pull只会一部分不可见(超出容器),因为是相对自身定位。 ~~~ offset原理是用了margin-left来实现的偏移,而pull和push是用的float。 ~~~ 从功能上来看:push和pull可以用来给元素换位置,比较灵活。 使用的是 float , 是 改变排序 , 可能会 重叠!

col-md-关于推拉的单词顺序?

它们都是 col-md-[动词]-距离:
动词, 包括 offset 偏移, push推, pull 拉. 动词都是 在 md/xs/lg等的后面, 距离的前面, 而不是 相反 .
因为这个类表示的意思是: 向右(或左) 推拉 几个... 所以 是push/pull/offset-xxx

================================================

再说一下vim的查找和替换:

  1. 如果查找到了, 会以高亮选中的方式来提醒, 而且被选中的第一个字符还会以闪烁动画的方式提示. 如果设置了 incsearch, 则你在写搜索pattern的时候, 如果有匹配的, 就会显示出来.
  2. 澄清两个要点: 搜索范围, 默认的是当前行, 也可以指定搜索行的范围, 比如 1:10, .,G等, 也可以用%表示 所有行(即全部正文); 在一行内搜索替换的次数, 默认 是只替换一次, 如果要替换这一行中所有匹配的情况, 使用 /g选项.
  3. 最重要的是, 要清楚vim默认的正则表达式(pattern)的规则, 有四种, 但是我们只需记住最基本的一种就是 /m(基本magic的写法和规则): 在pattern表达式中, 只有 四个特殊符号(元字符)不需要转义, 即 点号., 星号*, 行开始^, 行结束$ 除此之外,其他的元字符都要用 分斜杠转义, 包括: 表示单词开头/结束的 尖括号 <, >, 等等, 而且在pattern中可以采用 反向前置引用 \1, \2等等.

==============================================

关于css的格式, 参考有影响力的其他文件
一是, 建议缩进都采用 两个字符 就好 了
二是, css的元素/类/id 等 应该被看作是一个单词, 所以 后面的"左大括号" 前面应跟 一个 空格

=======================

在form表单中的 col-md-x中使用 inline 和 block的区别?

  1. inline和 block虽然 都能在 外观上 显示, 但是 它们在 padding, margin, 甚至 width...等方面还是有较大区别的, 特别是在 多个控件 需要 对齐的情况下, 却对不齐 就很是麻烦了. 所以在 form表单中 , 如果控件是放在 col-md-x 栅格中的话, 在用js进行显示/隐藏 控制的时候, 最好是写none, block, 不要写inline, 甚至是 inline-block 都不行!
  2. 再次证明了 如果出现问题, 一定要用f12调试控制台, 看 "实时代码". 因为 这个实时代码 就反映了当前 真实的情况, (不要只看 源代码) , 因为这个实时代码, 可能是来自多方面的效果合成: 可能 是html源代码的, 也可能是css代码的, 甚至是 js代码 实时 添加/修改 进来的! 这样 跟html源代码 以对比就更容易找到问题 所在了!

  3. 注意 bs中的 p标签, 默认的规则就是: p {margin: 0 0 10px; } 也就是 , p的下方margin有10px的 边距! 所以 如果不符合你的需要, 就要修改覆盖

=================================

注意jquery在写事件时的方式 和 原生的 js 写事件 的区别:

  1. 原生的js, 需要两步: 一是定义一个事件处理函数, 二是在属性中指明: οnkeydοwn=func() , 而jquery则是直接写一个 事件函数, 比如: $('document').keydown(function(){....}); 就把原生的js的 两步工作都做了.

  2. 显示的使用 on 函数, 比直接使用 事件函数 要更直观一些 比如: $(document).on('keydown', function(event){...});
    使用 键盘事件时, 一定要返回ifalse 才能 屏蔽 浏览器的默认行为!

=========================================

在写html或css时的一些常规思想:

  • 外部间距: 对于div或区块, 常常要做的是: 要调整区块和区块 在 纵向上的 间距, 一般 只需要规定 每个区块 在 下方的margin就可以了: 即只需要规定: margin-bottom: 10px就好了
  • 内部 间距: 对于一些panel或容器, 为了保证 容器中的 内容, 不会紧挨着/ 抵拢边框, 一般规定 四周方向 上一个paddign: 比如: 规定 padding: 5px

转载于:https://www.cnblogs.com/bkylee/p/10323503.html

理解bootstrap的列偏移offset 和 推拉push/pull的区别?相关推荐

  1. Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果

    Bootstrap 网格系统 1.Bootstrap网格系统工作原理 Bootstrap的网格系统是指将页面布局划分为等宽的列.随着屏幕或视口尺寸的增加,系统会自动分为1~12列. 网格系统用于通过一 ...

  2. Bootstrap 列偏移\列嵌套\列排序

    1.列偏移 这个其实很简单就是通过一个样式类,通过.col-md-offset-*可以将列偏移到右侧.这些class通过使用*选择器将所有列增加了列的左侧margin.例如,.col-md-offse ...

  3. 深入理解BootStrap Item7 -- 栅格系统(布局)

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

  4. 51 -算法 -斐波拉奇数列 -LeetCode 70 -递推

    // 斐波拉奇数列 // 递归 和 递推 static int count = 0; class Solution {public:int climbStairs(int n) {if(n == 1 ...

  5. 描述 C 库函数 int fseek(FILE *stream, long int offset, int whence) 设置流 stream 的文件位置为给定的偏移 offset,参数 offs

    描述 C 库函数 int fseek(FILE *stream, long int offset, int whence) 设置流 stream 的文件位置为给定的偏移 offset,参数 offse ...

  6. 浅谈iOS和Android后台实时消息推送的原理和区别

    http://www.52im.net/thread-286-1-1.html 前言 iOS和Android上的实时消息推送差异很大,往小了说是技术实现的差异,往大了说是系统实现理念的不同.实时消息推 ...

  7. 朋友圈微博feed流,推拉实践

    上一篇<feed流拉取,读扩散,究竟是啥?>关于feed流的拉取还是推送,只写了一半"拉取",今天把另一半"推送"(写扩散)的坑填完. 为了对比&q ...

  8. 坯子库曲面推拉教程_一招曲面流动,搞定99%异形建模

    曲面流动可以建什么模型? 这样的▼ 这样的▼ 还有这样的▼ 那究竟如何使用曲面流动呢? 本文告诉你! 曲面流动是什么? 曲面流动功能相当于Rhino(犀牛)中的"沿曲面流动"命令, ...

  9. 一个小时开发的直播推拉流软件来了

    一.简介 目前市面上直播推流的软件有很多,拉流也很常见.近期因为业务需要,需要搭建一整套服务端推流,客户端拉流的程序.随即进行了展开研究,花了一个小时做了个基于winfrom桌面版的推拉流软件.另外稍 ...

最新文章

  1. Swift解读专题四——字符串与字符
  2. PEI ZHI GUANLI GAISHU 1(liyi)
  3. WebApi与Mvc的区别
  4. 查看oracle系统信息,查看 ORACLE 系统级信息
  5. MySQL读写分离应用层实现
  6. c++ 结构体初始化_【干货】c语言基础语法——结构体
  7. Leecode01. 两数之和——Leecode大厂热题100道系列
  8. 研究Mysql优化得出一些建设性的方案
  9. XCodeBuild 使用
  10. Ajax/CSS表格设计汇集
  11. CoreLocation框架--监测方向/地磁传感器
  12. freertos 创建互斥量_freertos任务通信
  13. iis 支持html执行php输出
  14. LINE:不得不看的大规模信息网络嵌入
  15. 将python程序打包成exe
  16. float占多少字节 java,Java语言中,float类型所占存储空间为()个字节。
  17. 大学生竞赛管理系统项目
  18. 微控制器和微处理器的区别(含课本原图)
  19. c语言中char* 代表什么
  20. 百度浏览器的隐私安全问题分析

热门文章

  1. SVN更新后显示的U与G是什么意思?
  2. 解决浏览器保存密码自动填充问题
  3. 01 决策树 - 数学理论概述 - 熵
  4. SWIFT问题很大,第4家受害银行浮出水面
  5. joinColumns和inverseJoinColumns的使用方法
  6. Android最佳的开源库(四)
  7. 自定义ConfigurationSection,创建多个嵌套的ConfigurationElementCollection节点
  8. Linux centos 集群下ssh无密码
  9. video processing on Mac and iOS
  10. GODADDY主机用tar命令通过SSH远程打包20M以上的文件