2013-04-01 07:11:47 +00:00
---
2013-08-10 23:11:10 +00:00
layout: default
2013-04-01 07:11:47 +00:00
title: Customize and download
2013-05-09 04:56:08 +00:00
slug: customize
2013-05-23 00:30:58 +00:00
lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.
2013-07-27 07:18:12 +00:00
base_url: "../"
2013-04-01 07:11:47 +00:00
---
2013-08-18 00:26:36 +00:00
<!-- Customizer form -->
2013-08-12 01:41:31 +00:00
< form class = "bs-customizer" role = "form" >
2013-08-08 06:06:29 +00:00
< div class = "bs-docs-section" id = "less-section" >
2013-07-26 18:11:09 +00:00
< div class = "page-header" >
< button class = "btn btn-default toggle" type = "button" > Toggle all< / button >
2013-07-27 02:38:12 +00:00
< h1 id = "less" > LESS files< / h1 >
2013-07-26 18:11:09 +00:00
< / div >
2013-07-27 07:35:26 +00:00
< 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 >
2013-05-23 06:45:12 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Basics< / h3 >
< div class = "row" >
2013-08-16 03:25:43 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< h4 > Layout< / h4 >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "grid.less" >
Grid system
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "print.less" >
Print media styles
< / label >
< / div >
< / div >
2013-08-16 03:25:43 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< h4 > Global CSS< / h4 >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "type.less" >
Typography
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "code.less" >
Code
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "tables.less" >
Tables
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-18 04:50:01 +00:00
< input type = "checkbox" checked value = "forms.less" data-dependents = "navbar.less,input-groups.less" >
2013-07-26 18:11:09 +00:00
Forms
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-18 04:50:01 +00:00
< input type = "checkbox" checked value = "buttons.less" data-dependents = "button-groups.less" >
2013-07-26 18:11:09 +00:00
Buttons
< / label >
< / div >
< / div >
2013-08-16 03:25:43 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< h4 > Utility classes< / h4 >
< div class = "checkbox" >
< label >
2013-08-18 07:28:52 +00:00
< input type = "checkbox" checked value = "utilities.less" data-dependents = "navbar.less" >
2013-07-26 18:11:09 +00:00
Basic utilities
< / label >
2013-05-23 00:30:58 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< 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" >
Component animations (for JS)
< / label >
< / div >
< / div >
< / div >
2013-05-23 06:45:12 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Components< / h3 >
< div class = "row" >
2013-08-16 03:25:43 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< h4 > Navigation< / h4 >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "navs.less" >
Navs
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-18 07:28:52 +00:00
< input type = "checkbox" checked value = "navbar.less" data-dependencies = "forms.less,utilities.less" >
2013-07-26 18:11:09 +00:00
Navbar
< / 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 >
2013-08-16 03:25:43 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< 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 = "panels.less" >
Panels
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "wells.less" >
Wells
< / label >
2013-05-23 00:30:58 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< / div >
2013-08-16 03:25:43 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< h4 > Behavioral (requires JS)< / h4 >
< 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 class = "checkbox" >
< label >
< input type = "checkbox" checked value = "modals.less" >
Modals
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "carousel.less" >
Carousel
< / label >
< / div >
< / div >
< / div >
2013-07-26 12:04:15 +00:00
2013-07-26 18:11:09 +00:00
< div class = "row" >
2013-08-16 03:25:43 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< h4 > Media< / h4 >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "thumbnails.less" >
Thumbnails
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "list-group.less" >
List groups
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "media.less" >
Media items
< / label >
< / div >
< / div >
2013-08-16 03:25:43 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< h4 > Miscellaneous< / h4 >
2013-08-16 03:25:43 +00:00
< div class = "checkbox" >
< label >
2013-08-18 04:50:01 +00:00
< input type = "checkbox" checked value = "input-groups.less" data-dependencies = "forms.less" >
2013-08-16 03:25:43 +00:00
Input groups
< / label >
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
2013-08-18 04:50:01 +00:00
< input type = "checkbox" checked value = "button-groups.less" data-dependencies = "buttons.less" >
2013-07-26 18:11:09 +00:00
Button groups
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "progress-bars.less" >
Progress bars
< / label >
2013-05-23 00:30:58 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< 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 = "close.less" >
Close icon
< / label >
< / div >
< / div >
2013-05-09 04:56:08 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< / div >
2013-05-23 06:34:28 +00:00
2013-05-24 04:34:32 +00:00
2013-08-08 06:06:29 +00:00
< div class = "bs-docs-section" id = "plugin-section" >
2013-07-26 18:11:09 +00:00
< div class = "page-header" >
< button class = "btn btn-default toggle" type = "button" > Toggle all< / button >
2013-07-27 02:38:12 +00:00
< h1 id = "plugins" > jQuery plugins< / h1 >
2013-07-26 18:11:09 +00:00
< / div >
2013-07-27 07:28:23 +00:00
< 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 >
2013-07-26 18:11:09 +00:00
< div class = "row" >
< div class = "col-lg-6" >
< h4 > Linked to components< / h4 >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "alert.js" >
Alert dismissal
< / label >
2013-07-26 12:04:15 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "button.js" >
Advanced buttons
< / label >
2013-05-23 00:30:58 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "carousel.js" >
Carousel functionality
< / label >
2013-07-26 12:04:15 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< 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 >
2013-08-18 04:50:01 +00:00
< input type = "checkbox" checked value = "tooltip.js" data-dependents = "popover.js" >
2013-07-26 18:11:09 +00:00
Tooltips
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-18 04:50:01 +00:00
< input type = "checkbox" checked value = "popover.js" data-dependencies = "tooltip.js" >
2013-07-26 18:11:09 +00:00
Popovers < small > (requires Tooltips)< / small >
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "tab.js" >
2013-08-19 04:34:17 +00:00
Togglable tabs
2013-07-26 18:11:09 +00:00
< / label >
2013-07-26 12:04:15 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "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 >
2013-05-09 04:56:08 +00:00
< / div >
2013-05-23 06:34:28 +00:00
2013-07-26 18:11:09 +00:00
< div class = "bs-callout bs-callout-info" >
< h4 > Produces two files< / h4 >
< 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 >
< / div >
2013-05-23 06:34:28 +00:00
2013-07-26 18:11:09 +00:00
< div class = "bs-callout bs-callout-danger" >
< h4 > jQuery required< / h4 >
< p > All plugins require the latest version of < a href = "http://jquery.com/" target = "_blank" > jQuery< / a > to be included.< / p >
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-08-08 06:06:29 +00:00
< div class = "bs-docs-section" id = "less-variables-section" >
2013-07-26 18:11:09 +00:00
< div class = "page-header" >
< button class = "btn btn-default toggle" type = "button" > Reset to defaults< / button >
2013-07-27 02:38:12 +00:00
< h1 id = "less-variables" > LESS variables< / h1 >
2013-07-26 18:11:09 +00:00
< / div >
< p class = "lead" > Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.< / p >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-basics" > Basics< / h2 >
2013-07-14 10:50:14 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Body background< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @body-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@body-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color applied to < code > < body> < / code > .< / p >
< / div >
< / div >
2013-07-24 06:13:15 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Typography< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @font-family-sans-serif< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "'Helvetica Neue', Helvetica, Arial, sans-serif" data-var = "@font-family-sans-serif" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default sans-serif fonts.< / p >
< label > @font-family-serif< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "Georgia, 'Times New Roman', Times, serif" data-var = "@font-family-serif" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default serif fonts.< / p >
< label > @font-family-monospace< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "Monaco, Menlo, Consolas, 'Courier New', monospace" data-var = "@font-family-monospace" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default monospace fonts for < code > < code> < / code > and < code > < pre> < / code > .< / p >
< / div >
< div class = "col-lg-6" >
< label > @font-family-base< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@font-family-sans-serif" data-var = "@font-family-base" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to globally set font-family in Bootstrap.< / p >
< label > @font-size-base< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "14px" data-var = "@font-size-base" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to calculate font-size throughout Bootstrap.< / p >
< label > @line-height-base< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "1.428571429" data-var = "@line-height-base" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to calculate line-height throughout Bootstrap.< / p >
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Code blocks< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @code-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#c7254e" data-var = "@code-color" >
2013-07-26 18:11:09 +00:00
< label > @code-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f9f2f4" data-var = "@code-bg" >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
2013-08-12 03:45:51 +00:00
< label > @pre-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-dark" data-var = "@pre-color" >
2013-07-26 18:11:09 +00:00
< label > @pre-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@pre-bg" >
2013-08-12 03:45:51 +00:00
< label > @pre-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@pre-border-color" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h4 > Headings< / h4 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @headings-font-family< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@font-family-base" data-var = "@headings-font-family" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Choose a separate font-family for headings.< / p >
< label > @headings-font-weight< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "500" data-var = "@headings-font-weight" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Choose a separate font-weight for headings.< / p >
< / div >
< div class = "col-lg-6" >
< label > @headings-line-height< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "1.1" data-var = "@headings-line-height" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Choose a separate line-height for headings.< / p >
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Colors< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
< p > Define custom colors used in several contexts.< / p >
< label > @brand-primary< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#428bca" data-var = "@brand-primary" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used for primary buttons, panels and more.< / p >
< label > @brand-success< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#5cb85c" data-var = "@brand-success" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to indicate success.< / p >
< label > @brand-warning< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f0ad4e" data-var = "@brand-warning" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to indicate a warning.< / p >
< label > @brand-danger< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#d9534f" data-var = "@brand-danger" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to indicate danger.< / p >
< label > @brand-info< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#5bc0de" data-var = "@brand-info" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to indicate informational content.< / p >
< / div >
< div class = "col-lg-6" >
< p > Define your preferred colors for standard text and links.< / p >
< label > @text-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-dark" data-var = "@text-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Global color set on the body.< / p >
< label > @link-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@link-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Global link color for text.< / p >
< label > @link-color-hover< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(@link-color, 15%)" data-var = "@link-color-hover" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Automatically darken links on hover via color function.< / p >
< / div >
< / div >
2013-07-14 10:50:14 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Media queries breakpoints< / h3 >
< p > Define the breakpoints at which your layout will change, adapting to different screen sizes.< / p >
< div class = "row" >
2013-08-17 22:21:38 +00:00
< div class = "col-xs-6" >
< label > @screen-xs< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "480px" data-var = "@screen-xs" >
2013-08-17 22:21:38 +00:00
< label > @screen-sm< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "768px" data-var = "@screen-sm" >
2013-07-26 18:11:09 +00:00
< / div >
2013-08-17 22:21:38 +00:00
< div class = "col-xs-6" >
< label > @screen-md< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "992px" data-var = "@screen-md" >
2013-08-17 22:21:38 +00:00
< label > @screen-lg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "1200px" data-var = "@screen-lg" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Container sizes< / h3 >
< p > Define the maximum width of < code > .container< / code > for different screen sizes.< / p >
< div class = "row" >
2013-08-17 22:21:38 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< label > @container-tablet< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "728px" data-var = "@container-tablet" >
2013-08-17 22:21:38 +00:00
< p class = "help-block" > For < code > @screen-sm< / code > and up.< / p >
< / div >
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< label > @container-desktop< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "940px" data-var = "@container-desktop" >
2013-08-17 22:21:38 +00:00
< p class = "help-block" > For < code > @screen-md< / code > and up.< / p >
2013-07-26 18:11:09 +00:00
< / div >
2013-08-17 22:21:38 +00:00
< div class = "clearfix visible-xs" > < / div >
< div class = "col-xs-6 col-sm-4" >
< label > @container-lg-desktop< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "1170px" data-var = "@container-lg-desktop" >
2013-08-17 22:21:38 +00:00
< p class = "help-block" > For < code > @screen-lg< / code > and up.< / p >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Grid system< / h3 >
< p > Define your custom responsive grid.< / p >
< div class = "row" >
2013-08-17 22:21:38 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< label > @grid-columns< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "12" data-var = "@grid-columns" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Number of columns in the grid.< / p >
2013-08-17 22:21:38 +00:00
< / div >
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< label > @grid-gutter-width< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "30px" data-var = "@grid-gutter-width" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Padding between columns.< / p >
< / div >
2013-08-17 22:21:38 +00:00
< div class = "clearfix visible-xs" > < / div >
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< label > @grid-float-breakpoint< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@screen-sm" data-var = "@grid-float-breakpoint" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Point at which the navbar stops collapsing.< / p >
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Components< / h3 >
< p > Define common padding and border radius sizes and more.< / p >
< div class = "row" >
< div class = "col-lg-6" >
< h4 > Padding< / h4 >
< label > @padding-base-vertical< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "8px" data-var = "@padding-base-vertical" >
2013-07-26 18:11:09 +00:00
< label > @padding-base-horizontal< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "12px" data-var = "@padding-base-horizontal" >
2013-07-26 18:11:09 +00:00
< label > @padding-large-vertical< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "14px" data-var = "@padding-large-vertical" >
2013-07-26 18:11:09 +00:00
< label > @padding-large-horizontal< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "16px" data-var = "@padding-large-horizontal" >
2013-07-26 18:11:09 +00:00
< label > @padding-small-vertical< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "5px" data-var = "@padding-small-vertical" >
2013-07-26 18:11:09 +00:00
< label > @padding-small-horizontal< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "10px" data-var = "@padding-small-horizontal" >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< h4 > Border radius sizes< / h4 >
< label > @border-radius-base< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "4px" data-var = "@border-radius-base" >
2013-07-26 18:11:09 +00:00
< label > @border-radius-large< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "6px" data-var = "@border-radius-large" >
2013-07-26 18:11:09 +00:00
< label > @border-radius-small< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "3px" data-var = "@border-radius-small" >
2013-07-26 18:11:09 +00:00
< h4 > Active background color< / h4 >
< label > @component-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@component-active-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used for active or hovered items in places like navs or dropdowns.< / p >
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-buttons" > Buttons< / h2 >
< p > For each of Bootstrap's buttons, define text, background and border color.< / p >
< div class = "row" >
< div class = "col-lg-6" >
< h4 > Default< / h4 >
< label > @btn-default-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@btn-default-color" >
2013-07-26 18:11:09 +00:00
< label > @btn-default-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#474949" data-var = "@btn-default-bg" >
2013-07-26 18:11:09 +00:00
< label > @btn-default-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-bg" data-var = "@btn-default-border" >
2013-07-26 18:11:09 +00:00
< h4 > Primary< / h4 >
< label > @btn-primary-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-color" data-var = "@btn-primary-color" >
2013-07-26 18:11:09 +00:00
< label > @btn-primary-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@btn-primary-bg" >
2013-07-26 18:11:09 +00:00
< label > @btn-primary-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-primary-bg" data-var = "@btn-primary-border" >
2013-07-26 18:11:09 +00:00
< h4 > Info< / h4 >
< label > @btn-info-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-color" data-var = "@btn-info-color" >
2013-07-26 18:11:09 +00:00
< label > @btn-info-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-info" data-var = "@btn-info-bg" >
2013-07-26 18:11:09 +00:00
< label > @btn-info-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-info-bg" data-var = "@btn-info-border" >
2013-07-26 18:11:09 +00:00
< h4 > Button hover< / h4 >
< label > @btn-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-color" data-var = "@btn-hover-color" >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< h4 > Success< / h4 >
< label > @btn-success-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-color" data-var = "@btn-success-color" >
2013-07-26 18:11:09 +00:00
< label > @btn-success-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-success" data-var = "@btn-success-bg" >
2013-07-26 18:11:09 +00:00
< label > @btn-success-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-success-bg" data-var = "@btn-success-border" >
2013-07-26 18:11:09 +00:00
< h4 > Warning< / h4 >
< label > @btn-warning-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-color" data-var = "@btn-warning-color" >
2013-07-26 18:11:09 +00:00
< label > @btn-warning-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-warning" data-var = "@btn-warning-bg" >
2013-07-26 18:11:09 +00:00
< label > @btn-warning-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-warning-bg" data-var = "@btn-warning-border" >
2013-07-26 18:11:09 +00:00
< h4 > Danger< / h4 >
< label > @btn-danger-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-color" data-var = "@btn-danger-color" >
2013-07-26 18:11:09 +00:00
< label > @btn-danger-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-danger" data-var = "@btn-danger-bg" >
2013-07-26 18:11:09 +00:00
< label > @btn-danger-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-danger-bg" data-var = "@btn-danger-border" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-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-lg-6" >
< h4 > Success< / h4 >
< label > @state-success-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#468847" data-var = "@state-success-text" >
2013-07-26 18:11:09 +00:00
< label > @state-success-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#dff0d8" data-var = "@state-success-bg" >
2013-07-26 18:11:09 +00:00
< label > @state-success-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(spin(@state-success-bg, -10), 5%)" data-var = "@state-success-border" >
2013-07-26 18:11:09 +00:00
< h4 > Warning< / h4 >
< label > @state-warning-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#c09853" data-var = "@state-warning-text" >
2013-07-26 18:11:09 +00:00
< label > @state-warning-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fcf8e3" data-var = "@state-warning-bg" >
2013-07-26 18:11:09 +00:00
< label > @state-warning-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(spin(@state-warning-bg, -10), 3%)" data-var = "@state-warning-border" >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< h4 > Danger< / h4 >
< label > @state-danger-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#b94a48" data-var = "@state-danger-text" >
2013-07-26 18:11:09 +00:00
< label > @state-danger-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f2dede" data-var = "@state-danger-bg" >
2013-07-26 18:11:09 +00:00
< label > @state-danger-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(spin(@state-danger-bg, -10), 3%)" data-var = "@state-danger-border" >
2013-07-26 18:11:09 +00:00
< h4 > Info< / h4 >
< label > @state-info-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#3a87ad" data-var = "@state-info-text" >
2013-07-26 18:11:09 +00:00
< label > @state-info-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#d9edf7" data-var = "@state-info-bg" >
2013-07-26 18:11:09 +00:00
< label > @state-info-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(spin(@state-info-bg, -10), 7%)" data-var = "@state-info-border" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-alerts" > Alerts< / h2 >
2013-08-05 22:29:19 +00:00
< p > Define alert colors, border radius, and padding.< / p >
2013-07-26 18:11:09 +00:00
< h4 > Border radius< / h4 >
2013-08-05 22:06:57 +00:00
< label > @alert-padding< / label >
2013-08-19 04:29:46 +00:00
< input type = "text" class = "form-control" placeholder = "15px" data-var = "@alert-padding" >
2013-07-26 18:11:09 +00:00
< label > @alert-border-radius< / label >
2013-08-19 04:29:46 +00:00
< input type = "text" class = "form-control" placeholder = "@border-radius-base" data-var = "@alert-border-radius" >
2013-07-26 18:11:09 +00:00
< div class = "row" >
< div class = "col-lg-6" >
2013-08-05 22:06:57 +00:00
< h4 > Default (Warning)< / h4 >
< label > @alert-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-warning-text" data-var = "@alert-text" >
2013-08-05 22:06:57 +00:00
< label > @alert-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-warning-bg" data-var = "@alert-bg" >
2013-08-05 22:06:57 +00:00
< label > @alert-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-warning-border" data-var = "@alert-border" >
2013-07-26 18:11:09 +00:00
< h4 > Success< / h4 >
< label > @alert-success-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-success-text" data-var = "@alert-success-text" >
2013-07-26 18:11:09 +00:00
< label > @alert-success-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-success-bg" data-var = "@alert-success-bg" >
2013-07-26 18:11:09 +00:00
< label > @alert-success-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-success-border" data-var = "@alert-success-border" >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< h4 > Danger< / h4 >
< label > @alert-danger-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-danger-text" data-var = "@alert-danger-text" >
2013-07-26 18:11:09 +00:00
< label > @alert-danger-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-danger-bg" data-var = "@alert-danger-bg" >
2013-07-26 18:11:09 +00:00
< label > @alert-danger-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-danger-border" data-var = "@alert-danger-border" >
2013-07-26 18:11:09 +00:00
< h4 > Info< / h4 >
< label > @alert-info-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-info-text" data-var = "@alert-info-text" >
2013-07-26 18:11:09 +00:00
< label > @alert-info-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-info-bg" data-var = "@alert-info-bg" >
2013-07-26 18:11:09 +00:00
< label > @alert-info-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-info-border" data-var = "@alert-info-border" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-07-25 17:50:59 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-navbar" > Navbar< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< h3 > Default navbar< / h3 >
< h4 > Basics< / h4 >
< label > @navbar-height< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "50px" data-var = "@navbar-height" >
2013-08-12 03:33:58 +00:00
< label > @navbar-margin-bottom< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@line-height-computed" data-var = "@navbar-margin-bottom" >
2013-08-18 21:05:56 +00:00
< label > @navbar-default-color< / label >
< input type = "text" class = "form-control" placeholder = "#777" data-var = "@navbar-default-color" >
< label > @navbar-default-bg< / label >
< input type = "text" class = "form-control" placeholder = "#eee" data-var = "@navbar-default-bg" >
2013-08-05 07:47:23 +00:00
< label > @navbar-border-radius< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@border-radius-base" data-var = "@navbar-border-radius" >
2013-07-26 18:11:09 +00:00
< h4 > Links< / h4 >
2013-08-18 21:05:56 +00:00
< label > @navbar-default-link-color< / label >
< input type = "text" class = "form-control" placeholder = "#777" data-var = "@navbar-default-link-color" >
< label > @navbar-default-link-hover-color< / label >
< input type = "text" class = "form-control" placeholder = "#333" data-var = "@navbar-default-link-hover-color" >
< label > @navbar-default-link-hover-bg< / label >
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@navbar-default-link-hover-bg" >
< label > @navbar-default-link-active-color< / label >
< input type = "text" class = "form-control" placeholder = "#555" data-var = "@navbar-default-link-active-color" >
< label > @navbar-default-link-active-bg< / label >
< input type = "text" class = "form-control" placeholder = "darken(@navbar-bg, 10%)" data-var = "@navbar-default-link-active-bg" >
< label > @navbar-default-link-disabled-color< / label >
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@navbar-default-link-disabled-color" >
< label > @navbar-default-link-disabled-bg< / label >
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@navbar-default-link-disabled-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Brand< / h4 >
2013-08-18 21:05:56 +00:00
< label > @navbar-default-brand-color< / label >
< input type = "text" class = "form-control" placeholder = "@navbar-link-color" data-var = "@navbar-default-brand-color" >
< label > @navbar-default-brand-hover-color< / label >
< input type = "text" class = "form-control" placeholder = "darken(@navbar-link-color, 10%)" data-var = "@navbar-default-brand-hover-color" >
< label > @navbar-default-brand-hover-bg< / label >
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@navbar-default-brand-hover-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Toggle< / h4 >
2013-08-18 21:05:56 +00:00
< label > @navbar-default-toggle-hover-bg< / label >
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@navbar-default-toggle-hover-bg" >
< label > @navbar-default-toggle-icon-bar-bg< / label >
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@navbar-default-toggle-icon-bar-bg" >
< label > @navbar-default-toggle-border-color< / label >
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@navbar-default-toggle-border-color" >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< h3 > Inverted navbar< / h3 >
< h4 > Basics< / h4 >
< label > @navbar-inverse-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@navbar-inverse-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#222" data-var = "@navbar-inverse-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Links< / h4 >
< label > @navbar-inverse-link-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@navbar-inverse-link-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@navbar-inverse-link-hover-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-link-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@navbar-inverse-link-hover-bg" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-link-active-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@navbar-inverse-link-hover-color" data-var = "@navbar-inverse-link-active-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-link-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(@navbar-inverse-bg, 10%)" data-var = "@navbar-inverse-link-active-bg" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-link-disabled-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#444" data-var = "@navbar-inverse-link-disabled-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-link-disabled-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@navbar-inverse-link-disabled-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Brand< / h4 >
< label > @navbar-inverse-brand-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@navbar-inverse-link-color" data-var = "@navbar-inverse-brand-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-brand-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@navbar-inverse-brand-hover-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-brand-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@navbar-inverse-brand-hover-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Toggle< / h4 >
< label > @navbar-inverse-toggle-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#333" data-var = "@navbar-inverse-toggle-hover-bg" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-toggle-icon-bar-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@navbar-inverse-toggle-icon-bar-bg" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-toggle-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#333" data-var = "@navbar-inverse-toggle-border-color" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-07-25 17:50:59 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-nav" > Nav< / h2 >
2013-07-26 18:17:48 +00:00
< h3 > Default nav< / h3 >
2013-07-26 18:11:09 +00:00
< div class = "row" >
< div class = "col-lg-6" >
2013-07-26 18:17:48 +00:00
< h4 > Common values< / h4 >
2013-08-15 20:58:23 +00:00
< label > @nav-link-padding< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "10px 15px" data-var = "@nav-link-padding" >
2013-07-26 18:11:09 +00:00
< label > @nav-link-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@nav-link-hover-bg" >
2013-07-26 18:11:09 +00:00
< label > @nav-disabled-link-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@nav-disabled-link-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-disabled-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@nav-disabled-link-hover-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-open-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@nav-open-link-hover-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-open-caret-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@fff" data-var = "@nav-open-caret-border-color" >
2013-07-26 18:17:48 +00:00
< h4 > Pills< / h4 >
< label > @nav-pills-active-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@fff" data-var = "@nav-pills-active-link-hover-color" >
2013-07-26 18:17:48 +00:00
< label > @nav-pills-active-link-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@component-active-bg" data-var = "@nav-pills-active-link-hover-bg" >
2013-07-26 18:17:48 +00:00
< / div >
< div class = "col-lg-6" >
2013-07-26 18:11:09 +00:00
< h4 > Tabs< / h4 >
< label > @nav-tabs-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@ddd" data-var = "@nav-tabs-border-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-tabs-link-hover-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@nav-tabs-link-hover-border-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-tabs-active-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray" data-var = "@nav-tabs-active-link-hover-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-tabs-active-link-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@body-bg" data-var = "@nav-tabs-active-link-hover-bg" >
2013-07-26 18:11:09 +00:00
< label > @nav-tabs-active-link-hover-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@nav-tabs-active-link-hover-border-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-tabs-justified-link-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@nav-tabs-justified-link-border-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-tabs-justified-active-link-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@body-bg" data-var = "@nav-tabs-justified-active-link-border-color" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-24 06:25:46 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-tables" > Tables< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @table-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@table-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default background color used for all tables.< / p >
< label > @table-bg-accent< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f9f9f9" data-var = "@table-bg-accent" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color used for < code > .table-striped< / code > .< / p >
< / div >
< div class = "col-lg-6" >
< label > @table-bg-hover< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@table-bg-hover" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color used for < code > .table-hover< / code > .< / p >
< label > @table-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@table-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Border color for table and cell borders.< / p >
< / div >
< / div >
2013-07-24 06:25:46 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-forms" > Forms< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< h3 > Inputs< / h3 >
2013-08-12 03:33:58 +00:00
< label > @input-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray" data-var = "@input-color" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Text color for < code > < input> < / code > s< / p >
2013-07-26 18:11:09 +00:00
< label > @input-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@input-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > < code > < input> < / code > background color< / p >
< label > @input-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@input-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > < code > < input> < / code > border color< / p >
< label > @input-border-radius< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@border-radius-base" data-var = "@input-border-radius" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > < code > < input> < / code > border radius< / p >
< label > @input-bg-disabled< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@input-bg-disabled" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > < code > < input disabled> < / code > background color< / p >
< / div >
< div class = "col-lg-6" >
< h3 > Placeholder< / h3 >
< label > @input-color-placeholder< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@input-color-placeholder" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Placeholder text color< / p >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Legend< / h3 >
2013-08-12 03:33:58 +00:00
< label > @legend-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray" data-var = "@legend-color" >
2013-07-26 18:11:09 +00:00
< label > @legend-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#e5e5e5" data-var = "@legend-border-color" >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Input groups< / h3 >
2013-08-12 03:33:58 +00:00
< label > @input-group-addon-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@input-group-addon-bg" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Background color for textual input addons< / p >
2013-07-26 18:11:09 +00:00
< label > @input-group-addon-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@input-border" data-var = "@input-group-addon-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Border color for textual input addons< / p >
< / div >
< / div >
< h2 id = "variables-dropdowns" > Dropdowns< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< h3 > Dropdown menu< / h3 >
< label > @dropdown-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@dropdown-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Dropdown menu background color< / p >
< label > @dropdown-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "rgba(0,0,0,.15)" data-var = "@dropdown-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Dropdown menu border color< / p >
< label > @dropdown-fallback-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@dropdown-fallback-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Dropdown menu border color < strong > for IE8< / strong > < / p >
< label > @dropdown-caret-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@dropdown-caret-color" data-var = "@dropdown-caret-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Indicator arrow for showing an element has a dropdown< / p >
< label > @dropdown-divider-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#e5e5e5" data-var = "@dropdown-divider-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Dropdown divider top border color< / p >
2013-08-12 03:33:58 +00:00
< label > @dropdown-header-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@dropdown-header-color" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Text color for headers within dropdown menus< / p >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< h3 > Dropdown items< / h3 >
< label > @dropdown-link-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-dark" data-var = "@dropdown-link-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Dropdown text color< / p >
2013-08-12 03:33:58 +00:00
< label > @dropdown-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@dropdown-link-hover-color" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Hovered dropdown menu entry text color< / p >
2013-07-26 18:11:09 +00:00
< label > @dropdown-link-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@dropdown-link-hover-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Hovered dropdown menu entry text color< / p >
2013-08-12 03:33:58 +00:00
< label > @dropdown-link-active-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@dropdown-link-active-color" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Active dropdown menu entry text color< / p >
2013-07-26 18:11:09 +00:00
< label > @dropdown-link-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@component-active-bg" data-var = "@dropdown-link-active-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Active dropdown menu entry background color< / p >
2013-08-12 03:33:58 +00:00
< label > @dropdown-link-disabled-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@dropdown-link-disabled-color" data-var = "@dropdown-link-disabled-color" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Disabled dropdown menu entry background color< / p >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-panels-wells" > Panels and wells< / h2 >
2013-08-19 03:08:03 +00:00
< h3 > Common panel styles< / h3 >
2013-07-26 18:11:09 +00:00
< div class = "row" >
< div class = "col-lg-6" >
< label > @panel-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@panel-bg" >
2013-08-19 03:08:03 +00:00
< label > @panel-inner-border< / label >
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@panel-inner-border" >
< p class = "help-block" > Border color for elements within panels< / p >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< label > @panel-border-radius< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@border-radius-base" data-var = "@panel-border-radius" >
2013-08-19 03:08:03 +00:00
< label > @panel-footer-bg< / label >
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@panel-footer-bg" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
< h3 > Contextual panel colors< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
2013-08-19 03:08:03 +00:00
< h4 > Default< / h4 >
< label > @panel-default-text< / label >
< input type = "text" class = "form-control" placeholder = "@gray-dark" data-var = "@panel-default-text" >
< label > @panel-default-border< / label >
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@panel-default-border" >
< label > @panel-default-heading-bg< / label >
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@panel-default-heading-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Primary< / h4 >
< label > @panel-primary-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@panel-primary-text" >
2013-07-26 18:11:09 +00:00
< label > @panel-primary-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@panel-primary-border" >
2013-07-26 18:11:09 +00:00
< label > @panel-primary-heading-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@panel-primary-heading-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Success< / h4 >
< label > @panel-success-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-success-text" data-var = "@panel-success-text" >
2013-07-26 18:11:09 +00:00
< label > @panel-success-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-success-border" data-var = "@panel-success-border" >
2013-07-26 18:11:09 +00:00
< label > @panel-success-heading-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-success-bg" data-var = "@panel-success-heading-bg" >
2013-08-19 03:08:03 +00:00
< / div >
< div class = "col-lg-6" >
2013-07-26 18:11:09 +00:00
< h4 > Info< / h4 >
< label > @panel-info-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-info-text" data-var = "@panel-info-text" >
2013-07-26 18:11:09 +00:00
< label > @panel-info-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-info-border" data-var = "@panel-info-border" >
2013-07-26 18:11:09 +00:00
< label > @panel-info-heading-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-info-bg" data-var = "@panel-info-heading-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Warning< / h4 >
< label > @panel-warning-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-warning-text" data-var = "@panel-warning-text" >
2013-07-26 18:11:09 +00:00
< label > @panel-warning-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-warning-border" data-var = "@panel-warning-border" >
2013-07-26 18:11:09 +00:00
< label > @panel-warning-heading-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-warning-bg" data-var = "@panel-warning-heading-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Danger< / h4 >
< label > @panel-danger-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-danger-text" data-var = "@panel-danger-text" >
2013-07-26 18:11:09 +00:00
< label > @panel-danger-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-danger-border" data-var = "@panel-danger-border" >
2013-07-26 18:11:09 +00:00
< label > @panel-danger-heading-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-danger-bg" data-var = "@panel-danger-heading-bg" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Wells< / h3 >
< label > @well-bg< / label >
2013-08-19 04:29:46 +00:00
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@well-bg" >
2013-07-20 07:03:08 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-accordion" > Accordion< / h2 >
< label > @accordion-border-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#e5e5e5" data-var = "@accordion-border-bg" >
2013-07-20 07:03:08 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-badges" > Badges< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @badge-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@badge-color" >
2013-07-26 18:11:09 +00:00
< p > Badge text color< / p >
< label > @badge-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@badge-bg" >
2013-07-26 18:11:09 +00:00
< p > Badge background color< / p >
< label > @badge-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@badge-link-hover-color" >
2013-07-26 18:11:09 +00:00
< p > Linked badge text color on hover< / p >
< / div >
< div class = "col-lg-6" >
< label > @badge-active-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@link-color" data-var = "@badge-active-color" >
2013-07-26 18:11:09 +00:00
< p > Badge text color in active nav link< / p >
< label > @badge-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@badge-active-bg" >
2013-07-26 18:11:09 +00:00
< p > Badge text color in active nav link< / p >
< / div >
< / div >
2013-07-20 07:03:08 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-breadcrumbs" > Breadcrumbs< / h2 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @breadcrumb-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@breadcrumb-color" >
2013-07-26 18:11:09 +00:00
< p > Breadcrumb text color< / p >
< / div >
< div class = "col-lg-4" >
< label > @breadcrumb-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@breadcrumb-bg" >
2013-07-26 18:11:09 +00:00
< p > Breadcrumb background color< / p >
< / div >
< div class = "col-lg-4" >
< label > @breadcrumb-active-color< / label >
2013-08-18 03:28:58 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@breadcrumb-active-color" >
2013-07-26 18:11:09 +00:00
< p > Text color of current page in the breadcrumb< / p >
< / div >
< / div >
2013-07-24 06:03:57 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-jumbotron" > Jumbotron< / h2 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @jumbotron-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@jumbotron-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Jumbotron background color< / p >
< / div >
< div class = "col-lg-4" >
< label > @jumbotron-heading-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "inherit" data-var = "@jumbotron-heading-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Jumbotron heading color< / p >
< / div >
< div class = "col-lg-4" >
< label > @jumbotron-lead-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "inherit" data-var = "@jumbotron-lead-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Jumbotron lead paragraph color< / p >
< / div >
< / div >
2013-07-24 06:03:57 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-modals" > Modals< / h2 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @modal-inner-padding< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "20px" data-var = "@modal-inner-padding" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Padding applied to the modal body< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-title-padding< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "15px" data-var = "@modal-title-padding" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Padding applied to the modal title< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-title-line-height< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@line-height-base" data-var = "@modal-title-line-height" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Modal title line-height< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-content-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@modal-content-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color of modal content area< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-content-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "rgba(0,0,0,.2)" data-var = "@modal-content-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Modal content border color< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-content-fallback-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#999" data-var = "@modal-content-fallback-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Modal content border color < strong > for IE8< / strong > < / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-backdrop-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#000" data-var = "@modal-backdrop-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Modal backdrop background color< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-header-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#e5e5e5" data-var = "@modal-header-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Modal header border color< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-footer-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@modal-header-border-color" data-var = "@modal-footer-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Modal footer border color< / p >
< / div >
< / div >
< h2 id = "variables-carousel" > Carousel< / h2 >
< label > @carousel-text-shadow< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "0 1px 2px rgba(0,0,0,.6)" data-var = "@carousel-text-shadow" >
2013-07-26 18:11:09 +00:00
< label > @carousel-control-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@carousel-control-color" >
2013-07-26 18:11:09 +00:00
< label > @carousel-indicator-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@carousel-indicator-border-color" >
2013-07-26 18:11:09 +00:00
< label > @carousel-indicator-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@carousel-indicator-active-bg" >
2013-07-26 18:11:09 +00:00
< label > @carousel-caption-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@carousel-caption-color" >
2013-07-26 18:11:09 +00:00
< h2 id = "variables-list-group" > List group< / h2 >
< h3 > Background< / h3 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @list-group-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@list-group-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default background color< / p >
< / div >
< div class = "col-lg-4" >
< label > @list-group-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@list-group-hover-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color of single list elements on hover< / p >
< / div >
< div class = "col-lg-4" >
< label > @list-group-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@component-active-bg" data-var = "@list-group-active-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color of active list elements< / p >
< / div >
< / div >
< h3 > Borders< / h3 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @list-group-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@list-group-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default border color< / p >
< / div >
< div class = "col-lg-4" >
< label > @list-group-border-radius< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@border-radius-base" data-var = "@list-group-border-radius" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > List group border radius< / p >
< / div >
< div class = "col-lg-4" >
< label > @list-group-active-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@list-group-active-bg" data-var = "@list-group-active-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Border color of active list elements< / p >
< / div >
< / div >
< label > @list-group-active-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@list-group-active-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Text color of active list elements< / p >
< h2 id = "variables-thumbnails" > Thumbnails< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
2013-08-12 03:33:58 +00:00
< label > @thumbnail-padding< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "4px" data-var = "@thumbnail-padding" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Padding around the thumbnail image< / p >
2013-07-26 18:11:09 +00:00
< label > @thumbnail-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@body-bg" data-var = "@thumbnail-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Thumbnail background color< / p >
< label > @thumbnail-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@thumbnail-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Thumbnail border color< / p >
< label > @thumbnail-border-radius< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@border-radius-base" data-var = "@thumbnail-border-radius" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Thumbnail border radius< / p >
< / div >
2013-08-12 03:33:58 +00:00
< div class = "col-lg-6" >
< label > @thumbnail-caption-padding< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@text-color" data-var = "@thumbnail-caption-padding" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Padding around the thumbnail caption< / p >
< label > @thumbnail-caption-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@text-color" data-var = "@thumbnail-caption-color" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Custom text color for thumbnail captions< / p >
< / div >
2013-07-26 18:11:09 +00:00
< / div >
< h2 id = "variables-progress" > Progress bars< / h2 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @progress-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@progress-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color of the whole progress component< / p >
< / div >
< div class = "col-lg-4" >
< label > @progress-bar-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@progress-bar-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default progress bar color< / p >
< / div >
< div class = "col-lg-4" >
< label > @progress-bar-success-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-success" data-var = "@progress-bar-success-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Success progress bar color< / p >
< / div >
< / div >
< div class = "row" >
< div class = "col-lg-4" >
< label > @progress-bar-warning-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-warning" data-var = "@progress-bar-warning-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Warning progress bar color< / p >
< / div >
< div class = "col-lg-4" >
< label > @progress-bar-danger-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-danger" data-var = "@progress-bar-danger-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Danger progress bar color< / p >
< / div >
< div class = "col-lg-4" >
< label > @progress-bar-info-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-info" data-var = "@progress-bar-info-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Info progress bar color< / p >
< / div >
< div class = "col-lg-4" >
< label > @progress-bar-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@progress-bar-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Info progress bar text color< / p >
< / div >
< div class = "col-lg-4" >
< label > @progress-bar-text-shadow< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "0 -1px 0 rgba(0,0,0,.25)" data-var = "@progress-bar-text-shadow" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Info progress bar text shadow< / p >
< / div >
< / div >
< h2 id = "variables-pagination" > Pagination< / h2 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @pagination-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@pagination-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color< / p >
< / div >
< div class = "col-lg-4" >
< label > @pagination-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@pagination-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Border color< / p >
< / div >
< div class = "col-lg-4" >
< label > @pagination-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@pagination-active-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Active background color< / p >
< / div >
< div class = "col-lg-4" >
< label > @pagination-active-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@pagination-active-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Active text color< / p >
< / div >
< div class = "col-lg-4" >
< label > @pagination-disabled-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@pagination-disabled-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Disabled text color< / p >
< / div >
< / div >
< h2 id = "variables-pager" > Pager< / h2 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @pager-border-radius< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "15px" data-var = "@pager-border-radius" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Pager border radius< / p >
< / div >
< div class = "col-lg-4" >
< label > @pager-disabled-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@pager-disabled-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Pager disabled state color< / p >
< / div >
< / div >
2013-07-24 06:03:57 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-labels" > Labels< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
2013-08-15 18:31:26 +00:00
< label > @label-default-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@label-default-bg" >
2013-08-15 18:31:26 +00:00
< p class = "help-block" > Default label background color< / p >
< label > @label-primary-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@label-primary-bg" >
2013-08-15 18:31:26 +00:00
< p class = "help-block" > Primary label background color< / p >
2013-07-26 18:11:09 +00:00
< label > @label-success-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-success" data-var = "@label-success-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Success label background color< / p >
2013-08-15 18:31:26 +00:00
< / div >
< div class = "col-lg-6" >
2013-07-26 18:11:09 +00:00
< label > @label-info-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-info" data-var = "@label-info-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Info label background color< / p >
< label > @label-warning-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-warning" data-var = "@label-warning-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Warning label background color< / p >
< label > @label-danger-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-danger" data-var = "@label-danger-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Danger label background color< / p >
< / div >
< / div >
< h2 id = "variables-tooltips-popovers" > Tooltips and popovers< / h2 >
< h3 > Tooltip styles< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @tooltip-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@tooltip-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Tooltip text color< / p >
< label > @tooltip-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "rgba(0,0,0,.9)" data-var = "@tooltip-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Tooltip background color< / p >
< / div >
< div class = "col-lg-6" >
< label > @tooltip-arrow-width< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "5px" data-var = "@tooltip-arrow-width" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Tooltip arrow width< / p >
< label > @tooltip-arrow-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@tooltip-bg" data-var = "@tooltip-arrow-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Tooltip arrow color< / p >
< / div >
< div class = "col-lg-6" >
< label > @tooltip-max-width< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "200px" data-var = "@tooltip-max-width" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Tooltip max width< / p >
< / div >
< / div >
< h3 > Popover styles< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @popover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@popover-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover body background color< / p >
< label > @popover-title-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(@popover-bg, 3%)" data-var = "@popover-title-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover title background color< / p >
< / div >
< div class = "col-lg-6" >
< label > @popover-arrow-width< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "10px" data-var = "@popover-arrow-width" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover arrow width< / p >
< label > @popover-arrow-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@popover-arrow-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover arrow color< / p >
< / div >
< / div >
< div class = "row" >
< div class = "col-lg-6" >
< label > @popover-arrow-outer-width< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "(@popover-arrow-width 1)" data-var = "@popover-arrow-outer-width" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover outer arrow width< / p >
< / div >
< div class = "col-lg-6" >
< label > @popover-arrow-outer-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "rgba(0,0,0,.25)" data-var = "@popover-arrow-outer-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover outer arrow color< / p >
< / div >
< div class = "col-lg-6" >
< label > @popover-arrow-outer-fallback-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#999" data-var = "@popover-arrow-outer-fallback-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover outer arrow fallback color< / p >
< / div >
< / div >
< div class = "row" >
< div class = "col-lg-6" >
< label > @popover-max-width< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "276px" data-var = "@popover-max-width" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover maximum width< / p >
< / div >
< div class = "col-lg-6" >
< label > @popover-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "rgba(0,0,0,.2)" data-var = "@popover-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover border color< / p >
< / div >
< div class = "col-lg-6" >
< label > @popover-fallback-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@popover-fallback-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover fallback border color< / p >
< / div >
< / div >
2013-07-24 06:09:06 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-close" > Close button< / h2 >
2013-07-26 18:17:48 +00:00
< div class = "row" >
< div class = "col-lg-6" >
< label > @close-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#000" data-var = "@close-color" >
2013-07-26 18:17:48 +00:00
< / div >
< div class = "col-lg-6" >
< label > @close-text-shadow< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "0 1px 0 #fff" data-var = "@close-text-shadow" >
2013-07-26 18:17:48 +00:00
< / div >
< / div >
2013-07-24 06:09:06 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-type" > Type< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @text-muted< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@text-muted" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Text muted color< / p >
< / div >
< div class = "col-lg-6" >
< label > @abbr-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@abbr-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Abbreviations and acronyms border color< / p >
< / div >
< div class = "col-lg-6" >
< label > @headings-small-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@headings-small-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Headings small color< / p >
< / div >
< div class = "col-lg-6" >
< label > @blockquote-small-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@blockquote-small-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Blockquote small color< / p >
< / div >
< div class = "col-lg-6" >
< label > @blockquote-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@blockquote-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Blockquote border color< / p >
< / div >
< div class = "col-lg-6" >
< label > @page-header-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@page-header-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Pag header border color< / p >
< / div >
2013-05-09 04:56:08 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< h2 id = "variables-other" > Other< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @hr-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@hr-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Horizontal line color< / p >
< / div >
< div class = "col-lg-6" >
< label > @component-offset-horizontal< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "180px" data-var = "@component-offset-horizontal" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Horizontal offset for forms and lists< / p >
< / div >
< / div >
< / div >
2013-04-01 07:11:47 +00:00
2013-07-27 02:38:12 +00:00
< div class = "bs-docs-section" >
2013-07-26 18:11:09 +00:00
< div class = "page-header" >
2013-07-27 02:38:12 +00:00
< h1 id = "download" > Download< / h1 >
2013-07-26 18:11:09 +00:00
< / 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" >
2013-08-18 07:28:52 +00:00
< button id = "btn-compile" class = "btn btn-block btn-lg btn-bs" onclick = "_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);" > Compile and Download< / button >
2013-07-26 18:11:09 +00:00
< / div >
< / div > <!-- /download -->
2013-07-26 12:04:15 +00:00
< / form >
2013-08-08 06:06:29 +00:00
<!-- generated -->
< script id = "files" >
2013-08-18 03:28:58 +00:00
var __js = {"affix.js":"/* ========================================================================\n * Bootstrap: affix.js v3.0.0\n * http://twbs.github.com/bootstrap/javascript.html#affix\n * ========================================================================\n * Copyright 2012 Twitter, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n * ======================================================================== */\n\n\n+function ($) { \"use strict\";\n\n // AFFIX CLASS DEFINITION\n // ======================\n\n var Affix = function (element, options) {\n this.options = $.extend({}, Affix.DEFAULTS, options)\n this.$window = $(window)\n .on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))\n .on('click.bs.affix.data-api', $.proxy(this.checkPositionWithEventLoop, this))\n\n this.$element = $(element)\n this.affixed =\n this.unpin = null\n\n this.checkPosition()\n }\n\n Affix.RESET = 'affix affix-top affix-bottom'\n\n Affix.DEFAULTS = {\n offset: 0\n }\n\n Affix.prototype.checkPositionWithEventLoop = function () {\n setTimeout($.proxy(this.checkPosition, this), 1)\n }\n\n Affix.prototype.checkPosition = function () {\n if (!this.$element.is(':visible')) return\n\n var scrollHeight = $(document).height()\n var scrollTop = this.$window.scrollTop()\n var position = this.$element.offset()\n var offset = this.options.offset\n var offsetTop = offset.top\n var offsetBottom = offset.bottom\n\n if (typeof offset != 'object') offsetBottom = offsetTop = offset\n if (typeof offsetTop == 'function') offsetTop = offset.top()\n if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()\n\n var affix = this.unpin != null & & (scrollTop + this.unpin < = position.top) ? false :\n offsetBottom != null & & (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? 'bottom' :\n offsetTop != null & & (scrollTop < = offsetTop) ? 'top' : false\n\n if (this.affixed === affix) return\n if (this.unpin) this.$element.css('top', '')\n\n this.affixed = affix\n this.unpin = affix == 'bottom' ? position.top - scrollTop : null\n\n this.$element.removeClass(Affix.RESET).addClass('affix' + (affix ? '-' + affix : ''))\n\n if (affix == 'bottom') {\n this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })\n }\n }\n\n\n // AFFIX PLUGIN DEFINITION\n // =======================\n\n var old = $.fn.affix\n\n $.fn.affix = function (option) {\n return this.each(function () {\n var $this = $(this)\n var data = $this.data('bs.affix')\n var options = typeof option == 'object' & & option\n\n if (!data) $this.data('bs.affix', (data = new Affix(this, options)))\n if (typeof option == 'string') data[option]()\n })\n }\n\n $.fn.affix.Constructor = Affix\n\n\n // AFFIX NO CONFLICT\n // =================\n\n $.fn.affix.noConflict = function () {\n $.fn.affix = old\n return this\n }\n\n\n // AFFIX DATA-API\n // ==============\n\n $(window).on('load', function () {\n $('[data-spy=\"affix\"]').each(function () {\n var $spy = $(this)\n var data = $spy.data()\n\n data.offset = data.offset || {}\n\n if (data.offsetBottom) data.offset.bottom = data.offsetBottom\n if (data.offsetTop) data.offset.top = data.offsetTop\n\n $spy.affix(data)\n })\n })\n\n}(window.jQuery);\n","alert.js":"/* =======================================
2013-08-19 02:40:26 +00:00
var __less = {"alerts.less":"//\n// Alerts\n// --------------------------------------------------\n\n\n// Base styles\n// -------------------------\n\n.alert {\n padding: @alert-padding;\n margin-bottom: @line-height-computed;\n color: @alert-text;\n background-color: @alert-bg;\n border: 1px solid @alert-border;\n border-radius: @alert-border-radius;\n\n // Headings for larger alerts\n h4 {\n margin-top: 0;\n // Specified for the h4 to prevent conflicts of changing @headingsColor\n color: inherit;\n }\n // Match the hr to the border of the alert\n hr {\n border-top-color: darken(@alert-border, 5%);\n }\n // Provide class for links that match alerts\n .alert-link {\n font-weight: @alert-link-font-weight;\n color: darken(@alert-text, 10%);\n }\n\n // Improve alignment and spacing of inner content\n > p,\n > ul {\n margin-bottom: 0;\n }\n > p + p {\n margin-top: 5px;\n }\n}\n\n// Dismissable alerts\n//\n// Expand the right padding and account for the close button's positioning.\n\n.alert-dismissable {\n padding-right: (@alert-padding + 20);\n\n // Adjust close link position\n .close {\n position: relative;\n top: -2px;\n right: -21px;\n color: inherit;\n }\n}\n\n// Alternate styles\n//\n// Generate contextual modifier classes for colorizing the alert.\n\n.alert-success {\n .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);\n}\n.alert-danger {\n .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);\n}\n.alert-info {\n .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);\n}\n","badges.less":"//\n// Badges\n// --------------------------------------------------\n\n\n// Base classes\n.badge {\n display: inline-block;\n min-width: 10px;\n padding: 3px 7px;\n font-size: @font-size-small;\n font-weight: @badge-font-weight;\n color: @badge-color;\n line-height: @badge-line-height;\n vertical-align: baseline;\n white-space: nowrap;\n text-align: center;\n background-color: @badge-bg;\n border-radius: @badge-border-radius;\n\n // Empty badges collapse automatically (not available in IE8)\n & :empty {\n display: none;\n }\n}\n\n// Hover state, but only for links\na.badge {\n & :hover,\n & :focus {\n color: @badge-link-hover-color;\n text-decoration: none;\n cursor: pointer;\n }\n}\n\n// Quick fix for labels/badges in buttons\n.btn .badge {\n position: relative;\n top: -1px;\n}\n\n// Account for counters in navs\na.list-group-item.active > .badge,\n.nav-pills > .active > a > .badge {\n color: @badge-active-color;\n background-color: @badge-active-bg;\n}\n.nav-pills > li > a > .badge {\n margin-left: 3px;\n}\n","bootstrap.less":"/*!\n * Bootstrap v3.0.0\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Designed and built with all the love in the world by @mdo and @fat.\n */\n\n// Core variables and mixins\n@import \"variables.less\";\n@import \"mixins.less\";\n\n// Reset\n@import \"normalize.less\";\n@import \"print.less\";\n\n// Core CSS\n@import \"scaffolding.less\";\n@import \"type.less\";\n@import \"code.less\";\n@import \"grid.less\";\n@import \"tables.less\";\n@import \"forms.less\";\n@import \"buttons.less\";\n\n// Components\n@import \"component-animations.less\";\n@import \"glyphicons.less\";\n@import \"dropdowns.less\";\n@import \"button-groups.less\";\n@import \"input-groups.less\";\n@import \"navs.less\";\n@import \"navbar.less\";\n@import \"breadcrumbs.less\";\n@import \"pagination.less\";\n@import \"pager.less\";\n@import \"labels.less\";\n@import \"badges.less\";\n@import \"jumbotron.less\";\n@import \"thumbnails.less\";\n@import \"alerts.less\";\n@import \"progress-bars.less\";\n@import \"media.less\";\n@import \"list-group.less\";\n@import \"panels.less\";\n@import \"wells.less\";\n@import \"close.less\";\n\n// Components w/ JavaScript\n@import \"modals.less\";\n@import \"tooltip.less\";\n@import \"popovers.less\";\n@import \"carousel.less\";\n\n// Utility classes\n@import \"ut
2013-08-08 06:06:29 +00:00
< / script >
<!-- /generated -->