clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-21 10:37:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

adding button groups and toolbars like a boss

Browse Source
This commit is contained in:
Mark Otto 2011-09-29 02:21:02 -07:00
parent f54568fa31
commit 0a6d8c30db
5 changed files with 210 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
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 Sep 29 01:47:26 PDT 2011
* Date: Thu Sep 29 02:20:34 PDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@ -1726,6 +1726,62 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
.btn-toolbar {
zoom: 1;
}
.btn-toolbar:before, .btn-toolbar:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.btn-toolbar:after {
clear: both;
}
.btn-toolbar .btn-group {
float: left;
margin-right: 10px;
}
.btn-group {
zoom: 1;
}
.btn-group:before, .btn-group:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.btn-group:after {
clear: both;
}
.btn-group .btn {
position: relative;
float: left;
margin-left: -1px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.btn-group .btn:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.btn-group .btn:last-child {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active {
z-index: 2;
}
.close {
float: right;
color: #000000;

8
bootstrap.min.css vendored
View File

@ -260,6 +260,14 @@ footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
.btn.small{padding:7px 9px 7px;font-size:11px;}
:root .alert-message,:root .btn{border-radius:0 \0;}
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
.btn-toolbar{zoom:1;}.btn-toolbar:before,.btn-toolbar:after{display:table;content:"";zoom:1;*display:inline;}
.btn-toolbar:after{clear:both;}
.btn-toolbar .btn-group{float:left;margin-right:10px;}
.btn-group{zoom:1;}.btn-group:before,.btn-group:after{display:table;content:"";zoom:1;*display:inline;}
.btn-group:after{clear:both;}
.btn-group .btn{position:relative;float:left;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}.btn-group .btn:first-child{margin-left:0;-webkit-border-top-left-radius:4px;-moz-border-radius-topleft:4px;border-top-left-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px;}
.btn-group .btn:last-child{-webkit-border-top-right-radius:4px;-moz-border-radius-topright:4px;border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px;}
.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;}
.close{float:right;color:#000000;font-size:20px;font-weight:bold;line-height:13.5px;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
.alert-message{position:relative;padding:7px 15px;margin-bottom:18px;color:#333333;background-color:#eedc94;background-image:-khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));background-image:-moz-linear-gradient(top, #fceec1, #eedc94);background-image:-ms-linear-gradient(top, #fceec1, #eedc94);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));background-image:-webkit-linear-gradient(top, #fceec1, #eedc94);background-image:-o-linear-gradient(top, #fceec1, #eedc94);background-image:linear-gradient(top, #fceec1, #eedc94);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#eedc94 #eedc94 #e4c652;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);border-width:1px;border-style:solid;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25);}.alert-message .close{*margin-top:3px;}
.alert-message h5{line-height:18px;}

85
docs/index.html
View File

@ -898,7 +898,7 @@
<div class="span-one-third">
<h3></h3>
</div>
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Search form</h2>
@ -911,7 +911,7 @@
</form>
</div><!--/well-->
</div>
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Inline form</h2>
@ -928,7 +928,7 @@
</form>
</div><!--/well-->
</div>
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Horizontal form</h2>
@ -1032,7 +1032,7 @@
</fieldset>
</form>
</div>
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Vertical form</h2>
@ -1075,7 +1075,82 @@
</fieldset>
</form>
</div>
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Buttons</h2>
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
<p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
</div>
<div class="span12">
<h3>Example buttons</h3>
<p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, and select <code>&lt;input&gt;</code> elements. Here’s how it looks:</p>
<div class="well" style="padding: 14px 19px;">
<button class="btn primary">Primary</button>&nbsp;<button class="btn">Default</button>&nbsp;<button class="btn info">Info</button>&nbsp;<button class="btn success">Success</button>&nbsp;<button class="btn danger">Danger</button>
</div>
<h3>Alternate sizes</h3>
<p>Fancy larger or smaller buttons? Have at it!</p>
<div class="well">
<a href="#" class="btn large primary">Primary action</a>
<a href="#" class="btn large">Action</a>
</div>
<div class="well" style="padding: 16px 19px;">
<a href="#" class="btn small primary">Primary action</a>
<a href="#" class="btn small">Action</a>
</div>
<h3>Disabled state</h3>
<p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p>
<h4>Links</h4>
<div class="well">
<a href="#" class="btn large primary disabled">Primary action</a>
<a href="#" class="btn large disabled">Action</a>
</div>
<h4>Buttons</h4>
<div class="well">
<button class="btn large primary disabled" disabled="disabled">Primary action</button>&nbsp;<button class="btn large" disabled>Action</button>
</div>
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Button groups</h2>
</div>
<div class="span12">
<h3>Example</h3>
<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>
</div>
</div><!-- /row -->
</section>

17
lib/mixins.less
View File

@ -102,6 +102,23 @@
-moz-border-radius: @radius;
border-radius: @radius;
}
.border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) {
-webkit-border-top-left-radius: @topLeft;
-moz-border-radius-topleft: @topLeft;
border-top-left-radius: @topLeft;
-webkit-border-top-right-radius: @topRight;
-moz-border-radius-topright: @topRight;
border-top-right-radius: @topRight;
-webkit-border-bottom-right-radius: @bottomRight;
-moz-border-radius-bottomright: @bottomRight;
border-bottom-right-radius: @bottomRight;
-webkit-border-bottom-left-radius: @bottomLeft;
-moz-border-radius-bottomleft: @bottomLeft;
border-bottom-left-radius: @bottomLeft;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {

48
lib/patterns.less
View File

@ -565,6 +565,54 @@ input[type=submit].btn {
}
}
// Button groups
// -------------
// Group multiple button groups together for a toolbar
.btn-toolbar {
.clearfix();
.btn-group {
float: left;
margin-right: 10px;
}
}
// Clear the float
.btn-group {
.clearfix();
}
// Float them, remove border radius, then re-add to first and last elements
.btn-group .btn {
position: relative;
float: left;
margin-left: -1px;
.border-radius(0);
&:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
&:last-child {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
}
// On hover/focus/active, bring the proper btn to front
.btn-group .btn:hover,
.btn-group .btn:focus,
.btn-group .btn:active {
z-index: 2;
}
// CLOSE ICONS
// -----------