作者:巡山小妖 | 来源:互联网 | 2018-06-20 08:28
本节课前一节我们开始设计第一个项目, 一个内训公司的企业网站, 本节课学习响应式导航部分。
基本导航组件+响应式:
//基本导航组件+响应式
后一节我们要在导航条的下方做一张轮播图,自动播放最新的重要动态。
//响应式轮播图
‹
›
//所需要的 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程序设计有所帮助。