diff options
| author | Mark Otto <[email protected]> | 2012-01-27 13:20:02 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-01-27 13:20:02 -0800 |
| commit | e8647c1b118d2c726a8987e9a41aad82da972b57 (patch) | |
| tree | 94282745842915734f5bdaaf339976c3e03ca0a1 /docs | |
| parent | 97546adc90a9c8149bb4560641b4164338e38063 (diff) | |
| download | bootstrap-e8647c1b118d2c726a8987e9a41aad82da972b57.tar.xz bootstrap-e8647c1b118d2c726a8987e9a41aad82da972b57.zip | |
huuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuge update to doces and stuff
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/bootstrap-responsive.css | 2 | ||||
| -rw-r--r-- | docs/assets/css/bootstrap.css | 23 | ||||
| -rw-r--r-- | docs/assets/css/docs.css | 32 | ||||
| -rw-r--r-- | docs/base-css.html | 2 | ||||
| -rw-r--r-- | docs/components.html | 12 | ||||
| -rw-r--r-- | docs/download.html | 198 | ||||
| -rw-r--r-- | docs/examples.html | 2 | ||||
| -rw-r--r-- | docs/index.html | 27 | ||||
| -rw-r--r-- | docs/javascript.html | 2 | ||||
| -rw-r--r-- | docs/less.html | 14 | ||||
| -rw-r--r-- | docs/scaffolding.html | 10 | ||||
| -rw-r--r-- | docs/templates/layout.mustache | 2 | ||||
| -rw-r--r-- | docs/templates/pages/components.mustache | 10 | ||||
| -rw-r--r-- | docs/templates/pages/download.mustache | 192 | ||||
| -rw-r--r-- | docs/templates/pages/index.mustache | 25 | ||||
| -rw-r--r-- | docs/templates/pages/less.mustache | 12 | ||||
| -rw-r--r-- | docs/upgrading.html | 2 |
17 files changed, 320 insertions, 247 deletions
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 02b5c099e..6886105cb 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -111,6 +111,8 @@ @media (min-width: 768px) and (max-width: 940px) { .container { width: 748px; + padding-left: 10px; + padding-right: 10px; } .span1 { width: 44px; diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 4fe86c977..b772e8bbb 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Fri Jan 27 12:16:22 EST 2012 + * Date: Fri Jan 27 13:19:35 PST 2012 */ article, aside, @@ -1791,11 +1791,12 @@ table .span12 { line-height: 1; color: #ffffff; } -.navbar p { - margin: 0; +.navbar .navbar-text { + margin-bottom: 0; line-height: 40px; + color: #999999; } -.navbar p a:hover { +.navbar .navbar-text a:hover { color: #ffffff; background-color: transparent; } @@ -1841,7 +1842,7 @@ table .span12 { .navbar-search .search-query :-moz-placeholder { color: #eeeeee; } -.navbar-search .search-query::-webkit-input-placeholder { +.navbar-search .search-query ::-webkit-input-placeholder { color: #eeeeee; } .navbar-search .search-query:hover { @@ -1870,7 +1871,7 @@ table .span12 { -moz-border-radius: 4px; border-radius: 4px; } -.navbar-fixed { +.navbar-fixed-top { position: fixed; top: 0; right: 0; @@ -1916,7 +1917,7 @@ table .span12 { margin: 0 5px; overflow: hidden; background-color: #222222; - border-right: 1px solid #444; + border-right: 1px solid #333333; } .navbar .nav.pull-right { margin-left: 10px; @@ -2649,7 +2650,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-bottom: 18px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; - border: 1px solid #f3edd2; + border: 1px solid #fbeed5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -2664,14 +2665,14 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .alert-success { background-color: #dff0d8; - border-color: #cfe8c4; + border-color: #d6e9c6; } .alert-success, .alert-success .alert-heading { color: #468847; } .alert-danger, .alert-error { background-color: #f2dede; - border-color: #e9c7c7; + border-color: #eed3d7; } .alert-danger, .alert-error, @@ -2681,7 +2682,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { } .alert-info { background-color: #d9edf7; - border-color: #bfe1f2; + border-color: #bce8f1; } .alert-info, .alert-info .alert-heading { color: #3a87ad; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 6fa20cf4d..19356df1a 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -20,7 +20,7 @@ body { /* Tweak navbar brand link to be super sleek -------------------------------------------------- */ -.navbar-fixed .brand { +.navbar-fixed-top .brand { padding-right: 0; padding-left: 0; margin-left: 20px; @@ -32,7 +32,7 @@ body { -moz-transition: all .2s linear; transition: all .2s linear; } -.navbar-fixed .brand:hover { +.navbar-fixed-top .brand:hover { text-decoration: none; } @@ -302,14 +302,9 @@ hr.soften { /* Quickstart section for getting le code -------------------------------------------------- */ -.getting-started h3, -.getting-started p { - line-height: 18px; - text-align: center; - margin-bottom: 9px; -} .getting-started p { color: #777; + margin-bottom: 9px; } .getting-started .current-version, .getting-started .current-version a { @@ -322,14 +317,12 @@ hr.soften { display: block; width: 95%; height: auto; - margin-left: auto; - margin-right: auto; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 20px; white-space: nowrap; overflow: hidden; - background-color: #f5f5f5; + color: #999; /* Makes inputs behave like true block-level elements */ -webkit-box-sizing: border-box; /* Older Webkit */ -moz-box-sizing: border-box; /* Older FF */ @@ -339,6 +332,9 @@ hr.soften { *width: 80%; *height: 24px; } +.getting-started textarea:focus { + color: #333; +} /* Footer @@ -476,7 +472,7 @@ hr.soften { margin-top: 36px; } .page-header .toggle-all { - margin-top: 13px; + margin-top: 5px; } /* Space out h3s when following a section */ @@ -518,6 +514,11 @@ hr.soften { color: #777; } +/* Variables section */ +#variables label { + margin-bottom: 0; +} + /* Giant download button */ .download-btn { margin: 36px 0 108px.i; @@ -525,13 +526,16 @@ hr.soften { .download p, .download h4 { max-width: 50%; - margin: 0 auto 18px; + margin: 0 auto; color: #999; text-align: center; } -.download-btn h4 { +.download h4 { margin-bottom: 0; } +.download p { + margin-bottom: 18px; +} .btn.xlarge { display: block; width: auto; diff --git a/docs/base-css.html b/docs/base-css.html index 9cad9de01..2cab601df 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -30,7 +30,7 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> diff --git a/docs/components.html b/docs/components.html index eba49449f..7efa889b8 100644 --- a/docs/components.html +++ b/docs/components.html @@ -30,7 +30,7 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> @@ -71,7 +71,7 @@ <div class="subnav"> <ul class="nav pills"> <li><a href="#buttonGroups">Button groups</a></li> - <li><a href="#comboButtons">Combo buttons</a></li> + <li><a href="#buttonDropdowns">Button dropdowns</a></li> <li><a href="#navs">Nav, tabs, pills</a></li> <li><a href="#navbar">Navbar</a></li> <li><a href="#breadcrumbs">Breadcrumbs</a></li> @@ -157,9 +157,9 @@ <!-- Split button dropdowns ================================================== --> -<section id="comboButtons"> +<section id="buttonDropdowns"> <div class="page-header"> - <h1>Combo buttons <small>Built on button groups to provide contextual dropdown menus</small></h1> + <h1>Buttons dropdowns <small>Built on button groups to provide contextual dropdown menus</small></h1> </div> <div class="row"> <div class="span4"> @@ -699,9 +699,9 @@ </div> </div> </pre> - <p>To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> + <p>To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed-top</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.</p> <pre class="prettyprint linenums"> -<div class="navbar navbar-fixed"> +<div class="navbar navbar-fixed-top"> ... </div> </pre> diff --git a/docs/download.html b/docs/download.html index 3af30dca7..458b5caa0 100644 --- a/docs/download.html +++ b/docs/download.html @@ -30,7 +30,7 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> @@ -74,19 +74,19 @@ <p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.</p> <div class="subnav"> <ul class="nav pills"> - <li><a href="#components">1. Select components</a></li> - <li><a href="#variables">2. Modify variables</a></li> - <li><a href="#plugins">3. Select jQuery plugins</a></li> - <li><a href="#download">4. Customize and download</a></li> + <li><a href="#components">1. Choose components</a></li> + <li><a href="#plugins">2. Select jQuery plugins</a></li> + <li><a href="#variables">3. Customize variables</a></li> + <li><a href="#download">4. Download</a></li> </ul> </div> </header> <section class="download" id="components"> <div class="page-header"> - <a class="pull-right toggle-all" href="#">Toggle all</a> + <a class="btn small pull-right toggle-all" href="#">Toggle all</a> <h1> - 1. Select components + 1. Chose components <small>Get just the CSS you need</small> </h1> </div> @@ -107,8 +107,7 @@ </div><!-- /span --> <div class="span3"> <h3>Components</h3> - <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups</label> - <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Combo buttons</label> + <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label> <label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label> <label class="checkbox"><input checked="checked" type="checkbox" value="navbar.less"> Navbar</label> <label class="checkbox"><input checked="checked" type="checkbox" value="breadcrumbs.less"> Breadcrumbs</label> @@ -124,8 +123,7 @@ <label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> Popovers</label> <label class="checkbox"><input checked="checked" type="checkbox" value="modals.less"> Modals</label> <label class="checkbox"><input checked="checked" type="checkbox" value="dropdowns.less"> Dropdowns</label> - <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Tabs</label> - <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Collapse</label> + <label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label> <label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label> </div><!-- /span --> <div class="span3"> @@ -134,97 +132,21 @@ <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label> <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label> <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label> + <!-- <h3>Responsive</h3> <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Max-width 480px</label> <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Max-width 768px</label> <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Max-width 1210px</label> - </div><!-- /span --> - </div><!-- /row --> -</section> - -<section class="download" id="variables"> - <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" placeholder="#08c"> - <label>@linkColorHover</label> - <input type="text" class="span3" placeholder="darken(@linkColor, 15%)"> - <h3>Grid system</h3> - <label>@gridColumns</label> - <input type="text" class="span3" placeholder="12"> - <label>@gridColumnWidth</label> - <input type="text" class="span3" placeholder="40px"> - <label>@gridGutterWidth</label> - <input type="text" class="span3" placeholder="20px"> - <label>@siteWidth</label> - <input type="text" class="span3" placeholder="(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));"> - <label>@fluidSidebarWidth</label> - <input type="text" class="span3" placeholder="220px"> - </div><!-- /span --> - <div class="span4"> - <h3>Typography</h3> - <label>@baseFontSize</label> - <input type="text" class="span3" placeholder="13px"> - <label>@baseFontFamily</label> - <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> - <label>@baseLineHeight</label> - <input type="text" class="span3" placeholder="18px"> - <h3>Forms</h3> - <label>@primaryButtonColor</label> - <input type="text" class="span3" placeholder="@blue"> - <label>@placeholderText</label> - <input type="text" class="span3" placeholder="@grayLight"> - <h3>Navbar</h3> - <label>@navbarHeight</label> - <input type="text" class="span3" placeholder="40px"> - <label>@navbarBackground</label> - <input type="text" class="span3" placeholder="@grayDarker"> - <label>@navbarBackgroundHighlight</label> - <input type="text" class="span3" placeholder="@grayDark"> - </div><!-- /span --> - <div class="span4"> - <h3>Form states & alerts</h3> - <label>@warningText</label> - <input type="text" class="span3" placeholder="#c09853"> - <label>@warningBackground</label> - <input type="text" class="span3" placeholder="#fcf8e3"> - <label>@warningBorder</label> - <input type="text" class="span3" placeholder="#f3edd2"> - <label>@errorText</label> - <input type="text" class="span3" placeholder="#b94a48"> - <label>@errorBackground</label> - <input type="text" class="span3" placeholder="#f2dede"> - <label>@errorBorder</label> - <input type="text" class="span3" placeholder="#e9c7c7"> - <label>@successText</label> - <input type="text" class="span3" placeholder="#468847"> - <label>@successBackground</label> - <input type="text" class="span3" placeholder="#dff0d8"> - <label>@successBorder</label> - <input type="text" class="span3" placeholder="#cfe8c4"> - <label>@infoText</label> - <input type="text" class="span3" placeholder="#3a87ad"> - <label>@infoBackground</label> - <input type="text" class="span3" placeholder="#d9edf7"> - <label>@infoBorder</label> - <input type="text" class="span3" placeholder="#bfe1f2"> + --> </div><!-- /span --> </div><!-- /row --> </section> <section class="download" id="plugins"> <div class="page-header"> - <a class="pull-right toggle-all" href="#">Toggle all</a> + <a class="btn small pull-right toggle-all" href="#">Toggle all</a> <h1> - 3. Select jQuery plugins + 2. Select jQuery plugins <small>Quickly add only the necessary javascript</small> </h1> </div> @@ -288,6 +210,100 @@ </div><!-- /row --> </section> + +<section class="download" id="variables"> + <div class="page-header"> + <a class="btn small pull-right toggle-all" href="#">Reset to defaults</a> + <h1> + 3. Customize variables + <small>Optionally modify Bootstrap without a compiler</small> + </h1> + </div> + <div class="row download-builder"> + <div class="span3"> + <h3>Links</h3> + <label>@linkColor</label> + <input type="text" class="span3" placeholder="#08c"> + <label>@linkColorHover</label> + <input type="text" class="span3" placeholder="darken(@linkColor, 15%)"> + <h3>Colors</h3> + <label>@blue</label> + <input type="text" class="span3" placeholder="#049cdb"> + <label>@green</label> + <input type="text" class="span3" placeholder="#46a546"> + <label>@red</label> + <input type="text" class="span3" placeholder="#9d261d"> + <label>@yellow</label> + <input type="text" class="span3" placeholder="#ffc40d"> + <label>@orange</label> + <input type="text" class="span3" placeholder="#f89406"> + <label>@pink</label> + <input type="text" class="span3" placeholder="#c3325f"> + <label>@purple</label> + <input type="text" class="span3" placeholder="#7a43b6"> + </div><!-- /span --> + <div class="span3"> + <h3>Grid system</h3> + <label>@gridColumns</label> + <input type="text" class="span3" placeholder="12"> + <label>@gridColumnWidth</label> + <input type="text" class="span3" placeholder="40px"> + <label>@gridGutterWidth</label> + <input type="text" class="span3" placeholder="20px"> + <label>@siteWidth</label> + <input type="text" class="span3" placeholder="(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));"> + <label>@fluidSidebarWidth</label> + <input type="text" class="span3" placeholder="220px"> + <h3>Typography</h3> + <label>@baseFontSize</label> + <input type="text" class="span3" placeholder="13px"> + <label>@baseFontFamily</label> + <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> + <label>@baseLineHeight</label> + <input type="text" class="span3" placeholder="18px"> + </div><!-- /span --> + <div class="span3"> + <h3>Forms</h3> + <label>@primaryButtonColor</label> + <input type="text" class="span3" placeholder="@blue"> + <label>@placeholderText</label> + <input type="text" class="span3" placeholder="@grayLight"> + <h3>Navbar</h3> + <label>@navbarHeight</label> + <input type="text" class="span3" placeholder="40px"> + <label>@navbarBackground</label> + <input type="text" class="span3" placeholder="@grayDarker"> + <label>@navbarBackgroundHighlight</label> + <input type="text" class="span3" placeholder="@grayDark"> + <label>@navbarText</label> + <input type="text" class="span3" placeholder="@grayLight"> + <label>@navbarLinkColor</label> + <input type="text" class="span3" placeholder="@grayLight"> + <label>@navbarLinkColorHover</label> + <input type="text" class="span3" placeholder="@white"> + </div><!-- /span --> + <div class="span3"> + <h3>Form states & alerts</h3> + <label>@warningText</label> + <input type="text" class="span3" placeholder="#c09853"> + <label>@warningBackground</label> + <input type="text" class="span3" placeholder="#fcf8e3"> + <label>@errorText</label> + <input type="text" class="span3" placeholder="#b94a48"> + <label>@errorBackground</label> + <input type="text" class="span3" placeholder="#f2dede"> + <label>@successText</label> + <input type="text" class="span3" placeholder="#468847"> + <label>@successBackground</label> + <input type="text" class="span3" placeholder="#dff0d8"> + <label>@infoText</label> + <input type="text" class="span3" placeholder="#3a87ad"> + <label>@infoBackground</label> + <input type="text" class="span3" placeholder="#d9edf7"> + </div><!-- /span --> + </div><!-- /row --> +</section> + <section class="download" id="download"> <div class="page-header"> <h1> diff --git a/docs/examples.html b/docs/examples.html index dfa62fe98..3416ea6f2 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -30,7 +30,7 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> diff --git a/docs/index.html b/docs/index.html index 317ec994b..4dd21b3fa 100644 --- a/docs/index.html +++ b/docs/index.html @@ -30,7 +30,7 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> @@ -73,7 +73,7 @@ <p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p> <p class="download-info"> <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">View project on GitHub</a> - <a href="./download.html" class="btn btn-large">Customize and download</a> + <a href="./download.html" class="btn btn-large">Customize and Download</a> </p> <div class="benefits"> <h4>Feature highlights</h4> @@ -90,7 +90,7 @@ </div> <ul class="quick-links"> - <li><a href="https://github.com/twitter/bootstrap/">GitHub repo</a></li> + <li><a href="./upgrading.html">Upgrading from 1.4</a></li> <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li> <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li> <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li> @@ -221,26 +221,27 @@ <div class="getting-started"> <div class="row"> <div class="span4"> + <h3>Prostyle with Node</h3> + <p>If you use Node, download the repo, customize Bootstrap, and run make.</p> + <pre class="prettyprint"> +$ git clone [email protected]:twitter/bootstrap.git +$ make</pre> + </div> + <div class="span4"> <h3>Hotlink the CSS</h3> - <p>For the quickest and easiest start, just copy this snippet into your webpage.</p> + <p>For the quickest and easiest start, just copy this snippet into your code to get the CSS.</p> <form> <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea> </form> </div> <div class="span4"> - <h3>Use it with LESS</h3> - <p>A fan of using LESS? No problem, just download the repo and add these lines to your page:</p> + <h3>Use LESS.js</h3> + <p>A fan of using LESS? No problem, just link to the appropriate .less and .js files:</p> <form> <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script></textarea> </form> - </div> - <div class="span4"> - <h3>Fork on GitHub</h3> - <p>Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.</p> - <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p> - <p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p> - </div> + </div> </div><!-- /row --> </div><!-- /getting-started --> diff --git a/docs/javascript.html b/docs/javascript.html index dd65c1b8d..3a869e930 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -30,7 +30,7 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> diff --git a/docs/less.html b/docs/less.html index fb1b0d18c..33ebc8276 100644 --- a/docs/less.html +++ b/docs/less.html @@ -30,7 +30,7 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> @@ -331,6 +331,18 @@ <td><code>@navbarBackgroundHighlight</code></td> <td><code>@grayDark</code></td> </tr> + <tr> + <td><code>@navbarText</code></td> + <td><code>@grayLight</code></td> + </tr> + <tr> + <td><code>@navbarLinkColor</code></td> + <td><code>@grayLight</code></td> + </tr> + <tr> + <td><code>@navbarLinkColorHover</code></td> + <td><code>@white</code></td> + </tr> </tbody> </table> </div> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index f49b8d6c4..eed2d7112 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -30,7 +30,7 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> @@ -136,6 +136,8 @@ </div> </div><!-- /row --> + <br> + <h2>Offsetting columns</h2> <div class="row show-grid"> <div class="span4">4</div> @@ -148,6 +150,12 @@ <div class="row show-grid"> <div class="span8 offset4">8 offset 4</div> </div><!-- /row --> +<pre class="prettyprint linenums"> +<div class="row"> + <div class="span4">...</div> + <div class="span4 offset4">...</div> +</div> +</pre> <br> diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index dbb718056..4a016e4d1 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -30,7 +30,7 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index aaee36410..f73052e63 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -6,7 +6,7 @@ <div class="subnav"> <ul class="nav pills"> <li><a href="#buttonGroups">{{_i}}Button groups{{/i}}</a></li> - <li><a href="#comboButtons">{{_i}}Combo buttons{{/i}}</a></li> + <li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li> <li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li> <li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li> <li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li> @@ -92,9 +92,9 @@ <!-- Split button dropdowns ================================================== --> -<section id="comboButtons"> +<section id="buttonDropdowns"> <div class="page-header"> - <h1>{{_i}}Combo buttons{{/i}} <small>{{_i}}Built on button groups to provide contextual dropdown menus{{/i}}</small></h1> + <h1>{{_i}}Buttons dropdowns{{/i}} <small>{{_i}}Built on button groups to provide contextual dropdown menus{{/i}}</small></h1> </div> <div class="row"> <div class="span4"> @@ -634,9 +634,9 @@ </div> </div> </pre> - <p>{{_i}}To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.{{/i}}</p> + <p>{{_i}}To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed-top</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code><body></code>.{{/i}}</p> <pre class="prettyprint linenums"> -<div class="navbar navbar-fixed"> +<div class="navbar navbar-fixed-top"> ... </div> </pre> diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache index 5b9f765ab..2a8e46a8a 100644 --- a/docs/templates/pages/download.mustache +++ b/docs/templates/pages/download.mustache @@ -9,10 +9,10 @@ <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> <div class="subnav"> <ul class="nav pills"> - <li><a href="#components">{{_i}}1. Select components{{/i}}</a></li> - <li><a href="#variables">{{_i}}2. Modify variables{{/i}}</a></li> - <li><a href="#plugins">{{_i}}3. Select jQuery plugins{{/i}}</a></li> - <li><a href="#download">{{_i}}4. Customize and download{{/i}}</a></li> + <li><a href="#components">{{_i}}1. Choose components{{/i}}</a></li> + <li><a href="#plugins">{{_i}}2. Select jQuery plugins{{/i}}</a></li> + <li><a href="#variables">{{_i}}3. Customize variables{{/i}}</a></li> + <li><a href="#download">{{_i}}4. Download{{/i}}</a></li> </ul> </div> </header> @@ -21,7 +21,7 @@ <div class="page-header"> <a class="btn small pull-right toggle-all" href="#">Toggle all</a> <h1> - 1. Select components + 1. Chose components <small>Get just the CSS you need</small> </h1> </div> @@ -42,8 +42,7 @@ </div><!-- /span --> <div class="span3"> <h3>Components</h3> - <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups</label> - <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Combo buttons</label> + <label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label> <label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label> <label class="checkbox"><input checked="checked" type="checkbox" value="navbar.less"> Navbar</label> <label class="checkbox"><input checked="checked" type="checkbox" value="breadcrumbs.less"> Breadcrumbs</label> @@ -59,8 +58,7 @@ <label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> Popovers</label> <label class="checkbox"><input checked="checked" type="checkbox" value="modals.less"> Modals</label> <label class="checkbox"><input checked="checked" type="checkbox" value="dropdowns.less"> Dropdowns</label> - <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Tabs</label> - <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Collapse</label> + <label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label> <label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label> </div><!-- /span --> <div class="span3"> @@ -69,88 +67,12 @@ <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label> <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label> <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label> + <!-- <h3>Responsive</h3> <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Max-width 480px</label> <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Max-width 768px</label> <label class="checkbox"><input type="checkbox" value=""> MARK PLS FIX Max-width 1210px</label> - </div><!-- /span --> - </div><!-- /row --> -</section> - -<section class="download" id="variables"> - <div class="page-header"> - <a class="btn small 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" placeholder="#08c"> - <label>@linkColorHover</label> - <input type="text" class="span3" placeholder="darken(@linkColor, 15%)"> - <h3>Grid system</h3> - <label>@gridColumns</label> - <input type="text" class="span3" placeholder="12"> - <label>@gridColumnWidth</label> - <input type="text" class="span3" placeholder="40px"> - <label>@gridGutterWidth</label> - <input type="text" class="span3" placeholder="20px"> - <label>@siteWidth</label> - <input type="text" class="span3" placeholder="(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));"> - <label>@fluidSidebarWidth</label> - <input type="text" class="span3" placeholder="220px"> - </div><!-- /span --> - <div class="span4"> - <h3>Typography</h3> - <label>@baseFontSize</label> - <input type="text" class="span3" placeholder="13px"> - <label>@baseFontFamily</label> - <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> - <label>@baseLineHeight</label> - <input type="text" class="span3" placeholder="18px"> - <h3>Forms</h3> - <label>@primaryButtonColor</label> - <input type="text" class="span3" placeholder="@blue"> - <label>@placeholderText</label> - <input type="text" class="span3" placeholder="@grayLight"> - <h3>Navbar</h3> - <label>@navbarHeight</label> - <input type="text" class="span3" placeholder="40px"> - <label>@navbarBackground</label> - <input type="text" class="span3" placeholder="@grayDarker"> - <label>@navbarBackgroundHighlight</label> - <input type="text" class="span3" placeholder="@grayDark"> - </div><!-- /span --> - <div class="span4"> - <h3>Form states & alerts</h3> - <label>@warningText</label> - <input type="text" class="span3" placeholder="#c09853"> - <label>@warningBackground</label> - <input type="text" class="span3" placeholder="#fcf8e3"> - <label>@warningBorder</label> - <input type="text" class="span3" placeholder="#f3edd2"> - <label>@errorText</label> - <input type="text" class="span3" placeholder="#b94a48"> - <label>@errorBackground</label> - <input type="text" class="span3" placeholder="#f2dede"> - <label>@errorBorder</label> - <input type="text" class="span3" placeholder="#e9c7c7"> - <label>@successText</label> - <input type="text" class="span3" placeholder="#468847"> - <label>@successBackground</label> - <input type="text" class="span3" placeholder="#dff0d8"> - <label>@successBorder</label> - <input type="text" class="span3" placeholder="#cfe8c4"> - <label>@infoText</label> - <input type="text" class="span3" placeholder="#3a87ad"> - <label>@infoBackground</label> - <input type="text" class="span3" placeholder="#d9edf7"> - <label>@infoBorder</label> - <input type="text" class="span3" placeholder="#bfe1f2"> + --> </div><!-- /span --> </div><!-- /row --> </section> @@ -159,7 +81,7 @@ <div class="page-header"> <a class="btn small pull-right toggle-all" href="#">Toggle all</a> <h1> - 3. Select jQuery plugins + 2. Select jQuery plugins <small>Quickly add only the necessary javascript</small> </h1> </div> @@ -223,6 +145,100 @@ </div><!-- /row --> </section> + +<section class="download" id="variables"> + <div class="page-header"> + <a class="btn small pull-right toggle-all" href="#">Reset to defaults</a> + <h1> + 3. Customize variables + <small>Optionally modify Bootstrap without a compiler</small> + </h1> + </div> + <div class="row download-builder"> + <div class="span3"> + <h3>Links</h3> + <label>@linkColor</label> + <input type="text" class="span3" placeholder="#08c"> + <label>@linkColorHover</label> + <input type="text" class="span3" placeholder="darken(@linkColor, 15%)"> + <h3>Colors</h3> + <label>@blue</label> + <input type="text" class="span3" placeholder="#049cdb"> + <label>@green</label> + <input type="text" class="span3" placeholder="#46a546"> + <label>@red</label> + <input type="text" class="span3" placeholder="#9d261d"> + <label>@yellow</label> + <input type="text" class="span3" placeholder="#ffc40d"> + <label>@orange</label> + <input type="text" class="span3" placeholder="#f89406"> + <label>@pink</label> + <input type="text" class="span3" placeholder="#c3325f"> + <label>@purple</label> + <input type="text" class="span3" placeholder="#7a43b6"> + </div><!-- /span --> + <div class="span3"> + <h3>Grid system</h3> + <label>@gridColumns</label> + <input type="text" class="span3" placeholder="12"> + <label>@gridColumnWidth</label> + <input type="text" class="span3" placeholder="40px"> + <label>@gridGutterWidth</label> + <input type="text" class="span3" placeholder="20px"> + <label>@siteWidth</label> + <input type="text" class="span3" placeholder="(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));"> + <label>@fluidSidebarWidth</label> + <input type="text" class="span3" placeholder="220px"> + <h3>Typography</h3> + <label>@baseFontSize</label> + <input type="text" class="span3" placeholder="13px"> + <label>@baseFontFamily</label> + <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> + <label>@baseLineHeight</label> + <input type="text" class="span3" placeholder="18px"> + </div><!-- /span --> + <div class="span3"> + <h3>Forms</h3> + <label>@primaryButtonColor</label> + <input type="text" class="span3" placeholder="@blue"> + <label>@placeholderText</label> + <input type="text" class="span3" placeholder="@grayLight"> + <h3>Navbar</h3> + <label>@navbarHeight</label> + <input type="text" class="span3" placeholder="40px"> + <label>@navbarBackground</label> + <input type="text" class="span3" placeholder="@grayDarker"> + <label>@navbarBackgroundHighlight</label> + <input type="text" class="span3" placeholder="@grayDark"> + <label>@navbarText</label> + <input type="text" class="span3" placeholder="@grayLight"> + <label>@navbarLinkColor</label> + <input type="text" class="span3" placeholder="@grayLight"> + <label>@navbarLinkColorHover</label> + <input type="text" class="span3" placeholder="@white"> + </div><!-- /span --> + <div class="span3"> + <h3>Form states & alerts</h3> + <label>@warningText</label> + <input type="text" class="span3" placeholder="#c09853"> + <label>@warningBackground</label> + <input type="text" class="span3" placeholder="#fcf8e3"> + <label>@errorText</label> + <input type="text" class="span3" placeholder="#b94a48"> + <label>@errorBackground</label> + <input type="text" class="span3" placeholder="#f2dede"> + <label>@successText</label> + <input type="text" class="span3" placeholder="#468847"> + <label>@successBackground</label> + <input type="text" class="span3" placeholder="#dff0d8"> + <label>@infoText</label> + <input type="text" class="span3" placeholder="#3a87ad"> + <label>@infoBackground</label> + <input type="text" class="span3" placeholder="#d9edf7"> + </div><!-- /span --> + </div><!-- /row --> +</section> + <section class="download" id="download"> <div class="page-header"> <h1> diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index 9a5421bd3..96477f0ca 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -8,7 +8,7 @@ <p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p> <p class="download-info"> <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">{{_i}}View project on GitHub{{/i}}</a> - <a href="./download.html" class="btn btn-large">{{_i}}Customize and download{{/i}}</a> + <a href="./download.html" class="btn btn-large">{{_i}}Customize and Download{{/i}}</a> </p> <div class="benefits"> <h4>{{_i}}Feature highlights{{/i}}</h4> @@ -25,7 +25,7 @@ </div> <ul class="quick-links"> - <li><a href="https://github.com/twitter/bootstrap/">GitHub repo</a></li> + <li><a href="./upgrading.html">Upgrading from 1.4</a></li> <li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Issues{{/i}}</a></li> <li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">{{_i}}Roadmap{{/i}}</a></li> <li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">{{_i}}Changelog{{/i}}</a></li> @@ -156,26 +156,27 @@ <div class="getting-started"> <div class="row"> <div class="span4"> + <h3>{{_i}}Prostyle with Node{{/i}}</h3> + <p>{{_i}}If you use Node, download the repo, customize Bootstrap, and run make.{{/i}}</p> + <pre class="prettyprint"> +$ git clone [email protected]:twitter/bootstrap.git +$ make</pre> + </div> + <div class="span4"> <h3>{{_i}}Hotlink the CSS{{/i}}</h3> - <p>{{_i}}For the quickest and easiest start, just copy this snippet into your webpage.{{/i}}</p> + <p>{{_i}}For the quickest and easiest start, just copy this snippet into your code to get the CSS.{{/i}}</p> <form> <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea> </form> </div> <div class="span4"> - <h3>{{_i}}Use it with LESS{{/i}}</h3> - <p>{{_i}}A fan of using LESS? No problem, just download the repo and add these lines to your page:{{/i}}</p> + <h3>{{_i}}Use LESS.js{{/i}}</h3> + <p>{{_i}}A fan of using LESS? No problem, just link to the appropriate .less and .js files:{{/i}}</p> <form> <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script></textarea> </form> - </div> - <div class="span4"> - <h3>{{_i}}Fork on GitHub{{/i}}</h3> - <p>{{_i}}Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.{{/i}}</p> - <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">{{_i}}Bootstrap on GitHub »{{/i}}</a></p> - <p class="current-version">{{_i}}Currently{{/i}} <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p> - </div> + </div> </div><!-- /row --> </div><!-- /getting-started --> diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 1aec06c2c..649f8f456 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -266,6 +266,18 @@ <td><code>@navbarBackgroundHighlight</code></td> <td><code>@grayDark</code></td> </tr> + <tr> + <td><code>@navbarText</code></td> + <td><code>@grayLight</code></td> + </tr> + <tr> + <td><code>@navbarLinkColor</code></td> + <td><code>@grayLight</code></td> + </tr> + <tr> + <td><code>@navbarLinkColorHover</code></td> + <td><code>@white</code></td> + </tr> </tbody> </table> </div> diff --git a/docs/upgrading.html b/docs/upgrading.html index 142e750cc..779bf7165 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -30,7 +30,7 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed"> + <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> |
