(***)僅列出些自己見過的常用的~具體的樣式、組件、插件及屬性設置見官網：
0、圖標組件：
1、bootstrap自帶的(直接從官網的組件里找):https://v3.bootcss.com/components/
2、阿里的iconfont : https://www.iconfont.cn/
iconfont的說明： https://www.cnblogs.com/clschao/articles/10387580.html
3、font-awesome(動態效果多)：http://www.fontawesome.com.cn/
1、柵格系統的使用
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <body> <!--固定寬度容器 .container --> <div class="container"> <h1>柵格系統</h1> <!--一行--> <div class="row"> <div class="col-md-6"> <!--所有的列必須包含在行里面--> <div class="col-md-4">柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 </div> <div class="col-md-4">柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 </div> <div class="col-md-4">柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 </div> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
2、全局CSS樣式1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> div{ border:1px red solid; } </style> <body> <div class="container"> <h1>全局CSS樣式</h1> <div class="col-md-4"> <!--標題 具體詳見官網--> <h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading<small>Secondary text</small></h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap<a class="lead">哈哈</a> heading</h5> <h6>h6. Bootstrap heading</h6> </div> <div class="col-md-4"> <!--對齊 具體詳見官網--> <p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.</p> <!--不對齊 --> <p class="text-nowrap">No wrap text.</p> <!--改變大小寫 具體詳見官網--> <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
3、全局CSS樣式2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> div{ border:1px red solid; } </style> <body> <div class="container"> <h1>全局CSS樣式</h1> <!--表格具體詳見官網--> <div class="col-md-4"> <!--##########################################具體詳見官網--> <div class="table-responsive"> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="success"> <th>#</th> <th>姓名</th> <th>年齡</th> <th>身高</th> </tr> </thead> <tbody> <tr class="active"> <td>1</td> <td>王宏偉王宏偉王宏偉王宏偉王宏偉王宏偉王宏偉</td> <td>27</td> <td>180</td> </tr> <tr class="active"> <td>2</td> <td>王宏偉</td> <td>27</td> <td>180</td> </tr> <tr class="active"> <td>3</td> <td>王宏偉</td> <td>27</td> <td>180</td> </tr> </tbody> </table> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
4、全局CSS樣式3-按鈕
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> </style> <body> <div class="container" style="border:red 1px solid;"> <div class="row" style="border:yellow 1px solid;"> <div class="col-md-10" style="border:blue 1px solid;"> <!--按鈕 具體詳見官網--> <!-- Standard button --> <button type="button" class="btn btn-default">（默認樣式）Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">（首選項）Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">（成功）Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">（一般信息）Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">（警告）Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">（危險）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">（鏈接）Link</button> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
5、全局CSS樣式3-表單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> </style> <body> <div class="container" style="border:red 1px solid;"> <div class="row" style="border:yellow 1px solid;"> <div class="col-md-6" style="border:blue 1px solid;"> <!--表單 具體詳見官網--> <form> <div class="form-group"> <label for="username">用戶名</label> <input type="email" class="form-control" id="username" placeholder="用戶名"> </div> <div class="form-group"> <label for="password">密碼</label> <input type="password" class="form-control" id="password" placeholder="密碼"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
6、全局CSS樣式3-表單2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> </style> <body> <div class="container" style="border:red 1px solid;"> <div class="row" style="border:yellow 1px solid;"> <div class="col-md-6" style="border:blue 1px solid;"> <!--表單 具體詳見官網--> <form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> <div class="input-group"> <div class="input-group-addon"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></div> <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> <div class="input-group-addon">.00</div> </div> </div> <button type="submit" class="btn btn-primary">Transfer cash</button> </form> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
==============================================================
常用Bootstrap組件（就是一些搭配起來的效果，也涉及到一些動作相關的，所以需要引入js文件了）：
字體圖標(fontawesome里面比較全)、下拉菜單、按鈕組、輸入框俎、導航、分頁、標簽和徽章、頁頭、縮略圖、進度條
===============================================================
1、組件-下拉菜單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> div{ border: 1px red solid; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <!--這里控制按鈕的內容往上或者往下--> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> DropDown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
2、組件-分列式的下拉菜單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> div{ border: 1px red solid; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <!-- Split button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
3、組件-按鈕式的下拉菜單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> div{ border: 1px red solid; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
4、組件-面板（用的多）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> div{ border: 1px red solid; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <!--panel-default--> <div class="panel panel-danger"> <!--panel-heading--> <div class="panel-heading"> <!--panel-title--> <h3 class="panel-title">Panel title</h3> </div> <!--panel-body--> <div class="panel-body"> <!--把其他的組件放到panel-body里面--> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
5、組件-分頁（用的多）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> div{ border: 1px red solid; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <!--分頁--> <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> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
6、組件-導航（用的多）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> div{ border: 1px red solid; } </style> <!--注意body里面設置的--> <body style="height:2000px; padding-top:70px;"> <!--導航 獨立於頁面，不包含在盒子里面。不要放在container里面 --> <nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="row"> <div class="col-md-4"> <!--徽章 展示未讀的條目--> <ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li> </ul> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
7、組件-徽章（用的多）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> div{ border: 1px red solid; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <!--徽章 展示未讀的條目--> <ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li> </ul> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
8、組件-警告框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> div{ border: 1px red solid; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <!--panel-default--> <div class="panel panel-default"> <!--panel-heading--> <div class="panel-heading"> <!--panel-title--> <h3 class="panel-title">Panel title</h3> </div> <!--panel-body--> <div class="panel-body"> <!--把其他的組件放到panel-body里面--> <div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div> <!--可關閉的告警框--> <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> </div> </div> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
9、組件-進度條
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> div{ border: 1px red solid; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <!--panel-default--> <div class="panel panel-default"> <!--panel-heading--> <div class="panel-heading"> <!--panel-title--> <h3 class="panel-title">Panel title</h3> </div> <!--panel-body--> <div class="panel-body"> <!--把其他的組件放到panel-body里面--> <!--進度條必須都在progress類的div里！--> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> <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> </div> </div> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
10-組件-動態的進度條
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css"> </head> <body> <div class="container"> <div class="progress"> <div id="p1" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;min-width: 2%"> 0% </div> </div> <button class="btn btn-success btn-sm" id="b1">開始</button> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.js"></script> <script> var n = 0; var t; // jQuery操作標簽的CSS屬性 function foo(){ $('#p1').css('width', n+'%').text(n+'%'); n += 1; if (n > 100){ clearInterval(t); } } // 點擊開始按鈕，讓滾動條滾動起來 $('#b1').click(function () { // 每隔一秒鍾執行一下上面的代碼 t = setInterval(foo, 100); }); </script> </body> </html>
11、組件-頁頭與巨幕
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <style> div{ border: 1px red solid; } </style> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <!--頁頭--> <div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div> <!--巨幕 介紹概況信息 再點擊按鈕后進入網站主頁--> <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
12、登陸界面示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登錄頁面</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css"> <style> body { background-color: #eeeeee; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin-top: 70px"> <h2 class="text-center">歡迎登錄</h2> <form> <div class="form-group"> <label for="exampleInputEmail1">郵箱</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> <span class="help-block"></span> </div> <div class="form-group"> <label for="exampleInputPassword1">密碼</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <span class="help-block"></span> </div> <div class="checkbox"> <label> <input type="checkbox"> 記住 </label> </div> <button type="submit" id="login-btn" class="btn btn-success btn-block">登錄</button> </form> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> // 給登錄按鈕綁定點擊事件 $('#login-btn').click(function () { // 定義一個是否允許提交的標志位 var flag = true; // 1. 找到登錄框中所有的input框，判斷值是否為空 $('form input').each(function () { var value = $(this).val(); if (value.length===0){ // 2. 為空就顯示提示信息 // 2.1 給下面的span標簽設置文本提示信息 var errMsg = $(this).prev().text() + '不能為空'; $(this).next().text(errMsg); // 2.2 給父標簽設置has-error的樣式 $(this).parent().addClass('has-error'); // 2.3 阻止表單提交 flag = false; return false; } }); return flag; }); // 給input框綁定focus事件 $('form input').focus(function () { // 1. 去掉當前input框后面的span標簽的文本 $(this).next().text(''); // 2. 去掉父標簽的has-error樣式 $(this).parent().removeClass('has-error'); }) </script> </body> </html>
=====================================================
兩個Bootstrap布局的例子：
=====================================================
1、注意pull-right與pull-left的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> <style> .c1{width:188px;float:left} </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="panel panel-danger"> <!--panel-heading--> <div class="panel-heading"> <!--panel-title--> <h3 class="panel-title">火之國</h3> </div> <!--panel-body--> <div class="panel-body"> <!--把其他的組件放到panel-body里面--> <div class="c1"> <input type="text" class="form-control" id="search" placeholder="搜索"> </div> <button class="btn btn-info">搜索</button> <button type="button" class="btn btn-success pull-right">添加</button> <br><br> <div class="table-responsive" style="text-align: center"> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="success"> <th>#</th> <th>姓名</th> <th>年齡</th> <th>愛好</th> <th>操作</th> </tr> </thead> <tbody> <tr class=""> <td>1</td> <td>wanghw</td> <td>27</td> <td>Coding</td> <td> <button class="btn btn-success"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span><span>編輯</span> </button> <button class="btn btn-danger"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span><span>刪除</span> </button> </td> </tr> <tr class="active"> <td>2</td> <td>Naruto</td> <td>27</td> <td>螺旋丸</td> <td> <button class="btn btn-success"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span><span>編輯</span> </button> <button class="btn btn-danger"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span><span>刪除</span> </button> </td> </tr> <tr class=""> <td>3</td> <td>Sasukey</td> <td>27</td> <td>千鳥流</td> <td> <button class="btn btn-success"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span><span>編輯</span> </button> <button class="btn btn-danger"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span><span>刪除</span> </button> </td> </tr> <tr class="active"> <td>4</td> <td>卡卡西</td> <td>37</td> <td>雷切</td> <td> <button class="btn btn-success"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span><span>編輯</span> </button> <button class="btn btn-danger"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span><span>刪除</span> </button> </td> </tr> <tr class=""> <td>5</td> <td>千手助間</td> <td>117</td> <td>頂上化佛</td> <td> <button class="btn btn-success"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span><span>編輯</span> </button> <button class="btn btn-danger"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span><span>刪除</span> </button> </td> </tr> </tbody> </table> </div> <!--分頁 --> <nav aria-label="Page navigation" class="pull-right"> <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> </div> </div> </div> </div> <script src="jquery-3.4.1.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.js"></script> <script> </script> </body> </html>
2、注意form表單的寫法：水平排列的表單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <!--標題 放在row上面--> <h3>信息收集卡<small>共三步</small></h3> <div class="row"> <!--放在一個大的col-md-12里--> <div class="col-md-12"> <!--進度條--> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 33%"> <span>1/3</span> </div> </div> <!--面板--> <div class="panel panel-primary"> <!--panel-heading--> <div class="panel-heading"> <!--panel-title--> <h3 class="panel-title">火之國精英忍者信息 <!--用到了pull-right--> <span class="glyphicon glyphicon-pushpin pull-right" aria-hidden="true"></span> </h3> </div> <!--panel-body--> <div class="panel-body"> <!--把其他的組件放到panel-body里面--> <form class="form-horizontal"> <div class="form-group"> <!--注意，這里為了讓label中的內容與input的內容在一行，將label放在外面了--> <label for="username" class="col-sm-2 control-label">姓名</label> <div class="col-sm-4"> <input type="text" class="form-control" id="username" placeholder="姓名"> </div> </div> <div class="form-group"> <!--注意，這里為了讓label中的內容與input的內容在一行，將label放在外面了--> <label for="phone" class="col-sm-2 control-label">手機</label> <div class="col-sm-4"> <input type="text" class="form-control" id="phone" placeholder="手機號"> </div> </div> <div class="form-group"> <!--注意，這里為了讓label中的內容與input的內容在一行，將label放在外面了--> <label for="email" class="col-sm-2 control-label">郵箱</label> <div class="col-sm-4"> <input type="text" class="form-control" id="email" placeholder="郵箱"> </div> </div> <div class="form-group"> <!--注意，這里為了讓label中的內容與input的內容在一行，將label放在外面了--> <label for="pwd" class="col-sm-2 control-label">密碼</label> <div class="col-sm-4"> <input type="password" class="form-control" id="pwd" placeholder="密碼"> </div> </div> <!--上傳頭像--> <div class="form-group"> <label for="avatar" class="col-sm-2 control-label">頭像</label> <div class="col-sm-4"> <input type="file" class="" id="avatar" placeholder="avatar"> <span class="help-block">傳一張最帥的</span> </div> </div> <br> <!--屬性--> <div class="form-group"> <div class="col-sm-2 control-label">屬性</div> <div class="col-sm-4"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 上忍 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 特別上忍 </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> 中忍 </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios4" value="option3" disabled> 下忍 </label> </div> </div> </div> </form> </div> </div> <!--下一步按鈕--> <div> <button class="btn btn-success pull-right">下一步</button> </div> </div> </div> </div> <script src="jquery-3.4.1.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.js"></script> <script> </script> </body> </html>
=====================================================
Bootstrap自帶的那些常用插件 — 注意模態框與輪播圖的例子在里面
常用的前端插件
======================================================
0、模態對話框
模態框的HTML代碼放置的位置： 務必將模態框的HTML代碼放在文檔的最高層級內（也就是說，盡量作為 body 標簽的直接子元素），以避免其他組件影響模態框的展現和/或功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <body> <!-- 觸發模態框的按鈕 --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- 模態框 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.js"></script> <script> </script> </body> </html>
注意：
//通過為模態框設置 .bs-example-modal-lg和 .bs-example-modal-sm來控制模態框的大小。 //通過 .fade類來控制模態框彈出時的動畫效果（淡入淡出效果）。 //通過在 .modal-bodydiv中設置.row可以使用Bootstrap的柵格系統。
調用方式：
1.通過data屬性
通過在一個觸發彈出模態框的元素（例如：按鈕）上添加 data-toggle="modal"屬性，然后設置 data-target="#foo"屬性或 href="#foo"屬性，用來指向被控制的模態框。
<button type="button" data-toggle="modal" data-target="#myModal">顯示模態框</button>
2.通過JS代碼調用
$('#myModal').modal("show"); // 顯示
$('#myModal').modal("hide") // 隱藏
常用參數:
1、插件-collapse手風琴
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
2、插件-滾動監聽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span class="sr-only">切換導航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WHW</a> </div> <div class="collapse navbar-collapse bs-js-navbar-scrollspy"> <ul class="nav navbar-nav"> <li> <a href="#ios">iOS</a> </li> <li> <a href="#svn">SVN</a> </li> <li class="dropdown"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li> <a href="#jmeter" tabindex="-1">jmeter</a> </li> <li> <a href="#ejb" tabindex="-1">ejb</a> </li> <li class="divider"></li> <li> <a href="#spring" tabindex="-1">spring</a> </li> </ul> </li> </ul> </div> </div> </nav> <div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;"> <h4 id="ios">iOS</h4> <p>iOS 是一個由蘋果公司開發和發布的手機操作系統。最初是於 2007 年首次發布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操作系統是用在蘋果電腦上，iOS 是蘋果的移動版本。 </p> <h4 id="svn">SVN</h4> <p>Apache Subversion，通常縮寫為 SVN，是一款開源的版本控制系統軟件。Subversion 由 CollabNet 公司在 2000 年創建。但是現在它已經發展為 Apache Software Foundation 的一個項目，因此擁有豐富的開發人員和用戶社區。 </p> <h4 id="jmeter">jMeter</h4> <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用於負載和性能測試。 </p> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans（EJB）是一個創建高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> <h4 id="spring">Spring</h4> <p>Spring 框架是一個開源的 Java 平台，為快速開發功能強大的 Java 應用程序提供了完備的基礎設施支持。 </p> <p>Spring 框架最初是由 Rod Johnson 編寫的，在 2003 年 6 月首次發布於 Apache 2.0 許可證下。 </p> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
3、Bootstrap的輪播圖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> <style> img{ width: 100%; height:123px; } </style> </head> <body> <div class="container"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="1.jpg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="2.jpg" alt="..."> <div class="carousel-caption"> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
4、bxslider插件的輪播圖（bxslider插件在我本地）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> <style> img{ width: 100%; height:100%; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <ul class="bxslider"> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> </ul> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="jQuery-bxslider/jquery.bxslider.js"></script> <script> $(function () { $('.bxslider').bxSlider(); }); </script> </body> </html>