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

前端之家收集整理的这篇文章主要介绍了Bootstrap每天必学之响应式导航、轮播图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

基本导航组件+响应式:

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

  • $('#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程序设计有所帮助。

    原文链接:https://www.f2er.com/bootstrap/49183.html

    猜你在找的Bootstrap相关文章