Skip to content
GitLab
Commit 10d68406 authored by Mark Otto's avatar Mark Otto
Browse files

examples-wrap tables

parent 2c5ac562
Hide whitespace changes
Inline Side-by-side
Showing
with 369 additions and 345 deletions
+369 -345
docs/base-css.html
+ 183
- 171
View file @ 10d68406
...@@ -545,7 +545,7 @@ For example, <code>section</code> should be wrapped as inline. ...@@ -545,7 +545,7 @@ For example, <code>section</code> should be wrapped as inline.
<h2>Table options</h2> <h2>Table options</h2>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Class</th> <th>Class</th>
...@@ -594,203 +594,215 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -594,203 +594,215 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h3>1. Default table styles</h3> <h3>1. Default table styles</h3>
<p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.</p> <p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.</p>
<div class="bs-docs-example">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;table class="table"&gt; &lt;table class="table"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;
</pre>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>2. Striped table</h3> <h3>2. Striped table</h3>
<p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.</p> <p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.</p>
<p class="muted"><strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p> <p class="muted"><strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p>
<div class="bs-docs-example">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-striped"&gt; &lt;table class="table table-striped"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;
</pre>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>3. Bordered table</h3> <h3>3. Bordered table</h3>
<p>Add borders around the entire table and rounded corners for aesthetic purposes.</p> <p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
<div class="bs-docs-example">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;table class="table table-bordered"&gt; &lt;table class="table table-bordered"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;
</pre>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>4. Condensed table</h3> <h3>4. Condensed table</h3>
<p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).</p> <p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).</p>
<div class="bs-docs-example">
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-condensed"&gt; &lt;table class="table table-condensed"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;
<table class="table table-condensed"> </pre>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>5. Combine them all!</h3> <h3>5. Combine them all!</h3>
<p>Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.</p> <p>Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.</p>
<div class="bs-docs-example">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th></th>
<th colspan="2">Full name</th>
<th></th>
</tr>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-striped table-bordered table-condensed"&gt; &lt;table class="table table-striped table-bordered table-condensed"&gt;
... ...
&lt;/table&gt;</pre> &lt;/table&gt;
<table class="table table-striped table-bordered table-condensed"> </pre>
<thead>
<tr>
<th></th>
<th colspan="2">Full name</th>
<th></th>
</tr>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</section> </section>
...@@ -859,7 +871,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -859,7 +871,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h2>Example forms <small>using just form controls, no extra markup</small></h2> <h2>Example forms <small>using just form controls, no extra markup</small></h2>
<h3>Basic form</h3> <h3>Basic form</h3>
<p>Smart and lightweight defaults without extra markup.</p> <p>Smart and lightweight defaults without extra markup.</p>
<form class="well"> <form class="bs-docs-example">
<label>Label name</label> <label>Label name</label>
<input type="text" class="span3" placeholder="Type something…"> <input type="text" class="span3" placeholder="Type something…">
<p class="help-block">Example block-level help text here.</p> <p class="help-block">Example block-level help text here.</p>
...@@ -882,7 +894,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -882,7 +894,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h3>Search form</h3> <h3>Search form</h3>
<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.</p> <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.</p>
<form class="well form-search"> <form class="bs-docs-example form-search">
<input type="text" class="input-medium search-query"> <input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button> <button type="submit" class="btn">Search</button>
</form> </form>
...@@ -895,7 +907,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -895,7 +907,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h3>Inline form</h3> <h3>Inline form</h3>
<p>Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.</p> <p>Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.</p>
<form class="well form-inline"> <form class="bs-docs-example form-inline">
<input type="text" class="input-small" placeholder="Email"> <input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password"> <input type="password" class="input-small" placeholder="Password">
<label class="checkbox"> <label class="checkbox">
......
docs/templates/pages/base-css.mustache
+ 186
- 174
View file @ 10d68406
...@@ -475,7 +475,7 @@ ...@@ -475,7 +475,7 @@
<h2>{{_i}}Table options{{/i}}</h2> <h2>{{_i}}Table options{{/i}}</h2>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>{{_i}}Name{{/i}}</th> <th>{{_i}}Name{{/i}}</th>
<th>{{_i}}Class{{/i}}</th> <th>{{_i}}Class{{/i}}</th>
...@@ -524,203 +524,215 @@ ...@@ -524,203 +524,215 @@
<h3>1. {{_i}}Default table styles{{/i}}</h3> <h3>1. {{_i}}Default table styles{{/i}}</h3>
<p>{{_i}}Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.{{/i}}</p> <p>{{_i}}Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.{{/i}}</p>
<div class="bs-docs-example">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;table class="table"&gt; &lt;table class="table"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;
</pre>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>2. {{_i}}Striped table{{/i}}</h3> <h3>2. {{_i}}Striped table{{/i}}</h3>
<p>{{_i}}Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.{{/i}}</p> <p>{{_i}}Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.table-striped</code> class.{{/i}}</p>
<p class="muted">{{_i}}<strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.{{/i}}</p> <p class="muted">{{_i}}<strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.{{/i}}</p>
<div class="bs-docs-example">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>{{! /example }}
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-striped"&gt; &lt;table class="table table-striped"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;
</pre>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>3. {{_i}}Bordered table{{/i}}</h3> <h3>3. {{_i}}Bordered table{{/i}}</h3>
<p>{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}</p> <p>{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}</p>
<div class="bs-docs-example">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;table class="table table-bordered"&gt; &lt;table class="table table-bordered"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;
</pre>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>4. {{_i}}Condensed table{{/i}}</h3> <h3>4. {{_i}}Condensed table{{/i}}</h3>
<p>{{_i}}Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).{{/i}}</p> <p>{{_i}}Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).{{/i}}</p>
<div class="bs-docs-example">
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>{{! /example }}
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-condensed"&gt; &lt;table class="table table-condensed"&gt;
… …
&lt;/table&gt;</pre> &lt;/table&gt;
<table class="table table-condensed"> </pre>
<thead>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>5. {{_i}}Combine them all!{{/i}}</h3> <h3>5. {{_i}}Combine them all!{{/i}}</h3>
<p>{{_i}}Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.{{/i}}</p> <p>{{_i}}Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.{{/i}}</p>
<div class="bs-docs-example">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th></th>
<th colspan="2">{{_i}}Full name{{/i}}</th>
<th></th>
</tr>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>{{! /example }}
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> <pre class="prettyprint linenums" style="margin-bottom: 18px;">
&lt;table class="table table-striped table-bordered table-condensed"&gt; &lt;table class="table table-striped table-bordered table-condensed"&gt;
... ...
&lt;/table&gt;</pre> &lt;/table&gt;
<table class="table table-striped table-bordered table-condensed"> </pre>
<thead>
<tr>
<th></th>
<th colspan="2">{{_i}}Full name{{/i}}</th>
<th></th>
</tr>
<tr>
<th>#</th>
<th>{{_i}}First Name{{/i}}</th>
<th>{{_i}}Last Name{{/i}}</th>
<th>{{_i}}Username{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</section> </section>
...@@ -789,7 +801,7 @@ ...@@ -789,7 +801,7 @@
<h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2> <h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
<h3>{{_i}}Basic form{{/i}}</h3> <h3>{{_i}}Basic form{{/i}}</h3>
<p>{{_i}}Smart and lightweight defaults without extra markup.{{/i}}</p> <p>{{_i}}Smart and lightweight defaults without extra markup.{{/i}}</p>
<form class="well"> <form class="bs-docs-example">
<label>{{_i}}Label name{{/i}}</label> <label>{{_i}}Label name{{/i}}</label>
<input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"> <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}">
<p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p> <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
...@@ -797,7 +809,7 @@ ...@@ -797,7 +809,7 @@
<input type="checkbox"> {{_i}}Check me out{{/i}} <input type="checkbox"> {{_i}}Check me out{{/i}}
</label> </label>
<button type="submit" class="btn">{{_i}}Submit{{/i}}</button> <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
</form> </form>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="well"&gt; &lt;form class="well"&gt;
&lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt; &lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt;
...@@ -812,10 +824,10 @@ ...@@ -812,10 +824,10 @@
<h3>{{_i}}Search form{{/i}}</h3> <h3>{{_i}}Search form{{/i}}</h3>
<p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.{{/i}}</p> <p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.{{/i}}</p>
<form class="well form-search"> <form class="bs-docs-example form-search">
<input type="text" class="input-medium search-query"> <input type="text" class="input-medium search-query">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button> <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</form> </form>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="well form-search"&gt; &lt;form class="well form-search"&gt;
&lt;input type="text" class="input-medium search-query"&gt; &lt;input type="text" class="input-medium search-query"&gt;
...@@ -825,14 +837,14 @@ ...@@ -825,14 +837,14 @@
<h3>{{_i}}Inline form{{/i}}</h3> <h3>{{_i}}Inline form{{/i}}</h3>
<p>{{_i}}Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.{{/i}}</p> <p>{{_i}}Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.{{/i}}</p>
<form class="well form-inline"> <form class="bs-docs-example form-inline">
<input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"> <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"> <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> {{_i}}Remember me{{/i}} <input type="checkbox"> {{_i}}Remember me{{/i}}
</label> </label>
<button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
</form> </form>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="well form-inline"&gt; &lt;form class="well form-inline"&gt;
&lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt; &lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt;
......
Supports Markdown
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