rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

rearrange examples, go center nav only instead of trying to hack centered with siblings

Browse Source
This commit is contained in:
Mark Otto 2016-12-21 14:32:21 -08:00 committed by Mark Otto
parent 73da266009
commit 7c7bd17f0f
1 changed files with 56 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
docs/examples/navbars/index.html
View File

@ -51,37 +51,6 @@
</div>
</nav>
<nav class="navbar navbar-dark bg-inverse flex-items-md-between">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Centered nav</a>
<div class="collapse navbar-toggleable-md" id="navbarsExampleCenteredNav">
<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="#">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="supportedContentDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="supportedContentDropdown">
<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 mt-2 mt-md-0">
<input class="form-control mr-md-2" 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="container">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation"></button>
@ -116,12 +85,38 @@
</nav>
<nav class="navbar navbar-dark bg-inverse">
<div class="container flex-items-md-between">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Container &amp; Center</a>
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarsExampleContainer">
<ul class="nav navbar-nav text-md-center">
<div class="collapse navbar-toggleable-md" id="navbarsExampleCenteredNav">
<ul class="nav navbar-nav text-md-center">
<li class="nav-item active">
<a class="nav-link" href="#">Centered nav only <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="supportedContentDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="supportedContentDropdown">
<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>
</div>
</nav>
<div class="container">
<nav class="navbar navbar-light bg-faded rounded">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-toggleable-md" id="navbarsExampleDefault">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
@ -145,12 +140,33 @@
<button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</nav>
<nav class="navbar navbar-light bg-faded rounded">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="container">
<div class="collapse navbar-toggleable-md" id="navbarsExampleCenteredNav">
<ul class="nav navbar-nav text-md-center">
<li class="nav-item active">
<a class="nav-link" href="#">Centered nav only <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="supportedContentDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="supportedContentDropdown">
<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>
</div>
</nav>
<div class="jumbotron">
<div class="col-sm-8 mx-auto">