Bootstrap简介及Bootstrap里的栅格系统col-md/sm/xs-x;
                                                            生活随笔
收集整理的這篇文章主要介紹了
                                Bootstrap简介及Bootstrap里的栅格系统col-md/sm/xs-x;
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.                        
                                
                            
                            
                            Bootrap是web前端CSS框架。它是基于css3和html5開發的,,它在jquery基礎上進行完善。形成自己的風格,并兼容大部分的Jquery插件。 bootstrap現有第四版。變化從Less到Sass,不支持IE,合并了所以HTML resets到一個新的模塊,重寫了所以的JS插件。Bootstrap包含了豐富的web組件,還自帶了13個Jquery插件。模塊代碼,可以對Bootstrap中的所以CSS變量進行修改,根據自己的需求剪切代碼。Bootstrap Less是一個CSS預處理器,讓CSS具有動態性,也可以在CSS中使用Less變量,mixins(混合),nesting(嵌套)。  形式如下: 
<div class="wrap"> <div ?class="row"> <div class="col-md-3">3</div> <div class="col-md-6">6</div> <div class="col-md-3">3</div> </div> 柵格一行最多為12列,若<12,則剩余的部分空白。若>12,多余的部分在下一行另起。 <div ?class="row"> <div class="col-md-3">3</div> <div class="col-sm-6">6</div> <div class="col-xs-6">6</div> </div> </div> 其中,md/sm/xs的意思是,當頁面定義了一個臨界值,當>臨界值時,一行的格子會水平排列。當<臨界值時,一行格子會垂直排列。 xs的臨界是768(<手機);sm的臨界是992(<平板);md的臨界是1200(<桌面) 故xs總是水平排列的。 900px
1080px .col-md-offset-x;是將列偏移到右側X個距離。 col-md--push-x是列平移。
                        
                        
                        <div class="wrap"> <div ?class="row"> <div class="col-md-3">3</div> <div class="col-md-6">6</div> <div class="col-md-3">3</div> </div> 柵格一行最多為12列,若<12,則剩余的部分空白。若>12,多余的部分在下一行另起。 <div ?class="row"> <div class="col-md-3">3</div> <div class="col-sm-6">6</div> <div class="col-xs-6">6</div> </div> </div> 其中,md/sm/xs的意思是,當頁面定義了一個臨界值,當>臨界值時,一行的格子會水平排列。當<臨界值時,一行格子會垂直排列。 xs的臨界是768(<手機);sm的臨界是992(<平板);md的臨界是1200(<桌面) 故xs總是水平排列的。 900px
1080px .col-md-offset-x;是將列偏移到右側X個距離。 col-md--push-x是列平移。
?
轉載于:https://www.cnblogs.com/lvxiaojie/p/5017842.html
總結
以上是生活随笔為你收集整理的Bootstrap简介及Bootstrap里的栅格系统col-md/sm/xs-x;的全部內容,希望文章能夠幫你解決所遇到的問題。
                            
                        - 上一篇: 推荐领域的重要算法
 - 下一篇: 安装hadoop-2.3.0-cdh5.