mirror of https://github.com/twbs/bootstrap.git
				
				
				
			headway, cleanup, and tests
This commit is contained in:
		
							parent
							
								
									7110b243f5
								
							
						
					
					
						commit
						527d01ce99
					
				| 
						 | 
				
			
			@ -192,100 +192,174 @@
 | 
			
		|||
  .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,
 | 
			
		||||
  select.span12,
 | 
			
		||||
  .uneditable-input.span12 {
 | 
			
		||||
    width: 99.97589305281613%;
 | 
			
		||||
    width: 97.43589743589743%;
 | 
			
		||||
    margin-right: 1.282051282051282%;
 | 
			
		||||
    margin-left: 1.282051282051282%;
 | 
			
		||||
  }
 | 
			
		||||
  input.span11,
 | 
			
		||||
  textarea.span11,
 | 
			
		||||
  select.span11,
 | 
			
		||||
  .uneditable-input.span11 {
 | 
			
		||||
    width: 91.64657754401344%;
 | 
			
		||||
    width: 89.10256410256409%;
 | 
			
		||||
    margin-right: 1.282051282051282%;
 | 
			
		||||
    margin-left: 1.282051282051282%;
 | 
			
		||||
  }
 | 
			
		||||
  input.span10,
 | 
			
		||||
  textarea.span10,
 | 
			
		||||
  select.span10,
 | 
			
		||||
  .uneditable-input.span10 {
 | 
			
		||||
    width: 83.31689677843524%;
 | 
			
		||||
    width: 80.76923076923077%;
 | 
			
		||||
    margin-right: 1.282051282051282%;
 | 
			
		||||
    margin-left: 1.282051282051282%;
 | 
			
		||||
  }
 | 
			
		||||
  input.span9,
 | 
			
		||||
  textarea.span9,
 | 
			
		||||
  select.span9,
 | 
			
		||||
  .uneditable-input.span9 {
 | 
			
		||||
    width: 74.98685075608152%;
 | 
			
		||||
    width: 72.43589743589743%;
 | 
			
		||||
    margin-right: 1.282051282051282%;
 | 
			
		||||
    margin-left: 1.282051282051282%;
 | 
			
		||||
  }
 | 
			
		||||
  input.span8,
 | 
			
		||||
  textarea.span8,
 | 
			
		||||
  select.span8,
 | 
			
		||||
  .uneditable-input.span8 {
 | 
			
		||||
    width: 66.6564394769523%;
 | 
			
		||||
    width: 64.10256410256409%;
 | 
			
		||||
    margin-right: 1.282051282051282%;
 | 
			
		||||
    margin-left: 1.282051282051282%;
 | 
			
		||||
  }
 | 
			
		||||
  input.span7,
 | 
			
		||||
  textarea.span7,
 | 
			
		||||
  select.span7,
 | 
			
		||||
  .uneditable-input.span7 {
 | 
			
		||||
    width: 58.325662941047554%;
 | 
			
		||||
    width: 55.769230769230774%;
 | 
			
		||||
    margin-right: 1.282051282051282%;
 | 
			
		||||
    margin-left: 1.282051282051282%;
 | 
			
		||||
  }
 | 
			
		||||
  input.span6,
 | 
			
		||||
  textarea.span6,
 | 
			
		||||
  select.span6,
 | 
			
		||||
  .uneditable-input.span6 {
 | 
			
		||||
    width: 49.994521148367305%;
 | 
			
		||||
    width: 47.43589743589744%;
 | 
			
		||||
    margin-right: 1.282051282051282%;
 | 
			
		||||
    margin-left: 1.282051282051282%;
 | 
			
		||||
  }
 | 
			
		||||
  input.span5,
 | 
			
		||||
  textarea.span5,
 | 
			
		||||
  select.span5,
 | 
			
		||||
  .uneditable-input.span5 {
 | 
			
		||||
    width: 41.663014098911525%;
 | 
			
		||||
    width: 39.10256410256411%;
 | 
			
		||||
    margin-right: 1.282051282051282%;
 | 
			
		||||
    margin-left: 1.282051282051282%;
 | 
			
		||||
  }
 | 
			
		||||
  input.span4,
 | 
			
		||||
  textarea.span4,
 | 
			
		||||
  select.span4,
 | 
			
		||||
  .uneditable-input.span4 {
 | 
			
		||||
    width: 33.33114179268025%;
 | 
			
		||||
    width: 30.769230769230766%;
 | 
			
		||||
    margin-right: 1.282051282051282%;
 | 
			
		||||
    margin-left: 1.282051282051282%;
 | 
			
		||||
  }
 | 
			
		||||
  input.span3,
 | 
			
		||||
  textarea.span3,
 | 
			
		||||
  select.span3,
 | 
			
		||||
  .uneditable-input.span3 {
 | 
			
		||||
    width: 24.998904229673464%;
 | 
			
		||||
    width: 22.435897435897438%;
 | 
			
		||||
    margin-right: 1.282051282051282%;
 | 
			
		||||
    margin-left: 1.282051282051282%;
 | 
			
		||||
  }
 | 
			
		||||
  input.span2,
 | 
			
		||||
  textarea.span2,
 | 
			
		||||
  select.span2,
 | 
			
		||||
  .uneditable-input.span2 {
 | 
			
		||||
    width: 16.66630140989115%;
 | 
			
		||||
    width: 14.1025641025641%;
 | 
			
		||||
    margin-right: 1.282051282051282%;
 | 
			
		||||
    margin-left: 1.282051282051282%;
 | 
			
		||||
  }
 | 
			
		||||
  input.span1,
 | 
			
		||||
  textarea.span1,
 | 
			
		||||
  select.span1,
 | 
			
		||||
  .uneditable-input.span1 {
 | 
			
		||||
    width: 8.333333333333332%;
 | 
			
		||||
    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%;
 | 
			
		||||
  }
 | 
			
		||||
  .thumbnails {
 | 
			
		||||
    margin-left: -30px;
 | 
			
		||||
  }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -975,136 +975,211 @@ textarea::-webkit-input-placeholder {
 | 
			
		|||
input[class*="span"],
 | 
			
		||||
select[class*="span"],
 | 
			
		||||
textarea[class*="span"],
 | 
			
		||||
.uneditable-input[class*="span"],
 | 
			
		||||
.row-fluid input[class*="span"],
 | 
			
		||||
.row-fluid select[class*="span"],
 | 
			
		||||
.row-fluid textarea[class*="span"],
 | 
			
		||||
.row-fluid .uneditable-input[class*="span"] {
 | 
			
		||||
  xmargin-left: 0;
 | 
			
		||||
  xfloat: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.input-append input[class*="span"],
 | 
			
		||||
.input-append .uneditable-input[class*="span"],
 | 
			
		||||
.input-prepend input[class*="span"],
 | 
			
		||||
.input-prepend .uneditable-input[class*="span"],
 | 
			
		||||
.row-fluid input[class*="span"],
 | 
			
		||||
.row-fluid select[class*="span"],
 | 
			
		||||
.row-fluid textarea[class*="span"],
 | 
			
		||||
.row-fluid .uneditable-input[class*="span"],
 | 
			
		||||
.row-fluid .input-prepend [class*="span"],
 | 
			
		||||
.row-fluid .input-append [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 {
 | 
			
		||||
.uneditable-input[class*="span"] {
 | 
			
		||||
  float: none;
 | 
			
		||||
  margin-right: 0;
 | 
			
		||||
  margin-left: 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.span12,
 | 
			
		||||
textarea.span12,
 | 
			
		||||
select.span12,
 | 
			
		||||
.uneditable-input.span12 {
 | 
			
		||||
  width: 99.97510185604347%;
 | 
			
		||||
  width: 97.87234042553192%;
 | 
			
		||||
  margin-right: 1.0638297872340425%;
 | 
			
		||||
  margin-left: 1.0638297872340425%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.span11,
 | 
			
		||||
textarea.span11,
 | 
			
		||||
select.span11,
 | 
			
		||||
.uneditable-input.span11 {
 | 
			
		||||
  width: 91.64591821336955%;
 | 
			
		||||
  width: 89.53900709219857%;
 | 
			
		||||
  margin-right: 1.0638297872340425%;
 | 
			
		||||
  margin-left: 1.0638297872340425%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.span10,
 | 
			
		||||
textarea.span10,
 | 
			
		||||
select.span10,
 | 
			
		||||
.uneditable-input.span10 {
 | 
			
		||||
  width: 83.31635732609024%;
 | 
			
		||||
  width: 81.20567375886526%;
 | 
			
		||||
  margin-right: 1.0638297872340425%;
 | 
			
		||||
  margin-left: 1.0638297872340425%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.span9,
 | 
			
		||||
textarea.span9,
 | 
			
		||||
select.span9,
 | 
			
		||||
.uneditable-input.span9 {
 | 
			
		||||
  width: 74.98641919420552%;
 | 
			
		||||
  width: 72.87234042553192%;
 | 
			
		||||
  margin-right: 1.0638297872340425%;
 | 
			
		||||
  margin-left: 1.0638297872340425%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.span8,
 | 
			
		||||
textarea.span8,
 | 
			
		||||
select.span8,
 | 
			
		||||
.uneditable-input.span8 {
 | 
			
		||||
  width: 66.6561038177154%;
 | 
			
		||||
  width: 64.53900709219857%;
 | 
			
		||||
  margin-right: 1.0638297872340425%;
 | 
			
		||||
  margin-left: 1.0638297872340425%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.span7,
 | 
			
		||||
textarea.span7,
 | 
			
		||||
select.span7,
 | 
			
		||||
.uneditable-input.span7 {
 | 
			
		||||
  width: 58.32541119661988%;
 | 
			
		||||
  width: 56.20567375886525%;
 | 
			
		||||
  margin-right: 1.0638297872340425%;
 | 
			
		||||
  margin-left: 1.0638297872340425%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.span6,
 | 
			
		||||
textarea.span6,
 | 
			
		||||
select.span6,
 | 
			
		||||
.uneditable-input.span6 {
 | 
			
		||||
  width: 49.99434133091897%;
 | 
			
		||||
  width: 47.87234042553192%;
 | 
			
		||||
  margin-right: 1.0638297872340425%;
 | 
			
		||||
  margin-left: 1.0638297872340425%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.span5,
 | 
			
		||||
textarea.span5,
 | 
			
		||||
select.span5,
 | 
			
		||||
.uneditable-input.span5 {
 | 
			
		||||
  width: 41.66289422061264%;
 | 
			
		||||
  width: 39.53900709219859%;
 | 
			
		||||
  margin-right: 1.0638297872340425%;
 | 
			
		||||
  margin-left: 1.0638297872340425%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.span4,
 | 
			
		||||
textarea.span4,
 | 
			
		||||
select.span4,
 | 
			
		||||
.uneditable-input.span4 {
 | 
			
		||||
  width: 33.33106986570092%;
 | 
			
		||||
  width: 31.205673758865245%;
 | 
			
		||||
  margin-right: 1.0638297872340425%;
 | 
			
		||||
  margin-left: 1.0638297872340425%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.span3,
 | 
			
		||||
textarea.span3,
 | 
			
		||||
select.span3,
 | 
			
		||||
.uneditable-input.span3 {
 | 
			
		||||
  width: 24.998868266183795%;
 | 
			
		||||
  width: 22.872340425531917%;
 | 
			
		||||
  margin-right: 1.0638297872340425%;
 | 
			
		||||
  margin-left: 1.0638297872340425%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.span2,
 | 
			
		||||
textarea.span2,
 | 
			
		||||
select.span2,
 | 
			
		||||
.uneditable-input.span2 {
 | 
			
		||||
  width: 16.666289422061265%;
 | 
			
		||||
  width: 14.53900709219858%;
 | 
			
		||||
  margin-right: 1.0638297872340425%;
 | 
			
		||||
  margin-left: 1.0638297872340425%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.span1,
 | 
			
		||||
textarea.span1,
 | 
			
		||||
select.span1,
 | 
			
		||||
.uneditable-input.span1 {
 | 
			
		||||
  width: 8.333333333333332%;
 | 
			
		||||
  width: 6.205673758865247%;
 | 
			
		||||
  margin-right: 1.0638297872340425%;
 | 
			
		||||
  margin-left: 1.0638297872340425%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.offset12,
 | 
			
		||||
textarea.offset12,
 | 
			
		||||
select.offset12,
 | 
			
		||||
uneditable-input.offset12 {
 | 
			
		||||
  margin-left: 101.06382978723404%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.offset11,
 | 
			
		||||
textarea.offset11,
 | 
			
		||||
select.offset11,
 | 
			
		||||
uneditable-input.offset11 {
 | 
			
		||||
  margin-left: 92.7304964539007%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.offset10,
 | 
			
		||||
textarea.offset10,
 | 
			
		||||
select.offset10,
 | 
			
		||||
uneditable-input.offset10 {
 | 
			
		||||
  margin-left: 84.39716312056738%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.offset9,
 | 
			
		||||
textarea.offset9,
 | 
			
		||||
select.offset9,
 | 
			
		||||
uneditable-input.offset9 {
 | 
			
		||||
  margin-left: 76.06382978723404%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.offset8,
 | 
			
		||||
textarea.offset8,
 | 
			
		||||
select.offset8,
 | 
			
		||||
uneditable-input.offset8 {
 | 
			
		||||
  margin-left: 67.7304964539007%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.offset7,
 | 
			
		||||
textarea.offset7,
 | 
			
		||||
select.offset7,
 | 
			
		||||
uneditable-input.offset7 {
 | 
			
		||||
  margin-left: 59.39716312056738%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.offset6,
 | 
			
		||||
textarea.offset6,
 | 
			
		||||
select.offset6,
 | 
			
		||||
uneditable-input.offset6 {
 | 
			
		||||
  margin-left: 51.06382978723404%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.offset5,
 | 
			
		||||
textarea.offset5,
 | 
			
		||||
select.offset5,
 | 
			
		||||
uneditable-input.offset5 {
 | 
			
		||||
  margin-left: 42.73049645390071%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.offset4,
 | 
			
		||||
textarea.offset4,
 | 
			
		||||
select.offset4,
 | 
			
		||||
uneditable-input.offset4 {
 | 
			
		||||
  margin-left: 34.39716312056737%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.offset3,
 | 
			
		||||
textarea.offset3,
 | 
			
		||||
select.offset3,
 | 
			
		||||
uneditable-input.offset3 {
 | 
			
		||||
  margin-left: 26.06382978723404%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.offset2,
 | 
			
		||||
textarea.offset2,
 | 
			
		||||
select.offset2,
 | 
			
		||||
uneditable-input.offset2 {
 | 
			
		||||
  margin-left: 17.730496453900706%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row input.offset1,
 | 
			
		||||
textarea.offset1,
 | 
			
		||||
select.offset1,
 | 
			
		||||
uneditable-input.offset1 {
 | 
			
		||||
  margin-left: 9.397163120567374%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.input-append input[class*="span"],
 | 
			
		||||
.input-append .uneditable-input[class*="span"],
 | 
			
		||||
.input-prepend input[class*="span"],
 | 
			
		||||
.input-prepend .uneditable-input[class*="span"] {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
input[class*="span"],
 | 
			
		||||
select[class*="span"],
 | 
			
		||||
textarea[class*="span"],
 | 
			
		||||
| 
						 | 
				
			
			@ -1372,8 +1447,8 @@ select:focus:required:invalid:focus {
 | 
			
		|||
.input-append .uneditable-input,
 | 
			
		||||
.input-prepend .uneditable-input {
 | 
			
		||||
  position: relative;
 | 
			
		||||
  margin-bottom: 0;
 | 
			
		||||
  *margin-left: 0;
 | 
			
		||||
  float: none;
 | 
			
		||||
  margin: 0;
 | 
			
		||||
  font-size: 14px;
 | 
			
		||||
  vertical-align: top;
 | 
			
		||||
  -webkit-border-radius: 0 3px 3px 0;
 | 
			
		||||
| 
						 | 
				
			
			@ -1390,6 +1465,15 @@ select:focus:required:invalid:focus {
 | 
			
		|||
  z-index: 2;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.input-append input[class*="span"],
 | 
			
		||||
.input-prepend input[class*="span"],
 | 
			
		||||
.input-append select[class*="span"],
 | 
			
		||||
.input-prepend select[class*="span"],
 | 
			
		||||
.input-append .uneditable-input[class*="span"],
 | 
			
		||||
.input-prepend .uneditable-input[class*="span"] {
 | 
			
		||||
  margin: 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.input-append .add-on,
 | 
			
		||||
.input-prepend .add-on {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 id="prependedInput" size="16" type="text" placeholder="Username">
 | 
			
		||||
            </div>
 | 
			
		||||
            <br>
 | 
			
		||||
            <div class="input-append">
 | 
			
		||||
              <input class="span2" id="appendedInput" size="16" type="text">
 | 
			
		||||
              <input id="appendedInput" size="16" type="text">
 | 
			
		||||
              <span class="add-on">.00</span>
 | 
			
		||||
            </div>
 | 
			
		||||
          </form>
 | 
			
		||||
<pre class="prettyprint linenums">
 | 
			
		||||
<div class="input-prepend">
 | 
			
		||||
  <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
 | 
			
		||||
  <span class="add-on">@</span>
 | 
			
		||||
  <input id="prependedInput" size="16" type="text" placeholder="Username">
 | 
			
		||||
</div>
 | 
			
		||||
<div class="input-append">
 | 
			
		||||
  <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
 | 
			
		||||
  <input id="appendedInput" size="16" type="text">
 | 
			
		||||
  <span class="add-on">.00</span>
 | 
			
		||||
</div>
 | 
			
		||||
</pre>
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -1153,13 +1155,15 @@ For example, <code><section></code> 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 id="appendedPrependedInput" size="16" type="text">
 | 
			
		||||
              <span class="add-on">.00</span>
 | 
			
		||||
            </div>
 | 
			
		||||
          </form>
 | 
			
		||||
<pre class="prettyprint linenums">
 | 
			
		||||
<div class="input-prepend input-append">
 | 
			
		||||
  <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
 | 
			
		||||
  <span class="add-on">$</span>
 | 
			
		||||
  <input id="appendedPrependedInput" size="16" type="text">
 | 
			
		||||
  <span class="add-on">.00</span>
 | 
			
		||||
</div>
 | 
			
		||||
</pre>
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -1167,46 +1171,49 @@ For example, <code><section></code> should be wrapped as inlin
 | 
			
		|||
          <p>Instead of a <code><span></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 id="appendedInputButton" size="16" type="text">
 | 
			
		||||
              <button class="btn" type="button">Go!</button>
 | 
			
		||||
            </div>
 | 
			
		||||
            <br>
 | 
			
		||||
            <div class="input-append">
 | 
			
		||||
              <input class="span2" id="appendedInputButtons" size="16" type="text">
 | 
			
		||||
              <input id="appendedInputButtons" size="16" type="text">
 | 
			
		||||
              <button class="btn" type="button">Search</button>
 | 
			
		||||
              <button class="btn" type="button">Options</button>
 | 
			
		||||
            </div>
 | 
			
		||||
          </form>
 | 
			
		||||
<pre class="prettyprint linenums">
 | 
			
		||||
<div class="input-append">
 | 
			
		||||
  <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
 | 
			
		||||
  <input id="appendedInputButton" size="16" type="text">
 | 
			
		||||
  <button class="btn" type="button">Go!</button>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<div class="input-append">
 | 
			
		||||
  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
 | 
			
		||||
  <input id="appendedInputButtons" size="16" type="text">
 | 
			
		||||
  <button class="btn" type="button">Search</button>
 | 
			
		||||
  <button class="btn" type="button">Options</button>
 | 
			
		||||
</div>
 | 
			
		||||
</pre>
 | 
			
		||||
 | 
			
		||||
          <h4>Search form</h4>
 | 
			
		||||
          <form class="bs-docs-example form-search">
 | 
			
		||||
            <div class="input-append">
 | 
			
		||||
              <input type="text" class="span2 search-query">
 | 
			
		||||
              <input type="text" class="search-query">
 | 
			
		||||
              <button type="submit" class="btn">Search</button>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="input-prepend">
 | 
			
		||||
              <button type="submit" class="btn">Search</button>
 | 
			
		||||
              <input type="text" class="span2 search-query">
 | 
			
		||||
              <input type="text" class="search-query">
 | 
			
		||||
            </div>
 | 
			
		||||
          </form>
 | 
			
		||||
<pre class="prettyprint linenums">
 | 
			
		||||
<form class="form-search">
 | 
			
		||||
  <div class="input-append">
 | 
			
		||||
    <input type="text" class="span2 search-query">
 | 
			
		||||
    <input type="text" class="search-query">
 | 
			
		||||
    <button type="submit" class="btn">Search</button>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="input-prepend">
 | 
			
		||||
    <button type="submit" class="btn">Search</button>
 | 
			
		||||
    <input type="text" class="span2 search-query">
 | 
			
		||||
    <input type="text" class="search-query">
 | 
			
		||||
  </div>
 | 
			
		||||
</form>
 | 
			
		||||
</pre>
 | 
			
		||||
| 
						 | 
				
			
			@ -1284,7 +1291,7 @@ For example, <code><section></code> should be wrapped as inlin
 | 
			
		|||
 | 
			
		||||
          <p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p>
 | 
			
		||||
          <form class="bs-docs-example" style="padding-bottom: 15px;">
 | 
			
		||||
            <div class="controls">
 | 
			
		||||
            <div class="controls controls-row">
 | 
			
		||||
              <input class="span5" type="text" placeholder=".span5">
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="controls controls-row">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1068,20 +1068,22 @@
 | 
			
		|||
          <form class="bs-docs-example">
 | 
			
		||||
            <div class="input-prepend">
 | 
			
		||||
              <span class="add-on">@</span>
 | 
			
		||||
              <input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
 | 
			
		||||
              <input id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
 | 
			
		||||
            </div>
 | 
			
		||||
            <br>
 | 
			
		||||
            <div class="input-append">
 | 
			
		||||
              <input class="span2" id="appendedInput" size="16" type="text">
 | 
			
		||||
              <input id="appendedInput" size="16" type="text">
 | 
			
		||||
              <span class="add-on">.00</span>
 | 
			
		||||
            </div>
 | 
			
		||||
          </form>
 | 
			
		||||
<pre class="prettyprint linenums">
 | 
			
		||||
<div class="input-prepend">
 | 
			
		||||
  <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
 | 
			
		||||
  <span class="add-on">@</span>
 | 
			
		||||
  <input id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
 | 
			
		||||
</div>
 | 
			
		||||
<div class="input-append">
 | 
			
		||||
  <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
 | 
			
		||||
  <input id="appendedInput" size="16" type="text">
 | 
			
		||||
  <span class="add-on">.00</span>
 | 
			
		||||
</div>
 | 
			
		||||
</pre>
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -1090,13 +1092,15 @@
 | 
			
		|||
          <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 id="appendedPrependedInput" size="16" type="text">
 | 
			
		||||
              <span class="add-on">.00</span>
 | 
			
		||||
            </div>
 | 
			
		||||
          </form>
 | 
			
		||||
<pre class="prettyprint linenums">
 | 
			
		||||
<div class="input-prepend input-append">
 | 
			
		||||
  <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
 | 
			
		||||
  <span class="add-on">$</span>
 | 
			
		||||
  <input id="appendedPrependedInput" size="16" type="text">
 | 
			
		||||
  <span class="add-on">.00</span>
 | 
			
		||||
</div>
 | 
			
		||||
</pre>
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -1104,46 +1108,49 @@
 | 
			
		|||
          <p>{{_i}}Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p>
 | 
			
		||||
          <form class="bs-docs-example">
 | 
			
		||||
            <div class="input-append">
 | 
			
		||||
              <input class="span2" id="appendedInputButton" size="16" type="text">
 | 
			
		||||
              <input id="appendedInputButton" size="16" type="text">
 | 
			
		||||
              <button class="btn" type="button">Go!</button>
 | 
			
		||||
            </div>
 | 
			
		||||
            <br>
 | 
			
		||||
            <div class="input-append">
 | 
			
		||||
              <input class="span2" id="appendedInputButtons" size="16" type="text">
 | 
			
		||||
              <input id="appendedInputButtons" size="16" type="text">
 | 
			
		||||
              <button class="btn" type="button">Search</button>
 | 
			
		||||
              <button class="btn" type="button">Options</button>
 | 
			
		||||
            </div>
 | 
			
		||||
          </form>
 | 
			
		||||
<pre class="prettyprint linenums">
 | 
			
		||||
<div class="input-append">
 | 
			
		||||
  <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
 | 
			
		||||
  <input id="appendedInputButton" size="16" type="text">
 | 
			
		||||
  <button class="btn" type="button">Go!</button>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<div class="input-append">
 | 
			
		||||
  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
 | 
			
		||||
  <input id="appendedInputButtons" size="16" type="text">
 | 
			
		||||
  <button class="btn" type="button">Search</button>
 | 
			
		||||
  <button class="btn" type="button">Options</button>
 | 
			
		||||
</div>
 | 
			
		||||
</pre>
 | 
			
		||||
 | 
			
		||||
          <h4>{{_i}}Search form{{/i}}</h4>
 | 
			
		||||
          <form class="bs-docs-example form-search">
 | 
			
		||||
            <div class="input-append">
 | 
			
		||||
              <input type="text" class="span2 search-query">
 | 
			
		||||
              <input type="text" class="search-query">
 | 
			
		||||
              <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="input-prepend">
 | 
			
		||||
              <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
 | 
			
		||||
              <input type="text" class="span2 search-query">
 | 
			
		||||
              <input type="text" class="search-query">
 | 
			
		||||
            </div>
 | 
			
		||||
          </form>{{! /example }}
 | 
			
		||||
<pre class="prettyprint linenums">
 | 
			
		||||
<form class="form-search">
 | 
			
		||||
  <div class="input-append">
 | 
			
		||||
    <input type="text" class="span2 search-query">
 | 
			
		||||
    <input type="text" class="search-query">
 | 
			
		||||
    <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="input-prepend">
 | 
			
		||||
    <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
 | 
			
		||||
    <input type="text" class="span2 search-query">
 | 
			
		||||
    <input type="text" class="search-query">
 | 
			
		||||
  </div>
 | 
			
		||||
</form>
 | 
			
		||||
</pre>
 | 
			
		||||
| 
						 | 
				
			
			@ -1221,7 +1228,7 @@
 | 
			
		|||
 | 
			
		||||
          <p>{{_i}}For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}</p>
 | 
			
		||||
          <form class="bs-docs-example" style="padding-bottom: 15px;">
 | 
			
		||||
            <div class="controls">
 | 
			
		||||
            <div class="controls controls-row">
 | 
			
		||||
              <input class="span5" type="text" placeholder=".span5">
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="controls controls-row">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -265,42 +265,33 @@ textarea {
 | 
			
		|||
.input-xlarge     { width: 270px; }
 | 
			
		||||
.input-xxlarge    { width: 530px; }
 | 
			
		||||
 | 
			
		||||
// Grid style input sizes
 | 
			
		||||
input[class*="span"],
 | 
			
		||||
select[class*="span"],
 | 
			
		||||
textarea[class*="span"],
 | 
			
		||||
.uneditable-input[class*="span"],
 | 
			
		||||
// Redeclare since the fluid row class is more specific
 | 
			
		||||
.row-fluid input[class*="span"],
 | 
			
		||||
.row-fluid select[class*="span"],
 | 
			
		||||
.row-fluid textarea[class*="span"],
 | 
			
		||||
.row-fluid .uneditable-input[class*="span"] {
 | 
			
		||||
  xfloat: none;
 | 
			
		||||
  xmargin-left: 0;
 | 
			
		||||
}
 | 
			
		||||
// Ensure input-prepend/append never wraps
 | 
			
		||||
.input-append input[class*="span"],
 | 
			
		||||
.input-append .uneditable-input[class*="span"],
 | 
			
		||||
.input-prepend input[class*="span"],
 | 
			
		||||
.input-prepend .uneditable-input[class*="span"],
 | 
			
		||||
.row-fluid input[class*="span"],
 | 
			
		||||
.row-fluid select[class*="span"],
 | 
			
		||||
.row-fluid textarea[class*="span"],
 | 
			
		||||
.row-fluid .uneditable-input[class*="span"],
 | 
			
		||||
.row-fluid .input-prepend [class*="span"],
 | 
			
		||||
.row-fluid .input-append [class*="span"] {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// GRID SIZING FOR INPUTS
 | 
			
		||||
// ----------------------
 | 
			
		||||
 | 
			
		||||
// Grid style input sizes
 | 
			
		||||
input[class*="span"],
 | 
			
		||||
select[class*="span"],
 | 
			
		||||
textarea[class*="span"],
 | 
			
		||||
.uneditable-input[class*="span"] {
 | 
			
		||||
  float: none;
 | 
			
		||||
  margin-left: 0;
 | 
			
		||||
  margin-right: 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.controls-row {
 | 
			
		||||
  #grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// Ensure input-prepend/append never wraps
 | 
			
		||||
.input-append input[class*="span"],
 | 
			
		||||
.input-append .uneditable-input[class*="span"],
 | 
			
		||||
.input-prepend input[class*="span"],
 | 
			
		||||
.input-prepend .uneditable-input[class*="span"] {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
input[class*="span"],
 | 
			
		||||
select[class*="span"],
 | 
			
		||||
textarea[class*="span"],
 | 
			
		||||
| 
						 | 
				
			
			@ -427,8 +418,8 @@ select:focus:required:invalid {
 | 
			
		|||
  select,
 | 
			
		||||
  .uneditable-input {
 | 
			
		||||
    position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
 | 
			
		||||
    margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
 | 
			
		||||
    *margin-left: 0;
 | 
			
		||||
    float: none; // Undo the float from grid sizing
 | 
			
		||||
    margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
 | 
			
		||||
    font-size: @baseFontSize;
 | 
			
		||||
    vertical-align: top;
 | 
			
		||||
    .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
 | 
			
		||||
| 
						 | 
				
			
			@ -437,6 +428,11 @@ select:focus:required:invalid {
 | 
			
		|||
      z-index: 2;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  input[class*="span"],
 | 
			
		||||
  select[class*="span"],
 | 
			
		||||
  .uneditable-input[class*="span"] {
 | 
			
		||||
    margin: 0;
 | 
			
		||||
  }
 | 
			
		||||
  .add-on {
 | 
			
		||||
    display: inline-block;
 | 
			
		||||
    width: auto;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -555,92 +555,86 @@
 | 
			
		|||
// The Grid
 | 
			
		||||
#grid {
 | 
			
		||||
 | 
			
		||||
  .core (@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
 | 
			
		||||
  .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
 | 
			
		||||
 | 
			
		||||
    .spanX (@index) when (@index > 0) {
 | 
			
		||||
    .spanX(@index) when (@index > 0) {
 | 
			
		||||
      (~".span@{index}") { .span(@index); }
 | 
			
		||||
      .spanX(@index - 1);
 | 
			
		||||
    }
 | 
			
		||||
    .spanX (0) {}
 | 
			
		||||
    .spanX(0) {}
 | 
			
		||||
 | 
			
		||||
    .offsetX (@index) when (@index > 0) {
 | 
			
		||||
    .offsetX(@index) when (@index > 0) {
 | 
			
		||||
      (~".offset@{index}") { .offset(@index); }
 | 
			
		||||
      .offsetX(@index - 1);
 | 
			
		||||
    }
 | 
			
		||||
    .offsetX (0) {}
 | 
			
		||||
    .offsetX(0) {}
 | 
			
		||||
 | 
			
		||||
    .offset (@columns) {
 | 
			
		||||
 | 
			
		||||
    // Base styles
 | 
			
		||||
    .offset(@columns) {
 | 
			
		||||
      margin-left: percentage(@columns / @gridColumns);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .span (@columns) {
 | 
			
		||||
    .span(@columns) {
 | 
			
		||||
      width: percentage(@columns / @gridColumns);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .row {
 | 
			
		||||
      // Negative indent the columns so text lines up
 | 
			
		||||
      margin-left: @gridGutterWidth / -2;
 | 
			
		||||
      margin-right: @gridGutterWidth / -2;
 | 
			
		||||
      // Clear the floated columns
 | 
			
		||||
      .clearfix();
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    [class*="span"] {
 | 
			
		||||
      float: left;
 | 
			
		||||
      min-height: 1px; // prevent column collapsing
 | 
			
		||||
      float: left; // Collapse whitespace
 | 
			
		||||
      min-height: 1px; // Prevent empty columns from collapsing
 | 
			
		||||
      padding-left: @gridGutterWidth / 2;
 | 
			
		||||
      padding-right: @gridGutterWidth / 2;
 | 
			
		||||
      // Proper box-model (padding doesnt' add to width)
 | 
			
		||||
      -webkit-box-sizing: border-box;
 | 
			
		||||
         -moz-box-sizing: border-box;
 | 
			
		||||
              box-sizing: border-box;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // generate .spanX and .offsetX
 | 
			
		||||
    .spanX (@gridColumns);
 | 
			
		||||
    .offsetX (@gridColumns);
 | 
			
		||||
    // Generate .spanX and .offsetX
 | 
			
		||||
    .spanX(@gridColumns);
 | 
			
		||||
    .offsetX(@gridColumns);
 | 
			
		||||
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
 | 
			
		||||
 | 
			
		||||
    .spanX (@index) when (@index > 0) {
 | 
			
		||||
      (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
 | 
			
		||||
    .spanX(@index) when (@index > 0) {
 | 
			
		||||
      (~"input.span@{index}, textarea.span@{index}, select.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
 | 
			
		||||
      .spanX(@index - 1);
 | 
			
		||||
    }
 | 
			
		||||
    .spanX (0) {}
 | 
			
		||||
    .spanX(0) {}
 | 
			
		||||
 | 
			
		||||
    .offsetX(@index) when (@index > 0) {
 | 
			
		||||
      (~"input.offset@{index}, textarea.offset@{index}, select.offset@{index}, uneditable-input.offset@{index}") { .offset(@index); }
 | 
			
		||||
      .offsetX(@index - 1);
 | 
			
		||||
    }
 | 
			
		||||
    .offsetX(0) {}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    .span(@columns) {
 | 
			
		||||
      //width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth) + percentage(@gridGutterWidth/(@columns - 1));
 | 
			
		||||
      //width: (100% - ((@columns - 1) * (@gridGutterWidth / @gridRowWidth))) / @gridColumns;
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
      //width: percentage((@columns * (((@columns - 1) * (@gridGutterWidth/@gridRowWidth)))) / @gridRowWidth);
 | 
			
		||||
      width: percentage((@columns * (@gridRowWidth - ( @columns - 1 ) * (@gridGutterWidth/@gridRowWidth)) / 12 ) / @gridRowWidth);
 | 
			
		||||
      //( 4 * (940 - (num_col - 1 )*(20/940)) )/940
 | 
			
		||||
 | 
			
		||||
      // 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);
 | 
			
		||||
      // 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((((@columns - 1) * @gridGutterWidth)/ @gridRowWidth ) / (2 * (@columns - 1) );
 | 
			
		||||
 | 
			
		||||
      margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth);
 | 
			
		||||
      //margin-right: percentage((((@columns - 1) * @gridGutterWidth)/ @gridRowWidth ) / (2 * (@columns - 1) );
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // 940*4/12 - 20/940 = .312056737
 | 
			
		||||
 | 
			
		||||
    // 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;
 | 
			
		||||
    .offset(@columns) {
 | 
			
		||||
      // Take the normal offset margin and add an extra gutter's worth.
 | 
			
		||||
      margin-left: percentage(@columns / @gridColumns) + percentage((@gridGutterWidth / 2) / @gridRowWidth);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    // generate .spanX
 | 
			
		||||
    .spanX (@gridColumns);
 | 
			
		||||
    // Generate .spanX and .offsetX
 | 
			
		||||
    .spanX(@gridColumns);
 | 
			
		||||
    .offsetX(@gridColumns);
 | 
			
		||||
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -53,12 +53,119 @@
 | 
			
		|||
</header>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<div class="bs-docs-canvas">
 | 
			
		||||
 | 
			
		||||
  <div class="container">
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<div class="bs-docs-grid">
 | 
			
		||||
  <div class="row show-grid">
 | 
			
		||||
    <div class="span1">1</div>
 | 
			
		||||
    <div class="span1">1</div>
 | 
			
		||||
    <div class="span1">1</div>
 | 
			
		||||
    <div class="span1">1</div>
 | 
			
		||||
    <div class="span1">1</div>
 | 
			
		||||
    <div class="span1">1</div>
 | 
			
		||||
    <div class="span1">1</div>
 | 
			
		||||
    <div class="span1">1</div>
 | 
			
		||||
    <div class="span1">1</div>
 | 
			
		||||
    <div class="span1">1</div>
 | 
			
		||||
    <div class="span1">1</div>
 | 
			
		||||
    <div class="span1">1</div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="row show-grid">
 | 
			
		||||
    <div class="span4">4</div>
 | 
			
		||||
    <div class="span4">4</div>
 | 
			
		||||
    <div class="span4">4</div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="row show-grid">
 | 
			
		||||
    <div class="span6">6</div>
 | 
			
		||||
    <div class="span6">6</div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="row show-grid">
 | 
			
		||||
    <div class="span12">12</div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<form class="controls-row">
 | 
			
		||||
  <input class="span1" type="text" placeholder=".span1">
 | 
			
		||||
  <input class="span1" type="text" placeholder=".span1">
 | 
			
		||||
  <input class="span1" type="text" placeholder=".span1">
 | 
			
		||||
  <input class="span1" type="text" placeholder=".span1">
 | 
			
		||||
  <input class="span1" type="text" placeholder=".span1">
 | 
			
		||||
  <input class="span1" type="text" placeholder=".span1">
 | 
			
		||||
  <input class="span1" type="text" placeholder=".span1">
 | 
			
		||||
  <input class="span1" type="text" placeholder=".span1">
 | 
			
		||||
  <input class="span1" type="text" placeholder=".span1">
 | 
			
		||||
  <input class="span1" type="text" placeholder=".span1">
 | 
			
		||||
  <input class="span1" type="text" placeholder=".span1">
 | 
			
		||||
  <input class="span1" type="text" placeholder=".span1">
 | 
			
		||||
</form>
 | 
			
		||||
 | 
			
		||||
<form class="controls-row">
 | 
			
		||||
  <input class="span4" type="text" placeholder=".span4">
 | 
			
		||||
  <input class="span4" type="text" placeholder=".span4">
 | 
			
		||||
  <input class="span4" type="text" placeholder=".span4">
 | 
			
		||||
</form>
 | 
			
		||||
 | 
			
		||||
<form class="controls-row">
 | 
			
		||||
  <input class="span6" type="text" placeholder=".span6">
 | 
			
		||||
  <input class="span6" type="text" placeholder=".span6">
 | 
			
		||||
</form>
 | 
			
		||||
 | 
			
		||||
<form class="controls-row">
 | 
			
		||||
  <input class="span12" type="text" placeholder=".span12">
 | 
			
		||||
</form>
 | 
			
		||||
 | 
			
		||||
<form class="clearfix">
 | 
			
		||||
  <input class="span4" type="text" placeholder=".span4">
 | 
			
		||||
  <input class="span4 offset4" type="text" placeholder=".span4">
 | 
			
		||||
</form>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<form class="bs-docs-example form-horizontal">
 | 
			
		||||
  <legend>Horizontal form example</legend>
 | 
			
		||||
  <div class="control-group">
 | 
			
		||||
    <label class="control-label">Name</label>
 | 
			
		||||
    <div class="controls">
 | 
			
		||||
      <input type="text" class="span3" placeholder="First">
 | 
			
		||||
      <input type="text" class="span3" placeholder="Last">
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="control-group">
 | 
			
		||||
    <label class="control-label">Email</label>
 | 
			
		||||
    <div class="controls">
 | 
			
		||||
      <input type="text" class="span6" placeholder="First">
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="control-group">
 | 
			
		||||
    <label class="control-label">Password</label>
 | 
			
		||||
    <div class="controls">
 | 
			
		||||
      <input type="password" class="span6" placeholder="Password">
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="control-group">
 | 
			
		||||
    <div class="controls">
 | 
			
		||||
      <label class="checkbox">
 | 
			
		||||
        <input type="checkbox"> Remember me
 | 
			
		||||
      </label>
 | 
			
		||||
      <button type="submit" class="btn">Sign in</button>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</form>
 | 
			
		||||
 | 
			
		||||
<style>
 | 
			
		||||
.container { background-color: rgba(255,0,0,.1); }
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<br><br><br>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<!-- Typography
 | 
			
		||||
================================================== -->
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -136,239 +243,6 @@
 | 
			
		|||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<!-- Fluid grid
 | 
			
		||||
================================================== -->
 | 
			
		||||
 | 
			
		||||
<div class="page-header">
 | 
			
		||||
  <h1>Fluid grids</h1>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<div class="fluid-grid">
 | 
			
		||||
  <div class="row">
 | 
			
		||||
    <div class="span12">12
 | 
			
		||||
      <div class="row-fluid">
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="row">
 | 
			
		||||
    <div class="span11">11
 | 
			
		||||
      <div class="row-fluid">
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="span1">1
 | 
			
		||||
      <div class="row-fluid">
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="row">
 | 
			
		||||
    <div class="span10">10
 | 
			
		||||
      <div class="row-fluid">
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="span2">2
 | 
			
		||||
      <div class="row-fluid">
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="row">
 | 
			
		||||
    <div class="span9">9
 | 
			
		||||
      <div class="row-fluid">
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="span3">3
 | 
			
		||||
      <div class="row-fluid">
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="row">
 | 
			
		||||
    <div class="span8">8
 | 
			
		||||
      <div class="row-fluid">
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="span4">4
 | 
			
		||||
      <div class="row-fluid">
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="row">
 | 
			
		||||
    <div class="span7">7
 | 
			
		||||
      <div class="row-fluid">
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="span5">5
 | 
			
		||||
      <div class="row-fluid">
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="row">
 | 
			
		||||
    <div class="span6">6
 | 
			
		||||
      <div class="row-fluid">
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="span6">6
 | 
			
		||||
      <div class="row-fluid">
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
        <div class="span1">1</div>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</div> <!-- fluid grids -->
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<!-- Tables
 | 
			
		||||
================================================== -->
 | 
			
		||||
| 
						 | 
				
			
			@ -1268,7 +1142,6 @@
 | 
			
		|||
      </div>
 | 
			
		||||
    </footer>
 | 
			
		||||
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    <!-- Le javascript
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue