diff options
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 344 |
1 files changed, 179 insertions, 165 deletions
diff --git a/docs/components.html b/docs/components.html index 61b2d8188..b864d594d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1271,108 +1271,112 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns, <div class="bs-example"> <nav class="navbar navbar-default" role="navigation"> - <!-- Brand and toggle get grouped for better mobile display --> - <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="#">Brand</a> - </div> + <div class="container-fluid"> + <!-- Brand and toggle get grouped for better mobile display --> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Brand</a> + </div> - <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> - <ul class="nav navbar-nav"> - <li class="active"><a href="#">Link</a></li> - <li><a href="#">Link</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - <li class="divider"></li> - <li><a href="#">One more separated link</a></li> - </ul> - </li> - </ul> - <form class="navbar-form navbar-left" role="search"> - <div class="form-group"> - <input type="text" class="form-control" placeholder="Search"> - </div> - <button type="submit" class="btn btn-default">Submit</button> - </form> - <ul class="nav navbar-nav navbar-right"> - <li><a href="#">Link</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> - <ul class="dropdown-menu" role="menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </li> - </ul> - </div><!-- /.navbar-collapse --> + <!-- Collect the nav links, forms, and other content for toggling --> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> + <ul class="nav navbar-nav"> + <li class="active"><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu" role="menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + <li class="divider"></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + <form class="navbar-form navbar-left" role="search"> + <div class="form-group"> + <input type="text" class="form-control" placeholder="Search"> + </div> + <button type="submit" class="btn btn-default">Submit</button> + </form> + <ul class="nav navbar-nav navbar-right"> + <li><a href="#">Link</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu" role="menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> + </ul> + </div><!-- /.navbar-collapse --> + </div><!-- /.container-fluid --> </nav> </div> {% highlight html %} <nav class="navbar navbar-default" role="navigation"> - <!-- Brand and toggle get grouped for better mobile display --> - <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="#">Brand</a> - </div> + <div class="container-fluid"> + <!-- Brand and toggle get grouped for better mobile display --> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Brand</a> + </div> - <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> - <ul class="nav navbar-nav"> - <li class="active"><a href="#">Link</a></li> - <li><a href="#">Link</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - <li class="divider"></li> - <li><a href="#">One more separated link</a></li> - </ul> - </li> - </ul> - <form class="navbar-form navbar-left" role="search"> - <div class="form-group"> - <input type="text" class="form-control" placeholder="Search"> - </div> - <button type="submit" class="btn btn-default">Submit</button> - </form> - <ul class="nav navbar-nav navbar-right"> - <li><a href="#">Link</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </li> - </ul> - </div><!-- /.navbar-collapse --> + <!-- Collect the nav links, forms, and other content for toggling --> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> + <ul class="nav navbar-nav"> + <li class="active"><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + <li class="divider"></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + <form class="navbar-form navbar-left" role="search"> + <div class="form-group"> + <input type="text" class="form-control" placeholder="Search"> + </div> + <button type="submit" class="btn btn-default">Submit</button> + </form> + <ul class="nav navbar-nav navbar-right"> + <li><a href="#">Link</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> + </ul> + </div><!-- /.navbar-collapse --> + </div><!-- /.container-fluid --> </nav> {% endhighlight %} @@ -1392,22 +1396,24 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns, <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"> <nav class="navbar navbar-default" role="navigation"> - <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="#">Brand</a> - </div> - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> - <form class="navbar-form navbar-left" role="search"> - <div class="form-group"> - <input type="text" class="form-control" placeholder="Search"> - </div> - <button type="submit" class="btn btn-default">Submit</button> - </form> + <div class="container-fluid"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Brand</a> + </div> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> + <form class="navbar-form navbar-left" role="search"> + <div class="form-group"> + <input type="text" class="form-control" placeholder="Search"> + </div> + <button type="submit" class="btn btn-default">Submit</button> + </form> + </div> </div> </nav> </div> @@ -1422,7 +1428,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns, <div class="bs-callout bs-callout-warning"> <h4>Mobile device caveats</h4> - <p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="{{ site.baseurl }}getting-started#support-fixed-position-keyboards">See our browser support docs</a> for details.</p> + <p>There are some caveats regarding using form controls within fixed elements on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p> </div> <div class="bs-callout bs-callout-danger"> @@ -1435,17 +1441,19 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns, <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"> <nav class="navbar navbar-default" role="navigation"> - <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="#">Brand</a> - </div> - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3"> - <button type="button" class="btn btn-default navbar-btn">Sign in</button> + <div class="container-fluid"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Brand</a> + </div> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3"> + <button type="button" class="btn btn-default navbar-btn">Sign in</button> + </div> </div> </nav> </div> @@ -1455,24 +1463,26 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns, <div class="bs-callout bs-callout-warning"> <h4>Context-specific usage</h4> - <p>Like the standard <a href="{{ site.baseurl }}css#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code><a></code> and <code><input></code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code><a></code> elements within <code>.navbar-nav</code>.</p> + <p>Like the standard <a href="../css/#buttons">button classes</a>, <code>.navbar-btn</code> can be used on <code><a></code> and <code><input></code> elements. However, neither <code>.navbar-btn</code> nor the standard button classes should be used on <code><a></code> elements within <code>.navbar-nav</code>.</p> </div> <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"> <nav class="navbar navbar-default" role="navigation"> - <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="#">Brand</a> - </div> - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4"> - <p class="navbar-text">Signed in as Mark Otto</p> + <div class="container-fluid"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Brand</a> + </div> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-4"> + <p class="navbar-text">Signed in as Mark Otto</p> + </div> </div> </nav> </div> @@ -1485,17 +1495,19 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns, <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"> <nav class="navbar navbar-default" role="navigation"> - <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="#">Brand</a> - </div> - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5"> - <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> + <div class="container-fluid"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-5"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Brand</a> + </div> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5"> + <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> + </div> </div> </nav> </div> @@ -1638,25 +1650,27 @@ body { padding-bottom: 70px; } <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p> <div class="bs-example"> <nav class="navbar navbar-inverse" role="navigation"> - <!-- Brand and toggle get grouped for better mobile display --> - <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="#">Brand</a> - </div> + <div class="container-fluid"> + <!-- Brand and toggle get grouped for better mobile display --> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Brand</a> + </div> - <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9"> - <ul class="nav navbar-nav"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Link</a></li> - <li><a href="#">Link</a></li> - </ul> - </div><!-- /.navbar-collapse --> + <!-- Collect the nav links, forms, and other content for toggling --> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9"> + <ul class="nav navbar-nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Link</a></li> + <li><a href="#">Link</a></li> + </ul> + </div><!-- /.navbar-collapse --> + </div><!-- /.container-fluid --> </nav> </div><!-- /example --> {% highlight html %} |