0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Bootstrap/docs/customize.html
2014-03-06 23:19:16 -08:00

363 lines
11 KiB
HTML

---
layout: default
title: Customize and download
slug: customize
lead: Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
---
<!-- Customizer form -->
<form class="bs-customizer" role="form">
<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>
</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>
<input type="checkbox" checked value="navbar.less" data-dependencies="forms.less,utilities.less,navs.less">
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>
<div class="checkbox">
<label>
<input type="checkbox" checked value="responsive-embed.less">
Responsive embed
</label>
</div>
<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>
<h3>Utilities</h3>
<div class="checkbox">
<label>
<input type="checkbox" checked value="utilities.less" data-dependents="navbar.less">
Basic utilities
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="responsive-utilities.less">
Responsive utilities
</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>
{% include customizer-variables.html %}
</div>
<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>
<div class="bs-customize-download">
<button type="submit" id="btn-compile" class="btn btn-block btn-lg btn-outline" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Compile and Download</button>
</div>
</div><!-- /download -->
</form>