├── .bowerrc
├── bower.json
├── .gitignore
├── templates
    ├── includes
    │   ├── ads.hbs
    │   ├── adsense.hbs
    │   ├── nav-about.hbs
    │   ├── banner.hbs
    │   ├── social-buttons.hbs
    │   ├── button-tweet.hbs
    │   ├── nav-getting-started.hbs
    │   ├── nav-main.hbs
    │   ├── nav-helpers.hbs
    │   ├── footer.hbs
    │   ├── nav-customize.hbs
    │   ├── header.hbs
    │   ├── head.hbs
    │   ├── nav-javascript.hbs
    │   ├── nav-css.hbs
    │   └── nav-components.hbs
    ├── index.hbs
    ├── layouts
    │   ├── home.hbs
    │   └── default.hbs
    ├── about.hbs
    ├── getting-started.hbs
    └── customize.hbs
├── .gitattributes
├── .jshintrc
├── LICENSE-MIT
├── _config.yml
├── package.json
├── Gruntfile.js
└── README.md


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory": "vendor"
3 | }


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "example-assemble-anchors"
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | npm-debug.log
 3 | 
 4 | tmp
 5 | temp
 6 | TODO.md
 7 | 
 8 | *.sublime-*
 9 | 
10 | _gh_pages


--------------------------------------------------------------------------------
/templates/includes/ads.hbs:
--------------------------------------------------------------------------------
1 | <div id="ads-container">
2 |   <div class="ad">
3 |     <div id="adsense"></div>
4 |     <script>
5 |       // Google AdSense
6 |     </script>
7 |   </div>
8 | </div>
9 | 


--------------------------------------------------------------------------------
/templates/includes/adsense.hbs:
--------------------------------------------------------------------------------
1 | <div id="ads-container">
2 |   <div class="ad">
3 |     <div id="adsense"></div>
4 |     <script>
5 |       // Google AdSense
6 |     </script>
7 |   </div>
8 | </div>


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Set default behaviour, in case users don't have core.autocrlf set.
2 | * text=lf
3 | * text eol=lf
4 | *.* eol=lf
5 | 
6 | *.jpg binary
7 | *.gif binary
8 | *.png binary
9 | *.jpeg binary


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "curly": true,
 3 |   "eqeqeq": true,
 4 |   "immed": true,
 5 |   "latedef": true,
 6 |   "newcap": true,
 7 |   "noarg": true,
 8 |   "sub": true,
 9 |   "undef": true,
10 |   "boss": true,
11 |   "eqnull": true,
12 |   "node": true
13 | }
14 | 


--------------------------------------------------------------------------------
/templates/includes/nav-about.hbs:
--------------------------------------------------------------------------------
 1 | <li>
 2 |   <a href="#history">History</a>
 3 | </li>
 4 | <li>
 5 |   <a href="#team">Core team</a>
 6 | </li>
 7 | <li>
 8 |   <a href="#community">Community</a>
 9 | </li>
10 | <li>
11 |   <a href="#translations">Translations</a>
12 | </li>
13 | 


--------------------------------------------------------------------------------
/templates/includes/banner.hbs:
--------------------------------------------------------------------------------
1 | <div class="banner">
2 |   <div class="container">
3 |     <strong>
4 |       <a href="{{ site.repo }}/blob/master/CHANGELOG.md">See what's new in v{{pkg 'version'}}</a>
5 |     </strong>
6 |     To hear what's new from {{site.brand}} core team, <a href="{{site.blog}}">visit the blog</a>.
7 |   </div>
8 | </div>
9 | 


--------------------------------------------------------------------------------
/templates/includes/social-buttons.hbs:
--------------------------------------------------------------------------------
 1 | <div class="bs-social">
 2 |   <ul class="bs-social-buttons">
 3 |     <li>
 4 |       {{ghbtn size="small" user="assemble" repo="assemble"}}
 5 |     </li>
 6 |     <li>
 7 |       {{ghbtn size="small" user="assemble" repo="assemble" type="fork"}}
 8 |     </li>
 9 |     <li class="follow-btn">
10 |       {{follow user="assemblejs"}}
11 |     </li>
12 |     <li class="tweet-btn">
13 |       {{tweet url="http://assemble.io" via="assemblejs" related="jonschlinkert:Assemble core team."}}
14 |     </li>
15 |   </ul>
16 | </div>


--------------------------------------------------------------------------------
/templates/index.hbs:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: home.hbs
 3 | title: Bootstrap
 4 | ---
 5 | <main class="masthead" id="content" role="main">
 6 |   <div class="container">
 7 |     <h1>Bootstrap</h1>
 8 |     <p class="lead">Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
 9 |     <p>
10 |       <a href="{{ site.download_dist }}" class="btn btn-outline-inverse btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}']);">Download Bootstrap</a>
11 |       <a href="{{ site.download_source }}" class="btn btn-outline-inverse btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version source }}']);">Download source</a>
12 |     </p>
13 |   </div>
14 | </main>
15 | 


--------------------------------------------------------------------------------
/LICENSE-MIT:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2013 Brian Woodward
 2 | 
 3 | Permission is hereby granted, free of charge, to any person
 4 | obtaining a copy of this software and associated documentation
 5 | files (the "Software"), to deal in the Software without
 6 | restriction, including without limitation the rights to use,
 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the
 9 | Software is furnished to do so, subject to the following
10 | conditions:
11 | 
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 


--------------------------------------------------------------------------------
/templates/includes/button-tweet.hbs:
--------------------------------------------------------------------------------
 1 | <style type="text/css" media="screen">
 2 |   #custom-tweet-button > a {
 3 |     float: right;
 4 |     display: inline-block;
 5 |     padding: 8px 16px 8px 36px;
 6 |     margin: 15px 0 0 0;
 7 |     background: url('https://twitter.com/favicons/favicon.ico') 15px center no-repeat;
 8 |     background-color: transparent;
 9 |     border: none;
10 |     border-radius: 4px;
11 |   }
12 |   #custom-tweet-button > a:hover {
13 |     text-decoration: none;
14 |     background-color: rgba(255,255,255,.07);
15 |   }
16 | </style>
17 | <div id="custom-tweet-button">
18 |   <a href="https://twitter.com/intent/tweet?screen_name=assemblejs" data-related="jonschlinkert:Creator of Assemble" data-lang="en" target="_blank">&nbsp;Tweet</a>
19 |   <script>
20 |     ! function(d, s, id) {
21 |       var js, fjs = d.getElementsByTagName(s)[0];
22 |       if (!d.getElementById(id)) {
23 |         js = d.createElement(s);
24 |         js.id = id;
25 |         js.src = "https://platform.twitter.com/widgets.js";
26 |         fjs.parentNode.insertBefore(js, fjs);
27 |       }
28 |     }(document, "script", "twitter-wjs");
29 |   </script>
30 | </div>


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
 1 | # Build
 2 | root: _gh_pages
 3 | dest: <%= site.root %>
 4 | 
 5 | 
 6 | # Site metadata
 7 | brand: Assemble
 8 | title: Assemble
 9 | lead: The most awe inspiring website in Northern Kentucky.
