BootStrap-CSS樣式_佈局元件_縮圖
阿新 • • 發佈：2019-01-01
Bootstrap 縮圖
大多數站點都需要在網格中佈局影象、視訊、文字等。 Bootstrap 通過縮圖為此提供了一種簡便的方式。使用 Bootstrap 建立縮圖的步驟如下：
1.在影象周圍新增帶有 class .thumbnail 的 <a> 標籤。
2.這會新增四個畫素的內邊距（padding）和一個灰色的邊框。
3.當滑鼠懸停在影象上時，會動畫顯示出影象的輪廓。
程式碼例項：
<!DOCTYPE html> <html lang="zh-cn"> <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 101 Template</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body style="padding:50px;"> <!-- row樣式：柵格佈局，設定column的排列 col-sm-6樣式：在小型螢幕上柵格佔6位 col-md-3樣式：在中型螢幕上柵格佔6位 thumbnail樣式：設定略縮圖 --> <!--<div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../img/phone.jpg" alt="通用的佔位符縮圖" > </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../img/phone.jpg" alt="通用的佔位符縮圖" > </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../img/phone.jpg" alt="通用的佔位符縮圖" > </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../img/phone.jpg" alt="通用的佔位符縮圖" > </a> </div> </div>--> <div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../img/phone.jpg" alt="通用的佔位符縮圖"> </a> <div class="caption"> <h3>縮圖標籤</h3> <p>一些描述的文字，一些描述的文字</p> <p> <a href="#" class="btn btn-success">購買</a> </p> </div> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../img/phone.jpg" alt="通用的佔位符縮圖"> </a> <div class="caption"> <h3>縮圖標籤</h3> <p>一些描述的文字，一些描述的文字</p> <p> <a href="#" class="btn btn-primary">購買</a> </p> </div> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../img/phone.jpg" alt="通用的佔位符縮圖"> </a> <div class="caption"> <h3>縮圖標籤</h3> <p>一些描述的文字，一些描述的文字</p> <p> <a href="#" class="btn btn-warning">購買</a> </p> </div> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../img/phone.jpg" alt="通用的佔位符縮圖"> </a> <div class="caption"> <h3>縮圖標籤</h3> <p>一些描述的文字，一些描述的文字</p> <p> <a href="#" class="btn btn-danger">購買</a> </p> </div> </div> </div> <script src="../js/jquery-1.11.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> </body> </html>
顯示效果：
