/wp-content/themes/motive/page-componentsguide.php
PHP | 2494 lines | 2394 code | 90 blank | 10 comment | 14 complexity | 88a6a2c21a7efebd700173108d776ad3 MD5 | raw file
Large files files are truncated, but you can click here to view the full file
- <?php
- /**
- * Template Name: Components Guide, no sidebar
- *
- * @package WP-Bootstrap
- * @subpackage Default_Theme
- * @since WP-Bootstrap 0.87
- *
- * Last Revised: September 9, 2012
- *
- */
- get_header(); ?>
- <?php while ( have_posts() ) : the_post(); ?>
- <!-- Masthead
- ================================================== -->
- <header class="jumbotron subhead" id="overview">
- <div class="container">
- <h1><?php the_title(); ?></h1>
- <p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
- </div>
- </header>
- <div class="container">
- <!-- Docs nav
- ================================================== -->
- <div class="row">
- <div class="span3 bs-docs-sidebar">
- <ul class="nav nav-list bs-docs-sidenav">
- <li><a href="#dropdowns"><i class="icon-chevron-right"></i> Dropdowns</a></li>
- <li><a href="#buttonGroups"><i class="icon-chevron-right"></i> Button groups</a></li>
- <li><a href="#buttonDropdowns"><i class="icon-chevron-right"></i> Button dropdowns</a></li>
- <li><a href="#navs"><i class="icon-chevron-right"></i> Navs</a></li>
- <li><a href="#navbar"><i class="icon-chevron-right"></i> Navbar</a></li>
- <li><a href="#breadcrumbs"><i class="icon-chevron-right"></i> Breadcrumbs</a></li>
- <li><a href="#pagination"><i class="icon-chevron-right"></i> Pagination</a></li>
- <li><a href="#labels-badges"><i class="icon-chevron-right"></i> Labels and badges</a></li>
- <li><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li>
- <li><a href="#thumbnails"><i class="icon-chevron-right"></i> Thumbnails</a></li>
- <li><a href="#alerts"><i class="icon-chevron-right"></i> Alerts</a></li>
- <li><a href="#progress"><i class="icon-chevron-right"></i> Progress bars</a></li>
- <li><a href="#media"><i class="icon-chevron-right"></i> Media object</a></li>
- <li><a href="#misc"><i class="icon-chevron-right"></i> Misc</a></li>
- </ul>
- </div>
- <div class="span9">
- <!-- Dropdowns
- ================================================== -->
- <section id="dropdowns">
- <div class="page-header">
- <h1>Dropdown menus</h1>
- </div>
- <h2>Example</h2>
- <p>Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="./javascript.html#dropdowns">dropdown JavaScript plugin</a>.</p>
- <div class="bs-docs-example">
- <div class="dropdown clearfix">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a tabindex="-1" href="#">Separated link</a></li>
- </ul>
- </div>
- </div>
- <pre class="prettyprint linenums">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a tabindex="-1" href="#">Separated link</a></li>
- </ul>
- </pre>
- <h2>Markup</h2>
- <p>Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then just create the menu.</p>
- <pre class="prettyprint linenums">
- <div class="dropdown">
- <!-- Link or button to toggle dropdown -->
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a tabindex="-1" href="#">Separated link</a></li>
- </ul>
- </div>
- </pre>
- <h2>Options</h2>
- <p>Align menus to the right and add include additional levels of dropdowns.</p>
- <h3>Aligning the menus</h3>
- <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
- <pre class="prettyprint linenums">
- <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
- ...
- </ul>
- </pre>
- <h3>Sub menus on dropdowns</h3>
- <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
- <div class="bs-docs-example" style="min-height: 180px;">
- <div class="pull-left">
- <p class="muted">Default</p>
- <div class="dropdown clearfix">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- <div class="pull-left" style="margin-left: 20px;">
- <p class="muted">Dropup</p>
- <div class="dropup">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- <div class="pull-left" style="margin-left: 20px;">
- <p class="muted">Left submenu</p>
- <div class="dropdown">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
- <li><a tabindex="-1" href="#">Action</a></li>
- <li><a tabindex="-1" href="#">Another action</a></li>
- <li><a tabindex="-1" href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu pull-left">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- <li><a tabindex="-1" href="#">Second level link</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <pre class="prettyprint linenums">
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- ...
- <li class="dropdown-submenu">
- <a tabindex="-1" href="#">More options</a>
- <ul class="dropdown-menu">
- ...
- </ul>
- </li>
- </ul>
- </pre>
- </section>
- <!-- Button Groups
- ================================================== -->
- <section id="buttonGroups">
- <div class="page-header">
- <h1>Button groups</h1>
- </div>
- <h2>Examples</h2>
- <p>Two basic options, along with two more specific variations.</p>
- <h3>Single button group</h3>
- <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
- <div class="bs-docs-example">
- <div class="btn-group" style="margin: 9px 0 5px;">
- <button class="btn">Left</button>
- <button class="btn">Middle</button>
- <button class="btn">Right</button>
- </div>
- </div>
- <pre class="prettyprint linenums">
- <div class="btn-group">
- <button class="btn">1</button>
- <button class="btn">2</button>
- <button class="btn">3</button>
- </div>
- </pre>
- <h3>Multiple button groups</h3>
- <p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
- <div class="bs-docs-example">
- <div class="btn-toolbar" style="margin: 0;">
- <div class="btn-group">
- <button class="btn">1</button>
- <button class="btn">2</button>
- <button class="btn">3</button>
- <button class="btn">4</button>
- </div>
- <div class="btn-group">
- <button class="btn">5</button>
- <button class="btn">6</button>
- <button class="btn">7</button>
- </div>
- <div class="btn-group">
- <button class="btn">8</button>
- </div>
- </div>
- </div>
- <pre class="prettyprint linenums">
- <div class="btn-toolbar">
- <div class="btn-group">
- ...
- </div>
- </div>
- </pre>
- <h3>Vertical button groups</h3>
- <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
- <div class="bs-docs-example">
- <div class="btn-group btn-group-vertical">
- <button type="button" class="btn"><i class="icon-align-left"></i></button>
- <button type="button" class="btn"><i class="icon-align-center"></i></button>
- <button type="button" class="btn"><i class="icon-align-right"></i></button>
- <button type="button" class="btn"><i class="icon-align-justify"></i></button>
- </div>
- </div>
- <pre class="prettyprint linenums">
- <div class="btn-group btn-group-vertical">
- ...
- </div>
- </pre>
- <hr class="bs-docs-separator">
- <h4>Checkbox and radio flavors</h4>
- <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p>
- <h4>Dropdowns in button groups</h4>
- <p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
- </section>
- <!-- Split button dropdowns
- ================================================== -->
- <section id="buttonDropdowns">
- <div class="page-header">
- <h1>Button dropdown menus</h1>
- </div>
- <h2>Overview and examples</h2>
- <p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
- <div class="bs-docs-example">
- <div class="btn-toolbar" style="margin: 0;">
- <div class="btn-group">
- <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- </div><!-- /btn-toolbar -->
- </div>
- <pre class="prettyprint linenums">
- <div class="btn-group">
- <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
- Action
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu">
- <!-- dropdown menu links -->
- </ul>
- </div>
- </pre>
- <h3>Works with all button sizes</h3>
- <p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
- <div class="bs-docs-example">
- <div class="btn-toolbar" style="margin: 0;">
- <div class="btn-group">
- <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Small button <span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Mini button <span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- </div><!-- /btn-toolbar -->
- </div>
- <h3>Requires JavaScript</h3>
- <p>Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
- <p>In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.</p>
- <hr class="bs-docs-separator">
- <h2>Split button dropdowns</h2>
- <p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
- <div class="bs-docs-example">
- <div class="btn-toolbar" style="margin: 0;">
- <div class="btn-group">
- <button class="btn">Action</button>
- <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-primary">Action</button>
- <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-danger">Danger</button>
- <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-warning">Warning</button>
- <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-success">Success</button>
- <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-info">Info</button>
- <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group">
- <button class="btn btn-inverse">Inverse</button>
- <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- </div><!-- /btn-toolbar -->
- </div>
- <pre class="prettyprint linenums">
- <div class="btn-group">
- <button class="btn">Action</button>
- <button class="btn dropdown-toggle" data-toggle="dropdown">
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- <!-- dropdown menu links -->
- </ul>
- </div>
- </pre>
- <h3>Sizes</h3>
- <p>Utilize the extra button classes <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.</p>
- <div class="bs-docs-example">
- <div class="btn-toolbar">
- <div class="btn-group">
- <button class="btn btn-large">Large action</button>
- <button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- </div><!-- /btn-toolbar -->
- <div class="btn-toolbar">
- <div class="btn-group">
- <button class="btn btn-small">Small action</button>
- <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- </div><!-- /btn-toolbar -->
- <div class="btn-toolbar">
- <div class="btn-group">
- <button class="btn btn-mini">Mini action</button>
- <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- </div><!-- /btn-toolbar -->
- </div>
- <pre class="prettyprint linenums">
- <div class="btn-group">
- <button class="btn btn-mini">Action</button>
- <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- <!-- dropdown menu links -->
- </ul>
- </div>
- </pre>
- <h3>Dropup menus</h3>
- <p>Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.</p>
- <div class="bs-docs-example">
- <div class="btn-toolbar" style="margin: 0;">
- <div class="btn-group dropup">
- <button class="btn">Dropup</button>
- <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <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>
- </div><!-- /btn-group -->
- <div class="btn-group dropup">
- <button class="btn primary">Right dropup</button>
- <button class="btn primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
- <ul class="dropdown-menu pull-right">
- <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>
- </div><!-- /btn-group -->
- </div>
- </div>
- <pre class="prettyprint linenums">
- <div class="btn-group dropup">
- <button class="btn">Dropup</button>
- <button class="btn dropdown-toggle" data-toggle="dropdown">
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- <!-- dropdown menu links -->
- </ul>
- </div>
- </pre>
- </section>
- <!-- Nav, Tabs, & Pills
- ================================================== -->
- <section id="navs">
- <div class="page-header">
- <h1>Nav: tabs, pills, and lists</small></h1>
- </div>
- <h2>Lightweight defaults <small>Same markup, different classes</small></h2>
- <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>Basic tabs</h3>
- <p>Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:</p>
- <div class="bs-docs-example">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- </ul>
- </div>
- <pre class="prettyprint linenums">
- <ul class="nav nav-tabs">
- <li class="active">
- <a href="#">Home</a>
- </li>
- <li><a href="#">...</a></li>
- <li><a href="#">...</a></li>
- </ul>
- </pre>
- <h3>Basic pills</h3>
- <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
- <div class="bs-docs-example">
- <ul class="nav nav-pills">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- </ul>
- </div>
- <pre class="prettyprint linenums">
- <ul class="nav nav-pills">
- <li class="active">
- <a href="#">Home</a>
- </li>
- <li><a href="#">...</a></li>
- <li><a href="#">...</a></li>
- </ul>
- </pre>
- <h3>Disabled state</h3>
- <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p>
- <div class="bs-docs-example">
- <ul class="nav nav-pills">
- <li><a href="#">Clickable link</a></li>
- <li><a href="#">Clickable link</a></li>
- <li class="disabled"><a href="#">Disabled link</a></li>
- </ul>
- </div>
- <pre class="prettyprint linenums">
- <ul class="nav nav-pills">
- ...
- <li class="disabled"><a href="#">Home</a></li>
- ...
- </ul>
- </pre>
- <h3>Component alignment</h3>
- <p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
- <hr class="bs-docs-separator">
- <h2>Stackable</h2>
- <p>As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.</p>
- <h3>Stacked tabs</h3>
- <div class="bs-docs-example">
- <ul class="nav nav-tabs nav-stacked">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- </ul>
- </div>
- <pre class="prettyprint linenums">
- <ul class="nav nav-tabs nav-stacked">
- ...
- </ul>
- </pre>
- <h3>Stacked pills</h3>
- <div class="bs-docs-example">
- <ul class="nav nav-pills nav-stacked">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- </ul>
- </div>
- <pre class="prettyprint linenums">
- <ul class="nav nav-pills nav-stacked">
- ...
- </ul>
- </pre>
- <hr class="bs-docs-separator">
- <h2>Dropdowns</h2>
- <p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
- <h3>Tabs with dropdowns</h3>
- <div class="bs-docs-example">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Help</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>
- </div>
- <pre class="prettyprint linenums">
- <ul class="nav 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>
- <h3>Pills with dropdowns</h3>
- <div class="bs-docs-example">
- <ul class="nav nav-pills">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Help</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>
- </div>
- <pre class="prettyprint linenums">
- <ul class="nav 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>
- <hr class="bs-docs-separator">
- <h2>Nav lists</h2>
- <p>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>
- <h3>Example nav list</h3>
- <p>Take a list of links and add <code>class="nav nav-list"</code>:</p>
- <div class="bs-docs-example">
- <div class="well" style="max-width: 340px; padding: 8px 0;">
- <ul class="nav 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 class="divider"></li>
- <li><a href="#">Help</a></li>
- </ul>
- </div> <!-- /well -->
- </div>
- <pre class="prettyprint linenums">
- <ul class="nav 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>
- <p>
- <span class="label label-info">Note</span>
- For nesting within a nav list, include <code>class="nav nav-list"</code> on any nested <code><ul></code>.
- </p>
- <h3>Horizontal dividers</h3>
- <p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
- <pre class="prettyprint linenums">
- <ul class="nav nav-list">
- ...
- <li class="divider"></li>
- ...
- </ul>
- </pre>
- <hr class="bs-docs-separator">
- <h2>Tabbable nav</h2>
- <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p>
- <h3>Tabbable example</h3>
- <p>To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.</p>
- <div class="bs-docs-example">
- <div class="tabbable" style="margin-bottom: 18px;">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
- <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
- <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
- </ul>
- <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
- <div class="tab-pane active" id="tab1">
- <p>I'm in Section 1.</p>
- </div>
- <div class="tab-pane" id="tab2">
- <p>Howdy, I'm in Section 2.</p>
- </div>
- <div class="tab-pane" id="tab3">
- <p>What up girl, this is Section 3.</p>
- </div>
- </div>
- </div> <!-- /tabbable -->
- </div>
- <pre class="prettyprint linenums">
- <div class="tabbable"> <!-- Only required for left/right tabs -->
- <ul class="nav nav-tabs">
- <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
- <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="tab1">
- <p>I'm in Section 1.</p>
- </div>
- <div class="tab-pane" id="tab2">
- <p>Howdy, I'm in Section 2.</p>
- </div>
- </div>
- </div>
- </pre>
- <h4>Fade in tabs</h4>
- <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
- <h4>Requires jQuery plugin</h4>
- <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the JavaScript docs page</a>.</p>
- <h3>Tabbable in any direction</h3>
- <h4>Tabs on the bottom</h4>
- <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
- <div class="bs-docs-example">
- <div class="tabbable tabs-below">
- <div class="tab-content">
- <div class="tab-pane active" id="A">
- <p>I'm in Section A.</p>
- </div>
- <div class="tab-pane" id="B">
- <p>Howdy, I'm in Section B.</p>
- </div>
- <div class="tab-pane" id="C">
- <p>What up girl, this is Section C.</p>
- </div>
- </div>
- <ul class="nav nav-tabs">
- <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
- <li><a href="#B" data-toggle="tab">Section 2</a></li>
- <li><a href="#C" data-toggle="tab">Section 3</a></li>
- </ul>
- </div> <!-- /tabbable -->
- </div>
- <pre class="prettyprint linenums">
- <div class="tabbable tabs-below">
- <div class="tab-content">
- ...
- </div>
- <ul class="nav nav-tabs">
- ...
- </ul>
- </div>
- </pre>
- <h4>Tabs on the left</h4>
- <p>Swap the class to put tabs on the left.</p>
- <div class="bs-docs-example">
- <div class="tabbable tabs-left">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
- <li><a href="#lB" data-toggle="tab">Section 2</a></li>
- <li><a href="#lC" data-toggle="tab">Section 3</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="lA">
- <p>I'm in Section A.</p>
- </div>
- <div class="tab-pane" id="lB">
- <p>Howdy, I'm in Section B.</p>
- </div>
- <div class="tab-pane" id="lC">
- <p>What up girl, this is Section C.</p>
- </div>
- </div>
- </div> <!-- /tabbable -->
- </div>
- <pre class="prettyprint linenums">
- <div class="tabbable tabs-left">
- <ul class="nav nav-tabs">
- ...
- </ul>
- <div class="tab-content">
- ...
- </div>
- </div>
- </pre>
- <h4>Tabs on the right</h4>
- <p>Swap the class to put tabs on the right.</p>
- <div class="bs-docs-example">
- <div class="tabbable tabs-right">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
- <li><a href="#rB" data-toggle="tab">Section 2</a></li>
- <li><a href="#rC" data-toggle="tab">Section 3</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="rA">
- <p>I'm in Section A.</p>
- </div>
- <div class="tab-pane" id="rB">
- <p>Howdy, I'm in Section B.</p>
- </div>
- <div class="tab-pane" id="rC">
- <p>What up girl, this is Section C.</p>
- </div>
- </div>
- </div> <!-- /tabbable -->
- </div>
- <pre class="prettyprint linenums">
- <div class="tabbable tabs-right">
- <ul class="nav nav-tabs">
- ...
- </ul>
- <div class="tab-content">
- ...
- </div>
- </div>
- </pre>
- </section>
- <!-- Navbar
- ================================================== -->
- <section id="navbar">
- <div class="page-header">
- <h1>Navbar</h1>
- </div>
- <h2>Basic navbar</h2>
- <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
- <div class="bs-docs-example">
- <div class="navbar">
- <div class="navbar-inner">
- <a class="brand" href="#">Title</a>
- <ul class="nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- </ul>
- </div>
- </div>
- </div>
- <pre class="prettyprint linenums">
- <div class="navbar">
- <div class="navbar-inner">
- <a class="brand" href="#">Title</a>
- <ul class="nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- </ul>
- </div>
- </div>
- </pre>
- <hr class="bs-docs-separator">
- <h2>Navbar components</h2>
- <h3>Brand</h3>
- <p>A simple link to show your brand or project name only requires an anchor tag.</p>
- <div class="bs-docs-example">
- <div class="navbar">
- <div class="navbar-inner">
- <a class="brand" href="#">Title</a>
- </div>
- </div>
- </div>
- <pre class="prettyprint linenums">
- <a class="brand" href="#">Project name</a>
- </pre>
- <h3>Nav links</h3>
- <p>Nav items are simple to add via unordered lists.</p>
- <div class="bs-docs-example">
- <div class="navbar">
- <div class="navbar-inner">
- <ul class="nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- </ul>
- </div>
- </div>
- </div>
- <pre class="prettyprint linenums">
- <ul class="nav">
- <li class="active">
- <a href="#">Home</a>
- </li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- </ul>
- </pre>
- <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
- <div class="bs-docs-example">
- <div class="navbar">
- <div class="navbar-inner">
- <ul class="nav">
- <li class="active"><a href="#">Home</a></li>
- <li class="divider-vertical"></li>
- <li><a href="#">Link</a></li>
- <li class="divider-vertical"></li>
- <li><a href="#">Link</a></li>
- <li class="divider-vertical"></li>
- </ul>
- </div>
- </div>
- </div>
- <pre class="prettyprint linenums">
- <ul class="nav">
- ...
- <li class="divider-vertical"></li>
- ...
- </ul>
- </pre>
- <h3>Forms</h3>
- <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
- <div class="bs-docs-example">
- <div class="navbar">
- <div class="navbar-inner">
- <form class="navbar-form pull-left">
- <input type="text" class="span2">
- <button type="submit" class="btn">Submit</button>
- </form>
- </div>
- </div>
- </div>
- <pre class="prettyprint linenums">
- <form class="navbar-form pull-left">
- <input type="text" class="span2">
- <button type="submit" class="btn">Submit</button>
- </form>
- </pre>
- <h3>Search form</h3>
- <p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
- <div class="bs-docs-example">
- <div class="navbar">
- <div class="navbar-inner">
- <form class="navbar-search pull-left">
- <input type="text" class="search-query" placeholder="Search">
- </form>
- </div>
- </div>
- </div>
- <pre class="prettyprint linenums">
- <form class="navbar-search pull-left">
- <input type="text" class="search-query" placeholder="Search">
- </form>
- </pre>
- <h3>Component alignment</h3>
- <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
- <h3>Using dropdowns</h3>
- <p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
- <pre class="prettyprint linenums">
- <ul class="nav">
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- Account
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- ...
- </ul>
- </li>
- </ul>
- </pre>
- <p>Visit the <a href="./javascript.html#dropdowns">JavaScript dropdowns documentation</a> for more markup and information on calling dropdowns.</p>
- <h3>Text</h3>
- <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>
- <hr class="bs-docs-separator">
- <h2>Optional display variations</h2>
- <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
- <h3>Fixed to top</h3>
- <p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code><body></code>. Be sure to …
Large files files are truncated, but you can click here to view the full file