Bootstrap每天必学之响应式导航、轮播图_javascript技巧-js教程-PHP中文网

本节课前一节我们开始设计第一个项目，一个内训公司的企业网站，本节课学习响应式导航部分。

基本导航组件+响应式：

//基本导航组件+响应式

 
 
 
 
 
 
 
 
   首页
 
 
   资讯
 
 
   案例
 
 
   关于

登录后复制

后一节我们要在导航条的下方做一张轮播图，自动播放最新的重要动态。

//响应式轮播图

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ‹
 ›

登录后复制

//所需要的 jQuery 控制

$('#myCarousel').carousel({
 //设置自动播放/2 秒
 interval : 3000,
}); 
//调整轮播器箭头位置

$('.carousel-control').css('line-height', $('.carousel-innerimg').height() + '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;
}
.carousel-inner .item img {
 margin: 0 auto;
}
.carousel-control {
 font-size: 100px;
}

登录后复制

更多内容可以参考：Bootstrap学习教程

以上就是本文的全部内容，希望对大家学习Bootstrap程序设计有所帮助。