Bootstrap3基礎 柵格系統 col-lg/md/sm/xs-* 簡單示例
阿新 • • 發佈:2018-01-28
系統 trap back -s ini 圖片 小時 scala 技術分享
禮悟:
公恒學思合行悟,尊師重道存感恩。葉見尋根三返一,江河湖海同一體。
虛懷若谷良心主,願行無悔給最苦。讀書鍛煉養身心,誠勸且行且珍惜。
ide:visual studio 2017
browser:Chrome / Firefox
bootstrap:3.3.7
代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" /> <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> <style type="text/css"> .container { border:1px solid black; } div[class*="col-lg-"]{ background-color:aqua; border:1px solid black; height:30px; } div[class*="col-md-"]{ background-color:coral; border:1px solid black; height:30px; } div[class*="col-sm-"]{ background-color:darkseagreen; border:1px solid black; height:30px; } div[class*="col-xs-"]{ background-color:lightblue; border:1px solid black; height:30px; } </style> </head> <body> <div class="container"> <div class="row"> <!-- 大於1200px,相互配合排成一行 小於1200px,分別占一行 --> <div class="col-lg-4">col-lg-4</div> <div class="col-lg-4">col-lg-4</div> <div class="col-lg-4">col-lg-4</div> </div> <br /> <div class="row"> <!-- 大於992px,相互配合排成一行 小於992px,分別占一行 --> <div class="col-md-3">col-md-3</div> <div class="col-md-4">col-md-4</div> <div class="col-md-5">col-md-5</div> </div> <br /> <div class="row"> <!-- 大於768px,相互配合排成一行 小於768px,分別占一行 --> <div class="col-sm-3">col-sm-3</div> <div class="col-sm-5">col-sm-5</div> <div class="col-sm-4">col-sm-4</div> </div> <br /> <div class="row"> <!-- 始終排列成一行 --> <div class="col-xs-3">col-xs-1</div> <div class="col-xs-9">col-xs-11</div> </div> </div> </body> </html>
效果
瀏覽器寬度最大時, lg/md/sm/xs 都各安方位,列是列。
縮小瀏覽器的寬度,當小於1200px時,lg 的列變成一行。
縮小瀏覽器的寬度,當小於992px時,md 的列變成一行。
縮小瀏覽器的寬度,當小於768px時,sm 的列變成一行。
瀏覽器寬度最小時,lg/md/sm 的列成一行了,xs的列仍然是列。
擴展
效果挺有趣的, 可以自己動手寫一寫,試一試。
Bootstrap,優秀的前端開源框架,值得學習。
學習資源:v3.bootcss.com + itcast和itheima視頻庫 + 清凈的心地。如果您有公開的資源,可以分享給我的話,用您的資源學習也可以。
博文是觀看視頻後,融入思考寫成的。博文好,是老師講得好。博文壞,是 給最苦 沒認真。
Bootstrap3基礎 柵格系統 col-lg/md/sm/xs-* 簡單示例