rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

More navbar CSS and docs cleanup

Browse Source 
* Rearrange sections
* Add code snippets for text and links in navbars
* Add .navbar-link back in
* Add mention of .navbar-text, but it still needs to be re-implemented
* Update nav to reflect new order
This commit is contained in:
Mark Otto 2013-05-02 23:13:43 -07:00
parent 94792b9dae
commit e1c67b149f
3 changed files with 62 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_includes/docs-nav.html
View File

@ -122,8 +122,9 @@
<li><a href="#navbar-nav">Nav links</a></li>
<li><a href="#navbar-forms">Forms in navbars</a></li>
<li><a href="#navbar-buttons">Buttons in navbars</a></li>
<li><a href="#navbar-component-alignment">Component alignment</a></li>
<li><a href="#navbar-text">Text in navbars</a></li>
<li><a href="#navbar-links">Links in navbars</a></li>
<li><a href="#navbar-component-alignment">Component alignment</a></li>
<li><a href="#navbar-fixed-top">Fixed top navbar</a></li>
<li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
<li><a href="#navbar-static-top">Static top navbar</a></li>

43
docs/docs.html
View File

@ -3488,9 +3488,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="navbar-form pull-left">
<select name="" id="" style="width: 200px;">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button type="submit" class="btn">Submit</button>
</form>
@ -3508,7 +3508,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="navbar-form pull-left">
<input type="text" style="width: 200px;">
<label class="checkbox-inline">
<input type="checkbox"> Derp
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Submit</button>
</form>
@ -3526,16 +3526,43 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
<div class="bs-docs-example">
<div class="navbar">
<a href="#" class="navbar-brand">Derp</a>
<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="btn">Submit</button>
</div>
</div>
<h3 id="navbar-component-alignment">Component alignment</h3>
<p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<h3 id="navbar-text">Text</h3>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
<div class="bs-docs-example">
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text">Signed in as Mark Otto</p>
</div>
</div>
{% highlight html linenos %}
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text">Signed in as Mark Otto</p>
</div>
{% endhighlight %}
<h3 id="navbar-links">Links</h3>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<div class="bs-docs-example">
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<p class="pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>
</div>
{% highlight html linenos %}
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<p class="pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>
{% endhighlight %}
<h3 id="navbar-component-alignment">Component alignment</h3>
<p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<h2>Optional display variations</h2>

30
less/navbar.less
View File

@ -300,7 +300,8 @@
}
// Buttons in navbar
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
@ -308,10 +309,23 @@
margin-top: ((@navbar-height - @input-height-base) / 2);
}
/*
// Janky solution for now to account for links outside the .nav
// -------------------------
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
// Default navbar variables
.navbar-link {
color: @navbar-link-color;
&:hover {
@ -319,4 +333,10 @@
}
}
*/
// Use the inverse navbar variables
.navbar-inverse .navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}