10 | description: >
11 |   Static site generator for Grunt.js and Yeoman. Assemble makes it dead simple to build modular sites,
12 |   blogs, gh-pages, components and documentation from reusable templates and data.
13 | license:
14 |   type: MIT License
15 |   url: ./license/index.html
16 | 
17 | 
18 | # URLs
19 | repo: https://github.com/assemble/assemble
20 | blog: http://assemble.io/blog/
21 | download:
22 |   source: https://github.com/assemble/assemble/archive/master.zip
23 | 
24 | 
25 | # SEO/SEM
26 | google:
27 |   analytics: false
28 |   siteid: false
29 | 
30 | 
31 | # Comments
32 | disqus:
33 |   shortname: example-assemble-anchors
34 | 
35 | 
36 | # Social
37 | social:
38 |   twitter:
39 |     via: doowb
40 |     username: doowb
41 |   facebook: false
42 |   gplus: false
43 |   hn: false
44 |   google: false
45 | 
46 | 
47 | # Sharing
48 | share:
49 |   twitter: false
50 |   facebook: false
51 |   gplus: false
52 |   hn: false
53 |   google: false
54 | 
55 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example-assemble-anchors",
 3 |   "description": "Usage examples for assemble-contrib-anchors, an Assemble plugin for generating a HTML Table of Contents.",
 4 |   "version": "0.1.1",
 5 |   "homepage": "https://github.com/assemble/example-assemble-anchors",
 6 |   "author": {
 7 |     "name": "Brian Woodward",
 8 |     "url": "https://github.com/doowb"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/assemble/example-assemble-anchors.git"
13 |   },
14 |   "bugs": {
15 |     "url": "https://github.com/assemble/example-assemble-anchors/issues"
16 |   },
17 |   "licenses": [
18 |     {
19 |       "type": "MIT",
20 |       "url": "https://github.com/assemble/example-assemble-anchors/blob/master/LICENSE-MIT"
21 |     }
22 |   ],
23 |   "devDependencies": {
24 |     "assemble": "~0.4.22",
25 |     "assemble-contrib-anchors": "~0.0.1",
26 |     "grunt-contrib-clean": "~0.5.0",
27 |     "handlebars-helper-pkg": "~0.1.0",
28 |     "pretty": "~0.1.1"
29 |   },
30 |   "keywords": [
31 |     "blog generator",
32 |     "component generator",
33 |     "grunt static site generator",
34 |     "handlebars",
35 |     "handlebars-helper-pkg",
36 |     "site generator",
37 |     "static site generator",
38 |     "templates",
39 |     "yeoman static site generator"
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/templates/includes/nav-getting-started.hbs:
--------------------------------------------------------------------------------
 1 | <li>
 2 |   <a href="#download">Download Bootstrap</a>
 3 |   <ul class="nav">
 4 |     <li><a href="#download-compiled">Compiled CSS, JS, and fonts</a></li>
 5 |     <li><a href="#download-additional">Additional downloads</a></li>
 6 |     <li><a href="#download-cdn">Bootstrap CDN</a></li>
 7 |   </ul>
 8 | </li>
 9 | <li>
10 |   <a href="#whats-included">What's included</a>
11 | </li>
12 | <li>
13 |   <a href="#template">Basic template</a>
14 | </li>
15 | <li>
16 |   <a href="#examples">Examples</a>
17 | </li>
18 | <li>
19 |   <a href="#disable-responsive">Disabling responsiveness</a>
20 | </li>
21 | <li>
22 |   <a href="#migration">Migrating from 2.x to 3.0</a>
23 |   <ul class="nav">
24 |     <li><a href="#migration-classes">Major class changes</a></li>
25 |     <li><a href="#migration-new">What's new</a></li>
26 |     <li><a href="#migration-dropped">What's removed</a></li>
27 |     <li><a href="#migration-notes">Additional notes</a></li>
28 |   </ul>
29 | </li>
30 | <li>
31 |   <a href="#browsers">Browser support</a>
32 | </li>
33 | <li>
34 |   <a href="#third-parties">Third party support</a>
35 | </li>
36 | <li>
37 |   <a href="#accessibility">Accessibility</a>
38 | </li>
39 | <li>
40 |   <a href="#license-faqs">License FAQs</a>
41 | </li>
42 | <li>
43 |   <a href="#customizing">Customizing Bootstrap</a>
44 | </li>
45 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * example-assemble-anchors
 3 |  * https://github.com/assemble/example-assemble-anchors
 4 |  * Copyright (c) 2013
 5 |  * Licensed under the MIT license.
 6 |  */
 7 | 
 8 | 'use strict';
 9 | 
10 | module.exports = function(grunt) {
11 | 
12 |   var pretty = require('pretty');
13 | 
14 |   // Project configuration.
15 |   grunt.initConfig({
16 |     pkg: grunt.file.readJSON('package.json'),
17 |     vendor: grunt.file.readJSON('.bowerrc').directory,
18 |     site: grunt.file.readYAML('_config.yml'),
19 | 
20 |     // Build HTML from templates and data
21 |     assemble: {
22 |       options: {
23 |         flatten: true,
24 |         site: '<%= site %>',
25 |         assets: '_gh_pages/assets',
26 |         partials: ['templates/includes/*.hbs'],
27 |         layouts: 'templates/layouts',
28 |         postprocess: pretty
29 |       },
30 |       example: {
31 |         options: {
32 |           plugins: ['assemble-contrib-anchors'],
33 |         },
34 |         files: {'_gh_pages/': ['templates/*.hbs']}
35 |       }
36 |     },
37 | 
38 |     // Before generating any new files,
39 |     // remove any previously-created files.
40 |     clean: {
41 |       example: ['_gh_pages/*.html']
42 |     }
43 |   });
44 | 
45 |   // Load npm plugins to provide necessary tasks.
46 |   grunt.loadNpmTasks('grunt-contrib-clean');
47 |   grunt.loadNpmTasks('assemble');
48 | 
49 |   // Default tasks to be run.
50 |   grunt.registerTask('default', ['clean', 'assemble']);
51 | };
52 | 


--------------------------------------------------------------------------------
/templates/layouts/home.hbs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Meta, title, CSS, favicons, etc. -->
 5 |     {{> head }}
 6 |   </head>
 7 |   <body class="docs-home">
 8 |     <a class="sr-only" href="#content">Skip to main content</a>
 9 | 
10 |     <!-- Docs master nav -->
11 |     {{> nav-main }}
12 | 
13 |     <!-- Page content of course! -->
14 |     {{> body }}
15 | 
16 |     <footer class="container" role="contentinfo">
17 |       {{> ads }}
18 | 
19 |       {{> social-buttons }}
20 | 
21 |       <ul class="masthead-links">
22 |         <li class="current-version">
23 |           Currently v{{pkg 'version'}}
24 |         </li>
25 |         <li>
26 |           <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
27 |         </li>
28 |         <li>
29 |           <a href="./getting-started/#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);.html">Examples</a>
30 |         </li>
31 |         <li>
32 |           <a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Expo</a>
33 |         </li>
34 |         <li>
35 |           <a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Blog']);">Blog</a>
36 |         </li>
37 |       </ul>
38 |     </footer>
39 | 
40 |     <!-- JS and analytics only. -->
41 |     {{> footer }}
42 | 
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/templates/includes/nav-main.hbs:
--------------------------------------------------------------------------------
 1 | <header class="navbar navbar-inverse navbar-fixed-top docs-nav" role="banner">
 2 |   <div class="container">
 3 |     <div class="navbar-header">
 4 |       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
 5 |         <span class="sr-only">Toggle navigation</span>
 6 |         <span class="icon-bar"></span>
 7 |         <span class="icon-bar"></span>
 8 |         <span class="icon-bar"></span>
 9 |       </button>
10 |       <a href="index.html" class="navbar-brand">Bootstrap</a>
11 |     </div>
12 |     <nav class="collapse navbar-collapse navbar-collapse" role="navigation">
13 |       <ul class="nav navbar-nav">
14 |         <li{{#is slug "getting-started"}} class="active"{{/is}}>
15 |           <a href="./getting-started.html">Getting started</a>
16 |         </li>
17 |         <li{{#is slug "css"}} class="active"{{/is}}>
18 |           <a href="./css.html">CSS</a>
19 |         </li>
20 |         <li{{#is slug "components"}} class="active"{{/is}}>
21 |           <a href="./components.html">Components</a>
22 |         </li>
23 |         <li{{#is slug "js"}} class="active"{{/is}}>
24 |           <a href="./javascript.html">JavaScript</a>
25 |         </li>
26 |         <li{{#is slug "customize"}} class="active"{{/is}}>
27 |           <a href="./customize.html">Customize</a>
28 |         </li>
29 |       </ul>
30 |       <ul class="nav navbar-nav navbar-right">
31 |         <li> <a href="{{ site.repo }}">Repo</a> </li>
32 |         <li> <a href="{{ site.issues }}">Issues</a> </li>
33 |       </ul>
34 |     </nav>
35 |   </div>
36 | </header>
37 | 


--------------------------------------------------------------------------------
/templates/includes/nav-helpers.hbs:
--------------------------------------------------------------------------------
 1 | <li> <a href="./">Overview</a> </li>
 2 | <li>
 3 |   <a href="#helpers-special">Special Helpers</a>
 4 |   <ul class="nav">
 5 |     <li> <a href="helper-compose.html">Compose</a> </li>
 6 |     <li> <a href="helper-aggregate.html">Aggregate</a> </li>
 7 |   </ul>
 8 | </li>
 9 | <li>
10 |   <a href="#helper-categories">Categories</a>
11 |   <ul class="nav">
12 |     <li> <a href="helpers-code.html">Code</a> </li>
13 |     <li> <a href="helpers-collections.html">Collections</a> </li>
14 |     <li> <a href="helpers-comparison.html">Comparison</a> </li>
15 |     <li> <a href="helpers-content.html">Content</a> </li>
16 |     <li> <a href="helpers-data.html">Data</a> </li>
17 |     <li> <a href="helpers-dates.html">Dates</a> </li>
18 |     <li> <a href="helpers-html.html">HTML</a> </li>
19 |     <li> <a href="helpers-inflections.html">Inflections</a> </li>
20 |     <li> <a href="helpers-logging.html">Logging</a> </li>
21 |     <li> <a href="helpers-markdown.html">Markdown</a> </li>
22 |     <li> <a href="helpers-math.html">Math</a> </li>
23 |     <li> <a href="helpers-misc.html">Miscellaneous</a> </li>
24 |     <li> <a href="helpers-numbers.html">Numbers</a> </li>
25 |     <li> <a href="helpers-path.html">Path</a> </li>
26 |     <li> <a href="helpers-readme.html">Readme</a> </li>
27 |     <li> <a href="helpers-strings.html">Strings</a> </li>
28 |     <li> <a href="helpers-url.html">URL</a> </li>
29 |   </ul>
30 | </li>
31 | 
32 | 
33 | {{!TODO: add sections for swig filters and lodash mixins }}
34 | 
35 | {{! <ul class="nav nav-pills nav-stacked"> }}
36 |   {{!#each pages}}
37 |     {{!#is data.area "helpers"}}
38 |       {{!> sidenav-link }}
39 |     {{!/is}}
40 |   {{!/each}}
41 | {{! </ul> }}
42 | 


--------------------------------------------------------------------------------
/templates/includes/footer.hbs:
--------------------------------------------------------------------------------
 1 | <!-- Core JavaScript
 2 | ================================================== -->
 3 | <!-- Placed at the end of the document so the pages load faster -->
 4 | <script src="{{ assets }}/js/jquery.js"></script>
 5 | <script src="{{ assets }}/js/bootstrap.js"></script>
 6 | 
 7 | <script src="http://platform.twitter.com/widgets.js"></script>
 8 | <script src="{{ assets }}/js/holder.js"></script>
 9 | <script src="{{ assets }}/js/highlight.js"></script>
10 | <script>hljs.initHighlightingOnLoad();</script>
11 | 
12 | <script src="{{ assets }}/js/application.js"></script>
13 | 
14 | {{#if site.google.siteid}}
15 | <!-- Analytics
16 | ================================================== -->
17 | <script>
18 |   var _gauges = _gauges || [];
19 |   (function() {
20 |     var t   = document.createElement('script');
21 |     t.async = true;
22 |     t.id    = 'gauges-tracker';
23 |     t.setAttribute('data-site-id', '{{site.google.siteid}}');
24 |     t.src = '//secure.gaug.es/track.js';
25 |     var s = document.getElementsByTagName('script')[0];
26 |     s.parentNode.insertBefore(t, s);
27 |   })();
28 | </script>
29 | {{/if}}
30 | 
31 | <!-- Anchors
32 | ================================================== -->
33 | <script>
34 |   // $(document).ready(function () {
35 | 
36 |   //   var id = '';
37 |   //   var anchor = [
38 |   //     '<a name="' + id + '" class="anchor" href="#' + id + '">',
39 |   //     '  <span class="glyphicon glyphicon-link"></span>',
40 |   //     '</a>\n'
41 |   //   ].join('\n');
42 | 
43 |   //   $(anchor).appendTo('h1,h2,h3,h4');
44 |   //   $('h1,h2,h3,h4').hover(function(){
45 |   //     if($(this).prop('id')) {
46 |   //       $('.anchor').prop("href", '#' + this.id);
47 |   //     }
48 |   //   });
49 | 
50 |   // });
51 | </script>


--------------------------------------------------------------------------------
/templates/includes/nav-customize.hbs:
--------------------------------------------------------------------------------
 1 | <li>
 2 |   <a href="#less">LESS components</a>
 3 | </li>
 4 | <li>
 5 |   <a href="#plugins">jQuery plugins</a>
 6 | </li>
 7 | <li>
 8 |   <a href="#less-variables">LESS variables</a>
 9 |   <ul class="nav">
10 |     <li><a href="#variables-basics">Basics</a></li>
11 |     <li><a href="#variables-buttons">Buttons</a></li>
12 |     <li><a href="#variables-form-states">Form states</a></li>
13 |     <li><a href="#variables-alerts">Alerts</a></li>
14 |     <li><a href="#variables-navbar">Navbar</a></li>
15 |     <li><a href="#variables-nav">Nav</a></li>
16 |     <li><a href="#variables-tables">Tables</a></li>
17 |     <li><a href="#variables-forms">Forms</a></li>
18 |     <li><a href="#variables-dropdowns">Dropdowns</a></li>
19 |     <li><a href="#variables-panels-wells">Panels and wells</a></li>
20 |     <li><a href="#variables-accordion">Accordion</a></li>
21 |     <li><a href="#variables-badges">Badges</a></li>
22 |     <li><a href="#variables-breadcrumbs">Breadcrumbs</a></li>
23 |     <li><a href="#variables-jumbotron">Jumbotron</a></li>
24 |     <li><a href="#variables-modals">Modals</a></li>
25 |     <li><a href="#variables-carousel">Carousel</a></li>
26 |     <li><a href="#variables-list-group">List group</a></li>
27 |     <li><a href="#variables-thumbnails">Thumbnails</a></li>
28 |     <li><a href="#variables-progress">Progress bars</a></li>
29 |     <li><a href="#variables-pagination">Pagination</a></li>
30 |     <li><a href="#variables-pager">Pager</a></li>
31 |     <li><a href="#variables-labels">Labels</a></li>
32 |     <li><a href="#variables-tooltips-popovers">Tooltips and popovers</a></li>
33 |     <li><a href="#variables-close">Close button</a></li>
34 |     <li><a href="#variables-type">Type</a></li>
35 |     <li><a href="#variables-other">Other</a></li>
36 |   </ul>
37 | </li>
38 | <li>
39 |   <a href="#download">Download</a>
40 | </li>
41 | 


--------------------------------------------------------------------------------
/templates/includes/header.hbs:
--------------------------------------------------------------------------------
 1 | <meta charset="utf-8">
 2 | <meta http-equiv="X-UA-Compatible" content="IE=edge">
 3 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 4 | <meta name="description" content="{{site.description}}">
 5 | <meta name="author" content="">
 6 | 
 7 | <title>
 8 |   {{#is title "Bootstrap"}}
 9 |     {{ title }}
10 |   {{ else }}
11 |     {{ title }} &middot; Bootstrap
12 |   {{/is}}
13 | </title>
14 | 
15 | <!-- Bootstrap core CSS -->
16 | <link href="{{ assets }}/css/bootstrap.min.css" rel="stylesheet">
17 | 
18 | <!-- Documentation extras -->
19 | <link href="{{ assets }}/css/docs.css" rel="stylesheet">
20 | <link href="{{ assets }}/css/github.css" rel="stylesheet">
21 | <style>pre code { background: transparent; }</style>
22 | 
23 | <!--[if lt IE 9]>
24 |   <script src="{{ assets }}/js/ie8-responsive-file-warning.js"></script>
25 | <![endif]-->
26 | 
27 | <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
28 | <!--[if lt IE 9]>
29 |   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
30 |   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
31 | <![endif]-->
32 | 
33 | <!-- Favicons -->
34 | <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ assets }}/ico/apple-touch-icon-144-precomposed.png">
35 | <link rel="shortcut icon" href="{{ assets }}/ico/favicon.png">
36 | 
37 | 
38 | <script>
39 |   var _gaq = _gaq || [];
40 |   _gaq.push(['_setAccount', '{{site.google.analytics}}']);
41 |   _gaq.push(['_trackPageview']);
42 |   (function() {
43 |     var ga = document.createElement('script'); ga.async = true;
44 |     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
45 |     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
46 |   })();
47 | </script>
48 | 


--------------------------------------------------------------------------------
/templates/includes/head.hbs:
--------------------------------------------------------------------------------
 1 | <meta charset="utf-8">
 2 | <meta http-equiv="X-UA-Compatible" content="IE=edge">
 3 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
 4 | <meta name="description" content="{{site.description}}">
 5 | <meta name="author" content="{{pkg 'author.name'}}">
 6 | <link rel="alternate" type="application/atom+xml" title="{{default title 'ASSEMBLE'}} Feed" href="/index.xml">
 7 | <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
 8 | 
 9 | <title>
10 |   {{default title 'ASSEMBLE'}} | {{site.title}}
11 | </title>
12 | 
13 | <!-- Documentation styles -->
14 | <link href="{{ assets }}/css/assemble.css" rel="stylesheet">
15 | <link href="{{ assets }}/css/github.css" rel="stylesheet">
16 | 
17 | <!--[if lt IE 9]>
18 |   <script src="{{ assets }}/js/ie8-responsive-file-warning.js"></script>
19 | <![endif]-->
20 | 
21 | <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
22 | <!--[if lt IE 9]>
23 |   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
24 |   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
25 | <![endif]-->
26 | 
27 | <!-- Favicons -->
28 | <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ assets }}/ico/apple-touch-icon-144-precomposed.png">
29 | <link rel="shortcut icon" href="{{ assets }}/ico/favicon.png">
30 | 
31 | <script>
32 |   var _gaq = _gaq || [];
33 |   _gaq.push(['_setAccount', '{{site.google.analytics}}']);
34 |   _gaq.push(['_trackPageview']);
35 |   (function() {
36 |     var ga = document.createElement('script'); ga.async = true;
37 |     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
38 |     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
39 |   })();
40 | </script>
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # example-assemble-anchors [![NPM version](https://badge.fury.io/js/example-assemble-anchors.png)](http://badge.fury.io/js/example-assemble-anchors)
 2 | 
 3 | > Usage examples for assemble-contrib-anchors, an Assemble plugin for generating a HTML Table of Contents
 4 | 
 5 | ## Before
 6 | 
 7 | ```html
 8 | <h1 id="glyphicons">Glyphicons</h1>
 9 | ```
10 | 
11 | ## After
12 | 
13 | ```html
14 | <h1 id="glyphicons">Glyphicons
15 |   <a name="glyphicons" class="anchor" href="#glyphicons">
16 |     <span class="glyphicon glyphicon-link"></span>
17 |   </a>
18 | </h1>
19 | ```
20 | 
21 | Currently the plugin adds [Bootstrap](http://getbootstrap.com/components/#glyphicons) glyphicon classes. If you want to use different classes, find a bug, or have a feature request, [plesae create an issue](https://github.com/assemble/assemble-contrib-anchors/issues/new)
22 | 
23 | 
24 | ## Example
25 | 
26 | [![image](https://f.cloud.github.com/assets/383994/1511486/c2414c4e-4aaf-11e3-9c16-30f2993ae2d7.png)](http://assemble.github.io/example-assemble-anchors/components.html#glyphicons)
27 | 
28 | 
29 | ## Quick start
30 | 
31 | The following quick start options are available:
32 | 
33 | * Install with [Bower](http://bower.io): `bower install example-assemble-anchors`.
34 | * Clone the repo: `git clone https://github.com/assemble/example-assemble-anchors.git`.
35 | * [Download the latest release](https://github.com/assemble/example-assemble-anchors/archive/master.zip).
36 | 
37 | 
38 | ## Contributing
39 | 
40 | Please read through the [contributing guidelines](CONTRIBUTING.md). In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [grunt](http://gruntjs.com/).
41 | 
42 | Editor preferences are available in the [editor config](.editorconfig) for easy use in common text editors. Read more and download plugins at [http://editorconfig.org](http://editorconfig.org).
43 | 
44 | ## Release History
45 |  * 2013   v0.1.0   First commit
46 | 
47 | ## License
48 | Copyright (c) 2013 Brian Woodward
49 | Licensed under the [MIT license](LICENSE-MIT).
50 | 
51 | 
52 | ***
53 | 
54 | Project created by [Brian Woodward](https://github.com/doowb).
55 | 
56 | _This file was generated on Sun Nov 10 2013 22:27:53._
57 | 


--------------------------------------------------------------------------------
/templates/includes/nav-javascript.hbs:
--------------------------------------------------------------------------------
 1 | <li>
 2 |   <a href="#js-overview">Overview</a>
 3 |   <ul class="nav">
 4 |     <li><a href="#js-individual-compiled">Individual or compiled</a></li>
 5 |     <li><a href="#js-data-attrs">Data attributes</a></li>
 6 |     <li><a href="#js-programmatic-api">Programmatic API</a></li>
 7 |     <li><a href="#js-noconflict">No conflict</a></li>
 8 |     <li><a href="#js-events">Events</a></li>
 9 |   </ul>
10 | </li>
11 | <li><a href="#transitions">Transitions</a></li>
12 | <li>
13 |   <a href="#modals">Modal</a>
14 |   <ul class="nav">
15 |     <li><a href="#modals-examples">Examples</a></li>
16 |     <li><a href="#modals-usage">Usage</a></li>
17 |   </ul>
18 | </li>
19 | <li>
20 |   <a href="#dropdowns">Dropdown</a>
21 |   <ul class="nav">
22 |     <li><a href="#dropdowns-examples">Examples</a></li>
23 |     <li><a href="#dropdowns-usage">Usage</a></li>
24 |   </ul>
25 | </li>
26 | <li>
27 |   <a href="#scrollspy">Scrollspy</a>
28 |   <ul class="nav">
29 |     <li><a href="#scrollspy-examples">Examples</a></li>
30 |     <li><a href="#scrollspy-usage">Usage</a></li>
31 |   </ul>
32 | </li>
33 | <li>
34 |   <a href="#tabs">Tab</a>
35 |   <ul class="nav">
36 |     <li><a href="#taexamples">Examples</a></li>
37 |     <li><a href="#tausage">Usage</a></li>
38 |   </ul>
39 | </li>
40 | <li>
41 |   <a href="#tooltips">Tooltip</a>
42 |   <ul class="nav">
43 |     <li><a href="#tooltips-examples">Examples</a></li>
44 |     <li><a href="#tooltips-usage">Usage</a></li>
45 |   </ul>
46 | </li>
47 | <li>
48 |   <a href="#popovers">Popover</a>
49 |   <ul class="nav">
50 |     <li><a href="#popovers-examples">Examples</a></li>
51 |     <li><a href="#popovers-usage">Usage</a></li>
52 |   </ul>
53 | </li>
54 | <li>
55 |   <a href="#alerts">Alert</a>
56 |   <ul class="nav">
57 |     <li><a href="#alerts-examples">Examples</a></li>
58 |     <li><a href="#alerts-usage">Usage</a></li>
59 |   </ul>
60 | </li>
61 | <li>
62 |   <a href="#buttons">Button</a>
63 |   <ul class="nav">
64 |     <li><a href="#buttons-examples">Examples</a></li>
65 |     <li><a href="#buttons-usage">Usage</a></li>
66 |   </ul>
67 | </li>
68 | <li>
69 |   <a href="#collapse">Collapse</a>
70 |   <ul class="nav">
71 |     <li><a href="#collapse-examples">Examples</a></li>
72 |     <li><a href="#collapse-usage">Usage</a></li>
73 |   </ul>
74 | </li>
75 | <li>
76 |   <a href="#carousel">Carousel</a>
77 |   <ul class="nav">
78 |     <li><a href="#carousel-examples">Examples</a></li>
79 |     <li><a href="#carousel-usage">Usage</a></li>
80 |   </ul>
81 | </li>
82 | <li>
83 |   <a href="#affix">Affix</a>
84 |   <ul class="nav">
85 |     <li><a href="#affix-examples">Examples</a></li>
86 |     <li><a href="#affix-usage">Usage</a></li>
87 |   </ul>
88 | </li>
89 | 


--------------------------------------------------------------------------------
/templates/layouts/default.hbs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     {{> head }}
 5 |   </head>
 6 |   <body>
 7 |     <a class="sr-only" href="#content">Skip to main content</a>
 8 | 
 9 |     <!-- Docs master nav -->
10 |     {{> nav-main }}
11 | 
12 |     <!-- Header -->
13 |     <div class="docs-header" id="content">
14 |       <div class="container">
15 |         <h1>{{ title }}</h1>
16 |         <p>{{ lead }}</p>
17 |         {{> ads }}
18 |       </div>
19 |     </div>
20 | 
21 |     <!-- Callout for the old docs link -->
22 |     {{> banner }}
23 | 
24 |     <div class="container docs-container">
25 |       <div class="row">
26 |         <div class="col-md-3">
27 |           <div class="sidebar hidden-print" role="complementary">
28 |             <ul class="nav sidenav">
29 |               {{#is slug "getting-started" }}
30 |                 {{> nav-getting-started }}
31 |               {{/is}}
32 |               {{#is slug "css" }}
33 |                 {{> nav-css }}
34 |               {{/is}}
35 |               {{#is slug "components" }}
36 |                 {{> nav-components }}
37 |               {{/is}}
38 |               {{#is slug "js" }}
39 |                 {{> nav-javascript }}
40 |               {{/is}}
41 |               {{#is slug "customize" }}
42 |                 {{> nav-customize }}
43 |               {{/is}}
44 |               {{#is slug "about" }}
45 |                 {{> nav-about }}
46 |               {{/is}}
47 |             </ul>
48 |           </div>
49 |         </div>
50 |         <div class="col-md-9" role="main">
51 |           {{> body }}
52 |         </div>
53 |       </div>
54 |     </div>
55 | 
56 |     <!-- Footer -->
57 |     <footer class="footer" role="contentinfo">
58 |       <div class="container">
59 |         {{> social-buttons }}
60 |         <p><a href="{{site.repo}}">{{site.title}}</a> was created by <a href="https://twitter.com/jonschlinkert" target="_blank">Jon Schlinkert</a> and <a href="http://twitter.com/doowb" target="_blank">Brian Woodward</a>.</p>
61 |         <p>Documentation source code released under the <a href="{{site.license.url}}" target="_blank">{{site.license.type}}</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
62 |         <ul class="footer-links">
63 |           <li>Currently v{{pkg 'version'}}</li>
64 |           <li class="muted">&middot;</li>
65 |           <li><a href="{{ site.blog }}">Blog</a></li>
66 |           <li class="muted">&middot;</li>
67 |           <li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
68 |           <li class="muted">&middot;</li>
69 |           <li><a href="{{ site.repo }}/blob/master/CHANGELOG.md">Changelog</a></li>
70 |           <li class="muted">&middot;</li>
71 |           <li><a href="{{ site.repo }}/releases">Releases</a></li>
72 |         </ul>
73 |       </div>
74 |     </footer>
75 | 
76 |     <!-- JavaScript and analytics only. -->
77 |     {{> footer }}
78 | 
79 |   </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/templates/includes/nav-css.hbs:
--------------------------------------------------------------------------------
  1 | <li>
  2 |   <a href="#overview">Overview</a>
  3 |   <ul class="nav">
  4 |     <li><a href="#overview-doctype">HTML5 doctype</a></li>
  5 |     <li><a href="#overview-mobile">Mobile first</a></li>
  6 |     <li><a href="#overview-responsive-images">Responsive images</a></li>
  7 |     <li><a href="#overview-type-links">Typography and links</a></li>
  8 |     <li><a href="#overview-normalize">Normalize</a></li>
  9 |     <li><a href="#overview-container">Containers</a></li>
 10 |   </ul>
 11 | </li>
 12 | <li>
 13 |   <a href="#grid">Grid system</a>
 14 |   <ul class="nav">
 15 |     <li><a href="#grid-intro">Introduction</a></li>
 16 |     <li><a href="#grid-media-queries">Media queries</a></li>
 17 |     <li><a href="#grid-options">Grid options</a></li>
 18 |     <li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
 19 |     <li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
 20 |     <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
 21 |     <li><a href="#grid-responsive-resets">Responsive column resets</a></li>
 22 |     <li><a href="#grid-offsetting">Offsetting columns</a></li>
 23 |     <li><a href="#grid-nesting">Nesting columns</a></li>
 24 |     <li><a href="#grid-column-ordering">Column ordering</a></li>
 25 |     <li><a href="#grid-less">LESS mixins and variables</a></li>
 26 |   </ul>
 27 | </li>
 28 | <li>
 29 |   <a href="#type">Typography</a>
 30 |   <ul class="nav">
 31 |     <li><a href="#type-headings">Headings</a></li>
 32 |     <li><a href="#type-body-copy">Body copy</a></li>
 33 |     <li><a href="#type-emphasis">Emphasis</a></li>
 34 |     <li><a href="#type-abbreviations">Abbreviations</a></li>
 35 |     <li><a href="#type-addresses">Addresses</a></li>
 36 |     <li><a href="#type-blockquotes">Blockquotes</a></li>
 37 |     <li><a href="#type-lists">Lists</a></li>
 38 |   </ul>
 39 | </li>
 40 | <li><a href="#code">Code</a></li>
 41 | <li>
 42 |   <a href="#tables">Tables</a>
 43 |   <ul class="nav">
 44 |     <li><a href="#tables-example">Basic example</a></li>
 45 |     <li><a href="#tables-striped">Striped rows</a></li>
 46 |     <li><a href="#tables-bordered">Bordered table</a></li>
 47 |     <li><a href="#tables-hover-rows">Hover rows</a></li>
 48 |     <li><a href="#tables-condensed">Condensed table</a></li>
 49 |     <li><a href="#tables-contextual-classes">Contextual classes</a></li>
 50 |     <li><a href="#tables-responsive">Responsive tables</a></li>
 51 |   </ul>
 52 | </li>
 53 | <li>
 54 |   <a href="#forms">Forms</a>
 55 |   <ul class="nav">
 56 |     <li><a href="#forms-example">Basic example</a></li>
 57 |     <li><a href="#forms-inline">Inline form</a></li>
 58 |     <li><a href="#forms-horizontal">Horizontal form</a></li>
 59 |     <li><a href="#forms-controls">Supported controls</a></li>
 60 |     <li><a href="#forms-controls-static">Static control</a></li>
 61 |     <li><a href="#forms-control-states">Control states</a></li>
 62 |     <li><a href="#forms-control-sizes">Control sizing</a></li>
 63 |     <li><a href="#forms-help-text">Help text</a></li>
 64 |   </ul>
 65 | </li>
 66 | <li>
 67 |   <a href="#buttons">Buttons</a>
 68 |   <ul class="nav">
 69 |     <li><a href="#buttons-options">Options</a></li>
 70 |     <li><a href="#buttons-sizes">Sizes</a></li>
 71 |     <li><a href="#buttons-active">Active state</a></li>
 72 |     <li><a href="#buttons-disabled">Disabled state</a></li>
 73 |     <li><a href="#buttons-tags">Button tags</a></li>
 74 |   </ul>
 75 | </li>
 76 | <li>
 77 |   <a href="#images">Images</a>
 78 | </li>
 79 | <li>
 80 |   <a href="#helper-classes">Helper classes</a>
 81 |   <ul class="nav">
 82 |     <li><a href="#helper-classes-close">Close icon</a></li>
 83 |     <li><a href="#helper-classes-carets">Carets</a></li>
 84 |     <li><a href="#helper-classes-floats">Quick floats</a></li>
 85 |     <li><a href="#helper-classes-center">Center content blocks</a></li>
 86 |     <li><a href="#helper-classes-clearfix">Clearfix</a></li>
 87 |     <li><a href="#helper-classes-show-hide">Showing and hiding content</a></li>
 88 |     <li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
 89 |     <li><a href="#helper-classes-image-replacement">Image replacement</a></li>
 90 |   </ul>
 91 | </li>
 92 | <li>
 93 |   <a href="#responsive-utilities">Responsive utilities</a>
 94 |   <ul class="nav">
 95 |     <li><a href="#responsive-utilities-classes">Available classes</a></li>
 96 |     <li><a href="#responsive-utilities-print">Print classes</a></li>
 97 |     <li><a href="#responsive-utilities-tests">Test cases</a></li>
 98 |   </ul>
 99 | </li>
100 | 


--------------------------------------------------------------------------------
/templates/about.hbs:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default.hbs
 3 | title: About
 4 | slug: about
 5 | lead: "Learn about the history of Bootstrap, meet the core team, and check out the ever-growing community resources."
 6 | ---
 7 | {{title}}
 8 | 
 9 | <!-- History
10 | ================================================== -->
11 | <div class="docs-section">
12 |   <div class="page-header">
13 |     <h1 id="history">History</h1>
14 |   </div>
15 |   <p class="lead">Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p>
16 |   <p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p>
17 |   <p>Originally <a href="https://dev.twitter.com/blog/bootstrap-twitter">released</a> on <a href="https://twitter.com/mdo/statuses/104620039650557952"><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
18 | </div>
19 | 
20 | 
21 | <!-- Team
22 | ================================================== -->
23 | <div class="docs-section">
24 |   <div class="page-header">
25 |     <h1 id="team">Core team</h1>
26 |   </div>
27 |   <p class="lead">Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
28 |   <div class="list-group team">
29 |     <div class="list-group-item">
30 |       <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=jonschlinkert&amp;type=follow"></iframe>
31 |       <a class="team-member" href="https://github.com/jonschlinkert">
32 |         <img src="http://www.gravatar.com/avatar/1bba28be5506009e85fb9dde1dd66535" alt="@jonschlinkert">
33 |         <strong>Jon Schlinkert</strong> <small>@jonschlinkert</small>
34 |       </a>
35 |     </div>
36 |   </div>
37 |   <p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
38 | </div>
39 | 
40 | 
41 | <!-- Community
42 | ================================================== -->
43 | <div class="docs-section">
44 |   <div class="page-header">
45 |     <h1 id="community">Community</h1>
46 |   </div>
47 |   <p class="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
48 |   <ul>
49 |     <li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
50 |     <li>Have a question that's not a feature request or bug report? <a href="http://groups.google.com/group/twitter-bootstrap">Ask on the mailing list.</a></li>
51 |     <li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
52 |     <li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
53 |   </ul>
54 |   <p>You can also follow <a href="https://twitter.com/twbootstrap">@twbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
55 | </div>
56 | 
57 | 
58 | <!-- Translations
59 | ================================================== -->
60 | <div class="docs-section">
61 |   <div class="page-header">
62 |     <h1 id="translations">Translations</h1>
63 |   </div>
64 |   <p class="lead">Community members have translated Bootstrap's documentation into various langauges. None are officially supported and may not always be up to date.</p>
65 |   <ul>
66 |     <li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
67 |     <li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>
68 |     <li><a href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li>
69 |   </ul>
70 |   <p>Have another language to add, or perhaps a different or better translation? Let us know by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a>.</p>
71 | </div>
72 | 


--------------------------------------------------------------------------------
/templates/includes/nav-components.hbs:
--------------------------------------------------------------------------------
  1 | <li>
  2 |   <a href="#glyphicons">Glyphicons</a>
  3 |   <ul class="nav">
  4 |     <li><a href="#glyphicons-glyphs">Available glyphs</a></li>
  5 |     <li><a href="#glyphicons-how-to-use">How to use</a></li>
  6 |     <li><a href="#glyphicons-examples">Examples</a></li>
  7 |   </ul>
  8 | </li>
  9 | <li>
 10 |   <a href="#dropdowns">Dropdowns</a>
 11 |   <ul class="nav">
 12 |     <li><a href="#dropdowns-example">Example</a></li>
 13 |     <li><a href="#dropdowns-alignment">Alignment options</a></li>
 14 |     <li><a href="#dropdowns-headers">Headers</a></li>
 15 |     <li><a href="#dropdowns-disabled">Disabled menu items</a></li>
 16 |   </ul>
 17 | </li>
 18 | <li>
 19 |   <a href="#btn-groups">Button groups</a>
 20 |   <ul class="nav">
 21 |     <li><a href="#btn-groups-single">Basic example</a></li>
 22 |     <li><a href="#btn-groups-toolbar">Button toolbar</a></li>
 23 |     <li><a href="#btn-groups-sizing">Sizing</a></li>
 24 |     <li><a href="#btn-groups-nested">Nesting</a></li>
 25 |     <li><a href="#btn-groups-vertical">Vertical variation</a></li>
 26 |     <li><a href="#btn-groups-justified">Justified link variation</a></li>
 27 |   </ul>
 28 | </li>
 29 | <li>
 30 |   <a href="#btn-dropdowns">Button dropdowns</a>
 31 |   <ul class="nav">
 32 |     <li><a href="#btn-dropdowns-single">Single button dropdowns</a></li>
 33 |     <li><a href="#btn-dropdowns-split">Split button dropdowns</a></li>
 34 |     <li><a href="#btn-dropdowns-sizing">Sizing</a></li>
 35 |     <li><a href="#btn-dropdowns-dropup">Dropup variation</a></li>
 36 |   </ul>
 37 | </li>
 38 | <li>
 39 |   <a href="#input-groups">Input groups</a>
 40 |   <ul class="nav">
 41 |     <li><a href="#input-groups-basic">Basic example</a></li>
 42 |     <li><a href="#input-groups-sizing">Sizing</a></li>
 43 |     <li><a href="#input-groups-checkboxes-radios">Checkbox and radios addons</a></li>
 44 |     <li><a href="#input-groups-buttons">Button addons</a></li>
 45 |     <li><a href="#input-groups-buttons-dropdowns">Buttons with dropdowns</a></li>
 46 |     <li><a href="#input-groups-buttons-segmented">Segmented buttons</a></li>
 47 |   </ul>
 48 | </li>
 49 | <li>
 50 |   <a href="#nav">Navs</a>
 51 |   <ul class="nav">
 52 |     <li><a href="#nav-tabs">Tabs</a></li>
 53 |     <li><a href="#nav-pills">Pills</a></li>
 54 |     <li><a href="#nav-justified">Justified nav</a></li>
 55 |     <li><a href="#nav-disabled-links">Disabled links</a></li>
 56 |     <li><a href="#nav-dropdowns">Using dropdowns</a></li>
 57 |   </ul>
 58 | </li>
 59 | <li>
 60 |   <a href="#navbar">Navbar</a>
 61 |   <ul class="nav">
 62 |     <li><a href="#navbar-default">Default navbar</a></li>
 63 |     <li><a href="#navbar-forms">Forms</a></li>
 64 |     <li><a href="#navbar-buttons">Buttons</a></li>
 65 |     <li><a href="#navbar-text">Text</a></li>
 66 |     <li><a href="#navbar-links">Non-nav links</a></li>
 67 |     <li><a href="#navbar-component-alignment">Component alignment</a></li>
 68 |     <li><a href="#navbar-fixed-top">Fixed to top</a></li>
 69 |     <li><a href="#navbar-fixed-bottom">Fixed to bottom</a></li>
 70 |     <li><a href="#navbar-static-top">Static top</a></li>
 71 |     <li><a href="#navbar-inverted">Inverted navbar</a></li>
 72 |   </ul>
 73 | </li>
 74 | <li><a href="#breadcrumbs">Breadcrumbs</a></li>
 75 | <li>
 76 |   <a href="#pagination">Pagination</a>
 77 |   <ul class="nav">
 78 |     <li><a href="#pagination-default">Default pagination</a></li>
 79 |     <li><a href="#pagination-pager">Pager</a></li>
 80 |   </ul>
 81 | </li>
 82 | <li><a href="#labels">Labels</a></li>
 83 | <li><a href="#badges">Badges</a></li>
 84 | <li><a href="#jumbotron">Jumbotron</a></li>
 85 | <li><a href="#page-header">Page header</a></li>
 86 | <li>
 87 |   <a href="#thumbnails">Thumbnails</a>
 88 |   <ul class="nav">
 89 |     <li><a href="#thumbnails-default">Default example</a></li>
 90 |     <li><a href="#thumbnails-custom-content">Custom content</a></li>
 91 |   </ul>
 92 | </li>
 93 | <li>
 94 |   <a href="#alerts">Alerts</a>
 95 |   <ul class="nav">
 96 |     <li><a href="#alerts-examples">Examples</a></li>
 97 |     <li><a href="#alerts-dismissable">Dismissable alerts</a></li>
 98 |     <li><a href="#alerts-links">Links in alerts</a></li>
 99 |   </ul>
100 | </li>
101 | <li>
102 |   <a href="#progress">Progress bars</a>
103 |   <ul class="nav">
104 |     <li><a href="#progress-basic">Basic example</a></li>
105 |     <li><a href="#progress-alternatives">Contextual alternatives</a></li>
106 |     <li><a href="#progress-striped">Striped</a></li>
107 |     <li><a href="#progress-animated">Animated</a></li>
108 |     <li><a href="#progress-stacked">Stacked</a></li>
109 |   </ul>
110 | </li>
111 | <li>
112 |   <a href="#media">Media object</a>
113 |   <ul class="nav">
114 |     <li><a href="#media-default">Default media</a></li>
115 |     <li><a href="#media-list">Media list</a></li>
116 |   </ul>
117 | </li>
118 | <li>
119 |   <a href="#list-group">List group</a>
120 |   <ul class="nav">
121 |     <li><a href="#list-group-basic">Basic example</a></li>
122 |     <li><a href="#list-group-badges">Badges</a></li>
123 |     <li><a href="#list-group-linked">Linked items</a></li>
124 |     <li><a href="#list-group-custom-content">Custom content</a></li>
125 |   </ul>
126 | </li>
127 | <li>
128 |   <a href="#panels">Panels</a>
129 |   <ul class="nav">
130 |     <li><a href="#panels-basic">Basic example</a></li>
131 |     <li><a href="#panels-heading">Panel with heading</a></li>
132 |     <li><a href="#panels-alternatives">Contextual alternatives</a></li>
133 |     <li><a href="#panels-tables">With tables</a>
134 |     <li><a href="#panels-list-group">With list groups</a>
135 |   </ul>
136 | </li>
137 | <li><a href="#wells">Wells</a></li>
138 | 


--------------------------------------------------------------------------------
/templates/getting-started.hbs:
--------------------------------------------------------------------------------
   1 | ---
   2 | layout: default.hbs
   3 | title: Getting started
   4 | slug: getting-started
   5 | lead: "An overview of Bootstrap, how to download and use, basic templates and examples, and more."
   6 | ---
   7 | 
   8 | 
   9 |   <!-- Getting started
  10 |   ================================================== -->
  11 |   <div class="docs-section">
  12 |     <div class="page-header">
  13 |       <h1 id="download">Download Bootstrap</h1>
  14 |     </div>
  15 |     <p class="lead">Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
  16 | 
  17 |     <h3 id="download-compiled">Compiled CSS, JS, and fonts</h3>
  18 |     <p>The fastest way to get Bootstrap is to download the precompiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source code files are included.</p>
  19 |     <p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);" role="button">Download precompiled Bootstrap</a></p>
  20 | 
  21 |     <h3 id="download-additional">Additional downloads</h3>
  22 |     <div class="docs-dl-options">
  23 |       <h4>
  24 |         <a href="{{ site.download_source }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source code</a>
  25 |       </h4>
  26 |       <p>Get the latest Bootstrap LESS and JavaScript source code by downloading it directly from GitHub.</p>
  27 |       <h4>
  28 |         <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">Clone or fork via GitHub</a>
  29 |       </h4>
  30 |       <p>Visit us on GitHub to clone or fork the Bootstrap project.</p>
  31 |       <h4>
  32 |         Install with <a href="http://bower.io">Bower</a>
  33 |       </h4>
  34 |       <p>Install and manage Bootstrap's styles, JavaScript, and documentation using <a href="http://bower.io">Bower</a>.</p>
  35 | 
  36 | {{#markdown}}
  37 | ```bash$ bower install bootstrap```
  38 | {{/markdown}}
  39 | 
  40 |     </div>
  41 | 
  42 |     <h3 id="download-cdn">Bootstrap CDN</h3>
  43 |     <p>The folks over at <a href="http://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p>
  44 | 
  45 | {{#markdown}}
  46 | ```html
  47 | <!-- Latest compiled and minified CSS -->
  48 | <link rel="stylesheet" href="{{ site.cdn_css }}">
  49 | 
  50 | <!-- Optional theme -->
  51 | <link rel="stylesheet" href="{{ site.cdn_theme_css }}">
  52 | 
  53 | <!-- Latest compiled and minified JavaScript -->
  54 | <script src="{{ site.cdn_js }}"></script>
  55 | ```
  56 | {{/markdown}}
  57 | 
  58 | 
  59 |     <div class="callout callout-warning" id="callout-less-compilation">
  60 |       <h4>Compiling Bootstrap's LESS files</h4>
  61 |       <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support <a href="http://twitter.github.io/recess/">Recess</a>, which is Twitter's CSS hinter based on <a href="http://lesscss.org">less.js</a>.</p>
  62 |     </div>
  63 |   </div>
  64 | 
  65 | 
  66 |   <!-- File structure
  67 |   ================================================== -->
  68 |   <div class="docs-section">
  69 |     <div class="page-header">
  70 |       <h1 id="whats-included">What's included</h1>
  71 |     </div>
  72 |     <p class="lead">Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
  73 |     <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p>
  74 | 
  75 | <!-- NOTE: This info is intentionally duplicated in the README.
  76 | Copy any changes made here over to the README too. -->
  77 | 
  78 | {{#markdown}}
  79 | ```bash
  80 | bootstrap/
  81 | ├── css/
  82 | │   ├── bootstrap.css
  83 | │   ├── bootstrap.min.css
  84 | │   ├── bootstrap-theme.css
  85 | │   └── bootstrap-theme.min.css
  86 | ├── js/
  87 | │   ├── bootstrap.js
  88 | │   └── bootstrap.min.js
  89 | └── fonts/
  90 |     ├── glyphicons-halflings-regular.eot
  91 |     ├── glyphicons-halflings-regular.svg
  92 |     ├── glyphicons-halflings-regular.ttf
  93 |     └── glyphicons-halflings-regular.woff
  94 | ```
  95 | {{/markdown}}
  96 | 
  97 | 
  98 |     <p>This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>
  99 |     <div class="callout callout-danger" id="jquery-required">
 100 |       <h4>jQuery required</h4>
 101 |       <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
 102 |     </div>
 103 |   </div>
 104 | 
 105 | 
 106 |   <!-- Template
 107 |   ================================================== -->
 108 |   <div class="docs-section">
 109 |     <div class="page-header">
 110 |       <h1 id="template">Basic template</h1>
 111 |     </div>
 112 |     <p class="lead">Start with this basic HTML template, or modify <a href="../getting-started#examples">these examples</a>. We hope you'll customize our templates and examples, adapting them to suit your needs.</p>
 113 | 
 114 |     <p>Copy the HTML below to begin working with a minimal Bootstrap document.</p>
 115 | 
 116 | {{#markdown}}
 117 | ```html
 118 | <!DOCTYPE html>
 119 | <html>
 120 |   <head>
 121 |     <title>Bootstrap 101 Template</title>
 122 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 123 |     <!-- Bootstrap -->
 124 |     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 125 | 
 126 |     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 127 |     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 128 |     <!--[if lt IE 9]>
 129 |       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 130 |       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 131 |     <![endif]-->
 132 |   </head>
 133 |   <body>
 134 |     <h1>Hello, world!</h1>
 135 | 
 136 |     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 137 |     <script src="https://code.jquery.com/jquery.js"></script>
 138 |     <!-- Include all compiled plugins (below), or include individual files as needed -->
 139 |     <script src="js/bootstrap.min.js"></script>
 140 |   </body>
 141 | </html>
 142 | ```
 143 | {{/markdown}}
 144 | 
 145 |   </div>
 146 | 
 147 | 
 148 |   <!-- Template
 149 |   ================================================== -->
 150 |   <div class="docs-section">
 151 |     <div class="page-header">
 152 |       <h1 id="examples">Examples</h1>
 153 |     </div>
 154 |     <p class="lead">Build on the basic template above with Bootstrap's many components. See also <a href="#customizing">Customizing Bootstrap</a> for tips on maintaining your own Bootstrap variants.</p>
 155 | 
 156 |     <div class="row examples">
 157 |       <div class="col-xs-6 col-md-4">
 158 |         <a class="thumbnail" href="../examples/starter-template/">
 159 |           <img src="../examples/screenshots/starter-template.jpg" alt="">
 160 |         </a>
 161 |         <h4>Starter template</h4>
 162 |         <p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p>
 163 |       </div>
 164 |       <div class="col-xs-6 col-md-4">
 165 |         <a class="thumbnail" href="../examples/grid/">
 166 |           <img src="../examples/screenshots/grid.jpg" alt="">
 167 |         </a>
 168 |         <h4>Grids</h4>
 169 |         <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
 170 |       </div>
 171 |       <div class="clearfix visible-xs"></div>
 172 | 
 173 |       <div class="col-xs-6 col-md-4">
 174 |         <a class="thumbnail" href="../examples/jumbotron/">
 175 |           <img src="../examples/screenshots/jumbotron.jpg" alt="">
 176 |         </a>
 177 |         <h4>Jumbotron</h4>
 178 |         <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
 179 |       </div>
 180 |       <div class="col-xs-6 col-md-4">
 181 |         <a class="thumbnail" href="../examples/jumbotron-narrow/">
 182 |           <img src="../examples/screenshots/jumbotron-narrow.jpg" alt="">
 183 |         </a>
 184 |         <h4>Narrow jumbotron</h4>
 185 |         <p>Build a more custom page by narrowing the default container and jumbotron.</p>
 186 |       </div>
 187 |       <div class="clearfix visible-xs"></div>
 188 | 
 189 |       <div class="col-xs-6 col-md-4">
 190 |         <a class="thumbnail" href="../examples/navbar/">
 191 |           <img src="../examples/screenshots/navbar.jpg" alt="">
 192 |         </a>
 193 |         <h4>Navbar</h4>
 194 |         <p>Super basic template that includes the navbar along with some additional content.</p>
 195 |       </div>
 196 |       <div class="col-xs-6 col-md-4">
 197 |         <a class="thumbnail" href="../examples/navbar-static-top/">
 198 |           <img src="../examples/screenshots/navbar-static.jpg" alt="">
 199 |         </a>
 200 |         <h4>Static top navbar</h4>
 201 |         <p>Super basic template with a static top navbar along with some additional content.</p>
 202 |       </div>
 203 |       <div class="clearfix visible-xs"></div>
 204 | 
 205 |       <div class="col-xs-6 col-md-4">
 206 |         <a class="thumbnail" href="../examples/navbar-fixed-top/">
 207 |           <img src="../examples/screenshots/navbar-fixed.jpg" alt="">
 208 |         </a>
 209 |         <h4>Fixed navbar</h4>
 210 |         <p>Super basic template with a fixed top navbar along with some additional content.</p>
 211 |       </div>
 212 |       <div class="col-xs-6 col-md-4">
 213 |         <a class="thumbnail" href="../examples/signin/">
 214 |           <img src="../examples/screenshots/sign-in.jpg" alt="">
 215 |         </a>
 216 |         <h4>Sign-in page</h4>
 217 |         <p>Custom form layout and design for a simple sign in form.</p>
 218 |       </div>
 219 |       <div class="clearfix visible-xs"></div>
 220 | 
 221 |       <div class="col-xs-6 col-md-4">
 222 |         <a class="thumbnail" href="../examples/sticky-footer/">
 223 |           <img src="../examples/screenshots/sticky-footer.jpg" alt="">
 224 |         </a>
 225 |         <h4>Sticky footer</h4>
 226 |         <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
 227 |       </div>
 228 |       <div class="col-xs-6 col-md-4">
 229 |         <a class="thumbnail" href="../examples/sticky-footer-navbar/">
 230 |           <img src="../examples/screenshots/sticky-footer-navbar.jpg" alt="">
 231 |         </a>
 232 |         <h4>Sticky footer with navbar</h4>
 233 |         <p>Attach a footer to the bottom of the viewport with a fixed navbar at the top.</p>
 234 |       </div>
 235 |       <div class="clearfix visible-xs"></div>
 236 | 
 237 |       <div class="col-xs-6 col-md-4">
 238 |         <a class="thumbnail" href="../examples/justified-nav/">
 239 |           <img src="../examples/screenshots/justified-nav.jpg" alt="">
 240 |         </a>
 241 |         <h4>Justified nav</h4>
 242 |         <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too WebKit friendly.</a></p>
 243 |       </div>
 244 |       <div class="col-xs-6 col-md-4">
 245 |         <a class="thumbnail" href="../examples/offcanvas/">
 246 |           <img src="../examples/screenshots/offcanvas.jpg" alt="">
 247 |         </a>
 248 |         <h4>Offcanvas</h4>
 249 |         <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
 250 |       </div>
 251 |       <div class="clearfix visible-xs"></div>
 252 | 
 253 |       <div class="col-xs-6 col-md-4">
 254 |         <a class="thumbnail" href="../examples/carousel/">
 255 |           <img src="../examples/screenshots/carousel.jpg" alt="">
 256 |         </a>
 257 |         <h4>Carousel</h4>
 258 |         <p>Customize the navbar and carousel, then add some new components.</p>
 259 |       </div>
 260 |       <div class="col-xs-6 col-md-4">
 261 |         <a class="thumbnail" href="../examples/non-responsive/">
 262 |           <img src="../examples/screenshots/non-responsive.jpg" alt="">
 263 |         </a>
 264 |         <h4>Non-responsive Bootstrap</h4>
 265 |         <p>Easily disable the responsiveness of Bootstrap <a href="../getting-started/#disable-responsive">per our docs</a>.</p>
 266 |       </div>
 267 |       <div class="clearfix visible-xs"></div>
 268 | 
 269 |       <div class="col-xs-6 col-md-4">
 270 |         <a class="thumbnail" href="../examples/theme/">
 271 |           <img src="../examples/screenshots/theme.jpg" alt="">
 272 |         </a>
 273 |         <h4>Bootstrap theme</h4>
 274 |         <p>Load the optional Bootstrap theme for a visually enhanced experience.</p>
 275 |       </div>
 276 |     </div>
 277 | 
 278 |   </div>
 279 | 
 280 | 
 281 |   <!-- Template
 282 |   ================================================== -->
 283 |   <div class="docs-section">
 284 |     <div class="page-header">
 285 |       <h1 id="disable-responsive">Disabling responsiveness</h1>
 286 |     </div>
 287 |     <p class="lead">Bootstrap automatically adapts your pages for various screen sizes.
 288 |       Here's how to disable this feature so your page works like in <a href="../examples/non-responsive/">this non-responsive example</a>.</p>
 289 | 
 290 |     <h3>Steps to disable page responsiveness</h3>
 291 |     <ol>
 292 |       <li>Omit the viewport <code>&lt;meta&gt;</code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li>
 293 |       <li>Override the <code>width</code> on the <code>.container</code> for each grid tier with a single width, for example <code>width: 970px !important;</code> Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the <code>!important</code> with media queries or some selector-fu.</li>
 294 |       <li>If using navbars, remove all navbar collapsing and expanding behavior.</li>
 295 |       <li>For grid layouts, use <code>.col-xs-*</code> classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.</li>
 296 |     </ol>
 297 |     <p>You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed).
 298 |       This disables the "mobile site" aspects of Bootstrap.</p>
 299 | 
 300 |     <h3>Bootstrap template with responsiveness disabled</h3>
 301 |     <p>We've applied these steps to an example. Read its source code to see the specific changes implemented.</p>
 302 |     <p>
 303 |       <a href="../examples/non-responsive/" class="btn btn-primary">View non-responsive example</a>
 304 |     </p>
 305 |   </div>
 306 | 
 307 | 
 308 |   <!-- Migration
 309 |   ================================================== -->
 310 |   <div class="docs-section">
 311 |     <div class="page-header">
 312 |       <h1 id="migration">Migrating from 2.x to 3.0</h1>
 313 |     </div>
 314 |     <p class="lead">Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see <a href="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">what's new</a> in the v3.0 release announcement.</p>
 315 | 
 316 |     <h2 id="migration-classes">Major class changes</h2>
 317 |     <p>This table shows the style changes between v2.x and v3.0.</p>
 318 |     <div class="table-responsive">
 319 |       <table class="table table-bordered table-striped">
 320 |         <thead>
 321 |           <tr>
 322 |             <th>Bootstrap 2.x</th>
 323 |             <th>Bootstrap 3.0</th>
 324 |           </tr>
 325 |         </thead>
 326 |         <tbody>
 327 |           <tr>
 328 |             <td><code>.container-fluid</code></td>
 329 |             <td><code>.container</code></td>
 330 |           </tr>
 331 |           <tr>
 332 |             <td><code>.row-fluid</code></td>
 333 |             <td><code>.row</code></td>
 334 |           </tr>
 335 |           <tr>
 336 |             <td><code>.span*</code></td>
 337 |             <td><code>.col-md-*</code></td>
 338 |           </tr>
 339 |           <tr>
 340 |             <td><code>.offset*</code></td>
 341 |             <td><code>.col-md-offset-*</code></td>
 342 |           </tr>
 343 |           <tr>
 344 |             <td><code>.brand</code></td>
 345 |             <td><code>.navbar-brand</code></td>
 346 |           </tr>
 347 |           <tr>
 348 |             <td><code>.nav-collapse</code></td>
 349 |             <td><code>.navbar-collapse</code></td>
 350 |           </tr>
 351 |           <tr>
 352 |             <td><code>.nav-toggle</code></td>
 353 |             <td><code>.navbar-toggle</code></td>
 354 |           </tr>
 355 |           <tr>
 356 |             <td><code>.btn-navbar</code></td>
 357 |             <td><code>.navbar-btn</code></td>
 358 |           </tr>
 359 |           <tr>
 360 |             <td><code>.hero-unit</code></td>
 361 |             <td><code>.jumbotron</code></td>
 362 |           </tr>
 363 |           <tr>
 364 |             <td><code>.icon-*</code></td>
 365 |             <td><code>.glyphicon .glyphicon-*</code></td>
 366 |           </tr>
 367 |           <tr>
 368 |             <td><code>.btn</code></td>
 369 |             <td><code>.btn .btn-default</code></td>
 370 |           </tr>
 371 |           <tr>
 372 |             <td><code>.btn-mini</code></td>
 373 |             <td><code>.btn-xs</code></td>
 374 |           </tr>
 375 |           <tr>
 376 |             <td><code>.btn-small</code></td>
 377 |             <td><code>.btn-sm</code></td>
 378 |           </tr>
 379 |           <tr>
 380 |             <td><code>.btn-large</code></td>
 381 |             <td><code>.btn-lg</code></td>
 382 |           </tr>
 383 |           <tr>
 384 |             <td><code>.alert-error</code></td>
 385 |             <td><code>.alert-danger</code></td>
 386 |           </tr>
 387 |           <tr>
 388 |             <td><code>.visible-phone</code></td>
 389 |             <td><code>.visible-xs</code></td>
 390 |           </tr>
 391 |           <tr>
 392 |             <td><code>.visible-tablet</code></td>
 393 |             <td><code>.visible-sm</code></td>
 394 |           </tr>
 395 |           <tr>
 396 |             <td><code>.visible-desktop</code></td>
 397 |             <td><code>.visible-md</code></td>
 398 |           </tr>
 399 |           <tr>
 400 |             <td><code>.hidden-phone</code></td>
 401 |             <td><code>.hidden-xs</code></td>
 402 |           </tr>
 403 |           <tr>
 404 |             <td><code>.hidden-tablet</code></td>
 405 |             <td><code>.hidden-sm</code></td>
 406 |           </tr>
 407 |           <tr>
 408 |             <td><code>.hidden-desktop</code></td>
 409 |             <td><code>.hidden-md</code></td>
 410 |           </tr>
 411 |           <tr>
 412 |             <td><code>.input-small</code></td>
 413 |             <td><code>.input-sm</code></td>
 414 |           </tr>
 415 |           <tr>
 416 |             <td><code>.input-large</code></td>
 417 |             <td><code>.input-lg</code></td>
 418 |           </tr>
 419 |           <tr>
 420 |             <td><code>.control-group</code></td>
 421 |             <td><code>.form-group</code></td>
 422 |           </tr>
 423 |           <tr>
 424 |             <td><code>.checkbox.inline</code> <code>.radio.inline</code></td>
 425 |             <td><code>.checkbox-inline</code> <code>.radio-inline</code></td>
 426 |           </tr>
 427 |           <tr>
 428 |             <td><code>.input-prepend</code> <code>.input-append</code></td>
 429 |             <td><code>.input-group</code></td>
 430 |           </tr>
 431 |           <tr>
 432 |             <td><code>.add-on</code></td>
 433 |             <td><code>.input-group-addon</code></td>
 434 |           </tr>
 435 |           <tr>
 436 |             <td><code>.img-polaroid</code></td>
 437 |             <td><code>.img-thumbnail</code></td>
 438 |           </tr>
 439 |           <tr>
 440 |             <td><code>ul.unstyled</code></td>
 441 |             <td><code>.list-unstyled</code></td>
 442 |           </tr>
 443 |           <tr>
 444 |             <td><code>ul.inline</code></td>
 445 |             <td><code>.list-inline</code></td>
 446 |           </tr>
 447 |           <tr>
 448 |             <td><code>.muted</code></td>
 449 |             <td><code>.text-muted</code></td>
 450 |           </tr>
 451 |           <tr>
 452 |             <td><code>.text-error</code></td>
 453 |             <td><code>.text-danger</code></td>
 454 |           </tr>
 455 |           <tr>
 456 |             <td><code>.table .error</code></td>
 457 |             <td><code>.table .danger</code></td>
 458 |           </tr>
 459 |           <tr>
 460 |             <td><code>.bar</code></td>
 461 |             <td><code>.progress-bar</code></td>
 462 |           </tr>
 463 |           <tr>
 464 |             <td><code>.bar-*</code></td>
 465 |             <td><code>.progress-bar-*</code></td>
 466 |           </tr>
 467 |           <tr>
 468 |             <td><code>.accordion</code></td>
 469 |             <td><code>.panel-group</code></td>
 470 |           </tr>
 471 |           <tr>
 472 |             <td><code>.accordion-group</code></td>
 473 |             <td><code>.panel .panel-default</code></td>
 474 |           </tr>
 475 |           <tr>
 476 |             <td><code>.accordion-heading</code></td>
 477 |             <td><code>.panel-heading</code></td>
 478 |           </tr>
 479 |           <tr>
 480 |             <td><code>.accordion-body</code></td>
 481 |             <td><code>.panel-collapse</code></td>
 482 |           </tr>
 483 |           <tr>
 484 |             <td><code>.accordion-inner</code></td>
 485 |             <td><code>.panel-body</code></td>
 486 |           </tr>
 487 |           <tr>
 488 |             <td><code>.alert-error</code></td>
 489 |             <td><code>.alert-danger</code></td>
 490 |           </tr>
 491 |         </tbody>
 492 |       </table>
 493 |     </div><!-- /.table-responsive -->
 494 | 
 495 |     <h2 id="migration-new">What's new</h2>
 496 |     <p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p>
 497 |     <div class="table-responsive">
 498 |       <table class="table table-bordered table-striped">
 499 |         <thead>
 500 |           <tr>
 501 |             <th>Element</th>
 502 |             <th>Description</th>
 503 |           </tr>
 504 |         </thead>
 505 |         <tbody>
 506 |           <tr>
 507 |             <td>Panels</td>
 508 |             <td><code>.panel .panel-default</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td>
 509 |           </tr>
 510 |           <tr>
 511 |             <td>List groups</td>
 512 |             <td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td>
 513 |           </tr>
 514 |           <tr>
 515 |             <td>Glyphicons</td>
 516 |             <td><code>.glyphicon</code></td>
 517 |           </tr>
 518 |           <tr>
 519 |             <td>Jumbotron</td>
 520 |             <td><code>.jumbotron</code></td>
 521 |           </tr>
 522 |           <tr>
 523 |             <td>Extra small grid (&lt;768px)</td>
 524 |             <td><code>.col-xs-*</code></td>
 525 |           </tr>
 526 |           <tr>
 527 |             <td>Small grid (&ge;768px)</td>
 528 |             <td><code>.col-sm-*</code></td>
 529 |           </tr>
 530 |           <tr>
 531 |             <td>Medium grid (&ge;992px)</td>
 532 |             <td><code>.col-md-*</code></td>
 533 |           </tr>
 534 |           <tr>
 535 |             <td>Large grid (&ge;1200px)</td>
 536 |             <td><code>.col-lg-*</code></td>
 537 |           </tr>
 538 |           <tr>
 539 |             <td>Responsive utility classes (&ge;1200px)</td>
 540 |             <td><code>.visible-lg</code> <code>.hidden-lg</code></td>
 541 |           </tr>
 542 |           <tr>
 543 |             <td>Offsets</td>
 544 |             <td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td>
 545 |           </tr>
 546 |           <tr>
 547 |             <td>Push</td>
 548 |             <td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td>
 549 |           </tr>
 550 |           <tr>
 551 |             <td>Pull</td>
 552 |             <td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td>
 553 |           </tr>
 554 |           <tr>
 555 |             <td>Input groups</td>
 556 |             <td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td>
 557 |           </tr>
 558 |           <tr>
 559 |             <td>Form controls</td>
 560 |             <td><code>.form-control</code> <code>.form-group</code></td>
 561 |           </tr>
 562 |           <tr>
 563 |             <td>Button group sizes</td>
 564 |             <td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td>
 565 |           </tr>
 566 |           <tr>
 567 |             <td>Navbar text</td>
 568 |             <td><code>.navbar-text</code></td>
 569 |           </tr>
 570 |           <tr>
 571 |             <td>Navbar header</td>
 572 |             <td><code>.navbar-header</code></td>
 573 |           </tr>
 574 |           <tr>
 575 |             <td>Justified tabs / pills</td>
 576 |             <td><code>.nav-justified</code></td>
 577 |           </tr>
 578 |           <tr>
 579 |             <td>Responsive images</td>
 580 |             <td><code>.img-responsive</code></td>
 581 |           </tr>
 582 |           <tr>
 583 |             <td>Contextual table rows</td>
 584 |             <td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code></td>
 585 |           </tr>
 586 |           <tr>
 587 |             <td>Contextual panels</td>
 588 |             <td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td>
 589 |           </tr>
 590 |           <tr>
 591 |             <td>Modal</td>
 592 |             <td><code>.modal-dialog</code> <code>.modal-content</code></td>
 593 |           </tr>
 594 |           <tr>
 595 |             <td>Thumbnail image</td>
 596 |             <td><code>.img-thumbnail</code></td>
 597 |           </tr>
 598 |           <tr>
 599 |             <td>Well sizes</td>
 600 |             <td><code>.well-sm</code> <code>.well-lg</code></td>
 601 |           </tr>
 602 |           <tr>
 603 |             <td>Alert links</td>
 604 |             <td><code>.alert-link</code></td>
 605 |           </tr>
 606 |         </tbody>
 607 |       </table>
 608 |     </div><!-- /.table-responsive -->
 609 | 
 610 | 
 611 |     <h2 id="migration-dropped">What's removed</h2>
 612 |     <p>The following elements have been dropped or changed in v3.0.</p>
 613 |     <div class="table-responsive">
 614 |       <table class="table table-bordered table-striped">
 615 |         <thead>
 616 |           <tr>
 617 |             <th>Element</th>
 618 |             <th>Removed from 2.x</th>
 619 |             <th>3.0 Equivalent</th>
 620 |           </tr>
 621 |         </thead>
 622 |         <tbody>
 623 |           <tr>
 624 |             <td>Form actions</td>
 625 |             <td><code>.form-actions</code></td>
 626 |             <td class="text-muted">N/A</td>
 627 |           </tr>
 628 |           <tr>
 629 |             <td>Search form</td>
 630 |             <td><code>.form-search</code></td>
 631 |             <td class="text-muted">N/A</td>
 632 |           </tr>
 633 |           <tr>
 634 |             <td>Fluid container</td>
 635 |             <td><code>.container-fluid</code></td>
 636 |             <td><code>.container</code> (no more fixed grid)</td>
 637 |           </tr>
 638 |           <tr>
 639 |             <td>Fluid row</td>
 640 |             <td><code>.row-fluid</code></td>
 641 |             <td><code>.row</code> (no more fixed grid)</td>
 642 |           </tr>
 643 |           <tr>
 644 |             <td>Controls wrapper</td>
 645 |             <td><code>.controls</code></td>
 646 |             <td class="text-muted">N/A</td>
 647 |           </tr>
 648 |           <tr>
 649 |             <td>Controls row</td>
 650 |             <td><code>.controls-row</code></td>
 651 |             <td><code>.row</code> or <code>.form-group</code></td>
 652 |           </tr>
 653 |           <tr>
 654 |             <td>Navbar inner</td>
 655 |             <td><code>.navbar-inner</code></td>
 656 |             <td class="text-muted">N/A</td>
 657 |           </tr>
 658 |           <tr>
 659 |             <td>Navbar vertical dividers</td>
 660 |             <td><code>.navbar .divider-vertical</code></td>
 661 |             <td class="text-muted">N/A</td>
 662 |           </tr>
 663 |           <tr>
 664 |             <td>Dropdown submenu</td>
 665 |             <td><code>.dropdown-submenu</code></td>
 666 |             <td class="text-muted">N/A</td>
 667 |           </tr>
 668 |           <tr>
 669 |             <td>Tab alignments</td>
 670 |             <td><code>.taleft</code> <code>.taright</code> <code>.tabelow</code></td>
 671 |             <td class="text-muted">N/A</td>
 672 |           </tr>
 673 |           <tr>
 674 |             <td>Nav lists</td>
 675 |             <td><code>.nav-list</code> <code>.nav-header</code></td>
 676 |             <td>No direct equivalent, but <a href="../components/#list-group">list groups</a> and <a href="../javascript/#collapse"><code>.panel-group</code>s</a> are similar.</td>
 677 |           </tr>
 678 |         </tbody>
 679 |       </table>
 680 |     </div><!-- /.table-responsive -->
 681 | 
 682 | 
 683 |     <h2 id="migration-notes">Additional notes</h2>
 684 |     <p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p>
 685 |     <ul>
 686 |       <li>By default, text-based form controls now receive only minimal styling.  For focus colors and rounded corners, apply the <code>.form-control</code> class on the element to style.</li>
 687 |       <li>Text-based form controls with the <code>.form-control</code> class applied are now 100% wide by default. Wrap inputs inside <code>&lt;div class="col-*"&gt;&lt;/div&gt;</code> to control input widths.</li>
 688 |       <li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li>
 689 |       <li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li>
 690 |       <li><code>.container</code> and <code>.row</code> are now fluid (percentage-based).</li>
 691 |       <li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code>&lt;img&gt;</code> size.</li>
 692 |       <li>The icons, now <code>.glyphicon</code>, are now font based. Icons also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li>
 693 |       <li>Typeahead has been dropped, in favor of using <a href="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li>
 694 |       <li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior.</li>
 695 |       <li>The HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal</code> instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li>
 696 |       <li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc..</li>
 697 |     </ul>
 698 |     <p>For more information on upgrading to v3.0, and code snippets from the community, see <a href="http://bootply.com/">Bootply</a>.</p>
 699 |   </div>
 700 | 
 701 | 
 702 |   <!-- Browser support
 703 |   ================================================== -->
 704 |   <div class="docs-section">
 705 |     <div class="page-header">
 706 |       <h1 id="browsers">Browser support</h1>
 707 |     </div>
 708 |     <p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>
 709 | 
 710 |     <h3>Supported browsers</h3>
 711 |     <p>Specifically, we support the latest versions of the following:</p>
 712 |     <ul>
 713 |       <li>Chrome (Mac, Windows, iOS, and Android)</li>
 714 |       <li>Safari (Mac and iOS only, as the Windows version is being abandoned)</li>
 715 |       <li>Firefox (Mac, Windows)</li>
 716 |       <li>Internet Explorer</li>
 717 |       <li>Opera (Mac, Windows)</li>
 718 |     </ul>
 719 |     <p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.</p>
 720 | 
 721 |     <h3>Internet Explorer 8 and 9</h3>
 722 |     <p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p>
 723 |     <div class="table-responsive">
 724 |       <table class="table table-bordered table-striped">
 725 |         <thead>
 726 |           <tr>
 727 |             <th scope="col" class="col-xs-4">Feature</th>
 728 |             <th scope="col" class="col-xs-4">Internet Explorer 8</th>
 729 |             <th scope="col" class="col-xs-4">Internet Explorer 9</th>
 730 |           </tr>
 731 |         </thead>
 732 |         <tbody>
 733 |           <tr>
 734 |             <th scope="row"><code>border-radius</code></th>
 735 |             <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
 736 |             <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
 737 |           </tr>
 738 |           <tr>
 739 |             <th scope="row"><code>box-shadow</code></th>
 740 |             <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
 741 |             <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
 742 |           </tr>
 743 |           <tr>
 744 |             <th scope="row"><code>transform</code></th>
 745 |             <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
 746 |             <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported, with <code>-ms</code> prefix</td>
 747 |           </tr>
 748 |           <tr>
 749 |             <th scope="row"><code>transition</code></th>
 750 |             <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
 751 |           </tr>
 752 |         </tbody>
 753 |         <tbody>
 754 |           <tr>
 755 |             <th scope="row"><code>placeholder</code></th>
 756 |             <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
 757 |           </tr>
 758 |         </tbody>
 759 |       </table>
 760 |     </div>
 761 | 
 762 |     <p>Visit <a href="http://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
 763 | 
 764 |     <h3>Internet Explorer 8 and Respond.js</h3>
 765 |     <p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p>
 766 |     <h4 id="respond-js-x-domain">Respond.js and cross-domain CSS</h4>
 767 |     <p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p>
 768 |     <h4 id="respond-file-proto">Respond.js and <code>file://</code></h4>
 769 |     <p>Due to browser security rules, Respond.js doesn't work with pages viewed via the <code>file://</code> protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
 770 |     <h4 id="respond-import">Respond.js and <code>@import</code></h4>
 771 |     <p>Respond.js doesn't work with CSS that's referenced via <code>@import</code>. In particular, some Drupal configurations are known to use <code>@import</code>. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
 772 | 
 773 |     <h3>Internet Explorer 8 and box-sizing</h3>
 774 |     <p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>
 775 | 
 776 |     <h3 id="ie-compat-modes">IE Compatibility modes</h3>
 777 |     <p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>&lt;meta&gt;</code> tag in your pages:</p>
 778 | 
 779 | {{#markdown}}
 780 | ```html
 781 | <meta http-equiv="X-UA-Compatible" content="IE=edge">
 782 | ```
 783 | {{/markdown}}
 784 | 
 785 |     <p>This tag is included in all docs pages and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
 786 |     <p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
 787 | 
 788 |     <h3 id="ie-10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
 789 |     <p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
 790 | 
 791 | {{#markdown}}
 792 | ```css
 793 | @-ms-viewport       { width: device-width; }
 794 | ```
 795 | {{/markdown}}
 796 | 
 797 |     <p>However, this doesn't work as it causes Windows Phone 8 devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug until Microsoft issues a fix</strong>.</p>
 798 | 
 799 | {{#markdown}}
 800 | ```css
 801 | @-webkit-viewport   { width: device-width; }
 802 | @-moz-viewport      { width: device-width; }
 803 | @-ms-viewport       { width: device-width; }
 804 | @-o-viewport        { width: device-width; }
 805 | @viewport           { width: device-width; }
 806 | ```
 807 | {{/markdown}}
 808 | 
 809 | 
 810 | 
 811 | {{#markdown}}
 812 | ```js
 813 | if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
 814 |   var msViewportStyle = document.createElement("style")
 815 |   msViewportStyle.appendChild(
 816 |     document.createTextNode(
 817 |       "@-ms-viewport{width:auto!important}"
 818 |     )
 819 |   )
 820 |   document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
 821 | }
 822 | ```
 823 | {{/markdown}}
 824 | 
 825 |     <p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
 826 |     <p>As a heads up, we include this in the Bootstrap docs as an example.</p>
 827 | 
 828 |     <h3 id="safari-percentages">Safari percent rounding</h3>
 829 |     <p>As of Safari v6.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
 830 |     <ul>
 831 |       <li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
 832 |       <li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
 833 |     </ul>
 834 |     <p>We'll keep an eye on this though and update our code if we have an easy solution.</p>
 835 | 
 836 |     <h3 id="mobile-modals">Modals and mobile devices</h3>
 837 |     <h4>Overflow and scrolling</h4>
 838 |     <p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p>
 839 |     <h4>Virtual keyboards</h4>
 840 |     <p>Also, note that if you're using inputs in your modal – iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
 841 | 
 842 |     <h3 id="browser-zoom">Browser zooming</h3>
 843 |     <p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
 844 |   </div>
 845 | 
 846 | 
 847 |   <!-- Third party support
 848 |   ================================================== -->
 849 |   <div class="docs-section">
 850 |     <div class="page-header">
 851 |       <h1 id="third-parties">Third party support</h1>
 852 |     </div>
 853 |     <p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.</p>
 854 | 
 855 |     <h3>Box-sizing</h3>
 856 |     <p>Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to <code>* { box-sizing: border-box; }</code>, a rule which makes it so <code>padding</code> does not affect the final computed width of an element. Learn more about <a href="http://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
 857 |     <p>Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).</p>
 858 | 
 859 | {{#markdown}}
 860 | ```css
 861 | /* Box-sizing resets
 862 |  *
 863 |  * Reset individual elements or override regions to avoid conflicts due to
 864 |  * global box model settings of Bootstrap. Two options, individual overrides and
 865 |  * region resets, are available as plain CSS and uncompiled LESS formats.
 866 |  */
 867 | 
 868 | /* Option 1A: Override a single element's box model via CSS */
 869 | .element {
 870 |   -webkit-box-sizing: content-box;
 871 |      -moz-box-sizing: content-box;
 872 |           box-sizing: content-box;
 873 | }
 874 | 
 875 | /* Option 1B: Override a single element's box model by using a Bootstrap LESS mixin */
 876 | .element {
 877 |   .box-sizing(content-box);
 878 | }
 879 | 
 880 | /* Option 2A: Reset an entire region via CSS */
 881 | .reset-box-sizing,
 882 | .reset-box-sizing *,
 883 | .reset-box-sizing *:before,
 884 | .reset-box-sizing *:after {
 885 |   -webkit-box-sizing: content-box;
 886 |      -moz-box-sizing: content-box;
 887 |           box-sizing: content-box;
 888 | }
 889 | 
 890 | /* Option 2B: Reset an entire region with a custom LESS mixin */
 891 | .reset-box-sizing {
 892 |   &,
 893 |   *,
 894 |   *:before,
 895 |   *:after {
 896 |     .box-sizing(content-box);
 897 |   }
 898 | }
 899 | .element {
 900 |   .reset-box-sizing();
 901 | }
 902 | ```
 903 | {{/markdown}}
 904 | 
 905 |   </div>
 906 | 
 907 | 
 908 |   <!-- Accessibility
 909 |   ================================================== -->
 910 |   <div class="docs-section">
 911 |     <div class="page-header">
 912 |       <h1 id="accessibility">Accessibility</h1>
 913 |     </div>
 914 |     <p class="lead">Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.</p>
 915 | 
 916 |     <h3>Skip navigation</h3>
 917 |     <p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to main content</code> link immediately after your opening <code>&lt;body&gt;</code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p>
 918 | 
 919 | {{#markdown}}
 920 | ```html
 921 | <body>
 922 |   <a href="#content" class="sr-only">Skip to main content</a>
 923 |   <div class="container" id="content">
 924 |     The main page content.
 925 |   </div>
 926 | </body>
 927 | ```
 928 | {{/markdown}}
 929 | 
 930 | 
 931 |     <h3>Nested headings</h3>
 932 |     <p>When nesting headings (<code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code>), your primary document header should be an <code>&lt;h1&gt;</code>. Subsequent headings should make logical use of <code>&lt;h2&gt;</code> - <code>&lt;h6&gt;</code> such that screen readers can construct a table of contents for your pages.</p>
 933 |     <p>Learn more at <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <a href="http://accessibility.psu.edu/headings">Penn State's AccessAbility</a>.</p>
 934 | 
 935 |     <h3>Additional resources</h3>
 936 |     <ul>
 937 |       <li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
 938 |       <li><a href="http://a11yproject.com/">The A11Y Project</a></li>
 939 |       <li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
 940 |     </ul>
 941 |   </div>
 942 | 
 943 | 
 944 |   <!-- License FAQs
 945 |   ================================================== -->
 946 |   <div class="docs-section">
 947 |     <div class="page-header">
 948 |       <h1 id="license-faqs">License FAQs</h1>
 949 |     </div>
 950 |     <p class="lead">Bootstrap is released under the Apache 2 license and is copyright {{ now "%Y" }} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
 951 | 
 952 |     <div class="row">
 953 |       <div class="col-12 col-lg-6">
 954 |         <h4>It allows you to:</h4>
 955 |         <ul>
 956 |           <li>Freely download and use Bootstrap, in whole or in part, for personal, company internal or commercial purposes</li>
 957 |           <li>Use Bootstrap in packages or distributions that you create</li>
 958 |         </ul>
 959 |       </div>
 960 |       <div class="col-12 col-lg-6">
 961 |         <h4>It forbids you to:</h4>
 962 |         <ul>
 963 |           <li>Redistribute any piece of Bootstrap without proper attribution</li>
 964 |           <li>Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution</li>
 965 |           <li>Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question</li>
 966 |         </ul>
 967 |       </div>
 968 |     </div>
 969 |     <div class="row">
 970 |       <div class="col-12 col-lg-6">
 971 |         <h4>It requires you to:</h4>
 972 |         <ul>
 973 |           <li>Include a copy of the license in any redistribution you may make that includes Bootstrap</li>
 974 |           <li>Provide clear attribution to Twitter for any distributions that include Bootstrap</li>
 975 |         </ul>
 976 |       </div>
 977 |       <div class="col-12 col-lg-6">
 978 |         <h4>It does not require you to:</h4>
 979 |         <ul>
 980 |           <li>Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it</li>
 981 |           <li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
 982 |         </ul>
 983 |       </div>
 984 |     </div>
 985 |     <p>The full Bootstrap license is located <a href="{{ site.repo }}/blob/master/README.md">in the project repository</a> for more information.</p>
 986 |   </div><!-- /.docs-section -->
 987 | 
 988 | 
 989 |   <div class="docs-section">
 990 |     <div class="page-header">
 991 |       <h1 id="customizing">Customizing Bootstrap</h1>
 992 |     </div>
 993 |     <p class="lead">Bootstrap is best maintained when you treat it as a separate and independently-versioned dependency in your development environment. Doing this makes upgrading Bootstrap easier in the future.</p>
 994 | 
 995 |     <p>Once you've downloaded and included Bootstrap's styles and scripts, you can customize its components. Just create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.</p>
 996 | 
 997 |     <div class="callout callout-info">
 998 |       <h4>Compiled or minified?</h4>
 999 |       <p>Unless you plan on reading the CSS, go with minified stylesheets. It's the same code, just compacted. Minified styles use less bandwidth, which is good, especially in production environments.</p>
1000 |     </div>
1001 | 
1002 |     <p>From there, include whatever Bootstrap components and HTML content you need to create templates for your site's pages.</p>
1003 | 
1004 |     <h3>Customizing components</h3>
1005 |     <p>You can customize components to varying degrees, but most fall into two camps: <em>light customizations</em> and <em>overhauls</em>. Plenty examples of both are available from third parties.</p>
1006 |     <p>We define <em>light customizations</em> as superficial changes, for example, color and font changes to existing Bootstrap components. A light customization example is the <a href="http://translate.twitter.com">Twitter Translation Center</a> (coded by <a href="https://twitter.com/mdo">@mdo</a>). Let's look at how to implement the custom button we wrote for this site, <code>.btn-ttc</code>.</p>
1007 |     <p>The stock Bootstrap buttons require just one class, <code>.btn</code>, to start.  Here we extend the <code>.btn</code> style with a new modifier class, <code>.btn-ttc</code>, that we will create. This gives us a distinct custom look with minimal effort.</p>
1008 |     <p>Our customized button will be coded like this:</p>
1009 | 
1010 | {{#markdown}}
1011 | ```html
1012 | <button type="button" class="btn btn-ttc">Save changes</button>
1013 | ```
1014 | {{/markdown}}
1015 | 
1016 |     <p>Note how <code>.btn-ttc</code> is added to the standard <code>.btn</code> class.</p>
1017 | 
1018 |     <p>To implement this, in the custom stylesheet, add the following CSS:</p>
1019 | 
1020 | 
1021 | {{#markdown}}
1022 | ```css
1023 | /* Custom button
1024 | -------------------------------------------------- */
1025 | 
1026 | /* Override base .btn styles */
1027 | /* Apply text and background changes to three key states: default, hover, and active (click). */
1028 | .btn-ttc,
1029 | .btn-ttc:hover,
1030 | .btn-ttc:active {
1031 |   color: white;
1032 |   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1033 |   background-color: #007da7;
1034 | }
1035 | 
1036 | /* Apply the custom-colored gradients */
1037 | /* Note: you'll need to include all the appropriate gradients for various browsers and standards. */
1038 | .btn-ttc {
1039 |   background-repeat: repeat-x;
1040 |   background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
1041 |   ...
1042 | }
1043 | 
1044 | /* Set the hover state */
1045 | /* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */
1046 | .btn-ttc:hover {
1047 |   background-position: 0 -15px;
1048 | }
1049 | ```
1050 | {{/markdown}}
1051 | 
1052 | 
1053 |     <p>In short: Look to the style source and duplicate the selectors you need for your modifications.</p>
1054 |     <p><strong>In summary, here's the basic workflow:</strong></p>
1055 |     <ul>
1056 |       <li>For each element you want to customize, find its code in the compiled Bootstrap CSS.</li>
1057 |       <li>Copy the component's selector and styles and paste them in your custom stylesheet. For instance, to customize the navbar background, just copy the <code>.navbar</code> style specification.</li>
1058 |       <li>In your custom stylesheet, edit the CSS you just copied from the Bootstrap source. No need for prepending additional classes, or appending <code>!important</code> here.  Keep it simple.</li>
1059 |       <li>Rinse and repeat until you're happy with your customizations.</li>
1060 |     </ul>
1061 |     <p>Once you are comfortable performing light customizations, visual overhauls are just as straightforward. For a site like <a href="http://yourkarma.com">Karma</a>, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved.  But the same principle applies: include Bootstrap's default stylesheet first, then apply your custom stylesheet.</p>
1062 | 
1063 |     <div class="callout callout-info">
1064 |       <h4>Alternate customization methods</h4>
1065 |       <p>While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source <code>.less</code> files (making upgrades super difficult), and the second is mapping source LESS code to <a href="http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html">your own classes via mixins</a>. For the time being, neither of those options are documented here.</p>
1066 |     </div>
1067 | 
1068 |     <h3>Removing potential bloat</h3>
1069 |     <p>Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where optimizing bandwidth is an issue. We encourage you to remove whatever is unused with our <a href="../customize/">Customizer</a>.</p>
1070 |     <p>Using the Customizer, simply uncheck any component, feature, or asset you don't need. Hit download and swap out the default Bootstrap files with these newly customized ones. You'll get vanilla Bootstrap, but without the features *you* deem unnecessary. All custom builds include compiled and minified versions, so use whichever works for you.</p>
1071 | 
1072 |   </div>
1073 | 


--------------------------------------------------------------------------------
/templates/customize.hbs:
--------------------------------------------------------------------------------
   1 | ---
   2 | layout: default.hbs
   3 | title: Customize and download
   4 | slug: customize
   5 | lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.
   6 | ---
   7 | 
   8 | <!-- Customizer form -->
   9 | <form class="customizer" role="form">
  10 |   <div class="docs-section" id="less-section">
  11 |     <div class="page-header">
  12 |       <button class="btn btn-default toggle" type="button">Toggle all</button>
  13 |       <h1 id="less">LESS files</h1>
  14 |     </div>
  15 |     <p class="lead">Choose which LESS files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the <a href="../css/">CSS</a> and <a href="../components/">Components</a> pages in the docs.</p>
  16 | 
  17 |     <div class="row">
  18 |       <div class="col-xs-6 col-sm-4">
  19 |         <h3>Common CSS</h3>
  20 |         <div class="checkbox">
  21 |           <label> <input type="checkbox" checked value="print.less"> Print media styles </label>
  22 |         </div>
  23 |         <div class="checkbox">
  24 |           <label> <input type="checkbox" checked value="type.less"> Typography </label>
  25 |         </div>
  26 |         <div class="checkbox">
  27 |           <label> <input type="checkbox" checked value="code.less"> Code </label>
  28 |         </div>
  29 |         <div class="checkbox">
  30 |           <label> <input type="checkbox" checked value="grid.less"> Grid system </label>
  31 |         </div>
  32 |         <div class="checkbox">
  33 |           <label> <input type="checkbox" checked value="tables.less"> Tables </label>
  34 |         </div>
  35 |         <div class="checkbox">
  36 |           <label> <input type="checkbox" checked value="forms.less" data-dependents="navbar.less,input-groups.less"> Forms </label>
  37 |         </div>
  38 |         <div class="checkbox">
  39 |           <label> <input type="checkbox" checked value="buttons.less"> Buttons </label>
  40 |         </div>
  41 |       </div><!-- .col-xs-6 .col-sm-4 -->
  42 | 
  43 |       <div class="col-xs-6 col-sm-4">
  44 |         <h3>Components</h3>
  45 |         <div class="checkbox">
  46 |           <label> <input type="checkbox" checked value="glyphicons.less"> Glyphicons </label>
  47 |         </div>
  48 |         <div class="checkbox">
  49 |           <label> <input type="checkbox" checked value="button-groups.less" data-dependency="buttons.less"> Button groups </label>
  50 |         </div>
  51 |         <div class="checkbox">
  52 |           <label> <input type="checkbox" checked value="input-groups.less" data-dependency="forms.less"> Input groups </label>
  53 |         </div>
  54 |         <div class="checkbox">
  55 |           <label> <input type="checkbox" checked value="navs.less" data-dependents="navbar.less"> Navs </label>
  56 |         </div>
  57 |         <div class="checkbox">
  58 |           <label> <input type="checkbox" checked value="navbar.less" data-dependencies="forms.less,utilities.less,navs.less"> Navbar </label>
  59 |         </div>
  60 |         <div class="checkbox">
  61 |           <label> <input type="checkbox" checked value="breadcrumbs.less"> Breadcrumbs </label>
  62 |         </div>
  63 |         <div class="checkbox">
  64 |           <label> <input type="checkbox" checked value="pagination.less"> Pagination </label>
  65 |         </div>
  66 |         <div class="checkbox">
  67 |           <label> <input type="checkbox" checked value="pager.less"> Pager </label>
  68 |         </div>
  69 |         <div class="checkbox">
  70 |           <label> <input type="checkbox" checked value="labels.less"> Labels </label>
  71 |         </div>
  72 |         <div class="checkbox">
  73 |           <label> <input type="checkbox" checked value="badges.less"> Badges </label>
  74 |         </div>
  75 |         <div class="checkbox">
  76 |           <label> <input type="checkbox" checked value="jumbotron.less"> Jumbotron </label>
  77 |         </div>
  78 |         <div class="checkbox">
  79 |           <label> <input type="checkbox" checked value="thumbnails.less"> Thumbnails </label>
  80 |         </div>
  81 |         <div class="checkbox">
  82 |           <label> <input type="checkbox" checked value="alerts.less"> Alerts </label>
  83 |         </div>
  84 |         <div class="checkbox">
  85 |           <label> <input type="checkbox" checked value="progress-bars.less"> Progress bars </label>
  86 |         </div>
  87 |         <div class="checkbox">
  88 |           <label> <input type="checkbox" checked value="media.less"> Media items </label>
  89 |         </div>
  90 |         <div class="checkbox">
  91 |           <label> <input type="checkbox" checked value="list-group.less"> List groups </label>
  92 |         </div>
  93 |         <div class="checkbox">
  94 |           <label> <input type="checkbox" checked value="panels.less"> Panels </label>
  95 |         </div>
  96 |         <div class="checkbox">
  97 |           <label> <input type="checkbox" checked value="wells.less"> Wells </label>
  98 |         </div>
  99 |         <div class="checkbox">
 100 |           <label> <input type="checkbox" checked value="close.less"> Close icon </label>
 101 |         </div>
 102 |       </div><!-- .col-xs-6 .col-sm-4 -->
 103 | 
 104 |       <div class="col-xs-6 col-sm-4">
 105 |         <h3>JavaScript components</h3>
 106 |         <div class="checkbox">
 107 |           <label> <input type="checkbox" checked value="dropdowns.less"> Dropdowns </label>
 108 |         </div>
 109 |         <div class="checkbox">
 110 |           <label> <input type="checkbox" checked value="tooltip.less"> Tooltips </label>
 111 |         </div>
 112 |         <div class="checkbox">
 113 |           <label> <input type="checkbox" checked value="popovers.less"> Popovers </label>
 114 |         </div>
 115 |         <div class="checkbox">
 116 |           <label> <input type="checkbox" checked value="modals.less"> Modals </label>
 117 |         </div>
 118 |         <div class="checkbox">
 119 |           <label> <input type="checkbox" checked value="carousel.less"> Carousel </label>
 120 |         </div>
 121 | 
 122 |         <h3>Utilities</h3>
 123 |         <div class="checkbox">
 124 |           <label> <input type="checkbox" checked value="utilities.less" data-dependents="navbar.less"> Basic utilities </label>
 125 |         </div>
 126 |         <div class="checkbox">
 127 |           <label> <input type="checkbox" checked value="responsive-utilities.less"> Responsive utilities </label>
 128 |         </div>
 129 |         <div class="checkbox">
 130 |           <label> <input type="checkbox" checked value="component-animations.less"> Component animations (for JS) </label>
 131 |         </div>
 132 |       </div><!-- .col-xs-6 .col-sm-4 -->
 133 |     </div><!-- /.row -->
 134 |   </div>
 135 | 
 136 | 
 137 | 
 138 |   <div class="docs-section" id="plugin-section">
 139 |     <div class="page-header">
 140 |       <button class="btn btn-default toggle" type="button">Toggle all</button>
 141 |       <h1 id="plugins">jQuery plugins</h1>
 142 |     </div>
 143 |     <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="../javascript/">JavaScript</a> page in the docs.</p>
 144 |     <div class="row">
 145 |       <div class="col-lg-6">
 146 |         <h4>Linked to components</h4>
 147 |         <div class="checkbox">
 148 |           <label> <input type="checkbox" checked value="alert.js"> Alert dismissal </label>
 149 |         </div>
 150 |         <div class="checkbox">
 151 |           <label> <input type="checkbox" checked value="button.js"> Advanced buttons </label>
 152 |         </div>
 153 |         <div class="checkbox">
 154 |           <label> <input type="checkbox" checked value="carousel.js"> Carousel functionality </label>
 155 |         </div>
 156 |         <div class="checkbox">
 157 |           <label> <input type="checkbox" checked value="dropdown.js"> Dropdowns </label>
 158 |         </div>
 159 |         <div class="checkbox">
 160 |           <label> <input type="checkbox" checked value="modal.js"> Modals </label>
 161 |         </div>
 162 |         <div class="checkbox">
 163 |           <label> <input type="checkbox" checked value="tooltip.js"> Tooltips </label>
 164 |         </div>
 165 |         <div class="checkbox">
 166 |           <label> <input type="checkbox" checked value="popover.js" data-dependency="tooltip.js"> Popovers <small>(requires Tooltips)</small> </label>
 167 |         </div>
 168 |         <div class="checkbox">
 169 |           <label> <input type="checkbox" checked value="tab.js"> Togglable tabs </label>
 170 |         </div>
 171 |       </div>
 172 |       <div class="col-lg-6">
 173 |         <h4>Magic</h4>
 174 |         <div class="checkbox">
 175 |           <label> <input type="checkbox" checked value="affix.js"> Affix </label>
 176 |         </div>
 177 |         <div class="checkbox">
 178 |           <label> <input type="checkbox" checked value="collapse.js"> Collapse </label>
 179 |         </div>
 180 |         <div class="checkbox">
 181 |           <label> <input type="checkbox" checked value="scrollspy.js"> Scrollspy </label>
 182 |         </div>
 183 |         <div class="checkbox">
 184 |           <label> <input type="checkbox" checked value="transition.js"> Transitions <small>(required for any kind of animation)</small> </label>
 185 |         </div>
 186 |       </div>
 187 |     </div>
 188 | 
 189 |     <div class="callout callout-info">
 190 |       <h4>Produces two files</h4>
 191 |       <p>All checked plugins will be compiled into a readable <code>bootstrap.js</code> and a minified <code>bootstrap.min.js</code>. We recommend you use the minified version in production.</p>
 192 |     </div>
 193 | 
 194 |     <div class="callout callout-danger">
 195 |       <h4>jQuery required</h4>
 196 |       <p>All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
 197 |     </div>
 198 |   </div>
 199 | 
 200 | 
 201 | 
 202 |   <div class="docs-section" id="less-variables-section">
 203 |     <div class="page-header">
 204 |       <button class="btn btn-default toggle" type="button">Reset to defaults</button>
 205 |       <h1 id="less-variables">LESS variables</h1>
 206 |     </div>
 207 |     <p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
 208 | 
 209 |     <h2 id="variables-basics">Basics</h2>
 210 | 
 211 | 
 212 |     <h3>Color system</h3>
 213 |     <div class="row">
 214 |       <div class="col-md-6">
 215 |         <label>@brand-primary</label>
 216 |         <input type="text" class="form-control" placeholder="#428bca" data-var="@brand-primary">
 217 |         <label>@brand-success</label>
 218 |         <input type="text" class="form-control" placeholder="#5cb85c" data-var="@brand-success">
 219 |         <label>@brand-warning</label>
 220 |         <input type="text" class="form-control" placeholder="#f0ad4e" data-var="@brand-warning">
 221 |       </div>
 222 |       <div class="col-md-6">
 223 |         <label>@brand-danger</label>
 224 |         <input type="text" class="form-control" placeholder="#d9534f" data-var="@brand-danger">
 225 |         <label>@brand-info</label>
 226 |         <input type="text" class="form-control" placeholder="#5bc0de" data-var="@brand-info">
 227 |       </div>
 228 |     </div>
 229 | 
 230 | 
 231 |     <h3>Body scaffolding</h3>
 232 |     <div class="row">
 233 |       <div class="col-md-6">
 234 |         <label>@body-bg</label>
 235 |         <input type="text" class="form-control" placeholder="#fff" data-var="@body-bg">
 236 |         <p class="help-block">Background color for <code>&lt;body&gt;</code>.</p>
 237 |         <label>@text-color</label>
 238 |         <input type="text" class="form-control" placeholder="@gray-dark" data-var="@text-color">
 239 |         <p class="help-block">Global text color on <code>&lt;body&gt;</code>.</p>
 240 |       </div>
 241 |       <div class="col-md-6">
 242 |         <label>@link-color</label>
 243 |         <input type="text" class="form-control" placeholder="@brand-primary" data-var="@link-color">
 244 |         <p class="help-block">Global textual link color</p>
 245 |         <label>@link-hover-color</label>
 246 |         <input type="text" class="form-control" placeholder="darken(@link-color, 15%)" data-var="@link-hover-color">
 247 |         <p class="help-block">Link hover color set via <code>darken()</code> function</p>
 248 |       </div>
 249 |     </div>
 250 | 
 251 | 
 252 |     <h3>Typography</h3>
 253 |     <div class="row">
 254 |       <div class="col-lg-6">
 255 |         <h4>Generic font variables</h4>
 256 |         <label>@font-family-sans-serif</label>
 257 |         <input type="text" class="form-control" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif" data-var="@font-family-sans-serif">
 258 |         <p class="help-block">Default sans-serif fonts.</p>
 259 |         <label>@font-family-serif</label>
 260 |         <input type="text" class="form-control" placeholder="Georgia, 'Times New Roman', Times, serif" data-var="@font-family-serif">
 261 |         <p class="help-block">Default serif fonts.</p>
 262 |         <label>@font-family-monospace</label>
 263 |         <input type="text" class="form-control" placeholder="Monaco, Menlo, Consolas, 'Courier New', monospace" data-var="@font-family-monospace">
 264 |         <p class="help-block">Default monospace fonts for <code>&lt;code&gt;</code> and <code>&lt;pre&gt;</code>.</p>
 265 | 
 266 |         <h4>Base type styes</h4>
 267 |         <label>@font-family-base</label>
 268 |         <input type="text" class="form-control" placeholder="@font-family-sans-serif" data-var="@font-family-base">
 269 |         <label>@font-size-base</label>
 270 |         <input type="text" class="form-control" placeholder="14px" data-var="@font-size-base">
 271 |         <label>@line-height-base</label>
 272 |         <input type="text" class="form-control" placeholder="1.428571429" data-var="@line-height-base">
 273 |         <label>@line-height-large</label>
 274 |         <input type="text" class="form-control" placeholder="1.33" data-var="@line-height-large">
 275 |         <label>@line-height-small</label>
 276 |         <input type="text" class="form-control" placeholder="1.5" data-var="@line-height-small">
 277 |       </div>
 278 |       <div class="col-lg-6">
 279 |         <h4>Heading font sizes</h4>
 280 |         <label>@font-size-h1</label>
 281 |         <input type="text" class="form-control" placeholder="floor(@font-size-base * 2.6)" data-var="@font-size-h1">
 282 |         <label>@font-size-h2</label>
 283 |         <input type="text" class="form-control" placeholder="floor(@font-size-base * 2.15)" data-var="@font-size-h2">
 284 |         <label>@font-size-h3</label>
 285 |         <input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.7)" data-var="@font-size-h3">
 286 |         <label>@font-size-h4</label>
 287 |         <input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.25)" data-var="@font-size-h4">
 288 |         <label>@font-size-h5</label>
 289 |         <input type="text" class="form-control" placeholder="@font-size-base" data-var="@font-size-h5">
 290 |         <label>@font-size-h6</label>
 291 |         <input type="text" class="form-control" placeholder="ceil(@font-size-base * 0.85)" data-var="@font-size-h6">
 292 |       </div>
 293 |     </div>
 294 | 
 295 | 
 296 |     <h3>Headings</h3>
 297 |     <div class="row">
 298 |       <div class="col-lg-6">
 299 |         <label>@headings-font-family</label>
 300 |         <input type="text" class="form-control" placeholder="@font-family-base" data-var="@headings-font-family">
 301 |         <label>@headings-font-weight</label>
 302 |         <input type="text" class="form-control" placeholder="500" data-var="@headings-font-weight">
 303 |       </div>
 304 |       <div class="col-lg-6">
 305 |         <label>@headings-line-height</label>
 306 |         <input type="text" class="form-control" placeholder="1.1" data-var="@headings-line-height">
 307 |         <label>@headings-color</label>
 308 |         <input type="text" class="form-control" placeholder="inherit" data-var="@headings-color">
 309 |       </div>
 310 |     </div>
 311 | 
 312 | 
 313 |     <h3>Code blocks</h3>
 314 |     <div class="row">
 315 |       <div class="col-lg-6">
 316 |         <label>@code-color</label>
 317 |         <input type="text" class="form-control" placeholder="#c7254e" data-var="@code-color">
 318 |         <label>@code-bg</label>
 319 |         <input type="text" class="form-control" placeholder="#f9f2f4" data-var="@code-bg">
 320 |       </div>
 321 |       <div class="col-lg-6">
 322 |         <label>@pre-color</label>
 323 |         <input type="text" class="form-control" placeholder="@gray-dark" data-var="@pre-color">
 324 |         <label>@pre-bg</label>
 325 |         <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@pre-bg">
 326 |         <label>@pre-border-color</label>
 327 |         <input type="text" class="form-control" placeholder="#ccc" data-var="@pre-border-color">
 328 |       </div>
 329 |     </div>
 330 | 
 331 | 
 332 |     <h3>Media queries breakpoints</h3>
 333 |     <div class="row">
 334 |       <div class="col-xs-6 col-md-3">
 335 |         <label>@screen-xs-min</label>
 336 |         <input type="text" class="form-control" placeholder="480px" data-var="@screen-xs-min">
 337 |       </div>
 338 |       <div class="col-xs-6 col-md-3">
 339 |         <label>@screen-sm-min</label>
 340 |         <input type="text" class="form-control" placeholder="768px" data-var="@screen-sm-min">
 341 |       </div>
 342 |       <div class="col-xs-6 col-md-3">
 343 |         <label>@screen-md-min</label>
 344 |         <input type="text" class="form-control" placeholder="992px" data-var="@screen-md-min">
 345 |       </div>
 346 |       <div class="col-xs-6 col-md-3">
 347 |         <label>@screen-lg-min</label>
 348 |         <input type="text" class="form-control" placeholder="1200px" data-var="@screen-lg-min">
 349 |       </div>
 350 |     </div>
 351 | 
 352 |     <h3>Layout and grid system</h3>
 353 |     <div class="row">
 354 |       <div class="col-xs-6 col-sm-4">
 355 |         <label>@container-sm</label>
 356 |         <input type="text" class="form-control" placeholder="((720px + @grid-gutter-width))" data-var="@container-sm">
 357 |         <p class="help-block">For <code>@screen-sm-min</code> and up.</p>
 358 |       </div>
 359 |       <div class="col-xs-6 col-sm-4">
 360 |         <label>@container-md</label>
 361 |         <input type="text" class="form-control" placeholder="((940px + @grid-gutter-width))" data-var="@container-md">
 362 |         <p class="help-block">For <code>@screen-md-min</code> and up.</p>
 363 |       </div>
 364 |       <div class="clearfix visible-xs"></div>
 365 |       <div class="col-xs-6 col-sm-4">
 366 |         <label>@container-lg</label>
 367 |         <input type="text" class="form-control" placeholder="((1140px + @grid-gutter-width))" data-var="@container-lg">
 368 |         <p class="help-block">For <code>@screen-lg-min</code> and up.</p>
 369 |       </div>
 370 |     </div>
 371 | 
 372 |     <div class="row">
 373 |       <div class="col-xs-6 col-sm-4">
 374 |         <label>@grid-columns</label>
 375 |         <input type="text" class="form-control" placeholder="12" data-var="@grid-columns">
 376 |         <p class="help-block">Number of columns in the grid.</p>
 377 |       </div>
 378 |       <div class="col-xs-6 col-sm-4">
 379 |         <label>@grid-gutter-width</label>
 380 |         <input type="text" class="form-control" placeholder="30px" data-var="@grid-gutter-width">
 381 |         <p class="help-block">Padding between columns.</p>
 382 |       </div>
 383 |       <div class="clearfix visible-xs"></div>
 384 |       <div class="col-xs-6 col-sm-4">
 385 |         <label>@grid-float-breakpoint</label>
 386 |         <input type="text" class="form-control" placeholder="@screen-sm-min" data-var="@grid-float-breakpoint">
 387 |         <p class="help-block">Point at which the navbar stops collapsing.</p>
 388 |       </div>
 389 |     </div>
 390 | 
 391 | 
 392 |     <h3>Components</h3>
 393 | 
 394 |     <h4>Padding</h4>
 395 |     <div class="row">
 396 |       <div class="col-md-4">
 397 |         <label>@padding-base-vertical</label>
 398 |         <input type="text" class="form-control" placeholder="6px" data-var="@padding-base-vertical">
 399 |         <label>@padding-base-horizontal</label>
 400 |         <input type="text" class="form-control" placeholder="12px" data-var="@padding-base-horizontal">
 401 |       </div>
 402 |       <div class="col-md-4">
 403 |         <label>@padding-large-vertical</label>
 404 |         <input type="text" class="form-control" placeholder="10px" data-var="@padding-large-vertical">
 405 |         <label>@padding-large-horizontal</label>
 406 |         <input type="text" class="form-control" placeholder="16px" data-var="@padding-large-horizontal">
 407 |       </div>
 408 |       <div class="col-md-4">
 409 |         <label>@padding-small-vertical</label>
 410 |         <input type="text" class="form-control" placeholder="5px" data-var="@padding-small-vertical">
 411 |         <label>@padding-small-horizontal</label>
 412 |         <input type="text" class="form-control" placeholder="10px" data-var="@padding-small-horizontal">
 413 |       </div>
 414 |     </div>
 415 | 
 416 |     <h4>Rounded corners</h4>
 417 |     <div class="row">
 418 |       <div class="col-md-4">
 419 |         <label>@border-radius-base</label>
 420 |         <input type="text" class="form-control" placeholder="4px" data-var="@border-radius-base">
 421 |       </div>
 422 |       <div class="col-md-4">
 423 |         <label>@border-radius-large</label>
 424 |         <input type="text" class="form-control" placeholder="6px" data-var="@border-radius-large">
 425 |       </div>
 426 |       <div class="col-md-4">
 427 |         <label>@border-radius-small</label>
 428 |         <input type="text" class="form-control" placeholder="3px" data-var="@border-radius-small">
 429 |       </div>
 430 |     </div>
 431 | 
 432 |     <h4>Component active state</h4>
 433 |     <div class="row">
 434 |       <div class="col-md-6">
 435 |         <label>@component-active-color</label>
 436 |         <input type="text" class="form-control" placeholder="#fff" data-var="@component-active-color">
 437 |         <p class="help-block">Global color for active items (e.g., navs or dropdowns)</p>
 438 |       </div>
 439 |       <div class="col-md-6">
 440 |         <label>@component-active-bg</label>
 441 |         <input type="text" class="form-control" placeholder="@brand-primary" data-var="@component-active-bg">
 442 |         <p class="help-block">Global background color for active items (e.g., navs or dropdowns)</p>
 443 |       </div>
 444 |     </div>
 445 | 
 446 |     <h4>Carets</h4>
 447 |     <div class="row">
 448 |       <div class="col-md-6">
 449 |         <label>@caret-width-base</label>
 450 |         <input type="text" class="form-control" placeholder="4px" data-var="@caret-width-base">
 451 |       </div>
 452 |       <div class="col-md-6">
 453 |         <label>@caret-width-large</label>
 454 |         <input type="text" class="form-control" placeholder="5px" data-var="@caret-width-large">
 455 |       </div>
 456 |     </div>
 457 | 
 458 | 
 459 |     <h2 id="variables-buttons">Buttons</h2>
 460 |     <div class="row">
 461 |       <div class="col-md-6">
 462 |         <label>@btn-font-weight</label>
 463 |         <input type="text" class="form-control" placeholder="normal" data-var="@btn-font-weight">
 464 |       </div>
 465 |       <div class="col-md-6">
 466 |         <label>@btn-link-disabled-color</label>
 467 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@btn-link-disabled-color">
 468 |       </div>
 469 |     </div>
 470 |     <div class="row">
 471 |       <div class="col-md-6">
 472 |         <h4>Default</h4>
 473 |         <label>@btn-default-color</label>
 474 |         <input type="text" class="form-control" placeholder="#333" data-var="@btn-default-color">
 475 |         <label>@btn-default-bg</label>
 476 |         <input type="text" class="form-control" placeholder="#fff" data-var="@btn-default-bg">
 477 |         <label>@btn-default-border</label>
 478 |         <input type="text" class="form-control" placeholder="#ccc" data-var="@btn-default-border">
 479 |         <h4>Primary</h4>
 480 |         <label>@btn-primary-color</label>
 481 |         <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-primary-color">
 482 |         <label>@btn-primary-bg</label>
 483 |         <input type="text" class="form-control" placeholder="@brand-primary" data-var="@btn-primary-bg">
 484 |         <label>@btn-primary-border</label>
 485 |         <input type="text" class="form-control" placeholder="darken(@btn-primary-bg, 5%)" data-var="@btn-primary-border">
 486 |         <h4>Info</h4>
 487 |         <label>@btn-info-color</label>
 488 |         <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-info-color">
 489 |         <label>@btn-info-bg</label>
 490 |         <input type="text" class="form-control" placeholder="@brand-info" data-var="@btn-info-bg">
 491 |         <label>@btn-info-border</label>
 492 |         <input type="text" class="form-control" placeholder="darken(@btn-info-bg, 5%)" data-var="@btn-info-border">
 493 |       </div>
 494 |       <div class="col-md-6">
 495 |         <h4>Success</h4>
 496 |         <label>@btn-success-color</label>
 497 |         <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-success-color">
 498 |         <label>@btn-success-bg</label>
 499 |         <input type="text" class="form-control" placeholder="@brand-success" data-var="@btn-success-bg">
 500 |         <label>@btn-success-border</label>
 501 |         <input type="text" class="form-control" placeholder="darken(@btn-success-bg, 5%);" data-var="@btn-success-border">
 502 |         <h4>Warning</h4>
 503 |         <label>@btn-warning-color</label>
 504 |         <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-warning-color">
 505 |         <label>@btn-warning-bg</label>
 506 |         <input type="text" class="form-control" placeholder="@brand-warning" data-var="@btn-warning-bg">
 507 |         <label>@btn-warning-border</label>
 508 |         <input type="text" class="form-control" placeholder=" darken(@btn-warning-bg, 5%)" data-var="@btn-warning-border">
 509 |         <h4>Danger</h4>
 510 |         <label>@btn-danger-color</label>
 511 |         <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-danger-color">
 512 |         <label>@btn-danger-bg</label>
 513 |         <input type="text" class="form-control" placeholder="@brand-danger" data-var="@btn-danger-bg">
 514 |         <label>@btn-danger-border</label>
 515 |         <input type="text" class="form-control" placeholder="darken(@btn-danger-bg, 5%)" data-var="@btn-danger-border">
 516 |       </div>
 517 |     </div>
 518 | 
 519 | 
 520 |     <h2 id="variables-form-states">Form states and alerts</h2>
 521 |     <div class="row">
 522 |       <div class="col-md-6">
 523 |         <h4>Success</h4>
 524 |         <label>@state-success-text</label>
 525 |         <input type="text" class="form-control" placeholder="#468847" data-var="@state-success-text">
 526 |         <label>@state-success-bg</label>
 527 |         <input type="text" class="form-control" placeholder="#dff0d8" data-var="@state-success-bg">
 528 |         <label>@state-success-border</label>
 529 |         <input type="text" class="form-control" placeholder="darken(spin(@state-success-bg, -10), 5%)" data-var="@state-success-border">
 530 |         <h4>Warning</h4>
 531 |         <label>@state-warning-text</label>
 532 |         <input type="text" class="form-control" placeholder="#c09853" data-var="@state-warning-text">
 533 |         <label>@state-warning-bg</label>
 534 |         <input type="text" class="form-control" placeholder="#fcf8e3" data-var="@state-warning-bg">
 535 |         <label>@state-warning-border</label>
 536 |         <input type="text" class="form-control" placeholder="darken(spin(@state-warning-bg, -10), 3%)" data-var="@state-warning-border">
 537 |       </div>
 538 |       <div class="col-md-6">
 539 |         <h4>Danger</h4>
 540 |         <label>@state-danger-text</label>
 541 |         <input type="text" class="form-control" placeholder="#b94a48" data-var="@state-danger-text">
 542 |         <label>@state-danger-bg</label>
 543 |         <input type="text" class="form-control" placeholder="#f2dede" data-var="@state-danger-bg">
 544 |         <label>@state-danger-border</label>
 545 |         <input type="text" class="form-control" placeholder="darken(spin(@state-danger-bg, -10), 3%)" data-var="@state-danger-border">
 546 |         <h4>Info</h4>
 547 |         <label>@state-info-text</label>
 548 |         <input type="text" class="form-control" placeholder="#3a87ad" data-var="@state-info-text">
 549 |         <label>@state-info-bg</label>
 550 |         <input type="text" class="form-control" placeholder="#d9edf7" data-var="@state-info-bg">
 551 |         <label>@state-info-border</label>
 552 |         <input type="text" class="form-control" placeholder="darken(spin(@state-info-bg, -10), 7%)" data-var="@state-info-border">
 553 |       </div>
 554 |     </div>
 555 | 
 556 | 
 557 |     <h2 id="variables-alerts">Alerts</h2>
 558 | 
 559 |     <h4>Base styles</h4>
 560 |     <div class="row">
 561 |       <div class="col-md-4">
 562 |         <label>@alert-padding</label>
 563 |         <input type="text" class="form-control" placeholder="15px" data-var="@alert-padding">
 564 |       </div>
 565 |       <div class="col-md-4">
 566 |         <label>@alert-border-radius</label>
 567 |         <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@alert-border-radius">
 568 |       </div>
 569 |       <div class="col-md-4">
 570 |         <label>@alert-link-font-weight</label>
 571 |         <input type="text" class="form-control" placeholder="bold" data-var="@alert-link-font-weight">
 572 |       </div>
 573 |     </div>
 574 | 
 575 |     <div class="row">
 576 |       <div class="col-lg-6">
 577 |         <h4>Warning</h4>
 578 |         <label>@alert-warning-text</label>
 579 |         <input type="text" class="form-control" placeholder="@state-warning-text" data-var="@alert-warning-text">
 580 |         <label>@alert-warning-bg</label>
 581 |         <input type="text" class="form-control" placeholder="@state-warning-bg" data-var="@alert-warning-bg">
 582 |         <label>@alert-warning-border</label>
 583 |         <input type="text" class="form-control" placeholder="@state-warning-border" data-var="@alert-warning-border">
 584 | 
 585 |         <h4>Success</h4>
 586 |         <label>@alert-success-text</label>
 587 |         <input type="text" class="form-control" placeholder="@state-success-text" data-var="@alert-success-text">
 588 |         <label>@alert-success-bg</label>
 589 |         <input type="text" class="form-control" placeholder="@state-success-bg" data-var="@alert-success-bg">
 590 |         <label>@alert-success-border</label>
 591 |         <input type="text" class="form-control" placeholder="@state-success-border" data-var="@alert-success-border">
 592 |       </div>
 593 |       <div class="col-lg-6">
 594 |         <h4>Danger</h4>
 595 |         <label>@alert-danger-text</label>
 596 |         <input type="text" class="form-control" placeholder="@state-danger-text" data-var="@alert-danger-text">
 597 |         <label>@alert-danger-bg</label>
 598 |         <input type="text" class="form-control" placeholder="@state-danger-bg" data-var="@alert-danger-bg">
 599 |         <label>@alert-danger-border</label>
 600 |         <input type="text" class="form-control" placeholder="@state-danger-border" data-var="@alert-danger-border">
 601 | 
 602 |         <h4>Info</h4>
 603 |         <label>@alert-info-text</label>
 604 |         <input type="text" class="form-control" placeholder="@state-info-text" data-var="@alert-info-text">
 605 |         <label>@alert-info-bg</label>
 606 |         <input type="text" class="form-control" placeholder="@state-info-bg" data-var="@alert-info-bg">
 607 |         <label>@alert-info-border</label>
 608 |         <input type="text" class="form-control" placeholder="@state-info-border" data-var="@alert-info-border">
 609 |       </div>
 610 |     </div>
 611 | 
 612 | 
 613 |     <h2 id="variables-navbar">Navbar</h2>
 614 | 
 615 |     <h3>Base styles</h3>
 616 |     <div class="row">
 617 |       <div class="col-md-4">
 618 |         <label>@navbar-height</label>
 619 |         <input type="text" class="form-control" placeholder="50px" data-var="@navbar-height">
 620 |         <label>@navbar-margin-bottom</label>
 621 |         <input type="text" class="form-control" placeholder="@line-height-computed" data-var="@navbar-margin-bottom">
 622 |       </div>
 623 |       <div class="col-md-4">
 624 |         <label>@navbar-padding-horizontal</label>
 625 |         <input type="text" class="form-control" placeholder="floor(@grid-gutter-width / 2)" data-var="@navbar-padding-horizontal">
 626 |         <label>@navbar-padding-vertical</label>
 627 |         <input type="text" class="form-control" placeholder="((@navbar-height - @line-height-computed) / 2)" data-var="@@navbar-padding-vertical">
 628 |       </div>
 629 |       <div class="col-md-4">
 630 |         <label>@navbar-border-radius</label>
 631 |         <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@navbar-border-radius">
 632 |       </div>
 633 |     </div>
 634 | 
 635 |     <div class="row">
 636 |       <div class="col-lg-6">
 637 |         <h3>Default navbar</h3>
 638 |         <h4>Basics</h4>
 639 |         <label>@navbar-default-color</label>
 640 |         <input type="text" class="form-control" placeholder="#777" data-var="@navbar-default-color">
 641 |         <label>@navbar-default-bg</label>
 642 |         <input type="text" class="form-control" placeholder="#f8f8f8" data-var="@navbar-default-bg">
 643 |         <label>@navbar-default-border</label>
 644 |         <input type="text" class="form-control" placeholder="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-border">
 645 | 
 646 |         <h4>Links</h4>
 647 |         <label>@navbar-default-link-color</label>
 648 |         <input type="text" class="form-control" placeholder="#777" data-var="@navbar-default-link-color">
 649 |         <label>@navbar-default-link-hover-color</label>
 650 |         <input type="text" class="form-control" placeholder="#333" data-var="@navbar-default-link-hover-color">
 651 |         <label>@navbar-default-link-hover-bg</label>
 652 |         <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-link-hover-bg">
 653 |         <label>@navbar-default-link-active-color</label>
 654 |         <input type="text" class="form-control" placeholder="#555" data-var="@navbar-default-link-active-color">
 655 |         <label>@navbar-default-link-active-bg</label>
 656 |         <input type="text" class="form-control" placeholder="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-link-active-bg">
 657 |         <label>@navbar-default-link-disabled-color</label>
 658 |         <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-default-link-disabled-color">
 659 |         <label>@navbar-default-link-disabled-bg</label>
 660 |         <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-link-disabled-bg">
 661 | 
 662 |         <h4>Brand</h4>
 663 |         <label>@navbar-default-brand-color</label>
 664 |         <input type="text" class="form-control" placeholder="@navbar-default-link-color" data-var="@navbar-default-brand-color">
 665 |         <label>@navbar-default-brand-hover-color</label>
 666 |         <input type="text" class="form-control" placeholder="darken(@navbar-default-brand-color, 10%)" data-var="@navbar-default-brand-hover-color">
 667 |         <label>@navbar-default-brand-hover-bg</label>
 668 |         <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-brand-hover-bg">
 669 | 
 670 |         <h4>Toggle</h4>
 671 |         <label>@navbar-default-toggle-hover-bg</label>
 672 |         <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-default-toggle-hover-bg">
 673 |         <label>@navbar-default-toggle-icon-bar-bg</label>
 674 |         <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-default-toggle-icon-bar-bg">
 675 |         <label>@navbar-default-toggle-border-color</label>
 676 |         <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-default-toggle-border-color">
 677 |       </div>
 678 | 
 679 |       <div class="col-lg-6">
 680 |         <h3>Inverted navbar</h3>
 681 | 
 682 |         <h4>Basics</h4>
 683 |         <label>@navbar-inverse-color</label>
 684 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@navbar-inverse-color">
 685 |         <label>@navbar-inverse-bg</label>
 686 |         <input type="text" class="form-control" placeholder="#222" data-var="@navbar-inverse-bg">
 687 |         <label>@navbar-inverse-border</label>
 688 |         <input type="text" class="form-control" placeholder="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-border">
 689 | 
 690 |         <h4>Links</h4>
 691 |         <label>@navbar-inverse-link-color</label>
 692 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@navbar-inverse-link-color">
 693 |         <label>@navbar-inverse-link-hover-color</label>
 694 |         <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-link-hover-color">
 695 |         <label>@navbar-inverse-link-hover-bg</label>
 696 |         <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-link-hover-bg">
 697 |         <label>@navbar-inverse-link-active-color</label>
 698 |         <input type="text" class="form-control" placeholder="@navbar-inverse-link-hover-color" data-var="@navbar-inverse-link-active-color">
 699 |         <label>@navbar-inverse-link-active-bg</label>
 700 |         <input type="text" class="form-control" placeholder="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-link-active-bg">
 701 |         <label>@navbar-inverse-link-disabled-color</label>
 702 |         <input type="text" class="form-control" placeholder="#444" data-var="@navbar-inverse-link-disabled-color">
 703 |         <label>@navbar-inverse-link-disabled-bg</label>
 704 |         <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-link-disabled-bg">
 705 | 
 706 |         <h4>Brand</h4>
 707 |         <label>@navbar-inverse-brand-color</label>
 708 |         <input type="text" class="form-control" placeholder="@navbar-inverse-link-color" data-var="@navbar-inverse-brand-color">
 709 |         <label>@navbar-inverse-brand-hover-color</label>
 710 |         <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-brand-hover-color">
 711 |         <label>@navbar-inverse-brand-hover-bg</label>
 712 |         <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-brand-hover-bg">
 713 | 
 714 |         <h4>Toggle</h4>
 715 |         <label>@navbar-inverse-toggle-hover-bg</label>
 716 |         <input type="text" class="form-control" placeholder="#333" data-var="@navbar-inverse-toggle-hover-bg">
 717 |         <label>@navbar-inverse-toggle-icon-bar-bg</label>
 718 |         <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-toggle-icon-bar-bg">
 719 |         <label>@navbar-inverse-toggle-border-color</label>
 720 |         <input type="text" class="form-control" placeholder="#333" data-var="@navbar-inverse-toggle-border-color">
 721 |       </div>
 722 |     </div>
 723 | 
 724 | 
 725 |     <h2 id="variables-nav">Nav</h2>
 726 | 
 727 |     <h3>Default nav</h3>
 728 |     <div class="row">
 729 |       <div class="col-lg-6">
 730 |         <h4>Common values</h4>
 731 |         <label>@nav-link-padding</label>
 732 |         <input type="text" class="form-control" placeholder="10px 15px" data-var="@nav-link-padding">
 733 |         <label>@nav-link-hover-bg</label>
 734 |         <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@nav-link-hover-bg">
 735 |         <label>@nav-disabled-link-color</label>
 736 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@nav-disabled-link-color">
 737 |         <label>@nav-disabled-link-hover-color</label>
 738 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@nav-disabled-link-hover-color">
 739 |         <label>@nav-open-link-hover-color</label>
 740 |         <input type="text" class="form-control" placeholder="#fff" data-var="@nav-open-link-hover-color">
 741 |         <label>@nav-open-caret-border-color</label>
 742 |         <input type="text" class="form-control" placeholder="#fff" data-var="@nav-open-caret-border-color">
 743 | 
 744 |         <h4>Pills</h4>
 745 |         <label>@nav-pills-active-link-hover-color</label>
 746 |         <input type="text" class="form-control" placeholder="@fff" data-var="@nav-pills-active-link-hover-color">
 747 |         <label>@nav-pills-active-link-hover-bg</label>
 748 |         <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@nav-pills-active-link-hover-bg">
 749 |       </div>
 750 |       <div class="col-lg-6">
 751 |         <h4>Tabs</h4>
 752 |         <label>@nav-taborder-color</label>
 753 |         <input type="text" class="form-control" placeholder="#ddd" data-var="@nav-taborder-color">
 754 |         <label>@nav-talink-hover-border-color</label>
 755 |         <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@nav-talink-hover-border-color">
 756 |         <label>@nav-taactive-link-hover-color</label>
 757 |         <input type="text" class="form-control" placeholder="@gray" data-var="@nav-taactive-link-hover-color">
 758 |         <label>@nav-taactive-link-hover-bg</label>
 759 |         <input type="text" class="form-control" placeholder="@body-bg" data-var="@nav-taactive-link-hover-bg">
 760 |         <label>@nav-taactive-link-hover-border-color</label>
 761 |         <input type="text" class="form-control" placeholder="#ddd" data-var="@nav-taactive-link-hover-border-color">
 762 |         <label>@nav-tajustified-link-border-color</label>
 763 |         <input type="text" class="form-control" placeholder="#ddd" data-var="@nav-tajustified-link-border-color">
 764 |         <label>@nav-tajustified-active-link-border-color</label>
 765 |         <input type="text" class="form-control" placeholder="@body-bg" data-var="@nav-tajustified-active-link-border-color">
 766 |       </div>
 767 |     </div>
 768 | 
 769 | 
 770 |     <h2 id="variables-tables">Tables</h2>
 771 |     <div class="row">
 772 |       <div class="col-md-4">
 773 |         <label>@table-cell-padding</label>
 774 |         <input type="text" class="form-control" placeholder="8px" data-var="@table-cell-padding">
 775 |         <p class="help-block">Default padding for <code>&lt;th&gt;</code>s and <code>&lt;td&gt;</code>s</p>
 776 |         <label>@table-condensed-cell-padding</label>
 777 |         <input type="text" class="form-control" placeholder="5px" data-var="@table-condensed-cell-padding">
 778 |         <p class="help-block">Default padding cells in <code>.table-condensed</code></p>
 779 |       </div>
 780 |       <div class="col-md-4">
 781 |         <label>@table-bg</label>
 782 |         <input type="text" class="form-control" placeholder="transparent" data-var="@table-bg">
 783 |         <p class="help-block">Default background color used for all tables.</p>
 784 |         <label>@table-bg-accent</label>
 785 |         <input type="text" class="form-control" placeholder="#f9f9f9" data-var="@table-bg-accent">
 786 |         <p class="help-block">Background color used for <code>.table-striped</code>.</p>
 787 |       </div>
 788 |       <div class="col-md-4">
 789 |         <label>@table-bg-hover</label>
 790 |         <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@table-bg-hover">
 791 |         <p class="help-block">Background color used for <code>.table-hover</code>.</p>
 792 |         <label>@table-border-color</label>
 793 |         <input type="text" class="form-control" placeholder="#ddd" data-var="@table-border-color">
 794 |         <p class="help-block">Border color for table and cell borders.</p>
 795 |       </div>
 796 |     </div>
 797 | 
 798 | 
 799 |     <h2 id="variables-forms">Forms</h2>
 800 | 
 801 |     <h3>Inputs</h3>
 802 |     <div class="row">
 803 |       <div class="col-md-4">
 804 |         <label>@input-color</label>
 805 |         <input type="text" class="form-control" placeholder="@gray" data-var="@input-color">
 806 |         <p class="help-block">Text color for <code>&lt;input&gt;</code>s</p>
 807 |         <label>@input-bg</label>
 808 |         <input type="text" class="form-control" placeholder="#fff" data-var="@input-bg">
 809 |         <p class="help-block"><code>&lt;input&gt;</code> background color</p>
 810 |       </div>
 811 |       <div class="col-md-4">
 812 |         <label>@input-border</label>
 813 |         <input type="text" class="form-control" placeholder="#ccc" data-var="@input-border">
 814 |         <p class="help-block"><code>&lt;input&gt;</code> border color</p>
 815 |         <label>@input-border-radius</label>
 816 |         <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@input-border-radius">
 817 |         <p class="help-block"><code>&lt;input&gt;</code> border radius</p>
 818 |       </div>
 819 |       <div class="col-md-4">
 820 |         <label>@input-color-placeholder</label>
 821 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@input-color-placeholder">
 822 |         <p class="help-block">Placeholder text color</p>
 823 |       </div>
 824 |     </div>
 825 | 
 826 |     <h3>Input states</h3>
 827 |     <div class="row">
 828 |       <div class="col-md-4">
 829 |         <label>@input-border-focus</label>
 830 |         <input type="text" class="form-control" placeholder="#66afe9" data-var="@input-border-focus">
 831 |         <p class="help-block">Border color for inputs on focus</p>
 832 |       </div>
 833 |       <div class="col-md-4">
 834 |         <label>@input-bg-disabled</label>
 835 |         <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@input-bg-disabled">
 836 |         <p class="help-block"><code>&lt;input disabled&gt;</code> background color</p>
 837 |       </div>
 838 |     </div>
 839 | 
 840 |     <h3>Input sizes</h3>
 841 |     <div class="row">
 842 |       <div class="col-md-4">
 843 |         <label>@input-height-base</label>
 844 |         <input type="text" class="form-control" placeholder="(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var="@input-height-base">
 845 |         <p class="help-block">Default <code>.form-control</code> height</p>
 846 |       </div>
 847 |       <div class="col-md-4">
 848 |         <label>@input-height-large</label>
 849 |         <input type="text" class="form-control" placeholder="(floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)" data-var="@input-height-large">
 850 |         <p class="help-block">Large <code>.form-control</code> height</p>
 851 |       </div>
 852 |       <div class="col-md-4">
 853 |         <label>@input-height-small</label>
 854 |         <input type="text" class="form-control" placeholder="(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var="@input-height-small">
 855 |         <p class="help-block">Small <code>.form-control</code> height</p>
 856 |       </div>
 857 |     </div>
 858 | 
 859 |     <h3>Legend</h3>
 860 |     <div class="row">
 861 |       <div class="col-md-4">
 862 |         <label>@legend-color</label>
 863 |         <input type="text" class="form-control" placeholder="@gray-dark" data-var="@legend-color">
 864 |       </div>
 865 |       <div class="col-md-4">
 866 |         <label>@legend-border-color</label>
 867 |         <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@legend-border-color">
 868 |       </div>
 869 |     </div>
 870 | 
 871 |     <h3>Input groups</h3>
 872 |     <div class="row">
 873 |       <div class="col-md-4">
 874 |         <label>@input-group-addon-bg</label>
 875 |         <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@input-group-addon-bg">
 876 |         <p class="help-block">Background color for textual input addons</p>
 877 |       </div>
 878 |       <div class="col-md-4">
 879 |         <label>@input-group-addon-border-color</label>
 880 |         <input type="text" class="form-control" placeholder="@input-border" data-var="@input-group-addon-border-color">
 881 |         <p class="help-block">Border color for textual input addons</p>
 882 |       </div>
 883 |     </div>
 884 | 
 885 | 
 886 |     <h2 id="variables-dropdowns">Dropdowns</h2>
 887 |     <div class="row">
 888 |       <div class="col-md-6">
 889 |         <h3>Dropdown menu</h3>
 890 |         <label>@dropdown-bg</label>
 891 |         <input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-bg">
 892 |         <p class="help-block">Dropdown menu background color</p>
 893 |         <label>@dropdown-border</label>
 894 |         <input type="text" class="form-control" placeholder="rgba(0,0,0,.15)" data-var="@dropdown-border">
 895 |         <p class="help-block">Dropdown menu border color</p>
 896 |         <label>@dropdown-fallback-border</label>
 897 |         <input type="text" class="form-control" placeholder="#ccc" data-var="@dropdown-fallback-border">
 898 |         <p class="help-block">Dropdown menu border color <strong>for IE8</strong></p>
 899 |         <label>@dropdown-caret-color</label>
 900 |         <input type="text" class="form-control" placeholder="@dropdown-caret-color" data-var="@dropdown-caret-color">
 901 |         <p class="help-block">Indicator arrow for showing an element has a dropdown</p>
 902 |         <label>@dropdown-divider-bg</label>
 903 |         <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@dropdown-divider-bg">
 904 |         <p class="help-block">Dropdown divider top border color</p>
 905 |         <label>@dropdown-header-color</label>
 906 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@dropdown-header-color">
 907 |         <p class="help-block">Text color for headers within dropdown menus</p>
 908 |       </div>
 909 |       <div class="col-md-6">
 910 |         <h3>Dropdown items</h3>
 911 |         <label>@dropdown-link-color</label>
 912 |         <input type="text" class="form-control" placeholder="@gray-dark" data-var="@dropdown-link-color">
 913 |         <p class="help-block">Dropdown text color</p>
 914 | 
 915 |         <label>@dropdown-link-hover-color</label>
 916 |         <input type="text" class="form-control" placeholder="darken(@dropdown-link-color, 5%)" data-var="@dropdown-link-hover-color">
 917 |         <p class="help-block">Hovered dropdown menu entry text color</p>
 918 |         <label>@dropdown-link-hover-bg</label>
 919 |         <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@dropdown-link-hover-bg">
 920 |         <p class="help-block">Hovered dropdown menu entry text color</p>
 921 | 
 922 |         <label>@dropdown-link-active-color</label>
 923 |         <input type="text" class="form-control" placeholder="@component-active-color" data-var="@dropdown-link-active-color">
 924 |         <p class="help-block">Active dropdown menu entry text color</p>
 925 |         <label>@dropdown-link-active-bg</label>
 926 |         <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@dropdown-link-active-bg">
 927 |         <p class="help-block">Active dropdown menu entry background color</p>
 928 | 
 929 |         <label>@dropdown-link-disabled-color</label>
 930 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@dropdown-link-disabled-color">
 931 |         <p class="help-block">Disabled dropdown menu entry background color</p>
 932 |       </div>
 933 |     </div>
 934 | 
 935 | 
 936 |     <h2 id="variables-panels-wells">Panels and wells</h2>
 937 | 
 938 |     <h3>Common panel styles</h3>
 939 |     <div class="row">
 940 |       <div class="col-md-6">
 941 |         <label>@panel-bg</label>
 942 |         <input type="text" class="form-control" placeholder="#fff" data-var="@panel-bg">
 943 |         <label>@panel-inner-border</label>
 944 |         <input type="text" class="form-control" placeholder="#ddd" data-var="@panel-inner-border">
 945 |         <p class="help-block">Border color for elements within panels</p>
 946 |       </div>
 947 |       <div class="col-md-6">
 948 |         <label>@panel-border-radius</label>
 949 |         <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@panel-border-radius">
 950 |         <label>@panel-footer-bg</label>
 951 |         <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-footer-bg">
 952 |       </div>
 953 |     </div>
 954 |     <h3>Contextual panel colors</h3>
 955 |     <div class="row">
 956 |       <div class="col-md-6">
 957 |         <h4>Default</h4>
 958 |         <label>@panel-default-text</label>
 959 |         <input type="text" class="form-control" placeholder="@gray-dark" data-var="@panel-default-text">
 960 |         <label>@panel-default-border</label>
 961 |         <input type="text" class="form-control" placeholder="#ddd" data-var="@panel-default-border">
 962 |         <label>@panel-default-heading-bg</label>
 963 |         <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-default-heading-bg">
 964 | 
 965 |         <h4>Primary</h4>
 966 |         <label>@panel-primary-text</label>
 967 |         <input type="text" class="form-control" placeholder="#fff" data-var="@panel-primary-text">
 968 |         <label>@panel-primary-border</label>
 969 |         <input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-border">
 970 |         <label>@panel-primary-heading-bg</label>
 971 |         <input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-heading-bg">
 972 | 
 973 |         <h4>Success</h4>
 974 |         <label>@panel-success-text</label>
 975 |         <input type="text" class="form-control" placeholder="@state-success-text" data-var="@panel-success-text">
 976 |         <label>@panel-success-border</label>
 977 |         <input type="text" class="form-control" placeholder="@state-success-border" data-var="@panel-success-border">
 978 |         <label>@panel-success-heading-bg</label>
 979 |         <input type="text" class="form-control" placeholder="@state-success-bg" data-var="@panel-success-heading-bg">
 980 |       </div>
 981 |       <div class="col-md-6">
 982 |         <h4>Info</h4>
 983 |         <label>@panel-info-text</label>
 984 |         <input type="text" class="form-control" placeholder="@state-info-text" data-var="@panel-info-text">
 985 |         <label>@panel-info-border</label>
 986 |         <input type="text" class="form-control" placeholder="@state-info-border" data-var="@panel-info-border">
 987 |         <label>@panel-info-heading-bg</label>
 988 |         <input type="text" class="form-control" placeholder="@state-info-bg" data-var="@panel-info-heading-bg">
 989 | 
 990 |         <h4>Warning</h4>
 991 |         <label>@panel-warning-text</label>
 992 |         <input type="text" class="form-control" placeholder="@state-warning-text" data-var="@panel-warning-text">
 993 |         <label>@panel-warning-border</label>
 994 |         <input type="text" class="form-control" placeholder="@state-warning-border" data-var="@panel-warning-border">
 995 |         <label>@panel-warning-heading-bg</label>
 996 |         <input type="text" class="form-control" placeholder="@state-warning-bg" data-var="@panel-warning-heading-bg">
 997 | 
 998 |         <h4>Danger</h4>
 999 |         <label>@panel-danger-text</label>
1000 |         <input type="text" class="form-control" placeholder="@state-danger-text" data-var="@panel-danger-text">
1001 |         <label>@panel-danger-border</label>
1002 |         <input type="text" class="form-control" placeholder="@state-danger-border" data-var="@panel-danger-border">
1003 |         <label>@panel-danger-heading-bg</label>
1004 |         <input type="text" class="form-control" placeholder="@state-danger-bg" data-var="@panel-danger-heading-bg">
1005 |       </div>
1006 |     </div>
1007 | 
1008 |     <h3>Wells</h3>
1009 |     <label>@well-bg</label>
1010 |     <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@well-bg">
1011 | 
1012 | 
1013 |     <h2 id="variables-accordion">Accordion</h2>
1014 |     <label>@accordion-border-bg</label>
1015 |     <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@accordion-border-bg">
1016 | 
1017 | 
1018 |     <h2 id="variables-badges">Badges</h2>
1019 | 
1020 |     <h3>Base styles</h3>
1021 |     <div class="row">
1022 |       <div class="col-md-4">
1023 |         <label>@badge-font-weight</label>
1024 |         <input type="text" class="form-control" placeholder="bold" data-var="@badge-font-weight">
1025 |         <label>@badge-color</label>
1026 |         <input type="text" class="form-control" placeholder="#fff" data-var="@badge-color">
1027 |       </div>
1028 |       <div class="col-md-4">
1029 |         <label>@badge-bg</label>
1030 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@badge-bg">
1031 |       </div>
1032 |       <div class="col-md-4">
1033 |         <label>@badge-border-radius</label>
1034 |         <input type="text" class="form-control" placeholder="10px" data-var="@badge-border-radius">
1035 |       </div>
1036 |     </div>
1037 | 
1038 |     <h3>States</h3>
1039 |     <div class="row">
1040 |       <div class="col-md-4">
1041 |         <label>@badge-link-hover-color</label>
1042 |         <input type="text" class="form-control" placeholder="#fff" data-var="@badge-link-hover-color">
1043 |         <p class="help-block">Linked badge text color on hover</p>
1044 |       </div>
1045 |       <div class="col-md-4">
1046 |         <label>@badge-active-color</label>
1047 |         <input type="text" class="form-control" placeholder="@link-color" data-var="@badge-active-color">
1048 |         <p class="help-block">Badge text color in active nav link</p>
1049 |       </div>
1050 |       <div class="col-md-4">
1051 |         <label>@badge-active-bg</label>
1052 |         <input type="text" class="form-control" placeholder="@badge-color" data-var="@badge-active-bg">
1053 |         <p class="help-block">Badge background color in active nav link</p>
1054 |       </div>
1055 |     </div>
1056 | 
1057 | 
1058 |     <h2 id="variables-breadcrumbs">Breadcrumbs</h2>
1059 |     <div class="row">
1060 |       <div class="col-md-6">
1061 |         <label>@breadcrumb-color</label>
1062 |         <input type="text" class="form-control" placeholder="#ccc" data-var="@breadcrumb-color">
1063 |         <p class="help-block">Breadcrumb text color</p>
1064 |         <label>@breadcrumb-bg</label>
1065 |         <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@breadcrumb-bg">
1066 |         <p class="help-block">Breadcrumb background color</p>
1067 |       </div>
1068 |       <div class="col-md-6">
1069 |         <label>@breadcrumb-active-color</label>
1070 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@breadcrumb-active-color">
1071 |         <p class="help-block">Text color of current page in the breadcrumb</p>
1072 |         <label>@breadcrumb-separator</label>
1073 |         <input type="text" class="form-control" placeholder='"/"' data-var="@breadcrumb-separator">
1074 |         <p class="help-block">Textual separator for between breadcrumb elements</p>
1075 |       </div>
1076 |     </div>
1077 | 
1078 |     <h2 id="variables-jumbotron">Jumbotron</h2>
1079 |     <div class="row">
1080 |       <div class="col-md-6">
1081 |         <label>@jumbotron-padding</label>
1082 |         <input type="text" class="form-control" placeholder="30px" data-var="@jumbotron-padding">
1083 |         <label>@jumbotron-bg</label>
1084 |         <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@jumbotron-bg">
1085 |         <label>@jumbotron-font-size</label>
1086 |         <input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.5)" data-var="@jumbotron-font-size">
1087 |       </div>
1088 |       <div class="col-md-6">
1089 |         <label>@jumbotron-color</label>
1090 |         <input type="text" class="form-control" placeholder="inherit" data-var="@jumbotron-color">
1091 |         <label>@jumbotron-heading-color</label>
1092 |         <input type="text" class="form-control" placeholder="inherit" data-var="@jumbotron-heading-color">
1093 |       </div>
1094 |     </div>
1095 | 
1096 | 
1097 |     <h2 id="variables-modals">Modals</h2>
1098 | 
1099 |     <h3>Base modal</h3>
1100 |     <div class="row">
1101 |       <div class="col-md-4">
1102 |         <label>@modal-inner-padding</label>
1103 |         <input type="text" class="form-control" placeholder="20px" data-var="@modal-inner-padding">
1104 |         <p class="help-block">Padding applied to the modal body</p>
1105 |       </div>
1106 |       <div class="col-md-4">
1107 |         <label>@modal-backdrop-bg</label>
1108 |         <input type="text" class="form-control" placeholder="#000" data-var="@modal-backdrop-bg">
1109 |         <p class="help-block">Modal backdrop background color</p>
1110 |       </div>
1111 |     </div>
1112 | 
1113 |     <h3>Modal header and footer</h3>
1114 |     <div class="row">
1115 |       <div class="col-md-4">
1116 |         <label>@modal-title-padding</label>
1117 |         <input type="text" class="form-control" placeholder="15px" data-var="@modal-title-padding">
1118 |         <p class="help-block">Padding applied to the modal title</p>
1119 |       </div>
1120 |       <div class="col-md-4">
1121 |         <label>@modal-title-line-height</label>
1122 |         <input type="text" class="form-control" placeholder="@line-height-base" data-var="@modal-title-line-height">
1123 |         <p class="help-block">Modal title line-height</p>
1124 |       </div>
1125 |       <div class="col-md-4">
1126 |         <label>@modal-header-border-color</label>
1127 |         <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@modal-header-border-color">
1128 |         <p class="help-block">Modal header border color</p>
1129 |         <label>@modal-footer-border-color</label>
1130 |         <input type="text" class="form-control" placeholder="@modal-header-border-color" data-var="@modal-footer-border-color">
1131 |         <p class="help-block">Modal footer border color</p>
1132 |       </div>
1133 |     </div>
1134 | 
1135 |     <h3>Modal content</h3>
1136 |     <div class="row">
1137 |       <div class="col-md-4">
1138 |         <label>@modal-content-bg</label>
1139 |         <input type="text" class="form-control" placeholder="#fff" data-var="@modal-content-bg">
1140 |         <p class="help-block">Background color of modal content area</p>
1141 |       </div>
1142 |       <div class="col-md-4">
1143 |         <label>@modal-content-border-color</label>
1144 |         <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)" data-var="@modal-content-border-color">
1145 |         <p class="help-block">Modal content border color</p>
1146 |       </div>
1147 |       <div class="col-md-4">
1148 |         <label>@modal-content-fallback-border-color</label>
1149 |         <input type="text" class="form-control" placeholder="#999" data-var="@modal-content-fallback-border-color">
1150 |         <p class="help-block">Modal content border color <strong>for IE8</strong></p>
1151 |       </div>
1152 |     </div>
1153 | 
1154 | 
1155 |     <h2 id="variables-carousel">Carousel</h2>
1156 |     <div class="row">
1157 |       <div class="col-md-4">
1158 |         <label>@carousel-text-shadow</label>
1159 |         <input type="text" class="form-control" placeholder="0 1px 2px rgba(0,0,0,.6)" data-var="@carousel-text-shadow">
1160 |       </div>
1161 |       <div class="col-md-4">
1162 |         <label>@carousel-control-color</label>
1163 |         <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-control-color">
1164 |       </div>
1165 |       <div class="col-md-4">
1166 |         <label>@carousel-caption-color</label>
1167 |         <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-caption-color">
1168 |       </div>
1169 |     </div>
1170 |     <div class="row">
1171 |       <div class="col-md-4">
1172 |         <label>@carousel-indicator-border-color</label>
1173 |         <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-indicator-border-color">
1174 |       </div>
1175 |       <div class="col-md-4">
1176 |         <label>@carousel-indicator-active-bg</label>
1177 |         <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-indicator-active-bg">
1178 |       </div>
1179 |     </div>
1180 | 
1181 | 
1182 |     <h2 id="variables-list-group">List group</h2>
1183 | 
1184 |     <h3>Base styles</h3>
1185 |     <div class="row">
1186 |       <div class="col-md-4">
1187 |         <label>@list-group-bg</label>
1188 |         <input type="text" class="form-control" placeholder="#fff" data-var="@list-group-bg">
1189 |         <p class="help-block">Background color on <code>.list-group-item</code></p>
1190 |       </div>
1191 |       <div class="col-md-4">
1192 |         <label>@list-group-border</label>
1193 |         <input type="text" class="form-control" placeholder="#ddd" data-var="@list-group-border">
1194 |         <p class="help-block"><code>.list-group-item</code> border color</p>
1195 |       </div>
1196 |       <div class="col-md-4">
1197 |         <label>@list-group-border-radius</label>
1198 |         <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@list-group-border-radius">
1199 |         <p class="help-block">List group border radius</p>
1200 |       </div>
1201 |     </div>
1202 | 
1203 |     <h3>Hover and active states</h3>
1204 |     <div class="row">
1205 |       <div class="col-md-6">
1206 |         <label>@list-group-hover-bg</label>
1207 |         <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@list-group-hover-bg">
1208 |         <p class="help-block">Background color of single list elements on hover</p>
1209 |       </div>
1210 |     </div>
1211 |     <div class="row">
1212 |       <div class="col-md-4">
1213 |         <label>@list-group-active-color</label>
1214 |         <input type="text" class="form-control" placeholder="#fff" data-var="@list-group-active-color">
1215 |         <p class="help-block">Text color of active list elements</p>
1216 |       </div>
1217 |       <div class="col-md-4">
1218 |         <label>@list-group-active-bg</label>
1219 |         <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@list-group-active-bg">
1220 |         <p class="help-block">Background color of active list elements</p>
1221 |       </div>
1222 |       <div class="col-md-4">
1223 |         <label>@list-group-active-border</label>
1224 |         <input type="text" class="form-control" placeholder="@list-group-active-bg" data-var="@list-group-active-border">
1225 |         <p class="help-block">Border color of active list elements</p>
1226 |       </div>
1227 |     </div>
1228 | 
1229 | 
1230 |     <h2 id="variables-thumbnails">Thumbnails</h2>
1231 | 
1232 |     <h3>Base thumbnail</h3>
1233 |     <div class="row">
1234 |       <div class="col-md-6">
1235 |         <label>@thumbnail-padding</label>
1236 |         <input type="text" class="form-control" placeholder="4px" data-var="@thumbnail-padding">
1237 |         <p class="help-block">Padding around the thumbnail image</p>
1238 |         <label>@thumbnail-bg</label>
1239 |         <input type="text" class="form-control" placeholder="@body-bg" data-var="@thumbnail-bg">
1240 |         <p class="help-block">Thumbnail background color</p>
1241 |       </div>
1242 |       <div class="col-md-6">
1243 |         <label>@thumbnail-border</label>
1244 |         <input type="text" class="form-control" placeholder="#ddd" data-var="@thumbnail-border">
1245 |         <p class="help-block">Thumbnail border color</p>
1246 |         <label>@thumbnail-border-radius</label>
1247 |         <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@thumbnail-border-radius">
1248 |         <p class="help-block">Thumbnail border radius</p>
1249 |       </div>
1250 |     </div>
1251 | 
1252 |     <h3>Thumbnail captions</h3>
1253 |     <div class="row">
1254 |       <div class="col-md-6">
1255 |         <label>@thumbnail-caption-padding</label>
1256 |         <input type="text" class="form-control" placeholder="9px" data-var="@thumbnail-caption-padding">
1257 |         <p class="help-block">Padding around the thumbnail caption</p>
1258 |       </div>
1259 |       <div class="col-md-6">
1260 |         <label>@thumbnail-caption-color</label>
1261 |         <input type="text" class="form-control" placeholder="@text-color" data-var="@thumbnail-caption-color">
1262 |         <p class="help-block">Custom text color for thumbnail captions</p>
1263 |       </div>
1264 |     </div>
1265 | 
1266 | 
1267 |     <h2 id="variables-progress">Progress bars</h2>
1268 | 
1269 |     <h3>Shared styles</h3>
1270 |     <div class="row">
1271 |       <div class="col-md-4">
1272 |         <label>@progress-bg</label>
1273 |         <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@progress-bg">
1274 |         <p class="help-block">Background color of the whole progress component</p>
1275 |       </div>
1276 |       <div class="col-md-4">
1277 |         <label>@progress-bar-color</label>
1278 |         <input type="text" class="form-control" placeholder="#fff" data-var="@progress-bar-color">
1279 |         <p class="help-block">Info progress bar text color</p>
1280 |       </div>
1281 |       <div class="col-md-4">
1282 |         <label>@progress-bar-text-shadow</label>
1283 |         <input type="text" class="form-control" placeholder="0 -1px 0 rgba(0,0,0,.25)" data-var="@progress-bar-text-shadow">
1284 |         <p class="help-block">Info progress bar text shadow</p>
1285 |       </div>
1286 |       <div class="col-md-4">
1287 |         <label>@progress-bar-bg</label>
1288 |         <input type="text" class="form-control" placeholder="@brand-primary" data-var="@progress-bar-bg">
1289 |         <p class="help-block">Default progress bar color</p>
1290 |       </div>
1291 |     </div>
1292 | 
1293 |     <h3>Contextual states</h3>
1294 |     <div class="row">
1295 |       <div class="col-md-4">
1296 |         <label>@progress-bar-success-bg</label>
1297 |         <input type="text" class="form-control" placeholder="@brand-success" data-var="@progress-bar-success-bg">
1298 |         <p class="help-block">Success progress bar color</p>
1299 |         <label>@progress-bar-info-bg</label>
1300 |         <input type="text" class="form-control" placeholder="@brand-info" data-var="@progress-bar-info-bg">
1301 |         <p class="help-block">Info progress bar color</p>
1302 |       </div>
1303 |       <div class="col-md-4">
1304 |         <label>@progress-bar-warning-bg</label>
1305 |         <input type="text" class="form-control" placeholder="@brand-warning" data-var="@progress-bar-warning-bg">
1306 |         <p class="help-block">Warning progress bar color</p>
1307 |         <label>@progress-bar-danger-bg</label>
1308 |         <input type="text" class="form-control" placeholder="@brand-danger" data-var="@progress-bar-danger-bg">
1309 |         <p class="help-block">Danger progress bar color</p>
1310 |       </div>
1311 |     </div>
1312 | 
1313 | 
1314 |     <h2 id="variables-pagination">Pagination</h2>
1315 | 
1316 |     <h3>Default styles</h3>
1317 |     <div class="row">
1318 |       <div class="col-md-4">
1319 |         <label>@pagination-bg</label>
1320 |         <input type="text" class="form-control" placeholder="#fff" data-var="@pagination-bg">
1321 |         <p class="help-block">Background color</p>
1322 |       </div>
1323 |       <div class="col-md-4">
1324 |         <label>@pagination-border</label>
1325 |         <input type="text" class="form-control" placeholder="#ddd" data-var="@pagination-border">
1326 |         <p class="help-block">Border color</p>
1327 |       </div>
1328 |       <div class="col-md-4">
1329 |         <label>@pagination-hover-bg</label>
1330 |         <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@pagination-hover-bg">
1331 |         <p class="help-block">Background hover color</p>
1332 |       </div>
1333 |     </div>
1334 | 
1335 |     <h3>Disabled and active states</h3>
1336 |     <div class="row">
1337 |       <div class="col-md-4">
1338 |         <label>@pagination-disabled-color</label>
1339 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@pagination-disabled-color">
1340 |         <p class="help-block">Disabled text color</p>
1341 |       </div>
1342 |       <div class="col-md-4">
1343 |         <label>@pagination-active-bg</label>
1344 |         <input type="text" class="form-control" placeholder="@brand-primary" data-var="@pagination-active-bg">
1345 |         <p class="help-block">Active background color</p>
1346 |       </div>
1347 |       <div class="col-md-4">
1348 |         <label>@pagination-active-color</label>
1349 |         <input type="text" class="form-control" placeholder="#fff" data-var="@pagination-active-color">
1350 |         <p class="help-block">Active text color</p>
1351 |       </div>
1352 |     </div>
1353 | 
1354 | 
1355 |     <h2 id="variables-pager">Pager</h2>
1356 |     <div class="row">
1357 |       <div class="col-md-4">
1358 |         <label>@pager-border-radius</label>
1359 |         <input type="text" class="form-control" placeholder="15px" data-var="@pager-border-radius">
1360 |         <p class="help-block">Pager border radius</p>
1361 |       </div>
1362 |       <div class="col-md-4">
1363 |         <label>@pager-disabled-color</label>
1364 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@pager-disabled-color">
1365 |         <p class="help-block">Pager disabled state color</p>
1366 |       </div>
1367 |     </div>
1368 | 
1369 | 
1370 |     <h2 id="variables-labels">Labels</h2>
1371 |     <div class="row">
1372 |       <div class="col-md-4">
1373 |         <label>@label-color</label>
1374 |         <input type="text" class="form-control" placeholder="#fff" data-var="@label-color">
1375 |         <p class="help-block">Default label text color</p>
1376 |       </div>
1377 |       <div class="col-md-4">
1378 |         <label>@label-link-hover-color</label>
1379 |         <input type="text" class="form-control" placeholder="#fff" data-var="@label-link-hover-color">
1380 |         <p class="help-block">Default text color of a linked label</p>
1381 |       </div>
1382 |       <div class="col-md-4">
1383 |         <label>@label-default-bg</label>
1384 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@label-default-bg">
1385 |         <p class="help-block">Default label background color</p>
1386 |       </div>
1387 |     </div>
1388 | 
1389 |     <div class="row">
1390 |       <div class="col-md-4">
1391 |         <label>@label-primary-bg</label>
1392 |         <input type="text" class="form-control" placeholder="@brand-primary" data-var="@label-primary-bg">
1393 |         <p class="help-block">Primary label background color</p>
1394 |         <label>@label-success-bg</label>
1395 |         <input type="text" class="form-control" placeholder="@brand-success" data-var="@label-success-bg">
1396 |         <p class="help-block">Success label background color</p>
1397 |       </div>
1398 |       <div class="col-md-4">
1399 |         <label>@label-info-bg</label>
1400 |         <input type="text" class="form-control" placeholder="@brand-info" data-var="@label-info-bg">
1401 |         <p class="help-block">Info label background color</p>
1402 |         <label>@label-warning-bg</label>
1403 |         <input type="text" class="form-control" placeholder="@brand-warning" data-var="@label-warning-bg">
1404 |         <p class="help-block">Warning label background color</p>
1405 |       </div>
1406 |       <div class="col-md-4">
1407 |         <label>@label-danger-bg</label>
1408 |         <input type="text" class="form-control" placeholder="@brand-danger" data-var="@label-danger-bg">
1409 |         <p class="help-block">Danger label background color</p>
1410 |       </div>
1411 |     </div>
1412 | 
1413 | 
1414 |     <h2 id="variables-tooltips-popovers">Tooltips and popovers</h2>
1415 | 
1416 |     <h3>Tooltip</h3>
1417 |     <div class="row">
1418 |       <div class="col-md-4">
1419 |         <label>@tooltip-color</label>
1420 |         <input type="text" class="form-control" placeholder="#fff" data-var="@tooltip-color">
1421 |         <p class="help-block">Tooltip text color</p>
1422 |         <label>@tooltip-bg</label>
1423 |         <input type="text" class="form-control" placeholder="#000" data-var="@tooltip-bg">
1424 |         <p class="help-block">Tooltip background color</p>
1425 |       </div>
1426 |       <div class="col-md-4">
1427 |         <label>@tooltip-arrow-width</label>
1428 |         <input type="text" class="form-control" placeholder="5px" data-var="@tooltip-arrow-width">
1429 |         <p class="help-block">Tooltip arrow width</p>
1430 |         <label>@tooltip-arrow-color</label>
1431 |         <input type="text" class="form-control" placeholder="@tooltip-bg" data-var="@tooltip-arrow-color">
1432 |         <p class="help-block">Tooltip arrow color</p>
1433 |       </div>
1434 |       <div class="col-md-4">
1435 |         <label>@tooltip-max-width</label>
1436 |         <input type="text" class="form-control" placeholder="200px" data-var="@tooltip-max-width">
1437 |         <p class="help-block">Tooltip max width</p>
1438 |       </div>
1439 |     </div>
1440 | 
1441 |     <h3>Popovers</h3>
1442 | 
1443 |     <h3>Base styles</h3>
1444 |     <div class="row">
1445 |       <div class="col-md-4">
1446 |         <label>@popover-bg</label>
1447 |         <input type="text" class="form-control" placeholder="#fff" data-var="@popover-bg">
1448 |         <p class="help-block">Popover body background color</p>
1449 |         <label>@popover-max-width</label>
1450 |         <input type="text" class="form-control" placeholder="276px" data-var="@popover-max-width">
1451 |         <p class="help-block">Popover maximum width</p>
1452 |       </div>
1453 |       <div class="col-md-4">
1454 |         <label>@popover-border-color</label>
1455 |         <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)" data-var="@popover-border-color">
1456 |         <p class="help-block">Popover border color</p>
1457 |         <label>@popover-fallback-border-color</label>
1458 |         <input type="text" class="form-control" placeholder="#ccc" data-var="@popover-fallback-border-color">
1459 |         <p class="help-block">Popover fallback border color</p>
1460 |       </div>
1461 |       <div class="col-md-4">
1462 |         <label>@popover-title-bg</label>
1463 |         <input type="text" class="form-control" placeholder="darken(@popover-bg, 3%)" data-var="@popover-title-bg">
1464 |         <p class="help-block">Popover title background color</p>
1465 |       </div>
1466 |     </div>
1467 | 
1468 |     <h3>Popover arrows</h3>
1469 |     <div class="row">
1470 |       <div class="col-md-4">
1471 |         <label>@popover-arrow-width</label>
1472 |         <input type="text" class="form-control" placeholder="10px" data-var="@popover-arrow-width">
1473 |         <p class="help-block">Popover arrow width</p>
1474 |       </div>
1475 |       <div class="col-md-4">
1476 |         <label>@popover-arrow-color</label>
1477 |         <input type="text" class="form-control" placeholder="#fff" data-var="@popover-arrow-color">
1478 |         <p class="help-block">Popover arrow color</p>
1479 |       </div>
1480 |     </div>
1481 |     <div class="row">
1482 |       <div class="col-md-4">
1483 |         <label>@popover-arrow-outer-width</label>
1484 |         <input type="text" class="form-control" placeholder="(@popover-arrow-width + 1)" data-var="@popover-arrow-outer-width">
1485 |         <p class="help-block">Popover outer arrow width</p>
1486 |       </div>
1487 |       <div class="col-md-4">
1488 |         <label>@popover-arrow-outer-color</label>
1489 |         <input type="text" class="form-control" placeholder="rgba(0,0,0,.25)" data-var="@popover-arrow-outer-color">
1490 |         <p class="help-block">Popover outer arrow color</p>
1491 |       </div>
1492 |       <div class="col-md-4">
1493 |         <label>@popover-arrow-outer-fallback-color</label>
1494 |         <input type="text" class="form-control" placeholder="#999" data-var="@popover-arrow-outer-fallback-color">
1495 |         <p class="help-block">Popover outer arrow fallback color</p>
1496 |       </div>
1497 |     </div>
1498 | 
1499 | 
1500 |     <h2 id="variables-close">Close button</h2>
1501 |     <div class="row">
1502 |       <div class="col-md-4">
1503 |         <label>@close-font-weight</label>
1504 |         <input type="text" class="form-control" placeholder="bold" data-var="@close-font-weight">
1505 |       </div>
1506 |       <div class="col-md-4">
1507 |         <label>@close-color</label>
1508 |         <input type="text" class="form-control" placeholder="#000" data-var="@close-color">
1509 |       </div>
1510 |       <div class="col-md-4">
1511 |         <label>@close-text-shadow</label>
1512 |         <input type="text" class="form-control" placeholder="0 1px 0 #fff" data-var="@close-text-shadow">
1513 |       </div>
1514 |     </div>
1515 | 
1516 | 
1517 |     <h2 id="variables-type">Type</h2>
1518 |     <div class="row">
1519 |       <div class="col-md-6">
1520 |         <label>@text-muted</label>
1521 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@text-muted">
1522 |         <p class="help-block">Text muted color</p>
1523 |       </div>
1524 |       <div class="col-md-6">
1525 |         <label>@abbr-border-color</label>
1526 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@abbr-border-color">
1527 |         <p class="help-block">Abbreviations and acronyms border color</p>
1528 |       </div>
1529 |       <div class="col-md-6">
1530 |         <label>@headings-small-color</label>
1531 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@headings-small-color">
1532 |         <p class="help-block">Headings small color</p>
1533 |       </div>
1534 |       <div class="col-md-6">
1535 |         <label>@blockquote-small-color</label>
1536 |         <input type="text" class="form-control" placeholder="@gray-light" data-var="@blockquote-small-color">
1537 |         <p class="help-block">Blockquote small color</p>
1538 |       </div>
1539 |       <div class="col-md-6">
1540 |         <label>@blockquote-border-color</label>
1541 |         <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@blockquote-border-color">
1542 |         <p class="help-block">Blockquote border color</p>
1543 |       </div>
1544 |       <div class="col-md-6">
1545 |         <label>@page-header-border-color</label>
1546 |         <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@page-header-border-color">
1547 |         <p class="help-block">Page header border color</p>
1548 |       </div>
1549 |     </div>
1550 | 
1551 | 
1552 |     <h2 id="variables-other">Other</h2>
1553 |     <div class="row">
1554 |       <div class="col-md-6">
1555 |         <label>@hr-border</label>
1556 |         <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@hr-border">
1557 |         <p class="help-block">Horizontal line color</p>
1558 |       </div>
1559 |       <div class="col-md-6">
1560 |         <label>@component-offset-horizontal</label>
1561 |         <input type="text" class="form-control" placeholder="180px" data-var="@component-offset-horizontal">
1562 |         <p class="help-block">Horizontal offset for forms and lists</p>
1563 |       </div>
1564 |     </div>
1565 |   </div>
1566 | 
1567 |   <div class="docs-section">
1568 |     <div class="page-header">
1569 |       <h1 id="download">Download</h1>
1570 |     </div>
1571 |     <p class="lead">Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
1572 |     <div class="customize-download">
1573 |       <button type="submit" id="btn-compile" class="btn btn-block btn-lg btn-outline" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Compile and Download</button>
1574 |     </div>
1575 |   </div><!-- /download -->
1576 | </form>
1577 | 


--------------------------------------------------------------------------------