diff --git a/docs/_includes/nav-customize.html b/docs/_includes/nav-customize.html
new file mode 100644
index 0000000000000000000000000000000000000000..5a869659f6a76e225ebc37b7edf134df4add24be
--- /dev/null
+++ b/docs/_includes/nav-customize.html
@@ -0,0 +1,37 @@
+<li>
+ <a href="#components">LESS components</a>
+ <ul class="nav">
+ <li><a href="#components-basics">The basics</a></li>
+ <li><a href="#components-standard">Standard styles</a></li>
+ <li><a href="#components-features">Bootstrap features</a></li>
+ </ul>
+</li>
+<li>
+ <a href="#plugins">jQuery plugins</a>
+</li>
+<li>
+ <a href="#variables">LESS variables</a>
+ <ul class="nav">
+ <li><a href="#customize-basics">The basics</a></li>
+ <li><a href="#customize-buttons">Buttons</a></li>
+ <li><a href="#customize-form-states">Form states</a></li>
+ <li><a href="#customize-alerts">Alerts</a></li>
+ <li><a href="#customize-navbar">Navbar</a></li>
+ <li><a href="#customize-tables">Tables</a></li>
+ <li><a href="#customize-forms">Forms</a></li>
+ <li><a href="#customize-dropdowns">Dropdowns</a></li>
+ <li><a href="#customize-panels-wells">Panels and wells</a></li>
+ <li><a href="#customize-jumbotron">Jumbotron</a></li>
+ <li><a href="#customize-modals">Modals</a></li>
+ <li><a href="#customize-list-group">List group</a></li>
+ <li><a href="#customize-thumbnails">Thumbnails</a></li>
+ <li><a href="#customize-progress">Progress bars</a></li>
+ <li><a href="#customize-pagination">Pagination</a></li>
+ <li><a href="#customize-labels">Labels</a></li>
+ <li><a href="#customize-tooltips-popovers">Tooltips and popovers</a></li>
+ <li><a href="#customize-other">Other</a></li>
+ </ul>
+</li>
+<li>
+ <a href="#download">Download</a>
+</li>
\ No newline at end of file
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 638b5485e96b3ff71416a68e77741c293e944463..d7d49e1b610fc0d3ba5be0491a93021af9aa91e6 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -31,6 +31,8 @@
{% include nav-components.html %}
{% elsif page.slug == "js" %}
{% include nav-javascript.html %}
+ {% elsif page.slug == "customize" %}
+ {% include nav-customize.html %}
{% endif %}
</ul>
</div>
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 9221cac1bdb0067170ba75aec3ea0e7eb25f7615..ddab6ba6a9305b6f238b4373ba3e6e2a1baccc43 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -94,6 +94,29 @@ body {
+/* Customize and Download button
+-------------------------------------------------- */
+
+.bs-customize-download {
+ text-align:center;
+}
+.bs-customize-download .btn {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ padding: 18px 24px;
+ font-size: 21px;
+ color: #b94a48;
+ background-color: #fff;
+ border-color: #b94a48;
+}
+.bs-customize-download .btn:hover,
+.bs-customize-download .btn:active {
+ color: #fff;
+ background-color: #b94a48;
+}
+
+
+
/* Docs pages and sections
-------------------------------------------------- */
diff --git a/docs/customize.html b/docs/customize.html
index 32a00b441e9942730fdac5d477f797a076a7dda1..6a703e47f73bdc4114d18f07be49d93c8e74723e 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -1,354 +1,1160 @@
---
-layout: customize
+layout: default
title: Customize and download
slug: customize
+lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.
---
-<div class="bs-docs-sidebar">
- <ul class="nav">
- <li><a href="#components">1. Choose components</a></li>
- <li><a href="#plugins">2. Select jQuery plugins</a></li>
- <li><a href="#variables">3. Customize variables</a></li>
- <li><a href="#download">4. Download</a></li>
- </ul>
-</div>
-
-
-<!-- Customize form
-================================================== -->
-<form>
- <section class="download" id="components">
- <div class="page-header">
- <a class="btn btn-default btn-small pull-right toggle-all" href="#">Toggle all</a>
- <h1>
- 1. Choose components
- </h1>
+ <!-- Customize
+ ================================================== -->
+ <form>
+ <div class="bs-docs-section" id="components">
+ <div class="page-header">
+ <a class="btn btn-default pull-right toggle-all" href="#">Toggle all</a>
+ <h1>LESS components</h1>
+ </div>
+ <p class="lead">Choose which LESS files should be compiled into your custom stylesheets.</p>
+ <div class="bs-callout">
+ <h4>Read the documentation</h4>
+ <p>Make an informed choice by first reading about <a href="/css/">CSS</a> and <a href="/components/">Components</a> in the docs.</p>
+ </div>
+ <h3 id="components-basics">The basics</h3>
+ <div class="row">
+ <div class="col col-lg-6">
+ <h4>Layout</h4>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="scaffolding.less">
+ Scaffolding
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="grid.less">
+ Grid
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="normalize.less">
+ Normalized base styles
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="print.less">
+ Print media styles
+ </label>
+ </div>
+ </div>
+ <div class="col col-lg-6">
+ <h4>Utility classes</h4>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="utilities.less">
+ Basic utilities
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="responsive-utilities.less">
+ Responsive utilities
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="component-animations.less">
+ JavaScript helping classes
+ </label>
+ </div>
+ </div>
+ </div>
+ <h3 id="components-standard">Standard element styles</h3>
+ <div class="row">
+ <div class="col col-lg-6">
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="type.less">
+ Type and color
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="tables.less">
+ Tables
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="code.less">
+ Code
+ </label>
+ </div>
+ </div>
+ <div class="col col-lg-6">
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="forms.less">
+ Forms
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="buttons.less">
+ Buttons
+ </label>
+ </div>
+ </div>
+ </div>
+ <h3 id="components-features">Bootstrap features</h3>
+ <div class="row">
+ <div class="col col-lg-6">
+ <h4>Navigation</h4>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="navbar.less">
+ Navbar
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="navs.less">
+ Navs
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="pagination.less">
+ Pagination
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="pager.less">
+ Pager
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="breadcrumbs.less">
+ Breadcrumbs
+ </label>
+ </div>
+ </div>
+ <div class="col col-lg-6">
+ <h4>Additional information</h4>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="modals.less">
+ Modals
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="alerts.less">
+ Alerts
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="dropdowns.less">
+ Dropdowns
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="tooltip.less">
+ Tooltips
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="popovers.less">
+ Popovers
+ </label>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col col-lg-6">
+ <h4>Content blocks</h4>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="jumbotron.less">
+ Jumbotron
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="carousel.less">
+ Carousel
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="accordion.less">
+ Accordion
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="panels.less">
+ Panels
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="wells.less">
+ Wells
+ </label>
+ </div>
+ </div>
+ <div class="col col-lg-6">
+ <h4>Media</h4>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="glyphicons.less">
+ Glyphicons
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="thumbnails.less">
+ Thumbnails
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="media.less">
+ Media items
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="list-group.less">
+ List groups
+ </label>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col col-lg-6">
+ <h4>Other</h4>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="badges.less">
+ Badges
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="labels.less">
+ Labels
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="button-groups.less">
+ Button groups
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="close.less">
+ Close icon
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="progress-bars.less">
+ Progress bars
+ </label>
+ </div>
+ </div>
+ </div>
</div>
- <div class="row download-builder">
- <div class="col-span-3">
- <h3>Scaffolding</h3>
- <label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> Normalize and reset</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="print.less"> Print</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="scaffolding.less"> Body type and links</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="grid.less"> Grid system</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="layouts.less"> Layouts</label>
- <h3>Base CSS</h3>
- <label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> Headings, body, etc</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> Code and pre</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="labels-badges.less"> Labels and badges</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> Tables</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> Forms</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="sprites.less"> Icons</label>
- </div><!-- /span -->
- <div class="col-span-3">
- <h3>Components</h3>
- <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="navbar.less"> Navbar</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="breadcrumbs.less"> Breadcrumbs</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="pagination.less"> Pagination</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="pager.less"> Pager</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="thumbnails.less"> Thumbnails</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> Alerts</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> Progress bars</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> Hero unit</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="media.less"> Media component</label>
- <h3>JS Components</h3>
- <label class="checkbox"><input checked="checked" type="checkbox" value="tooltip.less"> Tooltips</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> Popovers</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="modals.less"> Modals</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="dropdowns.less"> Dropdowns</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label>
- </div><!-- /span -->
- <div class="col-span-3">
- <h3>Miscellaneous</h3>
- <label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> Wells</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
- <h3>Responsive</h3>
- <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> Visible/hidden classes</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> Narrow tablets and below (<767px)</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> Tablets to desktops (767-979px)</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> Large desktops (>1200px)</label>
- <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-navbar.less"> Responsive navbar</label>
- </div><!-- /span -->
- </div><!-- /row -->
- </section>
-
- <section class="download" id="plugins">
- <div class="page-header">
- <a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
- <h1>
- 2. Select jQuery plugins
- </h1>
+
+ <div class="bs-docs-section" id="plugins">
+ <div class="page-header">
+ <a class="btn btn-default pull-right toggle-all" href="#">Toggle all</a>
+ <h1>jQuery plugins</h1>
+ </div>
+ <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files.</p>
+ <div class="bs-callout">
+ <h4>Read the documentation</h4>
+ <p>Make an informed choice by first reading about <a href="/javascript/">JavaScript</a> in the docs.</p>
+ </div>
+ <div class="row">
+ <div class="col col-lg-6">
+ <h4>Linked to components</h4>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="alert.js">
+ Alert dismissal
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="button.js">
+ Advanced buttons
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="carousel.js">
+ Carousel functionality
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="dropdown.js">
+ Dropdowns
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="modal.js">
+ Modals
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="tooltip.js">
+ Tooltips
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="popover.js">
+ Popovers <small>(requires Tooltips)</small>
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="tab.js">
+ Toggable tabs
+ </label>
+ </div>
+ </div>
+ <div class="col col-lg-6">
+ <h4>Magic</h4>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="affix.js">
+ Affix
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="collapse.js">
+ Collapse
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="scrollspy.js">
+ Scrollspy
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" checked value="transition.js">
+ Transitions <small>(required for any kind of animation)</small>
+ </label>
+ </div>
+ </div>
+ </div>
+ <div class="bs-callout">
+ <h4>Heads up!</h4>
+ <p>All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
+ </div>
</div>
- <div class="row download-builder">
- <div class="col-span-3">
- <label class="checkbox">
- <input type="checkbox" checked="true" value="transition.js">
- Transitions <small>(required for any animation)</small>
- </label>
- <label class="checkbox">
- <input type="checkbox" checked="true" value="modal.js">
- Modals
- </label>
- <label class="checkbox">
- <input type="checkbox" checked="true" value="dropdown.js">
- Dropdowns
- </label>
- <label class="checkbox">
- <input type="checkbox" checked="true" value="scrollspy.js">
- Scrollspy
- </label>
- <label class="checkbox">
- <input type="checkbox" checked="true" value="tab.js">
- Togglable tabs
- </label>
- <label class="checkbox">
- <input type="checkbox" checked="true" value="tooltip.js">
- Tooltips
- </label>
- <label class="checkbox">
- <input type="checkbox" checked="true" value="popover.js">
- Popovers <small>(requires Tooltips)</small>
- </label>
- </div><!-- /span -->
- <div class="col-span-3">
- <label class="checkbox">
- <input type="checkbox" checked="true" value="affix.js">
- Affix
- </label>
- <label class="checkbox">
- <input type="checkbox" checked="true" value="alert.js">
- Alert messages
- </label>
- <label class="checkbox">
- <input type="checkbox" checked="true" value="button.js">
- Buttons
- </label>
- <label class="checkbox">
- <input type="checkbox" checked="true" value="collapse.js">
- Collapse
- </label>
- <label class="checkbox">
- <input type="checkbox" checked="true" value="carousel.js">
- Carousel
- </label>
- <label class="checkbox">
- <input type="checkbox" checked="true" value="typeahead.js">
- Typeahead
- </label>
- </div><!-- /span -->
- <div class="col-span-3">
- <h4 class="muted">Heads up!</h4>
- <p class="muted">All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
- </div><!-- /span -->
- </div><!-- /row -->
- </section>
-
-
- <section class="download" id="variables">
- <div class="page-header">
- <a class="btn btn-small pull-right toggle-all" href="#">Reset to defaults</a>
- <h1>
- 3. Customize variables
- </h1>
+
+
+ <div class="bs-docs-section" id="variables">
+ <div class="page-header">
+ <a class="btn btn-default pull-right toggle-all" href="#">Reset to defaults</a>
+ <h1>LESS variables</h1>
+ </div>
+ <p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
+ <h2 id="customize-basics">The basics</h2>
+ <h3>Body background</h3>
+ <label>@body-bg</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-text">Background color applied to <code><body></code>.</p>
+ <h3>Typography</h3>
+ <div class="row">
+ <div class="col col-lg-6">
+ <label>@font-family-sans-serif</label>
+ <input type="text" placeholder=""Helvetica Neue", Helvetica, Arial, sans-serif">
+ <p class="help-block">Default sans-serif fonts. Used almost anywhere in Bootstrap.</p>
+ <label>@font-family-serif</label>
+ <input type="text" placeholder="Georgia, "Times New Roman", Times, serif">
+ <p class="help-block">Default serif fonts.</p>
+ </div>
+ <div class="col col-lg-6">
+ <label>@font-family-monospace</label>
+ <input type="text" placeholder="Monaco, Menlo, Consolas, "Courier New", monospace">
+ <p class="help-block">Default monospace fonts. Most prominently used for <code><code></code> and <code><pre></code>.</p>
+ <label>@font-family-base</label>
+ <input type="text" placeholder="@font-family-sans-serif">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col col-lg-6">
+ <label>@font-size-base</label>
+ <input type="text" placeholder="14px">
+ <p class="help-block">Will be used to calculate font sizes throughout Bootstrap.</p>
+ <label>@line-height-base</label>
+ <input type="text" placeholder="1.428571429">
+ <p class="help-block">Will be used to calculate line heights throughout Bootstrap. Default is ˜14/20.</p>
+ </div>
+ <div class="col col-lg-6">
+ <label>@headings-font-weight</label>
+ <input type="text" placeholder="500">
+ <p class="help-block">Choose a separate font weight for headings.</p>
+ <label>@headings-line-height</label>
+ <input type="text" placeholder="1.1">
+ <p class="help-block">Choose a separate line height for headings.</p>
+ </div>
+ </div>
+ <h3>Colors</h3>
+ <div class="row">
+ <div class="col col-lg-6">
+ <p>Define custom colors used in several contexts.</p>
+ <label>@brand-primary</label>
+ <input type="text" placeholder="#428bca">
+ <p class="help-block">Used for primary buttons, panels and more.</p>
+ <label>@brand-success</label>
+ <input type="text" placeholder="#5cb85c">
+ <p class="help-block">Used to indicate success.</p>
+ <label>@brand-warning</label>
+ <input type="text" placeholder="#f0ad4e">
+ <p class="help-block">Used to indicate a warning.</p>
+ <label>@brand-danger</label>
+ <input type="text" placeholder="#d9534f">
+ <p class="help-block">Used to indicate danger.</p>
+ <label>@brand-info</label>
+ <input type="text" placeholder="#5bc0de">
+ <p class="help-block">Used to indicate informational content.</p>
+ </div>
+ <div class="col col-lg-6">
+ <p>Define your preferred colors for standard text and links.</p>
+ <label>@text-color</label>
+ <input type="text" placeholder="@gray-dark">
+ <p class="help-block">Color for all standard text.</p>
+ <label>@link-color</label>
+ <input type="text" placeholder="@brand-primary">
+ <p class="help-block">Link color for links in standard text.</p>
+ <label>@link-color-hover</label>
+ <input type="text" placeholder="darken(@link-color, 15%)">
+ <p class="help-block">Hovered link color. Leave this blank to compute using @link-color.</p>
+ </div>
+ </div>
+ <h3>Media queries breakpoints</h3>
+ <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
+ <div class="row">
+ <div class="col col-lg-6">
+ <label>@screen-tiny</label>
+ <input type="text" placeholder="480px">
+ <label>@screen-small</label>
+ <input type="text" placeholder="768px">
+ </div>
+ <div class="col col-lg-6">
+ <label>@screen-medium</label>
+ <input type="text" placeholder="992px">
+ <label>@screen-large</label>
+ <input type="text" placeholder="1200px">
+ </div>
+ </div>
+ <h3>The grid</h3>
+ <p>Define your custom responsive grid.</p>
+ <div class="row">
+ <div class="col col-lg-6">
+ <label>@grid-columns</label>
+ <input type="text" placeholder="12">
+ <p class="help-block">Number of columns in the grid.</p>
+ <label>@grid-gutter-width</label>
+ <input type="text" placeholder="30px">
+ <p class="help-block">Padding between columns.</p>
+ </div>
+ <div class="col col-lg-6">
+ <label>@grid-float-breakpoint</label>
+ <input type="text" placeholder="@screen-tablet">
+ <p class="help-block">Point at which the navbar stops collapsing.</p>
+ </div>
+ </div>
+ <h3>Components</h3>
+ <p>Define common padding and border radius sizes and more.</p>
+ <div class="row">
+ <div class="col col-lg-6">
+ <h4>Padding</h4>
+ <label>@padding-base-vertical</label>
+ <input type="text" placeholder="8px">
+ <label>@padding-base-horizontal</label>
+ <input type="text" placeholder="12px">
+ <label>@padding-large-vertical</label>
+ <input type="text" placeholder="14px">
+ <label>@padding-large-horizontal</label>
+ <input type="text" placeholder="16px">
+ <label>@padding-small-vertical</label>
+ <input type="text" placeholder="5px">
+ <label>@padding-small-horizontal</label>
+ <input type="text" placeholder="10px">
+ </div>
+ <div class="col col-lg-6">
+ <h4>Border radius sizes</h4>
+ <label>@border-radius-base</label>
+ <input type="text" placeholder="4px">
+ <label>@border-radius-large</label>
+ <input type="text" placeholder="6px">
+ <label>@border-radius-small</label>
+ <input type="text" placeholder="3px">
+ </div>
+ </div>
+ <h4>Active background color</h4>
+ <label>@component-active-bg</label>
+ <input type="text" placeholder="@brand-primary">
+ <p class="help-block">Used for active or hovered items in places like navs or dropdowns.</p>
+ <h2 id="customize-buttons">Buttons</h2>
+ <p>For each of Bootstrap's buttons, define text, background and border color.</p>
+ <div class="row">
+ <div class="col col-lg-6">
+ <h4>Default</h4>
+ <label>@btn-default-color</label>
+ <input type="text" placeholder="#fff">
+ <label>@btn-default-bg</label>
+ <input type="text" placeholder="#a7a99aa">
+ <label>@btn-default-border</label>
+ <input type="text" placeholder="@btn-default-bg">
+ <h4>Primary</h4>
+ <label>@btn-primary-color</label>
+ <input type="text" placeholder="@btn-default-color">
+ <label>@btn-primary-bg</label>
+ <input type="text" placeholder="@brand-primary">
+ <label>@btn-primary-border</label>
+ <input type="text" placeholder="@btn-primary-bg">
+ <h4>Info</h4>
+ <label>@btn-info-color</label>
+ <input type="text" placeholder="@btn-default-color">
+ <label>@btn-info-bg</label>
+ <input type="text" placeholder="@brand-info">
+ <label>@btn-info-border</label>
+ <input type="text" placeholder="@btn-info-bg">
+ </div>
+ <div class="col col-lg-6">
+ <h4>Success</h4>
+ <label>@btn-success-color</label>
+ <input type="text" placeholder="@btn-default-color">
+ <label>@btn-success-bg</label>
+ <input type="text" placeholder="@brand-success">
+ <label>@btn-success-border</label>
+ <input type="text" placeholder="@btn-success-bg">
+ <h4>Warning</h4>
+ <label>@btn-warning-color</label>
+ <input type="text" placeholder="@btn-default-color">
+ <label>@btn-warning-bg</label>
+ <input type="text" placeholder="@brand-warning">
+ <label>@btn-warning-border</label>
+ <input type="text" placeholder="@btn-warning-bg">
+ <h4>Danger</h4>
+ <label>@btn-danger-color</label>
+ <input type="text" placeholder="@btn-default-color">
+ <label>@btn-danger-bg</label>
+ <input type="text" placeholder="@brand-danger">
+ <label>@btn-danger-border</label>
+ <input type="text" placeholder="@btn-danger-bg">
+ </div>
+ </div>
+ <h2 id="customize-form-states">Form states and alerts</h2>
+ <p>Define colors for form feedback states and, by default, alerts.</p>
+ <div class="row">
+ <div class="col col-lg-6">
+ <h4>Success</h4>
+ <label>@state-success-text</label>
+ <input type="text" placeholder="#468847">
+ <label>@state-success-bg</label>
+ <input type="text" placeholder="#dff0d8">
+ <label>@state-success-border</label>
+ <input type="text" placeholder="darken(spin(@state-success-bg, -10), 5%)">
+ <h4>Warning</h4>
+ <label>@state-warning-text</label>
+ <input type="text" placeholder="#c09853">
+ <label>@state-warning-bg</label>
+ <input type="text" placeholder="#fcf8e3">
+ <label>@state-warning-border</label>
+ <input type="text" placeholder="darken(spin(@state-warning-bg, -10), 3%)">
+ </div>
+ <div class="col col-lg-6">
+ <h4>Danger</h4>
+ <label>@state-danger-text</label>
+ <input type="text" placeholder="#b94a48">
+ <label>@state-danger-bg</label>
+ <input type="text" placeholder="#f2dede">
+ <label>@state-danger-border</label>
+ <input type="text" placeholder="darken(spin(@state-danger-bg, -10), 3%)">
+ <h4>Info</h4>
+ <label>@state-info-text</label>
+ <input type="text" placeholder="#3a87ad">
+ <label>@state-info-bg</label>
+ <input type="text" placeholder="#d9edf7">
+ <label>@state-info-border</label>
+ <input type="text" placeholder="darken(spin(@state-info-bg, -10), 7%)">
+ </div>
+ </div>
+ <h2 id="customize-alerts">Alerts</h2>
+ <p>Define alert colors and border radius.</p>
+ <h4>Border radius</h4>
+ <label>@alert-border-radius</label>
+ <input type="text" placeholder="@border-radius-base">
+ <div class="row">
+ <div class="col col-lg-6">
+ <h4>Success</h4>
+ <label>@alert-success-text</label>
+ <input type="text" placeholder="@state-success-text">
+ <label>@alert-success-bg</label>
+ <input type="text" placeholder="@state-success-bg">
+ <label>@alert-success-border</label>
+ <input type="text" placeholder="@state-success-border">
+ <h4>Warning</h4>
+ <label>@alert-warning-text</label>
+ <input type="text" placeholder="@state-warning-text">
+ <label>@alert-warning-bg</label>
+ <input type="text" placeholder="@state-warning-bg">
+ <label>@alert-warning-border</label>
+ <input type="text" placeholder="@state-warning-border">
+ </div>
+ <div class="col col-lg-6">
+ <h4>Danger</h4>
+ <label>@alert-danger-text</label>
+ <input type="text" placeholder="@state-danger-text">
+ <label>@alert-danger-bg</label>
+ <input type="text" placeholder="@state-danger-bg">
+ <label>@alert-danger-border</label>
+ <input type="text" placeholder="@state-danger-border">
+ <h4>Info</h4>
+ <label>@alert-info-text</label>
+ <input type="text" placeholder="@state-info-text">
+ <label>@alert-info-bg</label>
+ <input type="text" placeholder="@state-info-bg">
+ <label>@alert-info-border</label>
+ <input type="text" placeholder="@state-info-border">
+ </div>
+ </div>
+ <h2 id="customize-navbar">Navbar</h2>
+ <div class="row">
+ <div class="col col-lg-6">
+ <h4>The basics</h4>
+ <label>@navbar-height</label>
+ <input type="text" placeholder="50px">
+ <label>@navbar-color</label>
+ <input type="text" placeholder="#777">
+ <label>@navbar-bg</label>
+ <input type="text" placeholder="#eee">
+ <h4>Links</h4>
+ <label>@navbar-link-color</label>
+ <input type="text" placeholder="#777">
+ <label>@navbar-link-hover-color</label>
+ <input type="text" placeholder="#333">
+ <label>@navbar-link-hover-bg</label>
+ <input type="text" placeholder="transparent">
+ <label>@navbar-link-active-color</label>
+ <input type="text" placeholder="#555">
+ <label>@navbar-link-active-bg</label>
+ <input type="text" placeholder="darken(@navbar-bg, 10%)">
+ <label>@navbar-link-disabled-color</label>
+ <input type="text" placeholder="#ccc">
+ <label>@navbar-link-disabled-bg</label>
+ <input type="text" placeholder="transparent">
+ <h4>Brand</h4>
+ <label>@navbar-brand-color</label>
+ <input type="text" placeholder="@navbar-link-color">
+ <label>@navbar-brand-hover-color</label>
+ <input type="text" placeholder="darken(@navbar-link-color, 10%)">
+ <label>@navbar-brand-hover-bg</label>
+ <input type="text" placeholder="transparent">
+ </div>
+ <div class="col col-lg-6">
+ <h3>Inverted variation</h3>
+ <h4>The basics</h4>
+ <label>@navbar-inverse-color</label>
+ <input type="text" placeholder="@gray-light">
+ <label>@navbar-inverse-bg</label>
+ <input type="text" placeholder="#222">
+ <h4>Links</h4>
+ <label>@navbar-inverse-link-color</label>
+ <input type="text" placeholder="@gray-light">
+ <label>@navbar-inverse-link-hover-color</label>
+ <input type="text" placeholder="#fff">
+ <label>@navbar-inverse-link-hover-bg</label>
+ <input type="text" placeholder="transparent">
+ <label>@navbar-inverse-link-active-color</label>
+ <input type="text" placeholder="@navbar-inverse-link-hover-color">
+ <label>@navbar-inverse-link-active-bg</label>
+ <input type="text" placeholder="darken(@navbar-inverse-bg, 10%)">
+ <label>@navbar-inverse-link-disabled-color</label>
+ <input type="text" placeholder="#444">
+ <label>@navbar-inverse-link-disabled-bg</label>
+ <input type="text" placeholder="transparent">
+ <h4>Brand</h4>
+ <label>@navbar-inverse-brand-color</label>
+ <input type="text" placeholder="@navbar-inverse-link-color">
+ <label>@navbar-inverse-brand-hover-color</label>
+ <input type="text" placeholder="#fff">
+ <label>@navbar-inverse-brand-hover-bg</label>
+ <input type="text" placeholder="transparent">
+ </div>
+ </div>
+ <h2 id="customize-tables">Tables</h2>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@table-bg</label>
+ <input type="text" placeholder="transparent">
+ <p class="help-block">Default background color used for all tables.</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@table-bg-accent</label>
+ <input type="text" placeholder="#f9f9f9">
+ <p class="help-block">Background color used for <code>.table-striped</code>.</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@table-bg-hover</label>
+ <input type="text" placeholder="#f5f5f5">
+ <p class="help-block">Background color used for <code>.table-hover</code>.</p>
+ </div>
+ </div>
+ <label>@table-border-color</label>
+ <input type="text" placeholder="#ddd">
+ <p class="help-block">Border color for table and cell borders.</p>
+ <h2 id="customize-forms">Forms</h2>
+ <div class="row">
+ <div class="col col-lg-6">
+ <h3>Background</h3>
+ <label>@input-bg</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block"><code><input></code> background color</p>
+ <label>@input-bg-disabled</label>
+ <input type="text" placeholder="@gray-lighter">
+ <p class="help-block"><code><input disabled></code>background color</p>
+ </div>
+ <div class="col col-lg-6">
+ <h3>Border</h3>
+ <label>@input-border</label>
+ <input type="text" placeholder="#ccc">
+ <p class="help-block"><code><input></code> border color</p>
+ <label>@input-border-radius</label>
+ <input type="text" placeholder="@border-radius-base">
+ <p class="help-block"><code><input></code>border radius</p>
+ </div>
+ </div>
+ <label>@input-color-placeholder</label>
+ <input type="text" placeholder="@gray-light">
+ <p class="help-block">Placeholder text color</p>
+ <h2 id="customize-dropdowns">Dropdowns</h2>
+ <div class="row">
+ <div class="col col-lg-6">
+ <h3>Background</h3>
+ <label>@dropdown-bg</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Dropdown menu background color</p>
+ <label>@dropdown-link-active-bg</label>
+ <input type="text" placeholder="@component-active-bg">
+ <p class="help-block">Active dropdown menu entry background color</p>
+ <label>@dropdown-link-hover-bg</label>
+ <input type="text" placeholder="@dropdown-link-active-bg">
+ <p class="help-block">Hovered dropdown menu entry background color</p>
+ </div>
+ <div class="col col-lg-6">
+ <h3>Colors</h3>
+ <label>@dropdown-link-color</label>
+ <input type="text" placeholder="@gray-dark">
+ <p class="help-block">Dropdown text color</p>
+ <label>@dropdown-link-active-color</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Active dropdown menu entry text color</p>
+ <label>@dropdown-link-hover-bg</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Hovered dropdown menu entry text color</p>
+ </div>
+ </div>
+ <h3>Dividers</h3>
+ <div class="row">
+ <div class="col col-lg-6">
+ <label>@dropdown-divider-top</label>
+ <input type="text" placeholder="#e5e5e5">
+ <p class="help-block">Dropdown divider top border color</p>
+ </div>
+ <div class="col col-lg-6">
+ <label>@dropdown-divider-bottom</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Dropdown divider bottom border color</p>
+ </div>
+ </div>
+ <h2 id="customize-panels-wells">Panels and wells</h2>
+ <h3>Panel background</h3>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@panel-bg</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Panel body background color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@panel-heading-bg</label>
+ <input type="text" placeholder="#f5f5f5">
+ <p class="help-block">Panel heading background color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@panel-footer-bg</label>
+ <input type="text" placeholder="#f5f5f5">
+ <p class="help-block">Panel footer background color</p>
+ </div>
+ </div>
+ <h3>Panel border</h3>
+ <div class="row">
+ <div class="col col-lg-6">
+ <label>@panel-border</label>
+ <input type="text" placeholder="#ddd">
+ <p class="help-block">Panel border color</p>
+ </div>
+ <div class="col col-lg-6">
+ <label>@panel-border-radius</label>
+ <input type="text" placeholder="@border-radius-base">
+ <p class="help-block">Panel border radius</p>
+ </div>
+ </div>
+ <h3>Contextual panel colors</h3>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@panel-primary-text</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Primary text color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@panel-primary-border</label>
+ <input type="text" placeholder="@brand-primary">
+ <p class="help-block">Primary border color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@panel-primary-heading-bg</label>
+ <input type="text" placeholder="@brand-primary">
+ <p class="help-block">Primary heading background color</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@panel-success-text</label>
+ <input type="text" placeholder="@state-success-text">
+ <p class="help-block">Success text color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@panel-success-border</label>
+ <input type="text" placeholder="@state-success-border">
+ <p class="help-block">Success border color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@panel-success-heading-bg</label>
+ <input type="text" placeholder="@state-success-bg">
+ <p class="help-block">Success heading background color</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@panel-warning-text</label>
+ <input type="text" placeholder="@state-warning-text">
+ <p class="help-block">Warning text color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@panel-warning-border</label>
+ <input type="text" placeholder="@state-warning-border">
+ <p class="help-block">Warning border color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@panel-warning-heading-bg</label>
+ <input type="text" placeholder="@state-warning-bg">
+ <p class="help-block">Warning heading background color</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@panel-danger-text</label>
+ <input type="text" placeholder="@state-danger-text">
+ <p class="help-block">Danger text color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@panel-danger-border</label>
+ <input type="text" placeholder="@state-danger-border">
+ <p class="help-block">Danger border color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@panel-danger-heading-bg</label>
+ <input type="text" placeholder="@state-danger-bg">
+ <p class="help-block">Danger heading background color</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@panel-info-text</label>
+ <input type="text" placeholder="@state-info-text">
+ <p class="help-block">Info text color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@panel-info-border</label>
+ <input type="text" placeholder="@state-info-border">
+ <p class="help-block">Info border color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@panel-info-heading-bg</label>
+ <input type="text" placeholder="@state-info-bg">
+ <p class="help-block">Info heading background color</p>
+ </div>
+ </div>
+ <h3>Well background</h3>
+ <label>@well-bg</label>
+ <input type="text" placeholder="#f5f5f5">
+ <h2 id="customize-jumbotron">Jumbotron</h2>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@jumbotron-bg</label>
+ <input type="text" placeholder="@gray-lighter">
+ <p class="help-block">Jumbotron background color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@jumbotron-heading-color</label>
+ <input type="text" placeholder="inherit">
+ <p class="help-block">Jumbotron heading color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@jumbotron-lead-color</label>
+ <input type="text" placeholder="inherit">
+ <p class="help-block">Jumbotron lead paragraph color</p>
+ </div>
+ </div>
+ <h2 id="customize-modals">Modals</h2>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@modal-inner-padding</label>
+ <input type="text" placeholder="20px">
+ <p class="help-block">Padding applied to the modal body</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@modal-title-padding</label>
+ <input type="text" placeholder="15px">
+ <p class="help-block">Padding applied to the modal title</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@modal-title-line-height</label>
+ <input type="text" placeholder="@line-height-base">
+ <p class="help-block">Modal title line-height</p>
+ </div>
+ </div>
+ <h2 id="customize-list-group">List group</h2>
+ <h3>Background</h3>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@list-group-bg</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Default background color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@list-group-hover-bg</label>
+ <input type="text" placeholder="#f5f5f5">
+ <p class="help-block">Background color of single list elements on hover</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@list-group-active-bg</label>
+ <input type="text" placeholder="@component-active-bg">
+ <p class="help-block">Background color of active list elements</p>
+ </div>
+ </div>
+ <h3>Borders</h3>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@list-group-border</label>
+ <input type="text" placeholder="#ddd">
+ <p class="help-block">Default border color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@list-group-border-radius</label>
+ <input type="text" placeholder="@border-radius-base">
+ <p class="help-block">List group border radius</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@list-group-active-border</label>
+ <input type="text" placeholder="@list-group-active-bg">
+ <p class="help-block">Border color of active list elements</p>
+ </div>
+ </div>
+ <label>@list-group-active-color</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Text color of active list elements</p>
+ <h2 id="customize-thumbnails">Thumbnails</h2>
+ <div class="row">
+ <div class="col col-lg-6">
+ <label>@thumbnail-caption-color</label>
+ <input type="text" placeholder="@text-color">
+ <p class="help-block">Custom text color for thumbnail captions</p>
+ <label>@thumbnail-bg</label>
+ <input type="text" placeholder="@body-bg">
+ <p class="help-block">Thumbnail background color</p>
+ </div>
+ <div class="col col-lg-6">
+ <label>@thumbnail-border</label>
+ <input type="text" placeholder="#ddd">
+ <p class="help-block">Thumbnail border color</p>
+ <label>@thumbnail-border-radius</label>
+ <input type="text" placeholder="@border-radius-base">
+ <p class="help-block">Thumbnail border radius</p>
+ </div>
+ </div>
+ <h2 id="customize-progress">Progress bars</h2>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@progress-bg</label>
+ <input type="text" placeholder="#f5f5f5">
+ <p class="help-block">Background color of the whole progress component</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@progress-bar-bg</label>
+ <input type="text" placeholder="@brand-primary">
+ <p class="help-block">Default progress bar color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@progress-bar-success-bg</label>
+ <input type="text" placeholder="@brand-success">
+ <p class="help-block">Success progress bar color</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@progress-bar-warning-bg</label>
+ <input type="text" placeholder="@brand-warning">
+ <p class="help-block">Warning progress bar color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@progress-bar-danger-bg</label>
+ <input type="text" placeholder="@brand-danger">
+ <p class="help-block">Danger progress bar color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@progress-bar-info-bg</label>
+ <input type="text" placeholder="@brand-info">
+ <p class="help-block">Info progress bar color</p>
+ </div>
+ </div>
+ <h2 id="customize-pagination">Pagination</h2>
+ <div class="row">
+ <div class="col col-lg-4">
+ <label>@pagination-bg</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Background color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@pagination-border</label>
+ <input type="text" placeholder="#ddd">
+ <p class="help-block">Border color</p>
+ </div>
+ <div class="col col-lg-4">
+ <label>@pagination-active-bg</label>
+ <input type="text" placeholder="#f5f5f5">
+ <p class="help-block">Active background color</p>
+ </div>
+ </div>
+ <h2 id="customize-labels">Labels</h2>
+ <div class="row">
+ <div class="col col-lg-6">
+ <label>@label-success-bg</label>
+ <input type="text" placeholder="@brand-success">
+ <p class="help-block">Success label background color</p>
+ <label>@label-info-bg</label>
+ <input type="text" placeholder="@brand-info">
+ <p class="help-block">Info label background color</p>
+ </div>
+ <div class="col col-lg-6">
+ <label>@label-warning-bg</label>
+ <input type="text" placeholder="@brand-warning">
+ <p class="help-block">Warning label background color</p>
+ <label>@label-danger-bg</label>
+ <input type="text" placeholder="@brand-danger">
+ <p class="help-block">Danger label background color</p>
+ </div>
+ </div>
+ <h2 id="customize-tooltips-popovers">Tooltips and popovers</h2>
+ <h3>Tooltip styles</h3>
+ <div class="row">
+ <div class="col col-lg-6">
+ <label>@tooltip-color</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Tooltip text color</p>
+ <label>@tooltip-bg</label>
+ <input type="text" placeholder="rgba(0,0,0,.9)">
+ <p class="help-block">Tooltip background color</p>
+ </div>
+ <div class="col col-lg-6">
+ <label>@tooltip-arrow-width</label>
+ <input type="text" placeholder="5px">
+ <p class="help-block">Tooltip arrow width</p>
+ <label>@tooltip-arrow-color</label>
+ <input type="text" placeholder="@tooltip-bg">
+ <p class="help-block">Tooltip arrow color</p>
+ </div>
+ </div>
+ <h3>Popover styles</h3>
+ <div class="row">
+ <div class="col col-lg-6">
+ <label>@popover-bg</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Popover body background color</p>
+ <label>@popover-title-bg</label>
+ <input type="text" placeholder="darken(@popover-bg, 3%)">
+ <p class="help-block">Popover title background color</p>
+ </div>
+ <div class="col col-lg-6">
+ <label>@popover-arrow-width</label>
+ <input type="text" placeholder="10px">
+ <p class="help-block">Popover arrow width</p>
+ <label>@popover-arrow-color</label>
+ <input type="text" placeholder="#fff">
+ <p class="help-block">Popover arrow color</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col col-lg-6">
+ <label>@popover-arrow-outer-width</label>
+ <input type="text" placeholder="(@popover-arrow-width 1)">
+ <p class="help-block">Popover outer arrow width</p>
+ </div>
+ <div class="col col-lg-6">
+ <label>@popover-arrow-outer-color</label>
+ <input type="text" placeholder="rgba(0,0,0,.25)">
+ <p class="help-block">Popover outer arrow color</p>
+ </div>
+ </div>
+ <h2 id="customize-other">Other</h2>
+ <div class="row">
+ <div class="col col-lg-6">
+ <label>@hr-border</label>
+ <input type="text" placeholder="@gray-lighter">
+ <p class="help-block">Horizontal line color</p>
+ </div>
+ <div class="col col-lg-6">
+ <label>@component-offset-horizontal</label>
+ <input type="text" placeholder="180px">
+ <p class="help-block">Horizontal offset for forms and lists</p>
+ </div>
+ </div>
</div>
- <div class="row download-builder">
- <div class="col-span-3">
- <h3>Scaffolding</h3>
- <label>@body-background</label>
- <input type="text" placeholder="#fff">
- <label>@text-color</label>
- <input type="text" placeholder="@grayDark">
-
- <h3>Links</h3>
- <label>@link-color</label>
- <input type="text" placeholder="#08c">
- <label>@link-color-hover</label>
- <input type="text" placeholder="darken(@link-color, 15%)">
-
- <h3>Grid system</h3>
- <label>@grid-columns</label>
- <input type="text" placeholder="12">
- <label>@grid-column-width</label>
- <input type="text" placeholder="60px">
- <label>@grid-gutter-width</label>
- <input type="text" placeholder="20px">
- <label>@grid-column-width-1200</label>
- <input type="text" placeholder="70px">
- <label>@grid-gutter-width-1200</label>
- <input type="text" placeholder="30px">
- <label>@grid-column-width-768</label>
- <input type="text" placeholder="42px">
- <label>@grid-gutter-width-768</label>
- <input type="text" placeholder="20px">
-
- </div><!-- /span -->
- <div class="col-span-3">
-
- <h3>Typography</h3>
- <label>@font-family-sans-serif</label>
- <input type="text" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
- <label>@font-family-serif</label>
- <input type="text" placeholder="Georgia, 'Times New Roman', Times, serif">
- <label>@font-family-monospace</label>
- <input type="text" placeholder="Menlo, Monaco, 'Courier New', monospace">
-
- <label>@font-size-base</label>
- <input type="text" placeholder="14px">
- <label>@font-family-base</label>
- <input type="text" placeholder="@font-family-sans-serif">
- <label>@line-height-base</label>
- <input type="text" placeholder="20px">
-
- <label>@headings-font-family</label>
- <input type="text" placeholder="inherit">
- <label>@headings-font-weight</label>
- <input type="text" placeholder="bold">
- <label>@headingsColor</label>
- <input type="text" placeholder="inherit">
-
- <label>@font-size-large</label>
- <input type="text" placeholder="@font-size-base * 1.25">
- <label>@font-size-small</label>
- <input type="text" placeholder="@font-size-base * 0.85">
- <label>@font-size-mini</label>
- <input type="text" placeholder="@font-size-base * 0.75">
- <label>@padding-large</label>
- <input type="text" placeholder="11px 19px">
- <label>@padding-small</label>
- <input type="text" placeholder="2px 10px">
- <label>@padding-mini</label>
- <input type="text" placeholder="1px 6px">
-
- <label>@border-radius-base</label>
- <input type="text" placeholder="4px">
- <label>@border-radius-large</label>
- <input type="text" placeholder="6px">
- <label>@border-radius-small</label>
- <input type="text" placeholder="3px">
-
- <label>@hero-background</label>
- <input type="text" placeholder="@grayLighter">
- <label>@hero-heading-color</label>
- <input type="text" placeholder="inherit">
- <label>@hero-lead-color</label>
- <input type="text" placeholder="inherit">
-
- <h3>Tables</h3>
- <label>@table-background</label>
- <input type="text" placeholder="transparent">
- <label>@table-background-accent</label>
- <input type="text" placeholder="#f9f9f9">
- <label>@table-background-hover</label>
- <input type="text" placeholder="#f5f5f5">
- <label>@table-border-color</label>
- <input type="text" placeholder="#ddd">
-
- <h3>Forms</h3>
- <label>@input-color-placeholder</label>
- <input type="text" placeholder="@grayLight">
- <label>@input-background</label>
- <input type="text" placeholder="#fff">
- <label>@input-border</label>
- <input type="text" placeholder="#ccc">
- <label>@input-border-radius</label>
- <input type="text" placeholder="3px">
- <label>@input-background-disabled</label>
- <input type="text" placeholder="@grayLighter">
- <label>@form-actions-background</label>
- <input type="text" placeholder="#f5f5f5">
- <label>@btn-backround-primary</label>
- <input type="text" placeholder="@link-color">
- <label>@btn-backround-primary-highlight</label>
- <input type="text" placeholder="darken(#fff, 10%)">
-
- </div><!-- /span -->
- <div class="col-span-3">
-
- <h3>Form states & alerts</h3>
- <label>@state-warning-text</label>
- <input type="text" placeholder="#c09853">
- <label>@state-warning-background</label>
- <input type="text" placeholder="#fcf8e3">
- <label>@state-error-text</label>
- <input type="text" placeholder="#b94a48">
- <label>@state-error-background</label>
- <input type="text" placeholder="#f2dede">
- <label>@state-success-text</label>
- <input type="text" placeholder="#468847">
- <label>@state-success-background</label>
- <input type="text" placeholder="#dff0d8">
- <label>@state-info-text</label>
- <input type="text" placeholder="#3a87ad">
- <label>@state-info-background</label>
- <input type="text" placeholder="#d9edf7">
-
- <h3>Navbar</h3>
- <label>@navbar-height</label>
- <input type="text" placeholder="40px">
- <label>@navbar-background</label>
- <input type="text" placeholder="@grayDarker">
- <label>@navbar-background-highlight</label>
- <input type="text" placeholder="@grayDark">
- <label>@navbar-color</label>
- <input type="text" placeholder="@grayLight">
- <label>@navbar-brand-color</label>
- <input type="text" placeholder="@navbar-link-color">
- <label>@navbar-link-color</label>
- <input type="text" placeholder="@grayLight">
- <label>@navbar-link-color-hover</label>
- <input type="text" placeholder="#fff">
- <label>@navbar-link-color-active</label>
- <input type="text" placeholder="@navbar-link-color-hover">
- <label>@navbar-link-background-hover</label>
- <input type="text" placeholder="transparent">
- <label>@navbar-link-background-active</label>
- <input type="text" placeholder="@navbar-background">
- <label>@navbarSearchBackground</label>
- <input type="text" placeholder="lighten(@navbar-background, 25%)">
- <label>@navbarSearchBackgroundFocus</label>
- <input type="text" placeholder="#fff">
- <label>@navbarSearchBorder</label>
- <input type="text" placeholder="darken(@navbarSearchBackground, 30%)">
- <label>@navbarSearchPlaceholderColor</label>
- <input type="text" placeholder="#ccc">
-
- <label>@navbar-collapse-width</label>
- <input type="text" placeholder="979px">
- <label>@navbar-collapse-width-desktop</label>
- <input type="text" placeholder="@navbar-collapse-width + 1">
-
- <h3>Dropdowns</h3>
- <label>@dropdown-background</label>
- <input type="text" placeholder="#fff">
- <label>@dropdown-border</label>
- <input type="text" placeholder="rgba(0,0,0,.2)">
- <label>@dropdown-link-color</label>
- <input type="text" placeholder="@grayDark">
- <label>@dropdown-link-color-hover</label>
- <input type="text" placeholder="#fff">
- <label>@dropdown-link-background-hover</label>
- <input type="text" placeholder="@link-color">
- </div><!-- /span -->
- </div><!-- /row -->
- </section>
-
- <section class="download" id="download">
- <div class="page-header">
- <h1>
- 4. Download
- </h1>
- </div>
- <div class="download-btn">
- <a class="btn btn-primary" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
- <h4>What's included?</h4>
- <p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
- </div>
- </section><!-- /download -->
-</form>
+ <div class="bs-docs-section" id="download">
+ <div class="page-header">
+ <h1>Download</h1>
+ </div>
+ <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>
+ <div class="bs-customize-download">
+ <a class="btn" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
+ </div>
+ <div class="bs-callout">
+ <h4>What's included?</h4>
+ <p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
+ </div>
+ </div><!-- /download -->
+ </form>