* 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;
-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;
.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;}
<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>
</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>
+ <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><a></code> or <code><button></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 »</a></p>
+ <p class="muted">Heads up: CSS for button groups is in a separate file, button-groups.less.</p>
</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 class="span8">
+ <h3>Linked button group</h3>
+ <p>Using the standard <code><a class="btn" href="#">...</a></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>
- <div class="btn-group">
- <a class="btn" href="#">10</a>
+ <p>Level up one more time by wrapping multiple instances of <code><div class="btn-group"></code> with <code><div class="btn-toolbar"></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>