From ec8619a9808b9b6e721334af8e6b5248ccbea8b5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Sep 2011 17:21:43 -0700 Subject: update docs to remove old stuff, update to all new classes; no more backwards compatibility --- docs/index.html | 236 ++++++++++++++++++++++++++++++-------------------------- 1 file changed, 128 insertions(+), 108 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index f99b756fe..5c5162471 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,7 +6,7 @@ - + @@ -37,22 +37,42 @@ -
+
Bootstrap @@ -718,102 +738,6 @@ - -
-
-

Media Displaying images and videos

-
- -
-
-

Media grid

-

Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.

-
-
-

Example thumbnails

-

Thumbnails in the .media-grid can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the .span2, .span4, and .span6 column sizes.

-

Large

- -

Medium

- -

Small

- -

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>
-
-
-
-
- - -
@@ -1295,6 +1219,102 @@ + +
+
+

Media Displaying images and videos

+
+ +
+
+

Media grid

+

Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.

+
+
+

Example thumbnails

+

Thumbnails in the .media-grid can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the .span2, .span4, and .span6 column sizes.

+

Large

+ +

Medium

+ +

Small

+ +

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>
+
+
+
+
+ + +
@@ -1378,6 +1245,7 @@

Tabs and pills

Create simple secondary navigation with a <ul>. Swap between tabs or pills by adding the appropriate class.

Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.

+

Get the javascript »

    @@ -1929,6 +1797,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita +
-- cgit v1.2.3 From ecdba931ec4a6eced099026c1aeab503567a4e0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Sep 2011 01:41:03 -0700 Subject: remove that test gradient --- docs/index.html | 3 --- 1 file changed, 3 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 75a18ea40..d24bb1afd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1796,9 +1796,6 @@ Lorem ipsum dolar sit amet illo error ipsum verita - -
-
-- cgit v1.2.3 From 0a6d8c30db0600ab8d33e14ead0ff120cd03ac9d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Sep 2011 02:21:02 -0700 Subject: adding button groups and toolbars like a boss --- docs/index.html | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 80 insertions(+), 5 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index d24bb1afd..137144991 100644 --- a/docs/index.html +++ b/docs/index.html @@ -898,7 +898,7 @@

-
+

Search form

@@ -911,7 +911,7 @@
- +

Inline form

@@ -928,7 +928,7 @@
- +

Horizontal form

@@ -1032,7 +1032,7 @@
-
+

Vertical form

@@ -1075,7 +1075,82 @@
-
+ + +
+
+

Buttons

+

As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.

+

All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue .primary class, a light-blue .info class, a green .success class, and a red .danger class.

+
+
+

Example buttons

+

Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:

+
+      +
+

Alternate sizes

+

Fancy larger or smaller buttons? Have at it!

+
+ Primary action + Action +
+
+ Primary action + Action +
+

Disabled state

+

For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s .disabled for links and :disabled for <button> elements.

+

Links

+
+ Primary action + Action +
+

Buttons

+
+   +
+
+
+ +
+
+

Button groups

+
+
+

Example

+
+
+ Left + Middle + Right +
+
+
+
+
+ 1 + 2 + 3 + 4 + 5 +
+
+ 6 + 7 + 8 +
+
+ 9 +
+
+ 10 +
+
+
+
+
+ -- cgit v1.2.3 From f61fe3c4746ec09ff64756797fe6314be5f53b30 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2011 21:13:26 -0700 Subject: refactor fluid layout to be more specific to not interfere with modal content while adding right sidebar option --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 137144991..194111b78 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1278,7 +1278,7 @@ -
+
- +
-

Unstyled <.unstyled>

+

Unstyled <ul.unstyled>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • @@ -570,120 +611,96 @@ -
    -
    -

    Code

    -

    - <code> - <pre> -

    -

    Pimp your code in style with two simple tags. For even more awesomeness through javascript, drop in Google's code prettify library and you're set.

    -
    -
    -

    Presenting code

    -

    Code, blocks of or just snippets inline, can be displayed with style just by wrapping in the right tag. For blocks of code spanning multiple lines, use the <pre> element. For inline code, use the <code> element.

    - - - - - - - - - - - - - - - + + +
    ElementResult
    <code>In a line of text like this, your wrapped code will look like this <html> element.
    <pre> + +

    Code Inline and block

    + + + + + + + + + + + + + + + - - - - + + + + - - -
    ElementResult
    <code>In a line of text like this, your wrapped code will look like this <html> element.
    <pre> 
    <div>
   <h1>Heading</h1>
   <p>Something right here...</p>
 </div>
    -

    Note: Be sure to keep code within pre tags as close to the left as possible; it will render all tabs.

    -
    <pre class="prettyprint"> -

    Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.

    +

    Note: Be sure to keep code within pre tags as close to the left as possible; it will render all tabs.

    +
    <pre class="prettyprint"> +

    Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.

    <div>
   <h1>Heading</h1>
   <p>Something right here...</p>
 </div>
    -

    Download google-code-prettify and view the readme for how to use.

    -
    - - +

    Download google-code-prettify and view the readme for how to use.

    +
    -
    -
    -

    Inline labels

    -

    - <span class="label"> -

    -

    Call attention to or flag any phrase in your body text.

    -
    -
    -

    Label anything

    -

    Ever needed one of those fancy New! or Important flags when writing code? Well, now you have them. Here's what's included by default:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    LabelResult
    - <span class="label">Default</span> - - Default -
    - <span class="label success">New</span> - - New -
    - <span class="label warning">Warning</span> - - Warning -
    - <span class="label important">Important</span> - - Important -
    - <span class="label notice">Notice</span> - - Notice -
    -
    -
    +

    Inline labels for special attention

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    LabelsMarkup
    + Default + + <span class="label">Default</span> +
    + New + + <span class="label success">New</span> +
    + Warning + + <span class="label warning">Warning</span> +
    + Important + + <span class="label important">Important</span> +
    + Notice + + <span class="label notice">Notice</span> +
    -- cgit v1.2.3 From b91d210a3cdb29d022f20646ed61e663ceea18dd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 14:43:43 -0700 Subject: overhauled tables section of docs to minize copy and emphasize code --- docs/index.html | 279 ++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 178 insertions(+), 101 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 2e0036bb0..68cdd4a2c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -638,10 +638,14 @@ <pre class="prettyprint"> -

    Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.

    +

    Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.

    <div>
   <h1>Heading</h1>
   <p>Something right here...</p>
+</div>
    +
    <div>
+  <h1>Heading</h1>
+  <p>Something right here...</p>
 </div>

    Download google-code-prettify and view the readme for how to use.

    @@ -712,130 +716,204 @@

    Tables For, you guessed it, tabular data

    - + +

    Table markup

    -
    -

    Building tables

    -

    - <table> - <thead> - <tbody> - <tr> - <th> - <td> - <colspan> - <caption> -

    -

    Tables are great—for a lot of things. Great tables, however, need a bit of markup love to be useful, scalable, and readable (at the code level). Here are a few tips to help.

    -

    Always wrap your column headers in a <thead> such that hierarchy is <thead> > <tr> > <th>.

    -

    Similar to the column headers, all your table’s body content should be wrapped in a <tbody> so your hierarchy is <tbody> > <tr> > <td>.

    -
    -
    -

    Example: Default table styles

    -

    All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.

    - +
    +
    - - - - + + - - - - + + - - - - + + - - - - + + - -
    #First NameLast NameLanguageTagDescription
    1SomeOneEnglish + <table> + + Wrapping element for displaying data in a tabular format +
    2JoeSixpackEnglish + <thead> + + Container element for table header rows (<tr>) to label table columns +
    3StuDentCode + <tbody> + + Container element for table rows (<tr>) in the body of the table +
    -
    -<table>
-  ...
-</table>
    -

    Example: Zebra-striped

    -

    Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class.

    - - - - - - + + - - - - - - + + - - - - + + - - - - + +
    #First NameLast NameLanguage + <tr> + + Container element for a set of table cells (<td> or <th>) that appears on a single row +
    1SomeOneEnglish + <td> + + Default table cell +
    2JoeSixpackEnglish + <th> + + Special table cell for column (or row, depending on scope and placement) labels
    + Must be used within a <thead> +
    3StuDentCode + <caption> + + Description or summary of what the table holds, especially useful for screen readers +
    -

    Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.

    +
    +
    +
    +<table>
+  <thead>
+    <tr>
+      <th>...</th>
+      <th>...</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>...</td>
+      <td>...</td>
+    </tr>
+  </tbody>
+</table>
+
    +
    +
    + +

    Example tables

    +

    1. Default table styles

    +

    All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #First NameLast NameLanguage
    1SomeOneEnglish
    2JoeSixpackEnglish
    3StuDentCode
    +
    +<table>
+  ...
+</table>
    +

    2. Zebra-striped

    +

    Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #First NameLast NameLanguage
    1SomeOneEnglish
    2JoeSixpackEnglish
    3StuDentCode
    +

    Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.

     <table class="zebra-striped">
 ...
 </table>
    -

    Example: Zebra-striped w/ TableSorter.js

    -

    Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #First NameLast NameLanguage
    1YourOneEnglish
    2JoeSixpackEnglish
    3StuDentCode
    +

    3. Zebra-striped w/ TableSorter.js

    +

    Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #First NameLast NameLanguage
    1YourOneEnglish
    2JoeSixpackEnglish
    3StuDentCode
     <script src="js/jquery/jquery.tablesorter.min.js"></script>
 <script >
