Bootstrap4的四種導航欄樣式
阿新 • • 發佈：2021-07-30
<!DOCTYPE html> <html> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body style="height:1500px"> <nav class="navbar navbar-expand-md navbar-dark bg-dark"> <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Left</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> <div class="mx-auto order-0"> <a class="navbar-brand mx-auto" href="#">Navbar 2</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2"> <span class="navbar-toggler-icon"></span> </button> </div> <div class="navbar-collapse collapse w-100 order-3 dual-collapse2"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Right</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav> <br/> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0"> <ul class="navbar-nav ml-auto text-center"> <li class="nav-item active"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> <div class="mx-auto my-2 order-0 order-md-1 position-relative"> <a class="mx-auto" href="#"> <img src="https://www.baidu.com/favicon.ico" class="rounded-circle" width="25px" height="25px"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2"> <span class="navbar-toggler-icon"></span> </button> </div> <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2"> <ul class="navbar-nav mr-auto text-center"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav> <br/> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <div class="collapse navbar-collapse order-last order-lg-first" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> </nav> <br/> <!--Default--> <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-auto"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="https://www.baidu.com/favicon.ico" alt="" width="36" height="36" style="border-radius: 50px" > </a> <a class="navbar-brand" href="/">APP_NAME</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link2</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Link3</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 3.1</a> <a class="dropdown-item" href="#">Link 3.2</a> <a class="dropdown-item" href="#">Link 3.3</a> </div> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="btn btn-outline-light">按鈕</a> </li> </ul> </div> </div> </nav> <hr/> <div class="container" style="margin-top:10px"> <h3>test</h3> </div> </body> </html>