Bootstrap每天必学之响应式导航、轮播图_

1、Bootstrap每天必学之响应式导航、轮播图_ Bootstrap每天必学之响应式导航、轮播图,本文的主要内容是在导航条的下方做一张轮播图，自动播放最新的重要动态，感爱好的小伙伴们可以参考一下 本节课前一节我们开头设计第一个项目， 一个内训公司的企业网站， 本节课学习响应式导航部分。 基本导航组件+响应式： /基本导航组件+响应式 nav class=navbar navbar-default navbar-fixed-top div class=container div class=navbar-header a href=# class=navbar-brand style=margi

2、n:0;padding:0;img src=img/logo.png alt=瓢城企训网/a button type=button class=navbar-toggle data-toggle=collapse data-target=#navbar-collapse span class=sr-only切换导航/span span class=icon-bar/span span class=icon-bar/span span class=icon-bar/span /button /div div class=collapse navbar-collapse id=navbar-col

3、lapse ul class=nav navbar-nav navbar-right style=margin-top:0; li class=active a href=#span class=glyphiconglyphicon-home/span 首页/a /li li a href=#span class=glyphicon glyphicon-list/span 资讯/a /li li a href=#span class=glyphicon glyphicon-fire/span 案例/a /li li a href=#span class=glyphicon glyphicon-

4、question-sign/span 关于/a /li /ul /div /div /nav 后一节我们要在导航条的下方做一张轮播图，自动播放最新的重要动态。 /响应式轮播图 div id=myCarousel class=carousel slide ol class=carousel-indicators li data-target=#myCarousel data-slide-to=0 class=active/li li data-target=#myCarousel data-slide-to=1/li li data-target=#myCarousel data-slide-t

5、o=2/li /ol div class=carousel-inner div class=item active style=background:#223240; a href=#img src=img/slide1.png alt=第一张/a /div div class=item style=background:#F5E4DC; a href=#img src=img/slide2.png alt=其次张/a /div div class=item style=background:#DE2A2D; a href=#img src=img/slide3.png alt=第三张/a /

6、div /div a href=#myCarousel data-slide=prev class=carousel-controlleft/a a href=#myCarousel data-slide=next class=carousel-controlright/a /div - /所需要的 jQuery 掌握 $(#myCarousel).carousel( /设置自动播放/2 秒 interval : 3000, ); /调整轮播器箭头位置 $(.carousel-control).css(line-height, $(.carousel-innerimg).height() +

7、px); $(window).resize(function() var $height = $(.carousel-inner img).eq(0).height() | $(.carousel-inner img).eq(1).height() | $(.carousel-inner img).eq(2).height(); $(.carousel-control).css(line-height, $height + px); ); - /所需要的 CSS a:focus outline: none; .navbar-brand padding: 0; #myCarousel margin: 50px 0 0 0; .carou