BootStrap入門教程(三)之響應式原理
更新時間：2016年09月19日 15:26:26 投稿：mrr
這篇文章主要介紹了BootStrap入門教程(三)之響應式原理的相關資料，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧
相關閱讀：
Bootstrap網格系統（Grid System）
響應式網格系統隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
工作原理
· 行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
· 使用行來創(chuàng)建列的水平組。
· 內容應該放置在列內，且唯有列可以是行的直接子元素。
· 預定義的網格類，比如 .row 和 .col-xs-4，可用于快速創(chuàng)建網格布局。LESS 混合類可用于更多語義布局。
· 列通過內邊距（padding）來創(chuàng)建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最后一列的行偏移。
· 網格系統是通過指定您想要橫跨的十二個可用的列來創(chuàng)建的。例如，要創(chuàng)建三個相等的列，則使用三個 .col-xs-4。
媒體查詢
/* 超小設備（手機，小于 768px） */
/* Bootstrap 中默認情況下沒有媒體查詢 */
/* 小型設備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型設備（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型設備（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
網格的基本結構
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">....
示例一：水平堆疊
代碼如下：
<!DOCTYPE html> <html> <head> <title>Bootstrap 實例 - 堆疊的水平</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> </div> <div class="col-md-6" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p> <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p> </div> </div> </body> </html>
效果：
確保單元的總數為12以保障顯示效果比較和諧。超過12就串行了。如果單個行的單元數超過12呢：
如上圖所示，單個行的單元數超過12會失去內邊距。
示例二：中型和大型設備
睡得晚起得早還多夢，也是沒治了。
中型設備是50%/50%，大型設備是33%/66%，那么可以這樣寫：
<div class="col-md-6 col-lg-4">....</div> <div class="col-md-6 col-lg-8">....</div>
源碼如下：
<!DOCTYPE html> <html> <head> <title>Bootstrap 實例 - 中型和大型設備</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-6 col-lg-4" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> </div> <div class="col-md-6 col-lg-8" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. </p> <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p> </div> </div> </body> </html>
若如此，中型設備的顯示是50%/50%：
大型設備的顯示是33%/66%：
同理移動設備也可進行類似設置：
<div class="col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-sm-9 col-md-6 col-lg-8">....</div>
源碼及效果略。
響應式的列重置
小設備時無法確定網格顯示的位置。
解決方法是添加一個響應式的塊（描述未必準確），使用.clearfix class和響應式實用工具：
<div class="container"> <div class="row" > <div class="col-xs-6 col-sm-3" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-xs-6 col-sm-3" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. </p> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style=" box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="col-xs-6 col-sm-3" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p> </div> </div> </div>
解釋一下中間這句：
<div class="clearfix visible-xs"></div>
響應式實用工具目前適用于塊和表切換?？聪旅鎯蓚€表格就知道了。
網格的基本結構
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">....
實例三：響應式實用工具
源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 響應式實用工具</title>
<link rel="stylesheet" >
<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>
</head>
<body>
<div class="container" style="padding: 40px;">
<div class="row visible-on">
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-xs">特別小型</span>
<span class="visible-xs">✔ 在特別小型設備上可見</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-sm">小型</span>
<span class="visible-sm">✔ 在小型設備上可見</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-md">中型</span>
<span class="visible-md">✔ 在中型設備上可見</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-lg">大型</span>
<span class="visible-lg">✔ 在大型設備上可見</span>
</div>
</div>
</div>
</body>
</html>
效果如下：
大型設備時：
其他設備略。
偏移列
.col-xs=*類不支持偏移，可以通過使用一個空的單元格來實現該效果。
使用.col-md-offset-*類可以把一個列的左外邊距增加*列，其中*的范圍是從1到11。
<div class="container">
<h1>Hello, world!</h1>
<div class="row" >
<div class="col-xs-6 col-md-offset-3"
style="box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</div>
</div>
</div>
效果：
嵌套列
嵌套需要添加一個新的.row，然后在這個嵌套的.row里添加一組.col-md-*列。這組列的個數不能超過12。
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-3" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第一列</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="col-md-9" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第二列 - 分為四個盒子</h4>
<div class="row">
<div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
Consectetur art party Tonx culpa semiotics. Pinterest
assumenda minim organic quis.
</p>
</div>
<div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.
</p>
</div>
</div>
</div>
</div>
</div>
效果：
列排序
有一點像定位。.col-md-push-*相當于left；.col-md-pull-*類似于right。其中*的范圍是從1到11。標簽在后面的層級高一些。
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<p>排序前</p>
<div class="col-md-4" style="
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在左邊
</div>
<div class="col-md-8" style="
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在右邊
</div>
</div><br>
<div class="row">
<p>排序后</p>
<div class="col-md-4 col-md-push-1"
style="
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
我在左邊
</div>
<div class="col-md-8 col-md-pull-2"
style="
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
我在右邊
</div>
</div>
</div>
效果：
參考：http://www.runoob.com/bootstrap/bootstrap-grid-system.html
以上所述是小編給大家介紹的BootStrap入門教程(三)之響應式原理，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
本章將講解Bootstrap glyphicons字體圖標，并通過一些實例了解它的使用，字體圖標是在 Web 項目中使用的圖標字體。字體圖標在下載的Bootstrap的fonts文件夾中2016-01-01
uniapp父子組件引用傳值,和vue的一樣,沒有小程序那樣的麻煩,下面這篇文章主要給大家介紹了關于uni-app小程序中父組件和子組件傳值的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了js實現數字變動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細介紹了微信小程序實現本地分頁加載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家介紹了JS Generator函數yield表達式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
JavaScript判斷用戶輸入的郵箱格式是否正確、判斷用戶輸入的手機號格式是否正確，下面有個不錯的示例，感興趣的朋友可以參考下2013-12-12
JavaScript之filter_動力節(jié)點Java學院整理
filter也是一個常用的操作，它用于把Array的某些元素過濾掉，然后返回剩下的元素。下面通過實例代碼給大家簡答介紹下javascript中的filter，需要的的朋友參考下吧2017-06-06
這篇文章主要介紹了JS實現圖片轉換成base64的各種應用場景,結合實例形式分析了javascript實現圖片轉換成base64的各種應用場景的相關操作技巧與使用注意事項,需要的朋友可以參考下2018-06-06
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript 正則表達式語法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要為大家詳細介紹了bootstrap實現圖片自動輪播，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12