diff options
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 179 |
1 files changed, 124 insertions, 55 deletions
diff --git a/docs/components.html b/docs/components.html index 0c81aefa5..2c07efbf6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -57,13 +57,6 @@ <li class=""> <a href="./javascript.html">Javascript</a> </li> - <li class="divider-vertical"></li> - <li class=""> - <a href="./download.html">Customize</a> - </li> - <li class=""> - <a href="./examples.html">Examples</a> - </li> <li class=""> <a href="./extend.html">Extend</a> </li> @@ -1254,6 +1247,63 @@ <strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>. </div> + + <hr class="bs-docs-separator"> + + + <h2>Responsive navbar</h2> + <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p> + <div class="bs-docs-example"> + <div class="navbar navbar-subnav" style="position: static;"> + <div class="navbar-inner"> + <div class="container"> + <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </a> + <a class="brand" href="#">Title</a> + <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 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 class="nav-header">Nav header</li> + <li><a href="#">Separated link</a></li> + <li><a href="#">One more 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="divider-vertical"></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 --> + </div> + </section> @@ -1679,53 +1729,67 @@ <h2>Default thumbnails</h2> <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> - <ul class="thumbnails"> - <li class="span3"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/260x180" alt=""> - </a> - </li> - <li class="span3"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/260x180" alt=""> - </a> - </li> - <li class="span3"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/260x180" alt=""> - </a> - </li> - <li class="span3"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/260x180" alt=""> - </a> - </li> - </ul> + <div class="row-fluid"> + <ul class="thumbnails"> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/260x180" alt=""> + </a> + </li> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/260x180" alt=""> + </a> + </li> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/260x180" alt=""> + </a> + </li> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/260x180" alt=""> + </a> + </li> + </ul> + </div> <h2>Highly customizable</h2> <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p> - <ul class="thumbnails"> - <li class="span3"> - <div class="thumbnail"> - <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> - <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p> + <div class="row-fluid"> + <ul class="thumbnails"> + <li class="span4"> + <div class="thumbnail"> + <img src="http://placehold.it/300x200" alt=""> + <div class="caption"> + <h3>Thumbnail label</h3> + <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> + <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p> + </div> </div> - </div> - </li> - <li class="span3"> - <div class="thumbnail"> - <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> - <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p> + </li> + <li class="span4"> + <div class="thumbnail"> + <img src="http://placehold.it/300x200" alt=""> + <div class="caption"> + <h3>Thumbnail label</h3> + <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> + <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p> + </div> </div> - </div> - </li> - </ul> + </li> + <li class="span4"> + <div class="thumbnail"> + <img src="http://placehold.it/300x200" alt=""> + <div class="caption"> + <h3>Thumbnail label</h3> + <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> + <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p> + </div> + </div> + </li> + </ul> + </div> <h3>Why use thumbnails</h3> <p>Thumbnails (previously <code>.media-grid</code> up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.</p> @@ -1740,9 +1804,9 @@ <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p> <pre class="prettyprint linenums"> <ul class="thumbnails"> - <li class="span3"> + <li class="span4"> <a href="#" class="thumbnail"> - <img src="http://placehold.it/260x180" alt=""> + <img src="http://placehold.it/300x200" alt=""> </a> </li> ... @@ -1751,11 +1815,11 @@ <p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code><a></code> for a <code><div></code> like so:</p> <pre class="prettyprint linenums"> <ul class="thumbnails"> - <li class="span3"> + <li class="span4"> <div class="thumbnail"> - <img src="http://placehold.it/260x180" alt=""> - <h5>Thumbnail label</h5> - <p>Thumbnail caption right here...</p> + <img src="http://placehold.it/300x200" alt=""> + <h3>Thumbnail label</h3> + <p>Thumbnail caption...</p> </div> </li> ... @@ -1795,6 +1859,11 @@ <img src="http://placehold.it/160x120" alt=""> </a> </li> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/160x120" alt=""> + </a> + </li> </ul> </section> |