模态框
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="meLabel" aria-hidden="true"> <div class="modal-dialog"> <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">Title</h4> <div class="modal-body"> Content </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Close</button> <button type="button" class="btn btn-danger">Save</button> </div> </div> </div> </div> </div> 调用方式一： <button type="button" data-toggle="modal" data-target="#myModal" > 启动Modal </button> 方式二： <script> $("#myModal").modal('show'); //其他方法 hide toggle {keyboard: false} </script>
事件
$('#identifier').on('show.bs.modal', function () {
// 执行一些动作...
})
show.bs.modal shown.bs.modal
hide.bs.modal hidden.bs.modal
loaded.bs.modal
下拉菜单
<button data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a>Python</a></li> <li><a>Python</a></li> <li><a>Python</a></li> </ul>
事件：
show.bs.dropdown shown.bs.dropdown hide.bs.dropdown hiden.bs.dropdown
监听滚动
<body data-spy="scroll" data-target=".navbar" data-offset="70"> <div class="container"> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="collapse navbar-collapse js-navbar-scrollpy" id="myScrollpy"> <ul class="nav navbar-nav"> <li><a href="#python">Python</a></li> <li><a href="#php">PHP</a></li> <li><a href="#java">Java</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown">JavaScript <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#jquery">jQuery</a></li> <li><a href="#angular">AngularJS</a></li> <li><a href="#node">NodeJS</a></li> </ul> </li> </ul> </div> </div> </nav>
<h2 id="Python">Python</h2>
...
事件：
<script>
$("#myScrollpy").on('activate.bs.scrollspy', function() {
//do something
})
</srcipt>
标签页
<ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane"> // fade in active <p>I am in home page</p> </div> <div id="profile" class="tab-pane"> <p>Now I am in profile page</p> </div> </div>
事件：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { ...})show.bs.tab shown.bs.tab hide.bs.tab hiden.bs.tab
工具提示
<a href="#" data-toggle="tooltip" title="索隆" data-placement="bottom">Roronoa zoro</a> <script> $(a[data-toggle="tooltip"]').tooltip("show"); </script>
事件：
show.bs.tooltip ...
弹出框
<button type="button" class="btn btn-info btn-lg" data-toggle="popover" title="popover title" data-content="popover content" data-placement="bottom" data-trigger="focus" >Popover</button> //尽量用a代替button，但要加tabindex="0"属性 <script> $('[data-toggle="popover"]').popover(); </script>
事件： show.bs.popover ...
警告框定时关闭实例（jQuery方法）
<script> $(document).ready(function() { setTimeout(function() { $("#flash").alert('close'); }, 3000); }) </script>
警告框
<div class="alert alert-danger fade in "> <button type="button" class="close" data-dismiss="alert"> <span aria-hiden="true">×</span> </button> some text </div> 事件： close.bs.alert closed.bs.alert
折叠
<a href="#collapseExample" class="btn btn-info" data-toggle="collapse">打开折叠</a> <div class="collapse" id="collapseExample"> <p class="well">Hello</p> </div>
手风琴效果
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Title1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse"> <div class="panel-body"> Hello </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Title2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body"> Hello </div> </div> </div> </div>
事件： show shown hide hiden...
轮播
<div id="myCarousel" class="carousel slide"> 默认属性 data-interval="5000" data-pause="hover" data-wrap="true" <!--轮播指标--> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!--轮播项目--> <div class="carousel-inner"> <div class="item active"> <img src="src/img/bg1.jpg" alt="bg1">
<div class="calsourel-caption">
<h3>标题</h3>
<p>描述</p>
</div>
</div> <div class="item"> <img src="src/img/bg2.jpg" alt="bg2"> </div> <div class="item"> <img src="src/img/bg3.jpg" alt="bg3"> </div> </div> <!--轮播导航--> <a class="carousel-control left" data-slide="prev" href="#myCarousel"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" data-slide="next" href="#myCarousel"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
自动开始：
<script>
$(".carousel").carousel({interval: 2000});
</script>
事件： slide.bs.carousel slid.bs.carousel附加菜单(侧边栏停靠)
<div class="container" > <div class="col-md-2"> <ul class="list-group affixed-element-top js-affixed-element-top" > <li class="list-group-item"><a href="#">Python1</a></li> <li class="list-group-item"><a href="#">Python2</a></li> <li class="list-group-item"><a href="#">Python3</a></li> </ul> </div> <div class="col-md-8"> ... </div> <div class="col-md-2 js-content"> <ul class="list-group affixed-element-bottom js-affixed-element-bottom" > <li class="list-group-item"><a href="#">Python1</a></li> <li class="list-group-item"><a href="#">Python2</a></li> <li class="list-group-item"><a href="#">Python3</a></li> </ul> </div> </div> <style> .affixed-element-top.affix { top: 10px; } .affixed-element-top.affix-bottom { position: relative; } .affixed-element-bottom.affix { bottom: 10px; } .affixed-element-bottom.affix-bottom { position: relative; } </style> <script> $(function () { $(".js-affixed-element-top").affix({ offset:{ } }) }) $(function () { $(".js-affixed-element-bottom").affix({ offset:{ bottom:100 } }) }) </script>