bootstrap簡單使用佈局、柵格系統、modal標籤頁等常用元件入門
阿新 • • 發佈：2018-12-23
<!DOCTYPE html> <html> <head> <title>bootstrap</title> <!-- 引入bootstrap的css樣式庫 --> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- 引入第三方庫 --> <link rel="stylesheet" type="text/css"href="animate.css"> </head> <body> <!-- 按鈕控制元件 --> <!-- <button class="btn btn-success">提交</button> <button class="btn btn-info">提交</button> <button class="btn btn-warning">提交</button> <button class="btn btn-danger">提交</button> <button class="btn btn-default">提交</button> <button class="btn btn-primary">提交</button> <div class='bg-primary'>bootstrap_css_js</div> <div class='glyphicon glyphicon-music' style="color:red"></div>--> <!-- 分頁元件 --> <!-- <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>--> <!-- 柵格系統 用來佈局 --> <div class="container"> <div class="row"> <div class="col-md-8"><p style="background: gray">.col-md-8</p></div> <div class="col-md-4"><p style="background: gray">.col-md-4</p></div> </div> <div class="row"> <div class="col-md-4"><p style="background: gray">.col-md-4</p></div> <div class="col-md-8"><p style="background: gray">.col-md-8</p></div> </div> <div class="row"> <div class="col-md-4"><p style="background: pink">pink1</p></div> <div class="col-md-4"><p style="background: pink">pink2</p></div> <div class="col-md-4"><p style="background: pink">pink3</p></div> </div> <!-- 表格控制元件 --> <table class="table table-striped table-bordered"> <thead> <tr> <th>使用者名稱</th> <th>密碼</th> </tr> </thead> <tbody> <tr> <td>username</td> <td>password</td> </tr> <tr class='success'> <td>username</td> <td>password</td> </tr> <tr class='info'> <td>username</td> <td>password</td> </tr> <tr class='warning'> <td>username</td> <td>password</td> </tr> </tbody> </table> <!-- 字型顏色 --> <p class="text-muted">字型顏色字型顏色字型顏色字型顏色字型顏色字型顏色</p> <p class="text-primary">字型顏色字型顏色字型顏色字型顏色字型顏色字型顏色</p> <p class="text-success">字型顏色字型顏色字型顏色字型顏色字型顏色字型顏色</p> <p class="text-info">字型顏色字型顏色字型顏色字型顏色字型顏色字型顏色</p> <p class="text-warning">字型顏色字型顏色字型顏色字型顏色字型顏色字型顏色</p> <p class="text-danger">字型顏色字型顏色字型顏色字型顏色字型顏色字型顏色</p> <!-- 按鈕樣式，a標籤同樣適用 --> <!-- <button class="btn btn-success">success</button> --> <a href="http://www.baidu.com" target="_blank" class="btn btn-success">success</a> <!-- 背景色 --> <p class="bg-primary">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p> <p class="bg-success">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p> <p class="bg-info">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p> <p class="bg-warning">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p> <p class="bg-danger">背景色背景色背景色背景色背景色背景色背景色背景色背景色</p> <!-- 圖片懶載入，首屏不全部顯示，往下拖動才顯示圖片，專案地址： https://github.com/darkwing/LazyLoad --> <!-- <img data-src="https://www.baidu.com/img/bd_logo1.png" src="https://www.baidu.com/img/bd_logo1.png" /> --> <p class="glyphicon glyphicon-apple" style="color: green"></p> <!-- 圖示元件，專業的網站 https://fontawesome.com/ --> <!-- 進度條--> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div> <h2>第三方css動畫效果庫Animate.css</h2> <button class="btn btn-success animated flash">button</button> </div> </body> </html>