mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-10-01 07:46:47 +02:00
Code Issues Releases Wiki Activity

Require .btn-default for regular buttons

Browse Source 
* Instead of , use  for standard, gray button
* Improves ability to customize buttons by encouraging folks to not override .btn and thus overriding all button modifier classes
* Updates docs to reflect the change
* Reorganize buttons CSS
This commit is contained in:
Mark Otto
2013-05-07 18:07:06 -07:00
parent ad5f88e1c5
commit d7f84d1220
6 changed files with 217 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
docs/docs.html
View File

@@ -2047,7 +2047,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<h2 id="buttons-options">Button options</h2>
<p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.</p>
<p>Use any of the available button classes to quickly create a styled button.</p>
<div class="bs-docs-example">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
@@ -2080,56 +2080,55 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn btn-link">Link</button>
{% endhighlight %}
<h2 id="buttons-sizes">Button sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
<div class="bs-docs-example">
<p>
<button type="button" class="btn btn-large btn-primary">Large button</button>
<button type="button" class="btn btn-large">Large button</button>
<button type="button" class="btn btn-primary btn-large">Large button</button>
<button type="button" class="btn btn-default btn-large">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-small btn-primary">Small button</button>
<button type="button" class="btn btn-small">Small button</button>
<button type="button" class="btn btn-primary btn-small">Small button</button>
<button type="button" class="btn btn-default btn-small">Small button</button>
</p>
<p>
<button type="button" class="btn btn-mini btn-primary">Mini button</button>
<button type="button" class="btn btn-mini">Mini button</button>
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
<button type="button" class="btn btn-default btn-mini">Mini button</button>
</p>
</div>
{% highlight html %}
<p>
<button type="button" class="btn btn-large btn-primary">Large button</button>
<button type="button" class="btn btn-large">Large button</button>
<button type="button" class="btn btn-primary btn-large">Large button</button>
<button type="button" class="btn btn-default btn-large">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-small btn-primary">Small button</button>
<button type="button" class="btn btn-small">Small button</button>
<button type="button" class="btn btn-primary btn-small">Small button</button>
<button type="button" class="btn btn-default btn-small">Small button</button>
</p>
<p>
<button type="button" class="btn btn-mini btn-primary">Mini button</button>
<button type="button" class="btn btn-mini">Mini button</button>
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
<button type="button" class="btn btn-default btn-mini">Mini button</button>
</p>
{% endhighlight %}
<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
<div class="bs-docs-example">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
<button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
<button type="button" class="btn btn-large btn-block">Block level button</button>
<button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
</div>
</div>
{% highlight html %}
<button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
<button type="button" class="btn btn-large btn-block">Block level button</button>
<button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
{% endhighlight %}
@@ -2139,12 +2138,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Button element</h3>
<p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
<p class="bs-docs-example">
<button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled="disabled">Button</button>
<button type="button" class="btn btn-primary btn-large" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
</p>
{% highlight html %}
<button type="button" class="btn btn-large btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled="disabled">Button</button>
<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
{% endhighlight %}
<div class="bs-docs-sidenote">
@@ -2155,12 +2154,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
<p class="bs-docs-example">
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>
<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
<a href="#" class="btn btn-default btn-large disabled">Link</a>
</p>
{% highlight html %}
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>
<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
<a href="#" class="btn btn-default btn-large disabled">Link</a>
{% endhighlight %}
<p>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
@@ -2171,19 +2170,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<h2 id="buttons-tags">One class, multiple tags</h2>
<p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
<h2 id="buttons-tags">Using multiple tags</h2>
<p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
<form class="bs-docs-example">
<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
<a class="btn btn-default" href="#">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
</form>
{% highlight html %}
<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
<a class="btn btn-default" href="#">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
{% endhighlight %}
<div class="bs-docs-sidenote">
@@ -2599,20 +2598,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-docs-example">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
<a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
<a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
<a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
</div>
</div>
</div><!-- /bs-docs-example -->
{% highlight html %}
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
<a class="btn" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
<a class="btn" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
<a class="btn" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-center"></span></a>
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-right"></span></a>
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
</div>
</div>
{% endhighlight %}
@@ -2638,8 +2637,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /bs-docs-example -->
{% highlight html %}
<div class="btn-group">
<a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<a class="btn btn-default btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
<a class="btn btn-default btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit</a></li>
<li><a href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
@@ -2652,18 +2651,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h5>Large button</h5>
<div class="bs-docs-example">
<a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
<a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
</div><!-- /bs-docs-example -->
{% highlight html %}
<a class="btn btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
<a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
{% endhighlight %}
<h5>Small button</h5>
<div class="bs-docs-example">
<a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
<a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
</div><!-- /bs-docs-example -->
{% highlight html %}
<a class="btn btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
<a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
{% endhighlight %}
@@ -2878,16 +2877,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bs-docs-example">
<div class="btn-group" style="margin: 9px 0 5px;">
<button type="button" class="btn">Left</button>
<button type="button" class="btn">Middle</button>
<button type="button" class="btn">Right</button>
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
{% highlight html %}
<div class="btn-group">
<button type="button" class="btn">Left</button>
<button type="button" class="btn">Middle</button>
<button type="button" class="btn">Right</button>
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
{% endhighlight %}
@@ -2896,18 +2895,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button type="button" class="btn">1</button>
<button type="button" class="btn">2</button>
<button type="button" class="btn">3</button>
<button type="button" class="btn">4</button>
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
<div class="btn-group">
<button type="button" class="btn">5</button>
<button type="button" class="btn">6</button>
<button type="button" class="btn">7</button>
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn">8</button>
<button type="button" class="btn btn-default">8</button>
</div>
</div>
</div>
@@ -2923,12 +2922,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.</p>
<div class="bs-docs-example">
<div class="btn-group">
<button type="button" class="btn">1</button>
<button type="button" class="btn">2</button>
<button type="button" class="btn">3</button>
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<div class="btn-group">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
@@ -2945,10 +2944,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
<div class="bs-docs-example">
<div class="btn-group btn-group-vertical">
<button type="button" class="btn"><i class="glyphicon glyphicon-align-left"></i></button>
<button type="button" class="btn"><i class="glyphicon glyphicon-align-center"></i></button>
<button type="button" class="btn"><i class="glyphicon glyphicon-align-right"></i></button>
<button type="button" class="btn"><i class="glyphicon glyphicon-align-justify"></i></button>
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-left"></i></button>
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-center"></i></button>
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-right"></i></button>
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-justify"></i></button>
</div>
</div>
{% highlight html %}
@@ -2961,9 +2960,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
<div class="bs-docs-example">
<div class="btn-group btn-group-justified">
<a href="#" class="btn">Left</a>
<a href="#" class="btn">Right</a>
<a href="#" class="btn">Middle</a>
<a href="#" class="btn btn-default">Left</a>
<a href="#" class="btn btn-default">Right</a>
<a href="#" class="btn btn-default">Middle</a>
</div>
</div>
{% highlight html %}
@@ -2994,7 +2993,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin-bottom: 10px;">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -3048,7 +3047,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% highlight html %}
<!-- Single button -->
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3066,8 +3065,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button class="btn btn-default">Action</button>
<button class="btn btn-default 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>
@@ -3125,8 +3124,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% highlight html %}
<!-- Split button -->
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<button class="btn btn-default">Action</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3144,7 +3143,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-docs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3156,7 +3155,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3168,7 +3167,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
Mini button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3184,7 +3183,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% highlight html %}
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-large dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3194,7 +3193,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-small dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3204,7 +3203,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<!-- Mini button group -->
<div class="btn-group">
<button class="btn btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
<button class="btn btn-default btn-mini dropdown-toggle" type="button" data-toggle="dropdown">
Mini button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
@@ -3218,8 +3217,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-docs-example">
<div class="btn-toolbar">
<div class="btn-group dropup">
<button class="btn">Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button class="btn btn-default">Dropup</button>
<button class="btn btn-default 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>
@@ -3229,8 +3228,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn primary">Right dropup</button>
<button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<button class="btn btn-primary">Right dropup</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
@@ -3243,8 +3242,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /example -->
{% highlight html %}
<div class="btn-group dropup">
<button class="btn">Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<button class="btn btn-default">Dropup</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">