1、引入bootstrap.min.css

選用于生產(chǎn)環(huán)境下載后，引入css。

<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">

2、使用bootstrap類布局

BootStrap3默認(rèn)將網(wǎng)頁(yè)分成12等份，頁(yè)面寬度縮小時(shí)自動(dòng)折行。

如以下代碼，使用了bootstrap的class類container和col-*。

col-lg-3這里意思是大屏?xí)r每個(gè)div占用3份，4個(gè)div剛好把12份占滿，中屏?xí)r使用col-md-6，每個(gè)div占用6份，前兩個(gè)div把12份占滿了，后兩個(gè)div另起一行占滿。

<div class="container">
  <div class="col-lg-3 col-md-6">1</div>
  <div class="col-lg-3 col-md-6">2</div>
  <div class="col-lg-3 col-md-6">3</div>
  <div class="col-lg-3 col-md-6">4</div>
</div>

小屏：

 中屏：

大屏：