mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
add button sizes to docs for button dropdowns, clean up styles for them
This commit is contained in:
Mark Otto
parent
c7eb1ab49a
commit
dd5cffc308
6 changed files with 129 additions and 8 deletions
Binary file not shown.
23
docs/assets/css/bootstrap.css
vendored
23
docs/assets/css/bootstrap.css
vendored
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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—like mobile—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
44
docs/templates/pages/components.mustache
vendored
|
|
@ -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—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -42,11 +42,6 @@
|
|||
.opacity(100);
|
||||
}
|
||||
|
||||
// Small button dropdowns
|
||||
.btn-small .caret {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
// The dropdown menu (ul)
|
||||
// ----------------------
|
||||
.dropdown-menu {
|
||||
|
|
|
|||
Loading…
Reference in a new issue