mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00
Code Activity

Merge branch 'v4-dev' into v4-navbars

Browse Source
This commit is contained in:
Mark Otto
2016-10-09 15:04:32 -07:00
parent 1db3586dc0 8d162553fa
commit 7dee5560a1
146 changed files with 1969 additions and 1233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/navbar.md
+7 -18
View File
@@ -27,7 +27,7 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc
- `.navbar-brand` for your company, product, or project name
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsing-content) behaviors.
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsible-content) behaviors.
Here's an example of all the sub-components included in a default, light navbar:
@@ -48,7 +48,7 @@ Here's an example of all the sub-components included in a default, light navbar:
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
@@ -67,7 +67,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
<!-- As a heading -->
<nav class="navbar navbar-light bg-faded">
<h1 class="navbar-brand m-b-0">Navbar</h1>
<h1 class="navbar-brand mb-0">Navbar</h1>
</nav>
{% endexample %}
@@ -193,7 +193,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-info" type="submit">Search</button>
</form>
@@ -214,7 +214,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-secondary" type="submit">Search</button>
</form>
@@ -235,7 +235,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
@@ -308,18 +308,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse text-muted p-a-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
</nav>
{% endexample %}
{% example html %}
<nav class="navbar navbar-dark bg-inverse">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbarDark" aria-controls="exCollapsingNavbarDark" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse" id="exCollapsingNavbarDark">
<div class="bg-inverse text-muted p-a-1">
<div class="bg-inverse text-muted p-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>