微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

基本导航组件+响应式:

rush:xhtml;"> //基本导航组件+响应式

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

rush:xhtml;"> //响应式轮播图
$('#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');
});

如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题:

插件使用教程

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