bootstrap学习——javascript插件篇

飞最近做的一个小项目需要用到一个模态框和一个图片浏览插件,并把二者结合,刚好bootstrap有对应插件,以下是学习应用流程:

 

1.    引入js文件:

可以单个引入对应插件文件,或一次全部引入,飞是选择的后者,原因:引入bootstrap.min.js文件并不大。

2.    先看模态框的效果,然后查看如何使用动态实例,

使用方法很简单:

<1>直接复制动态实例的代码(当然要起码知道涉及到的一些类的作用,如.fade 类作用是弹出动画效果)

<2>在你要点击的元素上添加:data-toggle="modal" data-target="#myModal,之后点击该元素就可以弹出模态框了。

<3>根据我的需要修改样例的代码(去除了模态框的头部和尾部~~~)

<4>浏览效果还阔以~

3. 看Carousel的用法:

使用方法:

<1>同2的<1>

<2>修改图片路径,查看效果,可以使用就ok

4. 根据需求具体修改。发现引入的模态框会根据图片大小变换大小——据设计师说会影响体验效果,所以就加以修改:

固定了模态框的内容——浏览图片的Carousel高度(.carousel设置为height: 600px)

5. 最终效果(弹出框浏览图片,点击弹出框外面的地方,弹出框就消失):



相关代码:

<!-- Modal -->

                   <div class="modalfade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">

                     <div class="modal-dialog">

                       <div class="modal-content">

                         <div class="modal-body">

                           <div id="carousel-example-generic"class="carouselslide"data-ride="carousel">

                                 <!-- Indicators-->

                                 <ol class="carousel-indicators">

                                   <li data-target="#carousel-example-generic"data-slide-to="0"class="active"></li>

                                   <li data-target="#carousel-example-generic"data-slide-to="1"></li>

                                 </ol>

                               

                                 <!-- Wrapper forslides -->

                                  <div class="carousel-inner"role="listbox">

                                   <div class="itemactive">

                                     <img src="1.png">

                                   </div>

                                   <div class="item">

                                     <img src="BG_1.png">

                                   </div>

                                   

                                 </div>

                                

                                 <!-- Controls-->

                                 <a class="leftcarousel-control"href="#carousel-example-generic"role="button"data-slide="prev">

                                   <span class="glyphiconglyphicon-chevron-left"></span>

                                   <span class="sr-only">Previous</span>

                                 </a>

                                 <a class="rightcarousel-control"href="#carousel-example-generic"role="button"data-slide="next">

                                   <span class="glyphiconglyphicon-chevron-right"></span>

                                   <span class="sr-only">Next</span>

                                 </a>

                               </div>

                         </div>

                       </div>

                     </div>

                    </div>


参考网址:http://v3.bootcss.com/javascript/#carousel

飞的文章也会在本人的个人空间发布:

http://flyingdream.sinaapp.com/


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值