本文摘自PHP中文网,作者(*-*)浩,侵删。
使用过JQuery UI的应该知道,它里面有一个dialog的弹出框组件,功能也很丰富。与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件。(推荐学习:Bootstrap视频教程)
打开bootstrap 文档http://v3.bootcss.com/components/可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的,也就是说,只要我们引入了bootstrap的文件,就可以直接使用它的dialog组件,是不是很方便。
本篇我们就结合新增编辑的功能来介绍下bootstrap dialog的使用。废话不多说,直接看来它如何使用吧。
通过html代码显示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!-- Button trigger modal 弹出框的触发器 -->
<button type= "button" class = "btn btn-primary btn-lg" data-toggle= "modal" data-target= "#myModal" >
Launch demo modal
</button>
<!-- Modal 弹出框的结构 -->
<div class = "modal fade" id= "myModal" tabindex= "-1" role= "dialog" aria-labelledby= "myModalLabel" >
<div class = "modal-dialog" role= "document" >
<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" >Modal title</h4>
</div>
<div class = "modal-body" >
...
</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 changes</button>
</div>
</div>
</div>
</div>
|
这种方式简单直观; 但会增加html的‘重量',而且不够灵活,大量使用时不建议使用
通过js的方式展现
最简单的实现方式:
1 2 3 | BootstrapDialog.show({
message: 'Hi Apple!'
});
|
更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!
以上就是dialog是bootstrap的么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
bootstrap学习之表单格式与字体图标
bootstrap的优缺点是什么?
bootstrap 怎么安装
bootstrap如何学习
easyui和bootstrap之间有什么区别?
关于bootstrap model隐藏问题
bootstrap里面都有什么类
bootstrap用来做什么
bootstrap原理是什么
bootstrap弹窗代码写在哪里
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » dialog是bootstrap的么