From 5ef2b6561a8409cc26c413e4a152df89a383f0e8 Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Sat, 9 Jun 2012 22:47:45 -0700
Subject: [PATCH] realign icons to five cols, fix buttons
---
docs/base-css.html | 92 +++++++++++++++++---------
docs/templates/pages/base-css.mustache | 92 +++++++++++++++++---------
2 files changed, 122 insertions(+), 62 deletions(-)
diff --git a/docs/base-css.html b/docs/base-css.html
index 979a873853..618dee29a4 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1202,6 +1202,9 @@ For example, <code>section</code> should be wrapped as inline.
<div class="page-header">
<h1>Buttons</h1>
</div>
+
+ <h2>Default buttons</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><a></code> and <code><button></code> elements for the best rendering.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
@@ -1249,13 +1252,14 @@ For example, <code>section</code> should be wrapped as inline.
</tbody>
</table>
- <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>
+ <h4>Cross browser compatibility</h4>
<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>
- <h3>Multiple sizes</h3>
+
+ <hr class="bs-docs-separator">
+
+
+ <h2>Button sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.</p>
<p>
<button class="btn btn-large btn-primary">Primary action</button>
@@ -1269,29 +1273,51 @@ For example, <code>section</code> should be wrapped as inline.
<button class="btn btn-mini btn-primary">Primary action</button>
<button class="btn btn-mini">Action</button>
</p>
- <br>
- <h3>Disabled state</h3>
- <p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code><button></code> elements.</p>
- <p>
+
+
+ <hr class="bs-docs-separator">
+
+
+ <h2>Disabled state</h2>
+ <p>Make buttons look unclickable by fading them back 50%.</p>
+
+ <h3>Anchor element</h3>
+ <p>Add the <code>.disabled</code> class to <code><a></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>
</p>
- <p style="margin-bottom: 18px;">
- <button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
- <button class="btn btn-large" disabled>Button</button>
- </p>
+<pre class="prettyprint linenums">
+<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+<a href="#" class="btn btn-large disabled">Link</a>
+</pre>
<p>
<span class="label label-info">Heads up!</span>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
</p>
- <h3>One class, multiple tags</h3>
+ <h3>Button element</h3>
+ <p>Add the <code>disabled</code> attribute to <code><button></code> buttons.</p>
+ <p class="bs-docs-example">
+ <button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+ <button class="btn btn-large" disabled>Button</button>
+ </p>
+<pre class="prettyprint linenums">
+<button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+<button class="btn btn-large" disabled>Button</button>
+</pre>
+
+
+ <hr class="bs-docs-separator">
+
+
+ <h2>One class, multiple tags</h2>
<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 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">
</form>
<pre class="prettyprint linenums">
<a class="btn" href="">Link</a>
@@ -1346,6 +1372,10 @@ For example, <code>section</code> should be wrapped as inline.
<li><i class="icon-download"></i> icon-download</li>
<li><i class="icon-upload"></i> icon-upload</li>
<li><i class="icon-inbox"></i> icon-inbox</li>
+ </ul>
+ </div>
+ <div class="span2">
+ <ul class="the-icons">
<li><i class="icon-play-circle"></i> icon-play-circle</li>
<li><i class="icon-repeat"></i> icon-repeat</li>
<li><i class="icon-refresh"></i> icon-refresh</li>
@@ -1353,10 +1383,6 @@ For example, <code>section</code> should be wrapped as inline.
<li><i class="icon-lock"></i> icon-lock</li>
<li><i class="icon-flag"></i> icon-flag</li>
<li><i class="icon-headphones"></i> icon-headphones</li>
- </ul>
- </div>
- <div class="span2">
- <ul class="the-icons">
<li><i class="icon-volume-off"></i> icon-volume-off</li>
<li><i class="icon-volume-down"></i> icon-volume-down</li>
<li><i class="icon-volume-up"></i> icon-volume-up</li>
@@ -1378,6 +1404,10 @@ For example, <code>section</code> should be wrapped as inline.
<li><i class="icon-align-right"></i> icon-align-right</li>
<li><i class="icon-align-justify"></i> icon-align-justify</li>
<li><i class="icon-list"></i> icon-list</li>
+ </ul>
+ </div>
+ <div class="span2">
+ <ul class="the-icons">
<li><i class="icon-indent-left"></i> icon-indent-left</li>
<li><i class="icon-indent-right"></i> icon-indent-right</li>
<li><i class="icon-facetime-video"></i> icon-facetime-video</li>
@@ -1392,10 +1422,6 @@ For example, <code>section</code> should be wrapped as inline.
<li><i class="icon-move"></i> icon-move</li>
<li><i class="icon-step-backward"></i> icon-step-backward</li>
<li><i class="icon-fast-backward"></i> icon-fast-backward</li>
- </ul>
- </div>
- <div class="span2">
- <ul class="the-icons">
<li><i class="icon-backward"></i> icon-backward</li>
<li><i class="icon-play"></i> icon-play</li>
<li><i class="icon-pause"></i> icon-pause</li>
@@ -1410,6 +1436,10 @@ For example, <code>section</code> should be wrapped as inline.
<li><i class="icon-minus-sign"></i> icon-minus-sign</li>
<li><i class="icon-remove-sign"></i> icon-remove-sign</li>
<li><i class="icon-ok-sign"></i> icon-ok-sign</li>
+ </ul>
+ </div>
+ <div class="span2">
+ <ul class="the-icons">
<li><i class="icon-question-sign"></i> icon-question-sign</li>
<li><i class="icon-info-sign"></i> icon-info-sign</li>
<li><i class="icon-screenshot"></i> icon-screenshot</li>
@@ -1431,10 +1461,6 @@ For example, <code>section</code> should be wrapped as inline.
<li><i class="icon-leaf"></i> icon-leaf</li>
<li><i class="icon-fire"></i> icon-fire</li>
<li><i class="icon-eye-open"></i> icon-eye-open</li>
- </ul>
- </div>
- <div class="span2">
- <ul class="the-icons">
<li><i class="icon-eye-close"></i> icon-eye-close</li>
<li><i class="icon-warning-sign"></i> icon-warning-sign</li>
<li><i class="icon-plane"></i> icon-plane</li>
@@ -1442,6 +1468,10 @@ For example, <code>section</code> should be wrapped as inline.
<li><i class="icon-random"></i> icon-random</li>
<li><i class="icon-comment"></i> icon-comment</li>
<li><i class="icon-magnet"></i> icon-magnet</li>
+ </ul>
+ </div>
+ <div class="span2">
+ <ul class="the-icons">
<li><i class="icon-chevron-up"></i> icon-chevron-up</li>
<li><i class="icon-chevron-down"></i> icon-chevron-down</li>
<li><i class="icon-retweet"></i> icon-retweet</li>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index f7f12c8781..48043cbc8a 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1133,6 +1133,9 @@
<div class="page-header">
<h1>{{_i}}Buttons{{/i}}</h1>
</div>
+
+ <h2>Default buttons</h2>
+ <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 for the best rendering.{{/i}}</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
@@ -1180,13 +1183,14 @@
</tbody>
</table>
- <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>
+ <h4>{{_i}}Cross browser compatibility{{/i}}</h4>
<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>
- <h3>{{_i}}Multiple sizes{{/i}}</h3>
+
+ <hr class="bs-docs-separator">
+
+
+ <h2>{{_i}}Button sizes{{/i}}</h2>
<p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p>
<p>
<button class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
@@ -1200,29 +1204,51 @@
<button class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button>
<button class="btn btn-mini">{{_i}}Action{{/i}}</button>
</p>
- <br>
- <h3>{{_i}}Disabled state{{/i}}</h3>
- <p>{{_i}}For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code><button></code> elements.{{/i}}</p>
- <p>
+
+
+ <hr class="bs-docs-separator">
+
+
+ <h2>{{_i}}Disabled state{{/i}}</h2>
+ <p>{{_i}}Make buttons look unclickable by fading them back 50%.{{/i}}</p>
+
+ <h3>Anchor element</h3>
+ <p>{{_i}}Add the <code>.disabled</code> class to <code><a></code> buttons.{{/i}}</p>
+ <p class="bs-docs-example">
<a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
<a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
</p>
- <p style="margin-bottom: 18px;">
- <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
- <button class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
- </p>
+<pre class="prettyprint linenums">
+<a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
+<a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
+</pre>
<p>
<span class="label label-info">{{_i}}Heads up!{{/i}}</span>
{{_i}}We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.{{/i}}
</p>
- <h3>{{_i}}One class, multiple tags{{/i}}</h3>
+ <h3>Button element</h3>
+ <p>{{_i}}Add the <code>disabled</code> attribute to <code><button></code> buttons.{{/i}}</p>
+ <p class="bs-docs-example">
+ <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
+ <button class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
+ </p>
+<pre class="prettyprint linenums">
+<button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
+<button class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
+</pre>
+
+
+ <hr class="bs-docs-separator">
+
+
+ <h2>{{_i}}One class, multiple tags{{/i}}</h2>
<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 class="bs-docs-example">
+ <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>
@@ -1277,6 +1303,10 @@
<li><i class="icon-download"></i> icon-download</li>
<li><i class="icon-upload"></i> icon-upload</li>
<li><i class="icon-inbox"></i> icon-inbox</li>
+ </ul>
+ </div>
+ <div class="span2">
+ <ul class="the-icons">
<li><i class="icon-play-circle"></i> icon-play-circle</li>
<li><i class="icon-repeat"></i> icon-repeat</li>
<li><i class="icon-refresh"></i> icon-refresh</li>
@@ -1284,10 +1314,6 @@
<li><i class="icon-lock"></i> icon-lock</li>
<li><i class="icon-flag"></i> icon-flag</li>
<li><i class="icon-headphones"></i> icon-headphones</li>
- </ul>
- </div>
- <div class="span2">
- <ul class="the-icons">
<li><i class="icon-volume-off"></i> icon-volume-off</li>
<li><i class="icon-volume-down"></i> icon-volume-down</li>
<li><i class="icon-volume-up"></i> icon-volume-up</li>
@@ -1309,6 +1335,10 @@
<li><i class="icon-align-right"></i> icon-align-right</li>
<li><i class="icon-align-justify"></i> icon-align-justify</li>
<li><i class="icon-list"></i> icon-list</li>
+ </ul>
+ </div>
+ <div class="span2">
+ <ul class="the-icons">
<li><i class="icon-indent-left"></i> icon-indent-left</li>
<li><i class="icon-indent-right"></i> icon-indent-right</li>
<li><i class="icon-facetime-video"></i> icon-facetime-video</li>
@@ -1323,10 +1353,6 @@
<li><i class="icon-move"></i> icon-move</li>
<li><i class="icon-step-backward"></i> icon-step-backward</li>
<li><i class="icon-fast-backward"></i> icon-fast-backward</li>
- </ul>
- </div>
- <div class="span2">
- <ul class="the-icons">
<li><i class="icon-backward"></i> icon-backward</li>
<li><i class="icon-play"></i> icon-play</li>
<li><i class="icon-pause"></i> icon-pause</li>
@@ -1341,6 +1367,10 @@
<li><i class="icon-minus-sign"></i> icon-minus-sign</li>
<li><i class="icon-remove-sign"></i> icon-remove-sign</li>
<li><i class="icon-ok-sign"></i> icon-ok-sign</li>
+ </ul>
+ </div>
+ <div class="span2">
+ <ul class="the-icons">
<li><i class="icon-question-sign"></i> icon-question-sign</li>
<li><i class="icon-info-sign"></i> icon-info-sign</li>
<li><i class="icon-screenshot"></i> icon-screenshot</li>
@@ -1362,10 +1392,6 @@
<li><i class="icon-leaf"></i> icon-leaf</li>
<li><i class="icon-fire"></i> icon-fire</li>
<li><i class="icon-eye-open"></i> icon-eye-open</li>
- </ul>
- </div>
- <div class="span2">
- <ul class="the-icons">
<li><i class="icon-eye-close"></i> icon-eye-close</li>
<li><i class="icon-warning-sign"></i> icon-warning-sign</li>
<li><i class="icon-plane"></i> icon-plane</li>
@@ -1373,6 +1399,10 @@
<li><i class="icon-random"></i> icon-random</li>
<li><i class="icon-comment"></i> icon-comment</li>
<li><i class="icon-magnet"></i> icon-magnet</li>
+ </ul>
+ </div>
+ <div class="span2">
+ <ul class="the-icons">
<li><i class="icon-chevron-up"></i> icon-chevron-up</li>
<li><i class="icon-chevron-down"></i> icon-chevron-down</li>
<li><i class="icon-retweet"></i> icon-retweet</li>
--
GitLab