.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"] {
- float: none;
- margin-left: 0;
+ xmargin-left: 0;
+ xfloat: none;
}
.input-append input[class*="span"],
<h1>Forms</h1>
</div>
- <h2>Default styles</h2>
+ <h2 id="forms-default">Default styles</h2>
<p>Individual form controls receive styling, but without any required base class on the <code><form></code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p>
<form class="bs-docs-example">
<legend>Legend</legend>
<hr class="bs-docs-separator">
- <h2>Optional layouts</h2>
+ <h2 id="forms-layouts">Optional layouts</h2>
<p>Included with Bootstrap are three optional form layouts for common use cases.</p>
<h3>Search form</h3>
<hr class="bs-docs-separator">
- <h2>Supported form controls</h2>
+ <h2 id="forms-controls">Supported form controls</h2>
<p>Examples of standard form controls supported in an example form layout.</p>
<h3>Inputs</h3>
<hr class="bs-docs-separator">
- <h2>Extending form controls</h2>
+ <h2 id="forms-extending">Extending form controls</h2>
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
<h3>Prepended and appended inputs</h3>
</form>
</pre>
- <h3>Control sizing</h3>
+ <h3 id="forms-extending-sizes">Control sizing</h3>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
<h4>Relative sizing</h4>
<h1>{{_i}}Forms{{/i}}</h1>
</div>
- <h2>{{_i}}Default styles{{/i}}</h2>
+ <h2 id="forms-default">{{_i}}Default styles{{/i}}</h2>
<p>{{_i}}Individual form controls receive styling, but without any required base class on the <code><form></code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}</p>
<form class="bs-docs-example">
<legend>Legend</legend>
<hr class="bs-docs-separator">
- <h2>{{_i}}Optional layouts{{/i}}</h2>
+ <h2 id="forms-layouts">{{_i}}Optional layouts{{/i}}</h2>
<p>{{_i}}Included with Bootstrap are three optional form layouts for common use cases.{{/i}}</p>
<h3>{{_i}}Search form{{/i}}</h3>
<hr class="bs-docs-separator">
- <h2>{{_i}}Supported form controls{{/i}}</h2>
+ <h2 id="forms-controls">{{_i}}Supported form controls{{/i}}</h2>
<p>{{_i}}Examples of standard form controls supported in an example form layout.{{/i}}</p>
<h3>{{_i}}Inputs{{/i}}</h3>
<hr class="bs-docs-separator">
- <h2>{{_i}}Extending form controls{{/i}}</h2>
+ <h2 id="forms-extending">{{_i}}Extending form controls{{/i}}</h2>
<p>{{_i}}Adding on top of existing browser controls, Bootstrap includes other useful form components.{{/i}}</p>
<h3>{{_i}}Prepended and appended inputs{{/i}}</h3>
</form>
</pre>
- <h3>{{_i}}Control sizing{{/i}}</h3>
+ <h3 id="forms-extending-sizes">{{_i}}Control sizing{{/i}}</h3>
<p>{{_i}}Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.{{/i}}</p>
<h4>{{_i}}Relative sizing{{/i}}</h4>
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"] {
- float: none;
- margin-left: 0;
+ xfloat: none;
+ xmargin-left: 0;
}
// Ensure input-prepend/append never wraps
.input-append input[class*="span"],
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Bootstrap</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le styles -->
+ <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
+ <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
+ <link href="../../docs/assets/css/docs.css" rel="stylesheet">
+ <style>
+ body {
+ padding-top: 30px;
+ padding-bottom: 30px;
+ }
+ </style>
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le fav and touch icons -->
+ <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
+ </head>
+
+ <body>
+
+ <form class="container">
+
+ <div class="page-header">
+ <h1>Grids</h1>
+ </div>
+
+
+ <h2>Default grid columns</h2>
+ <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>
+
+
+
+ <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="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">
+ <input type="text" class="span4" placeholder=".span4">
+ </div>
+
+
+ </form> <!-- /container -->
+
+ </body>
+</html>