]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
front page docs updated to include old getting started section, update code styles...
authorMark Otto <markdotto@gmail.com>
Sat, 7 Jan 2012 07:59:22 +0000 (23:59 -0800)
committerMark Otto <markdotto@gmail.com>
Sat, 7 Jan 2012 07:59:22 +0000 (23:59 -0800)
14 files changed:
bootstrap.css
bootstrap.min.css
docs/assets/css/docs.css
docs/assets/js/google-code-prettify/prettify.css
docs/base-css.html
docs/components.html
docs/index.html
docs/less.html
docs/scaffolding.html
docs/upgrading.html
lib/forms.less
lib/navbar.less
lib/sidenav.less
lib/type.less

index 4d8edd4fbf8b52460477cc3b13289c8081c74482..85ed7961a37888db025e2dcc4f91508b6bcbfa7a 100644 (file)
@@ -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);
index c93f333ee61018430a37e91b8d79910bc25860e0..16f9fb76bd09acc3c56201d437211b39c8929874 100644 (file)
@@ -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;}
index 6cffcbc207c63d11ba55c6a345ec086a3c04b149..579baad7d93184f81867890133ab91d22b09092d 100644 (file)
@@ -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;
 }
index 7ff618550a0d5c207ac15e443b385d7e35a54520..e3bbf8b6cb5fa1c7c8e10083905680cd58cda4f3 100644 (file)
@@ -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
index 399a4146371ba7661b6966921e10b6301fbcfd9c..cbdf5ea19452c2ecac384e9ad3ffe73296f1d9a7 100644 (file)
             <p class="help-block">Here's more help text</p>
           </div>
         </fieldset>
+        <fieldset class="control-group">
+          <label class="control-label" for="inlineCheckboxes">Inline checkboxes</label>
+          <div class="controls">
+            <label class="checkbox inline">
+              <input type="checkbox" name="inlineCheckbox1" value="option1"> 1
+            </label>
+            <label class="checkbox inline">
+              <input type="checkbox" name="inlineCheckbox1" value="option1"> 2
+            </label>
+            <label class="checkbox inline">
+              <input type="checkbox" name="inlineCheckbox1" value="option1"> 3
+            </label>
+          </div>
+        </fieldset>
         <fieldset class="control-group">
           <label class="control-label" for="optionsCheckboxes">Checkboxes</label>
           <div class="controls">
index 5c25a98a40aeb462c213e39441d7d320a5cf2932..5bafc5a60a3dd294ab09053956563de03387b36d 100644 (file)
 ================================================== -->
 <section id="sidenav">
   <div class="page-header">
-    <h1>Side nav <small></small></h1>
+    <h1>Side nav <small>for lists of links</small></h1>
   </div>
 
   <div class="row">
     <div class="span3">
+      <h3>Examples</h3>
+      <p>Side navs can be just links, links with headings, and links with icons.</p>
       <div class="well side-nav">
-        <h6 class="nav-label">Your account</h6>
         <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>
+        <h6 class="nav-label">Your account</h6>
+        <ul class="nav-group">
           <li><a class="nav-item" href="#">Profile</a></li>
           <li><a class="nav-item" href="#">Settings</a></li>
-          <li><a class="nav-item" href="#">Help</a></li>
         </ul>
-      </div>
-    </div>
-    <div class="span3">
-      <div class="well side-nav">
         <h6 class="nav-label">Your account</h6>
         <ul class="nav-group">
-          <li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
+          <li><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
           <li><a class="nav-item" href="#"><i class="book"></i> Library</a></li>
           <li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li>
           <li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li>
         </ul>
       </div>
     </div>
+    <div class="span3">
+      <h3>Why use it</h3>
+      <p></p>
+    </div>
+    <div class="span6">
+      <h3>Markup</h3>
+      <p>Marking up a side nav is at the core just writing an unordered list of links.</p>
+<pre class="prettyprint linenums">
+  &lt;ul class="nav-group"&gt;
+    &lt;li class="active"&gt;
+      &lt;a class="nav-item" href="#"&gt;Home&lt;/a&gt;
+    &lt;/li&gt;
+    &lt;li&gt;&lt;a class="nav-item" href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a class="nav-item" href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+</pre>
+      <p>Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.</p>
+<pre class="prettyprint linenums">
+  &lt;h6 class="nav-label"&gt;&lt;/h6&gt;
+  &lt;ul class="nav-group"&gt;
+    ...
+  &lt;/ul&gt;
+  &lt;h6 class="nav-label"&gt;&lt;/h6&gt;
+  &lt;ul class="nav-group"&gt;
+    ...
+  &lt;/ul&gt;
+</pre>
+    </div>
   </div>
   
 </section>
   <div class="page-header">
     <h1>Navbar</h1>
   </div>