@@ -846,8 +924,7 @@
 <table class="zebra-striped">
   ...
 </table>
    -
    -
    + -- cgit v1.2.3 From ae5c5e10635049c65d73454ca9486539bdf324d4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 20:44:52 -0700 Subject: update docs to change topbar to navbar --- docs/index.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 68cdd4a2c..7fe5ce1ca 100644 --- a/docs/index.html +++ b/docs/index.html @@ -25,7 +25,7 @@ -
    @@ -1308,7 +1308,7 @@

    Navigation

    -

    Fixed topbar

    +

    Fixed navbar

    @@ -1343,24 +1343,24 @@
- - + +

What is it

-

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

+

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

Customizable

-

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

+

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.

-

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

+

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>.


@@ -1875,11 +1875,11 @@ Lorem ipsum dolar sit amet illo error ipsum verita bootstrap-dropdown.js - This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations. + This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations. bootstrap-scrollspy.js - The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar. + The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar. bootstrap-tabs.js -- cgit v1.2.3 From 369b9720c6090985c678076eebb59c080c0ed27c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 23:45:35 -0700 Subject: adding responsive stuff to docs to stub that out, updated type to make ul and ol margins match p tags --- docs/index.html | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 7fe5ce1ca..aafea7662 100644 --- a/docs/index.html +++ b/docs/index.html @@ -399,6 +399,86 @@ + + +
+
+

Responsive design Media queries for various devices and resolutions

+
+ +
+
+ Responsive devices +
+
+

Supported devices

+ + + + + + + + + + +
+ Under 480px + Smartphones + + 480px to 768px + Portrait tablet + + 768px to 940px + Landscape tablet + + 940px and up + Default + + 1170px and up + Large screens +
+

With these media queries, Bootstrap provides developers with the core tools necessary to develop responsively on the web for the world's most common devices and resolutions.

+
+
+ +
+ + +

Using the media queries

+
+
+

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

+
    +
  1. Use the compiled responsive version, bootstrap.reponsive.css
    2. +
  2. Add @import "responsive.less" and recompile Bootstrap
    3. +
  3. Compile responsive.less as a separate file and include that
    4. +
+

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

+
+
+
+  // Landscape phones and down
+  @media (max-width: 480px) { ... }
+
+  // Landscape phone to portrait tablet
+  @media (min-width: 480px) and (max-width: 768px) { ... }
+
+  // Portrait tablet to landscape and desktop
+  @media (min-width: 768px) and (max-width: 940px) { ... }
+
+  // Large desktop
+  @media (min-width: 1210px) { .. }
+
+
+
+ +
+ + + +
-- cgit v1.2.3 From a5d2450e88693de5e96d9a9f3f4e82853723f764 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Oct 2011 08:11:18 -0700 Subject: refinement to the responsive section --- docs/index.html | 70 +++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 46 insertions(+), 24 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index aafea7662..3908552bd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -413,33 +413,55 @@

Supported devices

- +

Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

+
+ + + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
LabelLayout widthColumn widthGutter width
- Under 480px - Smartphones - - 480px to 768px - Portrait tablet - - 768px to 940px - Landscape tablet - - 940px and up - Default - - 1170px and up - Large screens - Smartphones480px and belowFluid columns, no fixed widths
Portrait tablets480px to 768pxFluid columns, no fixed widths
Landscape tablets768px to 940px44px20px
Default940px and up60px20px
Large display1210px and up70px30px
-

With these media queries, Bootstrap provides developers with the core tools necessary to develop responsively on the web for the world's most common devices and resolutions.

+ +

What they do

+

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

+
    +
  • Modify the width of column in our grid
    • +
  • Stack elements instead of float wherever necessary
    • +
  • Resize headings and text to be more appropriate for devices
    • +
@@ -448,7 +470,7 @@

Using the media queries

-
+

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

  1. Use the compiled responsive version, bootstrap.reponsive.css
    2. @@ -457,7 +479,7 @@

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

-
+ 
   // Landscape phones and down
   @media (max-width: 480px) { ... }
-- 
cgit v1.2.3


From 523e02f7df3bb706654b43cf604e61c9396212e1 Mon Sep 17 00:00:00 2001
From: Jacob Thornton 
Date: Wed, 19 Oct 2011 23:12:50 -0700
Subject: fix scrollspy simplify stuff more - break everything.

---
 docs/index.html | 65 ++++++++++++++++++++++++++++++---------------------------
 1 file changed, 34 insertions(+), 31 deletions(-)

(limited to 'docs/index.html')

diff --git a/docs/index.html b/docs/index.html
index aafea7662..255d1684f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -53,8 +53,8 @@
             
  • 
               Patterns
               
      
-                
    • Navigation
      • 
                 
    • Media
      • 
+                
    • Navigation
      • 
                 
    • Alerts
      • 
                 
    • Popovers
      • 
                 
    • Autocomplete
      • 
@@ -147,36 +147,38 @@
 
       
-      
      
-        
      
-          
      Built for and by nerds
      
-          
      Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.
      
-          
      Read more on dev.twitter.com ›
      
-        
      
-        
      
-          
      Cross-everything
      
-          
      Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.
      
-          Tested and supported in Chrome, Safari, Internet Explorer, and Firefox
-          
        
-            
      • Latest Safari
        • 
-            
      • Latest Google Chrome
        • 
-            
      • Firefox 4+
        • 
-            
      • Internet Explorer 7+
        • 
-            
      • Opera 11
        • 
-          
      
-        
      
-        
      
-          
      What's included
      
-          
      Bootstrap comes complete with compiled CSS, uncompiled, and example templates.
      
-          
        
-            
      • New in 1.3 Javascript plugins
        • 
-            
      • All original .less files
        • 
-            
      • Fully compiled and minified CSS
        • 
-            
      • Complete styleguide documentation
        • 
-            
      • Three example pages with different layouts
        • 
-          
      
-        
      
-      
      
+      
      
+        
      
+          
      
+            
      Built for and by nerds
      
+            
      Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.
      
+            
      Read more on dev.twitter.com ›
      
+          
      
+          
      
+            
      Cross-everything
      
+            
      Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.
      
+            Tested and supported in Chrome, Safari, Internet Explorer, and Firefox
+            
        
+              
      • Latest Safari
        • 
+              
      • Latest Google Chrome
        • 
+              
      • Firefox 4+
        • 
+              
      • Internet Explorer 7+
        • 
+              
      • Opera 11
        • 
+            
      
+          
      
+          
      
+            
      What's included
      
+            
      Bootstrap comes complete with compiled CSS, uncompiled, and example templates.
      
+            
        
+              
      • New in 1.3 Javascript plugins
        • 
+              
      • All original .less files
        • 
+              
      • Fully compiled and minified CSS
        • 
+              
      • Complete styleguide documentation
        • 
+              
      • Three example pages with different layouts
        • 
+            
      
+          
      
+        
      
+      
      
 
       
      Quick-start examples
      
       
      Need some quick templates? Check out these basic examples we've put together:
      
@@ -2162,6 +2164,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita
     
     
     
+    
     
     
     
-- 
cgit v1.2.3


From b4c0d2a6b2fe1bc92c3635cda71b63ee08a05be4 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 22 Oct 2011 22:49:37 -0700
Subject: tweaks to the responsive layout to improve type

---
 docs/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'docs/index.html')

diff --git a/docs/index.html b/docs/index.html
index 49e6d0431..2cb5eb8e4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -630,7 +630,7 @@
       
      To include a blockquote, wrap <blockquote> around <p> and <small> tags. Use the <small> element to cite your source and you'll get an em dash &mdash; before it.
      
       
      
         
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
      
-        Dr. Julius Hibbert
+        Someone famous
    • @@ -2140,7 +2140,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>
 
    
@@ -2156,7 +2156,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita
           
         
         
-          Less Mac app
+          Mac app
           
             
    The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.
    
             
    If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.
    
-- 
cgit v1.2.3


From e616026d678239104b93cafca9a77ea74a4c0ddf Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 26 Oct 2011 21:04:14 -0700
Subject: update to docs to cleanup pagination for smartphones, fix some
 pagination inconsistencies

---
 docs/index.html | 21 ++++++---------------
 1 file changed, 6 insertions(+), 15 deletions(-)

(limited to 'docs/index.html')

diff --git a/docs/index.html b/docs/index.html
index 2cb5eb8e4..cf3b8b805 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1715,38 +1715,29 @@
           
  • 2
    • 
           
  • 3
    • 
           
  • 4
    • 
-          
  • 5
    • 
-          
+          
         
       
    -- 
cgit v1.2.3


From 648c4689273647c321dd6e3979d910282e9a9339 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 26 Oct 2011 23:11:56 -0700
Subject: breaking down the main page into subpages for easier, more
 comprehensive documentation

---
 docs/index.html | 2181 +++----------------------------------------------------
 1 file changed, 100 insertions(+), 2081 deletions(-)

(limited to 'docs/index.html')

