Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
本節(jié)課前一節(jié)我們開(kāi)始設(shè)計(jì)第一個(gè)項(xiàng)目, 一個(gè)內(nèi)訓(xùn)公司的企業(yè)網(wǎng)站, 本節(jié)課學(xué)習(xí)響應(yīng)式導(dǎo)航部分。
基本導(dǎo)航組件+響應(yīng)式:
//基本導(dǎo)航組件+響應(yīng)式 <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand" style="margin:0;padding:0;"><img src="img/logo.png" alt="瓢城企訓(xùn)網(wǎng)"></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">切換導(dǎo)航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right" style="margin-top:0;"> <li class="active"> <a href="#"><span class="glyphiconglyphicon-home"></span> 首頁(yè)</a> </li> <li> <a href="#"><span class="glyphicon glyphicon-list"></span> 資訊</a> </li> <li> <a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a> </li> <li> <a href="#"><span class="glyphicon glyphicon-question-sign"></span> 關(guān)于</a> </li> </ul> </div> </div> </nav>
后一節(jié)我們要在導(dǎo)航條的下方做一張輪播圖,自動(dòng)播放最新的重要?jiǎng)討B(tài)。
//響應(yīng)式輪播圖 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active" style="background:#223240;"> <a href="#"><img src="img/slide1.png" alt="第一張"></a> </div> <div class="item" style="background:#F5E4DC;"> <a href="#"><img src="img/slide2.png" alt="第二張"></a> </div> <div class="item" style="background:#DE2A2D;"> <a href="#"><img src="img/slide3.png" alt="第三張"></a> </div> </div> <a href="#myCarousel" data-slide="prev" class="carousel-controlleft">‹</a> <a href="#myCarousel" data-slide="next" class="carousel-controlright">›</a> </div>
//所需要的 jQuery 控制 $('#myCarousel').carousel({ //設(shè)置自動(dòng)播放/2 秒 interval : 3000, }); //調(diào)整輪播器箭頭位置 $('.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; }
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)Bootstrap程序設(shè)計(jì)有所幫助。
- BootStrap實(shí)現(xiàn)手機(jī)端輪播圖左右滑動(dòng)事件
- Bootstrap幻燈片輪播圖支持觸屏左右手勢(shì)滑動(dòng)的實(shí)現(xiàn)方法
- Bootstrap開(kāi)發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖
- 使用BootStrap建立響應(yīng)式網(wǎng)頁(yè)——通欄輪播圖(carousel)
- 利用BootStrap的Carousel.js實(shí)現(xiàn)輪播圖動(dòng)畫(huà)效果
- BootStrap實(shí)現(xiàn)輪播圖效果(收藏)
- 在bootstrap中實(shí)現(xiàn)輪播圖實(shí)例代碼
- Bootstrap實(shí)現(xiàn)基于carousel.js框架的輪播圖效果
- bootstrap輪播圖示例代碼分享
- bootstrap實(shí)現(xiàn)輪播圖效果
相關(guān)文章
淺談javascript函數(shù)劫持[轉(zhuǎn)自xfocus]
javascript函數(shù)劫持,也就是老外提到的javascript hijacking技術(shù)。最早還是和劍心同學(xué)討論問(wèn)題時(shí)偶然看到的一段代碼2008-02-02layui-table表復(fù)選框勾選的所有行數(shù)據(jù)獲取的例子
今天小編就為大家分享一篇layui-table表復(fù)選框勾選的所有行數(shù)據(jù)獲取的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09基于JavaScript實(shí)現(xiàn)帶縮略圖的輪播效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)帶縮略圖的輪播效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01詳解GoJs節(jié)點(diǎn)的折疊展開(kāi)實(shí)現(xiàn)
這篇文章主要為大家介紹了GoJs節(jié)點(diǎn)的折疊展開(kāi)實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05JavaScript 動(dòng)態(tài)創(chuàng)建VML的方法
JavaScript 動(dòng)態(tài)創(chuàng)建VML的方法,需要的朋友可以參考下。2009-10-10MUI 實(shí)現(xiàn)側(cè)滑菜單及其主體部分上下滑動(dòng)的方法
下面小編就為大家分享一篇MUI 實(shí)現(xiàn)側(cè)滑菜單及其主體部分上下滑動(dòng)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01表格展示利器 Bootstrap Table實(shí)例代碼
在表格導(dǎo)出數(shù)據(jù)中,發(fā)現(xiàn)設(shè)置了分頁(yè)參數(shù),導(dǎo)出的數(shù)據(jù)僅為表格加載的分頁(yè)參數(shù)數(shù)據(jù),于是,針對(duì)這樣的情況,通過(guò)設(shè)置分頁(yè)參數(shù)的值,使表格可以加載更多的數(shù)據(jù),可達(dá)到導(dǎo)出所有數(shù)據(jù)的功能需求。下面通過(guò)本文給大家分享表格展示利器 Bootstrap Table2017-09-09