mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03:00
Code Activity

rearrange some of the docs on buttons to show examples of all possible renderings along with code snippets and note about usage; also fix the portrait tablet media query

Browse Source
This commit is contained in:
Mark Otto
2012-02-06 23:34:03 -08:00
parent 85e401a656
commit 575b82473f
7 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/templates/pages/base-css.mustache
Vendored
+23 -18
View File
@@ -1213,17 +1213,10 @@
<div class="span4">
<h3>{{_i}}Buttons for actions{{/i}}</h3>
<p>{{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}</p>
<p>{{_i}}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.{{/i}}</p>
<h3>{{_i}}Cross browser compatibility{{/i}}</h3>
<p>{{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}For anchors and forms{{/i}}</h3>
<p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.{{/i}}</p>
</div>
<div class="span4">
<p>{{_i}}<strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code>&lt;button&gt;</code> and <code>&lt;a&gt;</code> elements for consistency.{{/i}}</p>
</div>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Multiple sizes{{/i}}</h3>
<p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for two additional sizes.{{/i}}</p>
@@ -1235,8 +1228,7 @@
<a href="#" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</a>
<a href="#" class="btn btn-small">{{_i}}Action{{/i}}</a>
</p>
</div>
<div class="span4">
<br>
<h3>{{_i}}Disabled state{{/i}}</h3>
<p>{{_i}}For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.{{/i}}</p>
<p>
@@ -1249,14 +1241,27 @@
</p>
</div>
<div class="span4">
<h3>Cross browser compatibility</h3>
<p>In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.</p>
<p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow&mdash;unfortunately we can't fix this.</p>
<h3>{{_i}}One class, multiple tags{{/i}}</h3>
<p>{{_i}}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.{{/i}}</p>
<form>
<a class="btn" href="">{{_i}}Link{{/i}}</a>
<button class="btn" type="submit">{{_i}}Button{{/i}}</button>
<input class="btn" type="button" value="{{_i}}Input{{/i}}">
<input class="btn" type="submit" value="{{_i}}Submit{{/i}}">
</form>
<pre class="prettyprint linenums">
&lt;a class="btn" href=""&gt;{{_i}}Link{{/i}}&lt;/a&gt;
&lt;button class="btn" type="submit"&gt;
{{_i}}Button{{/i}}
&lt;/button&gt;
&lt;input class="btn" type="button"
value="{{_i}}Input{{/i}}"&gt;
&lt;input class="btn" type="submit"
value="{{_i}}Submit{{/i}}"&gt;
</pre>
<p>{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.{{/i}}</p>
</div>
</div>
<br>
</section>