diff options
Diffstat (limited to 'docs/_includes/css')
| -rw-r--r-- | docs/_includes/css/buttons.html | 2 | ||||
| -rw-r--r-- | docs/_includes/css/code.html | 3 | ||||
| -rw-r--r-- | docs/_includes/css/forms.html | 129 | ||||
| -rw-r--r-- | docs/_includes/css/grid.html | 14 | ||||
| -rw-r--r-- | docs/_includes/css/images.html | 4 | ||||
| -rw-r--r-- | docs/_includes/css/less.html | 4 | ||||
| -rw-r--r-- | docs/_includes/css/tables.html | 1 |
7 files changed, 140 insertions, 17 deletions
diff --git a/docs/_includes/css/buttons.html b/docs/_includes/css/buttons.html index 15b0f5ed2..bfc5ded80 100644 --- a/docs/_includes/css/buttons.html +++ b/docs/_includes/css/buttons.html @@ -88,7 +88,7 @@ <h2 id="buttons-active">Active state</h2> - <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code><button></code>s should you need to replicate the active state progammatically.</p> + <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code><button></code>s should you need to replicate the active state programmatically.</p> <h3>Button element</h3> <p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p> diff --git a/docs/_includes/css/code.html b/docs/_includes/css/code.html index 675ac10e9..ba2edc151 100644 --- a/docs/_includes/css/code.html +++ b/docs/_includes/css/code.html @@ -17,7 +17,8 @@ For example, <code><section></code> should be wrapped as inline. To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> </div> {% highlight html %} -To switch directories, type <kbd>cd</kbd> followed by the name of the directory. +To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> +To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> {% endhighlight %} <h2 id="code-block">Basic block</h2> diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index 95bb29c59..5bb99f00c 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -49,17 +49,17 @@ <button type="submit" class="btn btn-default">Submit</button> </form> {% endhighlight %} - <div class="bs-callout bs-callout-warning"> - <h4>Don't mix form groups with input groups</h4> - <p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p> - </div> + <div class="bs-callout bs-callout-warning"> + <h4>Don't mix form groups with input groups</h4> + <p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p> + </div> <h2 id="forms-inline">Inline form</h2> <p>Add <code>.form-inline</code> to your <code><form></code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p> <div class="bs-callout bs-callout-danger"> <h4>Requires custom widths</h4> - <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p> + <p>Inputs and selects have <code>width: 100%;</code> applied by default in Bootstrap. Within inline forms, we reset that to <code>width: auto;</code> so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p> </div> <div class="bs-callout bs-callout-warning"> <h4>Always add labels</h4> @@ -96,6 +96,12 @@ <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> + <div class="input-group"> + <div class="input-group-addon">@</div> + <input class="form-control" type="email" placeholder="Enter email"> + </div> + </div> + <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> @@ -369,7 +375,7 @@ <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> + <p>When you need to place plain text next to a form label within a form, use the <code>.form-control-static</code> class on a <code><p></code>.</p> <div class="bs-example"> <form class="form-horizontal" role="form"> <div class="form-group"> @@ -402,6 +408,32 @@ </div> </form> {% endhighlight %} + <div class="bs-example"> + <form class="form-inline" role="form"> + <div class="form-group"> + <label class="sr-only">Email</label> + <p class="form-control-static">[email protected]</p> + </div> + <div class="form-group"> + <label for="inputPassword2" class="sr-only">Password</label> + <input type="password" class="form-control" id="inputPassword2" placeholder="Password"> + </div> + <button type="submit" class="btn btn-default">Confirm identity</button> + </form> + </div> +{% highlight html %} +<form class="form-inline" role="form"> + <div class="form-group"> + <label class="sr-only">Email</label> + <p class="form-control-static">[email protected]</p> + </div> + <div class="form-group"> + <label for="inputPassword2" class="sr-only">Password</label> + <input type="password" class="form-control" id="inputPassword2" placeholder="Password"> + </div> + <button type="submit" class="btn btn-default">Confirm identity</button> +</form> +{% endhighlight %} <h2 id="forms-control-focus">Input focus</h2> <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> @@ -515,6 +547,30 @@ <label class="control-label" for="inputError1">Input with error</label> <input type="text" class="form-control" id="inputError1"> </div> + <div class="has-success"> + <div class="checkbox"> + <label> + <input type="checkbox" id="checkboxSuccess" value="option1"> + Checkbox with success + </label> + </div> + </div> + <div class="has-warning"> + <div class="checkbox"> + <label> + <input type="checkbox" id="checkboxWarning" value="option1"> + Checkbox with warning + </label> + </div> + </div> + <div class="has-error"> + <div class="checkbox"> + <label> + <input type="checkbox" id="checkboxError" value="option1"> + Checkbox with error + </label> + </div> + </div> </form> </div><!-- /.bs-example --> {% highlight html %} @@ -530,10 +586,35 @@ <label class="control-label" for="inputError1">Input with error</label> <input type="text" class="form-control" id="inputError1"> </div> +<div class="has-success"> + <div class="checkbox"> + <label> + <input type="checkbox" id="checkboxSuccess" value="option1"> + Checkbox with success + </label> + </div> +</div> +<div class="has-warning"> + <div class="checkbox"> + <label> + <input type="checkbox" id="checkboxWarning" value="option1"> + Checkbox with warning + </label> + </div> +</div> +<div class="has-error"> + <div class="checkbox"> + <label> + <input type="checkbox" id="checkboxError" value="option1"> + Checkbox with error + </label> + </div> +</div> {% endhighlight %} <h3>With optional icons</h3> <p>You can also add optional feedback icons with the addition of <code>.has-feedback</code> and the right icon.</p> + <p><strong class="text-danger">Feedback icons only work with textual <code><input class="form-control"></code> elements.</strong></p> <div class="bs-callout bs-callout-warning"> <h4>Icons, labels, and input groups</h4> <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p> @@ -670,6 +751,42 @@ <select class="form-control input-sm">...</select> {% endhighlight %} + <h3>Horizontal form group sizes</h3> + <p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p> + <div class="bs-example"> + <form class="form-horizontal" role="form"> + <div class="form-group form-group-lg"> + <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label> + <div class="col-sm-10"> + <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input"> + </div> + </div> + <div class="form-group form-group-sm"> + <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label> + <div class="col-sm-10"> + <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input"> + </div> + </div> + </form> + </div><!-- /.bs-example --> +{% highlight html %} +<form class="form-horizontal" role="form"> + <div class="form-group form-group-lg"> + <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label> + <div class="col-sm-10"> + <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input"> + </div> + </div> + <div class="form-group form-group-sm"> + <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label> + <div class="col-sm-10"> + <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input"> + </div> + </div> +</form> +{% endhighlight %} + + <h3>Column sizing</h3> <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p> <div class="bs-example"> diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html index 8ff53dd71..429ef90f9 100644 --- a/docs/_includes/css/grid.html +++ b/docs/_includes/css/grid.html @@ -347,16 +347,16 @@ <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-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).</p> + <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).</p> <div class="row show-grid"> <div class="col-sm-9"> - Level 1: .col-md-9 + Level 1: .col-sm-9 <div class="row show-grid"> <div class="col-xs-8 col-sm-6"> - Level 2: .col-xs-8 .col-md-6 + Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> - Level 2: .col-xs-4 .col-md-6 + Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> @@ -364,13 +364,13 @@ {% highlight html %} <div class="row"> <div class="col-sm-9"> - Level 1: .col-md-9 + Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> - Level 2: .col-xs-8 .col-md-6 + Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> - Level 2: .col-xs-4 .col-md-6 + Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> diff --git a/docs/_includes/css/images.html b/docs/_includes/css/images.html index 4e0fc4a77..4f3687ea6 100644 --- a/docs/_includes/css/images.html +++ b/docs/_includes/css/images.html @@ -3,6 +3,10 @@ <h2 id="images-responsive">Responsive images</h2> <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p> + <div class="bs-callout bs-callout-warning"> + <h4>SVG images and IE 8-10</h4> + <p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p> + </div> {% highlight html %} <img src="..." class="img-responsive" alt="Responsive image"> {% endhighlight %} diff --git a/docs/_includes/css/less.html b/docs/_includes/css/less.html index eadbda775..b325ea9eb 100644 --- a/docs/_includes/css/less.html +++ b/docs/_includes/css/less.html @@ -7,7 +7,7 @@ <h2 id="less-bootstrap">Compiling Bootstrap</h2> - <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="https://github.com/twbs/bootstrap#compiling-css-and-javascript">visit the README</a> for how to setup your development environment to run the necessary commands.</p> + <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="../getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p> <p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p> <h2 id="less-variables">Variables</h2> @@ -28,7 +28,7 @@ @gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @gray: lighten(#000, 33.5%); // #555 -@gray-light: lighten(#000, 60%); // #999 +@gray-light: lighten(#000, 46.7%); // #777 @gray-lighter: lighten(#000, 93.5%); // #eee {% endhighlight %} diff --git a/docs/_includes/css/tables.html b/docs/_includes/css/tables.html index 655545112..011a4dbba 100644 --- a/docs/_includes/css/tables.html +++ b/docs/_includes/css/tables.html @@ -5,6 +5,7 @@ <p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p> <div class="bs-example"> <table class="table"> + <caption>Optional table caption.</caption> <thead> <tr> <th>#</th> |