docs cleanup and navbar brand hover

This commit is contained in:
Mark Otto 2012-01-05 22:37:23 -08:00
parent 9bedfa447c
commit 7582520808
4 changed files with 49 additions and 35 deletions

4
bootstrap.css vendored
View File

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Thu Jan 5 21:43:09 PST 2012
* Date: Thu Jan 5 22:37:16 PST 2012
*/
html, body {
margin: 0;
@ -1644,7 +1644,7 @@ i {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.navbar .brand a:hover, .navbar ul .active > a {
.navbar .brand:hover, .navbar ul .active > a {
color: #ffffff;
text-decoration: none;
background-color: #333333;

2
bootstrap.min.css vendored
View File

@ -280,7 +280,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;}
.navbar{overflow:visible;}
.navbar-inner{background-color:#222222;background-color:#222222;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
.navbar .brand a:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);}
.navbar .brand:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);}
.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;}
.navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;}
.navbar .btn{margin-top:5px;}

View File

@ -638,7 +638,6 @@
<h3>3. Bordered table</h3>
<p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p>
<p><span class="label">Note</span> Bordered tables do not work well with <code>rowspan</code> due to somewhat hacky CSS applied to the tables. Sorry about that!</p>
<table class="bordered-table">
<thead>
<tr>
@ -1177,37 +1176,52 @@
</div>
</div>
<h2>Button groups</h2>
<div class="well">
<div class="btn-group">
<a class="btn" href="#">Left</a>
<a class="btn" href="#">Middle</a>
<a class="btn" href="#">Right</a>
</div>
</div>
<div class="well">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
<a class="btn" href="#">4</a>
<a class="btn" href="#">5</a>
</div>
<div class="btn-group">
<a class="btn" href="#">6</a>
<a class="btn" href="#">7</a>
<a class="btn" href="#">8</a>
</div>
<div class="btn-group">
<a class="btn" href="#">9</a>
</div>
<div class="btn-group">
<a class="btn" href="#">10</a>
</div>
</div>
</div>
<br>
<div class="row">
<div class="span4">
<h2>Button groups</h2>
<p>Use button groups to join multiple buttons together as one composite component. Button groups can be built with not only <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements, but also radios and checkboxes.</p>
<p>You can also combine sets of button groups into a toolbar for more complex projects.</p>
<p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript &raquo;</a></p>
<p class="muted">Heads up: CSS for button groups is in a separate file, button-groups.less.</p>
</div>
<div class="span8">
<h3>Linked button group</h3>
<p>Using the standard <code>&lt;a class="btn" href="#"&gt;...&lt;/a&gt;</code> markup, simply add all the buttons you need.</p>
<div class="well" style="padding: 10px; margin-bottom: 9px;">
<div class="btn-group">
<a class="btn" href="#">Left</a>
<a class="btn" href="#">Middle</a>
<a class="btn" href="#">Right</a>
</div>
</div>
<p>Level up one more time by wrapping multiple instances of <code>&lt;div class="btn-group"&gt;</code> with <code>&lt;div class="btn-toolbar"&gt;</code>.</p>
<div class="well" style="padding: 10px;">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
<a class="btn" href="#">4</a>
<a class="btn" href="#">5</a>
</div>
<div class="btn-group">
<a class="btn" href="#">6</a>
<a class="btn" href="#">7</a>
<a class="btn" href="#">8</a>
</div>
<div class="btn-group">
<a class="btn" href="#">9</a>
</div>
<div class="btn-group">
<a class="btn" href="#">10</a>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@ -20,7 +20,7 @@
// Text and links
.navbar {
// Hover and active states
.brand a:hover,
.brand:hover,
ul .active > a {
color: @white;
text-decoration: none;