Tweak the docs and address the new forms list of controls: radios and checkboxes are now hanging controls to wrap text properly
This commit is contained in:
Mark Otto
parent
20add59de3
commit
23e5fc2133
|
|
@ -6,7 +6,7 @@
|
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Thu Jan 5 10:00:31 PST 2012
|
||||
* Date: Thu Jan 5 14:10:04 PST 2012
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
|
|
@ -615,6 +615,16 @@ input[type=image] {
|
|||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
.radio, .checkbox {
|
||||
padding-left: 18px;
|
||||
}
|
||||
.radio input[type=radio], .checkbox input[type=checkbox] {
|
||||
float: left;
|
||||
margin-left: -18px;
|
||||
}
|
||||
.controls > .radio:first-child, .controls > .checkbox:first-child {
|
||||
padding-top: 6px;
|
||||
}
|
||||
input, textarea {
|
||||
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -986,9 +996,6 @@ textarea[readonly] {
|
|||
.horizontal-form .controls {
|
||||
margin-left: 150px;
|
||||
}
|
||||
.horizontal-form .controls > .radio:first-child, .horizontal-form .controls > .checkbox:first-child {
|
||||
padding-top: 6px;
|
||||
}
|
||||
.horizontal-form .form-actions {
|
||||
padding-left: 150px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,6 +104,9 @@ select{background-color:#ffffff;vertical-align:middle;}
|
|||
select[multiple],select[size]{height:inherit;}
|
||||
input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
|
||||
textarea{height:auto;}
|
||||
.radio,.checkbox{padding-left:18px;}
|
||||
.radio input[type=radio],.checkbox input[type=checkbox]{float:left;margin-left:-18px;}
|
||||
.controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:6px;}
|
||||
input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;}
|
||||
input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;}
|
||||
input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;}
|
||||
|
|
@ -159,7 +162,6 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
|
|||
.control-group>label{font-weight:bold;}
|
||||
.horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
|
||||
.horizontal-form .controls{margin-left:150px;}
|
||||
.horizontal-form .controls>.radio:first-child,.horizontal-form .controls>.checkbox:first-child{padding-top:6px;}
|
||||
.horizontal-form .form-actions{padding-left:150px;}
|
||||
table{width:100%;margin-bottom:18px;}
|
||||
th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,11 @@ body > .navbar-fixed .brand:hover {
|
|||
/* Space out sub-sections more
|
||||
-------------------------------------------------- */
|
||||
.page-header {
|
||||
margin-top: 36px;
|
||||
margin: 36px 0 18px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.page-header h1 {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -795,9 +795,16 @@ Form states
|
|||
warning
|
||||
error
|
||||
success
|
||||
|
||||
-->
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Flexible markup and styles</h3>
|
||||
<p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Four types of forms</h2>
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -116,6 +116,28 @@ textarea {
|
|||
|
||||
|
||||
|
||||
// CHECKBOXES & RADIOS
|
||||
// -------------------
|
||||
|
||||
// Indent the labels to position radios/checkboxes as hanging
|
||||
.radio,
|
||||
.checkbox {
|
||||
padding-left: 18px;
|
||||
}
|
||||
.radio input[type=radio],
|
||||
.checkbox input[type=checkbox] {
|
||||
float: left;
|
||||
margin-left: -18px;
|
||||
}
|
||||
|
||||
// Move the options list down to align with labels
|
||||
.controls > .radio:first-child,
|
||||
.controls > .checkbox:first-child {
|
||||
padding-top: 6px; // has to be padding because margin collaspes
|
||||
}
|
||||
|
||||
|
||||
|
||||
// FOCUS STATE
|
||||
// -----------
|
||||
|
||||
|
|
@ -390,11 +412,6 @@ textarea[readonly] {
|
|||
.controls {
|
||||
margin-left: 150px;
|
||||
}
|
||||
// Move the options list down to align with labels
|
||||
.controls > .radio:first-child,
|
||||
.controls > .checkbox:first-child {
|
||||
padding-top: 6px; // has to be padding because margin collaspes
|
||||
}
|
||||
// Move over buttons in .form-actions to align with .controls
|
||||
.form-actions {
|
||||
padding-left: 150px;
|
||||
|
|
|
|||
|
|
@ -28,16 +28,3 @@ footer {
|
|||
margin-top: @baseLineHeight - 1;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
// PAGE HEADERS
|
||||
// ------------
|
||||
|
||||
.page-header {
|
||||
margin-bottom: @baseLineHeight * 1.5;
|
||||
border-bottom: 1px solid #eee;
|
||||
.box-shadow(0 1px 0 rgba(255,255,255,.5));
|
||||
h1 {
|
||||
margin-bottom: @baseLineHeight * .75;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue