diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/docs.css | 40 | ||||
| -rw-r--r-- | docs/assets/js/application.js | 4 | ||||
| -rw-r--r-- | docs/base-css.html | 16 | ||||
| -rw-r--r-- | docs/components.html | 263 | ||||
| -rw-r--r-- | docs/javascript.html | 30 | ||||
| -rw-r--r-- | docs/less.html | 14 | ||||
| -rw-r--r-- | docs/scaffolding.html | 12 | ||||
| -rw-r--r-- | docs/templates/pages/base-css.mustache | 16 | ||||
| -rw-r--r-- | docs/templates/pages/components.mustache | 263 | ||||
| -rw-r--r-- | docs/templates/pages/javascript.mustache | 30 | ||||
| -rw-r--r-- | docs/templates/pages/less.mustache | 14 | ||||
| -rw-r--r-- | docs/templates/pages/scaffolding.mustache | 12 |
12 files changed, 370 insertions, 344 deletions
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index dd723800b..776ca58b9 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -125,7 +125,9 @@ section { } /* Subnav */ -.subhead .nav { +.subnav { + width: 100%; + height: 36px; background-color: #eeeeee; /* Old browsers */ background-repeat: repeat-x; /* Repeat the gradient */ background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */ @@ -138,23 +140,30 @@ section { border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; - border-radius: 4px; + border-radius: 4px; +} +.subhead .nav { } .subhead .nav a { margin: 0; padding-top: 11px; padding-bottom: 11px; font-size: 13px; + color: #777; border-left: 1px solid #f5f5f5; border-right: 1px solid #e5e5e5; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } +.subhead .nav a:hover, .subhead .nav .active a { - background-color: #fff; + background-color: transparent; color: #333; } +.subhead .nav .active a { + background-color: #eee; +} .subhead .nav li:first-child a { border-left: 0; -webkit-border-radius: 4px 0 0 4px; @@ -165,17 +174,24 @@ section { border-right: 0; } -.subhead .subnav-fixed { +.subnav-fixed { position: fixed; top: 40px; + left: 0; + right: 0; z-index: 1030; - width: 938px; - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; - -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.05); - -moz-box-shadow: 0 1px 5px rgba(0,0,0,.05); - box-shadow: 0 1px 5px rgba(0,0,0,.05); + border-color: #d5d5d5; + border-width: 0 0 1px; /* drop the border on the fixed edges */ + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); + -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); + box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); +} +.subnav-fixed .nav { + width: 940px; + margin: 0 auto; } @@ -438,7 +454,7 @@ h2 + .row { /* Example sites showcase */ .example-sites img { - max-width: 290px; + max-width: 100%; } .marketing-byline { margin: -18px 0 27px; diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 4b7efe53f..0252d75e9 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -118,8 +118,8 @@ $(function(){ // fix sub nav playa var $win = $(window) - , $nav = $('.subhead .nav') - , navTop = $('.subhead .nav').offset().top - 40 + , $nav = $('.subnav') + , navTop = $('.subnav').offset().top - 40 , isFixed = 0 processScroll() diff --git a/docs/base-css.html b/docs/base-css.html index bcb0c7d21..c849a299e 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -63,13 +63,15 @@ <header class="jumbotron subhead" id="overview"> <h1>Base CSS</h1> <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p> - <ul class="nav pills"> - <li><a href="./base-css.html#typography">Typography</a></li> - <li><a href="./base-css.html#tables">Tables</a></li> - <li><a href="./base-css.html#forms">Forms</a></li> - <li><a href="./base-css.html#buttons">Buttons</a></li> - <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li> - </ul> + <div class="subnav"> + <ul class="nav pills"> + <li><a href="./base-css.html#typography">Typography</a></li> + <li><a href="./base-css.html#tables">Tables</a></li> + <li><a href="./base-css.html#forms">Forms</a></li> + <li><a href="./base-css.html#buttons">Buttons</a></li> + <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li> + </ul> + </div> </header> diff --git a/docs/components.html b/docs/components.html index 9d28b9e06..50c615fb9 100644 --- a/docs/components.html +++ b/docs/components.html @@ -58,11 +58,12 @@ <div class="container"> - <!-- Masthead - ================================================== --> - <header class="jumbotron subhead" id="overview"> - <h1>Components</h1> - <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p> +<!-- Masthead +================================================== --> +<header class="jumbotron subhead" id="overview"> + <h1>Components</h1> + <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p> + <div class="subnav"> <ul class="nav pills"> <li><a href="./components.html#buttonGroups">Button groups</a></li> <li><a href="./components.html#buttonDropdowns">Button dropdowns</a></li> @@ -74,51 +75,52 @@ <li><a href="./components.html#alerts">Alerts</a></li> <li><a href="./components.html#progress">Progress bars</a></li> </ul> - </header> + </div> +</header> - <!-- Button Groups - ================================================== --> - <section id="buttonGroups"> - <div class="page-header"> - <h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1> - </div> - <div class="row"> - <div class="span4"> - <h3>Button groups</h3> - <p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p> - <p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p> - <div class="well" style="padding: 10px; margin-bottom: 9px;"> +<!-- Button Groups +================================================== --> +<section id="buttonGroups"> + <div class="page-header"> + <h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1> + </div> + <div class="row"> + <div class="span4"> + <h3>Button groups</h3> + <p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p> + <p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p> + <div class="well" style="padding: 10px; margin-bottom: 9px;"> + <div class="btn-group"> + <a class="btn" href="#">Left</a> + <a class="btn" href="#">Middle</a> + <a class="btn" href="#">Right</a> + </div> + </div> + <div class="well" style="padding: 10px;"> + <div class="btn-toolbar"> <div class="btn-group"> - <a class="btn" href="#">Left</a> - <a class="btn" href="#">Middle</a> - <a class="btn" href="#">Right</a> + <a class="btn" href="#">1</a> + <a class="btn" href="#">2</a> + <a class="btn" href="#">3</a> + <a class="btn" href="#">4</a> </div> - </div> - <div class="well" style="padding: 10px;"> - <div class="btn-toolbar"> - <div class="btn-group"> - <a class="btn" href="#">1</a> - <a class="btn" href="#">2</a> - <a class="btn" href="#">3</a> - <a class="btn" href="#">4</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">5</a> - <a class="btn" href="#">6</a> - <a class="btn" href="#">7</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">8</a> - </div> + <div class="btn-group"> + <a class="btn" href="#">5</a> + <a class="btn" href="#">6</a> + <a class="btn" href="#">7</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">8</a> </div> </div> - </div> - <div class="span4"> - <h3>Example markup</h3> - <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p> + + </div> + <div class="span4"> + <h3>Example markup</h3> + <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p> <pre class="prettyprint linenums"> <div class="btn-group"> <a class="btn" href="#">1</a> @@ -134,95 +136,95 @@ </div> </div> </pre> - </div> - <div class="span4"> - <h3>Checkbox and radio flavors</h3> - <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> - <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p> - <hr> - <h4 class="muted">Heads up</h4> - <p class="muted">CSS for button groups is in a separate file, button-groups.less.</p> - </div> </div> - </section> + <div class="span4"> + <h3>Checkbox and radio flavors</h3> + <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> + <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p> + <hr> + <h4 class="muted">Heads up</h4> + <p class="muted">CSS for button groups is in a separate file, button-groups.less.</p> + </div> + </div> +</section> - <!-- Split button dropdowns - ================================================== --> - <section id="buttonDropdowns"> - <div class="page-header"> - <h1>Split button dropdowns <small>Built on button groups to provide contextual menus</small></h1> +<!-- Split button dropdowns +================================================== --> +<section id="buttonDropdowns"> + <div class="page-header"> + <h1>Split button dropdowns <small>Built on button groups to provide contextual menus</small></h1> + </div> + <div class="row"> + <div class="span4"> + <h3>Split button dropdowns</h3> + <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="well" style="padding: 10px; margin-bottom: 9px;"> + <div class="btn-toolbar" style="margin-bottom: 9px;"> + <div class="btn-group"> + <a class="btn" href="#">Action</a> + <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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> + </div><!-- /btn-group --> + <div class="btn-group"> + <a class="btn primary" href="#">Action</a> + <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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> + </div><!-- /btn-group --> + <div class="btn-group"> + <a class="btn danger" href="#">Danger</a> + <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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> + </div><!-- /btn-group --> + </div> + <div class="btn-toolbar"> + <div class="btn-group"> + <a class="btn success" href="#">Success</a> + <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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> + </div><!-- /btn-group --> + <div class="btn-group"> + <a class="btn info" href="#">Info</a> + <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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> + </div><!-- /btn-group --> + </div> + </div> <!-- /well --> </div> - <div class="row"> - <div class="span4"> - <h3>Split button dropdowns</h3> - <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="well" style="padding: 10px; margin-bottom: 9px;"> - <div class="btn-toolbar" style="margin-bottom: 9px;"> - <div class="btn-group"> - <a class="btn" href="#">Action</a> - <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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> - </div><!-- /btn-group --> - <div class="btn-group"> - <a class="btn primary" href="#">Action</a> - <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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> - </div><!-- /btn-group --> - <div class="btn-group"> - <a class="btn danger" href="#">Danger</a> - <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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> - </div><!-- /btn-group --> - </div> - <div class="btn-toolbar"> - <div class="btn-group"> - <a class="btn success" href="#">Success</a> - <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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> - </div><!-- /btn-group --> - <div class="btn-group"> - <a class="btn info" href="#">Info</a> - <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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> - </div><!-- /btn-group --> - </div> - </div> <!-- /well --> - </div> - <div class="span8"> - <h3>Example markup</h3> - <p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p> + <div class="span8"> + <h3>Example markup</h3> + <p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p> <pre class="prettyprint linenums"> <div class="btn-group"> <a class="btn" href="#">Action</a> @@ -234,9 +236,9 @@ </ul> </div> </pre> - </div> </div> - </section> + </div> +</section> @@ -528,11 +530,6 @@ <h3>Tabbable in any direction</h3> <div class="row"> -<!-- - <div class="span4"> - <p>Swap the order of your HTML—placing <code>.tabs</code> after <code>.tab-content</code>—for tabs on the bottom.</p> - </div> ---> <div class="span4"> <h4>Tabs on the bottom</h4> <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p> diff --git a/docs/javascript.html b/docs/javascript.html index 472285cc9..396bf15bc 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -63,20 +63,22 @@ <header class="jumbotron subhead" id="overview"> <h1>Javascript for Bootstrap</h1> <p class="lead">Bring Bootstrap's components to life—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. - <ul class="nav pills"> - <li><a href="./javascript.html#javascript">Overview</a></li> - <li><a href="./javascript.html#modals">Modal</a></li> - <li><a href="./javascript.html#dropdowns">Dropdown</a></li> - <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> - <li><a href="./javascript.html#tabs">Tab</a></li> - <li><a href="./javascript.html#tooltips">Tooltip</a></li> - <li><a href="./javascript.html#popovers">Popover</a></li> - <li><a href="./javascript.html#alerts">Alert</a></li> - <li><a href="./javascript.html#buttons">Button</a></li> - <li><a href="./javascript.html#collapse">Collapse</a></li> - <li><a href="./javascript.html#carousel">Carousel</a></li> - <li><a href="./javascript.html#typeahead">Typeahead</a></li> - </ul> + <div class="subnav"> + <ul class="nav pills"> + <li><a href="./javascript.html#javascript">Overview</a></li> + <li><a href="./javascript.html#modals">Modal</a></li> + <li><a href="./javascript.html#dropdowns">Dropdown</a></li> + <li><a href="./javascript.html#scrollspy">Scrollspy</a></li> + <li><a href="./javascript.html#tabs">Tab</a></li> + <li><a href="./javascript.html#tooltips">Tooltip</a></li> + <li><a href="./javascript.html#popovers">Popover</a></li> + <li><a href="./javascript.html#alerts">Alert</a></li> + <li><a href="./javascript.html#buttons">Button</a></li> + <li><a href="./javascript.html#collapse">Collapse</a></li> + <li><a href="./javascript.html#carousel">Carousel</a></li> + <li><a href="./javascript.html#typeahead">Typeahead</a></li> + </ul> + </div> </header> diff --git a/docs/less.html b/docs/less.html index c8c1540b5..86a65a6c7 100644 --- a/docs/less.html +++ b/docs/less.html @@ -67,12 +67,14 @@ <header class="jumbotron subhead" id="overview"> <h1>Using LESS with Bootstrap</h1> <p class="lead">Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p> - <ul class="nav pills"> - <li><a href="./less.html#builtWith">Built with Less</a></li> - <li><a href="./less.html#variables">Variables</a></li> - <li><a href="./less.html#mixins">Mixins</a></li> - <li><a href="./less.html#compiling">Compiling Bootstrap</a></li> - </ul> + <div class="subnav"> + <ul class="nav pills"> + <li><a href="./less.html#builtWith">Built with Less</a></li> + <li><a href="./less.html#variables">Variables</a></li> + <li><a href="./less.html#mixins">Mixins</a></li> + <li><a href="./less.html#compiling">Compiling Bootstrap</a></li> + </ul> + </div> </header> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 1fd8363ae..bb18b0394 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -63,11 +63,13 @@ <header class="jumbotron subhead" id="overview"> <h1>Scaffolding</h1> <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p> - <ul class="nav pills"> - <li><a href="./scaffolding.html#grid-system">Grid system</a></li> - <li><a href="./scaffolding.html#layouts">Layouts</a></li> - <li><a href="./scaffolding.html#responsive">Responsive design</a></li> - </ul> + <div class="subnav"> + <ul class="nav pills"> + <li><a href="./scaffolding.html#grid-system">Grid system</a></li> + <li><a href="./scaffolding.html#layouts">Layouts</a></li> + <li><a href="./scaffolding.html#responsive">Responsive design</a></li> + </ul> + </div> </header> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 5552d6735..41722aa71 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -3,13 +3,15 @@ <header class="jumbotron subhead" id="overview"> <h1>{{_i}}Base CSS{{/i}}</h1> <p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p> - <ul class="nav pills"> - <li><a href="./base-css.html#typography">{{_i}}Typography{{/i}}</a></li> - <li><a href="./base-css.html#tables">{{_i}}Tables{{/i}}</a></li> - <li><a href="./base-css.html#forms">{{_i}}Forms{{/i}}</a></li> - <li><a href="./base-css.html#buttons">{{_i}}Buttons{{/i}}</a></li> - <li><a href="./base-css.html#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li> - </ul> + <div class="subnav"> + <ul class="nav pills"> + <li><a href="./base-css.html#typography">{{_i}}Typography{{/i}}</a></li> + <li><a href="./base-css.html#tables">{{_i}}Tables{{/i}}</a></li> + <li><a href="./base-css.html#forms">{{_i}}Forms{{/i}}</a></li> + <li><a href="./base-css.html#buttons">{{_i}}Buttons{{/i}}</a></li> + <li><a href="./base-css.html#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li> + </ul> + </div> </header> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 5282e6178..36fc84281 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1,8 +1,9 @@ - <!-- Masthead - ================================================== --> - <header class="jumbotron subhead" id="overview"> - <h1>{{_i}}Components{{/i}}</h1> - <p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p> +<!-- Masthead +================================================== --> +<header class="jumbotron subhead" id="overview"> + <h1>{{_i}}Components{{/i}}</h1> + <p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p> + <div class="subnav"> <ul class="nav pills"> <li><a href="./components.html#buttonGroups">{{_i}}Button groups{{/i}}</a></li> <li><a href="./components.html#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li> @@ -14,51 +15,52 @@ <li><a href="./components.html#alerts">{{_i}}Alerts{{/i}}</a></li> <li><a href="./components.html#progress">{{_i}}Progress bars{{/i}}</a></li> </ul> - </header> + </div> +</header> - <!-- Button Groups - ================================================== --> - <section id="buttonGroups"> - <div class="page-header"> - <h1>{{_i}}Button groups{{/i}} <small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1> - </div> - <div class="row"> - <div class="span4"> - <h3>{{_i}}Button groups{{/i}}</h3> - <p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.{{/i}}</p> - <p>{{_i}}You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.{{/i}}</p> - <div class="well" style="padding: 10px; margin-bottom: 9px;"> +<!-- Button Groups +================================================== --> +<section id="buttonGroups"> + <div class="page-header"> + <h1>{{_i}}Button groups{{/i}} <small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1> + </div> + <div class="row"> + <div class="span4"> + <h3>{{_i}}Button groups{{/i}}</h3> + <p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.{{/i}}</p> + <p>{{_i}}You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.{{/i}}</p> + <div class="well" style="padding: 10px; margin-bottom: 9px;"> + <div class="btn-group"> + <a class="btn" href="#">{{_i}}Left{{/i}}</a> + <a class="btn" href="#">{{_i}}Middle{{/i}}</a> + <a class="btn" href="#">{{_i}}Right{{/i}}</a> + </div> + </div> + <div class="well" style="padding: 10px;"> + <div class="btn-toolbar"> <div class="btn-group"> - <a class="btn" href="#">{{_i}}Left{{/i}}</a> - <a class="btn" href="#">{{_i}}Middle{{/i}}</a> - <a class="btn" href="#">{{_i}}Right{{/i}}</a> + <a class="btn" href="#">1</a> + <a class="btn" href="#">2</a> + <a class="btn" href="#">3</a> + <a class="btn" href="#">4</a> </div> - </div> - <div class="well" style="padding: 10px;"> - <div class="btn-toolbar"> - <div class="btn-group"> - <a class="btn" href="#">1</a> - <a class="btn" href="#">2</a> - <a class="btn" href="#">3</a> - <a class="btn" href="#">4</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">5</a> - <a class="btn" href="#">6</a> - <a class="btn" href="#">7</a> - </div> - <div class="btn-group"> - <a class="btn" href="#">8</a> - </div> + <div class="btn-group"> + <a class="btn" href="#">5</a> + <a class="btn" href="#">6</a> + <a class="btn" href="#">7</a> + </div> + <div class="btn-group"> + <a class="btn" href="#">8</a> </div> </div> - </div> - <div class="span4"> - <h3>{{_i}}Example markup{{/i}}</h3> - <p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p> + + </div> + <div class="span4"> + <h3>{{_i}}Example markup{{/i}}</h3> + <p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p> <pre class="prettyprint linenums"> <div class="btn-group"> <a class="btn" href="#">1</a> @@ -74,95 +76,95 @@ </div> </div> </pre> - </div> - <div class="span4"> - <h3>{{_i}}Checkbox and radio flavors{{/i}}</h3> - <p>{{_i}}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.{{/i}}</p> - <p><a class="btn js-btn" href="./javascript.html#buttons">{{_i}}Get the javascript »{{/i}}</a></p> - <hr> - <h4 class="muted">{{_i}}Heads up{{/i}}</h4> - <p class="muted">{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}</p> - </div> </div> - </section> + <div class="span4"> + <h3>{{_i}}Checkbox and radio flavors{{/i}}</h3> + <p>{{_i}}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.{{/i}}</p> + <p><a class="btn js-btn" href="./javascript.html#buttons">{{_i}}Get the javascript »{{/i}}</a></p> + <hr> + <h4 class="muted">{{_i}}Heads up{{/i}}</h4> + <p class="muted">{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}</p> + </div> + </div> +</section> - <!-- Split button dropdowns - ================================================== --> - <section id="buttonDropdowns"> - <div class="page-header"> - <h1>{{_i}}Split button dropdowns{{/i}} <small>{{_i}}Built on button groups to provide contextual menus{{/i}}</small></h1> +<!-- Split button dropdowns +================================================== --> +<section id="buttonDropdowns"> + <div class="page-header"> + <h1>{{_i}}Split button dropdowns{{/i}} <small>{{_i}}Built on button groups to provide contextual menus{{/i}}</small></h1> + </div> + <div class="row"> + <div class="span4"> + <h3>{{_i}}Split button dropdowns{{/i}}</h3> + <p>{{_i}}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.{{/i}}</p> + <div class="well" style="padding: 10px; margin-bottom: 9px;"> + <div class="btn-toolbar" style="margin-bottom: 9px;"> + <div class="btn-group"> + <a class="btn" href="#">{{_i}}Action{{/i}}</a> + <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <a class="btn primary" href="#">{{_i}}Action{{/i}}</a> + <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <a class="btn danger" href="#">{{_i}}Danger{{/i}}</a> + <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</a></li> + </ul> + </div><!-- /btn-group --> + </div> + <div class="btn-toolbar"> + <div class="btn-group"> + <a class="btn success" href="#">{{_i}}Success{{/i}}</a> + <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group"> + <a class="btn info" href="#">{{_i}}Info{{/i}}</a> + <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a href="#">{{_i}}Action{{/i}}</a></li> + <li><a href="#">{{_i}}Another action{{/i}}</a></li> + <li><a href="#">{{_i}}Something else here{{/i}}</a></li> + <li class="divider"></li> + <li><a href="#">{{_i}}Separated link{{/i}}</a></li> + </ul> + </div><!-- /btn-group --> + </div> + </div> <!-- /well --> </div> - <div class="row"> - <div class="span4"> - <h3>{{_i}}Split button dropdowns{{/i}}</h3> - <p>{{_i}}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.{{/i}}</p> - <div class="well" style="padding: 10px; margin-bottom: 9px;"> - <div class="btn-toolbar" style="margin-bottom: 9px;"> - <div class="btn-group"> - <a class="btn" href="#">{{_i}}Action{{/i}}</a> - <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#">{{_i}}Action{{/i}}</a></li> - <li><a href="#">{{_i}}Another action{{/i}}</a></li> - <li><a href="#">{{_i}}Something else here{{/i}}</a></li> - <li class="divider"></li> - <li><a href="#">{{_i}}Separated link{{/i}}</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <a class="btn primary" href="#">{{_i}}Action{{/i}}</a> - <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#">{{_i}}Action{{/i}}</a></li> - <li><a href="#">{{_i}}Another action{{/i}}</a></li> - <li><a href="#">{{_i}}Something else here{{/i}}</a></li> - <li class="divider"></li> - <li><a href="#">{{_i}}Separated link{{/i}}</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <a class="btn danger" href="#">{{_i}}Danger{{/i}}</a> - <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#">{{_i}}Action{{/i}}</a></li> - <li><a href="#">{{_i}}Another action{{/i}}</a></li> - <li><a href="#">{{_i}}Something else here{{/i}}</a></li> - <li class="divider"></li> - <li><a href="#">{{_i}}Separated link{{/i}}</a></li> - </ul> - </div><!-- /btn-group --> - </div> - <div class="btn-toolbar"> - <div class="btn-group"> - <a class="btn success" href="#">{{_i}}Success{{/i}}</a> - <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#">{{_i}}Action{{/i}}</a></li> - <li><a href="#">{{_i}}Another action{{/i}}</a></li> - <li><a href="#">{{_i}}Something else here{{/i}}</a></li> - <li class="divider"></li> - <li><a href="#">{{_i}}Separated link{{/i}}</a></li> - </ul> - </div><!-- /btn-group --> - <div class="btn-group"> - <a class="btn info" href="#">{{_i}}Info{{/i}}</a> - <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> - <ul class="dropdown-menu"> - <li><a href="#">{{_i}}Action{{/i}}</a></li> - <li><a href="#">{{_i}}Another action{{/i}}</a></li> - <li><a href="#">{{_i}}Something else here{{/i}}</a></li> - <li class="divider"></li> - <li><a href="#">{{_i}}Separated link{{/i}}</a></li> - </ul> - </div><!-- /btn-group --> - </div> - </div> <!-- /well --> - </div> - <div class="span8"> - <h3>{{_i}}Example markup{{/i}}</h3> - <p>{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}</p> + <div class="span8"> + <h3>{{_i}}Example markup{{/i}}</h3> + <p>{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}</p> <pre class="prettyprint linenums"> <div class="btn-group"> <a class="btn" href="#">{{_i}}Action{{/i}}</a> @@ -174,9 +176,9 @@ </ul> </div> </pre> - </div> </div> - </section> + </div> +</section> @@ -468,11 +470,6 @@ <h3>{{_i}}Tabbable in any direction{{/i}}</h3> <div class="row"> -<!-- - <div class="span4"> - <p>Swap the order of your HTML—placing <code>.tabs</code> after <code>.tab-content</code>—for tabs on the bottom.</p> - </div> ---> <div class="span4"> <h4>{{_i}}Tabs on the bottom{{/i}}</h4> <p>{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}</p> diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 9fd431f2f..b6b16fef2 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -3,20 +3,22 @@ <header class="jumbotron subhead" id="overview"> <h1>{{_i}}Javascript for Bootstrap{{/i}}</h1> <p class="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}} - <ul class="nav pills"> - <li><a href="./javascript.html#javascript">{{_i}}Overview{{/i}}</a></li> - <li><a href="./javascript.html#modals">{{_i}}Modal{{/i}}</a></li> - <li><a href="./javascript.html#dropdowns">{{_i}}Dropdown{{/i}}</a></li> - <li><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></li> - <li><a href="./javascript.html#tabs">{{_i}}Tab{{/i}}</a></li> - <li><a href="./javascript.html#tooltips">{{_i}}Tooltip{{/i}}</a></li> - <li><a href="./javascript.html#popovers">{{_i}}Popover{{/i}}</a></li> - <li><a href="./javascript.html#alerts">{{_i}}Alert{{/i}}</a></li> - <li><a href="./javascript.html#buttons">{{_i}}Button{{/i}}</a></li> - <li><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></li> - <li><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></li> - <li><a href="./javascript.html#typeahead">{{_i}}Typeahead{{/i}}</a></li> - </ul> + <div class="subnav"> + <ul class="nav pills"> + <li><a href="./javascript.html#javascript">{{_i}}Overview{{/i}}</a></li> + <li><a href="./javascript.html#modals">{{_i}}Modal{{/i}}</a></li> + <li><a href="./javascript.html#dropdowns">{{_i}}Dropdown{{/i}}</a></li> + <li><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></li> + <li><a href="./javascript.html#tabs">{{_i}}Tab{{/i}}</a></li> + <li><a href="./javascript.html#tooltips">{{_i}}Tooltip{{/i}}</a></li> + <li><a href="./javascript.html#popovers">{{_i}}Popover{{/i}}</a></li> + <li><a href="./javascript.html#alerts">{{_i}}Alert{{/i}}</a></li> + <li><a href="./javascript.html#buttons">{{_i}}Button{{/i}}</a></li> + <li><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></li> + <li><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></li> + <li><a href="./javascript.html#typeahead">{{_i}}Typeahead{{/i}}</a></li> + </ul> + </div> </header> diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index b5cff2d11..ea7058fd9 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -7,12 +7,14 @@ <header class="jumbotron subhead" id="overview"> <h1>{{_i}}Using LESS with Bootstrap{{/i}}</h1> <p class="lead">{{_i}}Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p> - <ul class="nav pills"> - <li><a href="./less.html#builtWith">{{_i}}Built with Less{{/i}}</a></li> - <li><a href="./less.html#variables">{{_i}}Variables{{/i}}</a></li> - <li><a href="./less.html#mixins">{{_i}}Mixins{{/i}}</a></li> - <li><a href="./less.html#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li> - </ul> + <div class="subnav"> + <ul class="nav pills"> + <li><a href="./less.html#builtWith">{{_i}}Built with Less{{/i}}</a></li> + <li><a href="./less.html#variables">{{_i}}Variables{{/i}}</a></li> + <li><a href="./less.html#mixins">{{_i}}Mixins{{/i}}</a></li> + <li><a href="./less.html#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li> + </ul> + </div> </header> diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index a8638f273..ed80dabfc 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -3,11 +3,13 @@ <header class="jumbotron subhead" id="overview"> <h1>{{_i}}Scaffolding{{/i}}</h1> <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p> - <ul class="nav pills"> - <li><a href="./scaffolding.html#grid-system">{{_i}}Grid system{{/i}}</a></li> - <li><a href="./scaffolding.html#layouts">{{_i}}Layouts{{/i}}</a></li> - <li><a href="./scaffolding.html#responsive">{{_i}}Responsive design{{/i}}</a></li> - </ul> + <div class="subnav"> + <ul class="nav pills"> + <li><a href="./scaffolding.html#grid-system">{{_i}}Grid system{{/i}}</a></li> + <li><a href="./scaffolding.html#layouts">{{_i}}Layouts{{/i}}</a></li> + <li><a href="./scaffolding.html#responsive">{{_i}}Responsive design{{/i}}</a></li> + </ul> + </div> </header> |