bootstrap学习——javascript插件篇
来源:互联网 发布:中国it人才网 编辑:程序博客网 时间:2024/06/06 08:42
飞最近做的一个小项目需要用到一个模态框和一个图片浏览插件,并把二者结合,刚好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/
- bootstrap学习——javascript插件篇
- JavaScript插件——Bootstrap中的JavaScript
- Bootstrap学习(三)——Bootstrap 插件
- bootstrap v3学习笔记之JavaScript插件
- 20161019 bootstrap中javascript插件 学习记录
- bootstrap学习30--javascript插件--modal dialog
- Bootstrap学习笔记(八) Bootstrap支持的JavaScript插件
- BootStrap JavaScript插件-模态框
- bootstrap:javascript插件架构
- bootstrap导入JavaScript插件
- Bootstrap javascript插件 模态框
- Bootstrap的JavaScript插件
- bootstrap学习29---javascript插件之引用的注意事项
- Bootstrap(七) Bootstrap支持的JavaScript插件
- bootstrap插件学习地址
- Bootstrap学习:插件概览
- bootstrap-fileinput插件学习
- bootstrap(支持的JavaScript插件)
- OSI七层模型与TCP/IP五层模型
- 苹果iPhone 3G比。的LG KU990 Viewty产品 - 是的Viewty真的优于iPhone 3G的
- 关于ALT+/快捷键的提示问题
- 回调函数及其在C语言中的使用
- 回顾:1.htm中get和post请求方法的区别
- bootstrap学习——javascript插件篇
- A+B for Input-Output Practice (IV)
- 蓝牙用例
- 应用服务器-tomcat内存设置问题
- Python学习26:类属性vs实例属性
- How many Fibs?(高精度)
- C/C++回调函数
- 聘请的Java开发人员利用Java程序设计需求
- 1124:成语接龙 dfs+一维数组保存结果