diff options
| author | Mark Otto <[email protected]> | 2012-01-07 20:40:28 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-01-07 20:40:28 -0800 |
| commit | 2948d1c3b247a5aff1fd1f15cf72540e3f492f57 (patch) | |
| tree | 0dd98ad6af62b23065313eaa206c374c1536695d /docs/components.html | |
| parent | 1438b14f74fc30c3b9bd63bd54d3bcfe5ce33c3c (diff) | |
| download | bootstrap-2948d1c3b247a5aff1fd1f15cf72540e3f492f57.tar.xz bootstrap-2948d1c3b247a5aff1fd1f15cf72540e3f492f57.zip | |
overhaul the entire tabs component structure and docs; remove side nav and make it a nav list to build on new .nav base class
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 825 |
1 files changed, 432 insertions, 393 deletions
diff --git a/docs/components.html b/docs/components.html index ce16c8092..eb9932473 100644 --- a/docs/components.html +++ b/docs/components.html @@ -54,237 +54,316 @@ </header> -<!-- Media + +<!-- Nav, Tabs, & Pills ================================================== --> -<section id="media"> +<section id="tabsAndPills"> <div class="page-header"> - <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1> + <h1>Nav, tabs, and pills <small>Highly customizable list-style navigation</small></h1> </div> + <h2>Lightweight defaults <small>Same markup, different classes</small></h2> <div class="row"> - <div class="span6"> - <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/210x150" alt=""> - </a> - </li> - <li class="span3"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> - </a> - </li> - <li class="span3"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> - </a> - </li> - <li class="span3"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> - </a> - </li> + <div class="span4"> + <h3>Powerful base class</h3> + <p>All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p> + <h3>Why tabs and pills</h3> + <p>Tabs and pills in Bootstrap are built on a <code><ul></code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.</p> + <p>Both options are great for sub-sections of content or navigating between pages of related content.</p> + </div> + <div class="span4"> + <h3>Basic tabs</h3> + <p>Take a regular <code><ul></code> of links and add <code>.tabs</code>:</p> + <ul class="nav tabs"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> </ul> +<pre class="prettyprint linenums"> +<ul class="nav tabs"> + <li class="active"> + <a href="#">Home</a> + </li> + <li><a href="#">...</a></li> + <li><a href="#">...</a></li> +</ul> +</pre> </div> - <div class="span6"> - <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/210x150" 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 primary">Action</a> <a href="#" class="btn">Action</a></p> - </div> - </div> - </li> - <li class="span3"> - <div class="thumbnail"> - <img src="http://placehold.it/210x150" 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 primary">Action</a> <a href="#" class="btn">Action</a></p> - </div> - </div> - </li> + <div class="span4"> + <h3>Basic pills</h3> + <p>Take that same HTML, but use <code>.pills</code> instead:</p> + <ul class="nav pills"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> </ul> +<pre class="prettyprint linenums"> +<ul class="nav pills"> + <li class="active"> + <a href="#">Home</a> + </li> + <li><a href="#">...</a></li> + <li><a href="#">...</a></li> +</ul> +</pre> </div> </div> + <h2>Stackable <small>Make tabs or pills vertical</small></h2> <div class="row"> <div class="span4"> - <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> + <h3>How to stack 'em</h3> + <p>As tabs and pills are horizontal by default, just add a second class, <code>.stacked</code>, to make them appear vertically stacked.</p> </div> <div class="span4"> - <h3>Simple, flexible markup</h3> - <p>Thumbnail markup is simple—a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p> + <h3>Stacked tabs</h3> + <ul class="nav tabs stacked"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> + </ul> +<pre class="prettyprint linenums"> +<ul class="nav tabs stacked"> + ... +</ul> +</pre> </div> <div class="span4"> - <h3>Uses grid column sizes</h3> - <p>Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.</p> + <h3>Stacked pills</h3> + <ul class="nav pills stacked"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> + </ul> +<pre class="prettyprint linenums"> +<ul class="nav pills stacked"> + ... +</ul> +</pre> </div> </div> + <h2>Dropdowns <small>For advanced nav components</small></h2> <div class="row"> - <div class="span6"> - <h2>The markup</h2> - <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> + <div class="span4"> + <h3>Rich menus made easy</h3> + <p>Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.</p> + <p>Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.</p> + </div> + <div class="span4"> + <h3>Tabs with dropdowns</h3> + <ul class="nav tabs"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#">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> <pre class="prettyprint linenums"> -<ul class="thumbnails"> - <li class="span3"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> - </a> +<ul class="nav tabs"> + <li class="dropdown"> + <a class="dropdown-toggle" + data-toggle="dropdown" + href="#"> + Dropdown + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <!-- links --> + </ul> </li> - ... </ul> </pre> - <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> + </div> + <div class="span4"> + <h3>Pills with dropdowns</h3> + <ul class="nav pills"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li class="dropdown"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#">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> <pre class="prettyprint linenums"> -<ul class="thumbnails"> - <li class="span3"> - <div class="thumbnail"> - <img src="http://placehold.it/210x150" alt=""> - <h5>Thumbnail label</h5> - <p>Thumbnail caption right here...</p> - </div> +<ul class="nav pills"> + <li class="dropdown"> + <a class="dropdown-toggle" + data-toggle="dropdown" + href="#"> + Dropdown + <b class="caret"></b> + </a> + <ul class="dropdown-menu"> + <!-- links --> + </ul> </li> - ... </ul> </pre> </div> - <div class="span6"> - <h2>More examples</h2> - <p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p> - <ul class="thumbnails"> - <li class="span4"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/290x230" alt=""> - </a> - </li> - <li class="span2"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> - </a> - </li> - <li class="span2"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> - </a> - </li> - <li class="span2"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> - </a> - </li> - <li class="span2"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> - </a> - </li> - <li class="span2"> - <a href="#" class="thumbnail"> - <img src="http://placehold.it/130x100" alt=""> - </a> - </li> - </ul> + </div> + + <h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2> + <div class="row"> + <div class="span4"> + <h3>Application-style navigation</h3> + <p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p> + <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p> + </div> + <div class="span4"> + <h3>Example sidebar navigation</h3> + <div class="well" style="padding: 8px 0;"> + <ul class="nav list"> + <li class="nav-header">List header</li> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Library</a></li> + <li><a href="#">Applications</a></li> + <li class="nav-header">Another list header</li> + <li><a href="#">Profile</a></li> + <li><a href="#">Settings</a></li> + <li><a href="#">Help</a></li> + </ul> + </div> <!-- /well --> + </div> + <div class="span4"> + <h3>Simple markup</h3> +<pre class="prettyprint linenums"> +<ul class="nav list"> + <li class="nav-header"> + List header + </li> + <li class="active"> + <a href="#">Home</a> + </li> + <li> + <a href="#">Library</a> + </li> + ... +</ul> +</pre> </div> </div> -</section> -<!-- Autocomplete -================================================== --> -<section id="autocomplete"> - <div class="page-header"> - <h1>Autocomplete <small></small></h1> - </div> -</section> -<!-- Carousel -================================================== --> -<section id="carousel"> - <div class="page-header"> - <h1>Carousel <small></small></h1> - </div> -</section> + <h3>Tabbable tabs</h3> + <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p> + <div class="tabbable"> + <ul class="tabs"> + <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li> + <li><a href="#2" data-toggle="tab">Section 2</a></li> + <li><a href="#3" data-toggle="tab">Section 3</a></li> + <li><a href="#4" data-toggle="tab">Section 4</a></li> + </ul> + <div class="tab-content"> + <div class="tab-pane active" id="1"> + <p>Oh hai #1!</p> + </div> + <div class="tab-pane" id="2"> + <p>Oh hai #2!</p> + </div> + <div class="tab-pane" id="3"> + <p>Oh hai #3!</p> + </div> + <div class="tab-pane" id="4"> + <p>Oh hai #4!</p> + </div> + </div> + </div> -<!-- Side nav -================================================== --> -<section id="sidenav"> - <div class="page-header"> - <h1>Side nav <small>for lists of links</small></h1> - </div> + <div class="row"> + <div class="span4"> + <div class="tabbable tabs-left"> + <ul class="tabs"> + <li class="active"><a href="#5" data-toggle="tab">Section 1</a></li> + <li><a href="#6" data-toggle="tab">Section 2</a></li> + <li><a href="#7" data-toggle="tab">Section 3</a></li> + </ul> + <div class="tab-content" id="myTabContent2"> + <div class="tab-pane active" id="5"> + <h4>Section 1</h4> + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> + </div> + <div class="tab-pane" id="6"> + <h4>Section 2</h4> + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> + </div> + <div class="tab-pane" id="7"> + <h4>Section 3</h4> + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> + </div> + </div> + </div> + </div> + <div class="span4 offset1"> + <div class="tabbable tabs-right"> + <ul class="tabs"> + <li class="active"><a href="#8" data-toggle="tab">Section 1</a></li> + <li><a href="#9" data-toggle="tab">Section 2</a></li> + <li><a href="#10" data-toggle="tab">Section 3</a></li> + </ul> + <div class="tab-content" id="myTabContent3"> + <div class="tab-pane active" id="8"> + <h4>Section 1</h4> + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> + </div> + <div class="tab-pane" id="9"> + <h4>Section 2</h4> + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> + </div> + <div class="tab-pane" id="10"> + <h4>Section 3</h4> + <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> + </div> + </div> + </div> + </div> + </div> - <div class="row"> - <div class="span3"> - <h3>Examples</h3> - <p>Side navs can be just links, links with headings, and links with icons.</p> - <div class="well side-nav"> - <ul class="nav-group"> - <li class="active"><a class="nav-item" href="#">Home</a></li> - <li><a class="nav-item" href="#">Library</a></li> - <li><a class="nav-item" href="#">Help</a></li> - </ul> - <h6 class="nav-label">Your account</h6> - <ul class="nav-group"> - <li><a class="nav-item" href="#">Profile</a></li> - <li><a class="nav-item" href="#">Settings</a></li> - </ul> - <h6 class="nav-label">Your account</h6> - <ul class="nav-group"> - <li><a class="nav-item" href="#"><i class="home"></i> Home</a></li> - <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li> - <li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li> - <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li> - <li><a class="nav-item" href="#"><i class="time"></i> Help</a></li> + <div class="tabbable tabs-bottom"> + <div class="tab-content"> + <div class="tab-pane active" id="11"> + <p>Oh hai #1!</p> + </div> + <div class="tab-pane" id="12"> + <p>Oh hai #2!</p> + </div> + <div class="tab-pane" id="13"> + <p>Oh hai #3!</p> + </div> + <div class="tab-pane" id="14"> + <p>Oh hai #4!</p> + </div> + </div> + <ul class="tabs"> + <li class="active"><a href="#11" data-toggle="tab">Section 1</a></li> + <li><a href="#12" data-toggle="tab">Section 2</a></li> + <li><a href="#13" data-toggle="tab">Section 3</a></li> + <li><a href="#14" data-toggle="tab">Section 4</a></li> </ul> </div> - </div> - <div class="span3"> - <h3>Why use it</h3> - <p></p> - </div> - <div class="span6"> - <h3>Markup</h3> - <p>Marking up a side nav is at the core just writing an unordered list of links.</p> -<pre class="prettyprint linenums"> - <ul class="nav-group"> - <li class="active"> - <a class="nav-item" href="#">Home</a> - </li> - <li><a class="nav-item" href="#">Library</a></li> - <li><a class="nav-item" href="#">Help</a></li> - </ul> -</pre> - <p>Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.</p> -<pre class="prettyprint linenums"> - <h6 class="nav-label"></h6> - <ul class="nav-group"> - ... - </ul> - <h6 class="nav-label"></h6> - <ul class="nav-group"> - ... - </ul> -</pre> - </div> - </div> - + </section> @@ -354,7 +433,6 @@ ... </div> </pre> - <br> <h3>Brand name</h3> <p>A simple link to show your brand or project name only requires an anchor tag.</p> <pre class="prettyprint linenums"> @@ -362,7 +440,6 @@ Project name </a> </pre> - <br> <h3>Search form</h3> <p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p> <pre class="prettyprint linenums"> @@ -405,180 +482,6 @@ -<!-- Tabs & Pills -================================================== --> -<section id="tabsAndPills"> - <div class="page-header"> - <h1>Tabs and pills <small></small></h1> - </div> - - <div class="row"> - <div class="span3"> - <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p> - <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p> - </div> - <div class="span9"> - <h3>Basic tabs example</h3> - <p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p> - <ul class="tabs"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#">Secondary link</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Another link</a></li> - </ul> - </li> - </ul> -<pre class="prettyprint linenums"> -<ul class="tabs"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> -</ul> -</pre> - <h3>Tabbable tabs</h3> - <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p> - - <div class="tabbable"> - <ul class="tabs"> - <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li> - <li><a href="#2" data-toggle="tab">Section 2</a></li> - <li><a href="#3" data-toggle="tab">Section 3</a></li> - <li><a href="#4" data-toggle="tab">Section 4</a></li> - </ul> - <div class="tab-content"> - <div class="tab-pane active" id="1"> - <p>Oh hai #1!</p> - </div> - <div class="tab-pane" id="2"> - <p>Oh hai #2!</p> - </div> - <div class="tab-pane" id="3"> - <p>Oh hai #3!</p> - </div> - <div class="tab-pane" id="4"> - <p>Oh hai #4!</p> - </div> - </div> - </div> - - <div class="row"> - <div class="span4"> - <div class="tabbable tabs-left"> - <ul class="tabs"> - <li class="active"><a href="#5" data-toggle="tab">Section 1</a></li> - <li><a href="#6" data-toggle="tab">Section 2</a></li> - <li><a href="#7" data-toggle="tab">Section 3</a></li> - </ul> - <div class="tab-content" id="myTabContent2"> - <div class="tab-pane active" id="5"> - <h4>Section 1</h4> - <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> - </div> - <div class="tab-pane" id="6"> - <h4>Section 2</h4> - <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> - </div> - <div class="tab-pane" id="7"> - <h4>Section 3</h4> - <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> - </div> - </div> - </div> - </div> - <div class="span4 offset1"> - <div class="tabbable tabs-right"> - <ul class="tabs"> - <li class="active"><a href="#8" data-toggle="tab">Section 1</a></li> - <li><a href="#9" data-toggle="tab">Section 2</a></li> - <li><a href="#10" data-toggle="tab">Section 3</a></li> - </ul> - <div class="tab-content" id="myTabContent3"> - <div class="tab-pane active" id="8"> - <h4>Section 1</h4> - <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> - </div> - <div class="tab-pane" id="9"> - <h4>Section 2</h4> - <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> - </div> - <div class="tab-pane" id="10"> - <h4>Section 3</h4> - <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> - </div> - </div> - </div> - </div> - </div> - - <div class="tabbable tabs-bottom"> - <div class="tab-content"> - <div class="tab-pane active" id="11"> - <p>Oh hai #1!</p> - </div> - <div class="tab-pane" id="12"> - <p>Oh hai #2!</p> - </div> - <div class="tab-pane" id="13"> - <p>Oh hai #3!</p> - </div> - <div class="tab-pane" id="14"> - <p>Oh hai #4!</p> - </div> - </div> - <ul class="tabs"> - <li class="active"><a href="#11" data-toggle="tab">Section 1</a></li> - <li><a href="#12" data-toggle="tab">Section 2</a></li> - <li><a href="#13" data-toggle="tab">Section 3</a></li> - <li><a href="#14" data-toggle="tab">Section 4</a></li> - </ul> - </div> - - - <p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p> - <hr> - <h3>Basic pills example</h3> - <ul class="pills"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> - </ul> -<pre class="prettyprint linenums"> -<ul class="pills"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> -</ul> -</pre> - <h3>Vertical pill nav</h3> - <p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p> - <ul class="pills pills-vertical span4"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> - </ul> - </div> - </div><!-- /row --> - -</section> - - - <!-- Breadcrumbs ================================================== --> <section id="breadcrumbs"> @@ -629,39 +532,6 @@ -<!-- Step nav -================================================== - -COMMENTED OUT AND NOT SUPPORTED AT THIS TIME. - -<section id="stepNav"> - <div class="page-header"> - <h1>Step nav <small></small></h1> - </div> - <div class="row"> - <div class="span3"> - <p>Placeholder for now!</p> - </div> - <div class="span9"> - <br> - <ul class="step-nav"> - <li class="prev"><a href="#">« Overview</a></li> - <li class="active"><a class="dot" href="#">1</a></li> - <li><a class="dot" href="#">2</a></li> - <li><a class="dot" href="#">3</a></li> - <li><a class="dot" href="#">4</a></li> - <li><a class="dot" href="#">5</a></li> - <li class="next"><a href="#">Base CSS »</a></li> - </ul> - <br> - <br> - </div> - </div> -</section> ---> - - - <!-- Pagination ================================================== --> <section id="carousel"> @@ -727,6 +597,175 @@ COMMENTED OUT AND NOT SUPPORTED AT THIS TIME. +<!-- Media +================================================== --> +<section id="media"> + <div class="page-header"> + <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1> + </div> + + <div class="row"> + <div class="span6"> + <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/210x150" alt=""> + </a> + </li> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + </a> + </li> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + </a> + </li> + <li class="span3"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + </a> + </li> + </ul> + </div> + <div class="span6"> + <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/210x150" 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 primary">Action</a> <a href="#" class="btn">Action</a></p> + </div> + </div> + </li> + <li class="span3"> + <div class="thumbnail"> + <img src="http://placehold.it/210x150" 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 primary">Action</a> <a href="#" class="btn">Action</a></p> + </div> + </div> + </li> + </ul> + </div> + </div> + + <div class="row"> + <div class="span4"> + <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> + </div> + <div class="span4"> + <h3>Simple, flexible markup</h3> + <p>Thumbnail markup is simple—a <code>ul</code> with any number of <code>li</code> elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.</p> + </div> + <div class="span4"> + <h3>Uses grid column sizes</h3> + <p>Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.</p> + </div> + </div> + + <div class="row"> + <div class="span6"> + <h2>The markup</h2> + <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"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + </a> + </li> + ... +</ul> +</pre> + <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"> + <div class="thumbnail"> + <img src="http://placehold.it/210x150" alt=""> + <h5>Thumbnail label</h5> + <p>Thumbnail caption right here...</p> + </div> + </li> + ... +</ul> +</pre> + </div> + <div class="span6"> + <h2>More examples</h2> + <p>Explore all your options with the various grid classes available to you. You can also mix and match different sizes.</p> + <ul class="thumbnails"> + <li class="span4"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/290x230" alt=""> + </a> + </li> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> + </a> + </li> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> + </a> + </li> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> + </a> + </li> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> + </a> + </li> + <li class="span2"> + <a href="#" class="thumbnail"> + <img src="http://placehold.it/130x100" alt=""> + </a> + </li> + </ul> + </div> + </div> + +</section> + + + +<!-- Autocomplete +================================================== --> +<section id="autocomplete"> + <div class="page-header"> + <h1>Autocomplete <small></small></h1> + </div> + +</section> + + + +<!-- Carousel +================================================== --> +<section id="carousel"> + <div class="page-header"> + <h1>Carousel <small></small></h1> + </div> + +</section> + + + <!-- Alerts & Messages ================================================== --> <section id="alerts"> |