bootstrap—響應式佈局程式碼
阿新 • • 發佈：2018-12-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstrap—響應式佈局</title> <link href=css/bootstrap.css rel="stylesheet"> <style> .container h3,.container p{ text-align: center; } </style> </head> <body> <!--先寫容器--> <div class="container"> <!--在容器沒有固定的情況下，可以只寫一個row（柵格系統超過了會自動換行）--> <div class="row"> <!--分欄 col-lg-3 col-md-4 col-sm-6 col-xs-12 --> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img1.png" /> <h3>優站精選</h3> <p>Bootstrap 優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img1.png" /> <h3>優站精選</h3> <p>Bootstrap 優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img1.png" /> <h3>優站精選</h3> <p>Bootstrap 優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img1.png" /> <h3>優站精選</h3> <p>Bootstrap 優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img1.png" /> <h3>優站精選</h3> <p>Bootstrap 優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img1.png" /> <h3>優站精選</h3> <p>Bootstrap 優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img1.png" /> <h3>優站精選</h3> <p>Bootstrap 優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img1.png" /> <h3>優站精選</h3> <p>Bootstrap 優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img1.png" /> <h3>優站精選</h3> <p>Bootstrap 優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img1.png" /> <h3>優站精選</h3> <p>Bootstrap 優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img1.png" /> <h3>優站精選</h3> <p>Bootstrap 優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。</p> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img1.png" /> <h3>優站精選</h3> <p>Bootstrap 優站精選頻道收集了眾多基於 Bootstrap 構建、設計精美的、有創意的網站。</p> </div> </div> </div> </div> <script src="js/jquery-1.9.1.js"></script> <script src="js/bootstrap.js"></script> </body> </html>