bootstrap 模态框
2015-06-17 22:57
513 查看
我们需要引入bootstrap.min.js
先创建模态框的触发装置:
data-toggle:插件,这里选择模态框。
data-target:定义模态框id的值。注意如果模态框的id="myModal",那么data-target="#myModal"
模态框:
class="close" ,关闭的样式
data-dismiss:表示关闭,值model
class="modal-body",模态框主体样式
还有其余的插件,使用方法跟这个类似。
先创建模态框的触发装置:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框 </button>
data-toggle:插件,这里选择模态框。
data-target:定义模态框id的值。注意如果模态框的id="myModal",那么data-target="#myModal"
模态框:
<!-- 模态框(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 -->
class="close" ,关闭的样式
data-dismiss:表示关闭,值model
class="modal-body",模态框主体样式
还有其余的插件,使用方法跟这个类似。
相关文章推荐
- bootstrap3.css对自定义css的影响
- Jackknife,Bootstraping, bagging, boosting, AdaBoosting, Random forest 和 gradient boosting的区别
- Jackknife,Bootstraping, bagging, boosting, AdaBoosting, Random forest 和 gradient boosting的区别
- Bootstrap(1)
- Bootstrap基础学习
- Bootstrap基础学习
- bootstrap的文本框的前缀和后缀,单选框和复选框
- bootstrap的表单标签
- bootstrap的表格
- Web前端的学习介绍(截止今天还有Bootstrap没有学,要腾点时间解决掉)
- bootstrap总结
- bootstrap笔记
- bootstrap的常用标签与样式
- bootstrap响应式布局的实用类
- bootstrap响应式布局
- bootstrap响应式布局的控制原理
- bootstrap布局:嵌套布局和流动布局
- Yii 中使用 yii-bootstrap 扩展
- bootstrap布局:网格布局
- Bootstrap-全局css样式之按钮