mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-27 14:46:01 +03:00
Code Activity

Navbar realignment:

Browse Source 
* Change .brand to .navbar-brand
* Change .btn-navbar to .navbar-toggle
* Redesign navbar toggle to be a bit lighter and wider
* Center align the navbar brand with a max-width of 200px (to minimize hit area) while still centering
This commit is contained in:
Mark Otto
2013-02-18 01:28:35 -08:00
parent f51862f158
commit 023568fe3d
4 changed files with 92 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components.html
+15 -15
View File
@@ -766,7 +766,7 @@ title: Components
<p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
<div class="bs-docs-example">
<div class="navbar">
<a class="brand" href="#">Title</a>
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
@@ -776,7 +776,7 @@ title: Components
</div><!-- /example -->
{% highlight html linenos %}
<div class="navbar">
<a class="brand" href="#">Title</a>
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
@@ -791,11 +791,11 @@ title: Components
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<div class="bs-docs-example">
<div class="navbar">
<a class="brand" href="#">Title</a>
<a class="navbar-brand" href="#">Title</a>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<a class="brand" href="#">Title</a>
<a class="navbar-brand" href="#">Title</a>
{% endhighlight %}
<h3>Nav links</h3>
@@ -874,7 +874,7 @@ title: Components
<div class="bs-docs-example bs-navbar-top-example">
<div class="navbar navbar-fixed-top" style="position: absolute;">
<div class="container" style="width: auto;">
<a class="brand" href="#">Title</a>
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
@@ -894,7 +894,7 @@ title: Components
<div class="bs-docs-example bs-navbar-bottom-example">
<div class="navbar navbar-fixed-bottom" style="position: absolute;">
<div class="container" style="width: auto;">
<a class="brand" href="#">Title</a>
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
@@ -914,7 +914,7 @@ title: Components
<div class="bs-docs-example bs-navbar-top-example">
<div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
<div class="container" style="width: auto;">
<a class="brand" href="#">Title</a>
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
@@ -931,16 +931,16 @@ title: Components
<h2>Responsive navbar</h2>
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
<div class="bs-docs-example">
<div class="navbar">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<a class="navbar-brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
@@ -984,15 +984,15 @@ title: Components
<div class="navbar">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Title</a>
<a class="navbar-brand" href="#">Title</a>
<!-- Place everything within .navbar-collapse to hide it until above 768px -->
<div class="nav-collapse collapse navbar-responsive-collapse">
@@ -1012,12 +1012,12 @@ title: Components
<div class="bs-docs-example">
<div class="navbar navbar-inverse" style="position: static;">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<a class="navbar-brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>