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

button group sizes for ie7 fixes

Browse Source
This commit is contained in:
Mark Otto 2012-03-12 12:44:47 -07:00
parent e12c66aabe
commit 7f3a2b3813
6 changed files with 87 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

15
docs/assets/css/bootstrap.css vendored
View File

@ -2265,6 +2265,11 @@ input[type="submit"].btn.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
button.btn.btn-mini,
input[type="submit"].btn.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
.btn-group {
position: relative;
*zoom: 1;
@ -2355,12 +2360,18 @@ input[type="submit"].btn.btn-small {
-webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
*padding-top: 5px;
*padding-bottom: 5px;
*padding-top: 3px;
*padding-bottom: 3px;
}
.btn-group .btn-mini.dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
*padding-top: 1px;
*padding-bottom: 1px;
}
.btn-group .btn-small.dropdown-toggle {
*padding-top: 4px;
*padding-bottom: 4px;
}
.btn-group .btn-large.dropdown-toggle {
padding-left: 12px;

36
docs/components.html
View File

@ -420,13 +420,39 @@
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<h3>Right aligned menus</h3>
<p>Add <code>.pull-right</code> to the <code>.dropdown-menu</code> of any button dropdown for right aligned menus.</p>
<h3>Sizes</h3>
<p>Utilize the extra button classe <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.</p>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn">Right aligned</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<button class="btn btn-large">Large action</button>
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-small">Small action</button>
<button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-mini">Mini action</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>

36
docs/templates/pages/components.mustache vendored
View File

@ -344,13 +344,39 @@
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<h3>{{_i}}Right aligned menus{{/i}}</h3>
<p>{{_i}}Add <code>.pull-right</code> to the <code>.dropdown-menu</code> of any button dropdown for right aligned menus.{{/i}}</p>
<h3>{{_i}}Sizes{{/i}}</h3>
<p>{{_i}}Utilize the extra button classe <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.{{/i}}</p>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn">{{_i}}Right aligned{{/i}}</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<button class="btn btn-large">{{_i}}Large action{{/i}}</button>
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-small">{{_i}}Small action{{/i}}</button>
<button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-mini">{{_i}}Mini action{{/i}}</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>

10
less/button-groups.less
View File

@ -95,12 +95,18 @@
padding-right: 8px;
@shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
*padding-top: 5px;
*padding-bottom: 5px;
*padding-top: 3px;
*padding-bottom: 3px;
}
.btn-group .btn-mini.dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
*padding-top: 1px;
*padding-bottom: 1px;
}
.btn-group .btn-small.dropdown-toggle {
*padding-top: 4px;
*padding-bottom: 4px;
}
.btn-group .btn-large.dropdown-toggle {
padding-left: 12px;

4
less/buttons.less
View File

@ -180,4 +180,8 @@ input[type="submit"].btn {
*padding-top: 3px;
*padding-bottom: 3px;
}
&.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
}