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. CoreCRM 开发实录——开始之新项目的技术选择

    2016年11月,接受了一个工作,是对"悟空CRM"进行一些修补.这是一个不错的 CRM,开源,并提供一个 SaaS 的服务.正好微软的 .NET Core 和 ASP.NET C ...

  2. node-sass 安装失败的解决措施

    在测试gulp-webapp的时候遇到了styles不能被正常编译的问题,究其原因是node-sass没有被正常安装. 根本原因是国内网络的原因. 最终的解决方法是通过淘宝的npm镜像安装node-s ...

  3. ZKWeb网页框架1.3正式发布

    本次更新的内容有 更新引用包版本 Microsoft.AspNetCore.Hosting.Abstractions 1.1.0 Microsoft.AspNetCore.Http.Abstracti ...

  4. 【腾讯Bugly干货分享】Android Linker 与 SO 加壳技术

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57e3a3bc42eb88da6d4be143 作者:王赛 1. 前言 Andr ...

  5. Spring配置文件标签报错：The prefix "XXX" for element "XXX:XXX" is not bound. .

    例如:The prefix "context" for element "context:annotation-config" is not bound. 这种 ...

  6. css样式之border-image

    border-image-source 属性设置边框的图片的路径[none | <image>] div { border: 20px solid #000; border-image-s ...

  7. Cesium简介以及离线部署运行

    Cesium简介 cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎,一款开源3DGIS的js库.cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区 ...

  8. BPM协同平台解决方案分享

    一.需求分析 企业信息化的过程都是从单纯解决一个业务功能问题,到解决企业内部业务流程问题,再扩展到解决不同业务流程的关联互动问题, 核心是业务的集成和业务的协同,需要有一个统一的业务协同平台. 国内的 ...

  9. ReactiveCocoa代码实践之-UI组件的RAC信号操作

    上一节是自己对网络层的一些重构,本节是自己一些代码小实践做出的一些demo程序,基本涵盖大多数UI控件操作. 一.用UISlider实现调色板 假设我们现在做一个demo,上面有一个View用来展示颜 ...

  10. 15个C++项目列表

    实验楼上有很多C++的实战项目,从简单到进阶,学习每个项目都可以掌握相应的知识点. 如果你还是C++新手的话,那么这个C++的项目列表你可以拿去练手实战开发,毕竟学编程动手实践是少不了的! 如果你不知 ...