您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“angularjs+bootstrap菜單怎么用”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“angularjs+bootstrap菜單怎么用”這篇文章吧。
需求背景:
使用yo angular生成的項目默認主頁是這樣的:
body部分涉及具體的業(yè)務(wù)內(nèi)容,后續(xù)研究。這里主要研究菜單項、頁眉的處理。
頁腳處理:
自動生成的項目中,菜單和頁腳設(shè)置都是在index.html文件中實現(xiàn)的。
# index.html <div class="footer"> <div class="container"> <p><span class="glyphicon glyphicon-heart"></span> 京東金融·杭州研發(fā)中心</p> </div> </div>
設(shè)置css格式:
/* Custom page footer */ .footer { padding-top: 20px; color: rgba(204, 3, 8, 0.91); border-top: 1px solid #e5e5e5; text-align: center; } .container { max-width: 730px; margin-left: auto; margin-right: auto; }
上述截圖還可見頁面格式問題,是因為創(chuàng)建工程時,沒有依賴bootstrap還有compass,項目根目錄下安裝相關(guān)依賴即可:
bower install compass --save bower install bootstrap --save
菜單處理:
菜單功能主要在index.html文件中的header代碼段實現(xiàn)。
<div class="header"> <div class="menu"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <!--![](images/jdjr.jpg)--> </div> <div class="collapse navbar-collapse" id=""> <ul class="nav navbar-nav"> <li class="active dropdown"> <a class="dropdown-toggle" href="#" rel="external nofollow" data-toggle="dropdown">網(wǎng)關(guān)信息</a> <ul class="dropdown-menu"> <li><a href="">NAT網(wǎng)關(guān)</a></li> <li><a href="">ROUTER網(wǎng)關(guān)</a></li> </ul> </li> </ul> </div> </nav> </div> </div>
這些class設(shè)置了默認屬性,所以能夠呈現(xiàn)出較為友好的樣式,所以如果使用自定義類名,那樣式需要自己設(shè)置。如果需要鼠標移動到菜單上就能夠顯示子菜單,則需要設(shè)置css屬性。
.dropdown:hover .dropdown-menu { display: block; }
菜單增加跳轉(zhuǎn):
菜單的跳轉(zhuǎn)主要通過href實現(xiàn),如下代碼就是操作日志菜單跳轉(zhuǎn)到/oplog頁面:
<li><a href="#!/oplog" rel="external nofollow" >操作日志</a></li>
然后需要在app.js中增加相關(guān)控制代碼:
.when('/oplog', { templateUrl: 'views/about.html', controller: 'AboutCtrl', controllerAs: 'about' })
由于這里我重用了項目初始化時就生成的about.html代碼,所以,不需要開發(fā)相關(guān)html文件,實際開發(fā)中這個跳轉(zhuǎn)后的網(wǎng)頁是需要自己在views目錄下創(chuàng)建并開發(fā)頁面的,同時需要在controllers目錄下開發(fā)相關(guān)控制(此處就為AboutCtrl.js)代碼。
菜單效果:
以上是“angularjs+bootstrap菜單怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。