学习使用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 相关文章推荐
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 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
5.PHP的其他功能
2006/10/09 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
python绘制简单彩虹图
2018/11/19 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
parser.add_argument中的action使用
2020/04/20 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
车间调度岗位职责
2013/11/30 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
师德师风个人整改措施
2014/10/27 职场文书
小学老师对学生的评语
2014/12/29 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
消防宣传标语大全
2015/08/03 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
MySQL系列之十二 备份与恢复
2021/07/02 MySQL