diff --git a/docs/index.html b/docs/index.html
index cf3b8b805..64947dc15 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -32,6 +32,14 @@
         
    
           Bootstrap
    -
    - -
    - -
    -
    -

    Bootstrap,
    from Twitter

    -

    Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.

    -

    - Download on GitHub - Currently v2.0.0 -

    -
    -

    Feature highlights

    -
      -
    • × Built on LESS
      • -
    • × Complete styleguide docs
      • -
    • × Fully responsive design
      • -
    • × Small footprint (7kb gzipped)
      • -
    • × Support for IE7 and up
      • -
    • × Custom jQuery plugins
      • -
    • × Dozens of components
      • -
    -
    -
    -
    - - - - - - - - -
    -
    -
    -

    Built for and by nerds

    -

    Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.

    -

    Read more on dev.twitter.com ›

    -
    -
    -

    Cross-everything

    -

    Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.

    - Tested and supported in Chrome, Safari, Internet Explorer, and Firefox -
      -
    • Latest Safari
      • -
    • Latest Google Chrome
      • -
    • Firefox 4+
      • -
    • Internet Explorer 7+
      • -
    • Opera 11
      • -
    -
    -
    -

    What's included

    -

    Bootstrap comes complete with compiled CSS, uncompiled, and example templates.

    -
      -
    • New in 1.3 Javascript plugins
      • -
    • All original .less files
      • -
    • Fully compiled and minified CSS
      • -
    • Complete styleguide documentation
      • -
    • Three example pages with different layouts
      • -
    -
    -
    -
    - -

    Quick-start examples

    -

    Need some quick templates? Check out these basic examples we've put together:

    -
      -
    • - Simple three-column layout with hero unit -
      • -
    • - Fluid layout with static sidebar -
      • -
    • - Simple hanging container for apps -
      • -
    - -
    - - - -
    -
    -

    Grid system 12 columns with a responsive twist

    -
    - -

    Default 940px grid

    -
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    1
    -
    -
    -
    4
    -
    4
    -
    4
    -
    -
    -
    4
    -
    8
    -
    -
    -
    6
    -
    6
    -
    -
    -
    12
    -
    - -
    -
    -

    The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.

    -

    It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.

    -
    -
    -
    -<div class="row">
-  <div class="span4">...</div>
-  <div class="span8">...</div>
-</div>
-
    -
    -
    -

    As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.

    -
    -
    - -

    Offsetting columns

    -
    -
    4
    -
    4 offset 4
    -
    -
    -
    3 offset 3
    -
    3 offset 3
    -
    -
    -
    8 offset 4
    -
    - -
    - -

    Nesting columns

    -
    -
    -

    With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.

    -

    Example

    -
    -
    - Level 1 of column -
    -
    - Level 2 -
    -
    - Level 2 -
    -
    -
    -
    -
    -
    -
    -<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>
-
    -
    -
    - -

    Grid customization

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    VariableDefault valueDescription
    @gridColumns16The number of columns within the grid
    @gridColumnWidth40pxThe width of each column within the grid
    @gridGutterWidth20pxThe negative space between each column
    @siteWidthComputed sum of all columns and guttersWe use some basic match to count the number of columns and gutters and set the width of the .fixed-container() mixin.
    -
    -
    -

    Variables in LESS

    -

    Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.

    -
    -
    -

    How to customize

    -

    Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the four ways documented to recompile.

    -
    -
    -

    Staying responsive

    -

    Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.

    -
    -
    - -
    - - - - -
    -
    -

    Layouts Basic templates to create webpages

    -
    - -
    -
    -

    Fixed layout

    -

    The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div.container>.

    -
    -
    -
    -
    -<body>
-  <div class="container">
-    ...
-  </div>
-</body>
-
    -
    -
    -

    Fluid layout

    -

    An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.

    -
    -
    -
    -
    -
    -<body>
-  <div class="container-fluid">
-    <div class="sidebar">
-      ...
-    </div>
-    <div class="content">
-      ...
-    </div>
-  </div>
-</body>
-
    -
    -
    -
    - - - - - -
    -
    -

    Responsive design Media queries for various devices and resolutions

    -
    - -
    -
    - Responsive devices -
    -
    -

    Supported devices

    -

    Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    LabelLayout widthColumn widthGutter width
    Smartphones480px and belowFluid columns, no fixed widths
    Portrait tablets480px to 768pxFluid columns, no fixed widths
    Landscape tablets768px to 940px44px20px
    Default940px and up60px20px
    Large display1210px and up70px30px
    - -

    What they do

    -

    Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

    -
      -
    • Modify the width of column in our grid
      • -
    • Stack elements instead of float wherever necessary
      • -
    • Resize headings and text to be more appropriate for devices
      • -
    -
    -
    - -
    - - -

    Using the media queries

    -
    -
    -

    Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

    -
      -
    1. Use the compiled responsive version, bootstrap.reponsive.css
      2. -
    2. Add @import "responsive.less" and recompile Bootstrap
      3. -
    3. Compile responsive.less as a separate file and include that
      4. -
    -

    Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

    -
    -
    -
    -  // Landscape phones and down
-  @media (max-width: 480px) { ... }
-
-  // Landscape phone to portrait tablet
-  @media (min-width: 480px) and (max-width: 768px) { ... }
-
-  // Portrait tablet to landscape and desktop
-  @media (min-width: 768px) and (max-width: 940px) { ... }
-
-  // Large desktop
-  @media (min-width: 1210px) { .. }
-
    -
    -
    - -
    - - - - - -
    -
    -

    Typography Headings, paragraphs, lists, and other inline type elements

    -
    - -

    Headings & body copy

    - - -
    -
    -

    Typographic scale

    -

    The entire typographic grid is based on two Less variables in our preboot.less file: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height.

    -

    We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.

    -
    -
    -

    Example body text

    -

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    -

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

    -
    -
    -
    -

    h1. Heading 1

    -

    h2. Heading 2

    -

    h3. Heading 3

    -

    h4. Heading 4

    -
    h5. Heading 5
    -
    h6. Heading 6
    -
    -
    -
    - - -

    Emphasis, address, and abbreviation

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ElementDescriptionUsage
    - <strong> - - For emphasizing a snippet of text with important - - None -
    - <em> - - For emphasizing a snippet of text with stress - - None -
    - <abbr> - - Wraps abbreviations and acronyms to show the expanded version on hover - - Include optional title for expanded text -
    - <address> - - For contact information for its nearest ancestor or the entire body of work - - Preserve formatting by ending all lines with <br> -
    - -
    -
    -

    Using emphasis

    -

    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

    -

    Note: Feel free to use <b> and <i> in HTML5, but their usage has changed a bit. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

    -
    -
    -

    Example addresses

    -

    Here are two examples of how the <address> tag can be used:

    -
    - Twitter, Inc.
    - 795 Folsom Ave, Suite 600
    - San Francisco, CA 94107
    - P: (123) 456-7890 -
    -
    - Full Name
    - first.last@gmail.com -
    -
    -
    -

    Example abbreviations

    -

    Abbreviations are styled with uppercase text and a light dotted bottom border. They also have a help cursor on hover so users have extra indication something will be shown on hover.

    -

    HTML is the best thing since sliced bread.

    -

    An abbreviation of the word attribute is attr.

    -
    -
    - - - -

    Blockquotes

    -
    -
    -

    To include a blockquote, wrap <blockquote> around <p> and <small> tags. Use the <small> element to cite your source and you'll get an em dash &mdash; before it.

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

    - Someone famous -
    -
    -
    -
    -<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>
-
    -
    -
    - - -

    Lists

    -
    -
    -

    Unordered <ul>

    -
      -
    • Lorem ipsum dolor sit amet
      • -
    • Consectetur adipiscing elit
      • -
    • Integer molestie lorem at massa
      • -
    • Facilisis in pretium nisl aliquet
      • -
    • Nulla volutpat aliquam velit -
        -
      • Phasellus iaculis neque
        • -
      • Purus sodales ultricies
        • -
      • Vestibulum laoreet porttitor sem
        • -
      • Ac tristique libero volutpat at
        • -
      -
      • -
    • Faucibus porta lacus fringilla vel
      • -
    • Aenean sit amet erat nunc
      • -
    • Eget porttitor lorem
      • -
    -
    -
    -

    Unstyled <ul.unstyled>

    -
      -
    • Lorem ipsum dolor sit amet
      • -
    • Consectetur adipiscing elit
      • -
    • Integer molestie lorem at massa
      • -
    • Facilisis in pretium nisl aliquet
      • -
    • Nulla volutpat aliquam velit -
        -
      • Phasellus iaculis neque
        • -
      • Purus sodales ultricies
        • -
      • Vestibulum laoreet porttitor sem
        • -
      • Ac tristique libero volutpat at
        • -
      -
      • -
    • Faucibus porta lacus fringilla vel
      • -
    • Aenean sit amet erat nunc
      • -
    • Eget porttitor lorem
      • -
    -
    -
    -

    Ordered <ol>

    -
      -
    1. Lorem ipsum dolor sit amet
      2. -
    2. Consectetur adipiscing elit
      3. -
    3. Integer molestie lorem at massa
      4. -
    4. Facilisis in pretium nisl aliquet
      5. -
    5. Nulla volutpat aliquam velit
      6. -
    6. Faucibus porta lacus fringilla vel
      7. -
    7. Aenean sit amet erat nunc
      8. -
    8. Eget porttitor lorem
      9. -
    -
    -
    -

    Description <dl>

    -
    -
    Description lists
    -
    A description list is perfect for defining terms.
    -
    Euismod
    -
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    -
    Donec id elit non mi porta gravida at eget metus.
    -
    Malesuada porta
    -
    Etiam porta sem malesuada magna mollis euismod.
    -
    -
    -
    - - - - -

    Code Inline and block

    - - - - - - - - - - - - - - - - - - - - - -
    ElementResult
    <code>In a line of text like this, your wrapped code will look like this <html> element.
    <pre> -
    <div>
-  <h1>Heading</h1>
-  <p>Something right here...</p>
-</div>
    -

    Note: Be sure to keep code within pre tags as close to the left as possible; it will render all tabs.

    -
    <pre class="prettyprint"> -

    Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.

    -
    <div>
