Bootstrap -- 縮圖、進度條、列表組、面板
阿新 • • 發佈：2018-12-14
Bootstrap -- 縮圖、進度條、列表組、面板
1. 縮圖
大多數站點都需要在網格中佈局影象、視訊、文字等。Bootstrap 通過縮圖為此提供了一種簡便的方式。使用 Bootstrap 建立縮圖的步驟如下：
(1) 在影象周圍新增帶有 class .thumbnail 的 <a> 標籤。
(2) 這會新增四個畫素的內邊距（padding）和一個灰色的邊框。
(3) 當滑鼠懸停在影象上時，會動畫顯示出影象的輪廓
使用縮圖：
<!View CodeDOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="col-md-3"> <div class="thumbnail"> <img src="./img/test.jpg" alt="測試圖片1"> <div class="caption"> <h3>測試圖片1</h3> <p>Windows10螢幕截圖1</p> <p> <a href="#" class="btn btn-primary" role="button"> 按鈕1 </a> <a href="#" class="btn btn-default" role="button"> 按鈕2 </a> </p> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="./img/test.jpg" alt="測試圖片2"> <div class="caption"> <h3>測試圖片2</h3> <p>Windows10螢幕截圖2</p> <p> <a href="#" class="btn btn-primary" role="button"> 按鈕1 </a> <a href="#" class="btn btn-default" role="button"> 按鈕2 </a> </p> </div> </div> </div> </body> </html>
縮圖效果：
2. 進度條
使用進度條樣式：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">90% 完成</span> </div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span class="sr-only">50% 完成</span> </div> </div> </body> </html>View Code
樣式效果：
3. 列表組: 列表元件用於以列表形式呈現複雜的和自定義的內容。
使用列表組樣式：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <ul class="list-group"> <li class="list-group-item">學習C#書籍</li> <li class="list-group-item">編寫C#程式碼</li> <li class="list-group-item">優化效能</li> <li class="list-group-item"> <span class="badge">新</span> 學習目標 </li> </ul> </body> </html>View Code
樣式效果：
4. 面板：面板元件用於把 DOM 元件插入到一個盒子中。建立一個基本的面板，只需要向 <div> 元素新增 class .panel 和 class .panel-default 即可。
使用面板樣式：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">面板1--學習板塊</h3> </div> <div class="panel-body"> 這裡是學習相關的內容 </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">面板2--娛樂版塊</h3> </div> <div class="panel-body"> 這裡是娛樂相關的內容 </div> </div> </body> </html>View Code
樣式效果：
