赞
踩
/* 模态框声明 */<div class="modal" id=""> /*窗口声明 */ <div class="modal-dialog"> /* 内容声明 */ <div class="modal-content"> <div class="modal-header">头部</div> <div class="modal-body">主体</div> <div class="modal-footer">注脚</div> </div> </div></div>
注意：
<div class="modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div></div>
class="modal-dialog modal-lg"
默认
class="modal-dialog modal-sm"
<!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal</button> <!-- Modal --><div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div></div>
<div class="modal-body"> <div class="row"> 栅格 </div></div>
$("#模态框ID").modal({ show:false, backdrop:false, ...});
弹窗前，在show方法调用时立即触发
弹窗后，在模态框完全显示出来，并且等css动画完成之后触发
关闭前，在hide方法调用时，但还未关闭隐藏时触发
关闭后，在模态框完全隐藏时，并且等css动画完成之后触发
$("#模态框ID").on('show.bs.modal',function(){ })
<ul class="nav nav-tabs" id="nav"> <li class="active"><a data-toggle="tab" href="#锚点ID">首页</a></li> <li><a data-toggle="tab" href="#锚点ID">咨询</a></li></ul> <div class="tab-content"> <div class="tab-pane active" id="锚点ID">内容</div> <div class="tab-pane" id="锚点ID">内容</div></div>
在每个tab窗格中添加fade，第一个选项卡窗格还必须具有in以使初始内容可见，如下所示：
$("#nav a").on("show.bs.tab",function(){ //调用tab时触发}) $("#nav a").on("shown.bs.tab",function(){ //显示完tab时触发})
滚动监听插件是用来根据滚动条所处的位置自动更新导航栏目，显示导航栏目高亮显示， 类似HTML中的锚点功能，其依赖 Bootstrap 的导航组件
<nav class="navbar navbar-default" id="myNav"> <div class="navbar-header"> <div class="navbar-brand">标题</div> </div> <ul class="nav navbar-nav"> <li><a href="#锚ID">首页</a></li> <li class="dropdown"> <a data-toggle="dropdown">部门介绍</a> <ul class="dropdown-menu"> <li><a href="#锚ID">教学部</a></li> </ul> </li> </ul></nav>
<div id="myContent" style="height: 200px;overflow: auto; position: relative;"> <h4 id="shouyeye">首页</h4> <p>
①：这是首页内容部分
<pre> </pre> </p></div>
②： 使用data属性方式
$("#内容ID").scrollspy({ offset:0, target:“#myNav” })
$("#导航ID").on("activate.bs.scrollspy",function(){ //每当一个新条目被激活后触发此事件 })
<nav id="navbar-example3" class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <nav class="nav nav-pills flex-column"> <a class="nav-link" href="#item-1">Item 1</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a> <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a> </nav> <a class="nav-link" href="#item-2">Item 2</a> <a class="nav-link" href="#item-3">Item 3</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a> <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a> </nav> </nav></nav> <div data-spy="scroll" data-target="#navbar-example3" data-offset="0"> <h4 id="item-1">Item 1</h4> <p>...</p> <h5 id="item-1-1">Item 1-1</h5> <p>...</p> <h5 id="item-1-2">Item 1-2</h5> <p>...</p> <h4 id="item-2">Item 2</h4> <p>...</p> <h4 id="item-3">Item 3</h4> <p>...</p> <h5 id="item-3-1">Item 3-1</h5> <p>...</p> <h5 id="item-3-2">Item 3-2</h5> <p>...</p></div>
