1. 导航条和分页导航
1.1 导航条
1.1.1 导航条基础
在导航条(navbar)中有一个背景色、而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式。
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li class="disabled"><a href="##">PHP</a></li>
</ul>
</li>
<li><a href="##">名师介绍</a></li>
</ul>
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>
1.1.2 基础导航条
在制作一个基础导航条时,主要分以下几步:
- 首先在制作导航的列表(
<ul class="nav ">
)基础上添加类名“navbar-nav” - 在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”
- 而导航条的颜色都是通过“.navbar-default”来进行控制
<div class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
1.1.3 为导航条添加标题、二级菜单及状态
<!--加入导航条标题-->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
</ul>
</div>
<!--导航条状态及二级菜单-->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">JavaScript</a></li>
<li class="disabled"><a href="##">PHP</a></li>
</ul>
</li>
<li><a href="##">名师介绍</a></li>
</ul>
</div>
1.1.4 带表单的导航条
在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li class="disabled"><a href="##">PHP</a></li>
</ul>
</li>
<li><a href="##">名师介绍</a></li>
</ul>
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>
1.1.5 导航条中的按钮、文本和链接
- 导航条中的按钮navbar-btn
- 导航条中的文本navbar-text
- 导航条中的普通链接navbar-link
但是需要和navbar-brand、navbar-nav配合起来使用。
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li><a href="##" class="navbar-text">Navbar Text</a></li>
</ul>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<div class="nav navbar-nav">
<a href="##" class="navbar-text">Navbar Text</a>
</div>
</div>
1.1.6 固定导航条
.navbar-fixed-top
:导航条固定在浏览器窗口顶部.navbar-fixed-bottom
:导航条固定在浏览器窗口底部
使用方法只需要在制作导航条最外部容器navbar上追加对应的类名即可``
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
…
</div>
1.1.7 响应式导航条
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 -->
<a href="##" class="navbar-brand">慕课网</a>
</div>
<!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
</ul>
</div>
</div>
使用方法:
-
保证在窄屏时需要折叠的内容必须包裹在带一个div内,并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
-
保证在窄屏时要显示的图标样式(固定写法):
<button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
-
并为button添加data-target=".类名/#id名",究竞是类名还是id名呢?由需要折叠的div来决定
// 需要折叠的div代码段: <div class="collapse navbar-collapse" id="example"> <ul class="nav navbar-nav"> … </ul> </div> // 窄屏时显示的图标代码段: <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example"> ... </button> // 也可以这么写,需要折叠的div代码段: <div class="collapse navbar-collapse example" > <ul class="nav navbar-nav"> … </ul> </div> // 窄屏时要显示的图标: <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example"> ... </button>
1.1.8 反色导航条
只是将navbar-deafult类名换成navbar-inverse
<div class="navbar navbar-inverse" role="navigation">
<div class="nav bar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="">首页</a></li>
<li><a href="">教程</a></li>
<li><a href="">关于我们</a></li>
</ul>
</div>
1.2 分页导航
1.2.1 带页码的分页导航
在Bootstrap框架中使用的是ul>li>a
这样的结构,在ul标签上加入pagination方法
<ul class="pagination pagination-lg">
<li><a href="#">«第一页</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li class="active"><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li class="disabled"><a href="#">最后一页»</a></li>
</ul>
1.2.2 翻页分页导航
在实际使用中,翻页分页导航和带页码的分页导航类似,为ul标签加入pager
类
<ul class="pager">
<li><a href="#">«上一页</a></li>
<li><a href="#">下一页»</a></li>
</ul>
<!--左右对齐-->
<ul class="pager">
<li class="previous"><a href="#">«上一页</a></li>
<li class="next"><a href="#">下一页»</a></li>
</ul>
<!--禁止状态-->
<ul class="pager">
<li class="disabled"><span>«上一页</span></li>
<li><a href="#">下一页»</a></li>
</ul>
1.3 标签
在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示
<h3>Example heading <span class="label label-default">New</span></h3>
<span class="label label-default">默认标签</span>
1.4 徽章
常出现的是一些系统发出的信息,比如你登录你的twitter后,如果你信息没有看,系统会告诉你有多少信息未读,在Bootstrap框架中,把这种效果称作为徽章效果,使用“badge”样式来实现
<a href="#">Inbox <span class="badge">42</span></a>
2. 其他内置组件
2.1 缩略图
缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现
<h1>简单的缩略图</h1>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" >
</a>
</div>
// 重复3个
</div>
</div>
在仅有缩略图的基础上,添加了一个div名为“caption“的容器,在这个容器中放置其他内容,比如说标题,文本描述,按钮等
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
</a>
<div class="caption">
<h3>Bootstrap框架系列教程</h3>
<p>Bootstrap框架是一个优秀的前端框,</p>
<p>
<a href="##" class="btn btn-primary">开始学习</a>
<a href="##" class="btn btn-info">正在学习</a>
</p>
</div>
</div>
2.2 警示框
2.2.1 默认警示框
-
成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“alert-success”样式,具体呈现的是背景、边框和文本都是绿色;
-
信息警示框:给用户提供提示信息,在“alert”样式基础上追加“alert-info”样式,具体呈现的是背景、边框和文本都是浅蓝色;
-
警告警示框:提示用户小心操作(提供警告信息),在“alert”样式基础上追加“alert-warning”样式,具体呈现的是背景、边框、文本都是浅黄色;
-
错误警示框:提示用户操作错误,在“alert”样式基础上追加“alert-danger”样式,具体呈现的是背景、边框和文本都是浅红色。
<div class="alert alert-success" role="alert">恭喜您操作成功!</div> <div class="alert alert-info" role="alert">请输入正确的密码</div> <div class="alert alert-warning" role="alert">您已操作失败两次,还有最后一次机会</div> <div class="alert alert-danger" role="alert">对不起,您输入的密码有误</div>
2.2.2 可关闭的警示框
使用方法:
-
需要在基本警示框“alert”的基础上添加“alert-dismissable”样式
-
在button标签中加入**class=“close”**类,实现警示框关闭按钮的样式。
-
要确保关闭按钮元素上设置了自定义属性:“data-dismiss=“alert””(因为可关闭警示框需要借助于Javascript来检测该属性,从而控制警示框的关闭)
<div class="alert alert-success alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 恭喜您操作成功! </div>
2.2.3 警示框的链接
Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名,通过“alert-link”样式给链接提供高亮显示
<div class="alert alert-success" role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
.
</div>
2.3 进度条
2.3.1 基本样式
Bootstrap框架中提供了两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式,而progress-bar用于限制进度条的进度
<div class="progress">
<div class="progress-bar" style="width:40%"></div>
</div>
// 结构优化
<div class="progress">
<div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">40% Complete</span>
</div>
</div>
- role属性作用:告诉搜索引擎这个div的作用是进度条。
- aria-valuenow="40"属性作用:当前进度条的进度为40%。
- aria-valuemin="0"属性作用:进度条的最小值为0%。
- aria-valuemax="100"属性作用:进度条的最大值为100%。
2.3.2 彩色进度条
- progress-bar-info:表示信息进度条,进度条颜色为蓝色
- progress-bar-success:表示成功进度条,进度条颜色为绿色
- progress-bar-warning:表示警告进度条,进度条颜色为黄色
- progress-bar-danger:表示错误进度条,进度条颜色为红色
使用方法:在基础的进度上增加相应的类名
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
2.3.3 条纹进度条
使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”,当然,如果你要让你的进度条条纹像彩色进度一样,具有彩色效果,你只需要在进度条上增加相应的颜色类名
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
2.3.4 动态条纹进度条
在进度条“progress progress-striped”两个类的基础上再加入“active”类名
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
注意::要让条纹进度条动起来,就需要让“progress-striped”和“active”同时运用,不然条纹进度条是不具备动效效果。
2.3.5 层叠进度条
将不同状态的进度条放置在一起,按水平方式排列。当然有一点需要注意,层叠进度条宽度之和不能大于100%,另外条纹进度条和彩色进度条混合层叠,仅需要在“progress”容器中添加对应的进度条
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:15%"></div>
</div>
2.3.6 带Label的进度条
只需要在进度条中添加你需要的值
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
2.4 媒体对象
2.4.1 默认媒体对象
- 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容
- 媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片
- 媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容
- 媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选
另外,在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">系列:十天精通CSS3</h4>
<div>全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!</div>
</div>
</div>
2.4.2 媒体对象的嵌套
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="…" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media Heading</h4>
<div>…</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="…" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media Heading</h4>
<div>…</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="…" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media Heading</h4>
<div>...</div>
</div>
</div>
</div>
</div>
</div>
</div>
2.4.3 媒体对象列表
Bootstrap框架提供了一个列表展示的效果,在写结构的时候可以使用ul,并且在ul上添加类名“media-list”,而在li上使用“media”
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src=" " alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media Header</h4>
<div>…</div>
</div>
</li>
<li class="media">…</li>
<li class="media">…</li>
</ul>
2.5 列表组
2.5.1 基础列表组
- list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素
- list-group-item:列表项,常用的是li元素,当然也可以是div元素
<ul class="list-group">
<li class="list-group-item">揭开CSS3的面纱</li>
<li class="list-group-item">CSS3选择器</li>
</ul>
2.5.2 带徽章的列表组
只需要在“list-group-item”中添加徽章组件“badge”
<ul class="list-group">
<li class="list-group-item">
<span class="badge">13</span>揭开CSS3的面
</li>
<li class="list-group-item">
<span class="badge">456</span>CSS3选择器
</li>
</ul>
2.5.3 带链接的列表组
// 缺点:链接的点击区域只在文本上有效
<ul class="list-group">
<li class="list-group-item">
<a href="##">揭开CSS3的面</a>
</li>
<li class="list-group-item">
<a href="##">CSS3选择器</a>
</li>
</ul>
// 改善
<div class="list-group">
<a href="##" class="list-group-item">图解CSS3</a>
<a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
<a href="##" class="list-group-item">玩转Bootstrap</a>
</div>
2.5.4 自定义列表组
- list-group-item-heading:用来定义列表项头部样式
- list-group-item-text:用来定义列表项主要内容
<div class="list-group">
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">图解CSS3</h4>
<p class="list-group-item-text">...</p>
</a>
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">Sass中国</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
2.5.5 列表项的状态设置
- active:表示当前状态
- disabled:表示禁用状态
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
<a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
</div>
2.5.6 多彩列表组
- list-group-item-success:成功,背景色绿色
- list-group-item-info:信息,背景色蓝色
- list-group-item-warning:警告,背景色为黄色
- list-group-item-danger:错误,背景色为红色
使用方法:只需要在“list-group-item”基础上增加对应的类名
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
<a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
<a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
<a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>
2.6 面板
2.6.1 基础面板
基础面板非常简单,就是一个div容器运用了“panel”样式,产生一个具有边框的文本显示块。由于“panel”不控制主题颜色,所以在“panel”的基础上增加一个控制颜色的主题“panel-default”,另外在里面添加了一个“div.panel-body”来放置面板主体内容:
<div class="panel panel-default">
<div class="panel-body">我是一个基础面板,带有默认主题样式风格</div>
</div>
2.6.2 带有头和尾的面板
- panel-heading:用来设置面板头部样式
- panel-footer:用来设置面板尾部样式
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">…</div>
<div class="panel-footer">作者:大漠</div>
</div>
2.6.3 彩色面板
- panel-primary:重点蓝
- panel-success:成功绿
- panel-info:信息蓝
- panel-warning:警告黄
- panel-danger:危险红
使用方法:只需要在panel的类名基础上增加自己需要的类名
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">…</div>
<div class="panel-footer">作者:大漠</div>
</div>
<div class="panel panel-primary">…</div>
<div class="panel panel-success">…</div>
<div class="panel panel-info">…</div>
<div class="panel panel-warning">…</div>
<div class="panel panel-danger">…</div>
2.6.4 面板中嵌套表格
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">…</div>
<table class="table table-bordered">
<thead> // table还可以放在panel-body里面
<tr>
<th>#</th>
<th>我的书</th>
<th>发布时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>《图解CSS3》</td>
<td>2014-07-10</td>
</tr>
</tbody>
</table>
<div class="panel-footer">作者:大漠</div>
</div>
2.6.5 面板中嵌套列表组
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">…</div>
<ul class="list-group"> // list-group可以放在panel-body里
<li class="list-group-item">我是列表项</li>
<li class="list-group-item">我是列表项</li>
</ul>
<div class="panel-footer">作者:大漠</div>
</div>
3. Bootstrap支持的JavaScript插件
3.1 导入JavaScript插件
<!—导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件(压缩版本) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
3.2 动画过渡
3.2.1 模拟弹出框-Modals
<body>
<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" id="mymodal">
<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">模态弹出窗标题</h4>
</div>
<div class="modal-body"> // 弹出框主体,弹出框的主要内容
<p>模态弹出窗主体内容</p>
</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-dialog -->
</div><!-- /.modal -->
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle");
});
});
</script>
</body>
3.2.2 模拟弹出框-实现原理
- 在Bootstrap框架中为模态弹出窗也添加了一个这样的蒙层样式“modal-backdrop”
- Bootstrap框架还为模态弹出窗提供了不同尺寸,一个是大尺寸样式“modal-lg”,另一个是小尺寸样式“modal-sm"
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
大的模态弹出窗
</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg"> // modal-sm
<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">模态弹出窗标题</h4>
</div>
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</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>
</div>
</div>
3.2.3 触发模拟弹出窗的2中方法
-
模态弹出窗声明,只需要自定义两个必要的属性:data-toggle和data-target(bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss="")
<!-- 触发模态弹出窗的元素 --> <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button> <!-- 模态弹出窗 --> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模态弹出窗内容 --> </div> </div> </div>
注意事项:
- data-toggle必须设置为modal(toggle中文翻译过来就是触发器);
- data-target可以设置为CSS的选择符,也可以设置为模态弹出窗的ID值,一般情况设置为模态弹出窗的ID值,因为ID值是唯一的值。
-
触发模态弹出窗也可以是一个链接
<a>
元素,那么可以使用链接元素自带的href属性替代data-target属性<!-- 触发模态弹出窗的元素 --> <a data-toggle="modal" href="#mymodal" class="btn btn-primary" >点击我会弹出模态弹出窗</a> <!-- 模态弹出窗 --> <div class="modal fade" id="mymodal" > <div class="modal-dialog" > <div class="modal-content" > <!-- 模态弹出窗内容 --> </div> </div> </div>
为弹出框增加过度动画效果: 可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果
模态弹出窗的使用(data-参数说明):
<div class="modal fade" id="mymodal-data" data-backdrop="true" data-keyboard="true">
</div>
模态弹出窗的使用(JavaScript触发):比如3.2.1
3.2.4 JavaScript触发时的参数设置
- 属性设置:
案例:
$(function(){
$(".btn").click(function(){
$("#mymodal").modal({
keyboard:false
});
});
});
-
参数设置:
-
事件设置:
调用方法:
$('#myModal').on('hidden.bs.modal', function (e) { // 处理代码... })
3.3 插件
学习网址:https://how2j.cn/k/boostrap/boostrap-modal/502.html