理解bootstrap的列偏移offset 和 推拉push/pull的区别?
参考: 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的查找和替换:
- 如果查找到了, 会以高亮选中的方式来提醒, 而且被选中的第一个字符还会以闪烁动画的方式提示. 如果设置了 incsearch, 则你在写搜索pattern的时候, 如果有匹配的, 就会显示出来.
- 澄清两个要点: 搜索范围, 默认的是当前行, 也可以指定搜索行的范围, 比如 1:10, .,G等, 也可以用%表示 所有行(即全部正文); 在一行内搜索替换的次数, 默认 是只替换一次, 如果要替换这一行中所有匹配的情况, 使用 /g选项.
- 最重要的是, 要清楚vim默认的正则表达式(pattern)的规则, 有四种, 但是我们只需记住最基本的一种就是 /m(基本magic的写法和规则): 在pattern表达式中, 只有 四个特殊符号(元字符)不需要转义, 即 点号., 星号*, 行开始^, 行结束$ 除此之外,其他的元字符都要用 分斜杠转义, 包括: 表示单词开头/结束的 尖括号 <, >, 等等, 而且在pattern中可以采用 反向前置引用 \1, \2等等.
==============================================
关于css的格式, 参考有影响力的其他文件
一是, 建议缩进都采用 两个字符 就好 了
二是, css的元素/类/id 等 应该被看作是一个单词, 所以 后面的"左大括号" 前面应跟 一个 空格
=======================
在form表单中的 col-md-x中使用 inline 和 block的区别?
- inline和 block虽然 都能在 外观上 显示, 但是 它们在 padding, margin, 甚至 width...等方面还是有较大区别的, 特别是在 多个控件 需要 对齐的情况下, 却对不齐 就很是麻烦了. 所以在 form表单中 , 如果控件是放在 col-md-x 栅格中的话, 在用js进行显示/隐藏 控制的时候, 最好是写none, block, 不要写inline, 甚至是 inline-block 都不行!
再次证明了 如果出现问题, 一定要用f12调试控制台, 看 "实时代码". 因为 这个实时代码 就反映了当前 真实的情况, (不要只看 源代码) , 因为这个实时代码, 可能是来自多方面的效果合成: 可能 是html源代码的, 也可能是css代码的, 甚至是 js代码 实时 添加/修改 进来的! 这样 跟html源代码 以对比就更容易找到问题 所在了!
注意 bs中的 p标签, 默认的规则就是:
p {margin: 0 0 10px; }
也就是 , p的下方margin有10px的 边距! 所以 如果不符合你的需要, 就要修改覆盖
=================================
注意jquery在写事件时的方式 和 原生的 js 写事件 的区别:
原生的js, 需要两步: 一是定义一个事件处理函数, 二是在属性中指明: onkeydown=func() , 而jquery则是直接写一个 事件函数, 比如: $('document').keydown(function(){....}); 就把原生的js的 两步工作都做了.
显示的使用 on 函数, 比直接使用 事件函数 要更直观一些 比如:
$(document).on('keydown', function(event){...});
使用 键盘事件时, 一定要返回ifalse 才能 屏蔽 浏览器的默认行为!
=========================================
在写html或css时的一些常规思想:
- 外部间距: 对于div或区块, 常常要做的是: 要调整区块和区块 在 纵向上的 间距, 一般 只需要规定 每个区块 在 下方的margin就可以了: 即只需要规定: margin-bottom: 10px就好了
- 内部 间距: 对于一些panel或容器, 为了保证 容器中的 内容, 不会紧挨着/ 抵拢边框, 一般规定 四周方向 上一个paddign: 比如: 规定 padding: 5px
理解bootstrap的列偏移offset 和 推拉push/pull的区别?的更多相关文章
- Android 与 iOS 推送 Push Notification 的区别
Android 安卓使用 GCM (Google Cloud Messaging) 接收推送,然后应用根据实际情况决定做什么反应,比如显示一个 Notification. 所以安卓下,推送 Push ...
- Bootstrap 列偏移\列嵌套\列排序
1.列偏移 这个其实很简单就是通过一个样式类,通过.col-md-offset-*可以将列偏移到右侧.这些class通过使用*选择器将所有列增加了列的左侧margin.例如,.col-md-offse ...
- 《深入理解bootstrap》读书笔记:第二章 整体架构
一. 整体架构 1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)--这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3.jQu ...
- 《深入理解Bootstrap》读书笔记(一)
栅格系统 实现原理 通过定义容器大小,平分12份,再调整内外边距,最后结合媒体查询. 通过一系列包含内容的行和列来创建页面布局.下面列出了 Bootstrap 栅格系统是如何工作的: 1.行必须放置在 ...
- 深入理解BootStrap之栅格系统(布局)
1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...
- 全球第一本基于Bootstrap V3.x的图书《深入理解Bootstrap》终于上市了,再次免费送书15本【活动结束】
先说活动规则,再说书的事 经过将近1年的努力,终于有了第一本自己独立编写的书:<深入理解Bootstrap>,基于最新版V 3.1 ,侧重于源码详解.架构分析.插件扩展(全新开发)实战.为 ...
- 关于如何解决bootstrap table 列 切换 刷新 高度不一样
在使用bootstrap table时候,碰到bootstrap table 列 切换 刷新 高度不一样的问题,如图所示: 解决这个问题很简单,在你的页头加一句<!DOCTYPE html> ...
- ActiveMQ基本详解与总结& 消息队列-推/拉模式学习 & ActiveMQ及JMS学习
转自:https://www.cnblogs.com/Survivalist/p/8094069.html ActiveMQ基本详解与总结 基本使用可以参考https://www.cnblogs.co ...
- jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法
jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...
随机推荐
- 实验八 Web基础 SQL注入原理
实验八 Web基础 实验要求 (1)Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. (2)Web前端javascipt ...
- table-一列细分为多列(合并单元格)
这个是一个很常见的一个表格展示需求,其中最要的就两个属性 rowspan 和 colspan .他们分别就是合并行 与 合并列. 要做的效果是如图下面这个,联系电话就是合并了单元格.这个说法类似于ex ...
- mysql-5.7 通过apt或者yum安装方式
此文章仅记录使用apt-get安装mysql. 通过以下命令安装MySQL: shell> sudo apt-get install mysql-server 这将安装MySQL服务器的包,以及 ...
- sudoers权限管理
该/etc/sudoers文件的权限管理很完善,覆盖了linux中的各种命令,各种shell.编辑器等等,在此留作以后作为参考. # This file MUST be edited with the ...
- jstack命令
先是有jps查看进程号: hollis@hos:~$ jps 29788 JStackDemo1 29834 Jps 22385 org.eclipse.equinox.launcher_1.3.0. ...
- file_get_contents("php://input")的用法
$data = file_get_contents("php://input"); php://input 是个可以访问请求的原始数据的只读流. POST 请求的情况下,最好使用 ...
- Python 多进程和进程池
一,前言 进程:是程序,资源集合,进程控制块组成,是最小的资源单位 特点:就对Python而言,可以实现真正的并行效果 缺点:进程切换很容易消耗cpu资源,进程之间的通信相对线程来说比较麻烦 线程:是 ...
- phpstorm----------phpstorm设置自动更新的ssh信息如何修改--后续增加如何设置自动更新
1.如何设置phpstorm将本地代码时时同步到远程服务器 注意下面一定要打勾 点击下一步,然后还有一个页面,然后不用做任何操作,直接点击完成.中途有个页面是输入远程服务器ip账号密码链接方式的,那个 ...
- 工厂方法 Factory Method
背景:有一个应用框架,它可以向用户显示多个文档.在这个框架中,两个主要的抽象是类Application和Document.这两个类都是抽象的.客户必须通过它们的子类来做与举替应用相关的实现. 分析:因 ...
- python '%r'或者'{!r}'的意思
转载:https://blog.csdn.net/a19990412/article/details/80149112 这两个都是python的转译字符, 类似于%r, %d,%f >>& ...