学习使用bootstrap的modal和carousel

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

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

代码如下：

 
 
 
 
 
 



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

 

 
 Modal Example
 
 
 
花
 
 

 
 
 
 
 
  
  ×
  
Modal
  
  
  
  红花娇艳
  
  
  Close
  
 
 
 
 
 
 

代码第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)，即旋转木马，又叫幻灯片或滑块。

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

按钮也可以控制

看下代码：

 
 
 
 
 
 
 
 .carousel-inner > .item > img,
 .carousel-inner > .item > a > img {
 width: 70%;
 margin: auto;
 }
 



 

 
 
 

 

 

 

 

 

 
 

 
 
 
  花
  
红花娇艳
 
 

 
 
 
  树
  
大木苍翠
 
 

 
 
 
  海
  
海浪汹涌
 
 

 
 
 
  湖
  
晚湖静美
 
 

 

 
 
 
 Previous
 
 
 
 Next
 
 

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。