+/* 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
-------------------------------------------------- */
<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>
<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">
</pre>
- <hr class="bs-docs-separator">
-
-
<h2>Contextual alternatives</h2>
<p>Add optional classes to change an alert's connotation.</p>
- <h3>Error or danger</h3>
<div class="bs-docs-example">
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
- </div>
-<pre class="prettyprint linenums">
-<div class="alert alert-error">
- ...
-</div>
-</pre>
-
- <h3>Success</h3>
- <div class="bs-docs-example">
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
- </div>
-<pre class="prettyprint linenums">
-<div class="alert alert-success">
- ...
-</div>
-</pre>
-
- <h3>Information</h3>
- <div class="bs-docs-example">
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
</div>
<pre class="prettyprint linenums">
-<div class="alert alert-info">
- ...
-</div>
+<div class="alert alert-error">... </div>
+<div class="alert alert-success">...</div>
+<div class="alert alert-info">...</div>
</pre>
-
</section>
<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>
<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>
<pre class="prettyprint linenums">
-<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
+<input id="focusedInput" type="text" value="This is focused...">
</pre>
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
<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>
<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">
</pre>
- <hr class="bs-docs-separator">
-
-
<h2>Contextual alternatives</h2>
<p>Add optional classes to change an alert's connotation.</p>
- <h3>Error or danger</h3>
<div class="bs-docs-example">
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
- </div>
-<pre class="prettyprint linenums">
-<div class="alert alert-error">
- ...
-</div>
-</pre>
-
- <h3>Success</h3>
- <div class="bs-docs-example">
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
- </div>
-<pre class="prettyprint linenums">
-<div class="alert alert-success">
- ...
-</div>
-</pre>
-
- <h3>Information</h3>
- <div class="bs-docs-example">
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
</div>
<pre class="prettyprint linenums">
-<div class="alert alert-info">
- ...
-</div>
+<div class="alert alert-error">... </div>
+<div class="alert alert-success">...</div>
+<div class="alert alert-info">...</div>
</pre>
-
</section>
<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>
<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>
<pre class="prettyprint linenums">
-<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
+<input id="focusedInput" type="text" value="This is focused...">
</pre>
<h3 id="forms-invalid-inputs">Invalid inputs</h3>