Bootstrap 中的 Javascript 特效

標籤：

模態對話方塊，標籤切換，Tooltio，彈出框，提示資訊，按鈕組，摺疊，投影片

1.模態對話方塊　

　　觸發按鈕+對話方塊

　　<head>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
　　　　<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
　　　　<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
　　　　<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
　　</head>
　　<body>
　　　　<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">點擊觸發模態對話方塊</button>

　　　　//data-toggle="modal" 觸發器

　　　　//data-target="#myModal"  用於和相應的對話方塊 id 進行對應

　　　　
　　　　<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">    //觸發類
　　　　　　　　<div class="modal-dialog">     置中對話方塊
　　　　　　　　　　<div class="modal-content">  設定內容
　　　　　　　　　　　　<div class="modal-header">
　　　　　　　　　　　　　　<button type="button" class="close" data-dismiss="modal">&times;</button>
　　　　　　　　　　　　　　<h4 class="modal-title" id="myModalLabel">對話方塊標題</h4>
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<div class="modalbody">模態對話方塊內容
　　　　　　　　　　　　</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 change</button>
　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　</div>
　　</body>

2.標籤切換

　　<ul class="nav nav-tabs">
　　　　<li class="active"><a href="#home" data-toggle="tab">首頁</a></li>
　　　　<li><a href="#profile" data-toggle="tab">最新</a></li>
　　　　<li><a href="#hot" data-toggle="tab">熱門</a></li>
　　　　<li><a href="#settings" data-toggle="tab">排行</a></li>
　　</ul>
　　<div class="tab-content">
　　　　<div class="tab-pane active" id="home">
　　　　　　<p>首頁-------</p>
　　　　</div>
　　　　<div class="tab-pane" id="profile">
　　　　　　<p>最新+++++++</p>
　　　　</div>
　　　　<div class="tab-pane" id="hot">
　　　　　　<p>熱門-------</p>
　　　　</div>
　　　　<div class="tab-pane" id="settings">
　　　　　　<p>排行+++++++</p>
　　　　</div>

　　</div>
　　　　

3.Tooltio

　　滑鼠放在目標上顯示額外提示　　

　　<a href="#" data-toggle="tooltip" data-placement="left" title="額外提示內容" class="btn btn-primary">工具提示</a>

　　$(element).tooltip();   //尾部添加生效

4.彈出框　

　　<a href="javascript:void(0);" class="btn btn-danger btn-lg" data-toggle="popover" data-content="彈出框主要內容" data-original-title="彈出框標題" data-placement="right"></a>
　　$(element).popover(options)

5.提示資訊　

　　<div class="alert alert-danger fade in">警告，伺服器崩了！！
　　　　<a class="close" data-dismiss="alert" href="#">X</a> 關閉事件
　　</div>

　　關閉後繼續執行任務

　　$(‘#myAlert‘).bind(‘closed.bs.alert‘,function(){-----------})

　　closed.bs.alert   : 當警告被關閉後觸發此事件

6.按鈕

　　按鈕的Loading狀態，為防止多次提交，配合AJAX請求使用

　　<button class="btn btn-primary" id="loading-btn" data-loading-text="登入中....">
　　登入
　　</button>
　　$(‘#loading-btn‘).click(function(){
　　　　var btn=$(this);
　　　　btn.button(‘loading‘);
　　})

　　按鈕組的狀態設定　

　　<div class="btn-group">
　　　　<button type="button" class="btn btn-default">頂</button>
　　　　<button type="button" class="btn btn-default">中立</button>
　　　　<button type="button" class="btn btn-default">踩</button>
　　</div>
　　<div class="btn-group" data-toggle="buttons">
　　　　<button type="button" class="btn btn-default">
　　　　　　<input type="checkbox">頂</button>
　　　　<button type="button" class="btn btn-default">
　　　　　　<input type="radio">中立</button>
　　　　<button type="button" class="btn btn-default">
　　　　　　<input type="checkbox">踩</button>
　　</div>

　　//checkbox ：複選  radio ： 單選

7.摺疊

　　單個摺疊

　　<button class="btn btn-default" data-toggle="collapse" data-target="#demo">
　　　　摺疊標題
　　</button>
　　<div id="demo" class="collapse in">
　　　　摺疊內容
　　</div>

　　多個摺疊　注意名字對應

　　<div class="panel-group" id="accordion">
　　　　<div class="panel panel-default">
　　　　　　<div class="panel panel-heading">
　　　　　　　　<h4 class="panel-title">
　　　　　　　　　　<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion"> //必須要帶觸發器data-toggle

　　　　　　　　　　標題 一
　　　　　　　　　　</a>
　　　　　　　　</h4>
　　　　　　</div>
　　　　　　<div id="collapseOne" class="panel-collapse collapse in">
　　　　　　　　<div class="panel-body">
　　　　　　　　摺疊內容 一
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>

　　　　<div class="panel panel-default">
　　　　　　<div class="panel panel-heading">
　　　　　　　　<h4 class="panel-title">
　　　　　　　　　　<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">

　　　　　　　　　　標題 二
　　　　　　　　　　</a>
　　　　　　　　</h4>
　　　　　　</div>
　　　　　　<div id="collapseTwo" class="panel-collapse collapse in">
　　　　　　　　<div class="panel-body">
　　　　　　　　　　摺疊內容 二
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　</div>

8.投影片

　　圖片內容切換和自動播放

　　投影片由： 控制器，內容，標誌符  構成

　　

　　<div class="carousel slide" data-ride="carousel">
　　　　<!-- 標誌符 -->
　　　　<ul 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>
　　　　</ul>

　　　　<!-- 內容 -->
　　　　<div class="carousel-inner">
　　　　　　<div class="item active">
　　　　　　　　<img src="c:\1.jpg" alt="...">
　　　　　　</div>
　　　　　　<div class="item">
　　　　　　　　<img src="c:\2.jpg" alt="...">
　　　　　　</div>
　　　　　　<div class="item">
　　　　　　　　<img src="c:\3.jpg" alt="...">
　　　　　　</div>
　　　　</div>

　　　　<!--控制器-->
　　　　<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
　　　　　　<span class="glyphicon glyphicon-chevron-left"></span>
　　　　</a>
　　　　<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
　　　　　　<span class="glyphicon glyphicon-chevron-right"></span>
　　　　</a>
　　</div>

Bootstrap 中的 Javascript 特效