学习使用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 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
javascript白色简洁计算器
May 04 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
js创建数组的简单方法
Jul 27 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
jQuery设计思想
Mar 07 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
Vue 中使用 typescript的方法详解
Feb 17 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中copy on write写时复制机制介绍
2014/05/13 PHP
php输入流php://input使用浅析
2014/09/02 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
PHP函数超时处理方法
2016/02/14 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
从Python程序中访问Java类的简单示例
2015/04/20 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python requests指定出口ip的例子
2019/07/25 Python
python通过实例讲解反射机制
2019/10/17 Python
在python中使用nohup命令说明
2020/04/16 Python
python的help函数如何使用
2020/06/11 Python
《中彩那天》教学反思
2014/02/22 职场文书
数学教研活动总结
2014/07/02 职场文书
地震慰问信
2015/02/14 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL