免费的情话微信小程序_学习使用bootstrap的modal和

摘要: 学习培训应用bootstrap的modal和carousel 本文关键教大伙儿学好用bootstrap的modal和carousel,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下bootstrap架构出示了许多功能强大...

学习使用bootstrap的modal和carousel       这篇文章主要教大家学会用bootstrap的modal和carousel,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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 
 div 
 h4 Modal Example /h2 
 !-- Trigger the modal with a button -- 
 img data-toggle="modal" data-target="#myModal" src="../../asset/images/p1.jpg" alt="" 
 h4 花 /h4 
 /div 
 /div 
 !-- Modal -- 
 div id="myModal" role="dialog" 
 div 
 !-- Modal content-- 
 div 
 div 
 button type="button" data-dismiss="modal" times; /button 
 h4 Modal /h4 
 /div 
 div 
 img src="../../asset/images/p1.jpg" alt="" 
 div 红花娇艳 /div 
 /div 
 div 
 button type="button" 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 
 div id="myCarousel" data-ride="carousel" 
 !-- Indicators -- 
 li data-target="#myCarousel" data-slide-to="0" /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 role="listbox" 
 div 
 img src="../../asset/images/p1.jpg" alt="花" width="460" height="345" 
 div 
 h3 花 /h3 
 p 红花娇艳 /p 
 /div 
 /div 
 div 
 img src="../../asset/images/p2.jpg" alt="树" width="460" height="345" 
 div 
 h3 树 /h3 
 p 大木苍翠 /p 
 /div 
 /div 
 div 
 img src="../../asset/images/p3.jpg" alt="海" width="460" height="345" 
 div 
 h3 海 /h3 
 p 海浪汹涌 /p 
 /div 
 /div 
 div 
 img src="../../asset/images/p4.jpg" alt="湖" width="460" height="345" 
 div 
 h3 湖 /h3 
 p 晚湖静美 /p 
 /div 
 /div 
 /div 
 !-- Left and right controls -- 
 a href="#myCarousel" role="button" data-slide="prev" 
 span aria-hidden="true" /span 
 span Previous /span 
 a href="#myCarousel" role="button" data-slide="next" 
 span aria-hidden="true" /span 
 span Next /span 
 /div 
 /div 
 /body 
 /html 

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

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

参考:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:电商网站