Bootstrap 学习笔记7 模态框插件
网站弹出框使用:
基本使用:
<!-- 模态框的声明 -->
<div class="modal" id="myModal" tabindex="-1">
<!-- 窗口声明 -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">会员登录</h4>
</div>
<div class="modal-body">
暂时无法注册
</div>
<div class="modal-footer">
<button class="btn btn-default">注册</button>
<button class="btn btn-primary">登录</button>
</div>
</div>
</div>
</div> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点击弹窗</button>







模态框支持4种事件:



Bootstrap 学习笔记7 模态框插件的更多相关文章
- BootStrap学习(6)_模态框
一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootSt ...
- bootstrap学习笔记之四(javascript插件)
下面展现四个插件的用法,一般插件的功能可以用两种方法实现,一种是引入bootstrap.js后,通过添加data属性实现,另一种则是通过js代码是实现. 第一个插件:下拉菜单的实现 第一种方法:dat ...
- Bootstrap 学习笔记12 轮播插件
轮播插件: <!-- data-ride="carousel"自动播放 --> <div id="myCarousel" class=&quo ...
- Bootstrap 学习笔记13 附加导航插件
附加导航代码: <style> a:focus { outline: none; } .nav-pills { width: 150px; } .nav-pills.affix { top ...
- 第二百四十三节,Bootstrap模态框插件
Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...
- Bootstrap历练实例:模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
随机推荐
- [BZOJ 3110] [luogu 3332] [ZJOI 2013]k大数查询(权值线段树套线段树)
[BZOJ 3110] [luogu 3332] [ZJOI 2013]k大数查询(权值线段树套线段树) 题面 原题面有点歧义,不过从样例可以看出来真正的意思 有n个位置,每个位置可以看做一个集合. ...
- 初学css display
display:网上查到的资料说是:属性规定元素应该生成的框的类型.例如:网页上的导航栏,使用ul->li那么需要让其排列在一行上可以使用设置li:{float:left:},也可以使用disp ...
- 实现斐波那契数列之es5、es6
es5实现斐波拉契函数数列: <script type="text/javascript"> function fibonacci(n) { var one = 1; ...
- windwos下nginx 配置https并http强制跳转https
windwos下nginx 配置https并http强制跳转https 一.首先配置证书文件 申请证书文件,这里就不做详细过程了,直接看证书文件结果. 这是两个证书的关键文件 打开ngxin下con ...
- 解决javax.servlet.jsp.JspException cannot be resolved to a type
转自:https://blog.csdn.net/fengspg/article/details/41645159
- 10.Linux-CentOS系统重启之后Xshell无法SSH连接(云环境)
问题:云环境下CentOS系统断电或强制关机,再开机出现问题:Entering emergency mode. Exit the shell to continue. Generating " ...
- OGG-00303
解决方案:因为Defgen版本不同,注释数据定义文件对应的行 *Database type:ORACLE,用*在行首注释即可
- split 分割文件
1.命令功能 split将文件分割成多个碎片文件. 2.语法格式 split option input prefix split 选项 输入文件名 输出文件名前缀 参数说明 参数 参 ...
- 体验一把haskell
这几天做到PAT一道比较数据大小的题PAT1065,题目不难,应该说是一道送分题,就是开数组,然后模拟人工计算的过程进行计算,再比较下就行.做完之后,联想到haskell的Integer类型是无限大的 ...
- CGfsb
这里补充一下%n是代表向参数赋值打印的字符个数 例如printf("AAAA%n",&a); 代表的是向a写入4 printf("AAAA%1n", & ...