Skip to content
GitLab
Commit 97975c5f authored by Mark Otto's avatar Mark Otto
Browse files

Readd focused example of inputs to docs; clean up alerts section

parent 32bcbe56
Hide whitespace changes
Inline Side-by-side
Showing
with 23 additions and 62 deletions
+23 -62
docs/assets/css/docs.css
+ 13
- 0
View file @ 97975c5f
...@@ -443,6 +443,19 @@ section > ul li { ...@@ -443,6 +443,19 @@ section > ul li {
/* Misc docs stuff
-------------------------------------------------- */
/* Pseudo :focus state for showing how it looks in the docs */
input.focused {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
/* Responsive variations /* Responsive variations
-------------------------------------------------- */ -------------------------------------------------- */
......
docs/components.html
+ 3
- 29
View file @ 97975c5f
...@@ -1578,9 +1578,6 @@ ...@@ -1578,9 +1578,6 @@
<p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p> <p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p>
<hr class="bs-docs-separator">
<h2>Options</h2> <h2>Options</h2>
<p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p> <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
...@@ -1599,51 +1596,28 @@ ...@@ -1599,51 +1596,28 @@
</pre> </pre>
<hr class="bs-docs-separator">
<h2>Contextual alternatives</h2> <h2>Contextual alternatives</h2>
<p>Add optional classes to change an alert's connotation.</p> <p>Add optional classes to change an alert's connotation.</p>
<h3>Error or danger</h3>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="alert alert-error"> <div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again. <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div> </div>
</div>
<pre class="prettyprint linenums">
&lt;div class="alert alert-error"&gt;
...
&lt;/div&gt;
</pre>
<h3>Success</h3>
<div class="bs-docs-example">
<div class="alert alert-success"> <div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Well done!</strong> You successfully read this important alert message. <strong>Well done!</strong> You successfully read this important alert message.
</div> </div>
</div>
<pre class="prettyprint linenums">
&lt;div class="alert alert-success"&gt;
...
&lt;/div&gt;
</pre>
<h3>Information</h3>
<div class="bs-docs-example">
<div class="alert alert-info"> <div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important. <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="alert alert-info"&gt; &lt;div class="alert alert-error"&gt;... &lt;/div&gt;
... &lt;div class="alert alert-success"&gt;...&lt;/div&gt;
&lt;/div&gt; &lt;div class="alert alert-info"&gt;...&lt;/div&gt;
</pre> </pre>
</section> </section>
......
docs/css.html
+ 2
- 2
View file @ 97975c5f
...@@ -1590,10 +1590,10 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped ...@@ -1590,10 +1590,10 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<h3 id="forms-input-focus">Input focus</h3> <h3 id="forms-input-focus">Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused..."> <input class="focused" id="focusedInput" type="text" value="This is focused...">
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt; &lt;input id="focusedInput" type="text" value="This is focused..."&gt;
</pre> </pre>
<h3 id="forms-invalid-inputs">Invalid inputs</h3> <h3 id="forms-invalid-inputs">Invalid inputs</h3>
......
docs/templates/pages/components.mustache
+ 3
- 29
View file @ 97975c5f
...@@ -1509,9 +1509,6 @@ ...@@ -1509,9 +1509,6 @@
<p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p> <p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p>
<hr class="bs-docs-separator">
<h2>Options</h2> <h2>Options</h2>
<p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p> <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
...@@ -1530,51 +1527,28 @@ ...@@ -1530,51 +1527,28 @@
</pre> </pre>
<hr class="bs-docs-separator">
<h2>Contextual alternatives</h2> <h2>Contextual alternatives</h2>
<p>Add optional classes to change an alert's connotation.</p> <p>Add optional classes to change an alert's connotation.</p>
<h3>Error or danger</h3>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="alert alert-error"> <div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again. <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div> </div>
</div>
<pre class="prettyprint linenums">
&lt;div class="alert alert-error"&gt;
...
&lt;/div&gt;
</pre>
<h3>Success</h3>
<div class="bs-docs-example">
<div class="alert alert-success"> <div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Well done!</strong> You successfully read this important alert message. <strong>Well done!</strong> You successfully read this important alert message.
</div> </div>
</div>
<pre class="prettyprint linenums">
&lt;div class="alert alert-success"&gt;
...
&lt;/div&gt;
</pre>
<h3>Information</h3>
<div class="bs-docs-example">
<div class="alert alert-info"> <div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important. <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="alert alert-info"&gt; &lt;div class="alert alert-error"&gt;... &lt;/div&gt;
... &lt;div class="alert alert-success"&gt;...&lt;/div&gt;
&lt;/div&gt; &lt;div class="alert alert-info"&gt;...&lt;/div&gt;
</pre> </pre>
</section> </section>
......
docs/templates/pages/css.mustache
+ 2
- 2
View file @ 97975c5f
...@@ -1529,10 +1529,10 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped ...@@ -1529,10 +1529,10 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<h3 id="forms-input-focus">Input focus</h3> <h3 id="forms-input-focus">Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused..."> <input class="focused" id="focusedInput" type="text" value="This is focused...">
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt; &lt;input id="focusedInput" type="text" value="This is focused..."&gt;
</pre> </pre>
<h3 id="forms-invalid-inputs">Invalid inputs</h3> <h3 id="forms-invalid-inputs">Invalid inputs</h3>
......
Supports Markdown
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