Skip to content

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

rearrange some of the docs on buttons to show examples of all possible... 

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
parent 85e401a6
Show whitespace changes
Inline Side-by-side
Showing with 53 additions and 39 deletions
docs/assets/css/bootstrap-responsive.css
View file @ 575b8247
......@@ -84,7 +84,7 @@
position: static;
}
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.container {
width: auto;
padding: 0 20px;
......
docs/assets/css/bootstrap.css
View file @ 575b8247
......@@ -1668,11 +1668,13 @@ table .span12 {
.btn {
display: inline-block;
padding: 4px 10px 4px;
margin-bottom: 0;
font-size: 13px;
line-height: 18px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
background-color: #fafafa;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
......
docs/base-css.html
View file @ 575b8247
......@@ -1289,17 +1289,10 @@ For example, <code>section</code> should be wrapped as inline.
<div class="span4">
<h3>Buttons for actions</h3>
<p>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.</p>
<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.</p>
<h3>Cross browser compatibility</h3>
<p>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.</p>
</div>
<div class="span4">
<h3>For anchors and forms</h3>
<p>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.</p>
</div>
<div class="span4">
<p><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.</p>
</div>
</div>
<div class="row">
<div class="span4">
<h3>Multiple sizes</h3>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for two additional sizes.</p>
......@@ -1311,8 +1304,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<a href="#" class="btn btn-small btn-primary">Primary action</a>
<a href="#" class="btn btn-small">Action</a>
</p>
</div>
<div class="span4">
<br>
<h3>Disabled state</h3>
<p>For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p>
<p>
......@@ -1325,14 +1317,27 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</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>One class, multiple tags</h3>
<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>
<form>
<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">
</form>
<pre class="prettyprint linenums">
&lt;a class="btn" href=""&gt;Link&lt;/a&gt;
&lt;button class="btn" type="submit"&gt;
Button
&lt;/button&gt;
&lt;input class="btn" type="button"
value="Input"&gt;
&lt;input class="btn" type="submit"
value="Submit"&gt;
</pre>
<p>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.</p>
</div>
</div>
<br>
</section>
......
docs/templates/pages/base-css.mustache
View file @ 575b8247
......@@ -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>
......
less/buttons.less
View file @ 575b8247
......@@ -9,11 +9,13 @@
.btn {
display: inline-block;
padding: 4px 10px 4px;
margin-bottom: 0; // For input.btn
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @grayDark;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
vertical-align: middle;
#gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
border: 1px solid #ccc;
border-bottom-color: #bbb;
......
less/responsive.less
View file @ 575b8247
......@@ -123,7 +123,7 @@
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
// --------------------------------------------------
@media (max-width: 768px) {
@media (max-width: 767px) {
// GRID & CONTAINERS
// -----------------
// Remove width from containers
......
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