diff options
Diffstat (limited to 'docs/examples/navbars')
| -rw-r--r-- | docs/examples/navbars/index.html | 223 |
1 files changed, 190 insertions, 33 deletions
diff --git a/docs/examples/navbars/index.html b/docs/examples/navbars/index.html index 9d3e9bd8c..056213e35 100644 --- a/docs/examples/navbars/index.html +++ b/docs/examples/navbars/index.html @@ -18,13 +18,13 @@ <body> - <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-inverse bg-inverse"> + <a class="navbar-brand" href="#">Never expand</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> - <a class="navbar-brand" href="#">Navbar</a> - <div class="collapse navbar-collapse" id="navbarsExampleDefault"> + <div class="collapse navbar-collapse" id="navbarsExample01"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> @@ -45,20 +45,179 @@ </li> </ul> <form class="form-inline my-2 my-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> - <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + <input class="form-control" type="text" placeholder="Search"> </form> </div> </nav> - <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> + <nav class="navbar navbar-expand navbar-inverse bg-inverse"> + <a class="navbar-brand" href="#">Expand</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarsExample02"> + <ul class="navbar-nav mr-auto"> + <li class="nav-item active"> + <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown02"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </li> + </ul> + <form class="form-inline my-2 my-md-0"> + <input class="form-control" type="text" placeholder="Search"> + </form> + </div> + </nav> + + <nav class="navbar navbar-expand-sm navbar-inverse bg-inverse"> + <a class="navbar-brand" href="#">Expand at sm</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarsExample03"> + <ul class="navbar-nav mr-auto"> + <li class="nav-item active"> + <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown03"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </li> + </ul> + <form class="form-inline my-2 my-md-0"> + <input class="form-control" type="text" placeholder="Search"> + </form> + </div> + </nav> + + <nav class="navbar navbar-expand-md navbar-inverse bg-inverse"> + <a class="navbar-brand" href="#">Expand at md</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarsExample04"> + <ul class="navbar-nav mr-auto"> + <li class="nav-item active"> + <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown04"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </li> + </ul> + <form class="form-inline my-2 my-md-0"> + <input class="form-control" type="text" placeholder="Search"> + </form> + </div> + </nav> + + <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse"> + <a class="navbar-brand" href="#">Expand at lg</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarsExample05"> + <ul class="navbar-nav mr-auto"> + <li class="nav-item active"> + <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown05" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown05"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </li> + </ul> + <form class="form-inline my-2 my-md-0"> + <input class="form-control" type="text" placeholder="Search"> + </form> + </div> + </nav> + + <nav class="navbar navbar-expand-xl navbar-inverse bg-inverse"> + <a class="navbar-brand" href="#">Expand at xl</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarsExample06"> + <ul class="navbar-nav mr-auto"> + <li class="nav-item active"> + <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled" href="#">Disabled</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown06"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </li> + </ul> + <form class="form-inline my-2 my-md-0"> + <input class="form-control" type="text" placeholder="Search"> + </form> + </div> + </nav> + + <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse"> <div class="container"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation"> + <a class="navbar-brand" href="#">Container</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> - <a class="navbar-brand" href="#">Container</a> - <div class="collapse navbar-collapse" id="navbarsExampleContainer"> + <div class="collapse navbar-collapse" id="navbarsExample07"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> @@ -70,8 +229,8 @@ <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown02"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown07" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown07"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> @@ -79,19 +238,18 @@ </li> </ul> <form class="form-inline my-2 my-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> - <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + <input class="form-control" type="text" placeholder="Search"> </form> </div> </div> </nav> - <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse"> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> - <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExampleCenteredNav"> + <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a> @@ -103,8 +261,8 @@ <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown03"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown08" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown08"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> @@ -115,13 +273,13 @@ </nav> <div class="container"> - <nav class="navbar navbar-light bg-faded rounded navbar-toggleable-md"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-lg navbar-light bg-faded rounded"> + <a class="navbar-brand" href="#">Navbar</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> - <a class="navbar-brand" href="#">Navbar</a> - <div class="collapse navbar-collapse" id="containerNavbar"> + <div class="collapse navbar-collapse" id="navbarsExample09"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> @@ -133,8 +291,8 @@ <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown04"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown09"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> @@ -142,18 +300,17 @@ </li> </ul> <form class="form-inline my-2 my-md-0"> - <input class="form-control mr-sm-2" type="text" placeholder="Search"> - <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + <input class="form-control" type="text" placeholder="Search"> </form> </div> </nav> - <nav class="navbar navbar-light bg-faded rounded navbar-toggleable-md"> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#containerNavbarCenter" aria-controls="containerNavbarCenter" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-lg navbar-light bg-faded rounded"> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> - <div class="collapse navbar-collapse justify-content-md-center" id="containerNavbarCenter"> + <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a> @@ -165,8 +322,8 @@ <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown05" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu" aria-labelledby="dropdown05"> + <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> + <div class="dropdown-menu" aria-labelledby="dropdown10"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> @@ -192,7 +349,7 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> + <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="../../dist/js/bootstrap.min.js"></script> |