Bootstrap每天必学之响应式导航、轮播图_javascript技巧
程序员文章站
2022-03-15 12:27:35
...
本节课前一节我们开始设计第一个项目, 一个内训公司的企业网站, 本节课学习响应式导航部分。
基本导航组件+响应式:
//基本导航组件+响应式
后一节我们要在导航条的下方做一张轮播图,自动播放最新的重要动态。
//响应式轮播图
//所需要的 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程序设计有所帮助。
下一篇: HTML5最受欢迎的十个响应式框架
推荐阅读
-
Bootstrap每天必学之导航_javascript技巧
-
Bootstrap每天必学之导航组件_javascript技巧
-
Bootstrap每天必学之轮播(Carousel)插件_javascript技巧
-
Bootstrap每天必学之附加导航(Affix)插件_javascript技巧
-
Bootstrap每天必学之轮播(Carousel)插件_javascript技巧
-
Bootstrap每天必学之导航条(二)_javascript技巧
-
Bootstrap每天必学之导航条_javascript技巧
-
Bootstrap每天必学之导航组件_javascript技巧
-
Bootstrap每天必学之导航条(二)_javascript技巧
-
Bootstrap每天必学之导航条_javascript技巧