Bootstrap每天必学之响应式导航、轮播图
本节课前一节我们开始设计第一个项目，一个内训公司的企业网站，本节课学习响应式导航部分。
基本导航组件+响应式：
//基本导航组件+响应式 <navclass="navbarnavbar-defaultnavbar-fixed-top"> <divclass="container"> <divclass="navbar-header"> <ahref="#"class="navbar-brand" style="margin:0;padding:0;"><imgsrc="img/logo.png"alt="瓢城企训网"></a> <buttontype="button"class="navbar-toggle" data-toggle="collapse"data-target="#navbar-collapse"> <spanclass="sr-only">切换导航</span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> </div> <divclass="collapsenavbar-collapse"id="navbar-collapse"> <ulclass="navnavbar-navnavbar-right" style="margin-top:0;"> <liclass="active"> <ahref="#"><spanclass="glyphiconglyphicon-home"></span>首页</a> </li> <li> <ahref="#"><spanclass="glyphicon glyphicon-list"></span>资讯</a> </li> <li> <ahref="#"><spanclass="glyphicon glyphicon-fire"></span>案例</a> </li> <li> <ahref="#"><spanclass="glyphicon glyphicon-question-sign"></span>关于</a> </li> </ul> </div> </div> </nav>
后一节我们要在导航条的下方做一张轮播图，自动播放最新的重要动态。
//响应式轮播图 <divid="myCarousel"class="carouselslide"> <olclass="carousel-indicators"> <lidata-target="#myCarousel"data-slide-to="0" class="active"></li> <lidata-target="#myCarousel"data-slide-to="1"></li> <lidata-target="#myCarousel"data-slide-to="2"></li> </ol> <divclass="carousel-inner"> <divclass="itemactive"style="background:#223240;"> <ahref="#"><imgsrc="img/slide1.png"alt="第一张"></a> </div> <divclass="item"style="background:#F5E4DC;"> <ahref="#"><imgsrc="img/slide2.png"alt="第二张"></a> </div> <divclass="item"style="background:#DE2A2D;"> <ahref="#"><imgsrc="img/slide3.png"alt="第三张"></a> </div> </div> <ahref="#myCarousel"data-slide="prev"class="carousel-controlleft">‹</a> <ahref="#myCarousel"data-slide="next"class="carousel-controlright">›</a> </div>
//所需要的jQuery控制
$('#myCarousel').carousel({
//设置自动播放/2秒
interval:3000,
});
//调整轮播器箭头位置
$('.carousel-control').css('line-height',$('.carousel-innerimg').height()+'px');
$(window).resize(function(){
var$height=$('.carousel-innerimg').eq(0).height()||$('.carousel-innerimg').eq(1).height()||$('.carousel-innerimg').eq(2).height();
$('.carousel-control').css('line-height',$height+'px');
});
//所需要的CSS
a:focus{
outline:none;
}
.navbar-brand{
padding:0;
}
#myCarousel{
margin:50px000;
}
.carousel-inner.itemimg{
margin:0auto;
}
.carousel-control{
font-size:100px;
}
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家学习Bootstrap程序设计有所帮助。