bootstrap完整導航欄

2023-08-09 18:41:25 分類：首頁閱讀(8316)

效果圖：

代碼：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="bootstrap-3.3.6-dist/js/jquery-1.11.2.min.js"></script><link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"><script src="bootstrap-3.3.6-dist/js/bootstrap.js"></script><style>body{     padding-top: 70px;}</style></head><body>//添加navbar-fixed-top可以讓導航條一直固定在頂部，整導不會因為滾動條改變而改變，航欄navbar-inverse讓導航條黑底展示

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
　　<div class="container">　　//container讓導航條居中container-fluid讓導航條自適應


　　
　　　　<div class="navbar-header">

　　　　　　//粉色字體代表響應式布局：當瀏覽器寬度小于某個值時導航欄折疊變成三道杠            <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" type="button">                <span class="sr-only">看看這是整導什么</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>            </button>       //綠色代表導航欄左側logo或者圖標    
　　　　 　　<a class="navbar-brand" href="www.baidu.com">瀏覽器博物館</a>        </div>
　　　　//棕色包裹項目是導航條內容，為了響應式布局，航欄點擊三道杠彈出導航欄        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">           
　　　　　　　　//紫色代表導航欄中的整導項目
　　　　　　 <ul class="nav navbar-nav">                <li><a href="www.baidu.com">綜述</a></li>                <li>//藍色為下拉菜單                    <a class="dropdown-toggle" data-toggle="dropdown" href="www.baidu.com">簡述<span class="caret"></span></a>                    <ul class="dropdown-menu" role="menu">                        <li><a href="#">谷歌瀏覽器</a></li>                        <li><a href="#">IE瀏覽器</a></li>                        <li><a href="#">360瀏覽器</a></li>                        <li><a href="#">谷歌火狐瀏覽器</a></li>                    </ul>
　　　　　　　　　　</li>                <li><a href="www.baidu.com">特點</a></li>                <li><a href="www.baidu.com">關于</a></li>            </ul>        </div>    </div></nav><p>dsaf3ewqrfdsaf </p><p>dsafdhtetf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p><p>dsafdsaf saf </p></body></html>

作者：怪咖咖
來源鏈接：https://www.cnblogs.com/shark1100913/p/5678950.html

贊(93821)

未經允許不得轉載：>貴州網站建設公司 » bootstrap完整導航欄