From cfc2353059df628c67d19a3c5c3ead2cc6051f53 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 Jan 2012 23:59:22 -0800 Subject: [PATCH] front page docs updated to include old getting started section, update code styles to look like github gists, and lots more docs updates --- bootstrap.css | 50 +++-- bootstrap.min.css | 19 +- docs/assets/css/docs.css | 73 +++++++- .../js/google-code-prettify/prettify.css | 16 +- docs/base-css.html | 14 ++ docs/components.html | 173 +++++++++++++----- docs/index.html | 40 +++- docs/less.html | 6 +- docs/scaffolding.html | 1 - docs/upgrading.html | 3 + lib/forms.less | 10 + lib/navbar.less | 5 + lib/sidenav.less | 11 +- lib/type.less | 12 +- 14 files changed, 341 insertions(+), 92 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 4d8edd4fbf..85ed7961a3 100644 --- a/bootstrap.css +++ b/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: Thu Jan 5 23:24:01 PST 2012 + * Date: Fri Jan 6 23:58:33 PST 2012 */ html, body { margin: 0; @@ -382,20 +382,20 @@ h3 { h3 small { font-size: 14px; } +h4, h5, h6 { + line-height: 18px; +} h4 { - font-size: 16px; - line-height: 36px; + font-size: 14px; } h4 small { font-size: 12px; } h5 { - font-size: 14px; - line-height: 18px; + font-size: 12px; } h6 { - font-size: 13px; - line-height: 18px; + font-size: 11px; color: #999999; text-transform: uppercase; } @@ -625,6 +625,12 @@ textarea { .controls > .radio:first-child, .controls > .checkbox:first-child { padding-top: 6px; } +.radio.inline, .checkbox.inline { + display: inline-block; +} +.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { + margin-left: 10px; +} input, textarea { -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); @@ -1672,6 +1678,9 @@ i { .navbar .btn { margin-top: 5px; } +.navbar-form { + margin-bottom: 0; +} .navbar-search { position: relative; float: left; @@ -2111,19 +2120,22 @@ i { } .side-nav .nav-label, .side-nav .nav-item { display: block; - padding: 3px 16px; + padding: 3px 15px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .side-nav .nav-label { font-size: 11px; line-height: 18px; - color: #333333; + color: #999999; text-transform: uppercase; } .side-nav .nav-group { - margin: 0 -1px; + margin: 0; list-style: none; } +.side-nav .nav-group + .nav-label { + margin-top: 9px; +} .side-nav .nav-item { font-weight: bold; } @@ -2136,16 +2148,16 @@ i { .side-nav .active .nav-item { color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); - background-color: #aaaaaa; - background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa)); - background-image: -moz-linear-gradient(top, #cccccc, #aaaaaa); - background-image: -ms-linear-gradient(top, #cccccc, #aaaaaa); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa)); - background-image: -webkit-linear-gradient(top, #cccccc, #aaaaaa); - background-image: -o-linear-gradient(top, #cccccc, #aaaaaa); - background-image: linear-gradient(top, #cccccc, #aaaaaa); + background-color: #999999; + background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999)); + background-image: -moz-linear-gradient(top, #cccccc, #999999); + background-image: -ms-linear-gradient(top, #cccccc, #999999); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999)); + background-image: -webkit-linear-gradient(top, #cccccc, #999999); + background-image: -o-linear-gradient(top, #cccccc, #999999); + background-image: linear-gradient(top, #cccccc, #999999); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0); -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05); diff --git a/bootstrap.min.css b/bootstrap.min.css index c93f333ee6..16f9fb76bd 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -66,9 +66,10 @@ h1,h2,h3,h4,h5,h6{font-weight:bold;color:#333333;text-rendering:optimizelegibili h1{font-size:30px;line-height:36px;}h1 small{font-size:18px;} h2{font-size:24px;line-height:36px;}h2 small{font-size:18px;} h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} -h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} -h5{font-size:14px;line-height:18px;} -h6{font-size:13px;line-height:18px;color:#999999;text-transform:uppercase;} +h4,h5,h6{line-height:18px;} +h4{font-size:14px;}h4 small{font-size:12px;} +h5{font-size:12px;} +h6{font-size:11px;color:#999999;text-transform:uppercase;} ul,ol{margin:0 0 9px 25px;} ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} @@ -107,6 +108,8 @@ textarea{height:auto;} .radio,.checkbox{padding-left:18px;} .radio input[type=radio],.checkbox input[type=checkbox]{float:left;margin-left:-18px;} .controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:6px;} +.radio.inline,.checkbox.inline{display:inline-block;} +.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;} input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px 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:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),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;} @@ -284,6 +287,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;} .navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;} .navbar .btn{margin-top:5px;} +.navbar-form{margin-bottom:0;} .navbar-search{position:relative;float:left;margin-top:6px;margin-bottom:0;}.navbar-search .search-query{padding:4px 9px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:1;color:#ffffff;color:rgba(255, 255, 255, 0.75);background-color:#444;background-color:rgba(255, 255, 255, 0.3);border:1px solid #111;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.navbar-search .search-query:-moz-placeholder{color:#eeeeee;} .navbar-search .search-query::-webkit-input-placeholder{color:#eeeeee;} .navbar-search .search-query:hover{color:#ffffff;background-color:#999999;background-color:rgba(255, 255, 255, 0.5);} @@ -340,13 +344,14 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .subnav li:last-child a{border-right:0;-webkit-border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;border-radius:0 6px 6px 0;} .subnav ul .active>a{color:#333333;background-color:#eee;} .side-nav{padding:9px 0;} -.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 16px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} -.side-nav .nav-label{font-size:11px;line-height:18px;color:#333333;text-transform:uppercase;} -.side-nav .nav-group{margin:0 -1px;list-style:none;} +.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 15px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);} +.side-nav .nav-label{font-size:11px;line-height:18px;color:#999999;text-transform:uppercase;} +.side-nav .nav-group{margin:0;list-style:none;} +.side-nav .nav-group+.nav-label{margin-top:9px;} .side-nav .nav-item{font-weight:bold;} .side-nav .nav-item i{vertical-align:-2px;} .side-nav .nav-item:hover{text-decoration:none;} -.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#aaaaaa;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa));background-image:-moz-linear-gradient(top, #cccccc, #aaaaaa);background-image:-ms-linear-gradient(top, #cccccc, #aaaaaa);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));background-image:-webkit-linear-gradient(top, #cccccc, #aaaaaa);background-image:-o-linear-gradient(top, #cccccc, #aaaaaa);background-image:linear-gradient(top, #cccccc, #aaaaaa);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);} +.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#999999;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));background-image:-moz-linear-gradient(top, #cccccc, #999999);background-image:-ms-linear-gradient(top, #cccccc, #999999);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999));background-image:-webkit-linear-gradient(top, #cccccc, #999999);background-image:-o-linear-gradient(top, #cccccc, #999999);background-image:linear-gradient(top, #cccccc, #999999);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);} .breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;} .breadcrumb .divider{padding:0 5px;color:#999999;} .breadcrumb .active a{color:#333333;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 6cffcbc207..579baad7d9 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -192,6 +192,75 @@ body > .navbar-fixed .brand:hover { } +/* Quickstart section for getting le code +-------------------------------------------------- */ +.getting-started { + background-color: #f5f5f5; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5)); + background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5); + background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5)); + background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5); + background-image: -o-linear-gradient(#f9f9f9, #f5f5f5); + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)"; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0); + background-image: linear-gradient(#f9f9f9, #f5f5f5); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.getting-started { + border-color: #eee; +} +.getting-started td { + width: 33%; + border-right: 1px solid #eee; +} +.getting-started td + td { + border-left: 1px solid #fff; +} +.getting-started td:last-child { + border-right: 0; +} +.quick-start { + padding: 17px 20px; +} +.quick-start h3, +.quick-start p { + line-height: 18px; + text-align: center; + margin-bottom: 9px; +} +.quick-start p { + color: #777; +} +.quick-start .current-version, +.quick-start .current-version a { + color: #999; +} +.quick-start form { + margin-bottom: 0; +} +.quick-start textarea { + display: block; + width: 100%; + height: auto; + margin-bottom: 0; + line-height: 21px; + white-space: nowrap; + overflow: hidden; + /* Makes inputs behave like true block-level elements */ + -webkit-box-sizing: border-box; /* Older Webkit */ + -moz-box-sizing: border-box; /* Older FF */ + -ms-box-sizing: border-box; /* IE8 */ + box-sizing: border-box; /* CSS3 spec*/ + /* Hacks for IE7 to make this work just okay enough to function */ + *width: 90%; + *height: 24px; +} + + /* Footer -------------------------------------------------- */ .footer { @@ -341,8 +410,10 @@ h2 + table { .example-sites img { max-width: 290px; } -.built-with { +.marketing-byline { margin: -18px 0 27px; + font-size: 18px; + font-weight: 300; color: #999; text-align: center; } diff --git a/docs/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css index 7ff618550a..e3bbf8b6cb 100644 --- a/docs/assets/js/google-code-prettify/prettify.css +++ b/docs/assets/js/google-code-prettify/prettify.css @@ -2,10 +2,10 @@ .lit { color: #195f91; } .pun, .opn, .clo { color: #93a1a1; } .fun { color: #dc322f; } -.str, .atv { color: #62C462; } -.kwd, .linenums .tag { color: #049CD9; } -.typ, .atn, .dec, .var { color: #EE5F5B; } -.pln { color: #93a1a1; } +.str, .atv { color: #D14; } +.kwd, .linenums .tag { color: #1e347b; } +.typ, .atn, .dec, .var { color: teal; } +.pln { color: #48484c; } pre.prettyprint { background-color: #fefbf3; padding: 9px; @@ -17,8 +17,14 @@ pre.prettyprint { background-color: #252525; } +pre.prettyprint { + padding: 8px; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} + /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */ -ol.linenums li { color: #444; line-height: 18px; } +ol.linenums li { color: #bebec5; line-height: 18px; 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 diff --git a/docs/base-css.html b/docs/base-css.html index 399a414637..cbdf5ea194 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1044,6 +1044,20 @@

Here's more help text

+
+ +
+ + + +
+
diff --git a/docs/components.html b/docs/components.html index 5c25a98a40..5bafc5a60a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -227,27 +227,27 @@ ================================================== -->
-

Side nav

+

Side nav for lists of links

+

Examples

+

Side navs can be just links, links with headings, and links with icons.

-
Your account
-
-
-
-
Your account
+
Your account
+
+
+

Why use it

+

+
+
+

Markup

+

Marking up a side nav is at the core just writing an unordered list of links.

+
+  <ul class="nav-group">
+    <li class="active">
+      <a class="nav-item" href="#">Home</a>
+    </li>
+    <li><a class="nav-item" href="#">Library</a></li>
+    <li><a class="nav-item" href="#">Help</a></li>
+  </ul>
+
+

Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.

+
+  <h6 class="nav-label"></h6>
+  <ul class="nav-group">
+    ...
+  </ul>
+  <h6 class="nav-label"></h6>
+  <ul class="nav-group">
+    ...
+  </ul>
+
+
@@ -267,10 +295,12 @@

Navbar

-
+

Static navbar example

+

An example of a static (not fixed to the top) navbar with project name, navigation, and search form.

+
- Project Name + Project name
-
-

What is it

-

Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.

+
+

Navbar scaffolding

+

The navbar requires only a few divs to structure it well for static or fixed display.

+
+<div class="navbar navbar-static">
+  <div class="navbar-inner">
+    <div class="container" style="width: auto;">
+      ...
+    </div>
+  </div>
+</div>
+
+

To make the navbar fixed, swamp the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

+
+<div class="navbar navbar-fixed">
+  ...
+</div>
+
+
+

Brand name

+

A simple link to show your brand or project name only requires an anchor tag.

+
+<a class="brand" href="#">
+  Project name
+</a>
+
+
+

Search form

+

Search forms receive custom styles in the navbar with the .navbar-search class. Include .pull-left or .pull-right on the form to align it.

+
+<form class="navbar-search">
+  <input type="text" class="search-query pull-left" placeholder="Search">
+</form>
+
-

Customizable

-

All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.

-
-
-

Dropdowns included

-

As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <li> tags also support .active for showing current page selection.

+

Nav links

+

Nav items are simple to add via unordered lists.

+
+<ul class="nav">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">Link</a></li>
+  <li><a href="#">Link</a></li>
+</ul>
+
+

Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.

+
+<ul class="nav">
+  <li class="dropdown">
+    <a href="#"
+          class="dropdown-toggle"
+          data-toggle="dropdown">
+          Account
+    </a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+</ul>
+
-

Note: When using the navbar on any page, be sure to account for the overlap it causes by adding padding-top: 40px; to your <body>.

@@ -507,34 +587,39 @@
-
-

Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.

-
-
+
+

Why use them

+

Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.

+ +

Examples

+

A single example shown as it might be displayed across multiple pages.

  • Home
  • Home /
    • -
  • Middle page
    • +
  • Library
- +
+
+

Markup

+

HTML is your standard unordered list with links.

 <ul class="breadcrumb">
-  <li><a href="#">Home</a> <span class="divider">/</span></li>
-  <li><a href="#">Middle page</a> <span class="divider">/</span></li>
-  <li><a href="#">Another one</a> <span class="divider">/</span></li>
-  <li class="active">You are here</li>
+  <li>
+    <a href="#">Home</a> <span class="divider">/</span>
+  </li>
+  <li>
+    <a href="#">Library</a> <span class="divider">/</span>
+  </li>
+  <li class="active">
+    <a href="#">Data</a>
+  </li>
 </ul>
@@ -545,13 +630,14 @@ +================================================== + +COMMENTED OUT AND NOT SUPPORTED AT THIS TIME. +

Step nav

- -

Placeholder for now!

@@ -571,8 +657,8 @@
-
+--> @@ -682,6 +768,9 @@
+ +
+
diff --git a/docs/index.html b/docs/index.html index 0d340fa1ab..231ed2066b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -106,8 +106,8 @@
-

Built with Bootstrap

-

For even more sites built with Bootstrap, visit the unofficial Tumblr.

+

Built with Bootstrap.

+

For even more sites built with Bootstrap, visit the unofficial Tumblr.

-

Designed for everyone, everywhere

+

Designed for everyone, everywhere.

@@ -200,8 +200,40 @@

Brought to you by an experienced engineer and designer.

-
+ + +

Get started in no time.

+

Built for any skill level, Bootstrap fits your workflow and development process.

+ + + + + + + + +
+

Hotlink the CSS

+

For the quickest and easiest start, just copy this snippet into your webpage.

+
+ +
+ 		+

Use it with LESS

+

A fan of using LESS? No problem, just clone the repo and add these lines:

+
+ +
+ 		+

Fork on GitHub

+

Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.

+

Bootstrap on GitHub »

+

Currently v2.0.0

+
+
diff --git a/docs/less.html b/docs/less.html index 7d3efd296c..05398e9665 100644 --- a/docs/less.html +++ b/docs/less.html @@ -403,8 +403,8 @@ Node with makefile -

Install the less command line compiler with npm by running the following command:

- 
$ npm install lessc
+

Install the LESS command line compiler with npm by running the following command:

+ 
$ npm install less

Once installed just run make from the root of your bootstrap directory and you're all set.

Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

@@ -422,7 +422,7 @@ Command line -

If you already have the less command line tool installed, simply run the following command:

+

Install the LESS command line tool via Node and run the following command:

$ lessc ./lib/bootstrap.less > bootstrap.css

Be sure to include --compress in that command if you're trying to save some bytes!

diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 87394006bf..bf42d44687 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -395,7 +395,6 @@
Side nav
Navbar
Tabs and pills
-
Step nav
Pagination
Alerts and errors
Modals
diff --git a/docs/upgrading.html b/docs/upgrading.html index 7be1fd7089..c84cba1232 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -92,6 +92,9 @@
  • Typography
    • Right-aligned option for blockquotes if float: right;
      • +
    • h4 elements were dropped from 16px to 14px with a default line-height of 18px
      • +
    • h5 elements were dropped from 14px to 12px
      • +
    • h6 elements were dropped from 13px to 11px
  • Buttons diff --git a/lib/forms.less b/lib/forms.less index 938983536e..8b85d240af 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -137,6 +137,16 @@ textarea { padding-top: 6px; // has to be padding because margin collaspes } +// Radios and checkboxes on same line +.radio.inline, +.checkbox.inline { + display: inline-block; +} +.radio.inline + .radio.inline, +.checkbox.inline + .checkbox.inline { + margin-left: 10px; +} + // FOCUS STATE diff --git a/lib/navbar.less b/lib/navbar.less index a96aa941c1..edc19c641c 100644 --- a/lib/navbar.less +++ b/lib/navbar.less @@ -53,6 +53,11 @@ } } +// Navbar forms +.navbar-form { + margin-bottom: 0; // remove default bottom margin +} + // Navbar search .navbar-search { position: relative; diff --git a/lib/sidenav.less b/lib/sidenav.less index afc5ea1ddf..51f97f44d2 100644 --- a/lib/sidenav.less +++ b/lib/sidenav.less @@ -8,19 +8,22 @@ .side-nav .nav-label, .side-nav .nav-item { display: block; - padding: 3px 16px; + padding: 3px 15px; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .side-nav .nav-label { font-size: 11px; line-height: @baseLineHeight; - color: @grayDark; + color: @grayLight; text-transform: uppercase; } .side-nav .nav-group { - margin: 0 -1px; + margin: 0; // clear default ul margins list-style: none; } +.side-nav .nav-group + .nav-label { + margin-top: 9px; +} .side-nav .nav-item { font-weight: bold; @@ -34,7 +37,7 @@ .side-nav .active .nav-item { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); - #gradient > .vertical(#ccc, #aaa); + #gradient > .vertical(#ccc, #999); @shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05); .box-shadow(@shadow); } \ No newline at end of file diff --git a/lib/type.less b/lib/type.less index 59dae717fb..4aa6423586 100644 --- a/lib/type.less +++ b/lib/type.less @@ -50,20 +50,20 @@ h3 { font-size: 14px; } } +h4, h5, h6 { + line-height: @baseLineHeight; +} h4 { - font-size: 16px; - line-height: @baseLineHeight * 2; + font-size: 14px; small { font-size: 12px; } } h5 { - font-size: 14px; - line-height: @baseLineHeight; + font-size: 12px; } h6 { - font-size: 13px; - line-height: @baseLineHeight; + font-size: 11px; color: @grayLight; text-transform: uppercase; }