ogg 學習 bsp cti 行為 log js代碼 dia mod

雖然BS在快速搭建HTML方面有著不小的優勢，但也涵蓋了基本的前端動態效果，其實BS的JS代碼方面也是基於JQuery的，所以在引用前首先得引用JQuery,然後在把BS的文件bootstrap.min.js 引用進來。

1.先說說彈出框的特效

<button class="btn btn-primary" type="button">點擊我</button>

//下面是彈出框的具體定義，每級代碼的關鍵處都用紅色表示出來了。

<div class="modal show">
<div class="modal-dialog">
<div class="modal-content

">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模態彈出窗標題</h4>
</div>
<div class="modal-body">
<p>模態彈出窗主體內容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>

//下面的代碼定義了按鈕具體點擊的行為

<script>
$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle");
});
});
</script>

這樣一個簡單的彈出框就完成了，其實BS中還有好幾種彈出框的觸發方式，但都大同小異，以上這種是最基本的彈出框結構，也是最便於直觀的了解的。

Bootstrap基礎學習-2