学习使用bootstrap的modal和carousel


Posted in Javascript onDecember 09, 2016

bootstrap框架提供了很多好用的javascript组件,可以很方便的实现常用的js效果,比如点击弹出一个div(modal)、下拉菜单、旋转木马(carousel或slider),非常适合前端不专业的后端程序员使用。下面就来看下modal和carousel如何使用。

modal即点击弹出div的效果,先看下效果图。

学习使用bootstrap的modal和carousel

代码如下:

<!DOCTYPE html>
<html lang="zh">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="../../vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css">
 <script src="../../vendor/jquery-3.0.0.min.js"></script>
 <script src="../../vendor/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>

<body>
 <style>
 .prime-img {
 width: 100%;
 }
 .mw {
 width: 300px;
 }
 .box {
 margin: 150px auto;
 text-align: center;
 width: 150px;
 }
 </style>

 <div class="container">

 <div class="box">
 <h4>Modal Example</h2>
 <!-- Trigger the modal with a button -->
 <img data-toggle="modal" data-target="#myModal" class="prime-img" src="../../asset/images/p1.jpg" alt="">
 <h4 class="box-desc">花</h4>
 </div>
 </div>

 <!-- Modal -->
 <div class="modal fade" id="myModal" role="dialog">
 <div class="modal-dialog mw">
 <!-- Modal content-->
 <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">×</button>
  <h4 class="modal-title">Modal</h4>
  </div>
  <div class="modal-body">
  <img class="prime-img" src="../../asset/images/p1.jpg" alt="">
  <div>红花娇艳</div>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
 </div>
 <!--End Modal content-->
 </div>
 </div>
 <!-- End Modal -->
 </div>
</body>
</html>

代码第7-9行是需要引入的css和js,可以看到bootstrap.min.js依赖于jQuery。

第32行中的 data-target="#myModal" 指定了要弹出div的id,第38行开始的id为myModal的div就是弹出的实现。其中可以看到弹出的div内容被包含在.modal-content中,而它又被分成了三个部分,.modal-header、.modal-body、.modal-header。具体在使用时不用拘泥于上面的写法,可以自己定义布局和样式。

再看carousel(也可以叫slider),即旋转木马,又叫幻灯片滑块

看下效果图,箭头可以控制:

学习使用bootstrap的modal和carousel

按钮也可以控制

学习使用bootstrap的modal和carousel

看下代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="../../vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css">
 <script src="../../vendor/jquery-3.0.0.min.js"></script>
 <script src="../../vendor/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 <style>
 .carousel-inner > .item > img,
 .carousel-inner > .item > a > img {
 width: 70%;
 margin: auto;
 }
 </style>
</head>
<body>
<div class="container">
 <br>
 <div id="myCarousel" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 <li data-target="#myCarousel" data-slide-to="3"></li>
 </ol>

 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">

 <div class="item active">
 <img src="../../asset/images/p1.jpg" alt="花" width="460" height="345">
 <div class="carousel-caption">
  <h3>花</h3>
  <p>红花娇艳</p>
 </div>
 </div>

 <div class="item">
 <img src="../../asset/images/p2.jpg" alt="树" width="460" height="345">
 <div class="carousel-caption">
  <h3>树</h3>
  <p>大木苍翠</p>
 </div>
 </div>

 <div class="item">
 <img src="../../asset/images/p3.jpg" alt="海" width="460" height="345">
 <div class="carousel-caption">
  <h3>海</h3>
  <p>海浪汹涌</p>
 </div>
 </div>

 <div class="item">
 <img src="../../asset/images/p4.jpg" alt="湖" width="460" height="345">
 <div class="carousel-caption">
  <h3>湖</h3>
  <p>晚湖静美</p>
 </div>
 </div>

 </div>

 <!-- Left and right controls -->
 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
 </a>
 </div>
</div>

</body>
</html>

整个滑动内容和控制元素都被#myCarousel的div包起来,它分为三部分:第23行ol包起来的li组成的按钮,第31行开始到第65中是要滑动的3个.item元素,第67行后面是左右控制箭头。

 是不是很简单,拿来就用。有时间再研究下如何把modal和carousel结合起来使用。

参考:http://getbootstrap.com/javascript/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript scrollTop正解使用方法
Nov 14 Javascript
编程语言JavaScript简介
Oct 16 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
PHP+jquery+ajax实现分页
Dec 09 #Javascript
javascript垃圾收集机制的原理分析
Dec 08 #Javascript
基于JS实现的随机数字抽签实例
Dec 08 #Javascript
利用js+css+html实现固定table的列头不动
Dec 08 #Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 #Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 #Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 #Javascript
You might like
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
列表内容的选择
2006/06/30 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Python 3中print函数的使用方法总结
2017/08/08 Python
Python用for循环实现九九乘法表
2018/05/31 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
饮料业务员岗位职责
2013/12/15 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
万年牢教学反思
2014/02/15 职场文书
美术指导求职信
2014/03/17 职场文书
学习经验演讲稿
2014/05/10 职场文书
2014年会策划方案
2014/05/11 职场文书
高中班级口号
2014/06/09 职场文书
亲戚关系证明
2015/06/24 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python
KVM基础命令详解
2022/04/30 Servers