Skip to content

B
bootstrap
Commit 7313702c authored by Mark Otto's avatar Mark Otto
Browse files
Options

Inputs now 100% width by default 

* Includes text inputs, selects, and textareas
* Updated docs to include .span* sizes wherever possible
* Commented out responsive 1200px inputs grid
* Still some derp to be done to improve more, but this is a decent first stab
parent 8d09e7c2
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 325 deletions
docs/assets/css/bootstrap.css
View file @ 7313702c
...@@ -790,9 +790,10 @@ input[type="color"], ...@@ -790,9 +790,10 @@ input[type="color"],
} }
input, input,
select,
textarea, textarea,
.uneditable-input { .uneditable-input {
width: 220px; width: 100%;
} }
textarea { textarea {
...@@ -877,7 +878,6 @@ input[type="file"] { ...@@ -877,7 +878,6 @@ input[type="file"] {
} }
select { select {
width: 220px;
border: 1px solid #cccccc; border: 1px solid #cccccc;
} }
...@@ -1037,114 +1037,6 @@ textarea[class*="span"], ...@@ -1037,114 +1037,6 @@ textarea[class*="span"],
margin-left: 0; margin-left: 0;
} }
.controls-row input.span12,
textarea.span12,
select.span12,
.uneditable-input.span12 {
width: 97.87234042553192%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span11,
textarea.span11,
select.span11,
.uneditable-input.span11 {
width: 89.53900709219857%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span10,
textarea.span10,
select.span10,
.uneditable-input.span10 {
width: 81.20567375886526%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span9,
textarea.span9,
select.span9,
.uneditable-input.span9 {
width: 72.87234042553192%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span8,
textarea.span8,
select.span8,
.uneditable-input.span8 {
width: 64.53900709219857%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span7,
textarea.span7,
select.span7,
.uneditable-input.span7 {
width: 56.20567375886525%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span6,
textarea.span6,
select.span6,
.uneditable-input.span6 {
width: 47.87234042553192%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span5,
textarea.span5,
select.span5,
.uneditable-input.span5 {
width: 39.53900709219859%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span4,
textarea.span4,
select.span4,
.uneditable-input.span4 {
width: 31.205673758865245%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span3,
textarea.span3,
select.span3,
.uneditable-input.span3 {
width: 22.872340425531917%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span2,
textarea.span2,
select.span2,
.uneditable-input.span2 {
width: 14.53900709219858%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span1,
textarea.span1,
select.span1,
.uneditable-input.span1 {
width: 6.205673758865247%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.offset12, .controls-row input.offset12,
textarea.offset12, textarea.offset12,
select.offset12, select.offset12,
...@@ -5665,174 +5557,6 @@ a.badge:hover { ...@@ -5665,174 +5557,6 @@ a.badge:hover {
.offset1 { .offset1 {
margin-left: 8.333333333333332%; margin-left: 8.333333333333332%;
} }
input.span12,
textarea.span12,
select.span12,
.uneditable-input.span12 {
width: 97.43589743589743%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span11,
textarea.span11,
select.span11,
.uneditable-input.span11 {
width: 89.10256410256409%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span10,
textarea.span10,
select.span10,
.uneditable-input.span10 {
width: 80.76923076923077%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span9,
textarea.span9,
select.span9,
.uneditable-input.span9 {
width: 72.43589743589743%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span8,
textarea.span8,
select.span8,
.uneditable-input.span8 {
width: 64.10256410256409%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span7,
textarea.span7,
select.span7,
.uneditable-input.span7 {
width: 55.769230769230774%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span6,
textarea.span6,
select.span6,
.uneditable-input.span6 {
width: 47.43589743589744%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span5,
textarea.span5,
select.span5,
.uneditable-input.span5 {
width: 39.10256410256411%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span4,
textarea.span4,
select.span4,
.uneditable-input.span4 {
width: 30.769230769230766%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span3,
textarea.span3,
select.span3,
.uneditable-input.span3 {
width: 22.435897435897438%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span2,
textarea.span2,
select.span2,
.uneditable-input.span2 {
width: 14.1025641025641%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span1,
textarea.span1,
select.span1,
.uneditable-input.span1 {
width: 5.769230769230768%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.offset12,
textarea.offset12,
select.offset12,
uneditable-input.offset12 {
margin-left: 101.28205128205128%;
}
input.offset11,
textarea.offset11,
select.offset11,
uneditable-input.offset11 {
margin-left: 92.94871794871794%;
}
input.offset10,
textarea.offset10,
select.offset10,
uneditable-input.offset10 {
margin-left: 84.61538461538463%;
}
input.offset9,
textarea.offset9,
select.offset9,
uneditable-input.offset9 {
margin-left: 76.28205128205128%;
}
input.offset8,
textarea.offset8,
select.offset8,
uneditable-input.offset8 {
margin-left: 67.94871794871794%;
}
input.offset7,
textarea.offset7,
select.offset7,
uneditable-input.offset7 {
margin-left: 59.61538461538462%;
}
input.offset6,
textarea.offset6,
select.offset6,
uneditable-input.offset6 {
margin-left: 51.282051282051285%;
}
input.offset5,
textarea.offset5,
select.offset5,
uneditable-input.offset5 {
margin-left: 42.948717948717956%;
}
input.offset4,
textarea.offset4,
select.offset4,
uneditable-input.offset4 {
margin-left: 34.61538461538461%;
}
input.offset3,
textarea.offset3,
select.offset3,
uneditable-input.offset3 {
margin-left: 26.28205128205128%;
}
input.offset2,
textarea.offset2,
select.offset2,
uneditable-input.offset2 {
margin-left: 17.948717948717945%;
}
input.offset1,
textarea.offset1,
select.offset1,
uneditable-input.offset1 {
margin-left: 9.615384615384613%;
}
} }
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
......
docs/base-css.html
View file @ 7313702c
...@@ -923,12 +923,12 @@ For example, <code><section></code> should be wrapped as inlin ...@@ -923,12 +923,12 @@ For example, <code><section></code> should be wrapped as inlin
<h3>Search form</h3> <h3>Search form</h3>
<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>&lt;input&gt;</code> for an extra-rounded text input.</p> <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>&lt;input&gt;</code> for an extra-rounded text input.</p>
<form class="bs-docs-example form-search"> <form class="bs-docs-example form-search">
<input type="text" class="input-medium search-query"> <input type="text" class="span3 search-query">
<button type="submit" class="btn">Search</button> <button type="submit" class="btn">Search</button>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="form-search"&gt; &lt;form class="form-search"&gt;
&lt;input type="text" class="input-medium search-query"&gt; &lt;input type="text" class="span3 search-query"&gt;
&lt;button type="submit" class="btn"&gt;Search&lt;/button&gt; &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
...@@ -936,8 +936,8 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -936,8 +936,8 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h3>Inline form</h3> <h3>Inline form</h3>
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p> <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input type="text" class="input-small" placeholder="Email"> <input type="text" class="span3" placeholder="Email">
<input type="password" class="input-small" placeholder="Password"> <input type="password" class="span3" placeholder="Password">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
</label> </label>
...@@ -945,8 +945,8 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -945,8 +945,8 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="form-inline"&gt; &lt;form class="form-inline"&gt;
&lt;input type="text" class="input-small" placeholder="Email"&gt; &lt;input type="text" class="span3" placeholder="Email"&gt;
&lt;input type="password" class="input-small" placeholder="Password"&gt; &lt;input type="password" class="span3" placeholder="Password"&gt;
&lt;label class="checkbox"&gt; &lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; Remember me &lt;input type="checkbox"&gt; Remember me
&lt;/label&gt; &lt;/label&gt;
...@@ -1186,26 +1186,26 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1186,26 +1186,26 @@ 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> <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"> <form class="bs-docs-example">
<div class="input-append"> <div class="input-append">
<input id="appendedInputButton" type="text"> <input class="span3" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button> <button class="btn" type="button">Go!</button>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input class="span2" id="appendedInputButton" type="text"&gt; &lt;input class="span3" id="appendedInputButton" type="text"&gt;
&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt; &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-append"> <div class="input-append">
<input id="appendedInputButtons" type="text"> <input class="span3" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button> <button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button> <button class="btn" type="button">Options</button>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input id="appendedInputButton" type="text"&gt; &lt;input class="span3" id="appendedInputButton" type="text"&gt;
&lt;button class="btn" type="button"&gt;Search&lt;/button&gt; &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
&lt;button class="btn" type="button"&gt;Options&lt;/button&gt; &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
...@@ -1215,7 +1215,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1215,7 +1215,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<p></p> <p></p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedDropdownButton" type="text"> <input class="span3" id="appendedDropdownButton" type="text">
<div class="btn-group"> <div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
...@@ -1231,7 +1231,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1231,7 +1231,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input id="appendedInputButtons" type="text"&gt; &lt;input id="appendedInputButtons" type="text"&gt;
&lt;input class="span2" id="appendedDropdownButton" type="text"&gt; &lt;input class="span3" id="appendedDropdownButton" type="text"&gt;
&lt;div class="btn-group"&gt; &lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt; &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
Action Action
...@@ -1339,10 +1339,10 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1339,10 +1339,10 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div> </div>
<input type="text"> <input type="text" class="span3">
</div> </div>
<div class="input-append"> <div class="input-append">
<input type="text"> <input type="text" class="span3">
<div class="btn-group"> <div class="btn-group">
<button class="btn" tabindex="-1">Action</button> <button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
...@@ -1362,10 +1362,10 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1362,10 +1362,10 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;form&gt; &lt;form&gt;
&lt;div class="input-prepend"&gt; &lt;div class="input-prepend"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt; &lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;input type="text"&gt; &lt;input type="text" class="span3"&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input type="text"&gt; &lt;input type="text" class="span3"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt; &lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/form&gt; &lt;/form&gt;
...@@ -1374,23 +1374,23 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1374,23 +1374,23 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h4>Search form</h4> <h4>Search form</h4>
<form class="bs-docs-example form-search"> <form class="bs-docs-example form-search">
<div class="input-append"> <div class="input-append">
<input type="text" class="search-query"> <input type="text" class="search-query span3">
<button type="submit" class="btn">Search</button> <button type="submit" class="btn">Search</button>
</div> </div>
<div class="input-prepend"> <div class="input-prepend">
<button type="submit" class="btn">Search</button> <button type="submit" class="btn">Search</button>
<input type="text" class="search-query"> <input type="text" class="search-query span3">
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="form-search"&gt; &lt;form class="form-search"&gt;
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input type="text" class="search-query"&gt; &lt;input type="text" class="search-query span3"&gt;
&lt;button type="submit" class="btn"&gt;Search&lt;/button&gt; &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="input-prepend"&gt; &lt;div class="input-prepend"&gt;
&lt;button type="submit" class="btn"&gt;Search&lt;/button&gt; &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;input type="text" class="search-query"&gt; &lt;input type="text" class="search-query span3"&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
......
docs/templates/pages/base-css.mustache
View file @ 7313702c
...@@ -863,12 +863,12 @@ ...@@ -863,12 +863,12 @@
<h3>{{_i}}Search form{{/i}}</h3> <h3>{{_i}}Search form{{/i}}</h3>
<p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>&lt;input&gt;</code> for an extra-rounded text input.{{/i}}</p> <p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>&lt;input&gt;</code> for an extra-rounded text input.{{/i}}</p>
<form class="bs-docs-example form-search"> <form class="bs-docs-example form-search">
<input type="text" class="input-medium search-query"> <input type="text" class="span3 search-query">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button> <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</form>{{! /example }} </form>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="form-search"&gt; &lt;form class="form-search"&gt;
&lt;input type="text" class="input-medium search-query"&gt; &lt;input type="text" class="span3 search-query"&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt; &lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
...@@ -876,8 +876,8 @@ ...@@ -876,8 +876,8 @@
<h3>{{_i}}Inline form{{/i}}</h3> <h3>{{_i}}Inline form{{/i}}</h3>
<p>{{_i}}Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.{{/i}}</p> <p>{{_i}}Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.{{/i}}</p>
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"> <input type="text" class="span3" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"> <input type="password" class="span3" placeholder="{{_i}}Password{{/i}}">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> {{_i}}Remember me{{/i}} <input type="checkbox"> {{_i}}Remember me{{/i}}
</label> </label>
...@@ -885,8 +885,8 @@ ...@@ -885,8 +885,8 @@
</form>{{! /example }} </form>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="form-inline"&gt; &lt;form class="form-inline"&gt;
&lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt; &lt;input type="text" class="span3" placeholder="{{_i}}Email{{/i}}"&gt;
&lt;input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"&gt; &lt;input type="password" class="span3" placeholder="{{_i}}Password{{/i}}"&gt;
&lt;label class="checkbox"&gt; &lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; {{_i}}Remember me{{/i}} &lt;input type="checkbox"&gt; {{_i}}Remember me{{/i}}
&lt;/label&gt; &lt;/label&gt;
...@@ -1126,26 +1126,26 @@ ...@@ -1126,26 +1126,26 @@
<p>{{_i}}Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p> <p>{{_i}}Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-append"> <div class="input-append">
<input id="appendedInputButton" type="text"> <input class="span3" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button> <button class="btn" type="button">Go!</button>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input class="span2" id="appendedInputButton" type="text"&gt; &lt;input class="span3" id="appendedInputButton" type="text"&gt;
&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt; &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-append"> <div class="input-append">
<input id="appendedInputButtons" type="text"> <input class="span3" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button> <button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button> <button class="btn" type="button">Options</button>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input id="appendedInputButton" type="text"&gt; &lt;input class="span3" id="appendedInputButton" type="text"&gt;
&lt;button class="btn" type="button"&gt;Search&lt;/button&gt; &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
&lt;button class="btn" type="button"&gt;Options&lt;/button&gt; &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
...@@ -1155,7 +1155,7 @@ ...@@ -1155,7 +1155,7 @@
<p>{{_i}}{{/i}}</p> <p>{{_i}}{{/i}}</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedDropdownButton" type="text"> <input class="span3" id="appendedDropdownButton" type="text">
<div class="btn-group"> <div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button> <button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
...@@ -1171,7 +1171,7 @@ ...@@ -1171,7 +1171,7 @@
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input id="appendedInputButtons" type="text"&gt; &lt;input id="appendedInputButtons" type="text"&gt;
&lt;input class="span2" id="appendedDropdownButton" type="text"&gt; &lt;input class="span3" id="appendedDropdownButton" type="text"&gt;
&lt;div class="btn-group"&gt; &lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt; &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
{{_i}}Action{{/i}} {{_i}}Action{{/i}}
...@@ -1279,10 +1279,10 @@ ...@@ -1279,10 +1279,10 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li> <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul> </ul>
</div> </div>
<input type="text"> <input type="text" class="span3">
</div> </div>
<div class="input-append"> <div class="input-append">
<input type="text"> <input type="text" class="span3">
<div class="btn-group"> <div class="btn-group">
<button class="btn" tabindex="-1">Action</button> <button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
...@@ -1302,10 +1302,10 @@ ...@@ -1302,10 +1302,10 @@
&lt;form&gt; &lt;form&gt;
&lt;div class="input-prepend"&gt; &lt;div class="input-prepend"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt; &lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;input type="text"&gt; &lt;input type="text" class="span3"&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input type="text"&gt; &lt;input type="text" class="span3"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt; &lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/form&gt; &lt;/form&gt;
...@@ -1314,23 +1314,23 @@ ...@@ -1314,23 +1314,23 @@
<h4>{{_i}}Search form{{/i}}</h4> <h4>{{_i}}Search form{{/i}}</h4>
<form class="bs-docs-example form-search"> <form class="bs-docs-example form-search">
<div class="input-append"> <div class="input-append">
<input type="text" class="search-query"> <input type="text" class="search-query span3">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button> <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</div> </div>
<div class="input-prepend"> <div class="input-prepend">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button> <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
<input type="text" class="search-query"> <input type="text" class="search-query span3">
</div> </div>
</form>{{! /example }} </form>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="form-search"&gt; &lt;form class="form-search"&gt;
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input type="text" class="search-query"&gt; &lt;input type="text" class="search-query span3"&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt; &lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="input-prepend"&gt; &lt;div class="input-prepend"&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt; &lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
&lt;input type="text" class="search-query"&gt; &lt;input type="text" class="search-query span3"&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
......
less/forms.less
View file @ 7313702c
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
// General styles // General styles
// ------------------------- // -------------------------
form { form {
margin: 0 0 @baseLineHeight; margin: 0 0 @baseLineHeight;
} }
...@@ -68,16 +69,19 @@ input[type="color"], ...@@ -68,16 +69,19 @@ input[type="color"],
} }
// Reset appearance properties for textual inputs and textarea // Reset appearance properties for textual inputs and textarea
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific) // Can't be on input[type=*] selectors or it's too specific
input, input,
select,
textarea, textarea,
.uneditable-input { .uneditable-input {
width: 220px; width: 100%;
} }
// Reset height since textareas have rows // Reset height since textareas have rows
textarea { textarea {
height: auto; height: auto;
} }
// Everything else // Everything else
textarea, textarea,
input[type="text"], input[type="text"],
...@@ -135,8 +139,8 @@ input[type="file"] { ...@@ -135,8 +139,8 @@ input[type="file"] {
} }
// Make select elements obey height by applying a border // Make select elements obey height by applying a border
// TODO: See if this can be part of the above selector stack
select { select {
width: 220px; // default input width + 10px of padding that doesn't get applied
border: 1px solid @inputBorder; border: 1px solid @inputBorder;
} }
......
less/mixins.less
View file @ 7313702c
...@@ -550,11 +550,12 @@ ...@@ -550,11 +550,12 @@
.offsetX(0) {} .offsetX(0) {}
.span(@columns) { .span(@columns) {
// TODO: Figure out how to add this back behind a class
// Part 1: Since inputs require padding *and* margin, we subtract the grid gutter width, as a percent of the row, from the default column width. // Part 1: Since inputs require padding *and* margin, we subtract the grid gutter width, as a percent of the row, from the default column width.
width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth); //width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth);
// Part 2: That subtracted width then gets split in half and added to the left and right margins. // Part 2: That subtracted width then gets split in half and added to the left and right margins.
margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth); // margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth);
margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth); // margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth);
} }
.offset(@columns) { .offset(@columns) {
......
less/responsive-1200px-min.less
View file @ 7313702c
...@@ -14,6 +14,6 @@ ...@@ -14,6 +14,6 @@
// Fixed grid // Fixed grid
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200); #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200); // #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
} }
Markdown is supported
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