1.Bootstrap自帶的那些常用插件。
1.1模態框
模態框的HTML代碼放置的位置
務必將模態框的HTML代碼放在文檔的最高層級內（也就是說，盡量作為 body 標簽的直接子元素），以避免其他組件影響模態框的展現和/或功能。
HTML代碼：
<!-- 觸發模態框的按鈕 --> <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>
注意：
- 通過為模態框設置
.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") // 隱藏
常用參數：
| 名稱 | 可選值 | 默認值 | 描述 |
|---|---|---|---|
| backdrop | true/false/'static' | true | false表示有沒有遮罩層，'static'表示點擊遮罩層不關閉模態框 |
| keyboard | true/false | true | 鍵盤上的 esc 鍵被按下時關閉模態框。 |
| show | true/false | true | 模態框初始化之后就立即顯示出來。 |
方法：
$('#myModal').modal({
keyboard: false })
1.2輪播圖
HTML代碼：
<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> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." 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 class="item"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> <p>...</p> </div> </div>
方法：
設置切換間隔為2秒，默認是5秒。
$('.carousel').carousel({
interval: 2000 })
1.3國內cdn