diff options
Diffstat (limited to 'css.html')
| -rw-r--r-- | css.html | 573 |
1 files changed, 336 insertions, 237 deletions
@@ -80,20 +80,20 @@ base_url: "../" /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ -@media (min-width: @screen-tablet) { ... } +@media (min-width: @screen-sm) { ... } /* Medium devices (desktops, 992px and up) */ -@media (min-width: @screen-desktop) { ... } +@media (min-width: @screen-md) { ... } /* Large devices (large desktops, 1200px and up) */ -@media (min-width: @screen-large-desktop) { ... } +@media (min-width: @screen-lg) { ... } {% endhighlight %} <p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p> {% highlight css %} @media (max-width: @screen-phone-max) { ... } -@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { ... } -@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { ... } -@media (min-width: @screen-large-desktop) { ... } +@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { ... } +@media (min-width: @screen-md) and (max-width: @screen-md-max) { ... } +@media (min-width: @screen-lg) { ... } {% endhighlight %} <h3 id="grid-options">Grid options</h3> @@ -588,46 +588,80 @@ base_url: "../" <!-- Headings --> <h2 id="type-headings">Headings</h2> <p>All HTML headings, <code><h1></code> through <code><h6></code> are available.</p> - <div class="bs-example bs-example-type"> <table class="table"> <tbody> <tr> <td><h1>h1. Bootstrap heading</h1></td> - <td>Semibold 36px</td> + <td class="info">Semibold 36px</td> </tr> <tr> <td><h2>h2. Bootstrap heading</h2></td> - <td>Semibold 30px</td> + <td class="info">Semibold 30px</td> </tr> <tr> <td><h3>h3. Bootstrap heading</h3></td> - <td>Semibold 24px</td> + <td class="info">Semibold 24px</td> </tr> <tr> <td><h4>h4. Bootstrap heading</h4></td> - <td>Semibold 18px</td> + <td class="info">Semibold 18px</td> </tr> <tr> <td><h5>h5. Bootstrap heading</h5></td> - <td>Semibold 14px</td> + <td class="info">Semibold 14px</td> </tr> <tr> <td><h6>h6. Bootstrap heading</h6></td> - <td>Semibold 12px</td> + <td class="info">Semibold 12px</td> </tr> </tbody> </table> </div> {% highlight html %} -<h1>...</h1> -<h2>...</h2> -<h3>...</h3> -<h4>...</h4> -<h5>...</h5> -<h6>...</h6> +<h1>h1. Bootstrap heading</h1> +<h2>h2. Bootstrap heading</h2> +<h3>h3. Bootstrap heading</h3> +<h4>h4. Bootstrap heading</h4> +<h5>h5. Bootstrap heading</h5> +<h6>h6. Bootstrap heading</h6> {% endhighlight %} + <p>Also included with headings is an autoscaling <code><small></code> element. Use it for smaller, gray secondary text in any heading.</p> + <div class="bs-example bs-example-type"> + <table class="table"> + <tbody> + <tr> + <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td> + </tr> + <tr> + <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td> + </tr> + <tr> + <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td> + </tr> + <tr> + <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td> + </tr> + <tr> + <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td> + </tr> + <tr> + <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td> + </tr> + </tbody> + </table> + </div> +{% highlight html %} +<h1>h1. Bootstrap heading <small>Secondary text</small></h1> +<h2>h2. Bootstrap heading <small>Secondary text</small></h2> +<h3>h3. Bootstrap heading <small>Secondary text</small></h3> +<h4>h4. Bootstrap heading <small>Secondary text</small></h4> +<h5>h5. Bootstrap heading <small>Secondary text</small></h5> +<h6>h6. Bootstrap heading <small>Secondary text</small></h6> +{% endhighlight %} + + <!-- Body copy --> <h2 id="type-body-copy">Body copy</h2> <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.428</strong>. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).</p> @@ -1446,27 +1480,29 @@ For example, <code><section></code> should be wrapped as inline. <h2 id="forms-example">Basic example</h2> <p>Individual form controls automatically receive some global styling. All textual <code><input></code>, <code><textarea></code>, and <code><select></code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p> - <form class="bs-example" role="form"> - <div class="form-group"> - <label for="exampleInputEmail1">Email address</label> - <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> - </div> - <div class="form-group"> - <label for="exampleInputPassword1">Password</label> - <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> - </div> - <div class="form-group"> - <label for="exampleInputFile">File input</label> - <input type="file" id="exampleInputFile"> - <p class="help-block">Example block-level help text here.</p> - </div> - <div class="checkbox"> - <label> - <input type="checkbox"> Check me out - </label> - </div> - <button type="submit" class="btn btn-default">Submit</button> - </form><!-- /example --> + <div class="bs-example"> + <form role="form"> + <div class="form-group"> + <label for="exampleInputEmail1">Email address</label> + <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> + </div> + <div class="form-group"> + <label for="exampleInputPassword1">Password</label> + <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> + </div> + <div class="form-group"> + <label for="exampleInputFile">File input</label> + <input type="file" id="exampleInputFile"> + <p class="help-block">Example block-level help text here.</p> + </div> + <div class="checkbox"> + <label> + <input type="checkbox"> Check me out + </label> + </div> + <button type="submit" class="btn btn-default">Submit</button> + </form> + </div><!-- /example --> {% highlight html %} <form role="form"> <div class="form-group"> @@ -1502,22 +1538,24 @@ For example, <code><section></code> should be wrapped as inline. <h4>Always add labels</h4> <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p> </div> - <form class="bs-example form-inline" role="form"> - <div class="form-group"> - <label class="sr-only" for="exampleInputEmail2">Email address</label> - <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> - </div> - <div class="form-group"> - <label class="sr-only" for="exampleInputPassword2">Password</label> - <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> - </div> - <div class="checkbox"> - <label> - <input type="checkbox"> Remember me - </label> - </div> - <button type="submit" class="btn btn-default">Sign in</button> - </form><!-- /example --> + <div class="bs-example"> + <form class="form-inline" role="form"> + <div class="form-group"> + <label class="sr-only" for="exampleInputEmail2">Email address</label> + <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> + </div> + <div class="form-group"> + <label class="sr-only" for="exampleInputPassword2">Password</label> + <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> + </div> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> + <button type="submit" class="btn btn-default">Sign in</button> + </form> + </div><!-- /example --> {% highlight html %} <form class="form-inline" role="form"> <div class="form-group"> @@ -1540,34 +1578,36 @@ For example, <code><section></code> should be wrapped as inline. <h2 id="forms-horizontal">Horizontal form</h2> <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p> - <form class="bs-example form-horizontal"> - <div class="form-group"> - <label for="inputEmail1" class="col-lg-2 control-label">Email</label> - <div class="col-lg-10"> - <input type="email" class="form-control" id="inputEmail1" placeholder="Email"> + <div class="bs-example"> + <form class="form-horizontal"> + <div class="form-group"> + <label for="inputEmail1" class="col-lg-2 control-label">Email</label> + <div class="col-lg-10"> + <input type="email" class="form-control" id="inputEmail1" placeholder="Email"> + </div> </div> - </div> - <div class="form-group"> - <label for="inputPassword1" class="col-lg-2 control-label">Password</label> - <div class="col-lg-10"> - <input type="password" class="form-control" id="inputPassword1" placeholder="Password"> + <div class="form-group"> + <label for="inputPassword1" class="col-lg-2 control-label">Password</label> + <div class="col-lg-10"> + <input type="password" class="form-control" id="inputPassword1" placeholder="Password"> + </div> </div> - </div> - <div class="form-group"> - <div class="col-lg-offset-2 col-lg-10"> - <div class="checkbox"> - <label> - <input type="checkbox"> Remember me - </label> + <div class="form-group"> + <div class="col-lg-offset-2 col-lg-10"> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> </div> </div> - </div> - <div class="form-group"> - <div class="col-lg-offset-2 col-lg-10"> - <button type="submit" class="btn btn-default">Sign in</button> + <div class="form-group"> + <div class="col-lg-offset-2 col-lg-10"> + <button type="submit" class="btn btn-default">Sign in</button> + </div> </div> - </div> - </form> + </form> + </div><!-- /.bs-example --> {% highlight html %} <form class="form-horizontal" role="form"> <div class="form-group"> @@ -1609,18 +1649,22 @@ For example, <code><section></code> should be wrapped as inline. <h4>Type declaration required</h4> <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p> </div> - <form class="bs-example"> - <input type="text" class="form-control" placeholder="Text input"> - </form> + <div class="bs-example"> + <form role="form"> + <input type="text" class="form-control" placeholder="Text input"> + </form> + </div><!-- /.bs-example --> {% highlight html %} <input type="text" class="form-control" placeholder="Text input"> {% endhighlight %} <h3>Textarea</h3> <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p> - <form class="bs-example"> - <textarea class="form-control" rows="3"></textarea> - </form> + <div class="bs-example"> + <form role="form"> + <textarea class="form-control" rows="3"></textarea> + </form> + </div><!-- /.bs-example --> {% highlight html %} <textarea class="form-control" rows="3"></textarea> {% endhighlight %} @@ -1628,27 +1672,29 @@ For example, <code><section></code> should be wrapped as inline. <h3>Checkboxes and radios</h3> <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p> <h4>Default (stacked)</h4> - <form class="bs-example"> - <div class="checkbox"> - <label> - <input type="checkbox" value=""> - Option one is this and that—be sure to include why it's great - </label> - </div> - <br> - <div class="radio"> - <label> - <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> - Option one is this and that—be sure to include why it's great - </label> - </div> - <div class="radio"> - <label> - <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> - Option two can be something else and selecting it will deselect option one - </label> - </div> - </form> + <div class="bs-example"> + <form role="form"> + <div class="checkbox"> + <label> + <input type="checkbox" value=""> + Option one is this and that—be sure to include why it's great + </label> + </div> + <br> + <div class="radio"> + <label> + <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> + Option one is this and that—be sure to include why it's great + </label> + </div> + <div class="radio"> + <label> + <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> + Option two can be something else and selecting it will deselect option one + </label> + </div> + </form> + </div><!-- /.bs-example --> {% highlight html %} <div class="checkbox"> <label> @@ -1673,17 +1719,19 @@ For example, <code><section></code> should be wrapped as inline. <h4>Inline checkboxes</h4> <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p> - <form class="bs-example"> - <label class="checkbox-inline"> - <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 - </label> - <label class="checkbox-inline"> - <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 - </label> - <label class="checkbox-inline"> - <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 - </label> - </form> + <div class="bs-example"> + <form role="form"> + <label class="checkbox-inline"> + <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 + </label> + <label class="checkbox-inline"> + <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 + </label> + <label class="checkbox-inline"> + <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 + </label> + </form> + </div><!-- /.bs-example --> {% highlight html %} <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 @@ -1698,23 +1746,25 @@ For example, <code><section></code> should be wrapped as inline. <h3>Selects</h3> <p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p> - <form class="bs-example"> - <select class="form-control"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - <br> - <select multiple class="form-control"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - </form> + <div class="bs-example"> + <form role="form"> + <select class="form-control"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + <br> + <select multiple class="form-control"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + </form> + </div><!-- /.bs-example --> {% highlight html %} <select class="form-control"> <option>1</option> @@ -1736,20 +1786,22 @@ For example, <code><section></code> should be wrapped as inline. <h2 id="forms-controls-static">Static control</h2> <p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code><p></code>.</p> - <form class="bs-example form-horizontal"> - <div class="form-group"> - <label class="col-lg-2 control-label">Email</label> - <div class="col-lg-10"> - <p class="form-control-static">[email protected]</p> + <div class="bs-example"> + <form class="form-horizontal" role="form"> + <div class="form-group"> + <label class="col-lg-2 control-label">Email</label> + <div class="col-lg-10"> + <p class="form-control-static">[email protected]</p> + </div> </div> - </div> - <div class="form-group"> - <label for="inputPassword" class="col-lg-2 control-label">Password</label> - <div class="col-lg-10"> - <input type="password" class="form-control" id="inputPassword" placeholder="Password"> + <div class="form-group"> + <label for="inputPassword" class="col-lg-2 control-label">Password</label> + <div class="col-lg-10"> + <input type="password" class="form-control" id="inputPassword" placeholder="Password"> + </div> </div> - </div> - </form> + </form> + </div><!-- /.bs-example --> {% highlight html %} <form class="form-horizontal" role="form"> <div class="form-group"> @@ -1773,18 +1825,22 @@ For example, <code><section></code> should be wrapped as inline. <h3 id="forms-input-focus">Input focus</h3> <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> - <form class="bs-example"> - <input class="form-control" id="focusedInput" type="text" value="This is focused..."> - </form> + <div class="bs-example"> + <form role="form"> + <input class="form-control" id="focusedInput" type="text" value="This is focused..."> + </form> + </div> {% highlight html %} <input class="form-control" id="focusedInput" type="text" value="This is focused..."> {% endhighlight %} <h3 id="forms-disabled-inputs">Disabled inputs</h3> <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> - <form class="bs-example"> - <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> - </form> + <div class="bs-example"> + <form role="form"> + <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> + </form> + </div><!-- /.bs-example --> {% highlight html %} <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> {% endhighlight %} @@ -1802,28 +1858,30 @@ For example, <code><section></code> should be wrapped as inline. <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the <code>disabled</code> attribute on a <code><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p> </div> - <form class="bs-example"> - <fieldset disabled> - <div class="form-group"> - <label for="disabledTextInput">Disabled input</label> - <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> - </div> - <div class="form-group"> - <label for="disabledSelect">Disabled select menu</label> - <select id="disabledSelect" class="form-control"> - <option>Disabled select</option> - </select> - </div> - <div class="checkbox"> - <label> - <input type="checkbox"> Can't check this - </label> - </div> - <button type="submit" class="btn btn-primary">Submit</button> - </fieldset> - </form> + <div class="bs-example"> + <form role="form"> + <fieldset disabled> + <div class="form-group"> + <label for="disabledTextInput">Disabled input</label> + <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> + </div> + <div class="form-group"> + <label for="disabledSelect">Disabled select menu</label> + <select id="disabledSelect" class="form-control"> + <option>Disabled select</option> + </select> + </div> + <div class="checkbox"> + <label> + <input type="checkbox"> Can't check this + </label> + </div> + <button type="submit" class="btn btn-primary">Submit</button> + </fieldset> + </form> + </div><!-- /.bs-example --> {% highlight html %} -<form class="form-inline" role="form"> +<form role="form"> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">Disabled input</label> @@ -1848,20 +1906,22 @@ For example, <code><section></code> should be wrapped as inline. <h3 id="forms-validation">Validation states</h3> <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.</p> - <form class="bs-example"> - <div class="form-group has-success"> - <label class="control-label" for="inputSuccess">Input with success</label> - <input type="text" class="form-control" id="inputSuccess"> - </div> - <div class="form-group has-warning"> - <label class="control-label" for="inputWarning">Input with warning</label> - <input type="text" class="form-control" id="inputWarning"> - </div> - <div class="form-group has-error"> - <label class="control-label" for="inputError">Input with error</label> - <input type="text" class="form-control" id="inputError"> - </div> - </form> + <div class="bs-example"> + <form role="form"> + <div class="form-group has-success"> + <label class="control-label" for="inputSuccess">Input with success</label> + <input type="text" class="form-control" id="inputSuccess"> + </div> + <div class="form-group has-warning"> + <label class="control-label" for="inputWarning">Input with warning</label> + <input type="text" class="form-control" id="inputWarning"> + </div> + <div class="form-group has-error"> + <label class="control-label" for="inputError">Input with error</label> + <input type="text" class="form-control" id="inputError"> + </div> + </form> + </div><!-- /.bs-example --> {% highlight html %} <div class="form-group has-success"> <label class="control-label" for="inputSuccess">Input with success</label> @@ -1883,23 +1943,25 @@ For example, <code><section></code> should be wrapped as inline. <h3>Height sizing</h3> <p>Create larger or smaller form controls that match button sizes.</p> - <form class="bs-example bs-example-control-sizing"> - <div class="controls docs-input-sizes"> - <input class="form-control input-lg" type="text" placeholder=".input-lg"> - <input type="text" class="form-control" placeholder="Default input"> - <input class="form-control input-sm" type="text" placeholder=".input-sm"> - - <select class="form-control input-lg"> - <option value="">.input-lg</option> - </select> - <select class="form-control"> - <option value="">Default select</option> - </select> - <select class="form-control input-sm"> - <option value="">.input-sm</option> - </select> - </div> - </form> + <div class="bs-example bs-example-control-sizing"> + <form role="form"> + <div class="controls"> + <input class="form-control input-lg" type="text" placeholder=".input-lg"> + <input type="text" class="form-control" placeholder="Default input"> + <input class="form-control input-sm" type="text" placeholder=".input-sm"> + + <select class="form-control input-lg"> + <option value="">.input-lg</option> + </select> + <select class="form-control"> + <option value="">Default select</option> + </select> + <select class="form-control input-sm"> + <option value="">.input-sm</option> + </select> + </div> + </form> + </div><!-- /.bs-example --> {% highlight html %} <input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control" type="text" placeholder="Default input"> @@ -1912,19 +1974,21 @@ For example, <code><section></code> should be wrapped as inline. <h3>Column sizing</h3> <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-lg-2"> - <input type="text" class="form-control" placeholder=".col-lg-2"> - </div> - <div class="col-lg-3"> - <input type="text" class="form-control" placeholder=".col-lg-3"> - </div> - <div class="col-lg-4"> - <input type="text" class="form-control" placeholder=".col-lg-4"> + <div class="bs-example"> + <form role="form"> + <div class="row"> + <div class="col-lg-2"> + <input type="text" class="form-control" placeholder=".col-lg-2"> + </div> + <div class="col-lg-3"> + <input type="text" class="form-control" placeholder=".col-lg-3"> + </div> + <div class="col-lg-4"> + <input type="text" class="form-control" placeholder=".col-lg-4"> + </div> </div> - </div> - </form> + </form> + </div><!-- /.bs-example --> {% highlight html %} <div class="row"> <div class="col-lg-2"> @@ -1941,10 +2005,12 @@ For example, <code><section></code> should be wrapped as inline. <h2 id="forms-help-text">Help text</h2> <p>Block level help text for form controls.</p> - <form class="bs-example"> - <input type="text" class="form-control"> - <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> - </form> + <div class="bs-example"> + <form role="form"> + <input type="text" class="form-control"> + <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> + </form> + </div><!-- /.bs-example --> {% highlight html %} <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> {% endhighlight %} @@ -2147,7 +2213,8 @@ For example, <code><section></code> should be wrapped as inline. <h1 id="helper-classes">Helper classes</h1> </div> - <h3>Close icon</h3> + + <h3 id="helper-classes-close">Close icon</h3> <p>Use the generic close icon for dismissing content like modals and alerts.</p> <div class="bs-example"> <p><button type="button" class="close" aria-hidden="true">×</button></p> @@ -2156,35 +2223,45 @@ For example, <code><section></code> should be wrapped as inline. <button type="button" class="close" aria-hidden="true">×</button> {% endhighlight %} - <h3>.pull-left</h3> - <p>Float an element left with a class. Can also be used as a mixin.</p> + + <h3 id="helper-classes-floats">Quick floats</h3> + <p>Float an element to the left or right with a class. Classes can also be used as mixins.</p> {% highlight html %} <div class="pull-left">...</div> +<div class="pull-right">...</div> {% endhighlight %} {% highlight css %} +// Classes .pull-left { float: left !important; } -{% endhighlight %} - - <h3>.pull-right</h3> - <p>Float an element right with a class. Can also be used as a mixin.</p> -{% highlight html %} -<div class="pull-right">...</div> -{% endhighlight %} -{% highlight css %} .pull-right { float: right !important; } + +// Usage as mixins +.element { + .pull-left(); +} +.another-element { + .pull-right(); +} {% endhighlight %} - <h3>.clearfix</h3> - <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p> + <div class="bs-callout bs-callout-warning"> + <h4>Not for use in navbars</h4> + <p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p> + </div> + + + <h3 id="helper-classes-clearfix">Clearfix</h3> + <p>Clear the <code>float</code> on any element with the <code>.clearfix</code> class. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p> {% highlight html %} +<!-- Usage as a class --> <div class="clearfix">...</div> {% endhighlight %} {% highlight css %} -// Mixin +// Mixin itself .clearfix() { &:before, &:after { @@ -2196,19 +2273,41 @@ For example, <code><section></code> should be wrapped as inline. } } -// Usage +// Usage as a Mixin .element { .clearfix(); } {% endhighlight %} - <h3>.sr-only</h3> - <p>Hide an element to all users <em>except</em> screen readers. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>.</p> + + <h3 id="helper-classes-screen-readers">Screen reader content</h3> + <p>Hide an element to all users <em>except</em> screen readers with <code>.sr-only</code>. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p> {% highlight html %} <a class="sr-only" href="#content">Skip to content</a> {% endhighlight %} +{% highlight css %} +// Usage as a Mixin +.skip-navigation { + .sr-only(); +} +{% endhighlight %} + + + <h3 id="helper-classes-image-replacement">Image replacement</h3> + <p>Utilize the <code>.text-hide</code> class or mixin to help replace an element's text content with a background image.</p> +{% highlight html %} +<h1 class="text-hide">Custom heading</h1> +{% endhighlight %} + {% highlight css %} +// Usage as a Mixin +.heading { + .text-hide(); +} +{% endhighlight %} </div> + + <!-- Responsive utilities ================================================== --> <div class="bs-docs-section" id="responsive-utilities"> |