diff options
Diffstat (limited to 'docs/examples')
| -rw-r--r-- | docs/examples/navbar/all-navbars.html | 202 |
1 files changed, 95 insertions, 107 deletions
diff --git a/docs/examples/navbar/all-navbars.html b/docs/examples/navbar/all-navbars.html index 864d95c40..d64ba7143 100644 --- a/docs/examples/navbar/all-navbars.html +++ b/docs/examples/navbar/all-navbars.html @@ -21,8 +21,32 @@ <body> <nav class="navbar navbar-dark bg-inverse"> - <div class="navbar-container"> - <a class="navbar-brand" href="#">Default</a> + <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> + <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> + <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> + </nav> + + <nav class="navbar navbar-dark bg-inverse"> + <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="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> @@ -45,37 +69,36 @@ </nav> <nav class="navbar navbar-dark bg-inverse"> - <div class="navbar-container"> - <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="nav navbar-nav"> - <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> - <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> - </div> - </div> + <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> + <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> + <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> </nav> - <nav class="navbar navbar-dark bg-inverse"> - <div class="navbar-container navbar-container-justified"> - <a class="navbar-brand" href="#">Justified & Centered nav</a> - <ul class="nav navbar-nav text-md-center"> + + + + <div class="container"> + <nav class="navbar navbar-light navbar-rounded bg-faded"> + <div class="navbar-item"> + <a class="navbar-brand" href="#">Default</a> + </div> + <ul class="navbar-item nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> @@ -89,93 +112,58 @@ <a class="nav-link" href="#">About</a> </li> </ul> - <form class="form-inline text-md-right"> + <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> - - - - - <div class="container"> - <nav class="navbar navbar-light navbar-rounded bg-faded"> - <div class="navbar-container"> - <div class="navbar-item"> - <a class="navbar-brand" href="#">Default</a> - </div> - <ul class="navbar-item nav navbar-nav"> - <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> - <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-light navbar-rounded bg-faded"> - <div class="navbar-container"> - <div class="navbar-item"> - <a class="navbar-brand" href="#">Primary</a> - </div> - <ul class="navbar-item navbar-item-primary nav navbar-nav"> - <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> - <form class="navbar-item form-inline text-xs-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 class="navbar-item"> + <a class="navbar-brand" href="#">Primary</a> </div> + <ul class="navbar-item navbar-item-primary nav navbar-nav"> + <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> + <form class="navbar-item form-inline text-xs-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> </nav> <nav class="navbar navbar-light navbar-rounded bg-faded"> - <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"> - <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> - <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 class="navbar-item"> + <a class="navbar-brand" href="#">Justified & Centered nav</a> </div> + <ul class="navbar-item 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> + <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> + <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> </nav> |