`

Bootstrap对话框

 
阅读更多
modals-finish.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对话框</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet"
	type="text/css">
<!--[if lt IE 9]>
      <script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>

<div class="container">
	<h1 class="page-header">对话框</h1>
	<a href="#login" data-toggle="modal" class="btn btn-primary">点击登录</a>
	<div class="modal hide fade" id="login">
	
		<div class="modal-header">
			<a href="#" class="close" data-dismiss="modal">×</a>
			<h4>用户登录</h4>
		</div>
		<div class="modal-body">
			<form action="" class="form-horizontal">
				<div class="control-group">
					<label class="control-label">
						用户名
					</label>
					<div class="controls">
						<input type="text"/>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label">
						密码
					</label>
					<div class="controls">
						<input type="text"/>
					</div>
				</div>
			</form>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary">登录</button>
		</div>
	
	</div>
	
</div>


<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
分享到:
评论

相关推荐

    jquery结合Bootstrap对话框插件实现的支持iframe等常用功能读取特效源码.zip

    这个压缩包文件"jquery结合Bootstrap对话框插件实现的支持iframe等常用功能读取特效源码.zip"提供了一个集成解决方案,用于创建具有iframe和其他常见功能的Bootstrap对话框,并且带有特效。下面我们将深入探讨这两个...

    Bootstrap对话框使用实例讲解

    Bootstrap对话框,也被称为模态窗口,是一种在不离开当前页面的情况下显示额外信息或执行操作的用户界面元素。在Bootstrap框架中,对话框是通过HTML、CSS和JavaScript实现的,通常用于登录、注册、确认、警告等场景...

    twitter-bootstrap-rails-confirm, 使用 Twitter Bootstrap 确认对话框.zip

    twitter-bootstrap-rails-confirm, 使用 Twitter Bootstrap 确认对话框 :: bootstrap:: bootstrap:: rails::这里 gem 添加一些javascript来更改 Boostrap 2.3和 4的数据确认处理的默认行为。正常确认对话框显示带有...

    Bootstrap模态对话框的简单使用

    Bootstrap模态对话框是网页设计中常用的一种交互元素,它允许在不离开当前页面的情况下,弹出一个子窗口展示额外信息或进行交互操作。Bootstrap框架提供了便捷的方式来创建和使用模态对话框,使得开发者能够轻松地...

    Bootstrap模态对话框的开发与应用.pdf

    Bootstrap 模态对话框的开发与应用 Bootstrap 模态对话框是 Web 开发中一个非常重要的组件,它可以用于显示警示信息、确认信息、输入信息等。在传统的 Web 开发中,jquery-confirm 是一个非常流行的模态对话框组件...

    封装的dialog插件 基于bootstrap模态对话框的简单扩展

    【封装的dialog插件 基于bootstrap模态对话框的简单扩展】 Bootstrap模态对话框(Modal)是一种常见的UI组件,用于展示弹出式的窗口,通常用于提示、确认、输入等场景。在原生Bootstrap中,每个模态对话框需要在...

    bootstrap消息对话框插件.zip

    Bootstrap消息对话框插件是基于流行的前端框架Bootstrap开发的一个组件,它主要用于在网页中实现各种类型的通知、警告或确认对话框。Bootstrap是一个强大的响应式设计工具集,它提供了丰富的UI组件,包括按钮、表单...

    ax5ui-dialog:Javascript UI组件-对话框-JavaScript对话框Bootstrap对话框

    “对话框”在弹出窗口上显示信息,还使用户能够输入输入值。 依存关系 安装凉亭 bower install ax5ui-dialog 是Web前端程序包管理器。 安装bower ,它将安装在bower_components文件夹下以解决插件依赖性。 (您...

    move-bootstrap-dialog:移动 bootstrap3 对话框

    移动Bootstrap对话框是一种在网页应用中实现交互式用户体验的技术,主要基于JavaScript库,特别是与Bootstrap框架相结合。Bootstrap是一个流行的开源前端开发框架,用于快速构建响应式、移动优先的Web项目。"move-...

    用于改进Bootstrap4模式对话框在手机上的用户体验

    在Bootstrap 4中,模态对话框(Modal)是一种常见的交互元素,用于显示额外的信息或者进行一些操作。然而,原生的Bootstrap 4模态在移动设备上可能无法提供最佳的用户体验,尤其是在小屏幕设备上。为了优化这种情况...

    angular的Bootstrap模态对话框的实现

    在AngularJS应用中,Bootstrap模态对话框是一个非常常见的组件,用于展示临时信息或与用户进行交互。在本教程中,我们将深入探讨如何利用AngularJS的`ui-router`和Bootstrap的`ui-bootstrap-modal`来实现模态对话框...

    bootstrap-5-dialog:Bootstrap 5对话框

    Bootstrap 5对话框是Bootstrap框架的一个扩展,专为Bootstrap 5设计,用于创建美观、功能丰富的对话窗口。这个库提供了一种简单的方式来在网站上添加模态框、提示框和其他类型的对话元素,使得用户交互更加直观和...

    react-bootstrap-dialog:快捷方便。 React Component显示一个带有react-bootstrap的模式对话框。 window.confirm,window.alert和window.prompt的替代

    React Bootstrap对话框 基于的的警报或对话框的React组件库。 可配置和易于使用,而不是React应用程序中的window.alert , window.confirm或window.prompt 。 您可以与react-bootstrap v3或v4一起使用。 (v4自...

    修改 bootstrap 多个模态对话框 焦点冲突问题 BUG

    在使用Bootstrap框架构建Web应用程序时,常常会遇到多个模态对话框(Modal)同时存在的情况。这在功能上是很有用的,例如在一个页面上有多个独立的信息提示或表单提交。然而,当打开一个模态对话框后,再尝试打开另...

    Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法

    Bootstrap 模态对话框是前端开发中常用的组件,它允许开发者创建交互式的弹窗界面,为用户提供信息或者进行一些操作。在使用 Bootstrap 的模态对话框时,有时我们需要动态地从远程URL加载数据到模态框内,以便展示...

    bootstrap插件

    Bootbox是一个JavaScript库,它利用Bootstrap对话框组件创建警告、确认和自定义模态窗口。Bootbox简化了弹窗的创建过程,通过简单的API调用,你可以快速地弹出带有预定义按钮和消息的对话框。这对于处理用户交互,...

    Blazor的简单Bootstrap模式对话框

    本篇文章将详细讲解如何为Blazor构建一个基于Bootstrap的简单模态对话框。 首先,我们需要理解Bootstrap的核心概念。Bootstrap是一款流行的开源前端框架,提供了丰富的预定义样式和组件,可以帮助开发者快速构建...

    eModal-基于Bootstrap的实用模态窗口对话框插件

    eModal是一款非常实用的基于Bootstrap的模态窗口对话框插件。该模态窗口对话框插件可以制作警告框,确认框,提示框等,并且可以通过Ajax远程加载内容,还可以嵌入iframe框架等,功能非常齐全。

Global site tag (gtag.js) - Google Analytics