-  <h1>Heading</h1>
-  <p>Something right here...</p>
-</div>
    -
    <div>
-  <h1>Heading</h1>
-  <p>Something right here...</p>
-</div>
    -

    Download google-code-prettify and view the readme for how to use.

    -
    - - -

    Inline labels for special attention

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    LabelsMarkup
    - Default - - <span class="label">Default</span> -
    - New - - <span class="label success">New</span> -
    - Warning - - <span class="label warning">Warning</span> -
    - Important - - <span class="label important">Important</span> -
    - Notice - - <span class="label notice">Notice</span> -
    - -
    - - - - -
    -
    -

    Tables For, you guessed it, tabular data

    -
    - -

    Table markup

    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    TagDescription
    - <table> - - Wrapping element for displaying data in a tabular format -
    - <thead> - - Container element for table header rows (<tr>) to label table columns -
    - <tbody> - - Container element for table rows (<tr>) in the body of the table -
    - <tr> - - Container element for a set of table cells (<td> or <th>) that appears on a single row -
    - <td> - - Default table cell -
    - <th> - - Special table cell for column (or row, depending on scope and placement) labels
    - Must be used within a <thead> -
    - <caption> - - Description or summary of what the table holds, especially useful for screen readers -
    -
    -
    -
    -<table>
-  <thead>
-    <tr>
-      <th>...</th>
-      <th>...</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>...</td>
-      <td>...</td>
-    </tr>
-  </tbody>
-</table>
-
    -
    -
    - -

    Example tables

    -

    1. Default table styles

    -

    All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #First NameLast NameLanguage
    1SomeOneEnglish
    2JoeSixpackEnglish
    3StuDentCode
    -
    -<table>
-  ...
-</table>
    -

    2. Zebra-striped

    -

    Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #First NameLast NameLanguage
    1SomeOneEnglish
    2JoeSixpackEnglish
    3StuDentCode
    -

    Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.

    -
    -<table class="zebra-striped">
-...
-</table>
    -

    3. Zebra-striped w/ TableSorter.js

    -

    Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    #First NameLast NameLanguage
    1YourOneEnglish
    2JoeSixpackEnglish
    3StuDentCode
    -
    -<script src="js/jquery/jquery.tablesorter.min.js"></script>
-<script >
-  $(function() {
-    $("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
-  });
-</script>
-<table class="zebra-striped">
-  ...
-</table>
    - -
    - - - - -
    -
    -

    Forms

    -
    -
    -
    -

    Four types of forms

    -

    With 2.0, we now have four types of forms to choose from:

    -
      -
    • Search form for a super-rounded input and optional button
      • -
    • Inline form for a series of elements on one line
      • -
    • Horizontal form for left-aligned labels
      • -
    • Vertical form for stacked labels and inputs
      • -
    -
    -
    -

    -
    -
    -
    -
    -

    Search form

    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -

    Inline form

    -
    -
    -
    -
    -

    Some directional text

    -

    And maybe some kind of optional supporting text right here.

    - - - - -
    -
    -
    -
    -
    -
    -

    Horizontal form

    -
    -
    -
    - Example form -
    - -
    - -

    Help text here. Be sure to fill this out like so, or else!

    -
    -
    -
    - -
    - -
    -
    -
    - -
    - -
    -
    - Example form -
    - -
    - -
    -
    -
    - -
    - -
    -
    -
    - -
    - -
    -
    -
    - -
    -
    - - - - -
    -

    Note: Labels surround all the options for much larger click areas and a more usable form.

    -
    -
    -
    - -
    -
    - - -
    -

    Note: Labels surround all the options for much larger click areas and a more usable form.

    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -

    Vertical form

    -
    -
    -
    - Example form -
    - -
    - -

    Be sure to fill this out like so, or else!

    -
    -
    -
    - -
    - -
    -
    -
    - -
    -
    - - - +
    + +
    + + +
    +
    +

    Bootstrap,
    from Twitter

    +

    Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.

    +

    + Download on GitHub + Currently v2.0.0 +

    +
    +

    Feature highlights

    +
      +
    • × Built on LESS
      • +
    • × Complete styleguide docs
      • +
    • × Fully responsive design
      • +
    • × Small footprint (7kb gzipped)
      • +
    • × Support for IE7 and up
      • +
    • × Custom jQuery plugins
      • +
    • × Dozens of components
      • +
    -
    -
    - - -
    -
    -
    -
    - -
    -
    -

    Buttons

    -

    As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.

    -

    All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue .primary class, a light-blue .info class, a green .success class, and a red .danger class.

    -
    -
    -

    Example buttons

    -

    Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:

    -
    -      -
    -

    Alternate sizes

    -

    Fancy larger or smaller buttons? Have at it!

    -
    - Primary action - Action -
    -
    - Primary action - Action -
    -

    Disabled state

    -

    For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s .disabled for links and :disabled for <button> elements.

    -

    Links

    -
    - Primary action - Action -
    -

    Buttons

    -
    -   -
    -
    -
    - -
    -
    -

    Button groups

    -
    -
    -

    Example

    -
    -
    - Left - Middle - Right -
    -
    -
    -
    -
    - 1 - 2 - 3 - 4 - 5 -
    -
    - 6 - 7 - 8 -
    -
    - 9 -
    -
    - 10 -
    -
    -
    -
    -
    - -
    - - - - -
    -
    -

    Media Displaying images and videos

    -
    - -
    -
    -

    Media grid

    -

    Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.

    -
    -
    -

    Example thumbnails

    -

    Thumbnails in the .media-grid can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the .span2, .span4, and .span6 column sizes.

    -

    Large

    - -

    Medium

    - -

    Small

    - -

    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>
-
    -
    -
    -
    - - - - - - - - - -
    -
    -

    Alerts & Errors Styles for success, warning, and error messages or alerts

    -
    - -
    -
    -

    Basic alerts

    -

    .alert-message

    -

    One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

    -

    Get the javascript »

    -
    -
    -
    - × -

    Holy guacamole! Best check yo self, you’re not looking too good.

    -
    -
    - × -

    Oh snap! Change this and that and try again.

    -
    -
    - × -

    Well done! You successfully read this alert message.

    -
    -
    - × -

    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

    -

    .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 »

    -
    -
    -
    - × -

    Holy guacamole! This is a warning! 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.

    -
    - Take this action Or do this -
    -
    -
    - × -

    Oh snap! You got an error! Change this and that and try again.

    -
      -
    • Duis mollis est non commodo luctus
      • -
    • Nisi erat porttitor ligula
      • -
    • Eget lacinia odio sem nec elit
      • -
    -
    - Take this action Or do this -
    -
    -
    - × -

    Well done! You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

    -
    - Take this action Or do this -
    -
    -
    - × -

    Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

    -
    - 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>
-
    -
    -
    -
    - - - -
    -
    -

    Popovers Components for displaying content in modals, tooltips, and popovers

    -
    -
    -
    -

    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 »

    -
    -
    -
    - -
    -
    - × -

    Modal Heading

    -
    -
    -

    One fine body…

    -
    -
    - Primary - Secondary -
    -
    -
    -
    -
    - - -
    -
    -

    Tooltips

    -

    Twipsies are super useful for aiding a confused user and pointing them in the right direction.

    -

    Get the javascript »

    -
    -
    -
    -
    -

    -Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae. -

    -
    -
    -
    -
    - - -
    -
    -

    Popovers

    -

    Use popovers to provide subtextual information to a page without affecting layout.

    -

    Get the javascript »

    -
    -
    -
    -
    -
    -
    -
    -

    Popover Title

    -
    -

    Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

    -
    +
    +

    What's included

    +

    Bootstrap comes complete with compiled CSS, uncompiled, and example templates.

    +
      +
    • New in 1.3 Javascript plugins
      • +
    • All original .less files
      • +
    • Fully compiled and minified CSS
      • +
    • Complete styleguide documentation
      • +
    • Three example pages with different layouts
      • +
    -
    - -
    -
    -
    -
    -
    - - - - -
    -
    -

    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!

    -

    View javascript docs »

    -
    -
    -

    What's included

    -

    Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    FileDescription
    bootstrap-modal.jsOur Modal plugin is a super slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.
    bootstrap-alerts.jsThe alert plugin is a super tiny class for adding close functionality to alerts.
    bootstrap-dropdown.jsThis plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations.
    bootstrap-scrollspy.jsThe ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.
    bootstrap-tabs.jsThis plugin adds quick, dynamic tab and pill functionality for cycling through local content.
    bootstrap-twipsy.jsBased on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!
    bootstrap-popover.jsThe popover plugin provides a simple interface for adding popovers to your application. It extends the boostrap-twipsy.js plugin, so be sure to grab that file as well when including popovers in your project!
    -

    Is javascript necessary?

    -

    Nope! Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.

    -

    However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.

    -

    For more information and to see some live demos, please refer to our plugin documentation page.

    -
    -
    - - - -
    -
    -

    Using Bootstrap with Less Supercharge your CSS with variables, mixins, and functions

    -
    -
    -
    -

    Bootstrap was built with Preboot, an open-source pack of mixins and variables to be used in conjunction with Less, a CSS preprocessor for faster and easier web development.

    -

    Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.

    -
    -
    -

    How to use it

    -

    Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.

    -
    -<link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
-<script src="js/less-1.1.3.min.js"></script>
    -

    Not feeling the .js solution? Try the Less Mac app or use Node.js to compile when you deploy your code.

    - -

    What’s included

    -

    Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.

    -

    Variables

    -

    Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.

    -
    -// Links
-@linkColor:         #8b59c2;
-@linkColorHover:    darken(@linkColor, 10);
-
-// Grays
-@black:             #000;
-@grayDark:          lighten(@black, 25%);
-@gray:              lighten(@black, 50%);
-@grayLight:         lighten(@black, 70%);
-@grayLighter:       lighten(@black, 90%);
-@white:             #fff;
-
-// Accent Colors
-@blue:              #08b5fb;
-@green:             #46a546;
-@red:               #9d261d;
-@yellow:            #ffc40d;
-@orange:            #f89406;
-@pink:              #c3325f;
-@purple:            #7a43b6;
-
-// Baseline grid
-@basefont:          13px;
-@baseline:          18px;
-
    - -

    Commenting

    -

    Less also provides another style of commenting in addition to CSS’s normal /* ... */ syntax.

    -
    -// This is a comment
-/* This is also a comment */
-
    - -

    Mixins up the wazoo

    -

    Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.

    -

    Font stacks

    -
    -#font {
-  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
-  }
-  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: @size;
-    font-weight: @weight;
-    line-height: @lineHeight;
-  }
-  ...
-}
-
    -

    Gradients

    -
    -#gradient {
