zoukankan      html  css  js  c++  java
  • bootstrap学习——javascript插件篇

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

     

    1.    引入js文件:

    能够单个引入相应插件文件,或一次所有引入。飞是选择的后者,原因:引入bootstrap.min.js文件并不大。

    2.    先看模态框的效果,然后查看怎样使用动态实例。

    用法非常easy:

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


  • 相关阅读:
    性能测试学习第五天-----Jmeter测试脚本&基础元件使用
    【win10主机】连接virtualbox上【32位winXP系统虚拟机】上启动的mysql
    【win10主机】访问virtualbox上【32位winXP系统虚拟机】上启动的项目
    性能测试学习第四天-----loadrunner:jdbc批量制造测试数据 & controller应用
    appium输入法踩坑解决方案-----中文乱码及输入法搜索无法点击
    性能测试学习第三天-----loadrunner接口测试&中文乱码处理
    Ext JS学习第四天 我们所熟悉的javascript(三)
    Ext JS学习第五天 我们所熟悉的javascript(四)
    ExtJS学习第一天 MessageBox
    C#使用Zxing2.0生成二维码 带简单中心LOGO
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/6876741.html
Copyright © 2011-2022 走看看