-  <div class="navbar navbar-static" >
+  <h2>Static navbar example</h2>
+  <p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
+  <div class="navbar navbar-static">
     <div class="navbar-inner">
       <div class="container" style="width: auto;">
-        <a class="brand" href="#">Project Name</a>
+        <a class="brand" href="#">Project name</a>
         <ul class="nav">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">Link</a></li>
   </div><!-- /navbar -->
 
   <div class="row">
-    <div class="span4">
-      <h3>What is it</h3>
-      <p>Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
-    </div>
-    <div class="span4">
-      <h3>Customizable</h3>
-      <p>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&mdash;or any combination of that.</p>
+    <div class="span8">
+      <h3>Navbar scaffolding</h3>
+      <p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
+<pre class="prettyprint linenums">
+&lt;div class="navbar navbar-static"&gt;
+  &lt;div class="navbar-inner"&gt;
+    &lt;div class="container" style="width: auto;"&gt;
+      ...
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+      <p>To make the navbar fixed, swamp 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>&lt;body&gt;</code>.</p>
+<pre class="prettyprint linenums">
+&lt;div class="navbar navbar-fixed"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+      <br>
+      <h3>Brand name</h3>
+      <p>A simple link to show your brand or project name only requires an anchor tag.</p>
+<pre class="prettyprint linenums">
+&lt;a class="brand" href="#"&gt;
+  Project name
+&lt;/a&gt;
+</pre>
+      <br>
+      <h3>Search form</h3>
+      <p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
+<pre class="prettyprint linenums">
+&lt;form class="navbar-search"&gt;
+  &lt;input type="text" class="search-query pull-left" placeholder="Search"&gt;
+&lt;/form&gt;
+</pre>
     </div>
     <div class="span4">
-      <h3>Dropdowns included</h3>
-      <p>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 <code>&lt;li&gt;</code> tags also support <code>.active</code> for showing current page selection.</p>
+      <h3>Nav links</h3>
+      <p>Nav items are simple to add via unordered lists.</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav"&gt;
+  &lt;li class="active"&gt;
+    &lt;a href="#">Home&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+      <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdowns">our javascript plugin</a>.</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav"&gt;
+  &lt;li class="dropdown"&gt;
+    &lt;a href="#"
+          class="dropdown-toggle"
+          data-toggle="dropdown">
+          Account
+    &lt;/a&gt;
+    &lt;ul class="dropdown-menu"&gt;
+      ...
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
     </div>
   </div>
-  <p><strong>Note:</strong> When using the navbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
 
 </section>
 
   </div>
 
   <div class="row">
-    <div class="span3">
-      <p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
-    </div>
-    <div class="span9">
+    <div class="span6">
+      <h3>Why use them</h3>
+      <p>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.</p>
+
+      <h3>Examples</h3>
+      <p>A single example shown as it might be displayed across multiple pages.</p>
       <ul class="breadcrumb">
         <li class="active">Home</li>
       </ul>
       <ul class="breadcrumb">
         <li><a href="#">Home</a> <span class="divider">/</span></li>
-        <li class="active">Middle page</li>
-      </ul>
-      <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 class="active">Another one</li>
+        <li class="active">Library</li>
       </ul>
       <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="#">Library</a> <span class="divider">/</span></li>
+        <li class="active">Data</li>
       </ul>
+    </div>
+    <div class="span6">
+      <h3>Markup</h3>
+      <p>HTML is your standard unordered list with links.</p>
 <pre class="prettyprint linenums">
 &lt;ul class="breadcrumb"&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Middle page&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Another one&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
-  &lt;li class="active"&gt;You are here&lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href="#"&gt;Home&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;a href="#"&gt;Library&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li class="active"&gt;
+    &lt;a href="#"&gt;Data&lt;/a&gt;
+  &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
     </div>
 
 
 <!-- Step nav
-================================================== -->
+==================================================
+
+COMMENTED OUT AND NOT SUPPORTED AT THIS TIME.
+
 <section id="stepNav">
   <div class="page-header">
     <h1>Step nav <small></small></h1>
   </div>
-
-  <!-- Step nav -->
   <div class="row">
     <div class="span3">
       <p>Placeholder for now!</p>
       <br>
     </div>
   </div>
-
 </section>
+-->
 
 
 
 </pre>
     </div>
   </div><!-- /row -->
+  
+  <br>
+
   <!-- Block messages -->
   <div class="row">
     <div class="span3">
index 0d340fa1ab6eeae313ae88e27049e67960d57d83..231ed2066b3b6d7640d3a3dd2b8e837e0f094f56 100644 (file)
 
 
         <div class="marketing">
