2012-01-25 10:22:29 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Bootstrap, from Twitter< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
<!-- Le HTML5 shim, for IE6 - 8 support of HTML elements -->
<!-- [if lt IE 9]>
< script src = "http://html5shim.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
<!-- Le styles -->
2012-01-27 07:05:45 +01:00
< link href = "assets/css/bootstrap.css" rel = "stylesheet" >
< link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >
2012-01-25 10:22:29 +01:00
< link href = "assets/css/docs.css" rel = "stylesheet" >
< link href = "assets/js/google-code-prettify/prettify.css" rel = "stylesheet" >
<!-- Le fav and touch icons -->
2012-01-25 19:19:29 +01:00
< link rel = "shortcut icon" href = "assets/ico/favicon.ico" >
2012-01-27 00:54:04 +01:00
< link rel = "apple-touch-icon" href = "assets/ico/apple-touch-icon.png" >
< link rel = "apple-touch-icon" sizes = "72x72" href = "assets/ico/apple-touch-icon-72x72.png" >
< link rel = "apple-touch-icon" sizes = "114x114" href = "assets/ico/apple-touch-icon-114x114.png" >
2012-01-25 10:22:29 +01:00
< / head >
2012-01-25 20:25:35 +01:00
< body data-spy = "scroll" data-target = ".subnav" data-offset = "50" >
2012-01-25 10:22:29 +01:00
2012-01-26 19:00:09 +01:00
2012-01-25 10:22:29 +01:00
<!-- Navbar
================================================== -->
2012-01-27 22:20:02 +01:00
< div class = "navbar navbar-fixed-top" >
2012-01-25 10:22:29 +01:00
< div class = "navbar-inner" >
< div class = "container" >
< a class = "brand" href = "./index.html" > Bootstrap< / a >
< ul class = "nav" >
< li class = "" >
< a href = "./index.html" > Overview< / a >
< / li >
< li class = "" >
< a href = "./scaffolding.html" > Scaffolding< / a >
< / li >
< li class = "" >
< a href = "./base-css.html" > Base CSS< / a >
< / li >
< li class = "" >
< a href = "./components.html" > Components< / a >
< / li >
< li class = "" >
< a href = "./javascript.html" > Javascript plugins< / a >
< / li >
< li class = "" >
< a href = "./less.html" > Using LESS< / a >
< / li >
< li class = "active" >
2012-01-27 22:36:31 +01:00
< a href = "./download.html" > Customize< / a >
2012-01-25 10:22:29 +01:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< div class = "container" >
<!-- Masthead
================================================== -->
< header class = "jumbotron subhead" id = "overview" >
2012-01-26 05:11:13 +01:00
< h1 > Customize and download< / h1 >
2012-01-25 10:22:29 +01:00
< p class = "lead" > < a href = "https://github.com/twitter/bootstrap/zipball/master" > Download the full repository< / a > or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.< / p >
2012-01-25 22:33:55 +01:00
< div class = "subnav" >
< ul class = "nav pills" >
2012-01-27 22:20:02 +01:00
< li > < a href = "#components" > 1. Choose components< / a > < / li >
< li > < a href = "#plugins" > 2. Select jQuery plugins< / a > < / li >
< li > < a href = "#variables" > 3. Customize variables< / a > < / li >
< li > < a href = "#download" > 4. Download< / a > < / li >
2012-01-25 22:33:55 +01:00
< / ul >
< / div >
2012-01-25 10:22:29 +01:00
< / header >
2012-01-25 22:33:55 +01:00
< section class = "download" id = "components" >
2012-01-25 10:22:29 +01:00
< div class = "page-header" >
2012-01-27 22:20:02 +01:00
< a class = "btn small pull-right toggle-all" href = "#" > Toggle all< / a >
2012-01-25 10:22:29 +01:00
< h1 >
2012-01-27 22:20:02 +01:00
1. Chose components
2012-01-25 10:22:29 +01:00
< small > Get just the CSS you need< / small >
< / h1 >
< / div >
< div class = "row download-builder" >
< div class = "span3" >
< h3 > Scaffolding< / h3 >
2012-01-27 01:41:28 +01:00
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "reset.less" > CSS reset< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "grid.less" > Grid system< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "layouts.less" > Layouts< / label >
2012-01-25 10:22:29 +01:00
< h3 > Base CSS< / h3 >
2012-01-27 01:41:28 +01:00
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "type.less" > Headings, body, etc< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "code.less" > Code and pre< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "labels.less" > Labels< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "tables.less" > Tables< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "forms.less" > Forms< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "buttons.less" > Buttons< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "sprites.less" > Icons< / label >
2012-01-25 10:22:29 +01:00
< / div > <!-- /span -->
< div class = "span3" >
< h3 > Components< / h3 >
2012-01-27 22:20:02 +01:00
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "button-groups.less" > Button groups and dropdowns< / label >
2012-01-27 01:41:28 +01:00
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "navs.less" > Navs, tabs, and pills< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "navbar.less" > Navbar< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "breadcrumbs.less" > Breadcrumbs< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "pagination.less" > Pagination< / label >
2012-01-27 06:48:46 +01:00
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "pager.less" > Pager< / label >
2012-01-27 01:41:28 +01:00
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "thumbnails.less" > Thumbnails< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "alerts.less" > Alerts< / label >
2012-01-27 06:48:46 +01:00
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "progress-bars.less" > Progress bars< / label >
2012-01-25 10:22:29 +01:00
< / div > <!-- /span -->
< div class = "span3" >
< h3 > JS Components< / h3 >
2012-01-27 06:48:46 +01:00
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "tooltip.less" > Tooltips< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "popovers.less" > Popovers< / label >
2012-01-27 01:41:28 +01:00
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "modals.less" > Modals< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "dropdowns.less" > Dropdowns< / label >
2012-01-27 22:20:02 +01:00
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "accordion.less" > Collapse< / label >
2012-01-27 01:41:28 +01:00
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "carousel.less" > Carousel< / label >
2012-01-25 10:22:29 +01:00
< / div > <!-- /span -->
< div class = "span3" >
< h3 > Miscellaneous< / h3 >
2012-01-27 01:41:28 +01:00
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "wells.less" > Wells< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "close.less" > Close icon< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "utilities.less" > Utilities< / label >
< label class = "checkbox" > < input checked = "checked" type = "checkbox" value = "component-animations.less" > Component animations< / label >
2012-01-27 22:20:02 +01:00
<!--
2012-01-25 10:22:29 +01:00
< h3 > Responsive< / h3 >
2012-01-27 22:35:25 +01:00
< label class = "checkbox" > < input type = "checkbox" value = "" > Max-width 480px< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Max-width 768px< / label >
< label class = "checkbox" > < input type = "checkbox" value = "" > Max-width 1210px< / label >
2012-01-27 22:20:02 +01:00
-->
2012-01-25 10:22:29 +01:00
< / div > <!-- /span -->
< / div > <!-- /row -->
2012-01-25 22:33:55 +01:00
< / section >
2012-01-25 10:22:29 +01:00
2012-01-25 22:33:55 +01:00
< section class = "download" id = "plugins" >
2012-01-25 10:22:29 +01:00
< div class = "page-header" >
2012-01-27 22:20:02 +01:00
< a class = "btn small pull-right toggle-all" href = "#" > Toggle all< / a >
2012-01-25 10:22:29 +01:00
< h1 >
2012-01-27 22:20:02 +01:00
2. Select jQuery plugins
2012-01-25 10:22:29 +01:00
< small > Quickly add only the necessary javascript< / small >
< / h1 >
< / div >
< div class = "row download-builder" >
< div class = "span4" >
2012-01-27 01:12:34 +01:00
< label class = "checkbox" >
< input type = "checkbox" checked = "true" value = "bootstrap-transition.js" >
Transitions < small > (required for any animation)< / small >
< / label >
2012-01-25 10:22:29 +01:00
< label class = "checkbox" >
< input type = "checkbox" checked = "true" value = "bootstrap-modal.js" >
Modals
< / label >
< label class = "checkbox" >
< input type = "checkbox" checked = "true" value = "bootstrap-dropdown.js" >
Dropdowns
< / label >
< label class = "checkbox" >
< input type = "checkbox" checked = "true" value = "bootstrap-scrollspy.js" >
Scrollspy
< / label >
< label class = "checkbox" >
< input type = "checkbox" checked = "true" value = "bootstrap-tab.js" >
Togglable tabs
< / label >
< label class = "checkbox" >
< input type = "checkbox" checked = "true" value = "bootstrap-tooltip.js" >
Tooltips
< / label >
2012-01-27 01:12:34 +01:00
< / div > <!-- /span -->
< div class = "span4" >
2012-01-25 10:22:29 +01:00
< label class = "checkbox" >
< input type = "checkbox" checked = "true" value = "bootstrap-popover.js" >
Popovers < small > (requires Tooltips)< / small >
< / label >
< label class = "checkbox" >
< input type = "checkbox" checked = "true" value = "bootstrap-alert.js" >
Alert messages
< / label >
< label class = "checkbox" >
< input type = "checkbox" checked = "true" value = "bootstrap-button.js" >
Buttons
< / label >
< label class = "checkbox" >
< input type = "checkbox" checked = "true" value = "bootstrap-collapse.js" >
Collapse
< / label >
< label class = "checkbox" >
< input type = "checkbox" checked = "true" value = "bootstrap-carousel.js" >
Carousel
< / label >
< label class = "checkbox" >
< input type = "checkbox" checked = "true" value = "bootstrap-typeahead.js" >
Typeahead
< / label >
< / div > <!-- /span -->
< div class = "span4" >
< h4 class = "muted" > Heads up!< / h4 >
< p class = "muted" > All plugins require the latest version of < a href = "http://jquery.com/" target = "_blank" > jQuery< / a > to be included.< / p >
< / div > <!-- /span -->
< / div > <!-- /row -->
2012-01-25 22:33:55 +01:00
< / section >
2012-01-25 10:22:29 +01:00
2012-01-27 22:20:02 +01:00
< section class = "download" id = "variables" >
< div class = "page-header" >
< a class = "btn small pull-right toggle-all" href = "#" > Reset to defaults< / a >
< h1 >
3. Customize variables
< small > Optionally modify Bootstrap without a compiler< / small >
< / h1 >
< / div >
< div class = "row download-builder" >
< div class = "span3" >
< h3 > Links< / h3 >
< label > @linkColor< / label >
< input type = "text" class = "span3" placeholder = "#08c" >
< label > @linkColorHover< / label >
< input type = "text" class = "span3" placeholder = "darken(@linkColor, 15%)" >
< h3 > Colors< / h3 >
< label > @blue< / label >
< input type = "text" class = "span3" placeholder = "#049cdb" >
< label > @green< / label >
< input type = "text" class = "span3" placeholder = "#46a546" >
< label > @red< / label >
< input type = "text" class = "span3" placeholder = "#9d261d" >
< label > @yellow< / label >
< input type = "text" class = "span3" placeholder = "#ffc40d" >
< label > @orange< / label >
< input type = "text" class = "span3" placeholder = "#f89406" >
< label > @pink< / label >
< input type = "text" class = "span3" placeholder = "#c3325f" >
< label > @purple< / label >
< input type = "text" class = "span3" placeholder = "#7a43b6" >
< / div > <!-- /span -->
< div class = "span3" >
< h3 > Grid system< / h3 >
< label > @gridColumns< / label >
< input type = "text" class = "span3" placeholder = "12" >
< label > @gridColumnWidth< / label >
< input type = "text" class = "span3" placeholder = "40px" >
< label > @gridGutterWidth< / label >
< input type = "text" class = "span3" placeholder = "20px" >
< label > @siteWidth< / label >
< input type = "text" class = "span3" placeholder = "(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));" >
< label > @fluidSidebarWidth< / label >
< input type = "text" class = "span3" placeholder = "220px" >
< h3 > Typography< / h3 >
< label > @baseFontSize< / label >
< input type = "text" class = "span3" placeholder = "13px" >
< label > @baseFontFamily< / label >
< input type = "text" class = "span3" placeholder = "'Helvetica Neue', Helvetica, Arial, sans-serif" >
< label > @baseLineHeight< / label >
< input type = "text" class = "span3" placeholder = "18px" >
< / div > <!-- /span -->
< div class = "span3" >
< h3 > Forms< / h3 >
< label > @primaryButtonColor< / label >
< input type = "text" class = "span3" placeholder = "@blue" >
< label > @placeholderText< / label >
< input type = "text" class = "span3" placeholder = "@grayLight" >
< h3 > Navbar< / h3 >
< label > @navbarHeight< / label >
< input type = "text" class = "span3" placeholder = "40px" >
< label > @navbarBackground< / label >
< input type = "text" class = "span3" placeholder = "@grayDarker" >
< label > @navbarBackgroundHighlight< / label >
< input type = "text" class = "span3" placeholder = "@grayDark" >
< label > @navbarText< / label >
< input type = "text" class = "span3" placeholder = "@grayLight" >
< label > @navbarLinkColor< / label >
< input type = "text" class = "span3" placeholder = "@grayLight" >
< label > @navbarLinkColorHover< / label >
< input type = "text" class = "span3" placeholder = "@white" >
< / div > <!-- /span -->
< div class = "span3" >
< h3 > Form states & alerts< / h3 >
< label > @warningText< / label >
< input type = "text" class = "span3" placeholder = "#c09853" >
< label > @warningBackground< / label >
< input type = "text" class = "span3" placeholder = "#fcf8e3" >
< label > @errorText< / label >
< input type = "text" class = "span3" placeholder = "#b94a48" >
< label > @errorBackground< / label >
< input type = "text" class = "span3" placeholder = "#f2dede" >
< label > @successText< / label >
< input type = "text" class = "span3" placeholder = "#468847" >
< label > @successBackground< / label >
< input type = "text" class = "span3" placeholder = "#dff0d8" >
< label > @infoText< / label >
< input type = "text" class = "span3" placeholder = "#3a87ad" >
< label > @infoBackground< / label >
< input type = "text" class = "span3" placeholder = "#d9edf7" >
< / div > <!-- /span -->
< / div > <!-- /row -->
< / section >
2012-01-25 22:33:55 +01:00
< section class = "download" id = "download" >
< div class = "page-header" >
< h1 >
4. Download
< / h1 >
< / div >
2012-01-25 10:22:29 +01:00
< div class = "download-btn" >
2012-01-25 22:56:44 +01:00
< a class = "btn xlarge primary" href = "#" > Customize and Download< / a >
2012-01-25 22:33:55 +01:00
< h4 > What's included?< / h4 >
< p > Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.< / p >
2012-01-25 10:22:29 +01:00
< / div >
2012-01-25 22:33:55 +01:00
< / section > <!-- /download -->
2012-01-25 10:22:29 +01:00
2012-01-26 19:00:09 +01:00
2012-01-25 10:22:29 +01:00
<!-- Footer
================================================== -->
< footer class = "footer" >
< p class = "pull-right" > < a href = "#" > Back to top< / a > < / p >
< p > Designed and built with all the love in the world < a href = "http://twitter.com/twitter" target = "_blank" > @twitter< / a > by < a href = "http://twitter.com/mdo" target = "_blank" > @mdo< / a > and < a href = "http://twitter.com/fat" target = "_blank" > @fat< / a > .< / p >
< p > Code licensed under the < a href = "http://www.apache.org/licenses/LICENSE-2.0" target = "_blank" > Apache License v2.0< / a > . Documentation licensed under < a href = "http://creativecommons.org/licenses/by/3.0/" > CC BY 3.0< / a > .< / p >
< p > Icons from < a href = "http://glyphicons.com" > Glyphicons Free< / a > , licensed under < a href = "http://creativecommons.org/licenses/by/3.0/" > CC BY 3.0< / a > .< / p >
< / footer >
< / div > <!-- /container -->
2012-01-26 19:00:09 +01:00
<!-- Le javascript
================================================== -->
2012-01-25 10:22:29 +01:00
<!-- Placed at the end of the document so the pages load faster -->
2012-01-26 19:00:09 +01:00
< script type = "text/javascript" src = "http://platform.twitter.com/widgets.js" > < / script >
2012-01-25 10:22:29 +01:00
< script src = "../js/tests/vendor/jquery.js" > < / script >
< script src = "assets/js/google-code-prettify/prettify.js" > < / script >
< script src = "../js/bootstrap-transition.js" > < / script >
< script src = "../js/bootstrap-alert.js" > < / script >
< script src = "../js/bootstrap-modal.js" > < / script >
< script src = "../js/bootstrap-dropdown.js" > < / script >
< script src = "../js/bootstrap-scrollspy.js" > < / script >
< script src = "../js/bootstrap-tab.js" > < / script >
< script src = "../js/bootstrap-tooltip.js" > < / script >
< script src = "../js/bootstrap-popover.js" > < / script >
< script src = "../js/bootstrap-button.js" > < / script >
< script src = "../js/bootstrap-collapse.js" > < / script >
< script src = "../js/bootstrap-carousel.js" > < / script >
< script src = "../js/bootstrap-typeahead.js" > < / script >
< script src = "assets/js/application.js" > < / script >
< / body >
< / html >
