aboutsummaryrefslogtreecommitdiff
path: root/docs/base-css.html
diff options
context:
space:
mode:
Diffstat (limited to 'docs/base-css.html')
-rw-r--r--docs/base-css.html142
1 files changed, 131 insertions, 11 deletions
diff --git a/docs/base-css.html b/docs/base-css.html
index 653f5b7b1..d3a92c831 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1131,20 +1131,22 @@ For example, <code><section></code> should be wrapped as inlin
<form class="bs-docs-example">
<div class="input-prepend">
<span class="add-on">@</span>
- <input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
+ <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<br>
<div class="input-append">
- <input class="span2" id="appendedInput" size="16" type="text">
+ <input class="span2" id="appendedInput" type="text">
<span class="add-on">.00</span>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend"&gt;
- &lt;span class="add-on"&gt;@&lt;/span&gt;&lt;input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"&gt;
+ &lt;span class="add-on"&gt;@&lt;/span&gt;
+ &lt;input class="span2" id="prependedInput" type="text" placeholder="Username"&gt;
&lt;/div&gt;
&lt;div class="input-append"&gt;
- &lt;input class="span2" id="appendedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
+ &lt;input class="span2" id="appendedInput" type="text"&gt;
+ &lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;/div&gt;
</pre>
@@ -1153,13 +1155,15 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<form class="bs-docs-example form-inline">
<div class="input-prepend input-append">
<span class="add-on">$</span>
- <input class="span2" id="appendedPrependedInput" size="16" type="text">
+ <input class="span2" id="appendedPrependedInput" type="text">
<span class="add-on">.00</span>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend input-append"&gt;
- &lt;span class="add-on"&gt;$&lt;/span&gt;&lt;input class="span2" id="appendedPrependedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
+ &lt;span class="add-on"&gt;$&lt;/span&gt;
+ &lt;input class="span2" id="appendedPrependedInput" type="text"&gt;
+ &lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;/div&gt;
</pre>
@@ -1167,23 +1171,139 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
<form class="bs-docs-example">
<div class="input-append">
- <input class="span2" id="appendedInputButton" size="16" type="text">
+ <input class="span2" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>
- <br>
+ </form>
+<pre class="prettyprint linenums">
+&lt;div class="input-append"&gt;
+ &lt;input class="span2" id="appendedInputButton" type="text"&gt;
+ &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+&lt;/div&gt;
+</pre>
+ <form class="bs-docs-example">
<div class="input-append">
- <input class="span2" id="appendedInputButtons" size="16" type="text">
+ <input class="span2" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt;
- &lt;input class="span2" id="appendedInputButton" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+ &lt;input class="span2" id="appendedInputButtons" type="text"&gt;
+ &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
+ &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
&lt;/div&gt;
+</pre>
+ <h4>Button dropdowns</h4>
+ <p></p>
+ <form class="bs-docs-example">
+ <div class="input-append">
+ <input class="span2" id="appendedDropdownButton" type="text">
+ <div class="btn-group">
+ <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ </div><!-- /input-append -->
+ </form>
+<pre class="prettyprint linenums">
&lt;div class="input-append"&gt;
- &lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
+ &lt;input class="span2" id="appendedDropdownButton" type="text"&gt;
+ &lt;div class="btn-group"&gt;
+ &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
+ Action
+ &lt;span class="caret"&gt;&lt;/span&gt;
+ &lt;/button&gt;
+ &lt;ul class="dropdown-menu"&gt;
+ ...
+ &lt;/ul&gt;
+ &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+ <form class="bs-docs-example">
+ <div class="input-prepend">
+ <div class="btn-group">
+ <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <input class="span2" id="prependedDropdownButton" type="text">
+ </div><!-- /input-prepend -->
+ </form>
+<pre class="prettyprint linenums">
+&lt;div class="input-prepend"&gt;
+ &lt;div class="btn-group"&gt;
+ &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
+ Action
+ &lt;span class="caret"&gt;&lt;/span&gt;
+ &lt;/button&gt;
+ &lt;ul class="dropdown-menu"&gt;
+ ...
+ &lt;/ul&gt;
+ &lt;/div&gt;
+ &lt;input class="span2" id="prependedDropdownButton" type="text"&gt;
+&lt;/div&gt;
+</pre>
+
+ <form class="bs-docs-example">
+ <div class="input-prepend input-append">
+ <div class="btn-group">
+ <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ <input class="span2" id="appendedPrependedDropdownButton" type="text">
+ <div class="btn-group">
+ <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div><!-- /btn-group -->
+ </div><!-- /input-prepend input-append -->
+ </form>
+<pre class="prettyprint linenums">
+&lt;div class="input-prepend input-append"&gt;
+ &lt;div class="btn-group"&gt;
+ &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
+ Action
+ &lt;span class="caret"&gt;&lt;/span&gt;
+ &lt;/button&gt;
+ &lt;ul class="dropdown-menu"&gt;
+ ...
+ &lt;/ul&gt;
+ &lt;/div&gt;
+ &lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;
+ &lt;div class="btn-group"&gt;
+ &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
+ Action
+ &lt;span class="caret"&gt;&lt;/span&gt;
+ &lt;/button&gt;
+ &lt;ul class="dropdown-menu"&gt;
+ ...
+ &lt;/ul&gt;
+ &lt;/div&gt;
&lt;/div&gt;
</pre>