Skip to content

B
bootstrap
Commit a3cba92e authored by Mark Otto's avatar Mark Otto
Browse files
Options

rejigger the customizer layout

parent acc08752
Hide whitespace changes
Inline Side-by-side
Showing with 82 additions and 85 deletions
docs/customize.html
View file @ a3cba92e
...@@ -13,31 +13,32 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -13,31 +13,32 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<button class="btn btn-default toggle" type="button">Toggle all</button> <button class="btn btn-default toggle" type="button">Toggle all</button>
<h1>LESS components</h1> <h1>LESS components</h1>
</div> </div>
<p class="lead">Choose which LESS files should be compiled into your custom stylesheets.</p> <p class="lead">Choose which LESS files to compile into your custom build of Bootstrap.</p>
<div class="bs-callout"> <div class="bs-callout">
<h4>Read the documentation</h4> <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> <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> </div>
<h3 id="components-basics">The basics</h3> <h3 id="components-basics">The basics</h3>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col col-lg-4">
<h4>Layout</h4> <h4>Layout</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="scaffolding.less"> <input type="checkbox" checked value="normalize.less">
Scaffolding Normalize (CSS reset)
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="grid.less"> <input type="checkbox" checked value="scaffolding.less">
Grid Scaffolding
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="normalize.less"> <input type="checkbox" checked value="grid.less">
Normalized base styles Grid system
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
...@@ -47,79 +48,76 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -47,79 +48,76 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label> </label>
</div> </div>
</div> </div>
<div class="col col-lg-6"> <div class="col col-lg-4">
<h4>Utility classes</h4> <h4>Global CSS</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="utilities.less"> <input type="checkbox" checked value="type.less">
Basic utilities Typography
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="responsive-utilities.less"> <input type="checkbox" checked value="code.less">
Responsive utilities Code
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="component-animations.less"> <input type="checkbox" checked value="tables.less">
JavaScript helping classes Tables
</label> </label>
</div> </div>
</div>
</div>
<h3 id="components-standard">Standard element styles</h3>
<div class="row">
<div class="col col-lg-6">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="type.less"> <input type="checkbox" checked value="forms.less">
Type and color Forms
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="tables.less"> <input type="checkbox" checked value="buttons.less">
Tables Buttons
</label> </label>
</div> </div>
</div>
<div class="col col-lg-4">
<h4>Utility classes</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="code.less"> <input type="checkbox" checked value="utilities.less">
Code Basic utilities
</label> </label>
</div> </div>
</div>
<div class="col col-lg-6">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="forms.less"> <input type="checkbox" checked value="responsive-utilities.less">
Forms Responsive utilities
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="buttons.less"> <input type="checkbox" checked value="component-animations.less">
Buttons Component animations (for JS)
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<h3 id="components-features">Bootstrap features</h3> <h3 id="components-features">Bootstrap features</h3>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col col-lg-4">
<h4>Navigation</h4> <h4>Navigation</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="navbar.less"> <input type="checkbox" checked value="navs.less">
Navbar Navs
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="navs.less"> <input type="checkbox" checked value="navbar.less">
Navs Navbar
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
...@@ -141,75 +139,76 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -141,75 +139,76 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label> </label>
</div> </div>
</div> </div>
<div class="col col-lg-6"> <div class="col col-lg-4">
<h4>Additional information</h4> <h4>Content blocks</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="modals.less"> <input type="checkbox" checked value="jumbotron.less">
Modals Jumbotron
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="alerts.less"> <input type="checkbox" checked value="accordion.less">
Alerts Accordion
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="dropdowns.less"> <input type="checkbox" checked value="panels.less">
Dropdowns Panels
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="tooltip.less"> <input type="checkbox" checked value="wells.less">
Tooltips Wells
</label> </label>
</div> </div>
</div>
<div class="col col-lg-4">
<h4>Behavioral (requires JS)</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="popovers.less"> <input type="checkbox" checked value="alerts.less">
Popovers Alerts
</label> </label>
</div> </div>
</div>
</div>
<div class="row">
<div class="col col-lg-6">
<h4>Content blocks</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="jumbotron.less"> <input type="checkbox" checked value="dropdowns.less">
Jumbotron Dropdowns
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="carousel.less"> <input type="checkbox" checked value="tooltip.less">
Carousel Tooltips
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="accordion.less"> <input type="checkbox" checked value="popovers.less">
Accordion Popovers
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="panels.less"> <input type="checkbox" checked value="modals.less">
Panels Modals
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="wells.less"> <input type="checkbox" checked value="carousel.less">
Wells Carousel
</label> </label>
</div> </div>
</div> </div>
<div class="col col-lg-6"> </div>
<div class="row">
<div class="col col-lg-4">
<h4>Media</h4> <h4>Media</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
...@@ -225,49 +224,47 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -225,49 +224,47 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="media.less"> <input type="checkbox" checked value="list-group.less">
Media items List groups
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="list-group.less"> <input type="checkbox" checked value="media.less">
List groups Media items
</label> </label>
</div> </div>
</div> </div>
</div> <div class="col col-lg-4">
<div class="row"> <h4>Miscellaneous</h4>
<div class="col col-lg-6">
<h4>Other</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="badges.less"> <input type="checkbox" checked value="button-groups.less">
Badges Button groups
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="labels.less"> <input type="checkbox" checked value="progress-bars.less">
Labels Progress bars
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="button-groups.less"> <input type="checkbox" checked value="badges.less">
Button groups Badges
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="close.less"> <input type="checkbox" checked value="labels.less">
Close icon Labels
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" checked value="progress-bars.less"> <input type="checkbox" checked value="close.less">
Progress bars Close icon
</label> </label>
</div> </div>
</div> </div>
...@@ -381,7 +378,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge ...@@ -381,7 +378,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Body background</h3> <h3>Body background</h3>
<label>@body-bg</label> <label>@body-bg</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
<p class="help-text">Background color applied to <code>&lt;body&gt;</code>.</p> <p class="help-block">Background color applied to <code>&lt;body&gt;</code>.</p>
<h3>Typography</h3> <h3>Typography</h3>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col col-lg-6">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment