Bootstrap学习笔记系列1-------Bootstrap网格系统
目錄
- Bootstrap網(wǎng)格系統(tǒng) 學(xué)習(xí)筆記
- 簡單網(wǎng)格
- 偏移列
- 嵌套列
- 列排序
Bootstrap網(wǎng)格系統(tǒng) 學(xué)習(xí)筆記
簡單網(wǎng)格
先上代碼再解釋
<!DOCTYPE html> <html><head><title>Bootstrap 模板</title><meta charset="utf-8"><!-- 引入 Bootstrap --><link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><body><div class="container"><div class="row"><div class="col-md-6" style="background-color: #FFFF00"><p>第一塊區(qū)域</p></div><div class="col-md-6" style="background-color: #99fF66"><p>第一塊區(qū)域</p></div></div></div><!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><!-- 包括所有已編譯的插件 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script></body> </html>CSS和JS的引用
- Bootstrap需要引用bootstrap.min.css這個(gè)樣式表，jquery.min.js，bootstrap.min.js。
- jquery的引用要放在bootstrap的引用的前面。
可以不用下載這些文檔，直接使用百度CDN上公開的類庫入口來實(shí)現(xiàn)上述代碼,，這樣僅憑一個(gè)記事本類軟件就能實(shí)現(xiàn)。
例如bootstrap.min.css利用連接 http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css；
jquery利用連接 http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js
bootstrap.min.js利用連接 http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.jsBootStrap網(wǎng)格系統(tǒng)的工作原理
- 行必須放置在 .container class 內(nèi)， 以便獲得適當(dāng)?shù)膶R和內(nèi)邊距。
代碼的第一個(gè) <div> 的類設(shè)置為 container 的目的就是為此，并且代碼中的 div.row 也必須放在 div.container 中就是為了獲得對齊和內(nèi)邊距。 - 使用行來創(chuàng)建列的水平組，內(nèi)容應(yīng)該放在列內(nèi)，且唯有列可以是行的直接子元素
預(yù)定義的網(wǎng)格類（比較簡單）是通過.row和.col-xs-4之類的代碼來快速實(shí)現(xiàn)的。col-xs-4 表示創(chuàng)建一個(gè)橫跨四格的列（一共是12列）
這里xs的含義是超小型設(shè)備；如果換成.col-sm-4 則表示在小型平板電腦上的四格寬度的列；md 代表中型設(shè)備；lg 表示臺(tái)式機(jī)之類的大型設(shè)備
詳細(xì)請見表格：
| 網(wǎng)格行為 | 一直是水平的 以折疊開始，斷點(diǎn)以上是水平的 以折疊開始，斷點(diǎn)以上是水平的 以折疊開始，斷點(diǎn)以上是水平的 | ||
| 最大容器寬度 | None (auto) | 750px | 970px |
| Class 前綴 | .col-xs- | .col-sm- | .col-md- |
| 列數(shù)量和 | 12 | 12 | 12 |
| 最大列寬 | Auto | 60px | 78px |
| 間隙寬度 | 30px （一個(gè)列的每邊分別 15px） | 30px （一個(gè)列的每邊分別 15px） | 30px （一個(gè)列的每邊分別 15px） |
| 可嵌套 | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes |
- 網(wǎng)格系統(tǒng)是通過想要橫跨的12個(gè)可用的列來實(shí)現(xiàn)的。各列的總和不用等于12，但是如果想做一個(gè)對齊的效果，則要將col橫跨的列數(shù)達(dá)到12個(gè)。如果要?jiǎng)?chuàng)建三個(gè)相等的列則要使用三個(gè).col-sm-4
BootStrap的響應(yīng)式
如果要讓這個(gè)實(shí)例同時(shí)支持大型設(shè)備，小型設(shè)備和中型設(shè)備則須這樣定義列的代碼
<div class="col-sm-3 col-md-6 col-lg-4">... </div> <div class="col-sm-9 col-md-6 col-lg-8">... </div>這樣在手機(jī)上，它將左邊25% 右邊75%的布局，在平板電腦上是50%/50%的布局。在大型視口的設(shè)備上，它將是33%/66%的布局。
偏移列
如果我們就想錯(cuò)落有致按照自己喜歡的方法擺放列的，就要用到偏移列的。使用 .col-md-offset-* 類。這些類就會(huì)把一個(gè)列的左外邊距（margin）增加 * 列，其中 * 范圍是從 1 到 11,大家可以嘗試下面的代碼
<!DOCTYPE html> <html><head><title>Bootstrap 模板</title><meta charset="utf-8"><!-- 引入 Bootstrap --><link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><body><div class="container"><div class="row"><div class="col-md-6 col-md-offset-3" style="height: 100px;background-color: #00FFFF"></div><div class="col-md-2 col-md-offset-3" style="height: 100px;background-color: #33FF99"></div><div class="col-md-6 col-md-offset-3" style="height: 100px;background-color: #66FF66"></div><div class="col-md-2 col-md-offset-3" style="height: 100px;background-color: #99FF33"></div><div class="col-md-6 col-md-offset-3" style="height: 100px;background-color: #FFFF00"></div><!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><!-- 包括所有已編譯的插件 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script></body> </html>嵌套列
在內(nèi)容中可以嵌套默認(rèn)的網(wǎng)格，也很簡單，就是在一個(gè)div.col-md-*添加一個(gè)新的div.row，并在row中添加新的col就OK了。同樣的，小盒子的列數(shù)也不能超過12
<!DOCTYPE html> <html><head><title>Bootstrap 模板</title><meta charset="utf-8"><!-- 引入 Bootstrap --><link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><body><div class="container"><div class="row"><div class="col-md-6" style="height: 100px;background-color: #330033"></div><div class="col-md-6" style="height: 100px;background-color: #3399FF"></div></div><div class="row"><div class="col-md-6" style="height: 100px;background-color: #99FF33"></div><div class="col-md-6" style="height: 100px;background-color: #99FFCC"><div class="row"><div class="col-md-6" style="height: 50px;background-color: #330033"></div><div class="col-md-6" style="height: 50px;background-color: #99FF33"></div></div><div class="row"><div class="col-md-6" style="height: 50px;background-color: #99FFCC"></div><div class="col-md-6" style="height: 50px;background-color: #3399FF"></div></div></div></div></div><!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><!-- 包括所有已編譯的插件 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script></body> </html>列排序
列排序可以允許我們以一種順序編寫列，以另一種順序顯示列。這就可以讓我們用腳本來讓列進(jìn)行動(dòng)態(tài)的移動(dòng)。
.col-md-push-*和.col-md-pull-*來改變內(nèi)置網(wǎng)格的順序。其中*的范圍是從1-11；
轉(zhuǎn)載于:https://www.cnblogs.com/MaFeng0213/p/6055765.html
總結(jié)
以上是生活随笔為你收集整理的Bootstrap学习笔记系列1-------Bootstrap网格系统的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在struts2中配置自定义拦截器放行多
- 下一篇： 第5章 函数与函数式编程