使用Bootstrap制作导航栏
生活随笔
收集整理的這篇文章主要介紹了
使用Bootstrap制作导航栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
廢話不多說，直接上代碼。
<body ><!--若采用浮動，則需要加style="padding-top: 60px;"--><nav class="navbar navbar-default navbar-static-top"><!--navbar navbar-default:首先聲明是一個導航欄，然后聲明用導航欄的default樣式可以通過navbar-default、navbar-inverse，navbar-collapse等為導航欄設置整體樣式navbar-fixed-top,將導航欄浮動 navbar-static-top，將導航欄固定更多搭配，自行配置！--><div class="container"><a href="#" class="navbar-brand"><img src="img/logo.png" style="width: 50px; height: 30px;"></a><!-- logo位置，href是網站首頁的地址 --><div class="navbar-header"><!-- 設置為 頭部文件--><button class="navbar-toggle" data-toggle= "collapse" data-tatget"#zhankai-btn"><!--navbar-toggle:首先聲明一個，折疊按鈕.data-toggle:聲明打開對象collapse：聲明打開方法：折疊data-tatget:聲明目標對象，這里根據id做關聯 該折疊功能，存在js版本，js加載的順序，瀏覽器等原因，點擊失效的問題--><span>>>></span></button></div><div class="collapse navbar-collapse" id="zhankai-btn"><!-- collapse navbar-collapse：定義一個根據不同屏幕可以折疊的導航欄將可以折疊的內容，放于折疊容器中--><ul class="nav navbar-nav"><!--nav navbar-nav:首先聲明是一個導航內容，然后聲明該內容屬于navbar --><li class="active"><a href="#">首頁</a></li><!--active為當前激活狀態 --><li><a href="#">視頻</a></li><li><a href="#">圖片</a></li><li><a href="#">文章</a></li><li><a href="#">教程</a></li><li><a href="#">關于</a></li><li><a href="#">下載</a></li><li><a href="#">家園</a></li></ul><form class="navbar-form navbar-left" name="" action="" onsubmit="return XXXX"><!-- 按照現實中的情況制作一個搜索框navbar-form:聲明這是一個導航欄中的form表單,navbar-left左對齊--><input type="text" placeholder="請輸入查找的內容" class="form-control"/><button type="submit"><span class="glyphicon glyphicon-search"></span><!--glyphicon glyphicon-search:先聲明使用Bootstrap圖標，然后聲明使用搜索圖標 --></button></form><a href="#" class="btn navbar-btn btn-primary btn-xs navbar-right">現在報名</a><ul class="nav navbar-nav navbar-right"><li><a href="#">登錄</a></li><li><a href="#">注冊</a></li></ul></div></div></nav><div class="container alert-danger"><!--alert-danger給該div一個醒目色塊--><h3>網站內容可以柵格布局</h3><p>以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！</p> </div> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> </body>演示效果：
轉載于:https://blog.51cto.com/13479739/2151310
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的使用Bootstrap制作导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
