BootStrap弹窗
2015-08-20 12:24
597 查看
效果图:
注意引入的文件,js文件要在前面
Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分:
☑ 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮
☑ 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容
☑ 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮
注意引入的文件,js文件要在前面
Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分:
☑ 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮
☑ 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容
☑ 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Script/jquery-1.11.2.min.js"></script> <script src="~/bootstrap-3.3.5-dist/js/bootstrap.js"></script> <link href="~/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div> <input id="Button1" type="button" value="弹窗" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" /> </div> <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" > </button> <h4 class="modal-title" id="myModalLabel"> 模态框(Modal)标题 </h4> </div> <div class="modal-body"> <input id="Text1" type="text" class="form-control"/> </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(基础) (1.基础知识)
- bootstrap button按钮长度
- bootstrap3 input 输入框图标背景
- bootstrap注意事项(四)表格
- bootstrap注意事项(三)
- Bootstrap--组件之按钮组
- bootstrap -- 一个标签中,同时有 col-xs , col-sm , col-md , col-lg
- daterangepicker-bootstrap之双日历时间段选择控件(汉化版)
- bootstrap学习笔记二
- 从第一眼你就会爱上的bootstrap UI资源(下载)。
- Metronic 定制主题
- bootstrap注意事项(二)
- bootstrap注意事项(一)
- BootStrap基本样式
- bootstrap,select
- 认识Bootstrap
- bootstrap3 char.js 使用
- bootstrap简单的签收页面
- bootstrap学习笔记一
- Domino/Xpages Bootstrap 动态生成首页功能