bootstrap常用組件之頭部導航實現(xiàn)代碼
更新時間:2017年04月20日 08:45:31 作者:web_zhuo
這篇文章主要介紹了bootstrap常用組件之頭部導航實現(xiàn)代碼,然后對個別常用屬性進行了解釋,需要的的朋友參考下吧
以下是頭部導航的代碼,我只簡要的對個別常用屬性進行解釋
總效果如圖所示:
代碼如下:
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top"> //navbar-inverse 設置背景 //navbar-fixed-top 設置頭部固定在頂部,因此需要給body設置頂部padding,一般設置為padding-top:60px <div class="Container-fluid"> //container-fluid設置導航條內(nèi)容是否有一定的內(nèi)間距,如果class="container-fluid"則沒有內(nèi)間距,內(nèi)容緊貼左側 //如果設置class="container",則內(nèi)容有一定的內(nèi)間距,內(nèi)容對稱居中 <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> //這里是響應式的寫法,在小屏幕上回顯示三桿,無需改動 <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >某管理系統(tǒng)</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁 <span class="sr-only">(current)</span></a></li> <li class="dropdown"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能 <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="dropdown-header" >業(yè)務功能</li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息建立</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息查詢</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息管理</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header" >系統(tǒng)功能</li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >設置</a></li> <li role="separator" class="divider"></li> </ul> </li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >幫助</a></li> </ul> <form class="navbar-form navbar-left pull-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="username..."> <input type="password" class="form-control" placeholder="password..."> </div> <button type="submit" class="btn btn-default">Login</button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
您可能感興趣的文章:
相關文章
微信小程序?qū)崿F(xiàn)發(fā)送驗證碼按鈕效果
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)發(fā)送驗證碼按鈕效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12使用layui實現(xiàn)的左側菜單欄以及動態(tài)操作tab項方法
今天小編就為大家分享一篇使用layui實現(xiàn)的左側菜單欄以及動態(tài)操作tab項方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript和jquery獲取父級元素、子級元素、兄弟元素的方法
本文給大家簡單總結了下JavaScript和jquery獲取父級元素、子級元素、兄弟元素的方法,非常的簡單實用,有需要的小伙伴可以參考下2016-06-06JavaScript語句錯誤throw、try及catch實例解析
這篇文章主要介紹了JavaScript語句錯誤throw、try及catch實例解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08JS實現(xiàn)的系統(tǒng)調(diào)色板完整實例
這篇文章主要介紹了JS實現(xiàn)的系統(tǒng)調(diào)色板,結合完整實例形式分析了js實現(xiàn)調(diào)色板效果的具體步驟與實現(xiàn)技巧,涉及js數(shù)值計算與頁面元素操作的方法,需要的朋友可以參考下2016-12-12js操縱跨frame的聯(lián)動select下拉選項實例介紹
運用HTML、CSS以及Javascript相關知識,編寫多窗口多菜單的內(nèi)容聯(lián)動,具體思路及代碼如下,感興趣的朋友可以參考下哈,希望大家有所幫助2013-05-05