diff options
Diffstat (limited to 'docs/templates')
| -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 |
5 files changed, 170 insertions, 165 deletions
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> |