diff options
| author | Mark Otto <[email protected]> | 2016-12-21 12:27:18 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-22 13:48:07 -0800 |
| commit | 18453f06f9c7a3dddfc5b12ee299076083835cac (patch) | |
| tree | aee461d223590c3ec72ac9e320e5920e50616c96 /docs | |
| parent | 4a06c9802702fabee7fe0f01a89842d6a276de7d (diff) | |
| download | bootstrap-18453f06f9c7a3dddfc5b12ee299076083835cac.tar.xz bootstrap-18453f06f9c7a3dddfc5b12ee299076083835cac.zip | |
flexbox this thing
- drop the table styles, use flex
- remove commented out code
- consolidate styles a bit
- add a huge flex-grow to the nav, making the assumption you want nav to take up most space
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/examples/navbar/all-navbars.html | 53 |
1 files changed, 10 insertions, 43 deletions
diff --git a/docs/examples/navbar/all-navbars.html b/docs/examples/navbar/all-navbars.html index 61ad5f739..864d95c40 100644 --- a/docs/examples/navbar/all-navbars.html +++ b/docs/examples/navbar/all-navbars.html @@ -22,10 +22,8 @@ <nav class="navbar navbar-dark bg-inverse"> <div class="navbar-container"> - <div class="navbar-item"> - <a class="navbar-brand" href="#">Default</a> - </div> - <ul class="navbar-item nav navbar-nav"> + <a class="navbar-brand" href="#">Default</a> + <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -39,7 +37,7 @@ <a class="nav-link" href="#">About</a> </li> </ul> - <form class="navbar-item form-inline text-md-right"> + <form class="form-inline text-md-right"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button> </form> @@ -48,13 +46,11 @@ <nav class="navbar navbar-dark bg-inverse"> <div class="navbar-container"> - <div class="navbar-item"> - <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> - <a class="navbar-brand" href="#">Responsive</a> - </div> + <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> + <a class="navbar-brand" href="#">Responsive</a> <div class="collapse navbar-toggleable-md" id="navbarResponsive"> - <ul class="navbar-item navbar-item-primary nav navbar-nav"> + <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -68,7 +64,7 @@ <a class="nav-link" href="#">About</a> </li> </ul> - <form class="navbar-item form-inline text-md-right"> + <form class="form-inline text-md-right"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button> </form> @@ -77,38 +73,9 @@ </nav> <nav class="navbar navbar-dark bg-inverse"> - <div class="navbar-container"> - <div class="navbar-item navbar-item-primary"> - <a class="navbar-brand mr-2" href="#">Primary</a> - <ul class="nav navbar-nav d-inline-block"> - <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="#">Features</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Pricing</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">About</a> - </li> - </ul> - </div> - - <form class="navbar-item form-inline text-md-right"> - <input class="form-control" type="text" placeholder="Search"> - <button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button> - </form> - </div> - </nav> - - <nav class="navbar navbar-dark bg-inverse"> <div class="navbar-container navbar-container-justified"> - <div class="navbar-item"> - <a class="navbar-brand" href="#">Justified & Centered nav</a> - </div> - <ul class="navbar-item nav navbar-nav text-md-center"> + <a class="navbar-brand" href="#">Justified & Centered nav</a> + <ul class="nav navbar-nav text-md-center"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -122,7 +89,7 @@ <a class="nav-link" href="#">About</a> </li> </ul> - <form class="navbar-item form-inline text-md-right"> + <form class="form-inline text-md-right"> <input class="form-control" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button> </form> |