-  ...
-  .vertical (@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-repeat: repeat-x;
-    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
-    background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
-    background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
-    background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
-    background-image: linear-gradient(@startColor, @endColor); // The standard
-  }
-  ...
-}
-
    - -

    Operations

    -

    Get fancy and perform some math to generate flexible and powerful mixins like the one below.

    -
    -// Griditude
-@gridColumns:       16;
-@gridColumnWidth:   40px;
-@gridGutterWidth:   20px;
-@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-
-// Make some columns
-.columns(@columnSpan: 1) {
-  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
-}
-
    - -

    Compiling Less

    -

    After modifying the .less files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.

    -

    Ways to compile

    - - - - - - - - - - - - - - - - - - - - - - - - -
    MethodSteps
    Node with makefile -

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

    - 
    $ npm install lessc
    -

    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).

    -
    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>
-
    -

    To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

    -
    Command line -

    If you already have the less command line tool installed, simply 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!

    -
    Mac app -

    The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.

    -

    If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

    -
    -
    -
    +
    +
    + +

    Quick-start examples

    +

    Need some quick templates? Check out these basic examples we've put together:

    +
      +
    • + Simple three-column layout with hero unit +
      • +
    • + Fluid layout with static sidebar +
      • +
    • + Simple hanging container for apps +
      • +
    - + + - - + @@ -2182,6 +202,5 @@ Lorem ipsum dolar sit amet illo error ipsum verita - -- cgit v1.2.3 From f3128d0fa1f1f14104b7c4ffab54f083b99a108e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2011 23:00:09 -0700 Subject: overhauled the front page to feel a bit more marketing-like, added the awesome glyphicons to bring some life to the docs --- docs/index.html | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 78 insertions(+), 7 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 64947dc15..4524b7950 100644 --- a/docs/index.html +++ b/docs/index.html @@ -127,10 +127,82 @@ +
    +
    +
    + +

    Built for and by nerds

    +

    Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

    +
    +
    + +

    For all skill levels

    +

    Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

    +
    +
    + +

    Cross-everything

    +

    Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

    +
    +
    +
    +
    + +

    12-column grid

    +

    Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

    +
    +
    + +

    Responsive design

    +

    With Bootstrap 2, we've gone fully responsive. Our components are flexible enough to scale according to whatever resolution or device you're using to provide a consistent experience, no matter what.

    +
    +
    + +

    Styleguide docs

    +

    Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.

    +
    +
    +
    +
    + +

    Growing library

    +

    Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.

    +
    +
    + +

    Custom jQuery plugins

    +

    What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.

    +
    +
    + +

    Built on LESS

    +

    Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.

    +
    +
    +
    +
    +

    HTML5

    +

    Built to support new HTML5 elements and syntax.

    +
    +
    +

    CSS3

    +

    Progressively enhanced components for ultimate style.

    +
    +
    +

    Open-source

    +

    Built for and maintained by the community via GitHub.

    +
    +
    +

    Made at Twitter

    +

    Brought to you by experienced engineers and designers.

    +
    +
    +
    + -
    + -

    Quick-start examples

    + @@ -184,10 +256,9 @@ ================================================== --> -- cgit v1.2.3 From 9fd4e459fe829454c811118c64aa32eafd6e8b97 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2011 23:34:48 -0700 Subject: adding more icons for the homepage for open source, twitter, and html5/css3 --- docs/index.html | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 4524b7950..e712f6ed0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -130,69 +130,73 @@
    - +

    Built for and by nerds

    Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

    - +

    For all skill levels

    Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

    - +

    Cross-everything

    Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

    - +

    12-column grid

    Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

    - +

    Responsive design

    With Bootstrap 2, we've gone fully responsive. Our components are flexible enough to scale according to whatever resolution or device you're using to provide a consistent experience, no matter what.

    - +

    Styleguide docs

    Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.

    - +

    Growing library

    Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.

    - +

    Custom jQuery plugins

    What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.

    - +

    Built on LESS

    Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.

    +

    HTML5

    Built to support new HTML5 elements and syntax.

    +

    CSS3

    Progressively enhanced components for ultimate style.

    +

    Open-source

    Built for and maintained by the community via GitHub.

    +

    Made at Twitter

    Brought to you by experienced engineers and designers.

    -- cgit v1.2.3 From 3f512adf953da3a3fbbfca18b138fb6659f2b77f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 30 Oct 2011 20:14:27 -0700 Subject: updated docs and type styles for blockquotes and a few fixes for type --- docs/index.html | 70 +-------------------------------------------------------- 1 file changed, 1 insertion(+), 69 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index e712f6ed0..7b9131502 100644 --- a/docs/index.html +++ b/docs/index.html @@ -38,41 +38,6 @@
  • Components
  • Javascript plugins
  • Using LESS
    • - -
    @@ -204,40 +169,7 @@ - - + +
  • ·
    • -

    Designed for everyone, everywhere

    @@ -235,13 +218,6 @@ - - - - - - - -- cgit v1.2.3 From efacac0d6c812abffa8a84a48fa760f5f56c92f0 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Wed, 21 Dec 2011 18:42:43 -0800 Subject: clean up all the js across all the doc pages --- docs/index.html | 37 ++++--------------------------------- 1 file changed, 4 insertions(+), 33 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 55a75b1bf..81d7df41e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -97,10 +97,10 @@
  • ·
  • - +
    • @@ -233,35 +233,6 @@ - - - - - - - - - - - - - + - + \ No newline at end of file -- cgit v1.2.3 From 058f47b33b3978bbb484e521e7fc14c6ebadc161 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Dec 2011 17:25:25 -0600 Subject: clean up some comments and fix a bug with buttons in navbar by removing too generic of a link color --- docs/index.html | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 0d340fa1a..735fe7ae7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -41,6 +41,7 @@
  • Javascript plugins
  • Using LESS
    • + Button -- cgit v1.2.3 From b9adae14fc9fa64134aebb57655dd93e0a7e6ad6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2011 12:40:30 -0600 Subject: remove button from topbar for testing --- docs/index.html | 1 - 1 file changed, 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 735fe7ae7..0d340fa1a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -41,7 +41,6 @@
  • Javascript plugins
  • Using LESS
    • - Button -- cgit v1.2.3 From cfc2353059df628c67d19a3c5c3ead2cc6051f53 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 Jan 2012 23:59:22 -0800 Subject: front page docs updated to include old getting started section, update code styles to look like github gists, and lots more docs updates --- docs/index.html | 40 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 4 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 0d340fa1a..231ed2066 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

    +
    + -- cgit v1.2.3 From cb9be7bd0cde19b3b401d2dcdfb6162dd00b5ab5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jan 2012 13:21:44 -0800 Subject: clean up dup css in responsive, fix navbar dropdown caret --- docs/index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 231ed2066..8f7963afd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -127,6 +127,7 @@

    Designed for everyone, everywhere.

    +

    Need reasons to love Bootstrap? Look no further.

    @@ -153,7 +154,7 @@

    Responsive design

    -

    With Bootstrap 2, we've gone fully responsive. Our components are flexible enough to scale according to whatever resolution or device you're using to provide a consistent experience, no matter what.

    +

    With Bootstrap 2, we've gone fully responsive. Our components are scale according to a range of resolutions and devices to provide a consistent experience, no matter what.

    @@ -205,7 +206,7 @@

    Get started in no time.

    -

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

    +

    Quickly start using Bootstrap within your workflow and development process.

    -- cgit v1.2.3 From 391248c0e3ba9b00b0b4a02e4d94475e9ae9877a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jan 2012 15:29:16 -0800 Subject: nuke uber footer, bring back topbar dropdowns --- docs/index.html | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 66 insertions(+), 5 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 8f7963afd..8d5448ce1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -35,11 +35,71 @@ Bootstrap @@ -253,5 +313,6 @@ + -- cgit v1.2.3 From 11be9cd16370ecd15d227917d98ff63eccae68ae Mon Sep 17 00:00:00 2001 From: Purwandi Date: Fri, 13 Jan 2012 14:57:21 +0700 Subject: Fix id anchor javascript --- docs/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 8d5448ce1..5d8e61ded 100644 --- a/docs/index.html +++ b/docs/index.html @@ -81,13 +81,13 @@
      -
    • Transition
      • -
    • Modal
      • -
    • Dropdown
      • +
    • Transition
      • +
    • Modal
      • +
    • Dropdown
    • Scrollspy
      • -
    • Tab
      • -
    • Tooltip
      • -
    • Popover
      • +
    • Tab
      • +
    • Tooltip
      • +
    • Popover
    • Alert
    • Button
    • Collapse
      • -- cgit v1.2.3 From a4b107bf879d47db0a6e036814f5aeee4316d36c Mon Sep 17 00:00:00 2001 From: Chris Gunther Date: Sat, 14 Jan 2012 15:15:24 -0500 Subject: fix navbar links to scaffolding > grid system --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 5d8e61ded..fc1eb498c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -41,7 +41,7 @@ -- cgit v1.2.3 From f82fb2a1976060b2d0b71c3e6ad20f6d7a7772f7 Mon Sep 17 00:00:00 2001 From: Chris Gunther Date: Sat, 14 Jan 2012 15:18:59 -0500 Subject: fix navbar links to base CSS > typography --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index fc1eb498c..8dd4935d5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -52,7 +52,7 @@
        -
      • Type
        • +
      • Typography
      • Tables
      • Forms
      • Buttons
        • -- cgit v1.2.3 From ec7f8917b1bfa79dee54cd6c5f6cf0074764fce4 Mon Sep 17 00:00:00 2001 From: Chris Gunther Date: Sat, 14 Jan 2012 15:24:35 -0500 Subject: add Progress Bars to Components narbar dropdown --- docs/index.html | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 8dd4935d5..ffdac0b3f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -73,6 +73,7 @@
      • Pagination
      • Thumbnails
      • Alert messages
        • +
      • Progress bars
    • -- cgit v1.2.3 From 2c3365f99ef81e53d90593c45d10ebeb3426dea9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 17:16:46 -0800 Subject: allow btn-groups to work in navbars --- docs/index.html | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index ffdac0b3f..a89e01c72 100644 --- a/docs/index.html +++ b/docs/index.html @@ -33,7 +33,7 @@
      Bootstrap -
      -- cgit v1.2.3 From 1c6048bac2d305085f40324223c32e40bb9ea938 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 19:17:48 -0800 Subject: restore top bar on home page --- docs/index.html | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index a89e01c72..ffdac0b3f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -33,7 +33,7 @@
      Bootstrap -
      -- cgit v1.2.3 From dab6d2b17cc2fd67c2462b5a5eb84eb58d9c72bc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Jan 2012 21:28:47 -0800 Subject: change up classes on tables and forms, fix nav list styles in example --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index ffdac0b3f..cb924bae6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -268,7 +268,7 @@ ================================================== -->

      Get started in no time.

      Quickly start using Bootstrap within your workflow and development process.

      -
    +
    -- cgit v1.2.3 From ed9903f797fa6d94789d05c234164bd378a1f3df Mon Sep 17 00:00:00 2001 From: Paul Kauders Date: Sun, 15 Jan 2012 07:46:25 -0600 Subject: Fix typo in Responsive design content --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index cb924bae6..40ffce106 100644 --- a/docs/index.html +++ b/docs/index.html @@ -215,7 +215,7 @@

    Responsive design

    -

    With Bootstrap 2, we've gone fully responsive. Our components are scale according to a range of resolutions and devices to provide a consistent experience, no matter what.

    +

    With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

    -- cgit v1.2.3 From 8ceea1f559fb432fc12df32153911de89caea36f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jan 2012 11:26:06 -0800 Subject: fix some ie7 bugs, improve dropdowns for ie due to lack of a shadow, fix pager example code --- docs/index.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index cb924bae6..736352b43 100644 --- a/docs/index.html +++ b/docs/index.html @@ -119,7 +119,6 @@

    Download on GitHub Get started → - Currently v2.0.0

    @@ -145,10 +144,10 @@
  • Changelog
  • ·
  • - +
  • - +

    • Get started in no time.

    Quickly start using Bootstrap within your workflow and development process.

    - +
    -- cgit v1.2.3 From a7bf0295fbf3ce9abc1ca44680f4a6eaf17339b5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jan 2012 11:55:04 -0800 Subject: remove dropdowns, add in sub nav instead --- docs/index.html | 69 ++++++++------------------------------------------------- 1 file changed, 9 insertions(+), 60 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index ce56a04ef..eee32e0d4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -35,71 +35,20 @@ Bootstrap -- cgit v1.2.3 From f764aee4b919c28974dba7b91edac9a04172ba25 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 23 Jan 2012 14:14:16 -0800 Subject: add templates for doc generation --- docs/index.html | 402 +++++++++++++++++++++++++++++--------------------------- 1 file changed, 207 insertions(+), 195 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index ce56a04ef..1e0ff52f6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,11 +4,10 @@ Bootstrap, from Twitter - - + @@ -19,23 +18,24 @@ - - - - + + + + + -
    +
    Bootstrap -
  • +
  • Base CSS @@ -59,7 +59,7 @@
  • Icons by Glyphicons
    • -
  • +
  • Components @@ -76,7 +76,7 @@
  • Progress bars
    • -
  • +
  • Javascript plugins @@ -96,7 +96,7 @@
  • Typeahead
    • -
  • +
  • Using LESS @@ -108,196 +108,194 @@
    -
    +
    - -
    -
    -

    Bootstrap,
    from Twitter

    -

    Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, featuring HTML, CSS, and JS for dozens of base elements and common design components.

    -

    - Download on GitHub - Get started → -

    + +
    +
    +

    Bootstrap,
    from Twitter

    +

    Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, featuring HTML, CSS, and JS for dozens of base elements and common design components.

    +

    + Download on GitHub + Get started → +

    -
    -

    Feature highlights

    -
      -
    • × Built on LESS
      • -
    • × Complete styleguide docs
      • -
    • × Fully responsive design
      • -
    • × Small footprint (7kb gzipped)
      • -
    • × Support for IE7 and up
      • -
    • × Custom jQuery plugins
      • -
    • × Dozens of components
      • -
    -
    -
    -
    +
    +

    Feature highlights

    +
      +
    • × Built on LESS
      • +
    • × Complete styleguide docs
      • +
    • × Fully responsive design
      • +
    • × Small footprint (7kb gzipped)
      • +
    • × Support for IE7 and up
      • +
    • × Custom jQuery plugins
      • +
    • × Dozens of components
      • +
    +
    +
    +
    - -
    -

    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.

    -

    Need reasons to love Bootstrap? Look no further.

    -
    -
    - -

    Built for and by nerds

    -

    Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

    -
    -
    - -

    For all skill levels

    -

    Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

    -
    -
    - -

    Cross-everything

    -

    Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

    -
    -
    -
    -
    - -

    12-column grid

    -

    Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

    -
    -
    - -

    Responsive design

    -

    With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

    -
    -
    - -

    Styleguide docs

    -

    Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.

    -
    -
    -
    -
    - -

    Growing library

    -

    Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.

    -
    -
    - -

    Custom jQuery plugins

    -

    What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.

    -
    -
    - -

    Built on LESS

    -

    Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.

    -
    -
    -
    -
    - -

    HTML5

    -

    Built to support new HTML5 elements and syntax.

    -
    -
    - -

    CSS3

    -

    Progressively enhanced components for ultimate style.

    -
    -
    - -

    Open-source

    -

    Built for and maintained by the community via GitHub.

    -
    -
    - -

    Made at Twitter

    -

    Brought to you by an experienced engineer and designer.

    -
    -
    - - - -

    Get started in no time.

    -

    Quickly start using Bootstrap within 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 Bootstrap GitHub repo.

    -

    Bootstrap on GitHub »

    -

    Currently v2.0.0

    -
    -
    -
    +

    Designed for everyone, everywhere.

    +

    Need reasons to love Bootstrap? Look no further.

    +
    +
    + +

    Built for and by nerds

    +

    Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

    +
    +
    + +

    For all skill levels

    +

    Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

    +
    +
    + +

    Cross-everything

    +

    Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

    +
    +
    +
    +
    + +

    12-column grid

    +

    Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

    +
    +
    + +

    Responsive design

    +

    With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

    +
    +
    + +

    Styleguide docs

    +

    Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.

    +
    +
    +
    +
    + +

    Growing library

    +

    Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.

    +
    +
    + +

    Custom jQuery plugins

    +

    What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.

    +
    +
    + +

    Built on LESS

    +

    Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.

    +
    +
    +
    +
    + +

    HTML5

    +

    Built to support new HTML5 elements and syntax.

    +
    +
    + +

    CSS3

    +

    Progressively enhanced components for ultimate style.

    +
    +
    + +

    Open-source

    +

    Built for and maintained by the community via GitHub.

    +
    +
    + +

    Made at Twitter

    +

    Brought to you by an experienced engineer and designer.

    +
    +
    + +

    Get started in no time.

    +

    Quickly start using Bootstrap within 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 Bootstrap GitHub repo.

    +

    Bootstrap on GitHub »

    +

    Currently v2.0.0

    +
    +
    +
    +
    + - - - + + + + + + + + + + + + + + + -- cgit v1.2.3 From b4b1ef68398b68dcdfa29465d06cd76d6bf2c49d Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 23 Jan 2012 15:17:32 -0800 Subject: rebuild with new templates --- docs/index.html | 438 ++++++++++++++++++++++++-------------------------------- 1 file changed, 186 insertions(+), 252 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index f61518e07..9693b9f7e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -27,96 +27,30 @@ -
    Bootstrap
    @@ -125,195 +59,195 @@
    -
    +
    - -
    -
    -

    Bootstrap,
    from Twitter

    -

    Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, featuring HTML, CSS, and JS for dozens of base elements and common design components.

    -

    - Download on GitHub - Get started → -

    + +
    +
    +

    Bootstrap,
    from Twitter

    +

    Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, featuring HTML, CSS, and JS for dozens of base elements and common design components.

    +

    + Download on GitHub + Get started → +

    -
    -

    Feature highlights

    -
      -
    • × Built on LESS
      • -
    • × Complete styleguide docs
      • -
    • × Fully responsive design
      • -
    • × Small footprint (7kb gzipped)
      • -
    • × Support for IE7 and up
      • -
    • × Custom jQuery plugins
      • -
    • × Dozens of components
      • -
    -
    -
    -
    +
    +

    Feature highlights

    +
      +
    • × Built on LESS
      • +
    • × Complete styleguide docs
      • +
    • × Fully responsive design
      • +
    • × Small footprint (7kb gzipped)
      • +
    • × Support for IE7 and up
      • +
    • × Custom jQuery plugins
      • +
    • × Dozens of components
      • +
    +
    +
    +
    - -
    -

    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.

    -

    Need reasons to love Bootstrap? Look no further.

    -
    -
    - -

    Built for and by nerds

    -

    Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

    -
    -
    - -

    For all skill levels

    -

    Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

    -
    -
    - -

    Cross-everything

    -

    Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

    -
    -
    -
    -
    - -

    12-column grid

    -

    Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

    -
    -
    - -

    Responsive design

    -

    With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

    -
    -
    - -

    Styleguide docs

    -

    Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.

    -
    -
    -
    -
    - -

    Growing library

    -

    Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.

    -
    -
    - -

    Custom jQuery plugins

    -

    What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.

    -
    -
    - -

    Built on LESS

    -

    Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.

    -
    -
    -
    -
    - -

    HTML5

    -

    Built to support new HTML5 elements and syntax.

    -
    -
    - -

    CSS3

    -

    Progressively enhanced components for ultimate style.

    -
    -
    - -

    Open-source

    -

    Built for and maintained by the community via GitHub.

    -
    -
    - -

    Made at Twitter

    -

    Brought to you by an experienced engineer and designer.

    -
    -
    +

    Designed for everyone, everywhere.

    +

    Need reasons to love Bootstrap? Look no further.

    +
    +
    + +

    Built for and by nerds

    +

    Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

    +
    +
    + +

    For all skill levels

    +

    Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

    +
    +
    + +

    Cross-everything

    +

    Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

    +
    +
    +
    +
    + +

    12-column grid

    +

    Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

    +
    +
    + +

    Responsive design

    +

    With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

    +
    +
    + +

    Styleguide docs

    +

    Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.

    +
    +
    +
    +
    + +

    Growing library

    +

    Despite being only 7kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.

    +
    +
    + +

    Custom jQuery plugins

    +

    What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.

    +
    +
    + +

    Built on LESS

    +

    Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.

    +
    +
    +
    +
    + +

    HTML5

    +

    Built to support new HTML5 elements and syntax.

    +
    +
    + +

    CSS3

    +

    Progressively enhanced components for ultimate style.

    +
    +
    + +

    Open-source

    +

    Built for and maintained by the community via GitHub.

    +
    +
    + +

    Made at Twitter

    +

    Brought to you by an experienced engineer and designer.

    +
    +
    - -

    Get started in no time.

    -

    Quickly start using Bootstrap within 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 Bootstrap GitHub repo.

    -

    Bootstrap on GitHub »

    -

    Currently v2.0.0

    -
    -
    -
    - +

    Get started in no time.

    +

    Quickly start using Bootstrap within 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 Bootstrap GitHub repo.

    +

    Bootstrap on GitHub »

    +

    Currently v2.0.0

    +
    +
    +
    +

    Back to top

    -- cgit v1.2.3 From 82de03b67cf729291ea5a73741e44838a42940f8 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 23 Jan 2012 19:55:00 -0800 Subject: start wrapping text in {{_i}} for translation --- docs/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 9693b9f7e..1743676b6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -22,11 +22,10 @@ - - +
    -- cgit v1.2.3 From a800d6ceac11eb834295567c20e890abf88c64af Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 24 Jan 2012 14:22:02 -0800 Subject: i18n index --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 1743676b6..d0c0bcae6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -136,7 +136,7 @@
    • -

    Designed for everyone, everywhere.

    +

    Need reasons to love Bootstrap? Look no further.

    -- cgit v1.2.3 From fecd4ddd135a893f2c5c103d565e9d1ab110d247 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jan 2012 14:25:30 -0800 Subject: docs updates to make the getting started section more responsive, updated the benefits to be clearer and swap x for checkmark --- docs/index.html | 68 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 34 insertions(+), 34 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 1743676b6..25e76cb54 100644 --- a/docs/index.html +++ b/docs/index.html @@ -74,13 +74,13 @@

    Feature highlights

      -
    • × Built on LESS
      • -
    • × Complete styleguide docs
      • -
    • × Fully responsive design
      • -
    • × Small footprint (7kb gzipped)
      • -
    • × Support for IE7 and up
      • -
    • × Custom jQuery plugins
      • -
    • × Dozens of components
      • +
    • ✔ Built on LESS
      • +
    • ✔ Complete style guide docs
      • +
    • ✔ Fully responsive design
      • +
    • ✔ Small CSS footprint (10kb gzipped)
      • +
    • ✔ Support for IE7 and up
      • +
    • ✔ Custom jQuery plugins
      • +
    • ✔ Dozens of components
    @@ -217,33 +217,33 @@ ================================================== -->

    Get started in no time.

    Quickly start using Bootstrap within 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 Bootstrap GitHub repo.

    -

    Bootstrap on GitHub »

    -

    Currently v2.0.0

    -
    + +
    +
    +
    +

    Hotlink the CSS

    +

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

    +
    + +
    +
    +
    +

    Use it with LESS.js

    +

    A fan of using LESS? No problem, just download the repo and add these lines to your page:

    +
    + +
    +
    +
    +

    Fork on GitHub

    +

    Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.

    +

    Bootstrap on GitHub »

    +

    Currently v2.0.0

    +
    +
    +
    +
    + -- cgit v1.2.3 From 1fa3eab20c827d0300cd4a4bb50e2c28e16a2872 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 10:19:29 -0800 Subject: fix location of favicon --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 4e3ecd038..958f17bf8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -19,7 +19,7 @@ - + -- cgit v1.2.3 From 324ebb59900fd69411aec323a85953aec8c55bb6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2012 10:47:08 -0800 Subject: spec'ed out an examples overview page with links to current examples; examples still need work themselves though --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 958f17bf8..2a6078cbe 100644 --- a/docs/index.html +++ b/docs/index.html @@ -115,7 +115,7 @@

    Built with Bootstrap.

    -

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

    +

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

    +
    +

    Designed for everyone, everywhere.

    Need reasons to love Bootstrap? Look no further.

    @@ -210,6 +212,7 @@
    +
    @@ -243,6 +246,7 @@
    +
    @@ -255,9 +259,11 @@
    - + + - + -- cgit v1.2.3 From 9c1ec6fb98efb72dbf9618e6c332702082dcd622 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 11:40:29 -0800 Subject: updated homepage docs to distill strapline --- docs/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 333077601..72295d0b3 100644 --- a/docs/index.html +++ b/docs/index.html @@ -70,7 +70,8 @@

    Twitter Bootstrap

    -

    Bootstrap is a comprehensive front-end toolkit from Twitter designed to kickstart web development. It features HTML, CSS, and JS for dozens of base elements, commonly used design components, and more.

    +

    Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

    View project on GitHub Customize and download -- cgit v1.2.3 From b7f22e27ec89049f4347ae5249e97c08eb8d6a2f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 11:47:40 -0800 Subject: more docs homepage adjustments --- docs/index.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 72295d0b3..8d66e3568 100644 --- a/docs/index.html +++ b/docs/index.html @@ -69,9 +69,8 @@ ================================================== -->

    -

    Twitter Bootstrap

    -

    Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

    +

    Bootstrap, from Twitter

    +

    Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

    View project on GitHub Customize and download -- cgit v1.2.3 From b260544de02788bc921c4c713df0f754d96c5a27 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 15:54:04 -0800 Subject: fix links to apple touch icons --- docs/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 8d66e3568..d7a870e8d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -20,9 +20,9 @@ - - - + + + -- cgit v1.2.3 From a4a8ea2328f163fad43f250f6b3311fe0b670946 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jan 2012 19:09:59 -0800 Subject: flip order of content on home page --- docs/index.html | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index d7a870e8d..e60e9d711 100644 --- a/docs/index.html +++ b/docs/index.html @@ -114,28 +114,6 @@

    -

    Built with Bootstrap.

    -

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

    - - -
    -

    Designed for everyone, everywhere.

    Need reasons to love Bootstrap? Look no further.

    @@ -212,7 +190,29 @@
    -
    +
    + +

    Built with Bootstrap.

    +

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

    + + +
    -- cgit v1.2.3 From ed64276e5be1bbf808f2ab1451aa02522cc3aff0 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 26 Jan 2012 22:05:45 -0800 Subject: move doc building into base make method + build bootstrap to doc assets --- docs/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index e60e9d711..317ec994b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -13,8 +13,8 @@ - - + + -- cgit v1.2.3 From e8647c1b118d2c726a8987e9a41aad82da972b57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 13:20:02 -0800 Subject: huuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuge update to doces and stuff --- docs/index.html | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) (limited to 'docs/index.html') 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 @@ -
    +
    Bootstrap @@ -73,7 +73,7 @@

    Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

    View project on GitHub - Customize and download + Customize and Download

    Feature highlights

    @@ -90,7 +90,7 @@
      -
    • GitHub repo
      • +
    • Upgrading from 1.4
    • Issues
    • Roadmap
    • Changelog
      • @@ -220,27 +220,28 @@

      Quickly start using Bootstrap within your workflow and development process.

      +
      +

      Prostyle with Node

      +

      If you use Node, download the repo, customize Bootstrap, and run make.

      + 
      +$ git clone git@github.com:twitter/bootstrap.git
