diff options
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 189 |
1 files changed, 111 insertions, 78 deletions
diff --git a/docs/components.html b/docs/components.html index a2fac7360..63a4b3dd0 100644 --- a/docs/components.html +++ b/docs/components.html @@ -467,7 +467,7 @@ <div class="well" style="padding: 8px 0;"> <ul class="nav list"> <li class="nav-header">List header</li> - <li class="active"><a href="#"><i class="icon home"></i> Home</a></li> + <li class="active"><a href="#"><i class="icon white home"></i> Home</a></li> <li><a href="#"><i class="icon book"></i> Library</a></li> <li><a href="#"><i class="icon pencil"></i> Applications</a></li> <li class="nav-header">Another list header</li> @@ -659,43 +659,50 @@ </div> <h2>Static navbar example</h2> <p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p> - <div class="navbar navbar-static"> + <div class="navbar"> <div class="navbar-inner"> <div class="container" style="width: auto;"> + <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <span class="i-bar"></span> + <span class="i-bar"></span> + <span class="i-bar"></span> + </a> <a class="brand" href="#">Project name</a> - <ul class="nav"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Link</a></li> - <li><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> - </ul> - </li> - </ul> - <form class="navbar-search pull-left" action=""> - <input type="text" class="search-query span2" placeholder="Search"> - </form> - <ul class="nav pull-right"> - <li><a href="#">Link</a></li> - <li class="vertical-divider"></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 class="nav-collapse"> + <ul class="nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Link</a></li> + <li><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> + </ul> + </li> + </ul> + <form class="navbar-search pull-left" action=""> + <input type="text" class="search-query span2" placeholder="Search"> + </form> + <ul class="nav pull-right"> + <li><a href="#">Link</a></li> + <li class="vertical-divider"></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><!-- /.nav-collapse --> </div> </div><!-- /navbar-inner --> </div><!-- /navbar --> @@ -705,7 +712,7 @@ <h3>Navbar scaffolding</h3> <p>The navbar requires only a few divs to structure it well for static or fixed display.</p> <pre class="prettyprint linenums"> -<div class="navbar navbar-static"> +<div class="navbar"> <div class="navbar-inner"> <div class="container"> ... @@ -713,7 +720,7 @@ </div> </div> </pre> - <p>To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed-top</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> + <p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> <pre class="prettyprint linenums"> <div class="navbar navbar-fixed-top"> ... @@ -733,7 +740,37 @@ <input type="text" class="search-query pull-left" placeholder="Search"> </form> </pre> - </div> + <h3>Optional responsive variation</h3> + <p>Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p> +<pre class="prettyprint linenums"> +<div class="navbar"> + <div class="navbar-inner"> + <div class="container"> + + <!-- .btn-navbar is used as the toggle for collapsed navbar content --> + <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <span class="i-bar"></span> + <span class="i-bar"></span> + <span class="i-bar"></span> + </a> + + <!-- Be sure to leave the brand out there if you want it shown --> + <a class="brand" href="#">Project name</a> + + <!-- Everything you want hidden at 940px or less, place within here --> + <div class="nav-collapse"> + <!-- .nav, .navbar-search, .navbar-form, etc --> + </div> + + </div> + </div> +</div> +</pre> + <div class="alert alert-info"> + <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a>. + </div> + + </div><!-- /.span --> <div class="span4"> <h3>Nav links</h3> <p>Nav items are simple to add via unordered lists.</p> @@ -763,9 +800,9 @@ </li> </ul> </pre> - <p><a class="btn" href="./javascript.html/#dropdown">Get the javascript →</a></p> - </div> - </div> + <p><a class="btn" href="./javascript.html/#dropdown">Get the javascript →</a></p> + </div><!-- /.span --> + </div><!-- /.row --> </section> @@ -970,34 +1007,34 @@ </tr> <tr> <td> - <span class="label success">New</span> + <span class="label label-success">New</span> </td> <td> - <code><span class="label success">New</span></code> + <code><span class="label label-success">New</span></code> </td> </tr> <tr> <td> - <span class="label warning">Warning</span> + <span class="label label-warning">Warning</span> </td> <td> - <code><span class="label warning">Warning</span></code> + <code><span class="label label-warning">Warning</span></code> </td> </tr> <tr> <td> - <span class="label important">Important</span> + <span class="label label-important">Important</span> </td> <td> - <code><span class="label important">Important</span></code> + <code><span class="label label-important">Important</span></code> </td> </tr> <tr> <td> - <span class="label info">Info</span> + <span class="label label-info">Info</span> </td> <td> - <code><span class="label info">Info</span></code> + <code><span class="label label-info">Info</span></code> </td> </tr> </tbody> @@ -1020,22 +1057,22 @@ <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> + <img src="http://placehold.it/260x180" alt=""> </a> </li> <li class="span3"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> + <img src="http://placehold.it/260x180" alt=""> </a> </li> <li class="span3"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> + <img src="http://placehold.it/260x180" alt=""> </a> </li> <li class="span3"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> + <img src="http://placehold.it/260x180" alt=""> </a> </li> </ul> @@ -1046,7 +1083,7 @@ <ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> + <img src="http://placehold.it/260x180" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> @@ -1056,7 +1093,7 @@ </li> <li class="span3"> <div class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> + <img src="http://placehold.it/260x180" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> @@ -1091,7 +1128,7 @@ <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> + <img src="http://placehold.it/260x180" alt=""> </a> </li> ... @@ -1102,7 +1139,7 @@ <ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> + <img src="http://placehold.it/260x180" alt=""> <h5>Thumbnail label</h5> <p>Thumbnail caption right here...</p> </div> @@ -1117,32 +1154,32 @@ <ul class="thumbnails"> <li class="span4"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/290x226" alt=""> + <img src="http://placehold.it/360x268" alt=""> </a> </li> <li class="span2"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> + <img src="http://placehold.it/160x120" alt=""> </a> </li> <li class="span2"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> + <img src="http://placehold.it/160x120" alt=""> </a> </li> <li class="span2"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> + <img src="http://placehold.it/160x120" alt=""> </a> </li> <li class="span2"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> + <img src="http://placehold.it/160x120" alt=""> </a> </li> <li class="span2"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> + <img src="http://placehold.it/160x120" alt=""> </a> </li> </ul> @@ -1270,12 +1307,12 @@ <div class="span4"> <h3>Striped</h3> <p>Uses a gradient to create a striped effect.</p> - <div class="progress info striped"> + <div class="progress progress-info progress-striped"> <div class="bar" style="width: 20%;"></div> </div> <pre class="prettyprint linenums"> -<div class="progress info - striped"> +<div class="progress progress-info + progress-striped"> <div class="bar" style="width: 20%;"></div> </div> @@ -1284,12 +1321,12 @@ <div class="span4"> <h3>Animated</h3> <p>Takes the striped example and animates it.</p> - <div class="progress danger active striped"> + <div class="progress progress-danger progress-striped active"> <div class="bar" style="width: 45%"></div> </div> <pre class="prettyprint linenums"> -<div class="progress danger - striped active"> +<div class="progress progress-danger + progress-striped active"> <div class="bar" style="width: 40%;"></div> </div> @@ -1301,18 +1338,18 @@ <div class="row"> <div class="span4"> <h3>Additional colors</h3> - <p>Progress bars utilize some of the same classes as buttons and alert messages for quick styling.</p> + <p>Progress bars utilize some of the same class names as buttons and alerts for similar styling.</p> <ul> - <li><code>.info</code></li> - <li><code>.success</code></li> - <li><code>.danger</code></li> + <li><code>.progress-info</code></li> + <li><code>.progress-success</code></li> + <li><code>.progress-danger</code></li> </ul> <p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p> </div> <div class="span4"> <h3>Behavior</h3> <p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p> - <p>If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.</p> + <p>If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.</p> </div> <div class="span4"> <h3>Browser support</h3> @@ -1361,10 +1398,6 @@ </section> - - - - <!-- Footer ================================================== --> <footer class="footer"> |