diff options
Diffstat (limited to 'css.html')
| -rw-r--r-- | css.html | 60 |
1 files changed, 30 insertions, 30 deletions
@@ -263,32 +263,32 @@ base_url: "../" <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p> <div class="bs-docs-grid"> <div class="row show-grid"> - <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> + <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-sm-8 .col-lg-8</div> + <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> </div> <div class="row show-grid"> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> + <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> + <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> + <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> </div> <div class="row show-grid"> - <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div> - <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div> + <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div> + <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div> </div> </div> {% highlight html %} <div class="row"> - <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> + <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-sm-8 .col-lg-8</div> + <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> </div> <div class="row"> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> - <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div> + <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> + <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> + <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-sm-4 .col-lg-4</div> </div> <div class="row"> - <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div> - <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div> + <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div> + <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-sm-6 .col-lg-6</div> </div> {% endhighlight %} @@ -299,31 +299,31 @@ base_url: "../" </div> <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-lg-4</code> over four columns.</p> + <p>Move columns to the right using <code>.col-lg-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-lg-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-lg-4">4</div> - <div class="col-lg-4 col-offset-4">4 offset 4</div> + <div class="col-lg-4 col-lg-offset-4">4 offset 4</div> </div><!-- /row --> <div class="row show-grid"> - <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 class="col-lg-3 col-lg-offset-3">3 offset 3</div> + <div class="col-lg-3 col-lg-offset-3">3 offset 3</div> </div><!-- /row --> <div class="row show-grid"> - <div class="col-lg-6 col-offset-3">6 offset 3</div> + <div class="col-lg-6 col-lg-offset-3">6 offset 3</div> </div><!-- /row --> </div> {% highlight html %} <div class="row"> <div class="col-lg-4">...</div> - <div class="col-lg-4 col-offset-4">...</div> + <div class="col-lg-4 col-lg-offset-4">...</div> </div> <div class="row"> - <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 class="col-lg-3 col-lg-offset-3">3 offset 3</div> + <div class="col-lg-3 col-lg-offset-3">3 offset 3</div> </div> <div class="row"> - <div class="col-lg-6 col-offset-3">...</div> + <div class="col-lg-6 col-lg-offset-3">...</div> </div> {% endhighlight %} @@ -360,16 +360,16 @@ base_url: "../" {% endhighlight %} <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> + <p>Easily change the order of our built-in grid columns with <code>.col-lg-push-*</code> and <code>.col-lg-pull-*</code> modifier classes.</p> <div class="row show-grid"> - <div class="col-lg-9 col-push-3">9</div> - <div class="col-lg-3 col-pull-9">3</div> + <div class="col-lg-9 col-lg-push-3">9</div> + <div class="col-lg-3 col-lg-pull-9">3</div> </div> {% highlight html %} <div class="row"> - <div class="col-lg-9 col-push-3">9</div> - <div class="col-lg-3 col-pull-9">3</div> + <div class="col-lg-9 col-lg-push-3">9</div> + <div class="col-lg-3 col-lg-pull-9">3</div> </div> {% endhighlight %} @@ -1536,7 +1536,7 @@ For example, <code><section></code> should be wrapped as inline. {% endhighlight %} <h3 id="forms-validation">Validation states</h3> - <p>Bootstrap includes validation styles for error, warning, and success states on from controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</li> + <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</li> <form class="bs-example"> <div class="form-group has-warning"> @@ -1592,7 +1592,7 @@ For example, <code><section></code> should be wrapped as inline. </form> {% highlight html %} <input class="form-control input-large" type="text" placeholder=".input-large"> -<input class="form-control"type="text" placeholder="Default input"> +<input class="form-control" type="text" placeholder="Default input"> <input class="form-control input-small" type="text" placeholder=".input-small"> <select class="form-control input-large">...</select> |