+$ make
      +

      Hotlink the CSS

      -

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

      +

      For the quickest and easiest start, just copy this snippet into your code to get the CSS.

      -

      Use it with LESS

      -

      A fan of using LESS? No problem, just download the repo and add these lines to your page:

      +

      Use LESS.js

      +

      A fan of using LESS? No problem, just link to the appropriate .less and .js files:

      -
      -
      -

      Fork on GitHub

      -

      Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.

      -

      Bootstrap on GitHub »

      -

      Currently v2.0.0

      -
      +
    -- cgit v1.2.3 From 6fd1e9f4c0903ae4ff4f57bd3cb193ee0ed2b9ad Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 27 Jan 2012 13:36:31 -0800 Subject: rebuil update layout --- docs/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 4dd21b3fa..1459da26c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -54,7 +54,7 @@ Using LESS
  • - Download + Customize
    • @@ -73,7 +73,7 @@

    Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

    View project on GitHub - Customize and Download + Download Bootstrap

    Feature highlights

    -- cgit v1.2.3 From 4737d693e00989a0f90f832a7c8f4f784df14077 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 28 Jan 2012 00:36:37 -0800 Subject: remove quick start section to simplify landing page + start rewriting application js to work ie7 --- docs/index.html | 33 --------------------------------- 1 file changed, 33 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 1459da26c..25e477802 100644 --- a/docs/index.html +++ b/docs/index.html @@ -212,39 +212,6 @@ -
    - - -

    Get started in no time.

    -

    Quickly start using Bootstrap within your workflow and development process.

    -
    -
    -
    -

    Prostyle with Node

    -

    If you use Node, download the repo, customize Bootstrap, and run make.

    - 
    -$ git clone git@github.com:twitter/bootstrap.git
