2014-02-13 18:36:49 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
<!-- Meta, title, CSS, favicons, etc. -->
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." >
< meta name = "keywords" content = "HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development" >
< meta name = "author" content = "Mark Otto, Jacob Thornton, and Bootstrap contributors" >
2013-10-18 04:52:16 +02:00
2014-02-13 18:36:49 +01:00
< title >
2015-01-19 18:10:41 +01:00
2014-02-13 18:36:49 +01:00
Customize and download · Bootstrap
2015-01-19 18:10:41 +01:00
2014-02-13 18:36:49 +01:00
< / title >
<!-- Bootstrap core CSS -->
2014-10-29 20:17:44 +01:00
2014-10-29 20:52:33 +01:00
< link href = "../dist/css/bootstrap.min.css" rel = "stylesheet" >
2014-10-29 20:17:44 +01:00
2014-02-13 18:36:49 +01:00
2014-06-26 18:46:59 +02:00
2014-02-13 18:36:49 +01:00
<!-- Documentation extras -->
2014-10-29 20:17:44 +01:00
2014-10-29 20:52:33 +01:00
< link href = "../assets/css/docs.min.css" rel = "stylesheet" >
2014-10-29 20:17:44 +01:00
2014-02-13 18:36:49 +01:00
<!-- [if lt IE 9]><script src="../assets/js/ie8 - responsive - file - warning.js"></script><![endif] -->
2014-06-26 18:46:59 +02:00
< script src = "../assets/js/ie-emulation-modes-warning.js" > < / script >
2014-02-13 18:36:49 +01:00
2014-10-29 20:17:44 +01:00
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
2014-02-13 18:36:49 +01:00
<!-- [if lt IE 9]>
2014-06-26 18:46:59 +02:00
< script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" > < / script >
< script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js" > < / script >
2014-02-13 18:36:49 +01:00
<![endif]-->
<!-- Favicons -->
2014-10-29 20:17:44 +01:00
< link rel = "apple-touch-icon" href = "/apple-touch-icon.png" >
2014-06-26 18:46:59 +02:00
< link rel = "icon" href = "/favicon.ico" >
2014-02-13 18:36:49 +01:00
< script >
2014-06-26 18:46:59 +02:00
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('send', 'pageview');
2014-02-13 18:36:49 +01:00
< / script >
< / head >
< body >
2015-01-19 18:10:41 +01:00
< a id = "skippy" class = "sr-only sr-only-focusable" href = "#content" > < div class = "container" > < span class = "skiplink-text" > Skip to main content< / span > < / div > < / a >
2014-02-13 18:36:49 +01:00
<!-- Docs master nav -->
< header class = "navbar navbar-static-top bs-docs-nav" id = "top" role = "banner" >
< div class = "container" >
< div class = "navbar-header" >
2014-10-29 20:17:44 +01:00
< button class = "navbar-toggle collapsed" type = "button" data-toggle = "collapse" data-target = ".bs-navbar-collapse" >
2014-02-13 18:36:49 +01:00
< span class = "sr-only" > Toggle navigation< / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a href = "../" class = "navbar-brand" > Bootstrap< / a >
< / div >
2015-01-19 18:10:41 +01:00
< nav class = "collapse navbar-collapse bs-navbar-collapse" >
2014-02-13 18:36:49 +01:00
< ul class = "nav navbar-nav" >
< li >
2014-10-29 20:17:44 +01:00
< a href = "../getting-started/" > Getting started< / a >
2014-02-13 18:36:49 +01:00
< / li >
< li >
2014-10-29 20:17:44 +01:00
< a href = "../css/" > CSS< / a >
2014-02-13 18:36:49 +01:00
< / li >
< li >
2014-10-29 20:17:44 +01:00
< a href = "../components/" > Components< / a >
2014-02-13 18:36:49 +01:00
< / li >
< li >
2014-10-29 20:17:44 +01:00
< a href = "../javascript/" > JavaScript< / a >
2014-02-13 18:36:49 +01:00
< / li >
< li class = "active" >
2014-10-29 20:17:44 +01:00
< a href = "../customize/" > Customize< / a >
2014-02-13 18:36:49 +01:00
< / li >
< / ul >
< ul class = "nav navbar-nav navbar-right" >
2014-06-26 18:46:59 +02:00
< li > < a href = "http://expo.getbootstrap.com" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Expo');" > Expo< / a > < / li >
< li > < a href = "http://blog.getbootstrap.com" onclick = "ga('send', 'event', 'Navbar', 'Community links', 'Blog');" > Blog< / a > < / li >
2014-02-13 18:36:49 +01:00
< / ul >
< / nav >
< / div >
< / header >
<!-- Docs page layout -->
< div class = "bs-docs-header" id = "content" >
< div class = "container" >
< h1 > Customize and download< / h1 >
< p > Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.< / p >
< div id = "carbonads-container" > < div class = "carbonad" > < div id = "azcarbon" > < / div > < script > var z = document . createElement ( "script" ) ; z . async = true ; z . src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ" ; var s = document . getElementsByTagName ( "script" ) [ 0 ] ; s . parentNode . insertBefore ( z , s ) ; < / script > < / div > < / div >
< / div >
< / div >
< div class = "container bs-docs-container" >
< div class = "row" >
< div class = "col-md-9" role = "main" >
2014-06-26 18:46:59 +02:00
<!-- less.js isn't IE8 - compatible and throws an exception during initialization, so our Blob compatibility check and error messaging code never get called in that case.
So we use a conditional comment instead to inform folks about the lack of IE8 support.
-->
<!-- [if lt IE 9]>
< style >
.bs-customizer,
2014-10-29 20:17:44 +01:00
.bs-customizer-import,
2014-06-26 18:46:59 +02:00
.bs-docs-sidebar {
display: none;
}
< / style >
2014-10-29 20:17:44 +01:00
< div class = "alert alert-danger" >
2014-06-26 18:46:59 +02:00
< strong > The Bootstrap Customizer does not support IE9 and below.< / strong > < br >
Please take a second to < a href = "http://browsehappy.com/" > upgrade to a more modern browser< / a > .
< / div >
<![endif]-->
<!-- Customizer form -->
2014-10-29 20:17:44 +01:00
2014-11-12 18:53:05 +01:00
< div id = "defaults-change-alert" class = "alert alert-warning alert-dismissible" role = "alert" >
2014-12-16 01:23:50 +01:00
< button type = "button" class = "close" data-dismiss = "alert" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
2014-11-12 18:53:05 +01:00
< strong > Heads up!< / strong > The default value for < code > @brand-primary< / code > has changed in the latest release to improve contrast and accessibility. Please double check your compiled CSS when upgrading.
< / div >
2014-10-29 20:17:44 +01:00
< div class = "bs-docs-section bs-customizer-import" >
< div id = "import-drop-target" class = "bs-dropzone" >
2015-01-19 18:10:41 +01:00
< div class = "import-header" >
< span class = "glyphicon glyphicon-download-alt" aria-hidden = "true" > < / span >
< / div >
2014-10-29 20:17:44 +01:00
< p class = "lead" > Have an existing configuration? Upload your < code > config.json< / code > to import it.< / p >
< p > Drag and drop here, or < label id = "import-manual-trigger" class = "btn-link" > manually upload< input type = "file" id = "import-file-select" class = "hidden" > < / label > .< / p >
< hr >
< p > < strong > Don't have one?< / strong > That's okay—just start customizing the fields below.< / p >
< / div >
2015-01-19 18:10:41 +01:00
< / div >
2014-10-29 20:17:44 +01:00
2015-01-19 18:10:41 +01:00
< form class = "bs-customizer" >
2014-02-13 18:36:49 +01:00
< div class = "bs-docs-section" id = "less-section" >
< button class = "btn btn-default toggle" type = "button" > Toggle all< / button >
< h1 id = "less" class = "page-header" > Less files< / h1 >
< 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 >
< div class = "row" >
< div class = "col-xs-6 col-sm-4" >
< h3 > Common CSS< / h3 >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "print.less" >
Print media styles
< / label >
< / div >
< 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 = "grid.less" >
Grid system
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "tables.less" >
Tables
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "forms.less" data-dependents = "navbar.less,input-groups.less" >
Forms
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "buttons.less" data-dependents = "button-groups.less" >
Buttons
< / label >
< / div >
2014-06-26 18:46:59 +02:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "responsive-utilities.less" >
Responsive utilities
< / label >
< / div >
2014-02-13 18:36:49 +01:00
< / div > <!-- .col - xs - 6 .col - sm - 4 -->
< div class = "col-xs-6 col-sm-4" >
< h3 > Components< / h3 >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "glyphicons.less" >
Glyphicons
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "button-groups.less" data-dependencies = "buttons.less" >
Button groups
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "input-groups.less" data-dependencies = "forms.less" >
Input groups
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "navs.less" data-dependents = "navbar.less" >
Navs
< / label >
< / div >
< div class = "checkbox" >
< label >
2014-06-26 18:46:59 +02:00
< input type = "checkbox" checked value = "navbar.less" data-dependencies = "forms.less,navs.less" >
2014-02-13 18:36:49 +01:00
Navbar
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "breadcrumbs.less" >
Breadcrumbs
< / 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 = "labels.less" >
Labels
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "badges.less" >
Badges
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "jumbotron.less" >
Jumbotron
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "thumbnails.less" >
Thumbnails
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "alerts.less" >
Alerts
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "progress-bars.less" >
Progress bars
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "media.less" >
Media items
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "list-group.less" >
List groups
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "panels.less" >
Panels
< / label >
< / div >
2014-06-26 18:46:59 +02:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "responsive-embed.less" >
Responsive embed
< / label >
< / div >
2014-02-13 18:36:49 +01:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "wells.less" >
Wells
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "close.less" >
Close icon
< / label >
< / div >
< / div > <!-- .col - xs - 6 .col - sm - 4 -->
< div class = "col-xs-6 col-sm-4" >
< h3 > JavaScript components< / h3 >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "component-animations.less" >
Component animations (for JS)
< / 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 > <!-- .col - xs - 6 .col - sm - 4 -->
< / div > <!-- /.row -->
< / div >
< div class = "bs-docs-section" id = "plugin-section" >
< button class = "btn btn-default toggle" type = "button" > Toggle all< / button >
< h1 id = "plugins" class = "page-header" > jQuery plugins< / h1 >
< 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 >
< 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 >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "button.js" >
Advanced buttons
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "carousel.js" >
Carousel functionality
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "dropdown.js" >
Dropdowns
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "modal.js" >
Modals
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "tooltip.js" >
Tooltips
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "popover.js" data-dependencies = "tooltip.js" >
Popovers < small > (requires Tooltips)< / small >
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "tab.js" >
Togglable tabs
< / label >
< / div >
< / 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 >
< / div >
< 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 >
< 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 >
< div class = "bs-docs-section" id = "less-variables-section" >
< button class = "btn btn-default toggle" type = "button" > Reset to defaults< / button >
< h1 id = "less-variables" class = "page-header" > Less variables< / h1 >
< p class = "lead" > Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets.< / p >
2015-01-19 18:10:41 +01:00
2014-01-21 03:02:15 +01:00
<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build - customizer - html` Grunt task using the customizer - variables.jade template. -->
2013-10-18 04:52:16 +02:00
< h2 id = "colors" > Colors< / h2 >
< p > Gray and brand colors for use across Bootstrap.< / p >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
< label for = "input-@gray-base" > @gray-base< / label >
< input id = "input-@gray-base" type = "text" value = "#000" data-var = "@gray-base" class = "form-control" / >
< / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@gray-darker" > @gray-darker< / label >
2014-10-29 20:17:44 +01:00
< input id = "input-@gray-darker" type = "text" value = "lighten(@gray-base, 13.5%)" data-var = "@gray-darker" class = "form-control" / >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@gray-dark" > @gray-dark< / label >
2014-10-29 20:17:44 +01:00
< input id = "input-@gray-dark" type = "text" value = "lighten(@gray-base, 20%)" data-var = "@gray-dark" class = "form-control" / >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@gray" > @gray< / label >
2014-10-29 20:17:44 +01:00
< input id = "input-@gray" type = "text" value = "lighten(@gray-base, 33.5%)" data-var = "@gray" class = "form-control" / >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@gray-light" > @gray-light< / label >
2014-10-29 20:17:44 +01:00
< input id = "input-@gray-light" type = "text" value = "lighten(@gray-base, 46.7%)" data-var = "@gray-light" class = "form-control" / >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@gray-lighter" > @gray-lighter< / label >
2014-10-29 20:17:44 +01:00
< input id = "input-@gray-lighter" type = "text" value = "lighten(@gray-base, 93.5%)" data-var = "@gray-lighter" class = "form-control" / >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@brand-primary" > @brand-primary< / label >
2014-11-12 18:15:07 +01:00
< input id = "input-@brand-primary" type = "text" value = "darken(#428bca, 6.5%)" data-var = "@brand-primary" class = "form-control" / >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@brand-success" > @brand-success< / label >
< input id = "input-@brand-success" type = "text" value = "#5cb85c" data-var = "@brand-success" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@brand-info" > @brand-info< / label >
< input id = "input-@brand-info" type = "text" value = "#5bc0de" data-var = "@brand-info" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@brand-warning" > @brand-warning< / label >
< input id = "input-@brand-warning" type = "text" value = "#f0ad4e" data-var = "@brand-warning" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@brand-danger" > @brand-danger< / label >
< input id = "input-@brand-danger" type = "text" value = "#d9534f" data-var = "@brand-danger" class = "form-control" / >
< / div >
< / div >
< h2 id = "scaffolding" > Scaffolding< / h2 >
2014-06-26 18:46:59 +02:00
< p > Settings for some of the most global styles.< / p >
2013-10-18 04:52:16 +02:00
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@body-bg" > @body-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@body-bg" type = "text" aria-describedby = "help-block-@body-bg" value = "#fff" data-var = "@body-bg" class = "form-control" / >
< p id = "help-block-@body-bg" class = "help-block" > Background color for < code > < body> < / code > .< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@text-color" > @text-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@text-color" type = "text" aria-describedby = "help-block-@text-color" value = "@gray-dark" data-var = "@text-color" class = "form-control" / >
< p id = "help-block-@text-color" class = "help-block" > Global text color on < code > < body> < / code > .< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@link-color" > @link-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@link-color" type = "text" aria-describedby = "help-block-@link-color" value = "@brand-primary" data-var = "@link-color" class = "form-control" / >
< p id = "help-block-@link-color" class = "help-block" > Global textual link color.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@link-hover-color" > @link-hover-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@link-hover-color" type = "text" aria-describedby = "help-block-@link-hover-color" value = "darken(@link-color, 15%)" data-var = "@link-hover-color" class = "form-control" / >
< p id = "help-block-@link-hover-color" class = "help-block" > Link hover color set via < code > darken()< / code > function.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
< label for = "input-@link-hover-decoration" > @link-hover-decoration< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@link-hover-decoration" type = "text" aria-describedby = "help-block-@link-hover-decoration" value = "underline" data-var = "@link-hover-decoration" class = "form-control" / >
< p id = "help-block-@link-hover-decoration" class = "help-block" > Link hover decoration.< / p >
2014-10-29 20:17:44 +01:00
< / div >
2013-10-18 04:52:16 +02:00
< / div >
< h2 id = "typography" > Typography< / h2 >
< p > Font, line-height, and color for body text, headings, and more.< / p >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@font-family-sans-serif" > @font-family-sans-serif< / label >
< input id = "input-@font-family-sans-serif" type = "text" value = ""Helvetica Neue", Helvetica, Arial, sans-serif" data-var = "@font-family-sans-serif" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@font-family-serif" > @font-family-serif< / label >
< input id = "input-@font-family-serif" type = "text" value = "Georgia, "Times New Roman", Times, serif" data-var = "@font-family-serif" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@font-family-monospace" > @font-family-monospace< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@font-family-monospace" type = "text" aria-describedby = "help-block-@font-family-monospace" value = "Menlo, Monaco, Consolas, "Courier New", monospace" data-var = "@font-family-monospace" class = "form-control" / >
< p id = "help-block-@font-family-monospace" class = "help-block" > Default monospace fonts for < code > < code> < / code > , < code > < kbd> < / code > , and < code > < pre> < / code > .< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@font-family-base" > @font-family-base< / label >
< input id = "input-@font-family-base" type = "text" value = "@font-family-sans-serif" data-var = "@font-family-base" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@font-size-base" > @font-size-base< / label >
< input id = "input-@font-size-base" type = "text" value = "14px" data-var = "@font-size-base" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@font-size-large" > @font-size-large< / label >
< input id = "input-@font-size-large" type = "text" value = "ceil((@font-size-base * 1.25))" data-var = "@font-size-large" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@font-size-small" > @font-size-small< / label >
< input id = "input-@font-size-small" type = "text" value = "ceil((@font-size-base * 0.85))" data-var = "@font-size-small" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@font-size-h1" > @font-size-h1< / label >
< input id = "input-@font-size-h1" type = "text" value = "floor((@font-size-base * 2.6))" data-var = "@font-size-h1" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@font-size-h2" > @font-size-h2< / label >
< input id = "input-@font-size-h2" type = "text" value = "floor((@font-size-base * 2.15))" data-var = "@font-size-h2" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@font-size-h3" > @font-size-h3< / label >
< input id = "input-@font-size-h3" type = "text" value = "ceil((@font-size-base * 1.7))" data-var = "@font-size-h3" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@font-size-h4" > @font-size-h4< / label >
< input id = "input-@font-size-h4" type = "text" value = "ceil((@font-size-base * 1.25))" data-var = "@font-size-h4" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@font-size-h5" > @font-size-h5< / label >
< input id = "input-@font-size-h5" type = "text" value = "@font-size-base" data-var = "@font-size-h5" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@font-size-h6" > @font-size-h6< / label >
< input id = "input-@font-size-h6" type = "text" value = "ceil((@font-size-base * 0.85))" data-var = "@font-size-h6" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@line-height-base" > @line-height-base< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@line-height-base" type = "text" aria-describedby = "help-block-@line-height-base" value = "1.428571429" data-var = "@line-height-base" class = "form-control" / >
< p id = "help-block-@line-height-base" class = "help-block" > Unit-less < code > line-height< / code > for use in components like buttons.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@line-height-computed" > @line-height-computed< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@line-height-computed" type = "text" aria-describedby = "help-block-@line-height-computed" value = "floor((@font-size-base * @line-height-base))" data-var = "@line-height-computed" class = "form-control" / >
< p id = "help-block-@line-height-computed" class = "help-block" > Computed " line-height" (< code > font-size< / code > * < code > line-height< / code > ) for use with < code > margin< / code > , < code > padding< / code > , etc.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@headings-font-family" > @headings-font-family< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@headings-font-family" type = "text" aria-describedby = "help-block-@headings-font-family" value = "inherit" data-var = "@headings-font-family" class = "form-control" / >
< p id = "help-block-@headings-font-family" class = "help-block" > By default, this inherits from the < code > < body> < / code > .< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@headings-font-weight" > @headings-font-weight< / label >
< input id = "input-@headings-font-weight" type = "text" value = "500" data-var = "@headings-font-weight" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@headings-line-height" > @headings-line-height< / label >
< input id = "input-@headings-line-height" type = "text" value = "1.1" data-var = "@headings-line-height" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@headings-color" > @headings-color< / label >
< input id = "input-@headings-color" type = "text" value = "inherit" data-var = "@headings-color" class = "form-control" / >
< / div >
< / div >
2014-06-26 18:46:59 +02:00
< h2 id = "iconography" > Iconography< / h2 >
< p > Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.< / p >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-06-26 18:46:59 +02:00
< label for = "input-@icon-font-path" > @icon-font-path< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@icon-font-path" type = "text" aria-describedby = "help-block-@icon-font-path" value = ""../fonts/"" data-var = "@icon-font-path" class = "form-control" / >
< p id = "help-block-@icon-font-path" class = "help-block" > Load fonts from this directory.< / p >
2014-06-26 18:46:59 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-06-26 18:46:59 +02:00
< label for = "input-@icon-font-name" > @icon-font-name< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@icon-font-name" type = "text" aria-describedby = "help-block-@icon-font-name" value = ""glyphicons-halflings-regular"" data-var = "@icon-font-name" class = "form-control" / >
< p id = "help-block-@icon-font-name" class = "help-block" > File name for all font files.< / p >
2014-06-26 18:46:59 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-06-26 18:46:59 +02:00
< label for = "input-@icon-font-svg-id" > @icon-font-svg-id< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@icon-font-svg-id" type = "text" aria-describedby = "help-block-@icon-font-svg-id" value = ""glyphicons_halflingsregular"" data-var = "@icon-font-svg-id" class = "form-control" / >
< p id = "help-block-@icon-font-svg-id" class = "help-block" > Element ID within SVG icon file.< / p >
2014-06-26 18:46:59 +02:00
< / div >
< / div >
2013-10-18 04:52:16 +02:00
< h2 id = "components" > Components< / h2 >
< p > Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).< / p >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@padding-base-vertical" > @padding-base-vertical< / label >
< input id = "input-@padding-base-vertical" type = "text" value = "6px" data-var = "@padding-base-vertical" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@padding-base-horizontal" > @padding-base-horizontal< / label >
< input id = "input-@padding-base-horizontal" type = "text" value = "12px" data-var = "@padding-base-horizontal" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@padding-large-vertical" > @padding-large-vertical< / label >
< input id = "input-@padding-large-vertical" type = "text" value = "10px" data-var = "@padding-large-vertical" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@padding-large-horizontal" > @padding-large-horizontal< / label >
< input id = "input-@padding-large-horizontal" type = "text" value = "16px" data-var = "@padding-large-horizontal" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@padding-small-vertical" > @padding-small-vertical< / label >
< input id = "input-@padding-small-vertical" type = "text" value = "5px" data-var = "@padding-small-vertical" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@padding-small-horizontal" > @padding-small-horizontal< / label >
< input id = "input-@padding-small-horizontal" type = "text" value = "10px" data-var = "@padding-small-horizontal" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@padding-xs-vertical" > @padding-xs-vertical< / label >
< input id = "input-@padding-xs-vertical" type = "text" value = "1px" data-var = "@padding-xs-vertical" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@padding-xs-horizontal" > @padding-xs-horizontal< / label >
< input id = "input-@padding-xs-horizontal" type = "text" value = "5px" data-var = "@padding-xs-horizontal" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@line-height-large" > @line-height-large< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@line-height-large" type = "text" value = "1.3333333" data-var = "@line-height-large" class = "form-control" / >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@line-height-small" > @line-height-small< / label >
< input id = "input-@line-height-small" type = "text" value = "1.5" data-var = "@line-height-small" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@border-radius-base" > @border-radius-base< / label >
< input id = "input-@border-radius-base" type = "text" value = "4px" data-var = "@border-radius-base" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@border-radius-large" > @border-radius-large< / label >
< input id = "input-@border-radius-large" type = "text" value = "6px" data-var = "@border-radius-large" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@border-radius-small" > @border-radius-small< / label >
< input id = "input-@border-radius-small" type = "text" value = "3px" data-var = "@border-radius-small" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@component-active-color" > @component-active-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@component-active-color" type = "text" aria-describedby = "help-block-@component-active-color" value = "#fff" data-var = "@component-active-color" class = "form-control" / >
< p id = "help-block-@component-active-color" class = "help-block" > Global color for active items (e.g., navs or dropdowns).< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@component-active-bg" > @component-active-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@component-active-bg" type = "text" aria-describedby = "help-block-@component-active-bg" value = "@brand-primary" data-var = "@component-active-bg" class = "form-control" / >
< p id = "help-block-@component-active-bg" class = "help-block" > Global background color for active items (e.g., navs or dropdowns).< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@caret-width-base" > @caret-width-base< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@caret-width-base" type = "text" aria-describedby = "help-block-@caret-width-base" value = "4px" data-var = "@caret-width-base" class = "form-control" / >
< p id = "help-block-@caret-width-base" class = "help-block" > Width of the < code > border< / code > for generating carets that indicator dropdowns.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@caret-width-large" > @caret-width-large< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@caret-width-large" type = "text" aria-describedby = "help-block-@caret-width-large" value = "5px" data-var = "@caret-width-large" class = "form-control" / >
< p id = "help-block-@caret-width-large" class = "help-block" > Carets increase slightly in size for larger components.< / p >
2013-10-18 04:52:16 +02:00
< / div >
< / div >
< h2 id = "tables" > Tables< / h2 >
< p > Customizes the < code > .table< / code > component with basic values, each used across all table variations.< / p >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@table-cell-padding" > @table-cell-padding< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@table-cell-padding" type = "text" aria-describedby = "help-block-@table-cell-padding" value = "8px" data-var = "@table-cell-padding" class = "form-control" / >
< p id = "help-block-@table-cell-padding" class = "help-block" > Padding for < code > < th> < / code > s and < code > < td> < / code > s.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@table-condensed-cell-padding" > @table-condensed-cell-padding< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@table-condensed-cell-padding" type = "text" aria-describedby = "help-block-@table-condensed-cell-padding" value = "5px" data-var = "@table-condensed-cell-padding" class = "form-control" / >
< p id = "help-block-@table-condensed-cell-padding" class = "help-block" > Padding for cells in < code > .table-condensed< / code > .< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@table-bg" > @table-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@table-bg" type = "text" aria-describedby = "help-block-@table-bg" value = "transparent" data-var = "@table-bg" class = "form-control" / >
< p id = "help-block-@table-bg" class = "help-block" > Default background color used for all tables.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@table-bg-accent" > @table-bg-accent< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@table-bg-accent" type = "text" aria-describedby = "help-block-@table-bg-accent" value = "#f9f9f9" data-var = "@table-bg-accent" class = "form-control" / >
< p id = "help-block-@table-bg-accent" class = "help-block" > Background color used for < code > .table-striped< / code > .< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@table-bg-hover" > @table-bg-hover< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@table-bg-hover" type = "text" aria-describedby = "help-block-@table-bg-hover" value = "#f5f5f5" data-var = "@table-bg-hover" class = "form-control" / >
< p id = "help-block-@table-bg-hover" class = "help-block" > Background color used for < code > .table-hover< / code > .< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@table-bg-active" > @table-bg-active< / label >
< input id = "input-@table-bg-active" type = "text" value = "@table-bg-hover" data-var = "@table-bg-active" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@table-border-color" > @table-border-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@table-border-color" type = "text" aria-describedby = "help-block-@table-border-color" value = "#ddd" data-var = "@table-border-color" class = "form-control" / >
< p id = "help-block-@table-border-color" class = "help-block" > Border color for table and cell borders.< / p >
2013-10-18 04:52:16 +02:00
< / div >
< / div >
< h2 id = "buttons" > Buttons< / h2 >
2014-10-29 20:17:44 +01:00
< p > For each of Bootstrap's buttons, define text, background and border color.< / p >
2013-10-18 04:52:16 +02:00
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-font-weight" > @btn-font-weight< / label >
< input id = "input-@btn-font-weight" type = "text" value = "normal" data-var = "@btn-font-weight" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-default-color" > @btn-default-color< / label >
< input id = "input-@btn-default-color" type = "text" value = "#333" data-var = "@btn-default-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-default-bg" > @btn-default-bg< / label >
< input id = "input-@btn-default-bg" type = "text" value = "#fff" data-var = "@btn-default-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-default-border" > @btn-default-border< / label >
< input id = "input-@btn-default-border" type = "text" value = "#ccc" data-var = "@btn-default-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-primary-color" > @btn-primary-color< / label >
< input id = "input-@btn-primary-color" type = "text" value = "#fff" data-var = "@btn-primary-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-primary-bg" > @btn-primary-bg< / label >
< input id = "input-@btn-primary-bg" type = "text" value = "@brand-primary" data-var = "@btn-primary-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-primary-border" > @btn-primary-border< / label >
< input id = "input-@btn-primary-border" type = "text" value = "darken(@btn-primary-bg, 5%)" data-var = "@btn-primary-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-success-color" > @btn-success-color< / label >
< input id = "input-@btn-success-color" type = "text" value = "#fff" data-var = "@btn-success-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-success-bg" > @btn-success-bg< / label >
< input id = "input-@btn-success-bg" type = "text" value = "@brand-success" data-var = "@btn-success-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-success-border" > @btn-success-border< / label >
< input id = "input-@btn-success-border" type = "text" value = "darken(@btn-success-bg, 5%)" data-var = "@btn-success-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-info-color" > @btn-info-color< / label >
< input id = "input-@btn-info-color" type = "text" value = "#fff" data-var = "@btn-info-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-info-bg" > @btn-info-bg< / label >
< input id = "input-@btn-info-bg" type = "text" value = "@brand-info" data-var = "@btn-info-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-info-border" > @btn-info-border< / label >
< input id = "input-@btn-info-border" type = "text" value = "darken(@btn-info-bg, 5%)" data-var = "@btn-info-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-warning-color" > @btn-warning-color< / label >
< input id = "input-@btn-warning-color" type = "text" value = "#fff" data-var = "@btn-warning-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-warning-bg" > @btn-warning-bg< / label >
< input id = "input-@btn-warning-bg" type = "text" value = "@brand-warning" data-var = "@btn-warning-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-warning-border" > @btn-warning-border< / label >
< input id = "input-@btn-warning-border" type = "text" value = "darken(@btn-warning-bg, 5%)" data-var = "@btn-warning-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-danger-color" > @btn-danger-color< / label >
< input id = "input-@btn-danger-color" type = "text" value = "#fff" data-var = "@btn-danger-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-danger-bg" > @btn-danger-bg< / label >
< input id = "input-@btn-danger-bg" type = "text" value = "@brand-danger" data-var = "@btn-danger-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-danger-border" > @btn-danger-border< / label >
< input id = "input-@btn-danger-border" type = "text" value = "darken(@btn-danger-bg, 5%)" data-var = "@btn-danger-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@btn-link-disabled-color" > @btn-link-disabled-color< / label >
< input id = "input-@btn-link-disabled-color" type = "text" value = "@gray-light" data-var = "@btn-link-disabled-color" class = "form-control" / >
< / div >
< / div >
< h2 id = "forms" > Forms< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@input-bg" > @input-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-bg" type = "text" aria-describedby = "help-block-@input-bg" value = "#fff" data-var = "@input-bg" class = "form-control" / >
< p id = "help-block-@input-bg" class = "help-block" > < code > < input> < / code > background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@input-bg-disabled" > @input-bg-disabled< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-bg-disabled" type = "text" aria-describedby = "help-block-@input-bg-disabled" value = "@gray-lighter" data-var = "@input-bg-disabled" class = "form-control" / >
< p id = "help-block-@input-bg-disabled" class = "help-block" > < code > < input disabled> < / code > background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@input-color" > @input-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-color" type = "text" aria-describedby = "help-block-@input-color" value = "@gray" data-var = "@input-color" class = "form-control" / >
< p id = "help-block-@input-color" class = "help-block" > Text color for < code > < input> < / code > s< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@input-border" > @input-border< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-border" type = "text" aria-describedby = "help-block-@input-border" value = "#ccc" data-var = "@input-border" class = "form-control" / >
< p id = "help-block-@input-border" class = "help-block" > < code > < input> < / code > border color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@input-border-radius" > @input-border-radius< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-border-radius" type = "text" aria-describedby = "help-block-@input-border-radius" value = "@border-radius-base" data-var = "@input-border-radius" class = "form-control" / >
< p id = "help-block-@input-border-radius" class = "help-block" > Default < code > .form-control< / code > border radius< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
< label for = "input-@input-border-radius-large" > @input-border-radius-large< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-border-radius-large" type = "text" aria-describedby = "help-block-@input-border-radius-large" value = "@border-radius-large" data-var = "@input-border-radius-large" class = "form-control" / >
< p id = "help-block-@input-border-radius-large" class = "help-block" > Large < code > .form-control< / code > border radius< / p >
2014-10-29 20:17:44 +01:00
< / div >
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
< label for = "input-@input-border-radius-small" > @input-border-radius-small< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-border-radius-small" type = "text" aria-describedby = "help-block-@input-border-radius-small" value = "@border-radius-small" data-var = "@input-border-radius-small" class = "form-control" / >
< p id = "help-block-@input-border-radius-small" class = "help-block" > Small < code > .form-control< / code > border radius< / p >
2014-10-29 20:17:44 +01:00
< / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@input-border-focus" > @input-border-focus< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-border-focus" type = "text" aria-describedby = "help-block-@input-border-focus" value = "#66afe9" data-var = "@input-border-focus" class = "form-control" / >
< p id = "help-block-@input-border-focus" class = "help-block" > Border color for inputs on focus< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@input-color-placeholder" > @input-color-placeholder< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-color-placeholder" type = "text" aria-describedby = "help-block-@input-color-placeholder" value = "#999" data-var = "@input-color-placeholder" class = "form-control" / >
< p id = "help-block-@input-color-placeholder" class = "help-block" > Placeholder text color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@input-height-base" > @input-height-base< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-height-base" type = "text" aria-describedby = "help-block-@input-height-base" value = "(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var = "@input-height-base" class = "form-control" / >
< p id = "help-block-@input-height-base" class = "help-block" > Default < code > .form-control< / code > height< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@input-height-large" > @input-height-large< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-height-large" type = "text" aria-describedby = "help-block-@input-height-large" value = "(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)" data-var = "@input-height-large" class = "form-control" / >
< p id = "help-block-@input-height-large" class = "help-block" > Large < code > .form-control< / code > height< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@input-height-small" > @input-height-small< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-height-small" type = "text" aria-describedby = "help-block-@input-height-small" value = "(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var = "@input-height-small" class = "form-control" / >
< p id = "help-block-@input-height-small" class = "help-block" > Small < code > .form-control< / code > height< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@legend-color" > @legend-color< / label >
< input id = "input-@legend-color" type = "text" value = "@gray-dark" data-var = "@legend-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@legend-border-color" > @legend-border-color< / label >
< input id = "input-@legend-border-color" type = "text" value = "#e5e5e5" data-var = "@legend-border-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@input-group-addon-bg" > @input-group-addon-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-group-addon-bg" type = "text" aria-describedby = "help-block-@input-group-addon-bg" value = "@gray-lighter" data-var = "@input-group-addon-bg" class = "form-control" / >
< p id = "help-block-@input-group-addon-bg" class = "help-block" > Background color for textual input addons< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@input-group-addon-border-color" > @input-group-addon-border-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@input-group-addon-border-color" type = "text" aria-describedby = "help-block-@input-group-addon-border-color" value = "@input-border" data-var = "@input-group-addon-border-color" class = "form-control" / >
< p id = "help-block-@input-group-addon-border-color" class = "help-block" > Border color for textual input addons< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
< label for = "input-@cursor-disabled" > @cursor-disabled< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@cursor-disabled" type = "text" aria-describedby = "help-block-@cursor-disabled" value = "not-allowed" data-var = "@cursor-disabled" class = "form-control" / >
< p id = "help-block-@cursor-disabled" class = "help-block" > Disabled cursor for form controls and buttons.< / p >
2014-10-29 20:17:44 +01:00
< / div >
2013-10-18 04:52:16 +02:00
< / div >
< h2 id = "dropdowns" > Dropdowns< / h2 >
< p > Dropdown menu container and contents.< / p >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@dropdown-bg" > @dropdown-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@dropdown-bg" type = "text" aria-describedby = "help-block-@dropdown-bg" value = "#fff" data-var = "@dropdown-bg" class = "form-control" / >
< p id = "help-block-@dropdown-bg" class = "help-block" > Background for the dropdown menu.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@dropdown-border" > @dropdown-border< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@dropdown-border" type = "text" aria-describedby = "help-block-@dropdown-border" value = "rgba(0,0,0,.15)" data-var = "@dropdown-border" class = "form-control" / >
< p id = "help-block-@dropdown-border" class = "help-block" > Dropdown menu < code > border-color< / code > .< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@dropdown-fallback-border" > @dropdown-fallback-border< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@dropdown-fallback-border" type = "text" aria-describedby = "help-block-@dropdown-fallback-border" value = "#ccc" data-var = "@dropdown-fallback-border" class = "form-control" / >
< p id = "help-block-@dropdown-fallback-border" class = "help-block" > Dropdown menu < code > border-color< / code > < strong > for IE8< / strong > .< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@dropdown-divider-bg" > @dropdown-divider-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@dropdown-divider-bg" type = "text" aria-describedby = "help-block-@dropdown-divider-bg" value = "#e5e5e5" data-var = "@dropdown-divider-bg" class = "form-control" / >
< p id = "help-block-@dropdown-divider-bg" class = "help-block" > Divider color for between dropdown items.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@dropdown-link-color" > @dropdown-link-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@dropdown-link-color" type = "text" aria-describedby = "help-block-@dropdown-link-color" value = "@gray-dark" data-var = "@dropdown-link-color" class = "form-control" / >
< p id = "help-block-@dropdown-link-color" class = "help-block" > Dropdown link text color.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@dropdown-link-hover-color" > @dropdown-link-hover-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@dropdown-link-hover-color" type = "text" aria-describedby = "help-block-@dropdown-link-hover-color" value = "darken(@gray-dark, 5%)" data-var = "@dropdown-link-hover-color" class = "form-control" / >
< p id = "help-block-@dropdown-link-hover-color" class = "help-block" > Hover color for dropdown links.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@dropdown-link-hover-bg" > @dropdown-link-hover-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@dropdown-link-hover-bg" type = "text" aria-describedby = "help-block-@dropdown-link-hover-bg" value = "#f5f5f5" data-var = "@dropdown-link-hover-bg" class = "form-control" / >
< p id = "help-block-@dropdown-link-hover-bg" class = "help-block" > Hover background for dropdown links.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@dropdown-link-active-color" > @dropdown-link-active-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@dropdown-link-active-color" type = "text" aria-describedby = "help-block-@dropdown-link-active-color" value = "@component-active-color" data-var = "@dropdown-link-active-color" class = "form-control" / >
< p id = "help-block-@dropdown-link-active-color" class = "help-block" > Active dropdown menu item text color.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@dropdown-link-active-bg" > @dropdown-link-active-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@dropdown-link-active-bg" type = "text" aria-describedby = "help-block-@dropdown-link-active-bg" value = "@component-active-bg" data-var = "@dropdown-link-active-bg" class = "form-control" / >
< p id = "help-block-@dropdown-link-active-bg" class = "help-block" > Active dropdown menu item background color.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@dropdown-link-disabled-color" > @dropdown-link-disabled-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@dropdown-link-disabled-color" type = "text" aria-describedby = "help-block-@dropdown-link-disabled-color" value = "@gray-light" data-var = "@dropdown-link-disabled-color" class = "form-control" / >
< p id = "help-block-@dropdown-link-disabled-color" class = "help-block" > Disabled dropdown menu item background color.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@dropdown-header-color" > @dropdown-header-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@dropdown-header-color" type = "text" aria-describedby = "help-block-@dropdown-header-color" value = "@gray-light" data-var = "@dropdown-header-color" class = "form-control" / >
< p id = "help-block-@dropdown-header-color" class = "help-block" > Text color for headers within dropdown menus.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@dropdown-caret-color" > @dropdown-caret-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@dropdown-caret-color" type = "text" aria-describedby = "help-block-@dropdown-caret-color" value = "#000" data-var = "@dropdown-caret-color" class = "form-control" / >
< p id = "help-block-@dropdown-caret-color" class = "help-block" > Deprecated < code > @dropdown-caret-color< / code > as of v3.1.0< / p >
2013-10-18 04:52:16 +02:00
< / div >
< / div >
< h2 id = "media-queries-breakpoints" > Media queries breakpoints< / h2 >
< p > Define the breakpoints at which your layout will change, adapting to different screen sizes.< / p >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-xs" > @screen-xs< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@screen-xs" type = "text" aria-describedby = "help-block-@screen-xs" value = "480px" data-var = "@screen-xs" class = "form-control" / >
< p id = "help-block-@screen-xs" class = "help-block" > Deprecated < code > @screen-xs< / code > as of v3.0.1< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-xs-min" > @screen-xs-min< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@screen-xs-min" type = "text" aria-describedby = "help-block-@screen-xs-min" value = "@screen-xs" data-var = "@screen-xs-min" class = "form-control" / >
< p id = "help-block-@screen-xs-min" class = "help-block" > Deprecated < code > @screen-xs-min< / code > as of v3.2.0< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-phone" > @screen-phone< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@screen-phone" type = "text" aria-describedby = "help-block-@screen-phone" value = "@screen-xs-min" data-var = "@screen-phone" class = "form-control" / >
< p id = "help-block-@screen-phone" class = "help-block" > Deprecated < code > @screen-phone< / code > as of v3.0.1< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-sm" > @screen-sm< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@screen-sm" type = "text" aria-describedby = "help-block-@screen-sm" value = "768px" data-var = "@screen-sm" class = "form-control" / >
< p id = "help-block-@screen-sm" class = "help-block" > Deprecated < code > @screen-sm< / code > as of v3.0.1< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-sm-min" > @screen-sm-min< / label >
< input id = "input-@screen-sm-min" type = "text" value = "@screen-sm" data-var = "@screen-sm-min" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-tablet" > @screen-tablet< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@screen-tablet" type = "text" aria-describedby = "help-block-@screen-tablet" value = "@screen-sm-min" data-var = "@screen-tablet" class = "form-control" / >
< p id = "help-block-@screen-tablet" class = "help-block" > Deprecated < code > @screen-tablet< / code > as of v3.0.1< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-md" > @screen-md< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@screen-md" type = "text" aria-describedby = "help-block-@screen-md" value = "992px" data-var = "@screen-md" class = "form-control" / >
< p id = "help-block-@screen-md" class = "help-block" > Deprecated < code > @screen-md< / code > as of v3.0.1< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-md-min" > @screen-md-min< / label >
< input id = "input-@screen-md-min" type = "text" value = "@screen-md" data-var = "@screen-md-min" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-desktop" > @screen-desktop< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@screen-desktop" type = "text" aria-describedby = "help-block-@screen-desktop" value = "@screen-md-min" data-var = "@screen-desktop" class = "form-control" / >
< p id = "help-block-@screen-desktop" class = "help-block" > Deprecated < code > @screen-desktop< / code > as of v3.0.1< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-lg" > @screen-lg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@screen-lg" type = "text" aria-describedby = "help-block-@screen-lg" value = "1200px" data-var = "@screen-lg" class = "form-control" / >
< p id = "help-block-@screen-lg" class = "help-block" > Deprecated < code > @screen-lg< / code > as of v3.0.1< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-lg-min" > @screen-lg-min< / label >
< input id = "input-@screen-lg-min" type = "text" value = "@screen-lg" data-var = "@screen-lg-min" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-lg-desktop" > @screen-lg-desktop< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@screen-lg-desktop" type = "text" aria-describedby = "help-block-@screen-lg-desktop" value = "@screen-lg-min" data-var = "@screen-lg-desktop" class = "form-control" / >
< p id = "help-block-@screen-lg-desktop" class = "help-block" > Deprecated < code > @screen-lg-desktop< / code > as of v3.0.1< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-xs-max" > @screen-xs-max< / label >
< input id = "input-@screen-xs-max" type = "text" value = "(@screen-sm-min - 1)" data-var = "@screen-xs-max" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-sm-max" > @screen-sm-max< / label >
< input id = "input-@screen-sm-max" type = "text" value = "(@screen-md-min - 1)" data-var = "@screen-sm-max" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@screen-md-max" > @screen-md-max< / label >
< input id = "input-@screen-md-max" type = "text" value = "(@screen-lg-min - 1)" data-var = "@screen-md-max" class = "form-control" / >
< / div >
< / div >
< h2 id = "grid-system" > Grid system< / h2 >
< p > Define your custom responsive grid.< / p >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@grid-columns" > @grid-columns< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@grid-columns" type = "text" aria-describedby = "help-block-@grid-columns" value = "12" data-var = "@grid-columns" class = "form-control" / >
< p id = "help-block-@grid-columns" class = "help-block" > Number of columns in the grid.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@grid-gutter-width" > @grid-gutter-width< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@grid-gutter-width" type = "text" aria-describedby = "help-block-@grid-gutter-width" value = "30px" data-var = "@grid-gutter-width" class = "form-control" / >
< p id = "help-block-@grid-gutter-width" class = "help-block" > Padding between columns. Gets divided in half for the left and right.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@grid-float-breakpoint" > @grid-float-breakpoint< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@grid-float-breakpoint" type = "text" aria-describedby = "help-block-@grid-float-breakpoint" value = "@screen-sm-min" data-var = "@grid-float-breakpoint" class = "form-control" / >
< p id = "help-block-@grid-float-breakpoint" class = "help-block" > Point at which the navbar becomes uncollapsed.< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@grid-float-breakpoint-max" > @grid-float-breakpoint-max< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@grid-float-breakpoint-max" type = "text" aria-describedby = "help-block-@grid-float-breakpoint-max" value = "(@grid-float-breakpoint - 1)" data-var = "@grid-float-breakpoint-max" class = "form-control" / >
< p id = "help-block-@grid-float-breakpoint-max" class = "help-block" > Point at which the navbar begins collapsing.< / p >
2013-10-18 04:52:16 +02:00
< / div >
< / div >
2014-02-13 18:36:49 +01:00
< h2 id = "container-sizes" > Container sizes< / h2 >
< p > Define the maximum width of < code > .container< / code > for different screen sizes.< / p >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-02-13 18:36:49 +01:00
< label for = "input-@container-tablet" > @container-tablet< / label >
2014-10-29 20:17:44 +01:00
< input id = "input-@container-tablet" type = "text" value = "(720px + @grid-gutter-width)" data-var = "@container-tablet" class = "form-control" / >
2014-02-13 18:36:49 +01:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-02-13 18:36:49 +01:00
< label for = "input-@container-sm" > @container-sm< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@container-sm" type = "text" aria-describedby = "help-block-@container-sm" value = "@container-tablet" data-var = "@container-sm" class = "form-control" / >
< p id = "help-block-@container-sm" class = "help-block" > For < code > @screen-sm-min< / code > and up.< / p >
2014-02-13 18:36:49 +01:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-02-13 18:36:49 +01:00
< label for = "input-@container-desktop" > @container-desktop< / label >
2014-10-29 20:17:44 +01:00
< input id = "input-@container-desktop" type = "text" value = "(940px + @grid-gutter-width)" data-var = "@container-desktop" class = "form-control" / >
2014-02-13 18:36:49 +01:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2014-02-13 18:36:49 +01:00
< label for = "input-@container-md" > @container-md< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@container-md" type = "text" aria-describedby = "help-block-@container-md" value = "@container-desktop" data-var = "@container-md" class = "form-control" / >
< p id = "help-block-@container-md" class = "help-block" > For < code > @screen-md-min< / code > and up.< / p >
2014-02-13 18:36:49 +01:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-02-13 18:36:49 +01:00
< label for = "input-@container-large-desktop" > @container-large-desktop< / label >
2014-10-29 20:17:44 +01:00
< input id = "input-@container-large-desktop" type = "text" value = "(1140px + @grid-gutter-width)" data-var = "@container-large-desktop" class = "form-control" / >
2014-02-13 18:36:49 +01:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-02-13 18:36:49 +01:00
< label for = "input-@container-lg" > @container-lg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@container-lg" type = "text" aria-describedby = "help-block-@container-lg" value = "@container-large-desktop" data-var = "@container-lg" class = "form-control" / >
< p id = "help-block-@container-lg" class = "help-block" > For < code > @screen-lg-min< / code > and up.< / p >
2014-02-13 18:36:49 +01:00
< / div >
< / div >
2013-10-18 04:52:16 +02:00
< h2 id = "navbar" > Navbar< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-height" > @navbar-height< / label >
< input id = "input-@navbar-height" type = "text" value = "50px" data-var = "@navbar-height" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-margin-bottom" > @navbar-margin-bottom< / label >
< input id = "input-@navbar-margin-bottom" type = "text" value = "@line-height-computed" data-var = "@navbar-margin-bottom" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-border-radius" > @navbar-border-radius< / label >
< input id = "input-@navbar-border-radius" type = "text" value = "@border-radius-base" data-var = "@navbar-border-radius" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-padding-horizontal" > @navbar-padding-horizontal< / label >
< input id = "input-@navbar-padding-horizontal" type = "text" value = "floor((@grid-gutter-width / 2))" data-var = "@navbar-padding-horizontal" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-padding-vertical" > @navbar-padding-vertical< / label >
< input id = "input-@navbar-padding-vertical" type = "text" value = "((@navbar-height - @line-height-computed) / 2)" data-var = "@navbar-padding-vertical" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-01-30 07:44:06 +01:00
< label for = "input-@navbar-collapse-max-height" > @navbar-collapse-max-height< / label >
< input id = "input-@navbar-collapse-max-height" type = "text" value = "340px" data-var = "@navbar-collapse-max-height" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-color" > @navbar-default-color< / label >
< input id = "input-@navbar-default-color" type = "text" value = "#777" data-var = "@navbar-default-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-bg" > @navbar-default-bg< / label >
< input id = "input-@navbar-default-bg" type = "text" value = "#f8f8f8" data-var = "@navbar-default-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-border" > @navbar-default-border< / label >
< input id = "input-@navbar-default-border" type = "text" value = "darken(@navbar-default-bg, 6.5%)" data-var = "@navbar-default-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-link-color" > @navbar-default-link-color< / label >
< input id = "input-@navbar-default-link-color" type = "text" value = "#777" data-var = "@navbar-default-link-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-link-hover-color" > @navbar-default-link-hover-color< / label >
< input id = "input-@navbar-default-link-hover-color" type = "text" value = "#333" data-var = "@navbar-default-link-hover-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-link-hover-bg" > @navbar-default-link-hover-bg< / label >
< input id = "input-@navbar-default-link-hover-bg" type = "text" value = "transparent" data-var = "@navbar-default-link-hover-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-link-active-color" > @navbar-default-link-active-color< / label >
< input id = "input-@navbar-default-link-active-color" type = "text" value = "#555" data-var = "@navbar-default-link-active-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-link-active-bg" > @navbar-default-link-active-bg< / label >
< input id = "input-@navbar-default-link-active-bg" type = "text" value = "darken(@navbar-default-bg, 6.5%)" data-var = "@navbar-default-link-active-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-link-disabled-color" > @navbar-default-link-disabled-color< / label >
< input id = "input-@navbar-default-link-disabled-color" type = "text" value = "#ccc" data-var = "@navbar-default-link-disabled-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-link-disabled-bg" > @navbar-default-link-disabled-bg< / label >
< input id = "input-@navbar-default-link-disabled-bg" type = "text" value = "transparent" data-var = "@navbar-default-link-disabled-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-brand-color" > @navbar-default-brand-color< / label >
< input id = "input-@navbar-default-brand-color" type = "text" value = "@navbar-default-link-color" data-var = "@navbar-default-brand-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-brand-hover-color" > @navbar-default-brand-hover-color< / label >
< input id = "input-@navbar-default-brand-hover-color" type = "text" value = "darken(@navbar-default-brand-color, 10%)" data-var = "@navbar-default-brand-hover-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-brand-hover-bg" > @navbar-default-brand-hover-bg< / label >
< input id = "input-@navbar-default-brand-hover-bg" type = "text" value = "transparent" data-var = "@navbar-default-brand-hover-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-toggle-hover-bg" > @navbar-default-toggle-hover-bg< / label >
< input id = "input-@navbar-default-toggle-hover-bg" type = "text" value = "#ddd" data-var = "@navbar-default-toggle-hover-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-toggle-icon-bar-bg" > @navbar-default-toggle-icon-bar-bg< / label >
< input id = "input-@navbar-default-toggle-icon-bar-bg" type = "text" value = "#888" data-var = "@navbar-default-toggle-icon-bar-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-default-toggle-border-color" > @navbar-default-toggle-border-color< / label >
< input id = "input-@navbar-default-toggle-border-color" type = "text" value = "#ddd" data-var = "@navbar-default-toggle-border-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-color" > @navbar-inverse-color< / label >
2014-10-29 20:17:44 +01:00
< input id = "input-@navbar-inverse-color" type = "text" value = "lighten(@gray-light, 15%)" data-var = "@navbar-inverse-color" class = "form-control" / >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-bg" > @navbar-inverse-bg< / label >
< input id = "input-@navbar-inverse-bg" type = "text" value = "#222" data-var = "@navbar-inverse-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-border" > @navbar-inverse-border< / label >
< input id = "input-@navbar-inverse-border" type = "text" value = "darken(@navbar-inverse-bg, 10%)" data-var = "@navbar-inverse-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-link-color" > @navbar-inverse-link-color< / label >
2014-10-29 20:17:44 +01:00
< input id = "input-@navbar-inverse-link-color" type = "text" value = "lighten(@gray-light, 15%)" data-var = "@navbar-inverse-link-color" class = "form-control" / >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-link-hover-color" > @navbar-inverse-link-hover-color< / label >
< input id = "input-@navbar-inverse-link-hover-color" type = "text" value = "#fff" data-var = "@navbar-inverse-link-hover-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-link-hover-bg" > @navbar-inverse-link-hover-bg< / label >
< input id = "input-@navbar-inverse-link-hover-bg" type = "text" value = "transparent" data-var = "@navbar-inverse-link-hover-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-link-active-color" > @navbar-inverse-link-active-color< / label >
< input id = "input-@navbar-inverse-link-active-color" type = "text" value = "@navbar-inverse-link-hover-color" data-var = "@navbar-inverse-link-active-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-link-active-bg" > @navbar-inverse-link-active-bg< / label >
< input id = "input-@navbar-inverse-link-active-bg" type = "text" value = "darken(@navbar-inverse-bg, 10%)" data-var = "@navbar-inverse-link-active-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-link-disabled-color" > @navbar-inverse-link-disabled-color< / label >
< input id = "input-@navbar-inverse-link-disabled-color" type = "text" value = "#444" data-var = "@navbar-inverse-link-disabled-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-link-disabled-bg" > @navbar-inverse-link-disabled-bg< / label >
< input id = "input-@navbar-inverse-link-disabled-bg" type = "text" value = "transparent" data-var = "@navbar-inverse-link-disabled-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-brand-color" > @navbar-inverse-brand-color< / label >
< input id = "input-@navbar-inverse-brand-color" type = "text" value = "@navbar-inverse-link-color" data-var = "@navbar-inverse-brand-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-brand-hover-color" > @navbar-inverse-brand-hover-color< / label >
< input id = "input-@navbar-inverse-brand-hover-color" type = "text" value = "#fff" data-var = "@navbar-inverse-brand-hover-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-brand-hover-bg" > @navbar-inverse-brand-hover-bg< / label >
< input id = "input-@navbar-inverse-brand-hover-bg" type = "text" value = "transparent" data-var = "@navbar-inverse-brand-hover-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-toggle-hover-bg" > @navbar-inverse-toggle-hover-bg< / label >
< input id = "input-@navbar-inverse-toggle-hover-bg" type = "text" value = "#333" data-var = "@navbar-inverse-toggle-hover-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-toggle-icon-bar-bg" > @navbar-inverse-toggle-icon-bar-bg< / label >
< input id = "input-@navbar-inverse-toggle-icon-bar-bg" type = "text" value = "#fff" data-var = "@navbar-inverse-toggle-icon-bar-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@navbar-inverse-toggle-border-color" > @navbar-inverse-toggle-border-color< / label >
< input id = "input-@navbar-inverse-toggle-border-color" type = "text" value = "#333" data-var = "@navbar-inverse-toggle-border-color" class = "form-control" / >
< / div >
< / div >
< h2 id = "navs" > Navs< / h2 >
2014-01-08 06:43:12 +01:00
< h3 id = "shared-nav-styles" > Shared nav styles< / h3 >
2013-10-18 04:52:16 +02:00
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-link-padding" > @nav-link-padding< / label >
< input id = "input-@nav-link-padding" type = "text" value = "10px 15px" data-var = "@nav-link-padding" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-link-hover-bg" > @nav-link-hover-bg< / label >
< input id = "input-@nav-link-hover-bg" type = "text" value = "@gray-lighter" data-var = "@nav-link-hover-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-disabled-link-color" > @nav-disabled-link-color< / label >
< input id = "input-@nav-disabled-link-color" type = "text" value = "@gray-light" data-var = "@nav-disabled-link-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-disabled-link-hover-color" > @nav-disabled-link-hover-color< / label >
< input id = "input-@nav-disabled-link-hover-color" type = "text" value = "@gray-light" data-var = "@nav-disabled-link-hover-color" class = "form-control" / >
< / div >
< / div >
< h2 id = "tabs" > Tabs< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-tabs-border-color" > @nav-tabs-border-color< / label >
< input id = "input-@nav-tabs-border-color" type = "text" value = "#ddd" data-var = "@nav-tabs-border-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-tabs-link-hover-border-color" > @nav-tabs-link-hover-border-color< / label >
< input id = "input-@nav-tabs-link-hover-border-color" type = "text" value = "@gray-lighter" data-var = "@nav-tabs-link-hover-border-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-tabs-active-link-hover-bg" > @nav-tabs-active-link-hover-bg< / label >
< input id = "input-@nav-tabs-active-link-hover-bg" type = "text" value = "@body-bg" data-var = "@nav-tabs-active-link-hover-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-tabs-active-link-hover-color" > @nav-tabs-active-link-hover-color< / label >
< input id = "input-@nav-tabs-active-link-hover-color" type = "text" value = "@gray" data-var = "@nav-tabs-active-link-hover-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-tabs-active-link-hover-border-color" > @nav-tabs-active-link-hover-border-color< / label >
< input id = "input-@nav-tabs-active-link-hover-border-color" type = "text" value = "#ddd" data-var = "@nav-tabs-active-link-hover-border-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-tabs-justified-link-border-color" > @nav-tabs-justified-link-border-color< / label >
< input id = "input-@nav-tabs-justified-link-border-color" type = "text" value = "#ddd" data-var = "@nav-tabs-justified-link-border-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-tabs-justified-active-link-border-color" > @nav-tabs-justified-active-link-border-color< / label >
< input id = "input-@nav-tabs-justified-active-link-border-color" type = "text" value = "@body-bg" data-var = "@nav-tabs-justified-active-link-border-color" class = "form-control" / >
< / div >
< / div >
< h2 id = "pills" > Pills< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-pills-border-radius" > @nav-pills-border-radius< / label >
< input id = "input-@nav-pills-border-radius" type = "text" value = "@border-radius-base" data-var = "@nav-pills-border-radius" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-pills-active-link-hover-bg" > @nav-pills-active-link-hover-bg< / label >
< input id = "input-@nav-pills-active-link-hover-bg" type = "text" value = "@component-active-bg" data-var = "@nav-pills-active-link-hover-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@nav-pills-active-link-hover-color" > @nav-pills-active-link-hover-color< / label >
< input id = "input-@nav-pills-active-link-hover-color" type = "text" value = "@component-active-color" data-var = "@nav-pills-active-link-hover-color" class = "form-control" / >
< / div >
< / div >
< h2 id = "pagination" > Pagination< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pagination-color" > @pagination-color< / label >
< input id = "input-@pagination-color" type = "text" value = "@link-color" data-var = "@pagination-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pagination-bg" > @pagination-bg< / label >
< input id = "input-@pagination-bg" type = "text" value = "#fff" data-var = "@pagination-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pagination-border" > @pagination-border< / label >
< input id = "input-@pagination-border" type = "text" value = "#ddd" data-var = "@pagination-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pagination-hover-color" > @pagination-hover-color< / label >
< input id = "input-@pagination-hover-color" type = "text" value = "@link-hover-color" data-var = "@pagination-hover-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pagination-hover-bg" > @pagination-hover-bg< / label >
< input id = "input-@pagination-hover-bg" type = "text" value = "@gray-lighter" data-var = "@pagination-hover-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pagination-hover-border" > @pagination-hover-border< / label >
< input id = "input-@pagination-hover-border" type = "text" value = "#ddd" data-var = "@pagination-hover-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pagination-active-color" > @pagination-active-color< / label >
< input id = "input-@pagination-active-color" type = "text" value = "#fff" data-var = "@pagination-active-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pagination-active-bg" > @pagination-active-bg< / label >
< input id = "input-@pagination-active-bg" type = "text" value = "@brand-primary" data-var = "@pagination-active-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pagination-active-border" > @pagination-active-border< / label >
< input id = "input-@pagination-active-border" type = "text" value = "@brand-primary" data-var = "@pagination-active-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pagination-disabled-color" > @pagination-disabled-color< / label >
< input id = "input-@pagination-disabled-color" type = "text" value = "@gray-light" data-var = "@pagination-disabled-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pagination-disabled-bg" > @pagination-disabled-bg< / label >
< input id = "input-@pagination-disabled-bg" type = "text" value = "#fff" data-var = "@pagination-disabled-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pagination-disabled-border" > @pagination-disabled-border< / label >
< input id = "input-@pagination-disabled-border" type = "text" value = "#ddd" data-var = "@pagination-disabled-border" class = "form-control" / >
< / div >
< / div >
< h2 id = "pager" > Pager< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pager-bg" > @pager-bg< / label >
< input id = "input-@pager-bg" type = "text" value = "@pagination-bg" data-var = "@pager-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pager-border" > @pager-border< / label >
< input id = "input-@pager-border" type = "text" value = "@pagination-border" data-var = "@pager-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pager-border-radius" > @pager-border-radius< / label >
< input id = "input-@pager-border-radius" type = "text" value = "15px" data-var = "@pager-border-radius" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pager-hover-bg" > @pager-hover-bg< / label >
< input id = "input-@pager-hover-bg" type = "text" value = "@pagination-hover-bg" data-var = "@pager-hover-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pager-active-bg" > @pager-active-bg< / label >
< input id = "input-@pager-active-bg" type = "text" value = "@pagination-active-bg" data-var = "@pager-active-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pager-active-color" > @pager-active-color< / label >
< input id = "input-@pager-active-color" type = "text" value = "@pagination-active-color" data-var = "@pager-active-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pager-disabled-color" > @pager-disabled-color< / label >
< input id = "input-@pager-disabled-color" type = "text" value = "@pagination-disabled-color" data-var = "@pager-disabled-color" class = "form-control" / >
< / div >
< / div >
< h2 id = "jumbotron" > Jumbotron< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@jumbotron-padding" > @jumbotron-padding< / label >
< input id = "input-@jumbotron-padding" type = "text" value = "30px" data-var = "@jumbotron-padding" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@jumbotron-color" > @jumbotron-color< / label >
< input id = "input-@jumbotron-color" type = "text" value = "inherit" data-var = "@jumbotron-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@jumbotron-bg" > @jumbotron-bg< / label >
< input id = "input-@jumbotron-bg" type = "text" value = "@gray-lighter" data-var = "@jumbotron-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@jumbotron-heading-color" > @jumbotron-heading-color< / label >
< input id = "input-@jumbotron-heading-color" type = "text" value = "inherit" data-var = "@jumbotron-heading-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@jumbotron-font-size" > @jumbotron-font-size< / label >
< input id = "input-@jumbotron-font-size" type = "text" value = "ceil((@font-size-base * 1.5))" data-var = "@jumbotron-font-size" class = "form-control" / >
< / div >
< / div >
< h2 id = "form-states-and-alerts" > Form states and alerts< / h2 >
< p > Define colors for form feedback states and, by default, alerts.< / p >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@state-success-text" > @state-success-text< / label >
< input id = "input-@state-success-text" type = "text" value = "#3c763d" data-var = "@state-success-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@state-success-bg" > @state-success-bg< / label >
< input id = "input-@state-success-bg" type = "text" value = "#dff0d8" data-var = "@state-success-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@state-success-border" > @state-success-border< / label >
< input id = "input-@state-success-border" type = "text" value = "darken(spin(@state-success-bg, -10), 5%)" data-var = "@state-success-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@state-info-text" > @state-info-text< / label >
< input id = "input-@state-info-text" type = "text" value = "#31708f" data-var = "@state-info-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@state-info-bg" > @state-info-bg< / label >
< input id = "input-@state-info-bg" type = "text" value = "#d9edf7" data-var = "@state-info-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@state-info-border" > @state-info-border< / label >
< input id = "input-@state-info-border" type = "text" value = "darken(spin(@state-info-bg, -10), 7%)" data-var = "@state-info-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@state-warning-text" > @state-warning-text< / label >
< input id = "input-@state-warning-text" type = "text" value = "#8a6d3b" data-var = "@state-warning-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@state-warning-bg" > @state-warning-bg< / label >
< input id = "input-@state-warning-bg" type = "text" value = "#fcf8e3" data-var = "@state-warning-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@state-warning-border" > @state-warning-border< / label >
< input id = "input-@state-warning-border" type = "text" value = "darken(spin(@state-warning-bg, -10), 5%)" data-var = "@state-warning-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@state-danger-text" > @state-danger-text< / label >
< input id = "input-@state-danger-text" type = "text" value = "#a94442" data-var = "@state-danger-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@state-danger-bg" > @state-danger-bg< / label >
< input id = "input-@state-danger-bg" type = "text" value = "#f2dede" data-var = "@state-danger-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@state-danger-border" > @state-danger-border< / label >
< input id = "input-@state-danger-border" type = "text" value = "darken(spin(@state-danger-bg, -10), 5%)" data-var = "@state-danger-border" class = "form-control" / >
< / div >
< / div >
< h2 id = "tooltips" > Tooltips< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@tooltip-max-width" > @tooltip-max-width< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@tooltip-max-width" type = "text" aria-describedby = "help-block-@tooltip-max-width" value = "200px" data-var = "@tooltip-max-width" class = "form-control" / >
< p id = "help-block-@tooltip-max-width" class = "help-block" > Tooltip max width< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@tooltip-color" > @tooltip-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@tooltip-color" type = "text" aria-describedby = "help-block-@tooltip-color" value = "#fff" data-var = "@tooltip-color" class = "form-control" / >
< p id = "help-block-@tooltip-color" class = "help-block" > Tooltip text color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@tooltip-bg" > @tooltip-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@tooltip-bg" type = "text" aria-describedby = "help-block-@tooltip-bg" value = "#000" data-var = "@tooltip-bg" class = "form-control" / >
< p id = "help-block-@tooltip-bg" class = "help-block" > Tooltip background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@tooltip-opacity" > @tooltip-opacity< / label >
< input id = "input-@tooltip-opacity" type = "text" value = ".9" data-var = "@tooltip-opacity" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@tooltip-arrow-width" > @tooltip-arrow-width< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@tooltip-arrow-width" type = "text" aria-describedby = "help-block-@tooltip-arrow-width" value = "5px" data-var = "@tooltip-arrow-width" class = "form-control" / >
< p id = "help-block-@tooltip-arrow-width" class = "help-block" > Tooltip arrow width< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@tooltip-arrow-color" > @tooltip-arrow-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@tooltip-arrow-color" type = "text" aria-describedby = "help-block-@tooltip-arrow-color" value = "@tooltip-bg" data-var = "@tooltip-arrow-color" class = "form-control" / >
< p id = "help-block-@tooltip-arrow-color" class = "help-block" > Tooltip arrow color< / p >
2013-10-18 04:52:16 +02:00
< / div >
< / div >
< h2 id = "popovers" > Popovers< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@popover-bg" > @popover-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@popover-bg" type = "text" aria-describedby = "help-block-@popover-bg" value = "#fff" data-var = "@popover-bg" class = "form-control" / >
< p id = "help-block-@popover-bg" class = "help-block" > Popover body background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@popover-max-width" > @popover-max-width< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@popover-max-width" type = "text" aria-describedby = "help-block-@popover-max-width" value = "276px" data-var = "@popover-max-width" class = "form-control" / >
< p id = "help-block-@popover-max-width" class = "help-block" > Popover maximum width< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@popover-border-color" > @popover-border-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@popover-border-color" type = "text" aria-describedby = "help-block-@popover-border-color" value = "rgba(0,0,0,.2)" data-var = "@popover-border-color" class = "form-control" / >
< p id = "help-block-@popover-border-color" class = "help-block" > Popover border color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@popover-fallback-border-color" > @popover-fallback-border-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@popover-fallback-border-color" type = "text" aria-describedby = "help-block-@popover-fallback-border-color" value = "#ccc" data-var = "@popover-fallback-border-color" class = "form-control" / >
< p id = "help-block-@popover-fallback-border-color" class = "help-block" > Popover fallback border color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@popover-title-bg" > @popover-title-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@popover-title-bg" type = "text" aria-describedby = "help-block-@popover-title-bg" value = "darken(@popover-bg, 3%)" data-var = "@popover-title-bg" class = "form-control" / >
< p id = "help-block-@popover-title-bg" class = "help-block" > Popover title background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@popover-arrow-width" > @popover-arrow-width< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@popover-arrow-width" type = "text" aria-describedby = "help-block-@popover-arrow-width" value = "10px" data-var = "@popover-arrow-width" class = "form-control" / >
< p id = "help-block-@popover-arrow-width" class = "help-block" > Popover arrow width< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@popover-arrow-color" > @popover-arrow-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@popover-arrow-color" type = "text" aria-describedby = "help-block-@popover-arrow-color" value = "@popover-bg" data-var = "@popover-arrow-color" class = "form-control" / >
< p id = "help-block-@popover-arrow-color" class = "help-block" > Popover arrow color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@popover-arrow-outer-width" > @popover-arrow-outer-width< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@popover-arrow-outer-width" type = "text" aria-describedby = "help-block-@popover-arrow-outer-width" value = "(@popover-arrow-width + 1)" data-var = "@popover-arrow-outer-width" class = "form-control" / >
< p id = "help-block-@popover-arrow-outer-width" class = "help-block" > Popover outer arrow width< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@popover-arrow-outer-color" > @popover-arrow-outer-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@popover-arrow-outer-color" type = "text" aria-describedby = "help-block-@popover-arrow-outer-color" value = "fadein(@popover-border-color, 5%)" data-var = "@popover-arrow-outer-color" class = "form-control" / >
< p id = "help-block-@popover-arrow-outer-color" class = "help-block" > Popover outer arrow color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@popover-arrow-outer-fallback-color" > @popover-arrow-outer-fallback-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@popover-arrow-outer-fallback-color" type = "text" aria-describedby = "help-block-@popover-arrow-outer-fallback-color" value = "darken(@popover-fallback-border-color, 20%)" data-var = "@popover-arrow-outer-fallback-color" class = "form-control" / >
< p id = "help-block-@popover-arrow-outer-fallback-color" class = "help-block" > Popover outer arrow fallback color< / p >
2013-10-18 04:52:16 +02:00
< / div >
< / div >
< h2 id = "labels" > Labels< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@label-default-bg" > @label-default-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@label-default-bg" type = "text" aria-describedby = "help-block-@label-default-bg" value = "@gray-light" data-var = "@label-default-bg" class = "form-control" / >
< p id = "help-block-@label-default-bg" class = "help-block" > Default label background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@label-primary-bg" > @label-primary-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@label-primary-bg" type = "text" aria-describedby = "help-block-@label-primary-bg" value = "@brand-primary" data-var = "@label-primary-bg" class = "form-control" / >
< p id = "help-block-@label-primary-bg" class = "help-block" > Primary label background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@label-success-bg" > @label-success-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@label-success-bg" type = "text" aria-describedby = "help-block-@label-success-bg" value = "@brand-success" data-var = "@label-success-bg" class = "form-control" / >
< p id = "help-block-@label-success-bg" class = "help-block" > Success label background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@label-info-bg" > @label-info-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@label-info-bg" type = "text" aria-describedby = "help-block-@label-info-bg" value = "@brand-info" data-var = "@label-info-bg" class = "form-control" / >
< p id = "help-block-@label-info-bg" class = "help-block" > Info label background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@label-warning-bg" > @label-warning-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@label-warning-bg" type = "text" aria-describedby = "help-block-@label-warning-bg" value = "@brand-warning" data-var = "@label-warning-bg" class = "form-control" / >
< p id = "help-block-@label-warning-bg" class = "help-block" > Warning label background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@label-danger-bg" > @label-danger-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@label-danger-bg" type = "text" aria-describedby = "help-block-@label-danger-bg" value = "@brand-danger" data-var = "@label-danger-bg" class = "form-control" / >
< p id = "help-block-@label-danger-bg" class = "help-block" > Danger label background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@label-color" > @label-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@label-color" type = "text" aria-describedby = "help-block-@label-color" value = "#fff" data-var = "@label-color" class = "form-control" / >
< p id = "help-block-@label-color" class = "help-block" > Default label text color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@label-link-hover-color" > @label-link-hover-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@label-link-hover-color" type = "text" aria-describedby = "help-block-@label-link-hover-color" value = "#fff" data-var = "@label-link-hover-color" class = "form-control" / >
< p id = "help-block-@label-link-hover-color" class = "help-block" > Default text color of a linked label< / p >
2013-10-18 04:52:16 +02:00
< / div >
< / div >
< h2 id = "modals" > Modals< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@modal-inner-padding" > @modal-inner-padding< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@modal-inner-padding" type = "text" aria-describedby = "help-block-@modal-inner-padding" value = "15px" data-var = "@modal-inner-padding" class = "form-control" / >
< p id = "help-block-@modal-inner-padding" class = "help-block" > Padding applied to the modal body< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@modal-title-padding" > @modal-title-padding< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@modal-title-padding" type = "text" aria-describedby = "help-block-@modal-title-padding" value = "15px" data-var = "@modal-title-padding" class = "form-control" / >
< p id = "help-block-@modal-title-padding" class = "help-block" > Padding applied to the modal title< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@modal-title-line-height" > @modal-title-line-height< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@modal-title-line-height" type = "text" aria-describedby = "help-block-@modal-title-line-height" value = "@line-height-base" data-var = "@modal-title-line-height" class = "form-control" / >
< p id = "help-block-@modal-title-line-height" class = "help-block" > Modal title line-height< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@modal-content-bg" > @modal-content-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@modal-content-bg" type = "text" aria-describedby = "help-block-@modal-content-bg" value = "#fff" data-var = "@modal-content-bg" class = "form-control" / >
< p id = "help-block-@modal-content-bg" class = "help-block" > Background color of modal content area< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@modal-content-border-color" > @modal-content-border-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@modal-content-border-color" type = "text" aria-describedby = "help-block-@modal-content-border-color" value = "rgba(0,0,0,.2)" data-var = "@modal-content-border-color" class = "form-control" / >
< p id = "help-block-@modal-content-border-color" class = "help-block" > Modal content border color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@modal-content-fallback-border-color" > @modal-content-fallback-border-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@modal-content-fallback-border-color" type = "text" aria-describedby = "help-block-@modal-content-fallback-border-color" value = "#999" data-var = "@modal-content-fallback-border-color" class = "form-control" / >
< p id = "help-block-@modal-content-fallback-border-color" class = "help-block" > Modal content border color < strong > for IE8< / strong > < / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@modal-backdrop-bg" > @modal-backdrop-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@modal-backdrop-bg" type = "text" aria-describedby = "help-block-@modal-backdrop-bg" value = "#000" data-var = "@modal-backdrop-bg" class = "form-control" / >
< p id = "help-block-@modal-backdrop-bg" class = "help-block" > Modal backdrop background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@modal-backdrop-opacity" > @modal-backdrop-opacity< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@modal-backdrop-opacity" type = "text" aria-describedby = "help-block-@modal-backdrop-opacity" value = ".5" data-var = "@modal-backdrop-opacity" class = "form-control" / >
< p id = "help-block-@modal-backdrop-opacity" class = "help-block" > Modal backdrop opacity< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@modal-header-border-color" > @modal-header-border-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@modal-header-border-color" type = "text" aria-describedby = "help-block-@modal-header-border-color" value = "#e5e5e5" data-var = "@modal-header-border-color" class = "form-control" / >
< p id = "help-block-@modal-header-border-color" class = "help-block" > Modal header border color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@modal-footer-border-color" > @modal-footer-border-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@modal-footer-border-color" type = "text" aria-describedby = "help-block-@modal-footer-border-color" value = "@modal-header-border-color" data-var = "@modal-footer-border-color" class = "form-control" / >
< p id = "help-block-@modal-footer-border-color" class = "help-block" > Modal footer border color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@modal-lg" > @modal-lg< / label >
< input id = "input-@modal-lg" type = "text" value = "900px" data-var = "@modal-lg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-01-20 00:28:30 +01:00
< label for = "input-@modal-md" > @modal-md< / label >
< input id = "input-@modal-md" type = "text" value = "600px" data-var = "@modal-md" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@modal-sm" > @modal-sm< / label >
< input id = "input-@modal-sm" type = "text" value = "300px" data-var = "@modal-sm" class = "form-control" / >
< / div >
< / div >
< h2 id = "alerts" > Alerts< / h2 >
< p > Define alert colors, border radius, and padding.< / p >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-padding" > @alert-padding< / label >
< input id = "input-@alert-padding" type = "text" value = "15px" data-var = "@alert-padding" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-border-radius" > @alert-border-radius< / label >
< input id = "input-@alert-border-radius" type = "text" value = "@border-radius-base" data-var = "@alert-border-radius" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-link-font-weight" > @alert-link-font-weight< / label >
< input id = "input-@alert-link-font-weight" type = "text" value = "bold" data-var = "@alert-link-font-weight" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-success-bg" > @alert-success-bg< / label >
< input id = "input-@alert-success-bg" type = "text" value = "@state-success-bg" data-var = "@alert-success-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-success-text" > @alert-success-text< / label >
< input id = "input-@alert-success-text" type = "text" value = "@state-success-text" data-var = "@alert-success-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-success-border" > @alert-success-border< / label >
< input id = "input-@alert-success-border" type = "text" value = "@state-success-border" data-var = "@alert-success-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-info-bg" > @alert-info-bg< / label >
< input id = "input-@alert-info-bg" type = "text" value = "@state-info-bg" data-var = "@alert-info-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-info-text" > @alert-info-text< / label >
< input id = "input-@alert-info-text" type = "text" value = "@state-info-text" data-var = "@alert-info-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-info-border" > @alert-info-border< / label >
< input id = "input-@alert-info-border" type = "text" value = "@state-info-border" data-var = "@alert-info-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-warning-bg" > @alert-warning-bg< / label >
< input id = "input-@alert-warning-bg" type = "text" value = "@state-warning-bg" data-var = "@alert-warning-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-warning-text" > @alert-warning-text< / label >
< input id = "input-@alert-warning-text" type = "text" value = "@state-warning-text" data-var = "@alert-warning-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-warning-border" > @alert-warning-border< / label >
< input id = "input-@alert-warning-border" type = "text" value = "@state-warning-border" data-var = "@alert-warning-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-danger-bg" > @alert-danger-bg< / label >
< input id = "input-@alert-danger-bg" type = "text" value = "@state-danger-bg" data-var = "@alert-danger-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-danger-text" > @alert-danger-text< / label >
< input id = "input-@alert-danger-text" type = "text" value = "@state-danger-text" data-var = "@alert-danger-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@alert-danger-border" > @alert-danger-border< / label >
< input id = "input-@alert-danger-border" type = "text" value = "@state-danger-border" data-var = "@alert-danger-border" class = "form-control" / >
< / div >
< / div >
< h2 id = "progress-bars" > Progress bars< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@progress-bg" > @progress-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@progress-bg" type = "text" aria-describedby = "help-block-@progress-bg" value = "#f5f5f5" data-var = "@progress-bg" class = "form-control" / >
< p id = "help-block-@progress-bg" class = "help-block" > Background color of the whole progress component< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@progress-bar-color" > @progress-bar-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@progress-bar-color" type = "text" aria-describedby = "help-block-@progress-bar-color" value = "#fff" data-var = "@progress-bar-color" class = "form-control" / >
< p id = "help-block-@progress-bar-color" class = "help-block" > Progress bar text color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
< label for = "input-@progress-border-radius" > @progress-border-radius< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@progress-border-radius" type = "text" aria-describedby = "help-block-@progress-border-radius" value = "@border-radius-base" data-var = "@progress-border-radius" class = "form-control" / >
< p id = "help-block-@progress-border-radius" class = "help-block" > Variable for setting rounded corners on progress bar.< / p >
2014-10-29 20:17:44 +01:00
< / div >
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@progress-bar-bg" > @progress-bar-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@progress-bar-bg" type = "text" aria-describedby = "help-block-@progress-bar-bg" value = "@brand-primary" data-var = "@progress-bar-bg" class = "form-control" / >
< p id = "help-block-@progress-bar-bg" class = "help-block" > Default progress bar color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@progress-bar-success-bg" > @progress-bar-success-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@progress-bar-success-bg" type = "text" aria-describedby = "help-block-@progress-bar-success-bg" value = "@brand-success" data-var = "@progress-bar-success-bg" class = "form-control" / >
< p id = "help-block-@progress-bar-success-bg" class = "help-block" > Success progress bar color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@progress-bar-warning-bg" > @progress-bar-warning-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@progress-bar-warning-bg" type = "text" aria-describedby = "help-block-@progress-bar-warning-bg" value = "@brand-warning" data-var = "@progress-bar-warning-bg" class = "form-control" / >
< p id = "help-block-@progress-bar-warning-bg" class = "help-block" > Warning progress bar color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@progress-bar-danger-bg" > @progress-bar-danger-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@progress-bar-danger-bg" type = "text" aria-describedby = "help-block-@progress-bar-danger-bg" value = "@brand-danger" data-var = "@progress-bar-danger-bg" class = "form-control" / >
< p id = "help-block-@progress-bar-danger-bg" class = "help-block" > Danger progress bar color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@progress-bar-info-bg" > @progress-bar-info-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@progress-bar-info-bg" type = "text" aria-describedby = "help-block-@progress-bar-info-bg" value = "@brand-info" data-var = "@progress-bar-info-bg" class = "form-control" / >
< p id = "help-block-@progress-bar-info-bg" class = "help-block" > Info progress bar color< / p >
2013-10-18 04:52:16 +02:00
< / div >
< / div >
< h2 id = "list-group" > List group< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@list-group-bg" > @list-group-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@list-group-bg" type = "text" aria-describedby = "help-block-@list-group-bg" value = "#fff" data-var = "@list-group-bg" class = "form-control" / >
< p id = "help-block-@list-group-bg" class = "help-block" > Background color on < code > .list-group-item< / code > < / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@list-group-border" > @list-group-border< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@list-group-border" type = "text" aria-describedby = "help-block-@list-group-border" value = "#ddd" data-var = "@list-group-border" class = "form-control" / >
< p id = "help-block-@list-group-border" class = "help-block" > < code > .list-group-item< / code > border color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@list-group-border-radius" > @list-group-border-radius< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@list-group-border-radius" type = "text" aria-describedby = "help-block-@list-group-border-radius" value = "@border-radius-base" data-var = "@list-group-border-radius" class = "form-control" / >
< p id = "help-block-@list-group-border-radius" class = "help-block" > List group border radius< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@list-group-hover-bg" > @list-group-hover-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@list-group-hover-bg" type = "text" aria-describedby = "help-block-@list-group-hover-bg" value = "#f5f5f5" data-var = "@list-group-hover-bg" class = "form-control" / >
< p id = "help-block-@list-group-hover-bg" class = "help-block" > Background color of single list items on hover< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@list-group-active-color" > @list-group-active-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@list-group-active-color" type = "text" aria-describedby = "help-block-@list-group-active-color" value = "@component-active-color" data-var = "@list-group-active-color" class = "form-control" / >
< p id = "help-block-@list-group-active-color" class = "help-block" > Text color of active list items< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@list-group-active-bg" > @list-group-active-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@list-group-active-bg" type = "text" aria-describedby = "help-block-@list-group-active-bg" value = "@component-active-bg" data-var = "@list-group-active-bg" class = "form-control" / >
< p id = "help-block-@list-group-active-bg" class = "help-block" > Background color of active list items< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@list-group-active-border" > @list-group-active-border< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@list-group-active-border" type = "text" aria-describedby = "help-block-@list-group-active-border" value = "@list-group-active-bg" data-var = "@list-group-active-border" class = "form-control" / >
< p id = "help-block-@list-group-active-border" class = "help-block" > Border color of active list elements< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@list-group-active-text-color" > @list-group-active-text-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@list-group-active-text-color" type = "text" aria-describedby = "help-block-@list-group-active-text-color" value = "lighten(@list-group-active-bg, 40%)" data-var = "@list-group-active-text-color" class = "form-control" / >
< p id = "help-block-@list-group-active-text-color" class = "help-block" > Text color for content within active list items< / p >
2014-06-26 18:46:59 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-06-26 18:46:59 +02:00
< label for = "input-@list-group-disabled-color" > @list-group-disabled-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@list-group-disabled-color" type = "text" aria-describedby = "help-block-@list-group-disabled-color" value = "@gray-light" data-var = "@list-group-disabled-color" class = "form-control" / >
< p id = "help-block-@list-group-disabled-color" class = "help-block" > Text color of disabled list items< / p >
2014-06-26 18:46:59 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2014-06-26 18:46:59 +02:00
< label for = "input-@list-group-disabled-bg" > @list-group-disabled-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@list-group-disabled-bg" type = "text" aria-describedby = "help-block-@list-group-disabled-bg" value = "@gray-lighter" data-var = "@list-group-disabled-bg" class = "form-control" / >
< p id = "help-block-@list-group-disabled-bg" class = "help-block" > Background color of disabled list items< / p >
2014-06-26 18:46:59 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-06-26 18:46:59 +02:00
< label for = "input-@list-group-disabled-text-color" > @list-group-disabled-text-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@list-group-disabled-text-color" type = "text" aria-describedby = "help-block-@list-group-disabled-text-color" value = "@list-group-disabled-color" data-var = "@list-group-disabled-text-color" class = "form-control" / >
< p id = "help-block-@list-group-disabled-text-color" class = "help-block" > Text color for content within disabled list items< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@list-group-link-color" > @list-group-link-color< / label >
< input id = "input-@list-group-link-color" type = "text" value = "#555" data-var = "@list-group-link-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2014-06-26 18:46:59 +02:00
< label for = "input-@list-group-link-hover-color" > @list-group-link-hover-color< / label >
< input id = "input-@list-group-link-hover-color" type = "text" value = "@list-group-link-color" data-var = "@list-group-link-hover-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@list-group-link-heading-color" > @list-group-link-heading-color< / label >
< input id = "input-@list-group-link-heading-color" type = "text" value = "#333" data-var = "@list-group-link-heading-color" class = "form-control" / >
< / div >
< / div >
< h2 id = "panels" > Panels< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-bg" > @panel-bg< / label >
< input id = "input-@panel-bg" type = "text" value = "#fff" data-var = "@panel-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-body-padding" > @panel-body-padding< / label >
< input id = "input-@panel-body-padding" type = "text" value = "15px" data-var = "@panel-body-padding" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-06-26 18:46:59 +02:00
< label for = "input-@panel-heading-padding" > @panel-heading-padding< / label >
< input id = "input-@panel-heading-padding" type = "text" value = "10px 15px" data-var = "@panel-heading-padding" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2014-06-26 18:46:59 +02:00
< label for = "input-@panel-footer-padding" > @panel-footer-padding< / label >
< input id = "input-@panel-footer-padding" type = "text" value = "@panel-heading-padding" data-var = "@panel-footer-padding" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-border-radius" > @panel-border-radius< / label >
< input id = "input-@panel-border-radius" type = "text" value = "@border-radius-base" data-var = "@panel-border-radius" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-inner-border" > @panel-inner-border< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@panel-inner-border" type = "text" aria-describedby = "help-block-@panel-inner-border" value = "#ddd" data-var = "@panel-inner-border" class = "form-control" / >
< p id = "help-block-@panel-inner-border" class = "help-block" > Border color for elements within panels< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-footer-bg" > @panel-footer-bg< / label >
< input id = "input-@panel-footer-bg" type = "text" value = "#f5f5f5" data-var = "@panel-footer-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-default-text" > @panel-default-text< / label >
< input id = "input-@panel-default-text" type = "text" value = "@gray-dark" data-var = "@panel-default-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-default-border" > @panel-default-border< / label >
< input id = "input-@panel-default-border" type = "text" value = "#ddd" data-var = "@panel-default-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-default-heading-bg" > @panel-default-heading-bg< / label >
< input id = "input-@panel-default-heading-bg" type = "text" value = "#f5f5f5" data-var = "@panel-default-heading-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-primary-text" > @panel-primary-text< / label >
< input id = "input-@panel-primary-text" type = "text" value = "#fff" data-var = "@panel-primary-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-primary-border" > @panel-primary-border< / label >
< input id = "input-@panel-primary-border" type = "text" value = "@brand-primary" data-var = "@panel-primary-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-primary-heading-bg" > @panel-primary-heading-bg< / label >
< input id = "input-@panel-primary-heading-bg" type = "text" value = "@brand-primary" data-var = "@panel-primary-heading-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-success-text" > @panel-success-text< / label >
< input id = "input-@panel-success-text" type = "text" value = "@state-success-text" data-var = "@panel-success-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-success-border" > @panel-success-border< / label >
< input id = "input-@panel-success-border" type = "text" value = "@state-success-border" data-var = "@panel-success-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-success-heading-bg" > @panel-success-heading-bg< / label >
< input id = "input-@panel-success-heading-bg" type = "text" value = "@state-success-bg" data-var = "@panel-success-heading-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-info-text" > @panel-info-text< / label >
< input id = "input-@panel-info-text" type = "text" value = "@state-info-text" data-var = "@panel-info-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-info-border" > @panel-info-border< / label >
< input id = "input-@panel-info-border" type = "text" value = "@state-info-border" data-var = "@panel-info-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-info-heading-bg" > @panel-info-heading-bg< / label >
< input id = "input-@panel-info-heading-bg" type = "text" value = "@state-info-bg" data-var = "@panel-info-heading-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-warning-text" > @panel-warning-text< / label >
< input id = "input-@panel-warning-text" type = "text" value = "@state-warning-text" data-var = "@panel-warning-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-warning-border" > @panel-warning-border< / label >
< input id = "input-@panel-warning-border" type = "text" value = "@state-warning-border" data-var = "@panel-warning-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-warning-heading-bg" > @panel-warning-heading-bg< / label >
< input id = "input-@panel-warning-heading-bg" type = "text" value = "@state-warning-bg" data-var = "@panel-warning-heading-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-danger-text" > @panel-danger-text< / label >
< input id = "input-@panel-danger-text" type = "text" value = "@state-danger-text" data-var = "@panel-danger-text" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-danger-border" > @panel-danger-border< / label >
< input id = "input-@panel-danger-border" type = "text" value = "@state-danger-border" data-var = "@panel-danger-border" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@panel-danger-heading-bg" > @panel-danger-heading-bg< / label >
< input id = "input-@panel-danger-heading-bg" type = "text" value = "@state-danger-bg" data-var = "@panel-danger-heading-bg" class = "form-control" / >
< / div >
< / div >
< h2 id = "thumbnails" > Thumbnails< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@thumbnail-padding" > @thumbnail-padding< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@thumbnail-padding" type = "text" aria-describedby = "help-block-@thumbnail-padding" value = "4px" data-var = "@thumbnail-padding" class = "form-control" / >
< p id = "help-block-@thumbnail-padding" class = "help-block" > Padding around the thumbnail image< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@thumbnail-bg" > @thumbnail-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@thumbnail-bg" type = "text" aria-describedby = "help-block-@thumbnail-bg" value = "@body-bg" data-var = "@thumbnail-bg" class = "form-control" / >
< p id = "help-block-@thumbnail-bg" class = "help-block" > Thumbnail background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@thumbnail-border" > @thumbnail-border< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@thumbnail-border" type = "text" aria-describedby = "help-block-@thumbnail-border" value = "#ddd" data-var = "@thumbnail-border" class = "form-control" / >
< p id = "help-block-@thumbnail-border" class = "help-block" > Thumbnail border color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@thumbnail-border-radius" > @thumbnail-border-radius< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@thumbnail-border-radius" type = "text" aria-describedby = "help-block-@thumbnail-border-radius" value = "@border-radius-base" data-var = "@thumbnail-border-radius" class = "form-control" / >
< p id = "help-block-@thumbnail-border-radius" class = "help-block" > Thumbnail border radius< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@thumbnail-caption-color" > @thumbnail-caption-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@thumbnail-caption-color" type = "text" aria-describedby = "help-block-@thumbnail-caption-color" value = "@text-color" data-var = "@thumbnail-caption-color" class = "form-control" / >
< p id = "help-block-@thumbnail-caption-color" class = "help-block" > Custom text color for thumbnail captions< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@thumbnail-caption-padding" > @thumbnail-caption-padding< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@thumbnail-caption-padding" type = "text" aria-describedby = "help-block-@thumbnail-caption-padding" value = "9px" data-var = "@thumbnail-caption-padding" class = "form-control" / >
< p id = "help-block-@thumbnail-caption-padding" class = "help-block" > Padding around the thumbnail caption< / p >
2013-10-18 04:52:16 +02:00
< / div >
< / div >
< h2 id = "wells" > Wells< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@well-bg" > @well-bg< / label >
< input id = "input-@well-bg" type = "text" value = "#f5f5f5" data-var = "@well-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@well-border" > @well-border< / label >
< input id = "input-@well-border" type = "text" value = "darken(@well-bg, 7%)" data-var = "@well-border" class = "form-control" / >
< / div >
< / div >
< h2 id = "badges" > Badges< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@badge-color" > @badge-color< / label >
< input id = "input-@badge-color" type = "text" value = "#fff" data-var = "@badge-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@badge-link-hover-color" > @badge-link-hover-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@badge-link-hover-color" type = "text" aria-describedby = "help-block-@badge-link-hover-color" value = "#fff" data-var = "@badge-link-hover-color" class = "form-control" / >
< p id = "help-block-@badge-link-hover-color" class = "help-block" > Linked badge text color on hover< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@badge-bg" > @badge-bg< / label >
< input id = "input-@badge-bg" type = "text" value = "@gray-light" data-var = "@badge-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@badge-active-color" > @badge-active-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@badge-active-color" type = "text" aria-describedby = "help-block-@badge-active-color" value = "@link-color" data-var = "@badge-active-color" class = "form-control" / >
< p id = "help-block-@badge-active-color" class = "help-block" > Badge text color in active nav link< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@badge-active-bg" > @badge-active-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@badge-active-bg" type = "text" aria-describedby = "help-block-@badge-active-bg" value = "#fff" data-var = "@badge-active-bg" class = "form-control" / >
< p id = "help-block-@badge-active-bg" class = "help-block" > Badge background color in active nav link< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@badge-font-weight" > @badge-font-weight< / label >
< input id = "input-@badge-font-weight" type = "text" value = "bold" data-var = "@badge-font-weight" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
< label for = "input-@badge-line-height" > @badge-line-height< / label >
< input id = "input-@badge-line-height" type = "text" value = "1" data-var = "@badge-line-height" class = "form-control" / >
< / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@badge-border-radius" > @badge-border-radius< / label >
< input id = "input-@badge-border-radius" type = "text" value = "10px" data-var = "@badge-border-radius" class = "form-control" / >
< / div >
< / div >
< h2 id = "breadcrumbs" > Breadcrumbs< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@breadcrumb-padding-vertical" > @breadcrumb-padding-vertical< / label >
< input id = "input-@breadcrumb-padding-vertical" type = "text" value = "8px" data-var = "@breadcrumb-padding-vertical" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@breadcrumb-padding-horizontal" > @breadcrumb-padding-horizontal< / label >
< input id = "input-@breadcrumb-padding-horizontal" type = "text" value = "15px" data-var = "@breadcrumb-padding-horizontal" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@breadcrumb-bg" > @breadcrumb-bg< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@breadcrumb-bg" type = "text" aria-describedby = "help-block-@breadcrumb-bg" value = "#f5f5f5" data-var = "@breadcrumb-bg" class = "form-control" / >
< p id = "help-block-@breadcrumb-bg" class = "help-block" > Breadcrumb background color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@breadcrumb-color" > @breadcrumb-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@breadcrumb-color" type = "text" aria-describedby = "help-block-@breadcrumb-color" value = "#ccc" data-var = "@breadcrumb-color" class = "form-control" / >
< p id = "help-block-@breadcrumb-color" class = "help-block" > Breadcrumb text color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@breadcrumb-active-color" > @breadcrumb-active-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@breadcrumb-active-color" type = "text" aria-describedby = "help-block-@breadcrumb-active-color" value = "@gray-light" data-var = "@breadcrumb-active-color" class = "form-control" / >
< p id = "help-block-@breadcrumb-active-color" class = "help-block" > Text color of current page in the breadcrumb< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@breadcrumb-separator" > @breadcrumb-separator< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@breadcrumb-separator" type = "text" aria-describedby = "help-block-@breadcrumb-separator" value = ""/"" data-var = "@breadcrumb-separator" class = "form-control" / >
< p id = "help-block-@breadcrumb-separator" class = "help-block" > Textual separator for between breadcrumb elements< / p >
2013-10-18 04:52:16 +02:00
< / div >
< / div >
< h2 id = "carousel" > Carousel< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@carousel-text-shadow" > @carousel-text-shadow< / label >
< input id = "input-@carousel-text-shadow" type = "text" value = "0 1px 2px rgba(0,0,0,.6)" data-var = "@carousel-text-shadow" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@carousel-control-color" > @carousel-control-color< / label >
< input id = "input-@carousel-control-color" type = "text" value = "#fff" data-var = "@carousel-control-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@carousel-control-width" > @carousel-control-width< / label >
< input id = "input-@carousel-control-width" type = "text" value = "15%" data-var = "@carousel-control-width" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@carousel-control-opacity" > @carousel-control-opacity< / label >
< input id = "input-@carousel-control-opacity" type = "text" value = ".5" data-var = "@carousel-control-opacity" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@carousel-control-font-size" > @carousel-control-font-size< / label >
< input id = "input-@carousel-control-font-size" type = "text" value = "20px" data-var = "@carousel-control-font-size" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@carousel-indicator-active-bg" > @carousel-indicator-active-bg< / label >
< input id = "input-@carousel-indicator-active-bg" type = "text" value = "#fff" data-var = "@carousel-indicator-active-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@carousel-indicator-border-color" > @carousel-indicator-border-color< / label >
< input id = "input-@carousel-indicator-border-color" type = "text" value = "#fff" data-var = "@carousel-indicator-border-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@carousel-caption-color" > @carousel-caption-color< / label >
< input id = "input-@carousel-caption-color" type = "text" value = "#fff" data-var = "@carousel-caption-color" class = "form-control" / >
< / div >
< / div >
< h2 id = "close" > Close< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@close-font-weight" > @close-font-weight< / label >
< input id = "input-@close-font-weight" type = "text" value = "bold" data-var = "@close-font-weight" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@close-color" > @close-color< / label >
< input id = "input-@close-color" type = "text" value = "#000" data-var = "@close-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@close-text-shadow" > @close-text-shadow< / label >
< input id = "input-@close-text-shadow" type = "text" value = "0 1px 0 #fff" data-var = "@close-text-shadow" class = "form-control" / >
< / div >
< / div >
< h2 id = "code" > Code< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@code-color" > @code-color< / label >
< input id = "input-@code-color" type = "text" value = "#c7254e" data-var = "@code-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@code-bg" > @code-bg< / label >
< input id = "input-@code-bg" type = "text" value = "#f9f2f4" data-var = "@code-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@kbd-color" > @kbd-color< / label >
< input id = "input-@kbd-color" type = "text" value = "#fff" data-var = "@kbd-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@kbd-bg" > @kbd-bg< / label >
< input id = "input-@kbd-bg" type = "text" value = "#333" data-var = "@kbd-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pre-bg" > @pre-bg< / label >
< input id = "input-@pre-bg" type = "text" value = "#f5f5f5" data-var = "@pre-bg" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pre-color" > @pre-color< / label >
< input id = "input-@pre-color" type = "text" value = "@gray-dark" data-var = "@pre-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pre-border-color" > @pre-border-color< / label >
< input id = "input-@pre-border-color" type = "text" value = "#ccc" data-var = "@pre-border-color" class = "form-control" / >
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@pre-scrollable-max-height" > @pre-scrollable-max-height< / label >
< input id = "input-@pre-scrollable-max-height" type = "text" value = "340px" data-var = "@pre-scrollable-max-height" class = "form-control" / >
< / div >
< / div >
< h2 id = "type" > Type< / h2 >
< div class = "row" >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-06-26 18:46:59 +02:00
< label for = "input-@component-offset-horizontal" > @component-offset-horizontal< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@component-offset-horizontal" type = "text" aria-describedby = "help-block-@component-offset-horizontal" value = "180px" data-var = "@component-offset-horizontal" class = "form-control" / >
< p id = "help-block-@component-offset-horizontal" class = "help-block" > Horizontal offset for forms and lists.< / p >
2014-06-26 18:46:59 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@text-muted" > @text-muted< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@text-muted" type = "text" aria-describedby = "help-block-@text-muted" value = "@gray-light" data-var = "@text-muted" class = "form-control" / >
< p id = "help-block-@text-muted" class = "help-block" > Text muted color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@abbr-border-color" > @abbr-border-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@abbr-border-color" type = "text" aria-describedby = "help-block-@abbr-border-color" value = "@gray-light" data-var = "@abbr-border-color" class = "form-control" / >
< p id = "help-block-@abbr-border-color" class = "help-block" > Abbreviations and acronyms border color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@headings-small-color" > @headings-small-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@headings-small-color" type = "text" aria-describedby = "help-block-@headings-small-color" value = "@gray-light" data-var = "@headings-small-color" class = "form-control" / >
< p id = "help-block-@headings-small-color" class = "help-block" > Headings small color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@blockquote-small-color" > @blockquote-small-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@blockquote-small-color" type = "text" aria-describedby = "help-block-@blockquote-small-color" value = "@gray-light" data-var = "@blockquote-small-color" class = "form-control" / >
< p id = "help-block-@blockquote-small-color" class = "help-block" > Blockquote small color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-02-13 18:36:49 +01:00
< label for = "input-@blockquote-font-size" > @blockquote-font-size< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@blockquote-font-size" type = "text" aria-describedby = "help-block-@blockquote-font-size" value = "(@font-size-base * 1.25)" data-var = "@blockquote-font-size" class = "form-control" / >
< p id = "help-block-@blockquote-font-size" class = "help-block" > Blockquote font size< / p >
2014-02-13 18:36:49 +01:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@blockquote-border-color" > @blockquote-border-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@blockquote-border-color" type = "text" aria-describedby = "help-block-@blockquote-border-color" value = "@gray-lighter" data-var = "@blockquote-border-color" class = "form-control" / >
< p id = "help-block-@blockquote-border-color" class = "help-block" > Blockquote border color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@page-header-border-color" > @page-header-border-color< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@page-header-border-color" type = "text" aria-describedby = "help-block-@page-header-border-color" value = "@gray-lighter" data-var = "@page-header-border-color" class = "form-control" / >
< p id = "help-block-@page-header-border-color" class = "help-block" > Page header border color< / p >
2013-10-18 04:52:16 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "col-xs-4" >
2014-06-26 18:46:59 +02:00
< label for = "input-@dl-horizontal-offset" > @dl-horizontal-offset< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@dl-horizontal-offset" type = "text" aria-describedby = "help-block-@dl-horizontal-offset" value = "@component-offset-horizontal" data-var = "@dl-horizontal-offset" class = "form-control" / >
< p id = "help-block-@dl-horizontal-offset" class = "help-block" > Width of horizontal description list titles< / p >
2014-06-26 18:46:59 +02:00
< / div >
2014-10-29 20:17:44 +01:00
< div class = "clearfix" > < / div >
< div class = "col-xs-4" >
2013-10-18 04:52:16 +02:00
< label for = "input-@hr-border" > @hr-border< / label >
2015-01-19 18:10:41 +01:00
< input id = "input-@hr-border" type = "text" aria-describedby = "help-block-@hr-border" value = "@gray-lighter" data-var = "@hr-border" class = "form-control" / >
< p id = "help-block-@hr-border" class = "help-block" > Horizontal line color.< / p >
2013-10-18 04:52:16 +02:00
< / div >
< / div >
2014-02-13 18:36:49 +01:00
<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build - customizer - html` Grunt task using the customizer - variables.jade template. -->
2013-10-18 04:52:16 +02:00
< / div >
2014-02-13 18:36:49 +01:00
< div class = "bs-docs-section" >
< h1 id = "download" class = "page-header" > Download< / h1 >
< 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 >
2014-12-17 22:18:37 +01:00
< div id = "firefox-customizer-alert" class = "alert alert-warning alert-dismissible fade in" role = "alert" >
< button type = "button" class = "close" data-dismiss = "alert" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< h4 > Warning for Firefox users!< / h4 >
< p > Due to a possible browser bug, the customizer download randomly fails in Firefox. If this happens to you, we advise either retrying in Firefox or using one of the other browsers supported by the Customizer (Chrome or IE10+).< / p >
< / div >
2014-02-13 18:36:49 +01:00
< div class = "bs-customize-download" >
2014-06-26 18:46:59 +02:00
< button type = "submit" id = "btn-compile" disabled class = "btn btn-block btn-lg btn-outline" onclick = "ga('send', 'event', 'Customize', 'Download', 'Customize and Download');" > Compile and Download< / button >
2014-02-13 18:36:49 +01:00
< / div >
< / div > <!-- /download -->
< / form >
< / div >
2015-01-19 18:10:41 +01:00
< div class = "col-md-3" role = "complementary" >
< nav class = "bs-docs-sidebar hidden-print hidden-xs hidden-sm" >
2014-02-13 18:36:49 +01:00
< ul class = "nav bs-docs-sidenav" >
2015-01-19 18:10:41 +01:00
2014-02-13 18:36:49 +01:00
<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build - customizer - html` Grunt task using the customizer - nav.jade template. -->
2014-10-29 20:17:44 +01:00
< li > < a href = "#import-drop-target" > Import< / a > < / li >
2014-02-13 18:36:49 +01:00
< li > < a href = "#less" > Less components< / a > < / li >
< li > < a href = "#plugins" > jQuery plugins< / a > < / li >
< li > < a href = "#less-variables" > Less variables< / a >
< ul class = "nav" >
< li > < a href = "#colors" > Colors< / a > < / li >
< li > < a href = "#scaffolding" > Scaffolding< / a > < / li >
< li > < a href = "#typography" > Typography< / a > < / li >
2014-06-26 18:46:59 +02:00
< li > < a href = "#iconography" > Iconography< / a > < / li >
2014-02-13 18:36:49 +01:00
< li > < a href = "#components" > Components< / a > < / li >
< li > < a href = "#tables" > Tables< / a > < / li >
< li > < a href = "#buttons" > Buttons< / a > < / li >
< li > < a href = "#forms" > Forms< / a > < / li >
< li > < a href = "#dropdowns" > Dropdowns< / a > < / li >
< li > < a href = "#media-queries-breakpoints" > Media queries breakpoints< / a > < / li >
< li > < a href = "#grid-system" > Grid system< / a > < / li >
< li > < a href = "#container-sizes" > Container sizes< / a > < / li >
< li > < a href = "#navbar" > Navbar< / a > < / li >
< li > < a href = "#navs" > Navs< / a > < / li >
< li > < a href = "#tabs" > Tabs< / a > < / li >
< li > < a href = "#pills" > Pills< / a > < / li >
< li > < a href = "#pagination" > Pagination< / a > < / li >
< li > < a href = "#pager" > Pager< / a > < / li >
< li > < a href = "#jumbotron" > Jumbotron< / a > < / li >
< li > < a href = "#form-states-and-alerts" > Form states and alerts< / a > < / li >
< li > < a href = "#tooltips" > Tooltips< / a > < / li >
< li > < a href = "#popovers" > Popovers< / a > < / li >
< li > < a href = "#labels" > Labels< / a > < / li >
< li > < a href = "#modals" > Modals< / a > < / li >
< li > < a href = "#alerts" > Alerts< / a > < / li >
< li > < a href = "#progress-bars" > Progress bars< / a > < / li >
< li > < a href = "#list-group" > List group< / a > < / li >
< li > < a href = "#panels" > Panels< / a > < / li >
< li > < a href = "#thumbnails" > Thumbnails< / a > < / li >
< li > < a href = "#wells" > Wells< / a > < / li >
< li > < a href = "#badges" > Badges< / a > < / li >
< li > < a href = "#breadcrumbs" > Breadcrumbs< / a > < / li >
< li > < a href = "#carousel" > Carousel< / a > < / li >
< li > < a href = "#close" > Close< / a > < / li >
< li > < a href = "#code" > Code< / a > < / li >
< li > < a href = "#type" > Type< / a > < / li >
< / ul >
< / li >
< li > < a href = "#download" > Download< / a > < / li >
<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build - customizer - html` Grunt task using the customizer - nav.jade template. -->
2015-01-19 18:10:41 +01:00
2014-02-13 18:36:49 +01:00
< / ul >
< a class = "back-to-top" href = "#top" >
Back to top
< / a >
2015-01-19 18:10:41 +01:00
< / nav >
2014-02-13 18:36:49 +01:00
< / div >
2015-01-19 18:10:41 +01:00
2014-02-13 18:36:49 +01:00
< / div >
< / div >
<!-- Footer
================================================== -->
< footer class = "bs-docs-footer" role = "contentinfo" >
< div class = "container" >
< div class = "bs-docs-social" >
< ul class = "bs-docs-social-buttons" >
< li >
< iframe class = "github-btn" src = "http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" width = "100" height = "20" title = "Star on GitHub" > < / iframe >
< / li >
< li >
< iframe class = "github-btn" src = "http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" width = "102" height = "20" title = "Fork on GitHub" > < / iframe >
< / li >
< li class = "follow-btn" >
< a href = "https://twitter.com/twbootstrap" class = "twitter-follow-button" data-link-color = "#0069D6" data-show-count = "true" > Follow @twbootstrap< / a >
< / li >
< li class = "tweet-btn" >
< a href = "https://twitter.com/share" class = "twitter-share-button" data-url = "http://getbootstrap.com/" data-count = "horizontal" data-via = "twbootstrap" data-related = "mdo:Creator of Bootstrap" > Tweet< / a >
< / li >
< / ul >
2013-10-18 04:52:16 +02:00
< / div >
2014-02-13 18:36:49 +01:00
2014-10-29 20:17:44 +01:00
< p > Designed and built with all the love in the world by < a href = "https://twitter.com/mdo" target = "_blank" > @mdo< / a > and < a href = "https://twitter.com/fat" target = "_blank" > @fat< / a > .< / p >
< p > Maintained by the < a href = "https://github.com/orgs/twbs/people" > core team< / a > with the help of < a href = "https://github.com/twbs/bootstrap/graphs/contributors" > our contributors< / a > .< / p >
2014-02-13 18:36:49 +01:00
< p > Code licensed under < a href = "https://github.com/twbs/bootstrap/blob/master/LICENSE" target = "_blank" > MIT< / a > , documentation under < a href = "http://creativecommons.org/licenses/by/3.0/" > CC BY 3.0< / a > .< / p >
2015-01-19 18:10:41 +01:00
< ul class = "bs-docs-footer-links text-muted" >
< li > Currently v3.3.2< / li >
2014-02-13 18:36:49 +01:00
< li > · < / li >
< li > < a href = "https://github.com/twbs/bootstrap" > GitHub< / a > < / li >
< li > · < / li >
< li > < a href = "../getting-started/#examples" > Examples< / a > < / li >
< li > · < / li >
< li > < a href = "../2.3.2/" > v2.3.2 docs< / a > < / li >
< li > · < / li >
< li > < a href = "../about/" > About< / a > < / li >
< li > · < / li >
< li > < a href = "http://expo.getbootstrap.com" > Expo< / a > < / li >
< li > · < / li >
< li > < a href = "http://blog.getbootstrap.com" > Blog< / a > < / li >
< li > · < / li >
2014-10-29 20:17:44 +01:00
< li > < a href = "https://github.com/twbs/bootstrap/issues" > Issues< / a > < / li >
2014-02-13 18:36:49 +01:00
< li > · < / li >
< li > < a href = "https://github.com/twbs/bootstrap/releases" > Releases< / a > < / li >
< / ul >
< / div >
< / footer >
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
2015-01-19 18:10:41 +01:00
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" > < / script >
2014-02-13 18:36:49 +01:00
2014-10-29 20:52:33 +01:00
< script src = "../dist/js/bootstrap.min.js" > < / script >
2014-10-29 20:17:44 +01:00
2014-10-29 20:52:33 +01:00
< script src = "../assets/js/docs.min.js" > < / script >
2014-10-29 20:17:44 +01:00
2015-01-19 18:10:41 +01:00
< script > var _ _configBridge = { "autoprefixerBrowsers" : [ "Android 2.3" , "Android >= 4" , "Chrome >= 20" , "Firefox >= 24" , "Explorer >= 8" , "iOS >= 6" , "Opera >= 12" , "Safari >= 6" ] , "jqueryCheck" : [ "if (typeof jQuery === 'undefined') {" , " throw new Error('Bootstrap\\'s JavaScript requires jQuery')" , "}\n" ] , "jqueryVersionCheck" : [ "+function ($) {" , " 'use strict';" , " var version = $.fn.jquery.split(' ')[0].split('.')" , " if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) {" , " throw new Error('Bootstrap\\'s JavaScript requires jQuery version 1.9.1 or higher')" , " }" , "}(jQuery);\n\n" ] } < / script >
2014-10-29 20:52:33 +01:00
< script src = "../assets/js/customize.min.js" > < / script >
2015-01-19 18:10:41 +01:00
2014-10-29 20:17:44 +01:00
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
< script src = "../assets/js/ie10-viewport-bug-workaround.js" > < / script >
2014-02-13 18:36:49 +01:00
< script >
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
< / script >
<!-- Analytics
================================================== -->
< script >
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
< / script >
< / body >
< / html >
