position: static;
}
}
-@media (max-width: 768px) {
+@media (max-width: 767px) {
.container {
width: auto;
padding: 0 20px;
.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);
<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><a></code> and <code><button></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><a></code> and <code><button></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><button></code> and <code><a></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>
<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><button></code> elements.</p>
<p>
</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—unfortunately we can't fix this.</p>
+ <h3>One class, multiple tags</h3>
+ <p>Use the <code>.btn</code> class on an <code><a></code>, <code><button></code>, or <code><input></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">
+<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">
+</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><input type="submit"></code> for your button.</p>
</div>
</div>
-
- <br>
-
</section>
<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><a></code> and <code><button></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><a></code> and <code><button></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><button></code> and <code><a></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>
<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><button></code> elements.{{/i}}</p>
<p>
</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—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><a></code>, <code><button></code>, or <code><input></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">
+<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}}">
+</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><input type="submit"></code> for your button.{{/i}}</p>
</div>
</div>
-
- <br>
-
</section>
.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;
button.btn,
input[type="submit"].btn {
&::-moz-focus-inner {
- padding: 0;
+ padding: 0;
border: 0;
}
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
// --------------------------------------------------
-@media (max-width: 768px) {
+@media (max-width: 767px) {
// GRID & CONTAINERS
// -----------------
// Remove width from containers
projects / thirdparty / bootstrap.git / commitdiff
