BootStrap淺析

BootStrap

- 框架的目的：爲了更容易的完成網頁的開發
- 在線網站：v3.bootcss.com

- 柵格式佈局法
- 是基於Jquery的
- 不是固定的960寬，本身設置的寬而後軟件會自動計算
- 只有12列
- 主要用在，沒有設計經驗又想開發網頁的時候。在像素級還原方面不是很好用。

- 自帶響應式
- 手機通常不會有橫向導航條，被換成了一個按鈕，點擊後顯示導航。
- 導入文件，通常提供一個文件提供了了2個。通常用都用帶MIN的。沒帶min的是方便看。
- 功能同樣，沒差異。
- 帶min，把代碼裏面的換行空格取消了，減小文件大小，提高加載速度。沒帶MIN和平時用的沒什麼差異。

- 有一個js.2個css是必須導入的。
- 還有一句兼容IE的話要加入： （但不是加了就必定沒兼容）
- 兼容瀏覽器的文件必定要放在hesd中。
- 一句要作移動端的時候要加入：
- 禁用響應式：
- 固定頁面寬度。在class="container"（系統自帶的。容器）中
#####width:1000px ！important;//這個最高級。會覆蓋系統設置的。
- 默認的container是不用設置寬度的。由於是響應式，寬度會變更。

- 國內不多弄的有響應式，通常一個pc端一個移動端，分開作。

- 用bootstrap作網頁，先設置row（行）、class="row header",調用的時候.header{...}
- row必須寫在container中。
- 列(col)

> <div class="container">
> <div class="row header"第一行
> <div class="col-xs-1 c1"></div>//調用: .c1{...}
> <div class="col-xs-1 col-xs-push-6 c2"></div>//push方法，推後6個
> <div class="col-xs-11 c3"></div>//哪一個xs表示超小屏幕。9表示佔9格。
> </div>
<div class="row">//要進入第2行
<div class="col-xs-6 c4">//佔6格。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div class="row">//要進入第3行
<div class="col-xs-6 c6">//佔6格。</div>
</div>
</div>

 

- 爲不一樣的屏幕設置列：
- xs：超小屏幕（<768）手機
- sm：小屏幕（768-900）平板
- md:中等屏幕（900-）通常電腦
- lg：超大屏幕（>1200）

 

- 推進：
- push-數字：推幾格，不會影響別的
- pull-數字：拉幾格，不會影響別的
- offset-數字：推幾個，會影響後面的被也推進。

- container不能嵌套，row能嵌套。
- 設置的col-.... 這樣的格子不能用maigin來移動位置等來居中。可是裏面套用的東西能夠用margin,padding來。好比上面的lu,li
- 這個軟件的間距都是30px

 

 

- ps的插件：GuideGuide

負邊距 聖盃佈局（在負邊距的理念之上的。） 960柵格式 12列（960的寬劃爲12格。每一個格子與格子的間距20px,每格60--三、六、3...） 16列（每格40----） 24列（間距：10px,每格30-----）