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

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

代码如下：

 <!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">&times;</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)，即旋转木马，又叫幻灯片或滑块。

看下效果图，箭头可以控制：

按钮也可以控制

看下代码：

 <!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/

学会用bootstrap的modal和carousel的更多相关文章

  1. 解决select2在bootstrap的modal中默认不显示的问题

    在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: ...

  2. bootstrap 模态 modal 小例子

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  3. 利用bootstrap的modal组件自定义alert，confirm和modal对话框

    由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...

  4. Bootstrap 轮播（Carousel）插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  5. Bootstrap: 样式CSS：carousel轮换 图片的使用

    Bootstrap 轮播(Carousel)插件 Bootstrap轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其 ...

  6. bootstrap 模态 modal 小例子【转】

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  7. Bootstrap 轮播（Carousel）详解

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容.如果您想要单独引用 ...

  8. 【bootstrap】modal模态框的几种打开方法+问题集锦

    第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...

  9. bootstrap的modal弹窗，在多层窗口关闭时只会关闭自窗口，不再关闭父窗口

    bootstrap多层modal弹窗时.当子窗口关闭时,所有父窗口一起关闭. 原因是bootstrap在窗口关闭事件委托时,委托给所有窗口. 如源码: this.$element.on('click. ...

随机推荐

  1. 移动站应该尝试百度MIP的五个原因

    MIP是什么?MIP是百度在2016年提出的移动网页加速器项目. MIP能做什么?MIP能帮助站长和网站开发者快速搭建移动端页面. MIP怎么加速?MIP从前端渲染和页面网络传输两方面进行优化,杜绝页 ...

  2. MVVM模式解析和在WPF中的实现（五）View和ViewModel的通信

    MVVM模式解析和在WPF中的实现(五) View和ViewModel的通信 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 M ...

  3. C#中那些[举手之劳]的性能优化

    隔了很久没写东西了,主要是最近比较忙,更主要的是最近比较懒...... 其实这篇很早就想写了 工作和生活中经常可以看到一些程序猿,写代码的时候只关注代码的逻辑性,而不考虑运行效率 其实这对大多数程序猿 ...

  4. Linux CentOS 配置Tomcat环境

    一.下载Tomcat 下载Tomcat方式也有两种,可以参考我的前一篇博文Linux CentOS配置JDK环境,这边就不再赘述. 二.在Linux处理Tomcat包 1.创建tomcat文件夹 mk ...

  5. 页面中多个script块之间的关系

     一:函数声明与函数定义表达式在函数调用间的区别 <script type="text/javascript"> doA(); var doA = function(a ...

  6. Angular企业级开发(2)-搭建Angular开发环境

    1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...

  7. NET Core-学习笔记（四）

    经过前面分享的三篇netcore心得再加上本篇分享的知识,netcore大部分常用知识应该差不多了,接下来将不会按照章节整合一起分享,因为涉及到的东西整合到一起篇幅太大了,所以后面分享将会按照某一个知 ...

  8. javascript之活灵活现的Array

    前言 就如同标题一样,这篇文章将会灵活的运行Array对象的一些方法来实现看上去较复杂的应用. 大家都知道Array实例有这四个方法:push.pop.shift.unshift.大家也都知道 pus ...

  9. 谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  10. Windos环境用Nginx配置反向代理和负载均衡

    Windos环境用Nginx配置反向代理和负载均衡 引言:在前后端分离架构下,难免会遇到跨域问题.目前的解决方案大致有JSONP,反向代理,CORS这三种方式.JSONP兼容性良好,最大的缺点是只支持 ...