diff --git a/docs/base-css.html b/docs/base-css.html index 3c5c8743b146a962385ecc1e69b5741e905af1dc..a1d8418bb10b28e14148ac880b4359452d6bc838 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -545,7 +545,7 @@ For example, <code>section</code> should be wrapped as inline. <h2>Table options</h2> <table class="table table-bordered table-striped"> - <thead> + <thead> <tr> <th>Name</th> <th>Class</th> @@ -594,203 +594,215 @@ For example, <code>section</code> should be wrapped as inline. <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> + <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"> <table class="table"> … -</table></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> - +</table> +</pre> <h3>2. Striped table</h3> <p>Get a little fancy with your tables by adding zebra-striping—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> + <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;"> <table class="table table-striped"> … -</table></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> +</table> +</pre> <h3>3. Bordered table</h3> <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"> <table class="table table-bordered"> … -</table></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> +</table> +</pre> <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> + <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;"> <table class="table table-condensed"> … -</table></pre> - <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> +</table> +</pre> <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> + <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;"> <table class="table table-striped table-bordered table-condensed"> ... -</table></pre> - <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> +</table> +</pre> + </section> @@ -859,7 +871,7 @@ For example, <code>section</code> should be wrapped as inline. <h2>Example forms <small>using just form controls, no extra markup</small></h2> <h3>Basic form</h3> <p>Smart and lightweight defaults without extra markup.</p> - <form class="well"> + <form class="bs-docs-example"> <label>Label name</label> <input type="text" class="span3" placeholder="Type something…"> <p class="help-block">Example block-level help text here.</p> @@ -882,7 +894,7 @@ For example, <code>section</code> should be wrapped as inline. <h3>Search form</h3> <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"> <button type="submit" class="btn">Search</button> </form> @@ -895,7 +907,7 @@ For example, <code>section</code> should be wrapped as inline. <h3>Inline form</h3> <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="password" class="input-small" placeholder="Password"> <label class="checkbox"> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 4cfe05db5e34eef64d6810cadd44c41459623704..595f4b5a9c1028ded8baad7eb8238514106e7122 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -475,7 +475,7 @@ <h2>{{_i}}Table options{{/i}}</h2> <table class="table table-bordered table-striped"> - <thead> + <thead> <tr> <th>{{_i}}Name{{/i}}</th> <th>{{_i}}Class{{/i}}</th> @@ -524,203 +524,215 @@ <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> + <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"> <table class="table"> … -</table></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> - +</table> +</pre> <h3>2. {{_i}}Striped table{{/i}}</h3> <p>{{_i}}Get a little fancy with your tables by adding zebra-striping—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> + <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;"> <table class="table table-striped"> … -</table></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> +</table> +</pre> <h3>3. {{_i}}Bordered table{{/i}}</h3> <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"> <table class="table table-bordered"> … -</table></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> +</table> +</pre> <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> + <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;"> <table class="table table-condensed"> … -</table></pre> - <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> +</table> +</pre> <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> + <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;"> <table class="table table-striped table-bordered table-condensed"> ... -</table></pre> - <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> +</table> +</pre> + </section> @@ -789,7 +801,7 @@ <h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2> <h3>{{_i}}Basic form{{/i}}</h3> <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> <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"> <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p> @@ -797,7 +809,7 @@ <input type="checkbox"> {{_i}}Check me out{{/i}} </label> <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> - </form> + </form>{{! /example }} <pre class="prettyprint linenums"> <form class="well"> <label>{{_i}}Label name{{/i}}</label> @@ -812,10 +824,10 @@ <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> - <form class="well form-search"> + <form class="bs-docs-example form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">{{_i}}Search{{/i}}</button> - </form> + </form>{{! /example }} <pre class="prettyprint linenums"> <form class="well form-search"> <input type="text" class="input-medium search-query"> @@ -825,14 +837,14 @@ <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> - <form class="well form-inline"> + <form class="bs-docs-example form-inline"> <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"> <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"> <label class="checkbox"> <input type="checkbox"> {{_i}}Remember me{{/i}} </label> <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> - </form> + </form>{{! /example }} <pre class="prettyprint linenums"> <form class="well form-inline"> <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">