1. 將螢幕看作是一個個,沿水平和垂直方向的有序排列的網格/柵格/儲存格/組成;
2. 所有資料必須放在柵格中;
3. 採用響應式布局,移動設定優先
二、螢幕解析度劃分依據
1. ( screen < 768px ): 超小螢幕 col-xs-x
2. (768px <= screen < 992px): 小型螢幕 col-sm-x
3. (992px <= screen < 1200) : 中型螢幕 col-md-x
4. (1200 <= screen ) : 大型螢幕 col-lg-x
二、實現原理
1.第一步: 必須建立一個容器,class="container"
2.第二步: 必須建立一個行, class="row"
3.第三步: 必須建立柵格,class="col-md-x", 以中型螢幕為例,臨界點為992px
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link rel="stylesheet" href="dist/css/bootstrap.css"> <script src="jquery-3.2.1.js"></script> <script src="dist/js/bootstrap.js"></script> <title>柵格布局系統</title> <style> .grid { border: 1px solid #696969; border-radius: 5px; background-color: lightskyblue; min-height: 30px; text-align: center; line-height: 30px; } .green { background-color: lightgreen; } .pink { background-color: lightpink; } </style></head><body><div class="container"> <h4>整行:</h4> <div class="row"> <div class="col-md-12 grid">內容</div> </div> <h4>二等分:</h4> <div class="row"> <!--<div class="col-md-6 grid">內容</div>--> <!--大屏39分--> <!--<div class="col-md-6 col-lg-3 grid green">內容</div>--> <!--小屏48分--> <div class="col-md-6 col-lg-3 col-sm-4 grid green">內容</div> <!--<div class="col-md-6 col-sm-8 grid">內容</div>--> <!--<div class=" col-md-6 grid">內容</div>--> <!--<div class=" col-md-6 col-lg-9 grid pink">內容</div>--> <div class=" col-md-6 col-lg-9 grid col-sm-8 pink">內容</div> <!--<div class=" col-md-6 col-sm-4 grid">內容</div>--> </div> <h4>三等分:</h4> <div class="row"> <div class="col-md-4 grid">內容</div> <div class="col-md-4 grid">內容</div> <div class="col-md-4 grid">內容</div> </div> <h4>四等分:</h4> <div class="row"> <div class="col-md-3 grid">內容</div> <div class="col-md-3 grid">內容</div> <div class="col-md-3 grid">內容</div> <div class="col-md-3 grid">內容</div> </div> <!--<h4>五等分:12除5除不盡,不用五等分</h4>--> <h4>六等分:</h4> <div class="row"> <div class="col-md-2 grid">內容</div> <div class="col-md-2 grid">內容</div> <div class="col-md-2 grid">內容</div> <div class="col-md-2 grid">內容</div> <div class="col-md-2 grid">內容</div> <div class="col-md-2 grid">內容</div> </div> <h4>四八開:</h4> <div class="row"> <div class="col-md-4 grid">內容</div> <div class="col-md-8 grid">內容</div> </div> <h4>三九開:</h4> <div class="row"> <div class="col-md-3 grid">內容</div> <div class="col-md-9 grid">內容</div> </div></div></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
