kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity
twbs--bootstrap/docs/customize.html

1158 lines
45 KiB
HTML
Raw Normal View History

oops, restore customizer
2013-04-01 03:11:47 -04:00
---
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
layout: default
oops, restore customizer
2013-04-01 03:11:47 -04:00
title: Customize and download
Super massive docs overhaul * Bring back the navbar up top * Pull the docs content back into separate pages because a 6.6k line docs file is just crazy * Recenter the page content and bring back affixed side nav (needs work)
2013-05-09 00:56:08 -04:00
slug: customize
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.
oops, restore customizer
2013-04-01 03:11:47 -04:00
---
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<!-- Customize
================================================== -->
fix up customizer js and classes; turn buttons into real buttons
2013-05-23 02:34:28 -04:00
<form class="bs-customizer">
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<div class="bs-docs-section" id="components">
<div class="page-header">
fix up customizer js and classes; turn buttons into real buttons
2013-05-23 02:34:28 -04:00
<button class="btn btn-default toggle" type="button">Toggle all</button>
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<h1>LESS components</h1>
</div>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<p class="lead">Choose which LESS files to compile into your custom build of Bootstrap.</p>
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<div class="bs-callout">
<h4>Read the documentation</h4>
<p>Make an informed choice by first reading about <a href="/css/">CSS</a> and <a href="/components/">Components</a> in the docs.</p>
</div>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<h3 id="components-basics">The basics</h3>
<div class="row">
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<div class="col col-lg-4">
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<h4>Layout</h4>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="normalize.less">
Normalize (CSS reset)
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="scaffolding.less">
Scaffolding
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="grid.less">
Grid system
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="print.less">
Print media styles
</label>
</div>
</div>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<div class="col col-lg-4">
<h4>Global CSS</h4>
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="type.less">
Typography
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="code.less">
Code
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="tables.less">
Tables
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="forms.less">
Forms
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="buttons.less">
Buttons
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
</div>
<div class="col col-lg-4">
<h4>Utility classes</h4>
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="utilities.less">
Basic utilities
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="responsive-utilities.less">
Responsive utilities
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="component-animations.less">
Component animations (for JS)
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
</div>
</div>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<h3 id="components-features">Bootstrap features</h3>
<div class="row">
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<div class="col col-lg-4">
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<h4>Navigation</h4>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="navs.less">
Navs
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="navbar.less">
Navbar
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="pagination.less">
Pagination
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="pager.less">
Pager
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="breadcrumbs.less">
Breadcrumbs
</label>
</div>
</div>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<div class="col col-lg-4">
<h4>Content blocks</h4>
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="jumbotron.less">
Jumbotron
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="accordion.less">
Accordion
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="panels.less">
Panels
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="wells.less">
Wells
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
</div>
<div class="col col-lg-4">
<h4>Behavioral (requires JS)</h4>
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="alerts.less">
Alerts
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="dropdowns.less">
Dropdowns
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="tooltip.less">
Tooltips
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="popovers.less">
Popovers
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="modals.less">
Modals
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="carousel.less">
Carousel
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
</div>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
</div>
<div class="row">
<div class="col col-lg-4">
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<h4>Media</h4>
<div class="checkbox">
<label>
<input type="checkbox" checked value="glyphicons.less">
Glyphicons
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="thumbnails.less">
Thumbnails
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="list-group.less">
List groups
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="media.less">
Media items
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
</div>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<div class="col col-lg-4">
<h4>Miscellaneous</h4>
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="button-groups.less">
Button groups
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="progress-bars.less">
Progress bars
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="badges.less">
Badges
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="labels.less">
Labels
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
<div class="checkbox">
<label>
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<input type="checkbox" checked value="close.less">
Close icon
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
</label>
</div>
</div>
</div>
Super massive docs overhaul * Bring back the navbar up top * Pull the docs content back into separate pages because a 6.6k line docs file is just crazy * Recenter the page content and bring back affixed side nav (needs work)
2013-05-09 00:56:08 -04:00
</div>
fix up customizer js and classes; turn buttons into real buttons
2013-05-23 02:34:28 -04:00
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<div class="bs-docs-section" id="plugins">
<div class="page-header">
fix up customizer js and classes; turn buttons into real buttons
2013-05-23 02:34:28 -04:00
<button class="btn btn-default toggle" type="button">Toggle all</button>
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<h1>jQuery plugins</h1>
</div>
<p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files.</p>
<div class="bs-callout">
<h4>Read the documentation</h4>
<p>Make an informed choice by first reading about <a href="/javascript/">JavaScript</a> in the docs.</p>
</div>
<div class="row">
<div class="col col-lg-6">
<h4>Linked to components</h4>
<div class="checkbox">
<label>
<input type="checkbox" checked value="alert.js">
Alert dismissal
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="button.js">
Advanced buttons
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="carousel.js">
Carousel functionality
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="dropdown.js">
Dropdowns
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="modal.js">
Modals
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="tooltip.js">
Tooltips
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="popover.js">
Popovers <small>(requires Tooltips)</small>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="tab.js">
Toggable tabs
</label>
</div>
</div>
<div class="col col-lg-6">
<h4>Magic</h4>
<div class="checkbox">
<label>
<input type="checkbox" checked value="affix.js">
Affix
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="collapse.js">
Collapse
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="scrollspy.js">
Scrollspy
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked value="transition.js">
Transitions <small>(required for any kind of animation)</small>
</label>
</div>
</div>
</div>
<div class="bs-callout">
<h4>Heads up!</h4>
<p>All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
</div>
Super massive docs overhaul * Bring back the navbar up top * Pull the docs content back into separate pages because a 6.6k line docs file is just crazy * Recenter the page content and bring back affixed side nav (needs work)
2013-05-09 00:56:08 -04:00
</div>
fix up customizer js and classes; turn buttons into real buttons
2013-05-23 02:34:28 -04:00
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<div class="bs-docs-section" id="variables">
<div class="page-header">
fix up customizer js and classes; turn buttons into real buttons
2013-05-23 02:34:28 -04:00
<button class="btn btn-default toggle" type="button">Reset to defaults</button>
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<h1>LESS variables</h1>
</div>
<p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
<h2 id="customize-basics">The basics</h2>
<h3>Body background</h3>
<label>@body-bg</label>
<input type="text" placeholder="#fff">
rejigger the customizer layout
2013-05-23 02:45:12 -04:00
<p class="help-block">Background color applied to <code>&lt;body&gt;</code>.</p>
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<h3>Typography</h3>
<div class="row">
<div class="col col-lg-6">
<label>@font-family-sans-serif</label>
<input type="text" placeholder="&quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif">
<p class="help-block">Default sans-serif fonts. Used almost anywhere in Bootstrap.</p>
<label>@font-family-serif</label>
<input type="text" placeholder="Georgia, &quot;Times New Roman&quot;, Times, serif">
<p class="help-block">Default serif fonts.</p>
</div>
<div class="col col-lg-6">
<label>@font-family-monospace</label>
<input type="text" placeholder="Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace">
<p class="help-block">Default monospace fonts. Most prominently used for <code>&lt;code&gt;</code> and <code>&lt;pre&gt;</code>.</p>
<label>@font-family-base</label>
<input type="text" placeholder="@font-family-sans-serif">
</div>
</div>
<div class="row">
<div class="col col-lg-6">
<label>@font-size-base</label>
<input type="text" placeholder="14px">
<p class="help-block">Will be used to calculate font sizes throughout Bootstrap.</p>
<label>@line-height-base</label>
<input type="text" placeholder="1.428571429">
<p class="help-block">Will be used to calculate line heights throughout Bootstrap. Default is &tilde;14/20.</p>
</div>
<div class="col col-lg-6">
<label>@headings-font-weight</label>
<input type="text" placeholder="500">
<p class="help-block">Choose a separate font weight for headings.</p>
<label>@headings-line-height</label>
<input type="text" placeholder="1.1">
<p class="help-block">Choose a separate line height for headings.</p>
</div>
</div>
<h3>Colors</h3>
<div class="row">
<div class="col col-lg-6">
<p>Define custom colors used in several contexts.</p>
<label>@brand-primary</label>
<input type="text" placeholder="#428bca">
<p class="help-block">Used for primary buttons, panels and more.</p>
<label>@brand-success</label>
<input type="text" placeholder="#5cb85c">
<p class="help-block">Used to indicate success.</p>
<label>@brand-warning</label>
<input type="text" placeholder="#f0ad4e">
<p class="help-block">Used to indicate a warning.</p>
<label>@brand-danger</label>
<input type="text" placeholder="#d9534f">
<p class="help-block">Used to indicate danger.</p>
<label>@brand-info</label>
<input type="text" placeholder="#5bc0de">
<p class="help-block">Used to indicate informational content.</p>
</div>
<div class="col col-lg-6">
<p>Define your preferred colors for standard text and links.</p>
<label>@text-color</label>
<input type="text" placeholder="@gray-dark">
<p class="help-block">Color for all standard text.</p>
<label>@link-color</label>
<input type="text" placeholder="@brand-primary">
<p class="help-block">Link color for links in standard text.</p>
<label>@link-color-hover</label>
<input type="text" placeholder="darken(@link-color, 15%)">
<p class="help-block">Hovered link color. Leave this blank to compute using @link-color.</p>
</div>
</div>
<h3>Media queries breakpoints</h3>
<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
<div class="row">
<div class="col col-lg-6">
<label>@screen-tiny</label>
<input type="text" placeholder="480px">
<label>@screen-small</label>
<input type="text" placeholder="768px">
</div>
<div class="col col-lg-6">
<label>@screen-medium</label>
<input type="text" placeholder="992px">
<label>@screen-large</label>
<input type="text" placeholder="1200px">
</div>
</div>
<h3>The grid</h3>
<p>Define your custom responsive grid.</p>
<div class="row">
<div class="col col-lg-6">
<label>@grid-columns</label>
<input type="text" placeholder="12">
<p class="help-block">Number of columns in the grid.</p>
<label>@grid-gutter-width</label>
<input type="text" placeholder="30px">
<p class="help-block">Padding between columns.</p>
</div>
<div class="col col-lg-6">
<label>@grid-float-breakpoint</label>
<input type="text" placeholder="@screen-tablet">
<p class="help-block">Point at which the navbar stops collapsing.</p>
</div>
</div>
<h3>Components</h3>
<p>Define common padding and border radius sizes and more.</p>
<div class="row">
<div class="col col-lg-6">
<h4>Padding</h4>
<label>@padding-base-vertical</label>
<input type="text" placeholder="8px">
<label>@padding-base-horizontal</label>
<input type="text" placeholder="12px">
<label>@padding-large-vertical</label>
<input type="text" placeholder="14px">
<label>@padding-large-horizontal</label>
<input type="text" placeholder="16px">
<label>@padding-small-vertical</label>
<input type="text" placeholder="5px">
<label>@padding-small-horizontal</label>
<input type="text" placeholder="10px">
</div>
<div class="col col-lg-6">
<h4>Border radius sizes</h4>
<label>@border-radius-base</label>
<input type="text" placeholder="4px">
<label>@border-radius-large</label>
<input type="text" placeholder="6px">
<label>@border-radius-small</label>
<input type="text" placeholder="3px">
</div>
</div>
<h4>Active background color</h4>
<label>@component-active-bg</label>
<input type="text" placeholder="@brand-primary">
<p class="help-block">Used for active or hovered items in places like navs or dropdowns.</p>
<h2 id="customize-buttons">Buttons</h2>
<p>For each of Bootstrap's buttons, define text, background and border color.</p>
<div class="row">
<div class="col col-lg-6">
<h4>Default</h4>
<label>@btn-default-color</label>
<input type="text" placeholder="#fff">
<label>@btn-default-bg</label>
<input type="text" placeholder="#a7a99aa">
<label>@btn-default-border</label>
<input type="text" placeholder="@btn-default-bg">
<h4>Primary</h4>
<label>@btn-primary-color</label>
<input type="text" placeholder="@btn-default-color">
<label>@btn-primary-bg</label>
<input type="text" placeholder="@brand-primary">
<label>@btn-primary-border</label>
<input type="text" placeholder="@btn-primary-bg">
<h4>Info</h4>
<label>@btn-info-color</label>
<input type="text" placeholder="@btn-default-color">
<label>@btn-info-bg</label>
<input type="text" placeholder="@brand-info">
<label>@btn-info-border</label>
<input type="text" placeholder="@btn-info-bg">
</div>
<div class="col col-lg-6">
<h4>Success</h4>
<label>@btn-success-color</label>
<input type="text" placeholder="@btn-default-color">
<label>@btn-success-bg</label>
<input type="text" placeholder="@brand-success">
<label>@btn-success-border</label>
<input type="text" placeholder="@btn-success-bg">
<h4>Warning</h4>
<label>@btn-warning-color</label>
<input type="text" placeholder="@btn-default-color">
<label>@btn-warning-bg</label>
<input type="text" placeholder="@brand-warning">
<label>@btn-warning-border</label>
<input type="text" placeholder="@btn-warning-bg">
<h4>Danger</h4>
<label>@btn-danger-color</label>
<input type="text" placeholder="@btn-default-color">
<label>@btn-danger-bg</label>
<input type="text" placeholder="@brand-danger">
<label>@btn-danger-border</label>
<input type="text" placeholder="@btn-danger-bg">
</div>
</div>
<h2 id="customize-form-states">Form states and alerts</h2>
<p>Define colors for form feedback states and, by default, alerts.</p>
<div class="row">
<div class="col col-lg-6">
<h4>Success</h4>
<label>@state-success-text</label>
<input type="text" placeholder="#468847">
<label>@state-success-bg</label>
<input type="text" placeholder="#dff0d8">
<label>@state-success-border</label>
<input type="text" placeholder="darken(spin(@state-success-bg, -10), 5%)">
<h4>Warning</h4>
<label>@state-warning-text</label>
<input type="text" placeholder="#c09853">
<label>@state-warning-bg</label>
<input type="text" placeholder="#fcf8e3">
<label>@state-warning-border</label>
<input type="text" placeholder="darken(spin(@state-warning-bg, -10), 3%)">
</div>
<div class="col col-lg-6">
<h4>Danger</h4>
<label>@state-danger-text</label>
<input type="text" placeholder="#b94a48">
<label>@state-danger-bg</label>
<input type="text" placeholder="#f2dede">
<label>@state-danger-border</label>
<input type="text" placeholder="darken(spin(@state-danger-bg, -10), 3%)">
<h4>Info</h4>
<label>@state-info-text</label>
<input type="text" placeholder="#3a87ad">
<label>@state-info-bg</label>
<input type="text" placeholder="#d9edf7">
<label>@state-info-border</label>
<input type="text" placeholder="darken(spin(@state-info-bg, -10), 7%)">
</div>
</div>
<h2 id="customize-alerts">Alerts</h2>
<p>Define alert colors and border radius.</p>
<h4>Border radius</h4>
<label>@alert-border-radius</label>
<input type="text" placeholder="@border-radius-base">
<div class="row">
<div class="col col-lg-6">
<h4>Success</h4>
<label>@alert-success-text</label>
<input type="text" placeholder="@state-success-text">
<label>@alert-success-bg</label>
<input type="text" placeholder="@state-success-bg">
<label>@alert-success-border</label>
<input type="text" placeholder="@state-success-border">
<h4>Warning</h4>
<label>@alert-warning-text</label>
<input type="text" placeholder="@state-warning-text">
<label>@alert-warning-bg</label>
<input type="text" placeholder="@state-warning-bg">
<label>@alert-warning-border</label>
<input type="text" placeholder="@state-warning-border">
</div>
<div class="col col-lg-6">
<h4>Danger</h4>
<label>@alert-danger-text</label>
<input type="text" placeholder="@state-danger-text">
<label>@alert-danger-bg</label>
<input type="text" placeholder="@state-danger-bg">
<label>@alert-danger-border</label>
<input type="text" placeholder="@state-danger-border">
<h4>Info</h4>
<label>@alert-info-text</label>
<input type="text" placeholder="@state-info-text">
<label>@alert-info-bg</label>
<input type="text" placeholder="@state-info-bg">
<label>@alert-info-border</label>
<input type="text" placeholder="@state-info-border">
</div>
</div>
<h2 id="customize-navbar">Navbar</h2>
<div class="row">
<div class="col col-lg-6">
<h4>The basics</h4>
<label>@navbar-height</label>
<input type="text" placeholder="50px">
<label>@navbar-color</label>
<input type="text" placeholder="#777">
<label>@navbar-bg</label>
<input type="text" placeholder="#eee">
<h4>Links</h4>
<label>@navbar-link-color</label>
<input type="text" placeholder="#777">
<label>@navbar-link-hover-color</label>
<input type="text" placeholder="#333">
<label>@navbar-link-hover-bg</label>
<input type="text" placeholder="transparent">
<label>@navbar-link-active-color</label>
<input type="text" placeholder="#555">
<label>@navbar-link-active-bg</label>
<input type="text" placeholder="darken(@navbar-bg, 10%)">
<label>@navbar-link-disabled-color</label>
<input type="text" placeholder="#ccc">
<label>@navbar-link-disabled-bg</label>
<input type="text" placeholder="transparent">
<h4>Brand</h4>
<label>@navbar-brand-color</label>
<input type="text" placeholder="@navbar-link-color">
<label>@navbar-brand-hover-color</label>
<input type="text" placeholder="darken(@navbar-link-color, 10%)">
<label>@navbar-brand-hover-bg</label>
<input type="text" placeholder="transparent">
</div>
<div class="col col-lg-6">
<h3>Inverted variation</h3>
<h4>The basics</h4>
<label>@navbar-inverse-color</label>
<input type="text" placeholder="@gray-light">
<label>@navbar-inverse-bg</label>
<input type="text" placeholder="#222">
<h4>Links</h4>
<label>@navbar-inverse-link-color</label>
<input type="text" placeholder="@gray-light">
<label>@navbar-inverse-link-hover-color</label>
<input type="text" placeholder="#fff">
<label>@navbar-inverse-link-hover-bg</label>
<input type="text" placeholder="transparent">
<label>@navbar-inverse-link-active-color</label>
<input type="text" placeholder="@navbar-inverse-link-hover-color">
<label>@navbar-inverse-link-active-bg</label>
<input type="text" placeholder="darken(@navbar-inverse-bg, 10%)">
<label>@navbar-inverse-link-disabled-color</label>
<input type="text" placeholder="#444">
<label>@navbar-inverse-link-disabled-bg</label>
<input type="text" placeholder="transparent">
<h4>Brand</h4>
<label>@navbar-inverse-brand-color</label>
<input type="text" placeholder="@navbar-inverse-link-color">
<label>@navbar-inverse-brand-hover-color</label>
<input type="text" placeholder="#fff">
<label>@navbar-inverse-brand-hover-bg</label>
<input type="text" placeholder="transparent">
</div>
</div>
<h2 id="customize-tables">Tables</h2>
<div class="row">
<div class="col col-lg-4">
<label>@table-bg</label>
<input type="text" placeholder="transparent">
<p class="help-block">Default background color used for all tables.</p>
</div>
<div class="col col-lg-4">
<label>@table-bg-accent</label>
<input type="text" placeholder="#f9f9f9">
<p class="help-block">Background color used for <code>.table-striped</code>.</p>
</div>
<div class="col col-lg-4">
<label>@table-bg-hover</label>
<input type="text" placeholder="#f5f5f5">
<p class="help-block">Background color used for <code>.table-hover</code>.</p>
</div>
</div>
<label>@table-border-color</label>
<input type="text" placeholder="#ddd">
<p class="help-block">Border color for table and cell borders.</p>
<h2 id="customize-forms">Forms</h2>
<div class="row">
<div class="col col-lg-6">
<h3>Background</h3>
<label>@input-bg</label>
<input type="text" placeholder="#fff">
<p class="help-block"><code>&lt;input&gt;</code> background color</p>
<label>@input-bg-disabled</label>
<input type="text" placeholder="@gray-lighter">
<p class="help-block"><code>&lt;input disabled&gt;</code>background color</p>
</div>
<div class="col col-lg-6">
<h3>Border</h3>
<label>@input-border</label>
<input type="text" placeholder="#ccc">
<p class="help-block"><code>&lt;input&gt;</code> border color</p>
<label>@input-border-radius</label>
<input type="text" placeholder="@border-radius-base">
<p class="help-block"><code>&lt;input&gt;</code>border radius</p>
</div>
</div>
<label>@input-color-placeholder</label>
<input type="text" placeholder="@gray-light">
<p class="help-block">Placeholder text color</p>
<h2 id="customize-dropdowns">Dropdowns</h2>
<div class="row">
<div class="col col-lg-6">
<h3>Background</h3>
<label>@dropdown-bg</label>
<input type="text" placeholder="#fff">
<p class="help-block">Dropdown menu background color</p>
<label>@dropdown-link-active-bg</label>
<input type="text" placeholder="@component-active-bg">
<p class="help-block">Active dropdown menu entry background color</p>
<label>@dropdown-link-hover-bg</label>
<input type="text" placeholder="@dropdown-link-active-bg">
<p class="help-block">Hovered dropdown menu entry background color</p>
</div>
<div class="col col-lg-6">
<h3>Colors</h3>
<label>@dropdown-link-color</label>
<input type="text" placeholder="@gray-dark">
<p class="help-block">Dropdown text color</p>
<label>@dropdown-link-active-color</label>
<input type="text" placeholder="#fff">
<p class="help-block">Active dropdown menu entry text color</p>
<label>@dropdown-link-hover-bg</label>
<input type="text" placeholder="#fff">
<p class="help-block">Hovered dropdown menu entry text color</p>
</div>
</div>
<h3>Dividers</h3>
<div class="row">
<div class="col col-lg-6">
<label>@dropdown-divider-top</label>
<input type="text" placeholder="#e5e5e5">
<p class="help-block">Dropdown divider top border color</p>
</div>
<div class="col col-lg-6">
<label>@dropdown-divider-bottom</label>
<input type="text" placeholder="#fff">
<p class="help-block">Dropdown divider bottom border color</p>
</div>
</div>
<h2 id="customize-panels-wells">Panels and wells</h2>
<h3>Panel background</h3>
<div class="row">
<div class="col col-lg-4">
<label>@panel-bg</label>
<input type="text" placeholder="#fff">
<p class="help-block">Panel body background color</p>
</div>
<div class="col col-lg-4">
<label>@panel-heading-bg</label>
<input type="text" placeholder="#f5f5f5">
<p class="help-block">Panel heading background color</p>
</div>
<div class="col col-lg-4">
<label>@panel-footer-bg</label>
<input type="text" placeholder="#f5f5f5">
<p class="help-block">Panel footer background color</p>
</div>
</div>
<h3>Panel border</h3>
<div class="row">
<div class="col col-lg-6">
<label>@panel-border</label>
<input type="text" placeholder="#ddd">
<p class="help-block">Panel border color</p>
</div>
<div class="col col-lg-6">
<label>@panel-border-radius</label>
<input type="text" placeholder="@border-radius-base">
<p class="help-block">Panel border radius</p>
</div>
</div>
<h3>Contextual panel colors</h3>
<div class="row">
<div class="col col-lg-4">
<label>@panel-primary-text</label>
<input type="text" placeholder="#fff">
<p class="help-block">Primary text color</p>
</div>
<div class="col col-lg-4">
<label>@panel-primary-border</label>
<input type="text" placeholder="@brand-primary">
<p class="help-block">Primary border color</p>
</div>
<div class="col col-lg-4">
<label>@panel-primary-heading-bg</label>
<input type="text" placeholder="@brand-primary">
<p class="help-block">Primary heading background color</p>
</div>
</div>
<div class="row">
<div class="col col-lg-4">
<label>@panel-success-text</label>
<input type="text" placeholder="@state-success-text">
<p class="help-block">Success text color</p>
</div>
<div class="col col-lg-4">
<label>@panel-success-border</label>
<input type="text" placeholder="@state-success-border">
<p class="help-block">Success border color</p>
</div>
<div class="col col-lg-4">
<label>@panel-success-heading-bg</label>
<input type="text" placeholder="@state-success-bg">
<p class="help-block">Success heading background color</p>
</div>
</div>
<div class="row">
<div class="col col-lg-4">
<label>@panel-warning-text</label>
<input type="text" placeholder="@state-warning-text">
<p class="help-block">Warning text color</p>
</div>
<div class="col col-lg-4">
<label>@panel-warning-border</label>
<input type="text" placeholder="@state-warning-border">
<p class="help-block">Warning border color</p>
</div>
<div class="col col-lg-4">
<label>@panel-warning-heading-bg</label>
<input type="text" placeholder="@state-warning-bg">
<p class="help-block">Warning heading background color</p>
</div>
</div>
<div class="row">
<div class="col col-lg-4">
<label>@panel-danger-text</label>
<input type="text" placeholder="@state-danger-text">
<p class="help-block">Danger text color</p>
</div>
<div class="col col-lg-4">
<label>@panel-danger-border</label>
<input type="text" placeholder="@state-danger-border">
<p class="help-block">Danger border color</p>
</div>
<div class="col col-lg-4">
<label>@panel-danger-heading-bg</label>
<input type="text" placeholder="@state-danger-bg">
<p class="help-block">Danger heading background color</p>
</div>
</div>
<div class="row">
<div class="col col-lg-4">
<label>@panel-info-text</label>
<input type="text" placeholder="@state-info-text">
<p class="help-block">Info text color</p>
</div>
<div class="col col-lg-4">
<label>@panel-info-border</label>
<input type="text" placeholder="@state-info-border">
<p class="help-block">Info border color</p>
</div>
<div class="col col-lg-4">
<label>@panel-info-heading-bg</label>
<input type="text" placeholder="@state-info-bg">
<p class="help-block">Info heading background color</p>
</div>
</div>
<h3>Well background</h3>
<label>@well-bg</label>
<input type="text" placeholder="#f5f5f5">
<h2 id="customize-jumbotron">Jumbotron</h2>
<div class="row">
<div class="col col-lg-4">
<label>@jumbotron-bg</label>
<input type="text" placeholder="@gray-lighter">
<p class="help-block">Jumbotron background color</p>
</div>
<div class="col col-lg-4">
<label>@jumbotron-heading-color</label>
<input type="text" placeholder="inherit">
<p class="help-block">Jumbotron heading color</p>
</div>
<div class="col col-lg-4">
<label>@jumbotron-lead-color</label>
<input type="text" placeholder="inherit">
<p class="help-block">Jumbotron lead paragraph color</p>
</div>
</div>
<h2 id="customize-modals">Modals</h2>
<div class="row">
<div class="col col-lg-4">
<label>@modal-inner-padding</label>
<input type="text" placeholder="20px">
<p class="help-block">Padding applied to the modal body</p>
</div>
<div class="col col-lg-4">
<label>@modal-title-padding</label>
<input type="text" placeholder="15px">
<p class="help-block">Padding applied to the modal title</p>
</div>
<div class="col col-lg-4">
<label>@modal-title-line-height</label>
<input type="text" placeholder="@line-height-base">
<p class="help-block">Modal title line-height</p>
</div>
</div>
<h2 id="customize-list-group">List group</h2>
<h3>Background</h3>
<div class="row">
<div class="col col-lg-4">
<label>@list-group-bg</label>
<input type="text" placeholder="#fff">
<p class="help-block">Default background color</p>
</div>
<div class="col col-lg-4">
<label>@list-group-hover-bg</label>
<input type="text" placeholder="#f5f5f5">
<p class="help-block">Background color of single list elements on hover</p>
</div>
<div class="col col-lg-4">
<label>@list-group-active-bg</label>
<input type="text" placeholder="@component-active-bg">
<p class="help-block">Background color of active list elements</p>
</div>
</div>
<h3>Borders</h3>
<div class="row">
<div class="col col-lg-4">
<label>@list-group-border</label>
<input type="text" placeholder="#ddd">
<p class="help-block">Default border color</p>
</div>
<div class="col col-lg-4">
<label>@list-group-border-radius</label>
<input type="text" placeholder="@border-radius-base">
<p class="help-block">List group border radius</p>
</div>
<div class="col col-lg-4">
<label>@list-group-active-border</label>
<input type="text" placeholder="@list-group-active-bg">
<p class="help-block">Border color of active list elements</p>
</div>
</div>
<label>@list-group-active-color</label>
<input type="text" placeholder="#fff">
<p class="help-block">Text color of active list elements</p>
<h2 id="customize-thumbnails">Thumbnails</h2>
<div class="row">
<div class="col col-lg-6">
<label>@thumbnail-caption-color</label>
<input type="text" placeholder="@text-color">
<p class="help-block">Custom text color for thumbnail captions</p>
<label>@thumbnail-bg</label>
<input type="text" placeholder="@body-bg">
<p class="help-block">Thumbnail background color</p>
</div>
<div class="col col-lg-6">
<label>@thumbnail-border</label>
<input type="text" placeholder="#ddd">
<p class="help-block">Thumbnail border color</p>
<label>@thumbnail-border-radius</label>
<input type="text" placeholder="@border-radius-base">
<p class="help-block">Thumbnail border radius</p>
</div>
</div>
<h2 id="customize-progress">Progress bars</h2>
<div class="row">
<div class="col col-lg-4">
<label>@progress-bg</label>
<input type="text" placeholder="#f5f5f5">
<p class="help-block">Background color of the whole progress component</p>
</div>
<div class="col col-lg-4">
<label>@progress-bar-bg</label>
<input type="text" placeholder="@brand-primary">
<p class="help-block">Default progress bar color</p>
</div>
<div class="col col-lg-4">
<label>@progress-bar-success-bg</label>
<input type="text" placeholder="@brand-success">
<p class="help-block">Success progress bar color</p>
</div>
</div>
<div class="row">
<div class="col col-lg-4">
<label>@progress-bar-warning-bg</label>
<input type="text" placeholder="@brand-warning">
<p class="help-block">Warning progress bar color</p>
</div>
<div class="col col-lg-4">
<label>@progress-bar-danger-bg</label>
<input type="text" placeholder="@brand-danger">
<p class="help-block">Danger progress bar color</p>
</div>
<div class="col col-lg-4">
<label>@progress-bar-info-bg</label>
<input type="text" placeholder="@brand-info">
<p class="help-block">Info progress bar color</p>
</div>
</div>
<h2 id="customize-pagination">Pagination</h2>
<div class="row">
<div class="col col-lg-4">
<label>@pagination-bg</label>
<input type="text" placeholder="#fff">
<p class="help-block">Background color</p>
</div>
<div class="col col-lg-4">
<label>@pagination-border</label>
<input type="text" placeholder="#ddd">
<p class="help-block">Border color</p>
</div>
<div class="col col-lg-4">
<label>@pagination-active-bg</label>
<input type="text" placeholder="#f5f5f5">
<p class="help-block">Active background color</p>
</div>
</div>
<h2 id="customize-labels">Labels</h2>
<div class="row">
<div class="col col-lg-6">
<label>@label-success-bg</label>
<input type="text" placeholder="@brand-success">
<p class="help-block">Success label background color</p>
<label>@label-info-bg</label>
<input type="text" placeholder="@brand-info">
<p class="help-block">Info label background color</p>
</div>
<div class="col col-lg-6">
<label>@label-warning-bg</label>
<input type="text" placeholder="@brand-warning">
<p class="help-block">Warning label background color</p>
<label>@label-danger-bg</label>
<input type="text" placeholder="@brand-danger">
<p class="help-block">Danger label background color</p>
</div>
</div>
<h2 id="customize-tooltips-popovers">Tooltips and popovers</h2>
<h3>Tooltip styles</h3>
<div class="row">
<div class="col col-lg-6">
<label>@tooltip-color</label>
<input type="text" placeholder="#fff">
<p class="help-block">Tooltip text color</p>
<label>@tooltip-bg</label>
<input type="text" placeholder="rgba(0,0,0,.9)">
<p class="help-block">Tooltip background color</p>
</div>
<div class="col col-lg-6">
<label>@tooltip-arrow-width</label>
<input type="text" placeholder="5px">
<p class="help-block">Tooltip arrow width</p>
<label>@tooltip-arrow-color</label>
<input type="text" placeholder="@tooltip-bg">
<p class="help-block">Tooltip arrow color</p>
</div>
</div>
<h3>Popover styles</h3>
<div class="row">
<div class="col col-lg-6">
<label>@popover-bg</label>
<input type="text" placeholder="#fff">
<p class="help-block">Popover body background color</p>
<label>@popover-title-bg</label>
<input type="text" placeholder="darken(@popover-bg, 3%)">
<p class="help-block">Popover title background color</p>
</div>
<div class="col col-lg-6">
<label>@popover-arrow-width</label>
<input type="text" placeholder="10px">
<p class="help-block">Popover arrow width</p>
<label>@popover-arrow-color</label>
<input type="text" placeholder="#fff">
<p class="help-block">Popover arrow color</p>
</div>
</div>
<div class="row">
<div class="col col-lg-6">
<label>@popover-arrow-outer-width</label>
<input type="text" placeholder="(@popover-arrow-width 1)">
<p class="help-block">Popover outer arrow width</p>
</div>
<div class="col col-lg-6">
<label>@popover-arrow-outer-color</label>
<input type="text" placeholder="rgba(0,0,0,.25)">
<p class="help-block">Popover outer arrow color</p>
</div>
</div>
<h2 id="customize-other">Other</h2>
<div class="row">
<div class="col col-lg-6">
<label>@hr-border</label>
<input type="text" placeholder="@gray-lighter">
<p class="help-block">Horizontal line color</p>
</div>
<div class="col col-lg-6">
<label>@component-offset-horizontal</label>
<input type="text" placeholder="180px">
<p class="help-block">Horizontal offset for forms and lists</p>
</div>
</div>
Super massive docs overhaul * Bring back the navbar up top * Pull the docs content back into separate pages because a 6.6k line docs file is just crazy * Recenter the page content and bring back affixed side nav (needs work)
2013-05-09 00:56:08 -04:00
</div>
oops, restore customizer
2013-04-01 03:11:47 -04:00
Bring the customizer up to speed I reworked the customizer to match the new docs layout and include all newly added variables, etc. Would be glad to keep an eye on Customize and update it as v3 changes. Help blocks in my new version need some more work, too, so this is just a basis.
2013-05-22 20:30:58 -04:00
<div class="bs-docs-section" id="download">
<div class="page-header">
<h1>Download</h1>
</div>
<p class="lead">Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
<div class="bs-customize-download">
<a class="btn" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
</div>
<div class="bs-callout">
<h4>What's included?</h4>
<p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
</div>
</div><!-- /download -->
</form>
Copy permalink