Skip to content

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

latest tweaks to grid classes for forms

parent b53da4b6
Hide whitespace changes
Inline Side-by-side
Showing with 256 additions and 8 deletions
docs/assets/css/bootstrap-responsive.css
View file @ dd1bce26
......@@ -192,6 +192,100 @@
.offset1 {
margin-left: 8.333333333333332%;
}
input[class*="span"]:first-child,
textarea[class*="span"]:first-child,
.uneditable-input[class*="span"]:first-child {
margin-left: 0;
}
input[class*="span"]:last-child,
textarea[class*="span"]:last-child,
.uneditable-input[class*="span"]:last-child {
margin-right: 0;
}
input.span12,
textarea.span12,
.uneditable-input.span12 {
width: 97.43589743589743%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span11,
textarea.span11,
.uneditable-input.span11 {
width: 89.10256410256409%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span10,
textarea.span10,
.uneditable-input.span10 {
width: 80.76923076923077%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span9,
textarea.span9,
.uneditable-input.span9 {
width: 72.43589743589743%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span8,
textarea.span8,
.uneditable-input.span8 {
width: 64.10256410256409%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span7,
textarea.span7,
.uneditable-input.span7 {
width: 55.769230769230774%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span6,
textarea.span6,
.uneditable-input.span6 {
width: 47.43589743589744%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span5,
textarea.span5,
.uneditable-input.span5 {
width: 39.10256410256411%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span4,
textarea.span4,
.uneditable-input.span4 {
width: 30.769230769230766%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span3,
textarea.span3,
.uneditable-input.span3 {
width: 22.435897435897438%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span2,
textarea.span2,
.uneditable-input.span2 {
width: 14.1025641025641%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span1,
textarea.span1,
.uneditable-input.span1 {
width: 5.769230769230768%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
.thumbnails {
margin-left: -30px;
}
......
docs/assets/css/bootstrap.css
View file @ dd1bce26
......@@ -997,6 +997,114 @@ textarea[class*="span"],
display: inline-block;
}
.controls-row input[class*="span"]:first-child,
.controls-row textarea[class*="span"]:first-child,
.controls-row .uneditable-input[class*="span"]:first-child {
margin-left: 0;
}
.controls-row input[class*="span"]:last-child,
.controls-row textarea[class*="span"]:last-child,
.controls-row .uneditable-input[class*="span"]:last-child {
margin-right: 0;
}
.controls-row input.span12,
textarea.span12,
.uneditable-input.span12 {
width: 97.87234042553192%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span11,
textarea.span11,
.uneditable-input.span11 {
width: 89.53900709219857%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span10,
textarea.span10,
.uneditable-input.span10 {
width: 81.20567375886526%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span9,
textarea.span9,
.uneditable-input.span9 {
width: 72.87234042553192%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span8,
textarea.span8,
.uneditable-input.span8 {
width: 64.53900709219857%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span7,
textarea.span7,
.uneditable-input.span7 {
width: 56.20567375886525%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span6,
textarea.span6,
.uneditable-input.span6 {
width: 47.87234042553192%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span5,
textarea.span5,
.uneditable-input.span5 {
width: 39.53900709219859%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span4,
textarea.span4,
.uneditable-input.span4 {
width: 31.205673758865245%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span3,
textarea.span3,
.uneditable-input.span3 {
width: 22.872340425531917%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span2,
textarea.span2,
.uneditable-input.span2 {
width: 14.53900709219858%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span1,
textarea.span1,
.uneditable-input.span1 {
width: 6.205673758865247%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
......
less/forms.less
View file @ dd1bce26
......@@ -297,6 +297,10 @@ textarea[class*="span"],
// GRID SIZING FOR INPUTS
// ----------------------
.controls-row {
#grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
}
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
......
less/mixins.less
View file @ dd1bce26
......@@ -599,4 +599,38 @@
}
.input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
.spanX (@index) when (@index > 0) {
(~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
.span(@columns) {
width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth);
margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth);
margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth);
}
// Space grid-sized controls properly if multiple per line
input[class*="span"]:first-child,
textarea[class*="span"]:first-child,
.uneditable-input[class*="span"]:first-child {
margin-left: 0;
}
input[class*="span"]:last-child,
textarea[class*="span"]:last-child,
.uneditable-input[class*="span"]:last-child {
margin-right: 0;
}
// generate .spanX
.spanX (@gridColumns);
}
}
less/responsive-1200px-min.less
View file @ dd1bce26
......@@ -14,6 +14,7 @@
// Fixed grid
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
// Thumbnails
.thumbnails {
......
less/tests/grid.html
View file @ dd1bce26
......@@ -16,6 +16,8 @@
padding-top: 30px;
padding-bottom: 30px;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
......@@ -73,19 +75,24 @@
<h2>Inputs</h2>
<h4>No additional markup</h4>
<input type="text" class="span4" placeholder=".span4">
<input type="text" class="span4" placeholder=".span4">
<input type="text" class="span1" placeholder=".span1">
<input type="text" class="span2" placeholder=".span2">
<input type="text" class="span4" placeholder=".span4">
<input type="text" class="span5" placeholder=".span5">
<h4>With .controls-row</h4>
<div class="controls-row">
<input type="text" class="span4" placeholder=".span4">
<input type="text" class="span4" placeholder=".span4">
<div class="row">
<input type="text" class="span1" placeholder=".span1">
<input type="text" class="span2" placeholder=".span2">
<input type="text" class="span4" placeholder=".span4">
<input type="text" class="span5" placeholder=".span5">
</div>
<div class="controls-row">
<input type="text" class="span1" placeholder=".span1">
<input type="text" class="span2" placeholder=".span2">
<input type="text" class="span4" placeholder=".span4">
<input type="text" class="span5" placeholder=".span5">
</div>
</form> <!-- /container -->
......
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