Skip to content

B
bootstrap
Commit dd5cffc3 authored by Mark Otto's avatar Mark Otto
Browse files
Options

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

parent c7eb1ab4
Show whitespace changes
Inline Side-by-side
Showing with 129 additions and 8 deletions
docs/assets/css/bootstrap.css
View file @ dd5cffc3
......@@ -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,
......
docs/components.html
View file @ dd5cffc3
......@@ -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>
......
docs/templates/pages/components.mustache
View file @ dd5cffc3
......@@ -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>
......
less/button-groups.less
View file @ dd5cffc3
......@@ -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
......
less/dropdowns.less
View file @ dd5cffc3
......@@ -42,11 +42,6 @@
.opacity(100);
}
// Small button dropdowns
.btn-small .caret {
margin-top: 6px;
}
// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment