1.CSS12柵格系統是整個Bootstrap的核心功能
2.Bootstrap所有的jquery都要用到jquery1.10+
3.柵格系統的工作原理：
一行數據必須包含在.container或.container-fluid中
使用row在水平方向創建一組column
具體內容要放在column中只有column才是row的直接子元素
內置很多樣式
通過padding創建column之間的間隙
1-12表示跨越范圍
通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工作的。
| 超小屏幕 手機 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面顯示器 (≥992px) | 大屏幕 大桌面顯示器 (≥1200px) | |
|---|---|---|---|---|
| 柵格系統行為 | 總是水平排列 | 開始是堆疊在一起的，當大於這些閾值時將變為水平排列C | ||
.container 最大寬度 |
None （自動） | 750px | 970px | 1170px |
| 類前綴 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）數 | 12 | |||
| 最大列（column）寬 | 自動 | ~62px | ~81px | ~97px |
| 槽（gutter）寬 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
一.單詞部分
container固定寬度 container-fluid 100%寬度 row行
column 列 offset偏移 form-control表單元素 default默認
primary默認的 img-response響應式圖片 img-rounded將圖片變為圓角
img-circle圓形圖 img-thumbnail伸縮圖
二.預習部分
1.什么是柵格系統
把網頁寬度平分12份，並且可以自由搭配
2.寫出可以作為按鈕使用的標簽或者元素
btn-success，btn-default，btn-warning
btn-danger，btn-link，btn-info，btn-primary
三.練習部分
1.制作美聯英語在線VIP頁面--師資模塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>美聯英語在線VIP-真人在線</title> <link rel="stylesheet" href="css/bootstrap.css"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <style> .container{ background-color: rgba(230,215,255,0.36); } .row{ margin-left: 75px; margin-right: 75px; } .row .row{ margin-top: 10px; } .col-md-7{ padding: 120px; background-image: url("image/oleg.png"); background-repeat: no-repeat; background-size: contain; } .col-md-3{ padding: 120px; background-image: url("image/oksana.png"); background-repeat: no-repeat; background-size: cover; } #one{ padding: 120px; background-image: url("image/ewelina.png"); background-repeat: no-repeat; background-size: cover; } #two{ padding: 120px; background-image: url("image/juraj.png"); background-repeat: no-repeat; background-size: cover; } #three{ padding: 120px; background-image: url("image/tmore.png"); background-repeat: no-repeat; background-size: cover; } #ce{ margin-left: 200px; } #ce1{ margin-left: 300px; } /* .col-md-6{ !*margin-left: auto;*! }*/ /* 記住一個新的東西通配作用*/ [class*="col-"]{ border: 15px solid white; background-color: rgba(86,61,124,0.15); /* border: 15px solid rgba(86,61,124,.2);*/ } </style> </head> <body> <div class="container"> <div class="row"><div class="col-md-6 col-md-offset-3"><h2>2000+全球師資 100%歐美外教</h2></div></div> <!--<div id="ce1"><h4>TESOL證書/五年以上教齡/高顏值外教團</h4></div>--> <div class="row"><div class="col-md-6 col-md-offset-3"><h4>TESOL證書/五年以上教齡/高顏值外教團</h4></div></div> <div class="row"> <div class="col-sm-12 col-md-7"></div> <div class="col-sm-12 col-md-3 col-md-offset-1"></div> </div> <div class="row"> <div class="col-lg-4 col-md-4" id="one">.col-md-4</div> <div class="col-lg-4 col-md-4" id="two">.col-md-4</div> <div class="col-lg-4 col-md-4" id="three">.col-md-4</div> </div> </div> </body> </html>
2.制作美聯英語在線VIP頁面--特色服務模塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>美聯英語</title> <link rel="stylesheet" href="css/bootstrap.css"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> </head> <style> .col-md-10{ margin-top: 50px; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"><h2>更多特色服務</h2></div ></div> <!--<div id="ce1"><h4>TESOL證書/五年以上教齡/高顏值外教團</h4></div>--> <div class="row"><div class="col-md-6 col-md-offset-3"><h4>4+核心優勢N+成效保障</h4></div> </div> <div class="row"> <div class="col-xs-6 col-md-2"><img src="image/3.png"></div> <div class="col-xs-6 col-md-10"><span><strong>擔心計划沒有變化快？4小時+隨訂隨上</strong><br> 在失落的地方,重拾舊夢,為夢想而努力,為成功而拼搏!無需要驚天動地,只要腳踏實地。 無論夢想將落向何方,只要一直在努力,就不會給給歲月面向太陽吧,不問春暖花開 ,只求快樂面對,因為,透過灑滿陽光的玻璃窗,驀然回首,你何嘗不是別人眼中的風景</span></div> </div> <div class="row"> <div class="col-xs-6 col-md-2 col-md-push-10 col-xs-push-6"><img src="image/6.png"></div> <div class="col-xs-6 col-md-10 col-md-pull-2 col-xs-pull-6"><span><strong>擔心計划沒有變化快？4小時+隨訂隨上</strong><br> 在失落的地方,重拾舊夢,為夢想而努力,為成功而拼搏!無需要驚天動地,只要腳踏實地。 無論夢想將落向何方,只要一直在努力,就不會給給歲月面向太陽吧,不問春暖花開 ,只求快樂面對,因為,透過灑滿陽光的玻璃窗,驀然回首,你何嘗不是別人眼中的風景</span></div> </div> <div class="row"> <div class="col-xs-6 col-md-2"><img src="image/5.png"></div> <div class="col-xs-6 col-md-10"><span><strong>擔心計划沒有變化快？4小時+隨訂隨上</strong><br> 在失落的地方,重拾舊夢,為夢想而努力,為成功而拼搏!無需要驚天動地,只要腳踏實地。 無論夢想將落向何方,只要一直在努力,就不會給給歲月面向太陽吧,不問春暖花開 ,只求快樂面對,因為,透過灑滿陽光的玻璃窗,驀然回首,你何嘗不是別人眼中的風景</span></div> </div> <div class="row"> <div class="col-xs-6 col-md-2 col-md-push-10 col-xs-push-6"><img src="image/6.png"></div> <div class="col-xs-6 col-md-10 col-md-pull-2 col-xs-pull-6"><span><strong>擔心計划沒有變化快？4小時+隨訂隨上</strong><br> 在失落的地方,重拾舊夢,為夢想而努力,為成功而拼搏!無需要驚天動地,只要腳踏實地。 無論夢想將落向何方,只要一直在努力,就不會給給歲月面向太陽吧,不問春暖花開 ,只求快樂面對,因為,透過灑滿陽光的玻璃窗,驀然回首,你何嘗不是別人眼中的風景</span></div> </div> </div> </div> </body> </html>
3.制作 全國 公安機關互聯網安全管理服務平台登錄頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全國公安機關互聯網系統</title> <link rel="stylesheet" href="css/bootstrap.css"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <style> .row{ border: 1px #000000 solid; } #main{ background-image: url("image/adbg.png"); height: 385px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-2 col-md-offset-1"><img src="image/logo.png" width="281px" height="80px"></div > <div class="col-md-2 col-md-offset-5"> <input type="text" class="input-sm form-control" placeholder="請輸入要搜索的內容"> </div> <div class="col-md-1"><input type="button" class="btn btn-block" value="搜索"></div> <div class="col-md-4 col-md-offset-4"> <br> <span><strong>首頁</strong></span> 公共查詢 常見問題 政策法規 備案需知 備案展廳 </div> </div> <div class="row" id="main"> <div class="col-md-3 col-md-offset-1"><img src="image/xcy.png" width="281px" height="80px"> <img src="image/liucheng.png"> </div> <div class="col-md-3 col-md-offset-5"> <br><br><br><br> <form action="#" style="background-color: white"> 普通用戶 <div class="form-group"> 用戶名：<input class="input-sm" type="text" placeholder=""> </div> <div class="form-group"> 密 碼：<input class="input-sm" type="text" placeholder=""> </div> <input type="radio" value="">記住密碼<br> <input type="button" class="btn btn-danger" value="登錄"> <br>沒有賬號,注冊 </form> </div> </div> <div class="row"> <div class="col-md-3 col-md-offset-5"> <p>uyhijnmklghjklcvghjkfghjk</p> <p>uyhijnmklghjklcvghjkfghjk</p> <p>uyhijnmklghjklcvghjkfghjk</p> </div> </div> </div></body> </html>
4.制作美聯英語在線VIP頁面-微電影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微電影</title> <link rel="stylesheet" href="css/bootstrap.css"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <style> .container{ background-image: url("image/bg3.jpg"); width: 100%; height: 1000px; } #ziti{ font-size: 25px; color: white; } </style> </head> <body> <div class="container"> <br><br><br> <div class="row"> <div class="col-md-6 col-xs-12 col-sm-6 col-md-offset-4" id="ziti">學英語，看世界，小美帶你GO學員</div> <div class="col-md-6 col-xs-12 col-sm-6 col-md-offset-5"><img class="img-responsive" src="image/block-split.png"></div> </div> <br> <div class="row"> <div class="col-md-3 col-xs-12 col-sm-5 col-sm-offset-1 col-md-offset-0"><img class="img-responsive" src="image/4.jpg"><br>ibbhjhbh </div> <div class="col-md-3 col-xs-12 col-sm-5 col-sm-offset-1 col-md-offset-0"><img class="img-responsive" src="image/4.jpg"><br>ibbhjhbh </div> <div class="col-md-3 col-xs-12 col-sm-5 col-sm-offset-1 col-md-offset-0"><img class="img-responsive" src="image/4.jpg"><br>ibbhjhbh </div> <div class="col-md-3 col-xs-12 col-sm-5 col-sm-offset-1 col-md-offset-0"><img class="img-responsive" src="image/4.jpg"><br>ibbhjhbh </div> </div> </div> </body> </html>
總結
- “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
- 通過“行（row）”在水平方向創建一組“列（column）”。
- 你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。
- 類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。
- 通過為“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過為
.row元素設置負值 margin 從而抵消掉為.container元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。 - 負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。
- 柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。
- 如果一“行（row）”中包含了的“列（column）”大於 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
- 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何
.col-md-*柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何.col-lg-*不存在， 也影響大屏幕設備。
歡迎提問，歡迎指錯，歡迎討論學習信息 有需要的私聊 發布評論即可 都能回復的
原文在博客園http://www.cnblogs.com/a782126844/有需要可以聯系扣扣：2265682997