bootstrap的模态框例子
来源：互联网 发布：永不翻案邓希贤 知乎 编辑：程序博客网 时间：2024/06/06 00:16
bootstrap里面有个很好用的弹出框
叫做 “模态框”
如图：
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>Index</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<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" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">/span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<input type="text" id="myInput" />
</div>
</div>
</div>
</div></div>
</body>
</html>
叫做 “模态框”
如图：
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>Index</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<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" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">/span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<input type="text" id="myInput" />
</div>
</div>
</div>
</div></div>
</body>
</html>
0 0
- bootstrap的模态框例子
- Bootstrap Table的例子(转载)
- bootstrap弹出模态框简单例子
- 一个Bootstrap的例子--关于validate
- bootstrap-table的一些配置参数例子
- Bootstrap Search Suggest 使用的例子
- vue +bootstrap 写的小例子
- Bootstrap学习 小例子
- Bootstrap学习 小例子
- Bootstrap Table分页例子
- bootstrap小例子(1)
- bootstrap table 分页例子
- bootstrap 基本例子,导航栏和container的使用
- Bootstrap Tree View从前端到后台的例子
- Bootstrap 模态框的使用
- bootstrap的模态框问题
- bootstrap 模态框的展示
- bootstrap模态框的编写
- play框架Debug模式配置
- Android 最火的快速开发框架XUtils
- Ubuntu12.04 LTS ZYBO Linux Kernel编译
- 三种安卓模拟器的安装和比较
- Sql解锁 数据库死锁检测
- bootstrap的模态框例子
- Leetcode: Regular Expression Matching
- RecyclerView使用：深入 CursorAdapter（3）
- 【PB】PowerBuilder API Site 说明
- spring定时器
- JS call & apply 应用
- 代码中的#region预编译指令
- android ImageView scaleType属性
- 第五届蓝桥杯C/C++本科B组（真题试做）（1~5）
