BootStrap-CSS樣式_佈局元件_固定導航欄(頂部底部靜態麵包屑導航)
阿新 • • 發佈：2019-01-01
固定導航欄
Bootstrap 導航欄可以動態定位。預設情況下，它是塊級元素，它是基於在 HTML 中放置的 位置定位的。通過一些幫助器類，您可以把它放置在頁面的頂部或者底部，或者您可以讓它成為 隨著頁面一起滾動的靜態導航欄。為了防止導航欄與頁面主體中的其他內容的頂部相交錯，請向 <body> 標籤新增至少 50 像 素的內邊距（padding），內邊距的值可以根據您的需要進行設定。
固定到頂部
如果您想要讓導航欄固定在頁面的頂部，請向 .navbar class 新增 class .navbar-fixed-top。
固定到底部
如果您想要讓導航欄固定在頁面的底部，請向 .navbar class 新增 class .navbar-fixed-bottom。
靜態的頂部
如需建立能隨著頁面一起滾動的導航欄，請新增 .navbar-static-top class。該 class 不要求向 <body> 新增內邊距（padding）。
navbar-inverse樣式：設定黑底白字樣式的導航欄
breadcrumb樣式：設定麵包屑導航欄
程式碼例項：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>固定導航欄</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body style="padding:50px;"> <h2>8. 固定到頂部的導航欄</h2> <!-- navbar-fixed-top樣式：設定固定頂部導航欄 --> <div class="container" style="padding:40px"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#"> 固定到頂部的導航欄</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-nav" > <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="my-nav" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">.NET</a> </li> <li><a href="#">PHP</a> </li> <li><a href="#">HTML5</a> </li> <li><a href="#">Java</a> </li> </ul> </div> </nav> </div> <h2>9. 固定到底部的導航欄</h2> <!-- navbar-fixed-bottom樣式：設定固定底部導航欄 --> <div class="container" style="padding:40px"> <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">固定到底部的導航欄</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-nav1" > <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="my-nav1" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">.NET</a> </li> <li><a href="#">PHP</a> </li> <li><a href="#">HTML5</a> </li> <li><a href="#">Java</a> </li> </ul> </div> </nav> </div> <h2>10. 靜態固定到頂部的導航欄</h2> <!-- navbar-static-top樣式：設定靜態導航欄 --> <div class="container" style="padding:40px"> <nav class="navbar navbar-default navbar-static-top " role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">靜態固定到頂部的導航欄</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">.NET</a> </li> <li><a href="#">PHP</a> </li> <li><a href="#">HTML5</a> </li> <li><a href="#">Java</a> </li> </ul> </div> </nav> </div> <h2>11. 設定黑底白字樣式的導航欄</h2> <!-- navbar-inverse樣式：設定黑底白字樣式的導航欄 --> <div class="container" style="padding:40px"> <nav class="navbar navbar-default navbar-inverse " role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">黑底白字導航欄</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">.NET</a> </li> <li><a href="#">PHP</a> </li> <li><a href="#">HTML5</a> </li> <li><a href="#">Java</a> </li> </ul> </div> </nav> </div> <h2>12. 麵包屑導航欄</h2> <!-- breadcrumb樣式：設定麵包屑導航欄 --> <ol class="breadcrumb"> <li><a href="#">程式設計</a></li> <li><a href="#">Java語言</a></li> <li><a href="#">JSP</a></li> </ol> <script src="../js/jquery-1.11.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> </body> </html>
顯示效果：
頁面縮小後：
