rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-02 14:24:19 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Mark Otto 2013-01-17 15:36:36 -08:00
parent 32bcbe5671
commit 97975c5fcf
5 changed files with 23 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/assets/css/docs.css
View File

@ -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
-------------------------------------------------- */ -------------------------------------------------- */

32
docs/components.html
View File

@ -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 @@
</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>

4
docs/css.html
View File

@ -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>

32
docs/templates/pages/components.mustache vendored
View File

@ -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 @@
</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>

4
docs/templates/pages/css.mustache vendored
View File

@ -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>