-          <h1>Built with Bootstrap</h1>
-          <p class="built-with">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a>.</p>
+          <h1>Built with Bootstrap.</h1>
+          <p class="marketing-byline">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a>.</p>
           <ul class="thumbnails example-sites">
             <li class="span4">
               <a class="thumbnail" href="http://kippt.com/" target="_blank">
             </li>
           </ul>
 
-          <h1>Designed for everyone, everywhere</h1>
+          <h1>Designed for everyone, everywhere.</h1>
           <div class="row">
             <div class="span4">
               <img class="icon" src="assets/img/glyphicons/glyphicons_042_group.png">
               <p>Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.</p>
             </div>
           </div><!--/row-->
-        </div>
 
+
+          <!-- Quickstart options
+          ================================================== -->
+          <h1>Get started in no time.</h1>
+          <p class="marketing-byline">Built for any skill level, Bootstrap fits your workflow and development process.</p>
+          <table class="bordered-table getting-started">
+            <tbody>
+              <tr>
+                <td class="quick-start">
+                  <h3>Hotlink the CSS</h3>
+                  <p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
+                  <form>
+                    <textarea class="copy-code" rows="1">&lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
+                  </form>
+                </td>
+                <td class="quick-start">
+                  <h3>Use it with LESS</h3>
+                  <p>A fan of using LESS? No problem, just clone the repo and add these lines:</p>
+                  <form>
+                    <textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
+      &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea>
+                  </form>
+                </td>
+                <td class="quick-start">
+                  <h3>Fork on GitHub</h3>
+                  <p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p>
+                  <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub &raquo;</a></p>
+                  <p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div><!-- /.marketing -->
       </div><!-- /#overview -->
 
 
index 7d3efd296c3cf5b2e897fe61ab6bca00bcb916b1..05398e96655f692133353c9604cf309da15afd7b 100644 (file)
         <tr>
           <td>Node with makefile</td>
           <td>
-            <p>Install the less command line compiler with npm by running the following command:</p>
-            <pre>$ npm install lessc</pre>
+            <p>Install the LESS command line compiler with npm by running the following command:</p>
+            <pre>$ npm install less</pre>
             <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
             <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
           </td>
         <tr>
           <td>Command line</td>
           <td>
-            <p>If you already have the less command line tool installed, simply run the following command:</p>
+            <p>Install the LESS command line tool via Node and run the following command:</p>
               <pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre>
             <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
           </td>
index 87394006bf0597342f21c3303a18e22213d4934b..bf42d4468763d6b93c1d68bfe4c887a7cacc159d 100644 (file)
             <dd><a href="./components.html#sidenav">Side nav</a></dd>
             <dd><a href="./components.html#navbar">Navbar</a></dd>
             <dd><a href="./components.html#tabspills">Tabs and pills</a></dd>
-            <dd><a href="./components.html#stepnav">Step nav</a></dd>
             <dd><a href="./components.html#pagination">Pagination</a></dd>
             <dd><a href="./components.html#alerts">Alerts and errors</a></dd>
             <dd><a href="./components.html#modals">Modals</a></dd>
index 7be1fd7089c3deb60cf21f375ff68b3013099e17..c84cba1232f812c757fb675a2ebf8ba23152534e 100644 (file)
@@ -92,6 +92,9 @@
   <li>Typography
     <ul>
       <li>Right-aligned option for blockquotes if float: right;</li>
+      <li><code>h4</code> elements were dropped from 16px to 14px with a default <code>line-height</code> of 18px</li>
+      <li><code>h5</code> elements were dropped from 14px to 12px</li>
+      <li><code>h6</code> elements were dropped from 13px to 11px</li>
     </ul>
   </li>
   <li>Buttons
index 938983536e90451c0b3b2fe86125167787d72bae..8b85d240afc4889fc0ecc7904e99eccda3f30e49 100644 (file)
@@ -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
index a96aa941c1932a542b01bee54ae1b00859d8b090..edc19c641c6ddc655bc22d965827eb4b95f17e92 100644 (file)
   }
 }
 
+// Navbar forms
+.navbar-form {
+  margin-bottom: 0; // remove default bottom margin
+}
+
 // Navbar search
 .navbar-search {
   position: relative;
index afc5ea1ddfbd4c7c29e0dcca3b8891ba90b61c2e..51f97f44d27c392ace3ddb1046611c218899ba3f 100644 (file)
@@ -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
index 59dae717fb9569d8bd084017f465306b3370422c..4aa6423586c067aa1f66e8310f59b40b1d735f10 100644 (file)
@@ -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;
 }