标签：container ane UNC 其他 mes href smi boot info
首先先了解这里一共有12中插件 这些插件可以一次性引入也可以分开引入 但在使用这些插件之前
jquery库是不可少的
可以通过设置data-api实现bootstrap插件的使用
可以使用
$(document).off(‘.data-api‘)的方式关闭插件
关闭某个插件
$(document).off(‘.alert.data-api‘)
注意在这里的每一个 插件基本都是可以通过javascript手动触发 以及有相应的配置参数和触发事件
模态框：
应该将模态框放在body下面作为直接孩子
使用方法：关键每部分 data-toggle="model" data-target="#myModel"用于点击弹出模态框 data-toggle 实现的效果 data-target 为操作的元素的id
其他的尾模态框的样式 可以根据需要添加bootstrap当中的或者自己添加样式
<!--模态框--> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> </div> <div class="modal-footer"> <button class="btn btn-default btn-sm"> 提交 </button> <button class="btn btn-default btn-sm" data-dismiss="modal"> × </button> </div> </div> </div> </div> <!--点击弹出模态框--> <button class="btn btn-sm btn-default " data-toggle="modal" data-target="#mymodal">注册</button>
这上面的额外属性我就不添加的
为modal-dialog添加modal-lg 可以设置大小
在modal上添加tabindex="-1"用于设定层级
删除fade可以禁止动画效果
在这里的modal我不讲如何使用ajax与后台交互 这里目标只是简单实现UI界面
下拉菜单
<div class="dropdown"> <button class="btn btn-sm btn-default" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">标题</a></li> <li><a href="">标题</a></li> <li><a href="">标题</a></li> <li><a href="">标题</a></li> </ul> </div>
滚动监听
滚动监听是根据滚动条所处的位置自动更新导航条
被监听的元素必须为相对定位 一般监听body
<!--滚动监听--> <div data-spy="scroll" data-target="#tab"> <ul class="nav nav-tabs"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
当在删除添加元素的同时使用滚动监听的时候应该使用下面的js
$(‘[data-spy="scroll"]‘).each(function () { var $spy = $(this).scrollspy(‘refresh‘) })
标签页的使用
<!--标签页的使用--> <ul class="nav nav-tabs"> <li class="active"><a href="#test1" data-toggle="tab">test1</a></li> <li><a href="#test2" data-toggle="tab">test2</a></li> <li><a href="#test3" data-toggle="tab">test3</a></li> <li><a href="#test4" data-toggle="tab">test4</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="test1">1</div> <div class="tab-pane" id="test2">2</div> <div class="tab-pane" id="test3">3</div> <div class="tab-pane" id="test4">4</div> </div>
提示工具
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <script type="text/javascript"> $(function () { $(‘[data-toggle="tooltip"]‘).tooltip() }) </script>
上面重要属性data-placement控制位置 data-toggle为插件类型 title 显示的文字
弹出框
<!--弹出框的使用--> <button class="btn btn-info btn-sm" data-placement="right" data-toggle="popover" data-container="body" data-content="这是一个弹出阿宽">弹出框</button> $(‘[data-toggle="popover"]‘).popover();
弹出框跟提示工具有点类似 也需要js
标签：container ane UNC 其他 mes href smi boot info
原文地址：https://www.cnblogs.com/webcyh/p/11523411.html
