kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

add button sizes to docs for button dropdowns, clean up styles for them

This commit is contained in:
Mark Otto 2012-03-10 13:40:58 -08:00
parent c7eb1ab49a
commit dd5cffc308
6 changed files with 129 additions and 8 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.

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

@ -1677,9 +1677,6 @@ table .span24 {
opacity: 1;
filter: alpha(opacity=100);
}
.btn-small .caret {
margin-top: 6px;
}
.dropdown-menu {
position: absolute;
top: 100%;
@ -2214,6 +2211,14 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
*padding-top: 5px;
*padding-bottom: 5px;
}
.btn-group .btn-mini.dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
}
.btn-group .btn-large.dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
.btn-group.open {
*z-index: 1000;
}
@ -2238,6 +2243,18 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
opacity: 1;
filter: alpha(opacity=100);
}
.btn-mini .caret {
margin-top: 5px;
}
.btn-small .caret {
margin-top: 6px;
}
.btn-large .caret {
margin-top: 6px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000000;
}
.btn-primary .caret,
.btn-warning .caret,
.btn-danger .caret,

44
docs/components.html
View File

@ -289,6 +289,50 @@
</pre>
</div>
</div>
<div class="row">
<div class="span4">
<h3>Works with all button sizes</h3>
<p>Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <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 class="btn-group">
<button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Small button <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 class="btn-group">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Mini button <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><!--/span-->
<div class="span4">
</div><!--/span-->
<div class="span4">
</div><!--/span-->
</div><!--/row-->
<div class="alert alert-info">
<strong>Heads up!</strong> In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.
</div>

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

@ -213,6 +213,50 @@
</pre>
</div>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Works with all button sizes{{/i}}</h3>
<p>Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
<button class="btn btn-large dropdown-toggle" data-toggle="dropdown">{{_i}}Large button{{/i}} <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 class="btn-group">
<button class="btn btn-small dropdown-toggle" data-toggle="dropdown">{{_i}}Small button{{/i}} <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 class="btn-group">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">{{_i}}Mini button{{/i}} <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><!--/span-->
<div class="span4">
</div><!--/span-->
<div class="span4">
</div><!--/span-->
</div><!--/row-->
<div class="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}
</div>

21
less/button-groups.less
View File

@ -98,6 +98,14 @@
*padding-top: 5px;
*padding-bottom: 5px;
}
.btn-group .btn-mini.dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
}
.btn-group .btn-large.dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
.btn-group.open {
// IE7's z-index only goes to the nearest positioned ancestor, which would
@ -127,6 +135,19 @@
.open.btn-group .caret {
.opacity(100);
}
// Carets in other button sizes
.btn-mini .caret {
margin-top: 5px;
}
.btn-small .caret {
margin-top: 6px;
}
.btn-large .caret {
margin-top: 6px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid @black;
}
// Account for other colors

5
less/dropdowns.less
View File

@ -42,11 +42,6 @@
.opacity(100);
}
// Small button dropdowns
.btn-small .caret {
margin-top: 6px;
}
// The dropdown menu (ul)
// ----------------------
.dropdown-menu {