From 121b62d54e6adb5836a1e09834056cf193407bbe Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Sep 2011 10:08:24 -0700 Subject: [PATCH] updates to docs to include more example html, include links to javascript docs where necessary --- docs/assets/css/docs.css | 8 ++-- docs/index.html | 88 +++++++++++++++++++++++++++++++++++----- 2 files changed, 82 insertions(+), 14 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index d30b932cd4..37e18c8e44 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -213,7 +213,7 @@ section > .row { box-shadow: 0 1px 2px rgba(0,0,0,.075); } .mini-layout { - height: 340px; + height: 240px; margin-bottom: 20px; padding: 9px; } @@ -225,8 +225,8 @@ section > .row { .mini-layout .mini-layout-body { background-color: #dceaf4; margin: 0 auto; - width: 340px; - height: 340px; + width: 240px; + height: 240px; } .mini-layout.fluid .mini-layout-sidebar, .mini-layout.fluid .mini-layout-header, @@ -236,7 +236,7 @@ section > .row { .mini-layout.fluid .mini-layout-sidebar { background-color: #bbd8e9; width: 90px; - height: 340px; + height: 240px; } .mini-layout.fluid .mini-layout-body { width: 300px; diff --git a/docs/index.html b/docs/index.html index f97c3cb98d..41bf39b70e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -309,6 +309,21 @@ +
+<div class="row">
+  <div class="span12">
+    Level 1 of column
+    <div class="row">
+      <div class="span6">
+        Level 2
+      </div>
+      <div class="span6">
+        Level 2
+      </div>
+    </div>
+  </div>
+</div>
+
@@ -356,7 +371,7 @@

Now to customize

Modifying the grid means changing the three @grid-* variables and recompiling the Less files.

Bootstrap comes equipped to handle a grid system with up to 24 columns; the default is just 16. Here's how your grid variables would look customized to a 24-column grid.

- 
@gridColumns:       24;
+      
@gridColumns:       24;
 @gridColumnWidth:   20px;
 @gridGutterWidth:   20px;

       
Once recompiled, you'll be set!

@@ -504,6 +519,12 @@
         
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

         Dr. Julius Hibbert
       
+
+<blockquote>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+  <small>Dr. Julius Hibbert</small>
+</blockquote>
+

     
   
 
@@ -771,6 +792,22 @@
           
         
       
+      
Coding them

+      
Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.

+
+<ul class="media-grid">
+  <li>
+    <a href="#">
+      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+    </a>
+  </li>
+  <li>
+    <a href="#">
+      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+    </a>
+  </li>
+</ul>
+

     
   
 
@@ -1386,6 +1423,14 @@
         
  • Another one /
    • 
         
  • You are here
    • 
       
+
    +<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>
+</ul>
+
    
     
   
 
@@ -1404,7 +1449,7 @@
           
  • 3
    • 
           
  • 4
    • 
           
  • 5
    • 
-          
+          
         
       
       
       
 
    @@ -1467,8 +1512,9 @@
   
    
     
    
       
    Basic alerts
    
-      
    div.alert-message
    
+      
    .alert-message
    
       
    One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.
    
+      
    Get the javascript »
    
     
    
     
    
       
    
@@ -1487,14 +1533,23 @@
         ×
         
    Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.
    
       
    
+
+      
    Example code
    
+
    +<div class="alert-message warning">
+  <a class="close" href="#">×</a>
+  <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
+</div>
+
    
     
    
   
    
   
   
    
     
    
       
    Block messages
    
-      
    div.alert-message.block-message
    
+      
    .alert-message.block-message
    
       
    For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.
    
+      
    Get the javascript »
    
     
    
     
    
       
    
@@ -1530,6 +1585,17 @@
           Take this action Or do this
         
    
       
    
+
+      
    Example code
    
+
    +<div class="alert-message block-message warning">
+  <a class="close" href="#">×</a>
+  <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+  <div class="alert-actions">
+    <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+  </div>
+</div>
+
    
     
    
   
 
@@ -1545,6 +1611,7 @@
     
    
       
    Modals
    
       
    Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.
    
+      
    Get the javascript »
    
     
    
     
    
       
    
@@ -1571,6 +1638,7 @@
     
    
       
    Tooltips
    
       
    Twipsies are super useful for aiding a confused user and pointing them in the right direction.
    
+      
    Get the javascript »
    
     
    
     
    
       
    
@@ -1588,6 +1656,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita
     
    
       
    Popovers
    
       
    Use popovers to provide subtextual information to a page without affecting layout.
    
+      
    Get the javascript »
    
     
    
     
    
       
    
@@ -1614,14 +1683,13 @@ Lorem ipsum dolar sit amet illo error ipsum verita
 
  
    
    
    
-     
    Using Javascript with Bootstrap An index of plugins to get you started
    
+     
    Using javascript with Bootstrap An index of plugins to get you started
    
    
    
    
    
      
    
        
    Getting started
    
        
    Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!
    
-       
    
-       
    Skip to Bootstrap plugins »
    
+       
    View javascript docs »
    
      
    
      
    
       
    What's included
    
@@ -1805,7 +1873,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita
           Javascript
           
             
    Download the latest Less.js and include the path to it (and Bootstrap) in the head.
    
-
    +
     <link rel="stylesheet/less" href="/path/to/bootstrap.less">
 <script src="/path/to/less.js"></script>