-$ make
    -
    -
    -

    Hotlink the CSS

    -

    For the quickest and easiest start, just copy this snippet into your code to get the CSS.

    -
    - -
    -
    -
    -

    Use LESS.js

    -

    A fan of using LESS? No problem, just link to the appropriate .less and .js files:

    -
    - -
    -
    -
    -
    -
    -- cgit v1.2.3 From 23e076c1bb73c4950d473cb36218937b2607bc13 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 15:09:23 -0800 Subject: add in a navbar button for toggling the nav items --- docs/index.html | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 25e477802..bb63674a8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -33,6 +33,11 @@
    + + + + + Bootstrap
    • -- cgit v1.2.3 From b8a683d7f250a11d349a3e5de0d75ace9d67df0c Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 28 Jan 2012 15:42:07 -0800 Subject: turn off brand hover for now + get nav toggling in mobile --- docs/index.html | 54 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 28 insertions(+), 26 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index bb63674a8..89f5accd6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -26,42 +26,44 @@ - - + +
      - + Bootstrap - +
      + +
      -- cgit v1.2.3 From 5f314dcb85b011d30bbe845e00932a9a550d4e71 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 20:27:18 -0800 Subject: remove benefits from homepage html --- docs/index.html | 12 ------------ 1 file changed, 12 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 89f5accd6..69972c843 100644 --- a/docs/index.html +++ b/docs/index.html @@ -82,18 +82,6 @@ View project on GitHub Download Bootstrap

      -
      -

      Feature highlights

      -
        -
      • ✔ Built on LESS
        • -
      • ✔ Complete style guide docs
        • -
      • ✔ Fully responsive design
        • -
      • ✔ Small footprint (10kb gzipped)
        • -
      • ✔ Support for IE7 and up
        • -
      • ✔ Custom jQuery plugins
        • -
      • ✔ Dozens of components
        • -
      -
      -- cgit v1.2.3 From 49d565a6da38359a776f83f31a1f1ccd658c88a7 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 29 Jan 2012 13:15:37 -0800 Subject: move building zip file into docs/makefile --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 89f5accd6..3ecc7718f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -80,7 +80,7 @@

      Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

      View project on GitHub - Download Bootstrap + Download Bootstrap

      Feature highlights

      -- cgit v1.2.3 From 9e7f5025b494927e9ffc88119b0b9426f7487a62 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 14:07:14 -0800 Subject: update collapsible nav in navbar --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index e20d08bcd..7d728dc7d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -39,7 +39,7 @@ Bootstrap -
      +
      • Overview -- cgit v1.2.3 From 702d3b6dfe7a150deb090f70d7d9c2a2964a3eb2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 16:35:55 -0800 Subject: fix broken navbar collapse --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 7d728dc7d..e20d08bcd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -39,7 +39,7 @@ Bootstrap -
        +
        • Overview -- cgit v1.2.3 From ae7f94eeff733584cbdc80a2d13a85f136a7744e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 00:39:44 -0800 Subject: overhaul grid mixins and variables, standardize fluid grid system and enable it across responsive layouts --- docs/index.html | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index e20d08bcd..055f36028 100644 --- a/docs/index.html +++ b/docs/index.html @@ -62,6 +62,10 @@
        • Customize
          • +
        • +
        • + Examples +
        -- cgit v1.2.3 From 8f448610a944efd134170f44e305ec6710bcff1a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 01:09:34 -0800 Subject: rename vertical-divider to divider-vertical, add more space around the divider --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 055f36028..a8fd8e31b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -59,10 +59,10 @@
      • Using LESS
        • +
      • Customize
        • -
      • Examples
        • -- cgit v1.2.3 From 21bebe77feb9265b06d65e1e941cf7c73c4d90c1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 20:50:51 -0800 Subject: refactor buttons.less --- docs/index.html | 275 ++++++++++++++++++++++++++++---------------------------- 1 file changed, 136 insertions(+), 139 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index a8fd8e31b..66cc0ee48 100644 --- a/docs/index.html +++ b/docs/index.html @@ -74,145 +74,142 @@
        -
        - - -
        -
        -

        Bootstrap, from Twitter

        -

        Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

        -

        - View project on GitHub - Download Bootstrap -

        -
        - - -
        - -
        - -
        -

        Designed for everyone, everywhere.

        -

        Need reasons to love Bootstrap? Look no further.

        -
        -
        - -

        Built for and by nerds

        -

        Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

        -
        -
        - -

        For all skill levels

        -

        Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

        -
        -
        - -

        Cross-everything

        -

        Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

        -
        -
        -
        -
        - -

        12-column grid

        -

        Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

        -
        -
        - -

        Responsive design

        -

        With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

        -
        -
        - -

        Styleguide docs

        -

        Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.

        -
        -
        -
        -
        - -

        Growing library

        -

        Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.

        -
        -
        - -

        Custom jQuery plugins

        -

        What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.

        -
        -
        - -

        Built on LESS

        -

        Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.

        -
        -
        -
        -
        - -

        HTML5

        -

        Built to support new HTML5 elements and syntax.

        -
        -
        - -

        CSS3

        -

        Progressively enhanced components for ultimate style.

        -
        -
        - -

        Open-source

        -

        Built for and maintained by the community via GitHub.

        -
        -
        - -

        Made at Twitter

        -

        Brought to you by an experienced engineer and designer.

        -
        -
        - -
        - -

        Built with Bootstrap.

        -

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

        - - -
        -
        + +
        +
        +

        Bootstrap, from Twitter

        +

        Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

        +

        + View project on GitHub + Download Bootstrap +

        +
        + + +
        + +
        + +
        +

        Designed for everyone, everywhere.

        +

        Need reasons to love Bootstrap? Look no further.

        +
        +
        + +

        Built for and by nerds

        +

        Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

        +
        +
        + +

        For all skill levels

        +

        Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.

        +
        +
        + +

        Cross-everything

        +

        Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

        +
        +
        +
        +
        + +

        12-column grid

        +

        Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

        +
        +
        + +

        Responsive design

        +

        With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

        +
        +
        + +

        Styleguide docs

        +

        Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.

        +
        +
        +
        +
        + +

        Growing library

        +

        Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.

        +
        +
        + +

        Custom jQuery plugins

        +

        What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.

        +
        +
        + +

        Built on LESS

        +

        Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.

        +
        +
        +
        +
        + +

        HTML5

        +

        Built to support new HTML5 elements and syntax.

        +
        +
        + +

        CSS3

        +

        Progressively enhanced components for ultimate style.

        +
        +
        + +

        Open-source

        +

        Built for and maintained by the community via GitHub.

        +
        +
        + +

        Made at Twitter

        +

        Brought to you by an experienced engineer and designer.

        +
        +
        + +
        + +

        Built with Bootstrap.

        +

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

        + + +
        -- cgit v1.2.3 From 0f3a073b8dca534e78c09b71999d5a2632e2245d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 21:15:57 -0800 Subject: *really* refactor the buttons and update them all over the docs --- docs/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 66cc0ee48..71c2970a0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -81,8 +81,8 @@

        Bootstrap, from Twitter

        Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.

        - View project on GitHub - Download Bootstrap + View project on GitHub + Download Bootstrap

        -- cgit v1.2.3 From b7713b83fa25f4b28869fe846b04baac00ca781b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 31 Jan 2012 00:11:19 -0800 Subject: chance icon class --- docs/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 71c2970a0..d74424852 100644 --- a/docs/index.html +++ b/docs/index.html @@ -34,9 +34,9 @@
        - - - + + + Bootstrap
        -- cgit v1.2.3