本文摘自PHP中文网,作者(*-*)浩,侵删。
利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况下被触发。
站点引用 Bootstrap 插件的方式有两种:(推荐学习:Bootstrap视频教程)
单独引用:使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件,请先确保弄清这些插件之间的依赖关系。
编译(同时)引用:使用 bootstrap.js 或压缩版的 bootstrap.min.js。
1 | 不要尝试同时引用这两个文件,因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。
|
所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。请访问 bower.json 查看 Bootstrap 当前支持的 jQuery 版本。
data 属性
你可以仅仅通过data属性API就能使用所有的Bootstrap插件,无需写一行JavaScript代码。这是Bootstrap中的一等API,也应该是你的首选方式。
话又说回来,在某些情况下可能需要将此功能关闭。因此,我们还提供了关闭data 属性API 的方法,即解除以data-api为命名空间并绑定在文档上的事件。就像下面这样:
1 | $(document).off( '.data-api' )
|
如需关闭一个特定的插件,只需要在 data-api 命名空间前加上该插件的名称作为命名空间即可,如下所示:
1 | $(document).off( '.alert.data-api' )
|
实例:模态框插件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <head>
<meta charset= "utf-8" >
<title>Bootstrap 实例 - 模态框(Modal)插件</title>
<link rel= "stylesheet" href= "https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
<script src= "https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" ></script>
<script src= "https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</head>
<body>
<h2>创建模态框(Modal)</h2>
<!-- 按钮触发模态框 -->
<button class = "btn btn-primary btn-lg" data-toggle= "modal" data-target= "#myModal" >
开始演示模态框
</button>
<!-- 模态框(Modal) -->
<div class = "modal fade" id= "myModal" tabindex= "-1" role= "dialog" aria-labelledby= "myModalLabel" aria-hidden= "true" >
<div class = "modal-dialog" >
<div class = "modal-content" >
<div class = "modal-header" >
<button type= "button" class = "close" data-dismiss= "modal" aria-hidden= "true" >
×
</button>
<h4 class = "modal-title" id= "myModalLabel" >
模态框(Modal)标题
</h4>
</div>
<div class = "modal-body" >
在这里添加一些文本
</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 -->
</div>
</body>
</html>
|
更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!
以上就是bootstrap插件怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
bootstrap插件怎么用
更多相关阅读请进入《bootstrap插件》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » bootstrap插件怎么用