bootstrapt学习指南_Bootstrap学习文档（一）
Boostrap中中文網
1. Bootstrap 是什么
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應式布局、移動設備優(yōu)先的 WEB 項目，使用這個框架可以簡單高效的開發(fā)出適配各種屏幕的網站應用，即是編寫一套代碼，適用多重平臺(PC，平板，手機等)。Bootstrap 相比其他框架，自由度更高，它提供了基本的樣式和基本的組件，而不會在創(chuàng)造上約束開發(fā)者的思維。
簡單的用面向對象的來說，Bootstrap 為我而們封裝了一些常用的類(class的名字)和接口(js的插件)，這些類就是這個模版自定義的 css 樣式，比如文本居中，css 代碼是 text-align: center; 經過 Bootstrap封裝后的類(class)名為 text-center，這樣我們就可以直接使用text-center來使一個 p 標簽或者 div 標簽里面的內容居中了，從而實現我們軟件工程中所說的代碼重用。Bootstrap 中的js插件，不需要我們寫 js 代碼就能幫我們實現要用 js 來實現的效果，而是通過使用 Bootstrap 自定義的屬性。
學習的時候直接到這里查 Bootstrap 的文檔 Bootstrap中文網。
2. Bootstrap 常用的基本模版
相比官網的基本模版，增加了一些常用的設置。
Bootstrap常用的模版寫給女朋友的Bootstrap學習文檔
3. 柵格系統
Bootstrap 的布局容器
1.container-fluid 自適應寬度100%
container 適應屏幕的固定寬度，要比container占的寬度小一些
屏幕寬度 >= 1200px 固定寬度為1270px
992px <= 屏幕寬度 <= 1200px 固定寬度為970px
768px <= 寬度 <= 992px 固定寬度為750px
寬度< 768px 固定寬度auto(自適應)
注意：這兩個class不能放在一起，可以是兄弟關系，但不能是嵌套的關系。如果不想讓寬度隨著屏幕而變化，可以給它一個!important來提升優(yōu)先級，這樣的話在所有尺寸下都是一個定值
示例代碼如下：
自適應寬度100%適應屏幕的固定寬度下面是錯誤寫法
錯誤寫法Bootstrap 的柵格系統
在 Bootstrap 中一行分為 12列，也即是屏幕的寬度被分為了 12份，一份就是十二分之一的屏幕寬度，源碼是通過寬度為百分比以及浮動實現的。
1. row 代表一行
2. col-- 代表列，第一個 * 和屏幕尺寸有關，第二個 * 是列數
如果列的和超過了12，那就會換行，如果有一列，這個數值超過了12，那就會按12去顯示
lg 寬度>1200px
表現形式：
屏幕的寬度大于1200，一行顯示n(結構里有幾個div)列
屏幕的寬度小于1200，一行顯示1列
md 992px <= 寬度 <= 1200px
表現形式：
屏幕的寬度大于992并且小于1200，一行顯示n(結構里有幾個div)列
屏幕的寬度小于992，一行顯示1列
sm 768px <= 寬度 <= 992px
表現形式：
屏幕的寬度大于768并且小于992，一行顯示n(結構里有幾個div)列
屏幕的寬度小于768，一行顯示1列
xs 寬度 <= 768px
表現形式：
屏幕的寬度小于768，一行永遠顯示n(結構里有幾個div)列
記憶口訣：LG(手機品牌)(lg)，媽的(md)，什么(sm)，想死(xs)。(不是自己獨創(chuàng)的，參考的網上的笑話。)
示例代碼如下：
縮小瀏覽器寬度改變div的寬度，觀察列數的變化。
.row div{
background: green;
color: #fff;
height: 100px;
border: 1px solid #000;
}
超過12列啦啦啦第1行第1列第1行第2列第2行第1列第2行第2列第2行第3列第3行第1列第3行第2列第3行第3列第4行第1列第4行第2列第4行第3列3. 組合使用
示例代碼如下：
縮小瀏覽器寬度改變div的大小，仔細觀察，四列，變三列，再變兩列，最后變成一列的效果
.row div{
background: green;
color: #fff;
height: 100px;
border: 1px solid #000;
}
第1行第1列第1行第2列第1行第3列第1行第4列第1行第1列4. 列偏移
col--offset- 向右偏移，第一個 * 是和屏幕尺寸有關，第二個 * 是偏移的列數，如果偏移的數量大于12則會不起作用。
示例代碼如下：
.row div{
background: green;
color: #fff;
height: 100px;
border: 1px solid #000;
}
第1行第1列第1行第2列第1行第3列第2行第1列5. 列排序
col--push(pull)- 第一個 * 是和屏幕尺寸有關，第二個 * 是往右或者往左的列數，不能超過12，否則就不起作用，push是往右推，pull是往左拉。
示例代碼如下：
.row div{
background: green;
color: #fff;
height: 100px;
border: 1px solid #000;
}
第1行第1列第1行第2列第2行第1列第2行第2列第3行第1列第3行第2列6. 列偏移和列排序的區(qū)別
列偏移只能往右走，而列排序(pull、push)既可以往右邊走，也可以往左邊走
如果一行中有多列，offset偏移如果大的話，會換行再偏移，而push不會有這個問題，可以溢出父級的容器。
示例代碼如下：
.row div{
background: green;
color: #fff;
height: 100px;
border: 1px solid #000;
}
第1行第1列第2行第1列第3行第1列第4行第1列第4行第2列第5行第1列第5行第2列7. 嵌套
每一列里面都可以在嵌套一行和n(不能超過12)列，那嵌套里面的元素就會以父級的寬度為基準，再分12個列。
示例代碼如下：
.row div{
background: green;
color: #fff;
height: 100px;
border: 1px solid #000;
}
第1行第1列
第1行第2列本篇結束，寫在最后
柵格系統用來網頁布局，這是網頁設計的第一步，另外Bootstrap的中文網上(官網的翻譯版)里面的布局方式也值得我們學習，可以仔細觀察一下。
Bootstrap 系列：
總結
以上是生活随笔為你收集整理的bootstrapt学习指南_Bootstrap学习文档（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ceph rgw：bucket poli
- 下一篇： Legendre多项式