Commit b8fa6cfa authored by Mark Otto's avatar Mark Otto

move css builder and downloader to dedicated page, start to update remaining...

move css builder and downloader to dedicated page, start to update remaining sections on LESS docs page
parent b0fb31be
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Tue Jan 24 23:35:08 PST 2012 * Date: Wed Jan 25 01:02:35 PST 2012
*/ */
article, article,
aside, aside,
...@@ -577,9 +577,9 @@ textarea { ...@@ -577,9 +577,9 @@ textarea {
margin-left: 10px; margin-left: 10px;
} }
input, textarea { input, textarea {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
...@@ -588,9 +588,9 @@ input, textarea { ...@@ -588,9 +588,9 @@ input, textarea {
} }
input:focus, textarea:focus { input:focus, textarea:focus {
border-color: rgba(82, 168, 236, 0.8); border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0; outline: 0;
} }
input[type=file]:focus, input[type=checkbox]:focus, select:focus { input[type=file]:focus, input[type=checkbox]:focus, select:focus {
......
...@@ -108,8 +108,8 @@ textarea{height:auto;} ...@@ -108,8 +108,8 @@ textarea{height:auto;}
.controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:6px;} .controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:6px;}
.radio.inline,.checkbox.inline{display:inline-block;margin-bottom:0;} .radio.inline,.checkbox.inline{display:inline-block;margin-bottom:0;}
.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;} .radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;}
input,textarea{-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;} input,textarea{-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;}
input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;} input:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);outline:0;}
input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;} input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;}
.input-mini{width:60px;} .input-mini{width:60px;}
.input-small{width:90px;} .input-small{width:90px;}
......
...@@ -442,68 +442,78 @@ section { ...@@ -442,68 +442,78 @@ section {
} }
/* CSS Chop Shop /* Download page
-------------------------------------------------- */ -------------------------------------------------- */
.builder { .download .page-header {
margin-top: 36px;
} }
.builder .span2 { .page-header .toggle-all {
width: 160px; margin-top: 13px;
}
.builder ul {
margin: 0;
list-style: none;
}
.builder .tabs {
margin-right: 0;
}
.builder .tabs a {
width: 160px;
padding: 14px;
font-size: 14px;
}
.builder .tab-content {
padding: 19px;
margin-left: 189px;
border: 1px solid #e5e5e5;
-webkit-border-radius: 0 4px 4px 4px;
-moz-border-radius: 0 4px 4px 4px;
border-radius: 0 4px 4px 4px;
} }
/* Space out h3s when following a section */ /* Space out h3s when following a section */
.builder input + h3, .download h3 {
.builder .checkbox + h3 { margin-bottom: 5px;
}
.download-builder input + h3,
.download-builder .checkbox + h3 {
margin-top: 9px; margin-top: 9px;
} }
/* Fields for variables */ /* Fields for variables */
.builder input + h3 { .download-builder input[type=text] {
margin-top: 9px;
}
.builder #variables label {
margin-bottom: 2px;
color: #555;
}
.builder input[type=text] {
margin-bottom: 9px; margin-bottom: 9px;
font-family: Menlo, Monaco, "Courier New", monospace; font-family: Menlo, Monaco, "Courier New", monospace;
font-size: 12px; font-size: 12px;
color: #d14; color: #d14;
background-color: #f7f7f9; background-color: #f7f7f9;
} }
.builder input[type=text]:focus { .download-builder input[type=text]:focus {
background-color: #fff; background-color: #fff;
} }
/* Custom, larger checkbox labels */
.download .checkbox {
padding: 6px 10px 6px 25px;
font-size: 14px;
color: #555;
background-color: #f9f9f9;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.download .checkbox:hover {
color: #333;
background-color: #f5f5f5;
}
.download .checkbox input[type=checkbox] {
position: relative;
top: 1px;
}
.download .checkbox small {
font-size: 12px;
color: #777;
}
.builder-actions { /* Giant download button */
margin-top: 18px; .download-btn {
padding-top: 18px; pading: 18px 20px;
border-top: 1px solid #eee; margin: 45px 0;
text-align: center;
border: 1px solid #eee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
} }
.builder-actions .toggle-all { .btn.xlarge {
float: right; margin: 36px auto;
line-height: 36px; padding: 14px 24px;
font-size: 30px;
text-align: center;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
} }
......
...@@ -27,8 +27,4 @@ ol.linenums li { ...@@ -27,8 +27,4 @@ ol.linenums li {
color: #bebec5; color: #bebec5;
line-height: 18px; line-height: 18px;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
}
/* Alternate shading for lines */
li.L1, li.L3, li.L5, li.L7, li.L9 {
} }
\ No newline at end of file
...@@ -51,6 +51,9 @@ ...@@ -51,6 +51,9 @@
<li class=""> <li class="">
<a href="./less.html">Using LESS</a> <a href="./less.html">Using LESS</a>
</li> </li>
<li class="">
<a href="./download.html">Download</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -65,11 +68,11 @@ ...@@ -65,11 +68,11 @@
<p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p> <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
<div class="subnav"> <div class="subnav">
<ul class="nav pills"> <ul class="nav pills">
<li><a href="./base-css.html#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
<li><a href="./base-css.html#tables">Tables</a></li> <li><a href="#tables">Tables</a></li>
<li><a href="./base-css.html#forms">Forms</a></li> <li><a href="#forms">Forms</a></li>
<li><a href="./base-css.html#buttons">Buttons</a></li> <li><a href="#buttons">Buttons</a></li>
<li><a href="./base-css.html#icons">Icons by Glyphicons</a></li> <li><a href="#icons">Icons by Glyphicons</a></li>
</ul> </ul>
</div> </div>
</header> </header>
......
...@@ -51,6 +51,9 @@ ...@@ -51,6 +51,9 @@
<li class=""> <li class="">
<a href="./less.html">Using LESS</a> <a href="./less.html">Using LESS</a>
</li> </li>
<li class="">
<a href="./download.html">Download</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -65,15 +68,15 @@ ...@@ -65,15 +68,15 @@
<p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p> <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
<div class="subnav"> <div class="subnav">
<ul class="nav pills"> <ul class="nav pills">
<li><a href="./components.html#buttonGroups">Button groups</a></li> <li><a href="#buttonGroups">Button groups</a></li>
<li><a href="./components.html#buttonDropdowns">Button dropdowns</a></li> <li><a href="#buttonDropdowns">Button dropdowns</a></li>
<li><a href="./components.html#navs">Nav, tabs, pills</a></li> <li><a href="#navs">Nav, tabs, pills</a></li>
<li><a href="./components.html#navbar">Navbar</a></li> <li><a href="#navbar">Navbar</a></li>
<li><a href="./components.html#breadcrumbs">Breadcrumbs</a></li> <li><a href="#breadcrumbs">Breadcrumbs</a></li>
<li><a href="./components.html#pagination">Pagination</a></li> <li><a href="#pagination">Pagination</a></li>
<li><a href="./components.html#thumbnails">Thumbnails</a></li> <li><a href="#thumbnails">Thumbnails</a></li>
<li><a href="./components.html#alerts">Alerts</a></li> <li><a href="#alerts">Alerts</a></li>
<li><a href="./components.html#progress">Progress bars</a></li> <li><a href="#progress">Progress bars</a></li>
</ul> </ul>
</div> </div>
</header> </header>
......
This diff is collapsed.
...@@ -51,6 +51,9 @@ ...@@ -51,6 +51,9 @@
<li class=""> <li class="">
<a href="./less.html">Using LESS</a> <a href="./less.html">Using LESS</a>
</li> </li>
<li class="">
<a href="./download.html">Download</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
...@@ -51,6 +51,9 @@ ...@@ -51,6 +51,9 @@
<li class=""> <li class="">
<a href="./less.html">Using LESS</a> <a href="./less.html">Using LESS</a>
</li> </li>
<li class="">
<a href="./download.html">Download</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -65,18 +68,18 @@ ...@@ -65,18 +68,18 @@
<p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. <p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
<div class="subnav"> <div class="subnav">
<ul class="nav pills"> <ul class="nav pills">
<li><a href="./javascript.html#javascript">Overview</a></li> <li><a href="#javascript">Overview</a></li>
<li><a href="./javascript.html#modals">Modal</a></li> <li><a href="#modals">Modal</a></li>
<li><a href="./javascript.html#dropdowns">Dropdown</a></li> <li><a href="#dropdowns">Dropdown</a></li>
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li> <li><a href="#scrollspy">Scrollspy</a></li>
<li><a href="./javascript.html#tabs">Tab</a></li> <li><a href="#tabs">Tab</a></li>
<li><a href="./javascript.html#tooltips">Tooltip</a></li> <li><a href="#tooltips">Tooltip</a></li>
<li><a href="./javascript.html#popovers">Popover</a></li> <li><a href="#popovers">Popover</a></li>
<li><a href="./javascript.html#alerts">Alert</a></li> <li><a href="#alerts">Alert</a></li>
<li><a href="./javascript.html#buttons">Button</a></li> <li><a href="#buttons">Button</a></li>
<li><a href="./javascript.html#collapse">Collapse</a></li> <li><a href="#collapse">Collapse</a></li>
<li><a href="./javascript.html#carousel">Carousel</a></li> <li><a href="#carousel">Carousel</a></li>
<li><a href="./javascript.html#typeahead">Typeahead</a></li> <li><a href="#typeahead">Typeahead</a></li>
</ul> </ul>
</div> </div>
</header> </header>
......
This diff is collapsed.
...@@ -51,6 +51,9 @@ ...@@ -51,6 +51,9 @@
<li class=""> <li class="">
<a href="./less.html">Using LESS</a> <a href="./less.html">Using LESS</a>
</li> </li>
<li class="">
<a href="./download.html">Download</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -65,9 +68,9 @@ ...@@ -65,9 +68,9 @@
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p> <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
<div class="subnav"> <div class="subnav">
<ul class="nav pills"> <ul class="nav pills">
<li><a href="./scaffolding.html#grid-system">Grid system</a></li> <li><a href="#grid-system">Grid system</a></li>
<li><a href="./scaffolding.html#layouts">Layouts</a></li> <li><a href="#layouts">Layouts</a></li>
<li><a href="./scaffolding.html#responsive">Responsive design</a></li> <li><a href="#responsive">Responsive design</a></li>
</ul> </ul>
</div> </div>
</header> </header>
......
...@@ -51,6 +51,9 @@ ...@@ -51,6 +51,9 @@
<li class="{{less}}"> <li class="{{less}}">
<a href="./less.html">Using LESS</a> <a href="./less.html">Using LESS</a>
</li> </li>
<li class="{{download}}">
<a href="./download.html">Download</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
...@@ -5,11 +5,11 @@ ...@@ -5,11 +5,11 @@
<p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p> <p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
<div class="subnav"> <div class="subnav">
<ul class="nav pills"> <ul class="nav pills">
<li><a href="./base-css.html#typography">{{_i}}Typography{{/i}}</a></li> <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
<li><a href="./base-css.html#tables">{{_i}}Tables{{/i}}</a></li> <li><a href="#tables">{{_i}}Tables{{/i}}</a></li>
<li><a href="./base-css.html#forms">{{_i}}Forms{{/i}}</a></li> <li><a href="#forms">{{_i}}Forms{{/i}}</a></li>
<li><a href="./base-css.html#buttons">{{_i}}Buttons{{/i}}</a></li> <li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li>
<li><a href="./base-css.html#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li> <li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
</ul> </ul>
</div> </div>
</header> </header>
......
...@@ -5,15 +5,15 @@ ...@@ -5,15 +5,15 @@
<p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p> <p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
<div class="subnav"> <div class="subnav">
<ul class="nav pills"> <ul class="nav pills">
<li><a href="./components.html#buttonGroups">{{_i}}Button groups{{/i}}</a></li> <li><a href="#buttonGroups">{{_i}}Button groups{{/i}}</a></li>
<li><a href="./components.html#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li> <li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li>
<li><a href="./components.html#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li> <li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li>
<li><a href="./components.html#navbar">{{_i}}Navbar{{/i}}</a></li> <li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li>
<li><a href="./components.html#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li> <li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li>
<li><a href="./components.html#pagination">{{_i}}Pagination{{/i}}</a></li> <li><a href="#pagination">{{_i}}Pagination{{/i}}</a></li>
<li><a href="./components.html#thumbnails">{{_i}}Thumbnails{{/i}}</a></li> <li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
<li><a href="./components.html#alerts">{{_i}}Alerts{{/i}}</a></li> <li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
<li><a href="./components.html#progress">{{_i}}Progress bars{{/i}}</a></li> <li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
</ul> </ul>
</div> </div>
</header> </header>
......
<div class="alert">
<strong>Heads up!</strong> This page is still under construction and is missing plenty of documentation. Hang tight!
</div>
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>{{_i}}Download and customize Bootstrap{{/i}}</h1>
<p class="lead">{{_i}}<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.{{/i}}</p>
</header>
<div class="download">
<div class="page-header">
<a class="pull-right toggle-all" href="#">Toggle all</a>
<h1>
1. Select components
<small>Get just the CSS you need</small>
</h1>
</div>
<div class="row download-builder">
<div class="span3">
<h3>Scaffolding</h3>
<label class="checkbox"><input type="checkbox" value=""> CSS reset</label>
<label class="checkbox"><input type="checkbox" value=""> Grid system</label>
<label class="checkbox"><input type="checkbox" value=""> Layouts</label>
<h3>Base CSS</h3>
<label class="checkbox"><input type="checkbox" value=""> Headings and body</label>
<label class="checkbox"><input type="checkbox" value=""> Code and pre</label>
<label class="checkbox"><input type="checkbox" value=""> Labels</label>
<label class="checkbox"><input type="checkbox" value=""> Tables</label>
<label class="checkbox"><input type="checkbox" value=""> Forms</label>
<label class="checkbox"><input type="checkbox" value=""> Buttons</label>
<label class="checkbox"><input type="checkbox" value=""> Icons</label>
</div><!-- /span -->
<div class="span3">
<h3>Components</h3>
<label class="checkbox"><input type="checkbox" value=""> Button groups</label>
<label class="checkbox"><input type="checkbox" value=""> Combo buttons</label>
<label class="checkbox"><input type="checkbox" value=""> Navs, tabs, and pills</label>
<label class="checkbox"><input type="checkbox" value=""> Navbar</label>
<label class="checkbox"><input type="checkbox" value=""> Breadcrumbs</label>
<label class="checkbox"><input type="checkbox" value=""> Pagination</label>
<label class="checkbox"><input type="checkbox" value=""> Pager</label>
<label class="checkbox"><input type="checkbox" value=""> Thumbnails</label>
<label class="checkbox"><input type="checkbox" value=""> Alerts</label>
<label class="checkbox"><input type="checkbox" value=""> Progress bars</label>
</div><!-- /span -->
<div class="span3">
<h3>JS Components</h3>
<label class="checkbox"><input type="checkbox" value=""> Tooltips</label>
<label class="checkbox"><input type="checkbox" value=""> Popovers</label>
<label class="checkbox"><input type="checkbox" value=""> Modals</label>
<label class="checkbox"><input type="checkbox" value=""> Dropdowns</label>
<label class="checkbox"><input type="checkbox" value=""> Tabs</label>
<label class="checkbox"><input type="checkbox" value=""> Collapse</label>
<label class="checkbox"><input type="checkbox" value=""> Carousel</label>
</div><!-- /span -->
<div class="span3">
<h3>Miscellaneous</h3>
<label class="checkbox"><input type="checkbox" value=""> Wells</label>
<label class="checkbox"><input type="checkbox" value=""> Close icon</label>
<label class="checkbox"><input type="checkbox" value=""> Utilities</label>
<label class="checkbox"><input type="checkbox" value=""> Component animations</label>
<h3>Responsive</h3>
<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>
</div><!-- /span -->
</div><!-- /row -->
<div class="page-header">
<a class="pull-right toggle-all" href="#">Reset to defaults</a>
<h1>
2. Modify variables
<small>Customize Bootstrap without using a LESS compiler</small>
</h1>
</div>
<div class="row download-builder">
<div class="span4">
<h3>Links</h3>
<label>@linkColor</label>
<input type="text" class="span3" value="#08c">
<label>@linkColorHover</label>
<input type="text" class="span3" value="darken(@linkColor, 15%)">
<h3>Grid system</h3>
<label>@gridColumns</label>
<input type="text" class="span3" value="">
<label>@gridColumnWidth</label>
<input type="text" class="span3" value="">
<label>@gridGutterWidth</label>
<input type="text" class="span3" value="">
<label>@siteWidth</label>
<input type="text" class="span3" value="">
<label>@fluidSidebarWidth</label>
<input type="text" class="span3" value="">
</div><!-- /span -->
<div class="span4">
<h3>Typography</h3>
<label>@baseFontSize</label>
<input type="text" class="span3" value="13px">
<label>@baseFontFamily</label>
<input type="text" class="span3" value="'Helvetica Neue', Helvetica, Arial, sans-serif">
<label>@baseLineHeight</label>
<input type="text" class="span3" value="18px">
<h3>Forms</h3>
<label>@primaryButtonColor</label>
<input type="text" class="span3" value="@blue">
<label>@placeholderText</label>
<input type="text" class="span3" value="@grayLight">
<h3>Navbar</h3>
<label>@navbarHeight</label>
<input type="text" class="span3" value="40px">
<label>@navbarBackground</label>
<input type="text" class="span3" value="@grayDarker">
<label>@navbarBackgroundHighlight</label>
<input type="text" class="span3" value="@grayDark">
</div><!-- /span -->
<div class="span4">
<h3>Form states &amp; alerts</h3>
<label>@warningText</label>
<input type="text" class="span3" value="#c09853">
<label>@warningBackground</label>
<input type="text" class="span3" value="#fcf8e3">
<label>@warningBorder</label>
<input type="text" class="span3" value="#f3edd2">
<label>@errorText</label>
<input type="text" class="span3" value="#b94a48">
<label>@errorBackground</label>
<input type="text" class="span3" value="#f2dede">
<label>@errorBorder</label>
<input type="text" class="span3" value="#e9c7c7">
<label>@successText</label>
<input type="text" class="span3" value="#468847">
<label>@successBackground</label>
<input type="text" class="span3" value="#dff0d8">
<label>@successBorder</label>
<input type="text" class="span3" value="#cfe8c4">
<label>@infoText</label>
<input type="text" class="span3" value="#3a87ad">
<label>@infoBackground</label>
<input type="text" class="span3" value="#d9edf7">
<label>@infoBorder</label>
<input type="text" class="span3" value="#bfe1f2">
</div><!-- /span -->
</div><!-- /row -->
<div class="page-header">
<a class="pull-right toggle-all" href="#">Toggle all</a>
<h1>
3. Select jQuery plugins
<small>Quickly add only the necessary javascript</small>
</h1>
</div>
<div class="row download-builder">
<div class="span4">
<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>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-popover.js">
Popovers <small>(requires Tooltips)</small>
</label>
</div><!-- /span -->
<div class="span4">
<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>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-transition.js">
Transitions <small>(required for any animation)</small>
</label>
</div><!-- /span -->
<div class="span4">
<h4 class="muted">Heads up!</h4>
<p class="muted">{{_i}}All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.{{/i}}</p>
</div><!-- /span -->
</div><!-- /row -->
<div class="download-btn">
<a class="btn xlarge primary" href="#">Build and Download</a>
</div>
</div><!-- /download -->
...@@ -5,18 +5,18 @@ ...@@ -5,18 +5,18 @@
<p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}} <p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
<div class="subnav"> <div class="subnav">
<ul class="nav pills"> <ul class="nav pills">
<li><a href="./javascript.html#javascript">{{_i}}Overview{{/i}}</a></li> <li><a href="#javascript">{{_i}}Overview{{/i}}</a></li>
<li><a href="./javascript.html#modals">{{_i}}Modal{{/i}}</a></li> <li><a href="#modals">{{_i}}Modal{{/i}}</a></li>
<li><a href="./javascript.html#dropdowns">{{_i}}Dropdown{{/i}}</a></li> <li><a href="#dropdowns">{{_i}}Dropdown{{/i}}</a></li>
<li><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></li> <li><a href="#scrollspy">{{_i}}Scrollspy{{/i}}</a></li>
<li><a href="./javascript.html#tabs">{{_i}}Tab{{/i}}</a></li> <li><a href="#tabs">{{_i}}Tab{{/i}}</a></li>
<li><a href="./javascript.html#tooltips">{{_i}}Tooltip{{/i}}</a></li> <li><a href="#tooltips">{{_i}}Tooltip{{/i}}</a></li>
<li><a href="./javascript.html#popovers">{{_i}}Popover{{/i}}</a></li> <li><a href="#popovers">{{_i}}Popover{{/i}}</a></li>
<li><a href="./javascript.html#alerts">{{_i}}Alert{{/i}}</a></li> <li><a href="#alerts">{{_i}}Alert{{/i}}</a></li>
<li><a href="./javascript.html#buttons">{{_i}}Button{{/i}}</a></li> <li><a href="#buttons">{{_i}}Button{{/i}}</a></li>
<li><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></li> <li><a href="#collapse">{{_i}}Collapse{{/i}}</a></li>
<li><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></li> <li><a href="#carousel">{{_i}}Carousel{{/i}}</a></li>
<li><a href="./javascript.html#typeahead">{{_i}}Typeahead{{/i}}</a></li> <li><a href="#typeahead">{{_i}}Typeahead{{/i}}</a></li>
</ul> </ul>
</div> </div>
</header> </header>
......
This diff is collapsed.
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p> <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<div class="subnav"> <div class="subnav">
<ul class="nav pills"> <ul class="nav pills">
<li><a href="./scaffolding.html#grid-system">{{_i}}Grid system{{/i}}</a></li> <li><a href="#grid-system">{{_i}}Grid system{{/i}}</a></li>
<li><a href="./scaffolding.html#layouts">{{_i}}Layouts{{/i}}</a></li> <li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
<li><a href="./scaffolding.html#responsive">{{_i}}Responsive design{{/i}}</a></li> <li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
</ul> </ul>
</div> </div>
</header> </header>
......
...@@ -51,6 +51,9 @@ ...@@ -51,6 +51,9 @@
<li class=""> <li class="">
<a href="./less.html">Using LESS</a> <a href="./less.html">Using LESS</a>
</li> </li>
<li class="">
<a href="./download.html">Download</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
...@@ -166,14 +166,14 @@ textarea { ...@@ -166,14 +166,14 @@ textarea {
input, input,
textarea { textarea {
.box-shadow(inset 0 1px 1px rgba(0,0,0,.1)); .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
@transition: border linear .2s, box-shadow linear .2s; @transition: border linear .2s, box-shadow linear .2s;
.transition(@transition); .transition(@transition);
} }
input:focus, input:focus,
textarea:focus { textarea:focus {
border-color: rgba(82,168,236,.8); border-color: rgba(82,168,236,.8);
@shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow); .box-shadow(@shadow);
outline: 0; outline: 0;
} }
......
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