mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
latest tweaks to grid classes for forms
This commit is contained in:
Mark Otto
parent
b53da4b6e7
commit
dd1bce2611
94
docs/assets/css/bootstrap-responsive.css
vendored
94
docs/assets/css/bootstrap-responsive.css
vendored
@ -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;
|
||||
}
|
||||
|
||||
108
docs/assets/css/bootstrap.css
vendored
108
docs/assets/css/bootstrap.css
vendored
@ -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"],
|
||||
|
||||
@ -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"],
|
||||
|
||||
@ -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);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
|
||||
// Fixed grid
|
||||
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
|
||||
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
|
||||
|
||||
// Thumbnails
|
||||
.thumbnails {
|
||||
|
||||
@ -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>
|
||||
<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>No additional markup</h4>
|
||||
<input type="text" class="span4" placeholder=".span4">
|
||||
<input type="text" class="span4" placeholder=".span4">
|
||||
<input type="text" class="span4" placeholder=".span4">
|
||||
|
||||
<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 -->
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user