Bootstrap-17

時間 2019-11-08

原文原文鏈接

導入JavaScript插件：css

　　一次性導入：Bootstrap提供了一個單一的文件，這個文件包含了Bootstrap的全部JavaScript插件，即bootstrap.jshtml

<!—導入jQuery版本庫，由於Bootstrap的JavaScript插件依賴於jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性導入全部Bootstrap的JavaScript插件（壓縮版本） -->
<script src="js/bootstrap.min.js"></script>

　　單獨導入：Bootstrap V3.2中提供了12種js插件：
jquery

　　動畫過渡（Transitions）：對應的插件文件「transition.js」bootstrap

　　模態彈窗（Modal）:對應的插件文件「modal.js」框架

　　下拉菜單（Dropdown）:對應的插件文件「dropdown.js」ide

　　滾動偵測（Scrollspy）:「scroll.js」動畫

　　選項卡（Tab）: 「tab.js」spa

　　提示框（Tooltips）:「tooltop.js」插件

　　彈出框（Popover）: 「popover.js」翻譯

　　警告框（Alert）: 「alert.js」

　　按鈕（Buttons）: 「button.js」

　　摺疊/手風琴（Collapse）：「collapse.js」

　　圖片輪播（Carousel）:「carousel.js」

　　自動定位浮標(Affix): 「affix.js」

動畫過分（Transitions）

　　Bootstrap框架默認給各個組件提供了基本動畫的過分效果，若是要使用，有兩種方法：

　　調用統一編譯的bootstrap.js;

　　調用單一的過渡動畫的JS插件文件transition.js

　　transition.js文件爲Bootstrap具備過渡動畫效果的組件提供了動畫過渡效果。不過須要注意的是，這些過渡動畫都是採用CSS3來實現的。

　　默認狀況下，Bootstrap框架提供瞭如下組件使用了過渡動畫效果：

　　模態彈出窗（Modal）的滑動和漸變效果；

　　☑ 選項卡（Tab）的漸變效果；

　　☑ 警告框（Alert）的漸變效果；

　　☑ 圖片輪播（Carousel）的滑動效果。

模態彈出框（Modals）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>導入JavaScript插件</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-primary" type="button">點擊我</button>
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</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><!-- /.modal -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script>
  $(function(){
    $(".btn").click(function(){
      $("#mymodal").modal("toggle");
    });
  });
</script>
</body>
</html>

模態彈出框----結構分析：

　　Bootstrap框架中的模態彈出框，分別運用了"modal"、「modal-dialog」和「modal-content」樣式，而彈出框真正的內容都放置在「model-content」中，其主要由包括三個部分：

　　彈出框頭部：通常使用"model-header"表示，主要包括標題和關閉按鈕

　　彈出頭主體：通常使用"model-body"表示，彈出框的主要內容

　　彈出框腳步：通常使用"model-footer"表示，主要放置操做按鈕

<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">×</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><!-- /.modal -->

模態彈出框----觸發模態彈出框的2種方法
　　聲明式觸發方法：

　　　　方法一：模態彈出窗聲明，只須要自定義兩個必要的屬性：data-toggle和data-target(bootstrap中聲明式觸發方法通常依賴於這些自定義的data-xxx屬性。)

<!-- 觸發模態彈出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點擊我會彈出模態彈出窗</button>
<!-- 模態彈出窗 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- 模態彈出窗內容 -->
        </div>
    </div>
</div>

　　　　注意：

　　　　一、data-toggle必須設置爲modal(toggle中文翻譯過來就是觸發器)；

　　　　二、data-target能夠設置爲CSS的選擇符，也能夠設置爲模態彈出窗的ID值，通常狀況設置爲模態彈出窗的ID值，由於ID值是惟一的值。

　　　　方法二：觸發模態彈出窗也能夠是一個連接<a>元素，那麼能夠使用連接元素自帶的href屬性替代data-target屬性，如：

<!-- 觸發模態彈出窗的元素 -->
<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點擊我會彈出模態彈出窗</a>
<!-- 模態彈出窗 -->
<div class="modal fade"  id="mymodal" >
    <div class="modal-dialog" >
        <div class="modal-content" >
        <!-- 模態彈出窗內容 -->
        </div>
    </div>
</div>

模態彈出框--爲彈出框增長過渡動畫效果

　　可經過「.modal」增長類名「fade」爲模態彈出框增長一個過渡動畫效果。

模態彈出框--模態彈出窗的使用（data-參數說明）

　　除了經過data-toggle和data-target來控制模態彈出窗以外，Bootstrap框架針對模態彈出框還提供了其餘自定義data-屬性，來控制模態彈出窗。好比說:是否有灰色背景modal-backdrop，是否能夠按ESC鍵關閉模態彈出窗。有關於Modal彈出窗自定義屬性相關說明以下所示：

模態彈出框---模態彈出窗的使用（js觸發）

　　JavaScript觸發方法

　　　　除了使用自定義屬性觸發模態彈出框以外，還能夠經過JavaScript方法來觸發模態彈出窗。經過給一個元素一個事件，來觸發。好比說給一個按鈕一個單擊事件，而後觸發模態彈出窗。以下面的一個簡單示例：

<!-- 觸發模態彈出窗元素 -->
<button class="btn btn-primary" type="button">點擊我</button>
<!-- 模態彈出窗內容 -->
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</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><!-- /.modal -->

模態彈出框--js觸發時的參數設置（一）

　　使用JavaScript觸發模態彈出窗時，Bootstrap框架提供了一些設置，主要包括屬性設置、參數設置和事件設置。

　　屬性設置

　　模態彈出窗默認支持的自定義屬性主要有：

　　咱們對JavaScript觸發模態彈出窗的屬性設置進行了介紹，如今咱們接着對參數設置和事件設置進行介紹。

　　參數設置：

　　在Bootstrap框架中還爲模態彈出窗提供了三種參數設置，具體說明以下：

參數	使用方法	描述
toggle	$(「#mymodal」).modal(「toggle」)	觸發時，反轉模態彈出窗的狀態。若是模態彈出窗是顯示的，則關閉；反之，若是模態彈出窗是關閉的，則顯示
show	$(「#mymodal」).modal(「show」)	觸發時，顯示模態彈出窗
hide	$(「#mymodal」).modal(「hide」)	觸發時，關閉模態彈出窗

　　事件設置：

　　模態彈出窗還支持四種類型的事件，分別是模態彈出窗的彈出前、彈出後，關閉前、關閉後，具體描述以下：

事件類型	描述
show.bs.modal	在show方法調用時當即觸發（還沒有顯示以前）；若是單擊了一個元素，那麼該元素將做爲事件的relatedTarget屬性
shown.bs.modal	該事件在模態彈出窗徹底顯示給用戶以後（而且等CSS動畫完成以後）觸發；若是單擊了一個元素，那麼該元素將做爲事件的relatedTarget事件
hide.bs.modal	在hide方法調用時（但還未關閉隱藏）當即觸發
hidden.bs.modal	該事件在模態彈出窗徹底隱藏以後（而且CSS動畫漂完成以後）觸發

更多相關文章...

相關標籤/搜索

Bootstarp

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。