理解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的查找和替換:
==============================================
關于css的格式, 參考有影響力的其他文件
一是, 建議縮進都采用 兩個字符 就好 了
二是, css的元素/類/id 等 應該被看作是一個單詞, 所以 后面的"左大括號" 前面應跟 一個 空格
=======================
在form表單中的 col-md-x中使用 inline 和 block的區別?
再次證明了 如果出現問題, 一定要用f12調試控制臺, 看 "實時代碼". 因為 這個實時代碼 就反映了當前 真實的情況, (不要只看 源代碼) , 因為這個實時代碼, 可能是來自多方面的效果合成: 可能 是html源代碼的, 也可能是css代碼的, 甚至是 js代碼 實時 添加/修改 進來的! 這樣 跟html源代碼 以對比就更容易找到問題 所在了!
注意 bs中的 p標簽, 默認的規則就是: p {margin: 0 0 10px; } 也就是 , p的下方margin有10px的 邊距! 所以 如果不符合你的需要, 就要修改覆蓋
=================================
注意jquery在寫事件時的方式 和 原生的 js 寫事件 的區別:
原生的js, 需要兩步: 一是定義一個事件處理函數, 二是在屬性中指明: οnkeydοwn=func() , 而jquery則是直接寫一個 事件函數, 比如: $('document').keydown(function(){....}); 就把原生的js的 兩步工作都做了.
顯示的使用 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的区别?的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Quick BI 的模型设计与生成SQL
- 下一篇: Go嵌套并发实现EDM,附坑点分析#1