diff options
Diffstat (limited to 'docs/css.html')
| -rw-r--r-- | docs/css.html | 218 |
1 files changed, 109 insertions, 109 deletions
diff --git a/docs/css.html b/docs/css.html index 264d4c672..ca10a731b 100644 --- a/docs/css.html +++ b/docs/css.html @@ -70,81 +70,81 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." <p>Be sure to checkout the <a href="../examples/grid/">full-page grid example</a> as well.</p> <div class="bs-docs-grid"> <div class="row show-grid"> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> </div> <div class="row show-grid"> - <div class="col col-lg-4">4</div> - <div class="col col-lg-4">4</div> - <div class="col col-lg-4">4</div> + <div class="col-lg-4">4</div> + <div class="col-lg-4">4</div> + <div class="col-lg-4">4</div> </div> <div class="row show-grid"> - <div class="col col-lg-6">6</div> - <div class="col col-lg-6">6</div> + <div class="col-lg-6">6</div> + <div class="col-lg-6">6</div> </div> </div> {% highlight html %} <div class="row"> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> - <div class="col col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> + <div class="col-lg-1">1</div> </div> <div class="row"> - <div class="col col-lg-4">4</div> - <div class="col col-lg-4">4</div> - <div class="col col-lg-4">4</div> + <div class="col-lg-4">4</div> + <div class="col-lg-4">4</div> + <div class="col-lg-4">4</div> </div> <div class="row"> - <div class="col col-lg-6">6</div> - <div class="col col-lg-6">6</div> + <div class="col-lg-6">6</div> + <div class="col-lg-6">6</div> </div> {% endhighlight %} <h3 id="grid-offsetting">Offsetting columns</h3> - <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col col-lg-4</code> over four columns.</p> + <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p> <div class="bs-docs-grid"> <div class="row show-grid"> - <div class="col col-lg-4">4</div> - <div class="col col-lg-4 col-offset-4">4 offset 4</div> + <div class="col-lg-4">4</div> + <div class="col-lg-4 col-offset-4">4 offset 4</div> </div><!-- /row --> <div class="row show-grid"> - <div class="col col-lg-3 col-offset-3">3 offset 3</div> - <div class="col col-lg-3 col-offset-3">3 offset 3</div> + <div class="col-lg-3 col-offset-3">3 offset 3</div> + <div class="col-lg-3 col-offset-3">3 offset 3</div> </div><!-- /row --> <div class="row show-grid"> - <div class="col col-lg-6 col-offset-3">6 offset 3</div> + <div class="col-lg-6 col-offset-3">6 offset 3</div> </div><!-- /row --> </div> {% highlight html %} <div class="row"> - <div class="col col-lg-4">...</div> - <div class="col col-lg-4 col-offset-4">...</div> + <div class="col-lg-4">...</div> + <div class="col-lg-4 col-offset-4">...</div> </div> <div class="row"> - <div class="col col-lg-3 col-offset-3">3 offset 3</div> - <div class="col col-lg-3 col-offset-3">3 offset 3</div> + <div class="col-lg-3 col-offset-3">3 offset 3</div> + <div class="col-lg-3 col-offset-3">3 offset 3</div> </div> <div class="row"> - <div class="col col-lg-6 col-offset-3">...</div> + <div class="col-lg-6 col-offset-3">...</div> </div> {% endhighlight %} @@ -152,13 +152,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." <h3 id="grid-nesting">Nesting columns</h3> <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-lg-*</code> columns within an existing <code>.col-lg-*</code> column. Nested rows should include a set of columns that add up to 12.</p> <div class="row show-grid"> - <div class="col col-lg-9"> + <div class="col-lg-9"> Level 1: 9 columns <div class="row show-grid"> - <div class="col col-lg-6"> + <div class="col-lg-6"> Level 2: 6 columns </div> - <div class="col col-lg-6"> + <div class="col-lg-6"> Level 2: 6 columns </div> </div> @@ -166,13 +166,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." </div> {% highlight html %} <div class="row"> - <div class="col col-lg-9"> + <div class="col-lg-9"> Level 1: 9 columns <div class="row"> - <div class="col col-lg-6"> + <div class="col-lg-6"> Level 2: 6 columns </div> - <div class="col col-lg-6"> + <div class="col-lg-6"> Level 2: 6 columns </div> </div> @@ -183,29 +183,29 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes." <h3 id="grid-column-ordering">Column ordering</h3> <p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p> <div class="row show-grid"> - <div class="col col-lg-9 col-push-3">9</div> - <div class="col col-lg-3 col-pull-9">3</div> + <div class="col-lg-9 col-push-3">9</div> + <div class="col-lg-3 col-pull-9">3</div> </div> {% highlight html %} <div class="row show-grid"> - <div class="col col-lg-9 col-push-3">9</div> - <div class="col col-lg-3 col-pull-9">3</div> + <div class="col-lg-9 col-push-3">9</div> + <div class="col-lg-3 col-pull-9">3</div> </div> {% endhighlight %} <h3 id="grid-small">Small device grid</h3> <p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p> <div class="row show-grid"> - <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> - <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> - <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div> + <div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div> + <div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div> + <div class="col-lg-4 col-sm-12">4 cols, 12 small cols</div> </div> {% highlight html %} <div class="row"> - <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> - <div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> - <div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div> + <div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div> + <div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div> + <div class="col-lg-4 col-sm-12">4 cols, 12 small cols</div> </div> {% endhighlight %} @@ -918,8 +918,8 @@ For example, <code><section></code> should be wrapped as inline. <p>Use contextual classes to color table rows.</p> <table class="table table-bordered table-striped"> <colgroup> - <col class="col col-lg-1"> - <col class="col col-lg-7"> + <col class="col-lg-1"> + <col class="col-lg-7"> </colgroup> <thead> <tr> @@ -1078,14 +1078,14 @@ For example, <code><section></code> should be wrapped as inline. <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p> <form class="bs-example form-horizontal"> <div class="row"> - <label for="inputEmail" class="col col-lg-2 control-label">Email</label> - <div class="col col-lg-10"> + <label for="inputEmail" class="col-lg-2 control-label">Email</label> + <div class="col-lg-10"> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="row"> - <label for="" class="col col-lg-2 control-label">Password</label> - <div class="col col-lg-10"> + <label for="" class="col-lg-2 control-label">Password</label> + <div class="col-lg-10"> <input type="password" id="inputPassword" placeholder="Password"> <div class="checkbox"> <label> @@ -1093,7 +1093,7 @@ For example, <code><section></code> should be wrapped as inline. </label> </div> </div> - <div class="col col-lg-10 col-offset-2"> + <div class="col-lg-10 col-offset-2"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> @@ -1101,14 +1101,14 @@ For example, <code><section></code> should be wrapped as inline. {% highlight html %} <form class="form-horizontal"> <div class="row"> - <label for="inputEmail" class="col col-lg-2 control-label">Email</label> - <div class="col col-lg-10"> + <label for="inputEmail" class="col-lg-2 control-label">Email</label> + <div class="col-lg-10"> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="row"> - <label for="" class="col col-lg-2 control-label">Password</label> - <div class="col col-lg-10"> + <label for="" class="col-lg-2 control-label">Password</label> + <div class="col-lg-10"> <input type="password" id="inputPassword" placeholder="Password"> <div class="checkbox"> <label> @@ -1116,7 +1116,7 @@ For example, <code><section></code> should be wrapped as inline. </label> </div> </div> - <div class="col col-lg-10 col-offset-2"> + <div class="col-lg-10 col-offset-2"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> @@ -1400,34 +1400,34 @@ For example, <code><section></code> should be wrapped as inline. </div> <form class="bs-example"> - <div class="input-group col col-lg-9"> + <div class="input-group col-lg-9"> <span class="input-group-addon">@</span> <input type="text" placeholder="Username"> </div> <br> - <div class="input-group col col-lg-6"> + <div class="input-group col-lg-6"> <input type="text"> <span class="input-group-addon">.00</span> </div> <br> - <div class="input-group col col-lg-3"> + <div class="input-group col-lg-3"> <span class="input-group-addon">$</span> <input type="text"> <span class="input-group-addon">.00</span> </div> </form> {% highlight html %} -<div class="input-group col col-lg-9"> +<div class="input-group col-lg-9"> <span class="input-group-addon">@</span> <input type="text" placeholder="Username"> </div> -<div class="input-group col col-lg-6"> +<div class="input-group col-lg-6"> <input type="text"> <span class="input-group-addon">.00</span> </div> -<div class="input-group col col-lg-3"> +<div class="input-group col-lg-3"> <span class="input-group-addon">$</span> <input type="text"> <span class="input-group-addon">.00</span> @@ -1437,33 +1437,33 @@ For example, <code><section></code> should be wrapped as inline. <h4>Optional sizes</h4> <p>Add the relative form sizing classes to the `.input-group-addon`.</p> <form class="bs-example"> - <div class="input-group col col-lg-9"> + <div class="input-group col-lg-9"> <span class="input-group-addon input-large">@</span> <input type="text" class="input-large" placeholder="Username"> </div> <br> - <div class="input-group col col-lg-9"> + <div class="input-group col-lg-9"> <span class="input-group-addon">@</span> <input type="text" placeholder="Username"> </div> <br> - <div class="input-group col col-lg-9"> + <div class="input-group col-lg-9"> <span class="input-group-addon input-small">@</span> <input type="text" class="input-small" placeholder="Username"> </div> </form> {% highlight html %} -<div class="input-group col col-lg-9"> +<div class="input-group col-lg-9"> <span class="input-group-addon input-large">@</span> <input type="text" class="input-large" placeholder="Username"> </div> -<div class="input-group col col-lg-9"> +<div class="input-group col-lg-9"> <span class="input-group-addon">@</span> <input type="text" placeholder="Username"> </div> -<div class="input-group col col-lg-9"> +<div class="input-group col-lg-9"> <span class="input-group-addon input-small">@</span> <input type="text" class="input-small" placeholder="Username"> </div> @@ -1472,14 +1472,14 @@ For example, <code><section></code> should be wrapped as inline. <h4>Buttons instead of text</h4> <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <form class="bs-example"> - <div class="input-group col col-lg-7"> + <div class="input-group col-lg-7"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text"> </div> <br> - <div class="input-group col col-lg-7"> + <div class="input-group col-lg-7"> <input type="text"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> @@ -1487,14 +1487,14 @@ For example, <code><section></code> should be wrapped as inline. </div> </form> {% highlight html %} -<div class="input-group col col-lg-7"> +<div class="input-group col-lg-7"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text"> </div> -<div class="input-group col col-lg-7"> +<div class="input-group col-lg-7"> <input type="text"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> @@ -1505,7 +1505,7 @@ For example, <code><section></code> should be wrapped as inline. <h4>Button dropdowns</h4> <p></p> <form class="bs-example"> - <div class="input-group col col-lg-7"> + <div class="input-group col-lg-7"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu"> @@ -1519,7 +1519,7 @@ For example, <code><section></code> should be wrapped as inline. <input type="text"> </div><!-- /input-group --> <br> - <div class="input-group col col-lg-7"> + <div class="input-group col-lg-7"> <input type="text"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> @@ -1534,7 +1534,7 @@ For example, <code><section></code> should be wrapped as inline. </div><!-- /input-group --> </form> {% highlight html %} -<div class="input-group col col-lg-7"> +<div class="input-group col-lg-7"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu"> @@ -1548,7 +1548,7 @@ For example, <code><section></code> should be wrapped as inline. <input type="text"> </div><!-- /input-group --> -<div class="input-group col col-lg-7"> +<div class="input-group col-lg-7"> <input type="text"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> @@ -1565,7 +1565,7 @@ For example, <code><section></code> should be wrapped as inline. <h4>Segmented dropdown groups</h4> <form class="bs-example"> - <div class="input-group col col-lg-7"> + <div class="input-group col-lg-7"> <div class="input-group-btn"> <button type="button" class="btn btn-default" tabindex="-1">Action</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> @@ -1584,7 +1584,7 @@ For example, <code><section></code> should be wrapped as inline. <br> - <div class="input-group col col-lg-7"> + <div class="input-group col-lg-7"> <input type="text"> <div class="input-group-btn"> <button type="button" class="btn btn-default" tabindex="-1">Action</button> @@ -1602,14 +1602,14 @@ For example, <code><section></code> should be wrapped as inline. </div> </form> {% highlight html %} -<div class="input-group col col-lg-7"> +<div class="input-group col-lg-7"> <div class="input-group-btn"> <!-- Button and dropdown menu --> </div> <input type="text"> </div> -<div class="input-group col col-lg-7"> +<div class="input-group col-lg-7"> <input type="text"> <div class="input-group-btn btn-group"> <!-- Button and dropdown menu --> @@ -1639,27 +1639,27 @@ For example, <code><section></code> should be wrapped as inline. <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p> <form class="bs-example" style="padding-bottom: 15px;"> <div class="row"> - <div class="col col-lg-2"> - <input type="text" placeholder="col col-large-2"> + <div class="col-lg-2"> + <input type="text" placeholder="col-large-2"> </div> - <div class="col col-lg-3"> - <input type="text" placeholder="col col-large-3"> + <div class="col-lg-3"> + <input type="text" placeholder="col-large-3"> </div> - <div class="col col-lg-4"> - <input type="text" placeholder="col col-large-4"> + <div class="col-lg-4"> + <input type="text" placeholder="col-large-4"> </div> </div> </form> {% highlight html %} <div class="row"> - <div class="col col-lg-2"> - <input type="text" placeholder="col col-large-2"> + <div class="col-lg-2"> + <input type="text" placeholder="col-large-2"> </div> - <div class="col col-lg-3"> - <input type="text" placeholder="col col-large-3"> + <div class="col-lg-3"> + <input type="text" placeholder="col-large-3"> </div> - <div class="col col-lg-4"> - <input type="text" placeholder="col col-large-4"> + <div class="col-lg-4"> + <input type="text" placeholder="col-large-4"> </div> </div> {% endhighlight %} |