mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-20 17:54:23 +01:00
apply example tweaks from master branch
This commit is contained in:
Chris Rebert
parent
63a5f9c112
commit
7473dc5ac7
@ -1906,34 +1906,34 @@
|
||||
<p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
|
||||
<form class="bs-example bs-example-form" data-example-id="simple-input-groups">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
<span class="input-group-addon" id="basic-addon1">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-addon">.00</span>
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
|
||||
<span class="input-group-addon" id="basic-addon2">@example.com</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text" class="form-control">
|
||||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span> <span class="na">id=</span><span class="s">"basic-addon1"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"basic-addon1"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></span>.00<span class="nt"></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Recipient's username"</span> <span class="na">aria-describedby=</span><span class="s">"basic-addon2"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span> <span class="na">id=</span><span class="s">"basic-addon2"</span><span class="nt">></span>@example.com<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></span>$<span class="nt"></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"Amount (to the nearest dollar)"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></span>.00<span class="nt"></span></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
@ -1941,33 +1941,33 @@
|
||||
<p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
|
||||
<form class="bs-example bs-example-form" data-example-id="input-group-sizing">
|
||||
<div class="input-group input-group-lg">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
<span class="input-group-addon" id="sizing-addon1">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
<span class="input-group-addon" id="sizing-addon2">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
<span class="input-group-addon" id="sizing-addon3">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
|
||||
</div>
|
||||
</form>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group input-group-lg"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span> <span class="na">id=</span><span class="s">"sizing-addon1"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"sizing-addon1"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span> <span class="na">id=</span><span class="s">"sizing-addon2"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"sizing-addon2"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group input-group-sm"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span> <span class="na">id=</span><span class="s">"sizing-addon3"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"sizing-addon3"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
|
||||
@ -1978,17 +1978,17 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" aria-label="Checkbox for following text input">
|
||||
</span>
|
||||
<input type="text" class="form-control">
|
||||
<input type="text" class="form-control" aria-label="Text input with checkbox">
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<input type="radio">
|
||||
<input type="radio" aria-label="Radio button for following text input">
|
||||
</span>
|
||||
<input type="text" class="form-control">
|
||||
<input type="text" class="form-control" aria-label="Text input with radio button">
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div><!-- /.row -->
|
||||
@ -1997,17 +1997,17 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span><span class="c"><!-- /input-group --></span>
|
||||
<span class="nt"></div></span><span class="c"><!-- /.col-lg-6 --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span><span class="c"><!-- /input-group --></span>
|
||||
<span class="nt"></div></span><span class="c"><!-- /.col-lg-6 --></span>
|
||||
<span class="nt"></div></span><span class="c"><!-- /.row --></span></code></pre></div>
|
||||
@ -2022,12 +2022,12 @@
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
<input type="text" class="form-control">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
@ -2041,12 +2041,12 @@
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Go!<span class="nt"></button></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search for..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span><span class="c"><!-- /input-group --></span>
|
||||
<span class="nt"></div></span><span class="c"><!-- /.col-lg-6 --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search for..."</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Go!<span class="nt"></button></span>
|
||||
<span class="nt"></span></span>
|
||||
@ -2070,12 +2070,12 @@
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input type="text" class="form-control">
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
@ -2103,12 +2103,12 @@
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></div></span><span class="c"><!-- /btn-group --></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span><span class="c"><!-- /input-group --></span>
|
||||
<span class="nt"></div></span><span class="c"><!-- /.col-lg-6 --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>Action <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></button></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">></span>
|
||||
@ -2129,7 +2129,7 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-default">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
@ -2142,14 +2142,14 @@
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
|
||||
</div><!-- /.input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-default">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
@ -2170,11 +2170,11 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">></span>
|
||||
<span class="c"><!-- Button and dropdown menu --></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">></span>
|
||||
<span class="c"><!-- Button and dropdown menu --></span>
|
||||
<span class="nt"></div></span>
|
||||
@ -2388,7 +2388,7 @@
|
||||
</div>
|
||||
|
||||
<div class="bs-example" data-example-id="default-navbar">
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
@ -2442,7 +2442,7 @@
|
||||
</div><!-- /.container-fluid -->
|
||||
</nav>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
|
||||
<span class="c"><!-- Brand and toggle get grouped for better mobile display --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"navbar-header"</span><span class="nt">></span>
|
||||
@ -2500,17 +2500,17 @@
|
||||
<h2 id="navbar-brand-image">Brand image</h2>
|
||||
<p>Replace the navbar brand with your own image by swapping the text for an <code><img></code>. Since the <code>.navbar-brand</code> has its own padding and height, you may need to override some CSS depending on your image.</p>
|
||||
<div class="bs-example" data-example-id="navbar-with-image-brand">
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img alt="Brand" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYCAYAAAAYwiAhAAAMU0lEQVR4AeyZzU4TARSFhx08ienKiAsSSymliEjpdBBqoUX++gMJupZC/6B0prPUhIRI4qvIwoUhxAU8gBKiS0kkYQW5npsUAZloy4xYp3fxJSxYDMOXc07uKETkGJmI6clo5iLYmtfMbXAwP2IeA2oNqo6Q0W6N40ykegC205HqFlgEHiedcECq6j0ItQGZDptcABGqXiLVQ7CRVo3OfyLYU1+uDQ+iQaqdyy8cD0Szj9fp2cM1SvSVaNxfoFhPnvD7LmDFEaLdzQP/Xfz/iQeKNNm/SjODZUqFK7/IZuykVV2Ldi+33YpgMLsLibV7LlUqbNDUwBrLxA8sMlkI1bwsWwHpcgiJEiWHL2RLRYzdlKp3/TXBkE4dXIWQ6gzQXKhC8b6iCPWfy2TF2CXGA3maGSpTGpKBs3TE2EyG9Q5HBYNYHki1f55YLJbI5A6hxuqERZsbrtREM/aRaB5HBEMl+hZGzCPsLd5WIpQL0skOif4SIcW4No9SquGzJRjkUpFaJzzeJwJFkckV6WSfWG+e9xmLdoJGU28kGOTyslzJYZ1i/rwLZJJ0soX3KlG8t9mh9ZpkurchwXBsu7Ogmd+SIcjVk2+5dBKZ6gPPAcnKfMpAXeqeugRDarVjb+0huVgukcldVWdDqKwVNcmQZKq+hzRr/6NgGc3c5M2FWhShWjadsg0R9S3zJmPJNn8rGB9RkV6nzg96SafmlYnJ2ibmz7Fgp/gS0GUpGH/+gVwfcYqQIS7p1BCjNeLBIqUi+i5+brsmGNJL4yOqC9JJZLoVoayZDa1TUq1o1wRDen3AhV5kcuEQty9T/cR6c5RS9Z0rgiG9OvFtUYRq8apjRh1genCNsMXuXwimma+QXpJOUnWN82DpGjH/Cgv2+qdguHl9lXSSqrupUFbgAPuF3UI9GnenBlal6qyRdLohiWCBkuGKB/VYfTHuz0vVMZJOjoH3wYI9V7D437ZSOskQd16mJ9bQTKj8Rpl+VH4v6SRVZ1soCyYHSu+URLD0WWSSqrMrkxXxYOGTMhEofJeqk3SyK9MFL8/hc8WxEuvJSzpJ1dmWyYqx7izxR24Z4pJOtmWyYtS7RIpUXeNIOtWP0tpVJ0P8Rzt39ptlEcVx/HDHPwJeIUvRondcSG3LoneiFKIXKG3ZRMGyaGSRVcJarKxuiUQWNxCI7DS2mFAEb0ohCg0mGilqgiiBPJ4M9SX1TF4Z3jnvb9r3TPK9NdF+cuZ5Z57HeJi4x2Rk06n3b3V4ULKnu6PUz5wuXejs9X1/tiPbv/eka8WCHdnMSW/3iekkQcko9enUh5fDd+zQt1njyp3ZC2MX9XpMstkZpb7VldI6z5PuvU2fA0DFweSLUn8QL8V1/drvbjtNfTrJZJT6gzh24aFtXLkzvekUEAEwGbDwrZOf0RaippMmMPyZk62766fOXxwyLKbwKOkzJwnMkI1ZmBIm0VMjekapH2DKZcieZ2R4UBKT7NWM8KAMWOg63XweP50kJm+U+vWKf9lavmB7cph8UeqXv/5lq4uPMECgFIEpYzJgYWvHps8AmMIi4HQyYBEe+GM8iGtGqb+aYiv/mj5xZYTppBel/hZm/mXrkw8OgTHJxo14JRel/uJc7MWXyLGuV3h6rOJfczu62+7+2Pz6Db+Gc6V410htHQmBkhEeEwCY/vUKH4a+6R7C+deeKrCbf/6Fx+Sr/G6U+jviCsCKfsWyf+8JTWPJYPJFKWGSqQBDXK+4aaa1ls3fVjxQ5WERGhQAGOy+jp/RAMAUplNABMYEAHYCevl7sf0KBJg+Jn+U+udQCsCg1ysbVnysDgyFaWz5LBHhMcnwwHRPxDWA4UH5o9Q/h1IABr+v421SFxgIky9KDRQAmAImADA8KG+U+udQsdc+Boa+rzvfdgEMTGBSi1L/HEoBmAIm7ARDYRI9KiPkdMIBw97VxQTGV1EpgRIRHhMYGOCKJeb9ZGvzORwm0csiCsCkDAoADHBfN61mRRZzbW/8FA/K05juKAAU4HpFFxjgvo6viw5mMdfE6tfxmPJEKX6sqQ8Mc/k7qfqN2NujEiYuHJM3SvBjzR5pAQNc/joQMdfUmuWA6RQWJfixpj4wwH3dvj1x3wk7eug0AFN4hMYEAKYJSsRTJvq519XOn92zV0qgRI/MdFGRtrrEgOnf182but5tiRqvSM+rX58kJl+EnE4AYO6PzlcrBbd0/tZc+/Ycz8XXQA4BL21cyWEa7YkA0ykoWz1wpQ5KRBJUWt/X2XLPXA4XHlN4lBImmQE7erA1q6legAEVIQqCALheKeWptXTeFiQmADDA9UopLv6hoIdJtRkiQk4nmaikH+pbT53L5tav7w2gRNXdEWA6BZXZcge1vF0mj8kXIaeTAQtaPNG+y2qqFiQJSjT8bgTBFHAibktunW/xNINj8oMSUWIfa4ps+de2xr3JYfJFYFAKwAyZxlYX3nQXATApADNkiOkkQclIH5MB014N9Wsh00kUDgz/OZTG/1+ef/YX0GVvQa9CK/w7TaiajwflifCY8hd78Ss1RTkR5196bvviowX3y097fbnnGAqTqCqXBJba93UawCAn4oxNc8o5xHXPLYViEpUxsIQwicboAEOeiLtJo7WOHGxVBSURCVAiSgXUGJkeMOwVC2+fm93E0ZhiEyrnF206yUKB4T+HUnhWOZ7E9cq65R/pHFts3FO06SSbJiI0Jjww3PVKC/8AiL3OtbUXbTpJUDICgEoRGOREnB/KNbZJGCZflPq3dfrAoPd1buLEXkvmbo671QVU+Z8o/EFcFZRIHxj0vs49M8VeO9//yo9JH5SIGE7K39dpHEiCMDlQooa6NfH/HXcfg2DyRXhMMn1guMtfX7EXX10VDKoyUgQFhQEGwAQAhgHFTe0RATChgcFBVfVMAxgEk2gYAwNgwgNL7L5OFVgRMfmi1D+H0geGv6+LvToYmCqoYfcfpf5tnS4w/H0dHlj4dAqJEgMl0gEmoaCuV5bMfRcATAWT6EmOksEEAAa4/BUdOdiiA0x/OglMslBggPs6fWDY+7qua79lsRejLT4mUb2L0sFUPGASEea+7ovdRzONxf/ceFtdACZfhPlYEwssAJPaificujVq7+ovaWiCYAoABrv8FSnd0+lf/oJw8UKCElGKH2vqA8Nd/q5d9qEqrnNn2iGYREPvRkBMIGBH9UH5Yblfd9pr68bdOUwAUCIKwAS4XsEBqywwPt9yf+yWU2fFxNL8dG18RQMCk6iiO0oMlCj24mMB8VV2R4QSWA6zxKQPqiJPBMUkCrhGsSWm15RnFxdtOuWvLpcEBr38NWAFnH0BMAlQIgrCBLivs3V/2/74itfCQClg8kVpYBIFALM1p3Y1ZDoFA8ODMmDhxxK7FKZTvAiAKeiYwFaeS+0DLVEexDVzwOCXv3my5V8tJ8+GTidIBJlOAdmSa8uGXVhMAREeUwgwO+ta3NCEBxUQBWCCfFtn696W+AwfReDRhEV4UFPzZMA62n/kqfVOr8A0akitiAIwQb6vM1i9BlMAMBAmX6V2In/4wDfZS+MX9VZQIlKYTgGYDBhPKr5HPJLNrl2dEqZoUXGmkwFjSDlMfMyA3/50QIkIjwn/Wi+HPxHHY1KJkKDSxyQzTGFRn8SEuvw1UCKyrc4wKfY3MYY/bDoZKKV+JQbyQ9KgDFOv64khU1yjhtZeIj4HO24P4oVmmHxVDKs7Tvw+WJNtdQaqAEz5gDXR6PIZtfYgHppNJ2+De1ZZVv8ijXt81iDb6mQ2nYJBiUaXT3+IsiwjRnHVtrr82XQKrpNt0b/AVtl0EhmmwlqVA1Y1fNpgm0621cWM/zsOzgHrnmLN9iBu0ylSzd2u7gFjPNW21dl0ilS1AMZY+nGtNp0MU4G1cv0EsG5kZdxtm0621T1gt7ky50kAyyGrW2ugbDo9YGtzlvIA68+dMUw2nQI7w/X3A5PIBnBdhsmm0312nRsoLXmB5ZCVczcMlGH6n25w5dKQBOZDVsXdNEwuwyS7yVUJOwJYfmQjw7dLm04lUBc3MmclHJh4Jmsr1elkmERt3ABhJRyY+HW5hrtjD+Il2x1unfi1WAAwEf+ByrgWw1RytfQ4RI0KTCLrx1VzzbbV9fmauerc9Y86MIltELeau9xnppN1hVvNPRxgQQGYxDaQm8w1cl9zF7ku7lZy08m6xXVxF7nDXCM3WR6YFtY/g9j2sjS1K/4AAAAASUVORK5CYII=">
|
||||
<img alt="Brand" width="20" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAA81BMVEX///9VPnxWPXxWPXxWPXxWPXxWPXxWPXz///9hSYT6+vuFc6BXPn37+vz8+/z9/f2LeqWMe6aOfqiTg6uXiK5bQ4BZQX9iS4VdRYFdRYJfSINuWI5vWY9xXJF0YJR3Y5Z4ZZd5ZZd6Z5h9apq0qcW1qsW1q8a6sMqpnLyrn76tocCvpMGwpMJoUoprVYxeRoJjS4abjLGilLemmbrDutDFvdLPx9nX0eDa1OLb1uPd1+Td2OXe2eXh3Ofj3+nk4Orl4evp5u7u7PLv7fPx7/T08vb08/f19Pf29Pj39vn6+fuEcZ9YP35aQn/8/P1ZQH5fR4PINAOdAAAAB3RSTlMAIWWOw/P002ipnAAAAPhJREFUeF6NldWOhEAUBRvtRsfdfd3d3e3/v2ZPmGSWZNPDqScqqaSBSy4CGJbtSi2ubRkiwXRkBo6ZdJIApeEwoWMIS1JYwuZCW7hc6ApJkgrr+T/eW1V9uKXS5I5GXAjW2VAV9KFfSfgJpk+w4yXhwoqwl5AIGwp4RPgdK3XNHD2ETYiwe6nUa18f5jYSxle4vulw7/EtoCdzvqkPv3bn7M0eYbc7xFPXzqCrRCgH0Hsm/IjgTSb04W0i7EGjz+xw+wR6oZ1MnJ9TWrtToEx+4QfcZJ5X6tnhw+nhvqebdVhZUJX/oFcKvaTotUcvUnY188ue/n38AunzPPE8yg7bAAAAAElFTkSuQmCC">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"navbar-header"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
|
||||
@ -2525,7 +2525,7 @@
|
||||
<p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
|
||||
<p>As a heads up, <code>.navbar-form</code> shares much of its code with <code>.form-inline</code> via mixin. <strong class="text-danger">Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.</strong></p>
|
||||
<div class="bs-example" data-example-id="navbar-form">
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
|
||||
@ -2568,7 +2568,7 @@
|
||||
<h2 id="navbar-buttons">Buttons</h2>
|
||||
<p>Add the <code>.navbar-btn</code> class to <code><button></code> elements not residing in a <code><form></code> to vertically center them in the navbar.</p>
|
||||
<div class="bs-example" data-example-id="navbar-button">
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
|
||||
@ -2595,7 +2595,7 @@
|
||||
<h2 id="navbar-text">Text</h2>
|
||||
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p>
|
||||
<div class="bs-example" data-example-id="navbar-text">
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4">
|
||||
@ -2618,7 +2618,7 @@
|
||||
<h2 id="navbar-links">Non-nav links</h2>
|
||||
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
|
||||
<div class="bs-example" data-example-id="navbar-link">
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5">
|
||||
@ -2651,7 +2651,7 @@
|
||||
<h2 id="navbar-fixed-top">Fixed to top</h2>
|
||||
<p>Add <code>.navbar-fixed-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
|
||||
<div class="bs-example bs-navbar-top-example" data-example-id="navbar-fixed-to-top">
|
||||
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
@ -2674,7 +2674,7 @@
|
||||
</div>
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default navbar-fixed-top"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default navbar-fixed-top"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span>
|
||||
@ -2691,7 +2691,7 @@
|
||||
<h2 id="navbar-fixed-bottom">Fixed to bottom</h2>
|
||||
<p>Add <code>.navbar-fixed-bottom</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
|
||||
<div class="bs-example bs-navbar-bottom-example" data-example-id="navbar-fixed-to-bottom">
|
||||
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
|
||||
<nav class="navbar navbar-default navbar-fixed-bottom">
|
||||
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
@ -2714,7 +2714,7 @@
|
||||
</div>
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default navbar-fixed-bottom"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default navbar-fixed-bottom"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span>
|
||||
@ -2732,7 +2732,7 @@
|
||||
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
|
||||
<p>Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
|
||||
<div class="bs-example bs-navbar-top-example" data-example-id="navbar-static-top">
|
||||
<nav class="navbar navbar-default navbar-static-top" role="navigation">
|
||||
<nav class="navbar navbar-default navbar-static-top">
|
||||
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
@ -2756,7 +2756,7 @@
|
||||
</div>
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default navbar-static-top"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default navbar-static-top"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span>
|
||||
@ -2766,7 +2766,7 @@
|
||||
<h2 id="navbar-inverted">Inverted navbar</h2>
|
||||
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
|
||||
<div class="bs-example" data-example-id="inverted-navbar">
|
||||
<nav class="navbar navbar-inverse" role="navigation">
|
||||
<nav class="navbar navbar-inverse">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
@ -2790,7 +2790,7 @@
|
||||
</div><!-- /.container-fluid -->
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-inverse"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-inverse"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></nav></span></code></pre></div>
|
||||
</div>
|
||||
@ -2831,25 +2831,41 @@
|
||||
<div class="bs-example" data-example-id="simple-pagination">
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
|
||||
<li>
|
||||
<a href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
|
||||
<li>
|
||||
<a href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&laquo;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Previous<span class="nt"></span></a></li></span>
|
||||
<span class="nt"><li></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">aria-label=</span><span class="s">"Previous"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&laquo;</span><span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>1<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>2<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>3<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>4<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>5<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&raquo;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Next<span class="nt"></span></a></li></span>
|
||||
<span class="nt"><li></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">aria-label=</span><span class="s">"Next"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&raquo;</span><span class="nt"></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></div>
|
||||
|
||||
@ -2858,19 +2874,19 @@
|
||||
<div class="bs-example" data-example-id="disabled-active-pagination">
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
|
||||
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
|
||||
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
|
||||
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"disabled"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&laquo;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Previous<span class="nt"></span></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"disabled"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">aria-label=</span><span class="s">"Previous"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&laquo;</span><span class="nt"></span></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>1 <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></a></li></span>
|
||||
...
|
||||
<span class="nt"></ul></span>
|
||||
@ -2878,8 +2894,14 @@
|
||||
<p>You can optionally swap out active or disabled anchors for <code><span></code>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"disabled"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&laquo;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Previous<span class="nt"></span></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><span></span>1 <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></span></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"disabled"</span><span class="nt">></span>
|
||||
<span class="nt"><span></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&laquo;</span><span class="nt"></span></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">></span>
|
||||
<span class="nt"><span></span>1 <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></span></span>
|
||||
<span class="nt"></li></span>
|
||||
...
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></nav></span></code></pre></div>
|
||||
@ -2890,35 +2912,35 @@
|
||||
<div class="bs-example" data-example-id="pagination-sizing">
|
||||
<nav>
|
||||
<ul class="pagination pagination-lg">
|
||||
<li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
|
||||
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
|
||||
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
|
||||
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
|
||||
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul class="pagination pagination-sm">
|
||||
<li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
|
||||
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
|
||||
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -3230,12 +3252,12 @@
|
||||
</div>
|
||||
<div class="bs-example" data-example-id="dismissible-alert-css">
|
||||
<div class="alert alert-warning alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Close<span class="nt"></span></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></button></span>
|
||||
<span class="nt"><strong></span>Warning!<span class="nt"></strong></span> Better check yourself, you're not looking too good.
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
@ -3942,19 +3964,19 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
@ -3994,19 +4016,19 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
|
||||
287
css/index.html
287
css/index.html
@ -1153,19 +1153,19 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
@ -1196,19 +1196,19 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
@ -1235,25 +1235,21 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2">1</td>
|
||||
<th scope="row">1</th>
|
||||
<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>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -1278,20 +1274,21 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -1316,19 +1313,19 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
@ -1356,33 +1353,33 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="row">
|
||||
<code>.active</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Applies the hover color to a particular row or cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="row">
|
||||
<code>.success</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Indicates a successful or positive action</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="row">
|
||||
<code>.info</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Indicates a neutral informative change or action</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="row">
|
||||
<code>.warning</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Indicates a warning that might need attention</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="row">
|
||||
<code>.danger</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Indicates a dangerous or potentially negative action</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -1400,55 +1397,55 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="active">
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="success">
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<th scope="row">4</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="info">
|
||||
<td>5</td>
|
||||
<th scope="row">5</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<th scope="row">6</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="warning">
|
||||
<td>7</td>
|
||||
<th scope="row">7</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<th scope="row">8</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="danger">
|
||||
<td>9</td>
|
||||
<th scope="row">9</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
@ -1504,7 +1501,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@ -1513,7 +1510,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@ -1522,7 +1519,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@ -1549,7 +1546,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="row">1</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@ -1558,7 +1555,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="row">2</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@ -1567,7 +1564,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="row">3</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@ -1592,7 +1589,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<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>
|
||||
<div class="bs-example" data-example-id="basic-forms">
|
||||
<form role="form">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
|
||||
@ -1614,7 +1611,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</div><!-- /example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleInputEmail1"</span><span class="nt">></span>Email address<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail1"</span> <span class="na">placeholder=</span><span class="s">"Enter email"</span><span class="nt">></span>
|
||||
@ -1652,17 +1649,11 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<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. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
|
||||
</div>
|
||||
<div class="bs-example" data-example-id="simple-form-inline">
|
||||
<form class="form-inline" role="form">
|
||||
<form class="form-inline">
|
||||
<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">
|
||||
<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">
|
||||
@ -1675,13 +1666,10 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<button type="submit" class="btn btn-default">Sign in</button>
|
||||
</form>
|
||||
</div><!-- /example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"exampleInputEmail2"</span><span class="nt">></span>Email address<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></span>@<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail2"</span> <span class="na">placeholder=</span><span class="s">"Enter email"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"exampleInputEmail2"</span><span class="nt">></span>Email address<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail2"</span> <span class="na">placeholder=</span><span class="s">"Enter email"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"exampleInputPassword2"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||||
@ -1695,11 +1683,35 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Sign in<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></div>
|
||||
|
||||
<div class="bs-example" data-example-id="form-inline-with-input-group">
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">$</div>
|
||||
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
|
||||
<div class="input-group-addon">.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Transfer cash</button>
|
||||
</form>
|
||||
</div><!-- /example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">for=</span><span class="s">"exampleInputAmount"</span><span class="nt">></span>Amount (in dollars)<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></span>$<span class="nt"></div></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputAmount"</span> <span class="na">placeholder=</span><span class="s">"Amount"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-addon"</span><span class="nt">></span>.00<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Transfer cash<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></div>
|
||||
|
||||
<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>
|
||||
<div class="bs-example" data-example-id="simple-horizontal-form">
|
||||
<form class="form-horizontal" role="form">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
@ -1728,7 +1740,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</div>
|
||||
</form>
|
||||
</div><!-- /.bs-example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-horizontal"</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-horizontal"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputEmail3"</span> <span class="na">class=</span><span class="s">"col-sm-2 control-label"</span><span class="nt">></span>Email<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
|
||||
@ -1768,7 +1780,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
|
||||
</div>
|
||||
<div class="bs-example" data-example-id="text-form-control">
|
||||
<form role="form">
|
||||
<form>
|
||||
<input type="text" class="form-control" placeholder="Text input">
|
||||
</form>
|
||||
</div><!-- /.bs-example -->
|
||||
@ -1781,7 +1793,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<h3>Textarea</h3>
|
||||
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
|
||||
<div class="bs-example" data-example-id="textarea-form-control">
|
||||
<form role="form">
|
||||
<form>
|
||||
<textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
|
||||
</form>
|
||||
</div><!-- /.bs-example -->
|
||||
@ -1792,7 +1804,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code><label></code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code><fieldset></code>.</p>
|
||||
<h4>Default (stacked)</h4>
|
||||
<div class="bs-example" data-example-id="block-checkboxes-radios">
|
||||
<form role="form">
|
||||
<form>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="">
|
||||
@ -1861,7 +1873,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<h4>Inline checkboxes and radios</h4>
|
||||
<p>Use the <code>.checkbox-inline</code> or <code>.radio-inline</code> classes on a series of checkboxes or radios for controls that appear on the same line.</p>
|
||||
<div class="bs-example" data-example-id="inline-checkboxes-radios">
|
||||
<form role="form">
|
||||
<form>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
|
||||
</label>
|
||||
@ -1873,7 +1885,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</label>
|
||||
</form>
|
||||
<br>
|
||||
<form role="form">
|
||||
<form>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
|
||||
</label>
|
||||
@ -1908,7 +1920,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<h4>Checkboxes and radios without label text</h4>
|
||||
<p>Should you have no text within the <code><label></code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong> Remember to still provide some form of label for assistive technologies (for instance, using <code>aria-label</code>).</p>
|
||||
<div class="bs-example" data-example-id="checkboxes-radios-without-labels">
|
||||
<form role="form">
|
||||
<form>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="Checkbox without label text">
|
||||
@ -1935,7 +1947,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<h3>Selects</h3>
|
||||
<p>Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via <code>border-radius</code> properties.</p>
|
||||
<div class="bs-example" data-example-ids="select-form-control">
|
||||
<form role="form">
|
||||
<form>
|
||||
<select class="form-control">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
@ -1943,14 +1955,6 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<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 -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><select</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
@ -1959,9 +1963,23 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<span class="nt"><option></span>3<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>4<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>5<span class="nt"></option></span>
|
||||
<span class="nt"></select></span>
|
||||
<span class="nt"></select></span></code></pre></div>
|
||||
|
||||
<span class="nt"><select</span> <span class="na">multiple</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<p>For <code><select></code> controls with the <code>multiple</code> attribute, multiple options are shown by default.</p>
|
||||
|
||||
<div class="bs-example" data-example-ids="select-multiple-form-control">
|
||||
<form>
|
||||
<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 -->
|
||||
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><select</span> <span class="na">multiple</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||||
<span class="nt"><option></span>1<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>2<span class="nt"></option></span>
|
||||
<span class="nt"><option></span>3<span class="nt"></option></span>
|
||||
@ -1973,7 +1991,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<h2 id="forms-controls-static">Static control</h2>
|
||||
<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" data-example-id="horizontal-static-form-control">
|
||||
<form class="form-horizontal" role="form">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
@ -1988,7 +2006,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</div>
|
||||
</form>
|
||||
</div><!-- /.bs-example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-horizontal"</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-horizontal"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"col-sm-2 control-label"</span><span class="nt">></span>Email<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
|
||||
@ -2003,7 +2021,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></div>
|
||||
<div class="bs-example" data-example-id="inline-static-form-control">
|
||||
<form class="form-inline" role="form">
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<label class="sr-only">Email</label>
|
||||
<p class="form-control-static">email@example.com</p>
|
||||
@ -2015,7 +2033,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<button type="submit" class="btn btn-default">Confirm identity</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Email<span class="nt"></label></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"form-control-static"</span><span class="nt">></span>email@example.com<span class="nt"></p></span>
|
||||
@ -2030,7 +2048,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<h2 id="forms-control-focus">Focus state</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>
|
||||
<div class="bs-example">
|
||||
<form role="form">
|
||||
<form>
|
||||
<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
|
||||
</form>
|
||||
</div>
|
||||
@ -2043,7 +2061,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<h2 id="forms-control-disabled">Disabled state</h2>
|
||||
<p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p>
|
||||
<div class="bs-example" data-example-id="text-form-control-disabled">
|
||||
<form role="form">
|
||||
<form>
|
||||
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
|
||||
</form>
|
||||
</div><!-- /.bs-example -->
|
||||
@ -2063,7 +2081,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</div>
|
||||
|
||||
<div class="bs-example" data-example-id="disabled-fieldset">
|
||||
<form role="form">
|
||||
<form>
|
||||
<fieldset disabled>
|
||||
<div class="form-group">
|
||||
<label for="disabledTextInput">Disabled input</label>
|
||||
@ -2084,7 +2102,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!-- /.bs-example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form></span>
|
||||
<span class="nt"><fieldset</span> <span class="na">disabled</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"disabledTextInput"</span><span class="nt">></span>Disabled input<span class="nt"></label></span>
|
||||
@ -2109,7 +2127,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<h2 id="forms-control-readonly">Readonly state</h2>
|
||||
<p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p>
|
||||
<div class="bs-example" data-example-id="readonly-text-form-control">
|
||||
<form role="form">
|
||||
<form>
|
||||
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
|
||||
</form>
|
||||
</div><!-- /.bs-example -->
|
||||
@ -2126,7 +2144,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</div>
|
||||
|
||||
<div class="bs-example" data-example-id="form-validation-states">
|
||||
<form role="form">
|
||||
<form>
|
||||
<div class="form-group has-success">
|
||||
<label class="control-label" for="inputSuccess1">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess1">
|
||||
@ -2215,7 +2233,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<p>Although the following examples already mention the validation state of their respective form controls in the <code><label></code> text itself, the above technique (using <code>.sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
|
||||
</div>
|
||||
<div class="bs-example" data-example-id="form-validation-states-with-icons">
|
||||
<form role="form">
|
||||
<form>
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label" for="inputSuccess2">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
|
||||
@ -2257,7 +2275,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
|
||||
<h4>Optional icons in horizontal and inline forms</h4>
|
||||
<div class="bs-example" data-example-id="horizontal-form-validation-state-with-icon">
|
||||
<form class="form-horizontal" role="form">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
|
||||
<div class="col-sm-9">
|
||||
@ -2268,7 +2286,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-horizontal"</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-horizontal"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group has-success has-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"control-label col-sm-3"</span> <span class="na">for=</span><span class="s">"inputSuccess3"</span><span class="nt">></span>Input with success<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">></span>
|
||||
@ -2280,7 +2298,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<span class="nt"></form></span></code></pre></div>
|
||||
|
||||
<div class="bs-example" data-example-id="inline-form-validation-state-with-icon">
|
||||
<form class="form-inline" role="form">
|
||||
<form class="form-inline">
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label" for="inputSuccess4">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
|
||||
@ -2289,7 +2307,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group has-success has-feedback"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"control-label"</span> <span class="na">for=</span><span class="s">"inputSuccess4"</span><span class="nt">></span>Input with success<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputSuccess4"</span> <span class="na">aria-describedby=</span><span class="s">"inputSuccess4Status"</span><span class="nt">></span>
|
||||
@ -2322,7 +2340,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<h3>Height sizing</h3>
|
||||
<p>Create taller or shorter form controls that match button sizes.</p>
|
||||
<div class="bs-example bs-example-control-sizing" data-example-id="form-control-height-sizes">
|
||||
<form role="form">
|
||||
<form>
|
||||
<div class="controls">
|
||||
<input class="form-control input-lg" type="text" placeholder=".input-lg">
|
||||
<input type="text" class="form-control" placeholder="Default input">
|
||||
@ -2351,7 +2369,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<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" data-example-id="form-group-height-sizes">
|
||||
<form class="form-horizontal" role="form">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group form-group-lg">
|
||||
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
|
||||
<div class="col-sm-10">
|
||||
@ -2366,7 +2384,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
</div>
|
||||
</form>
|
||||
</div><!-- /.bs-example -->
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-horizontal"</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-horizontal"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group form-group-lg"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"col-sm-2 control-label"</span> <span class="na">for=</span><span class="s">"formGroupInputLarge"</span><span class="nt">></span>Large label<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10"</span><span class="nt">></span>
|
||||
@ -2385,7 +2403,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<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" data-example-id="form-control-column-sizing">
|
||||
<form role="form">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-xs-2">
|
||||
<input type="text" class="form-control" placeholder=".col-xs-2">
|
||||
@ -2418,7 +2436,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
|
||||
</div>
|
||||
<div class="bs-example" data-example-id="simple-help-text">
|
||||
<form role="form">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="inputHelpBlock">Input with help text</label>
|
||||
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
|
||||
@ -2435,6 +2453,35 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="buttons" class="page-header">Buttons</h1>
|
||||
|
||||
<h2 id="buttons-tags">Button tags</h2>
|
||||
<p>Use the button classes on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
|
||||
<form class="bs-example" data-example-id="btn-tags">
|
||||
<a class="btn btn-default" href="#" role="button">Link</a>
|
||||
<button class="btn btn-default" type="submit">Button</button>
|
||||
<input class="btn btn-default" type="button" value="Input">
|
||||
<input class="btn btn-default" type="submit" value="Submit">
|
||||
</form>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"Input"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">value=</span><span class="s">"Submit"</span><span class="nt">></span></code></pre></div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-buttons-context-usage">
|
||||
<h4>Context-specific usage</h4>
|
||||
<p>While button classes can be used on <code><a></code> and <code><button></code> elements, only <code><button></code> elements are supported within our nav and navbar components.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-buttons-anchor-accessibility">
|
||||
<h4>Links acting as buttons</h4>
|
||||
<p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-buttons-ff-height">
|
||||
<h4>Cross-browser rendering</h4>
|
||||
<p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
|
||||
<p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a bug in Firefox <30</a> that prevents us from setting the <code>line-height</code> of <code><input></code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="buttons-options">Options</h2>
|
||||
<p>Use any of the available button classes to quickly create a styled button.</p>
|
||||
<div class="bs-example" data-example-id="btn-variants">
|
||||
@ -2574,35 +2621,7 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<h4>Link functionality caveat</h4>
|
||||
<p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Context-specific usage</h4>
|
||||
<p>While button classes can be used on <code><a></code> and <code><button></code> elements, only <code><button></code> elements are supported within our nav and navbar components.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 id="buttons-tags">Button tags</h2>
|
||||
<p>Use the button classes on an <code><a></code>, <code><button></code>, or <code><input></code> element.</p>
|
||||
<form class="bs-example">
|
||||
<a class="btn btn-default" href="#" role="button">Link</a>
|
||||
<button class="btn btn-default" type="submit">Button</button>
|
||||
<input class="btn btn-default" type="button" value="Input">
|
||||
<input class="btn btn-default" type="submit" value="Submit">
|
||||
</form>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"Input"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">value=</span><span class="s">"Submit"</span><span class="nt">></span></code></pre></div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Links acting as buttons</h4>
|
||||
<p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Cross-browser rendering</h4>
|
||||
<p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
|
||||
<p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a bug in Firefox <30</a> that prevents us from setting the <code>line-height</code> of <code><input></code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bs-docs-section">
|
||||
@ -2686,9 +2705,9 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<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" data-example-id="close-icon">
|
||||
<p><button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button></p>
|
||||
<p><button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button></p>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Close<span class="nt"></span></button></span></code></pre></div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></button></span></code></pre></div>
|
||||
|
||||
|
||||
<h3 id="helper-classes-carets">Carets</h3>
|
||||
@ -3109,8 +3128,8 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<div class="color-swatch brand-danger"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@brand-primary</span><span class="nd">:</span> <span class="nn">#428bca</span><span class="p">;</span>
|
||||
<span class="k">@brand-success</span><span class="nd">:</span> <span class="nn">#5cb85c</span><span class="p">;</span>
|
||||
<div class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@brand-primary</span><span class="nd">:</span> <span class="nt">darken</span><span class="o">(</span><span class="nn">#428bca</span><span class="o">,</span> <span class="nt">6</span><span class="nc">.5</span><span class="nv">%</span><span class="o">)</span><span class="p">;</span> <span class="c1">// #337ab7
|
||||
</span><span class="k">@brand-success</span><span class="nd">:</span> <span class="nn">#5cb85c</span><span class="p">;</span>
|
||||
<span class="k">@brand-info</span><span class="nd">:</span> <span class="nn">#5bc0de</span><span class="p">;</span>
|
||||
<span class="k">@brand-warning</span><span class="nd">:</span> <span class="nn">#f0ad4e</span><span class="p">;</span>
|
||||
<span class="k">@brand-danger</span><span class="nd">:</span> <span class="nn">#d9534f</span><span class="p">;</span></code></pre></div>
|
||||
@ -3657,11 +3676,11 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<li>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#buttons-tags">Button tags</a></li>
|
||||
<li><a href="#buttons-options">Options</a></li>
|
||||
<li><a href="#buttons-sizes">Sizes</a></li>
|
||||
<li><a href="#buttons-active">Active state</a></li>
|
||||
<li><a href="#buttons-disabled">Disabled state</a></li>
|
||||
<li><a href="#buttons-tags">Button tags</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
@ -202,7 +202,10 @@
|
||||
<p>There are some caveats regarding using modals on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
|
||||
</div>
|
||||
|
||||
<p><strong class="text-danger">Due to how HTML5 defines its semantics, the <code>autofocus</code> HTML attribute has no effect in Bootstrap modals.</strong></p>
|
||||
<p><strong class="text-danger">Due to how HTML5 defines its semantics, the <code>autofocus</code> HTML attribute has no effect in Bootstrap modals.</strong> To achieve the same effect, use some custom JavaScript:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'shown.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myInput'</span><span class="p">).</span><span class="nx">focus</span><span class="p">()</span>
|
||||
<span class="p">})</span></code></pre></div>
|
||||
|
||||
<h2 id="modals-examples">Examples</h2>
|
||||
|
||||
@ -213,7 +216,7 @@
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -231,7 +234,7 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Close<span class="nt"></span></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></button></span>
|
||||
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"modal-title"</span><span class="nt">></span>Modal title<span class="nt"></h4></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span>
|
||||
@ -253,7 +256,7 @@
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -303,7 +306,7 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Close<span class="nt"></span></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></button></span>
|
||||
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"myModalLabel"</span><span class="nt">></span>Modal title<span class="nt"></h4></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span>
|
||||
@ -362,7 +365,7 @@
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -376,7 +379,7 @@
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -404,11 +407,11 @@
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form role="form">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="recipient-name" class="control-label">Recipient:</label>
|
||||
<input type="text" class="form-control" id="recipient-name">
|
||||
@ -436,11 +439,11 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Close<span class="nt"></span></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></button></span>
|
||||
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"exampleModalLabel"</span><span class="nt">></span>New message<span class="nt"></h4></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span>
|
||||
<span class="nt"><form</span> <span class="na">role=</span><span class="s">"form"</span><span class="nt">></span>
|
||||
<span class="nt"><form></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"recipient-name"</span> <span class="na">class=</span><span class="s">"control-label"</span><span class="nt">></span>Recipient:<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"recipient-name"</span><span class="nt">></span>
|
||||
@ -591,7 +594,7 @@
|
||||
|
||||
<h3>Within a navbar</h3>
|
||||
<div class="bs-example">
|
||||
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
|
||||
<nav id="navbar-example" class="navbar navbar-default navbar-static">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
|
||||
@ -706,7 +709,7 @@
|
||||
<h3>Via data attributes</h3>
|
||||
<p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">id=</span><span class="s">"dLabel"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">id=</span><span class="s">"dLabel"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropdown trigger
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
|
||||
<span class="nt"></button></span>
|
||||
@ -783,7 +786,7 @@
|
||||
<h2 id="scrollspy-examples">Example in navbar</h2>
|
||||
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
|
||||
<div class="bs-example" data-example-id="embedded-scrollspy">
|
||||
<nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
|
||||
<nav id="navbar-example2" class="navbar navbar-default navbar-static">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
|
||||
@ -1631,12 +1634,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<p>When using a <code>.close</code> button, it must be the first child of the <code>.alert-dismissible</code> and no text content may come before it in the markup.</p>
|
||||
<div class="bs-example bs-example-standalone" data-example-id="dismissible-alert-js">
|
||||
<div class="alert alert-warning alert-dismissible fade in" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger alert-dismissible fade in" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4>Oh snap! You got an error!</h4>
|
||||
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
<p>
|
||||
@ -1651,9 +1654,8 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
|
||||
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.</p>
|
||||
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Close<span class="nt"></span></span>
|
||||
<span class="nt"></button></span></code></pre></div>
|
||||
|
||||
<p>To have your alerts use animation when closing, make sure they have the <code>.fade</code> and <code>.in</code> classes already applied to them.</p>
|
||||
@ -1826,8 +1828,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="collapse" class="page-header">Collapse <small>collapse.js</small></h1>
|
||||
|
||||
<h3>About</h3>
|
||||
<p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
|
||||
<p class="lead">Flexible plugin that utilizes a handful of classes for easy toggle behavior.</p>
|
||||
|
||||
<div class="bs-callout bs-callout-danger" id="callout-collapse-dependency">
|
||||
<h4>Plugin dependency</h4>
|
||||
@ -1844,6 +1845,36 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<p>You can use a link with the <code>href</code> attribute, or a button with the <code>data-target</code> attribute. In both cases, the <code>data-toggle="collapse"</code> is required.</p>
|
||||
|
||||
<div class="bs-example">
|
||||
<p>
|
||||
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-target
|
||||
</button>
|
||||
</p>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="well">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">></span>
|
||||
Link with href
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">></span>
|
||||
Button with data-target
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">id=</span><span class="s">"collapseExample"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"well"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<h2 id="collapse-example-accordion">Accordion example</h2>
|
||||
<p>Extend the default collapse behavior to create an accordion with the panel component.</p>
|
||||
|
||||
<div class="bs-example" data-example-id="collapse-accordion">
|
||||
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingOne">
|
||||
@ -1956,13 +1987,6 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#demo"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"demo"</span><span class="nt">></span>
|
||||
simple collapsible
|
||||
<span class="nt"></button></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"demo"</span> <span class="na">class=</span><span class="s">"collapse in"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-collapse-accessibility">
|
||||
<h4>Make expand/collapse controls accessible</h4>
|
||||
<p>Be sure to add <code>aria-expanded</code> to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of <code>aria-expanded="false"</code>. If you've set the collapsible element to be open by default using the <code>in</code> class, set <code>aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.</p>
|
||||
@ -2454,6 +2478,9 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<li><a href="#modals-remove-animation">Remove animation</a></li>
|
||||
<li><a href="#modals-related-target">Varying content based on trigger button</a></li>
|
||||
<li><a href="#modals-usage">Usage</a></li>
|
||||
<li><a href="#modals-options">Options</a></li>
|
||||
<li><a href="#modals-methods">Methods</a></li>
|
||||
<li><a href="#modals-events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -2461,6 +2488,8 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<ul class="nav">
|
||||
<li><a href="#dropdowns-examples">Examples</a></li>
|
||||
<li><a href="#dropdowns-usage">Usage</a></li>
|
||||
<li><a href="#dropdowns-methods">Methods</a></li>
|
||||
<li><a href="#dropdowns-events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -2468,6 +2497,9 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<ul class="nav">
|
||||
<li><a href="#scrollspy-examples">Examples</a></li>
|
||||
<li><a href="#scrollspy-usage">Usage</a></li>
|
||||
<li><a href="#scrollspy-methods">Methods</a></li>
|
||||
<li><a href="#scrollspy-options">Options</a></li>
|
||||
<li><a href="#scrollspy-events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -2475,6 +2507,8 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<ul class="nav">
|
||||
<li><a href="#tabs-examples">Examples</a></li>
|
||||
<li><a href="#tabs-usage">Usage</a></li>
|
||||
<li><a href="#tabs-methods">Methods</a></li>
|
||||
<li><a href="#tabs-events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -2482,6 +2516,9 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<ul class="nav">
|
||||
<li><a href="#tooltips-examples">Examples</a></li>
|
||||
<li><a href="#tooltips-usage">Usage</a></li>
|
||||
<li><a href="#tooltips-options">Options</a></li>
|
||||
<li><a href="#tooltips-methods">Methods</a></li>
|
||||
<li><a href="#tooltips-events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -2489,6 +2526,8 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<ul class="nav">
|
||||
<li><a href="#popovers-examples">Examples</a></li>
|
||||
<li><a href="#popovers-usage">Usage</a></li>
|
||||
<li><a href="#popovers-options">Options</a></li>
|
||||
<li><a href="#popovers-events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -2496,6 +2535,8 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<ul class="nav">
|
||||
<li><a href="#alerts-examples">Examples</a></li>
|
||||
<li><a href="#alerts-usage">Usage</a></li>
|
||||
<li><a href="#alerts-methods">Methods</a></li>
|
||||
<li><a href="#alerts-events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -2510,8 +2551,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<li>
|
||||
<a href="#collapse">Collapse</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#collapse-examples">Examples</a></li>
|
||||
<li><a href="#collapse-example">Example</a></li>
|
||||
<li><a href="#collapse-example-accordion">Accordion example</a></li>
|
||||
<li><a href="#collapse-usage">Usage</a></li>
|
||||
<li><a href="#collapse-options">Options</a></li>
|
||||
<li><a href="#collapse-methods">Methods</a></li>
|
||||
<li><a href="#collapse-events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -2519,6 +2564,9 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<ul class="nav">
|
||||
<li><a href="#carousel-examples">Examples</a></li>
|
||||
<li><a href="#carousel-usage">Usage</a></li>
|
||||
<li><a href="#carousel-options">Options</a></li>
|
||||
<li><a href="#carousel-methods">Methods</a></li>
|
||||
<li><a href="#carousel-events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -2526,6 +2574,8 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<ul class="nav">
|
||||
<li><a href="#affix-examples">Examples</a></li>
|
||||
<li><a href="#affix-usage">Usage</a></li>
|
||||
<li><a href="#affix-options">Options</a></li>
|
||||
<li><a href="#affix-events">Events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user