From 589242604f06a87c78d0a2c324f532d2caaba3f0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 18:56:50 -0700 Subject: document large and small well classes --- docs/components.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 55eb2e4a1..500a72950 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1879,6 +1879,18 @@ <div class="well"> ... </div> + +

Optional classes

+

Control padding and rounded corners with two optional modifier classes.

+
+<div class="well well-large">
+  ...
+</div>
+
+
+<div class="well well-small">
+  ...
+</div>
-- cgit v1.2.3 From 348668ec13c534160e4560325a3b01e101cec704 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 20:25:57 -0700 Subject: add misc helper classes to components css docs --- docs/components.html | 61 +++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 58 insertions(+), 3 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 500a72950..f923cd5e2 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1869,7 +1869,7 @@

Miscellaneous Lightweight utility components

-
+

Wells

Use the well as a simple effect on an element to give it an inset effect.

@@ -1892,14 +1892,69 @@ ... </div> -
-

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<button class="close">&times;</button>

iOS devices require an href="#" for click events if you rather use an anchor.

<a class="close" href="#">&times;</a>
+ +

Helper classes

+

Simple, focused classes for small display or behavior tweaks.

+ +

.pull-left

+

Float an element left

+
+class="pull-left"
+
+
+.pull-left {
+  float: left;
+}
+
+ + +

.pull-right

+

Float an element right

+
+class="pull-right"
+
+
+.pull-right {
+  float: right;
+}
+
+ +

.muted

+

Change an element's color to #999

+
+class="muted"
+
+
+.muted {
+  color: #999;
+}
+
+ +

.clearfix

+

Clear the float on any element

+
+class="clearfix"
+
+
+.clearfix {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+
-- cgit v1.2.3 From c44bd1edf43c43ed8782f956813cb6142cbe068c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 21:08:31 -0700 Subject: revamp docs to have new width, start realigning the base css page to match --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index f923cd5e2..d833fa186 100644 --- a/docs/components.html +++ b/docs/components.html @@ -74,7 +74,7 @@
-
+
-- cgit v1.2.3 From 446f9199c60f3781c653cf39847ef881a4e197d4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 23:31:26 -0700 Subject: updated index page and footer --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index d833fa186..aef8a2ba6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1963,10 +1963,10 @@ class="clearfix"
-- cgit v1.2.3 From b8d8704f90bc7aa7e30280b5495ad506de429464 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 23:34:02 -0700 Subject: button groups and dropdowns to single column --- docs/components.html | 659 +++++++++++++++++++++++++-------------------------- 1 file changed, 321 insertions(+), 338 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index aef8a2ba6..1dccd2082 100644 --- a/docs/components.html +++ b/docs/components.html @@ -101,11 +101,11 @@
  • Labels
  • Badges
    • -
  • Typography
    • +
  • Type
  • Thumbnails
  • Alerts
  • Progress bars
    • -
  • Miscellaneous
    • +
  • Misc
    • @@ -118,29 +118,27 @@

    Button groups Join buttons for more toolbar-like functionality

    -
    -
    -

    Button groups

    -

    Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.

    -

    Best practices

    -

    We recommend the following guidelines for using button groups and toolbars:

    -
      -
    • Always use the same element in a single button group, <a> or <button>.
      • -
    • Don't mix buttons of different colors in the same button group.
      • -
    • Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.
      • -
    -

    Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.

    + +

    Button groups

    +

    Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.

    +

    Best practices

    +

    We recommend the following guidelines for using button groups and toolbars:

    +
      +
    • Always use the same element in a single button group, <a> or <button>.
      • +
    • Don't mix buttons of different colors in the same button group.
      • +
    • Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.
      • +
    +

    Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.

    + +

    Default example

    +

    Here's how the HTML looks for a standard button group built with anchor tag buttons:

    +
    +
    + + +
    -
    -

    Default example

    -

    Here's how the HTML looks for a standard button group built with anchor tag buttons:

    -
    -
    - - - -
    -
    + 
     <div class="btn-group">
   <button class="btn">1</button>
@@ -148,24 +146,24 @@
   <button class="btn">3</button>
 </div>
    -

    Toolbar example

    -

    Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

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

    Toolbar example

    +

    Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

    +
    +
    + + + + +
    +
    + + + +
    +
    + +
    + 
     <div class="btn-toolbar">
   <div class="btn-group">
@@ -173,15 +171,11 @@
   </div>
 </div>
    -
    -
    -

    Checkbox and radio flavors

    -

    Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

    -

    Get the javascript »

    -

    Dropdowns in button groups

    -

    Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

    -
    -
    +

    Checkbox and radio flavors

    +

    Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

    +

    Get the javascript »

    +

    Dropdowns in button groups

    +

    Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

    @@ -194,88 +188,86 @@

    Button dropdowns

    -
    -
    -

    Overview and examples

    -

    Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

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

    Example markup

    -

    Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

    + +

    Overview and examples

    +

    Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +

    Example markup

    +

    Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

     <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -287,182 +279,176 @@
   </ul>
 </div>
    -
    -
    -
    -
    -

    Works with all button sizes

    -

    Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.

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

    Requires javascript

    -

    Button dropdowns require the Bootstrap dropdown plugin to function.

    -

    In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.

    -
    -
    + +

    Works with all button sizes

    +

    Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.

    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +

    Requires javascript

    +

    Button dropdowns require the Bootstrap dropdown plugin to function.

    +

    In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.

    +

    Split button dropdowns

    -
    -
    -

    Overview and examples

    -

    Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

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

    Sizes

    -

    Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

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

    Overview and examples

    +

    Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

    +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +

    Sizes

    +

    Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    + 
     <div class="btn-group">
   ...
@@ -471,10 +457,9 @@
   </ul>
 </div>
    -
    -
    -

    Example markup

    -

    We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.

    + +

    Example markup

    +

    We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.

     <div class="btn-group">
   <button class="btn">Action</button>
@@ -486,32 +471,32 @@
   </ul>
 </div>
    -

    Dropup menus

    -

    Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

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

    Dropup menus

    +

    Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

    +
    +
    + + + +
    +
    + + + +
    + 
     <div class="btn-group dropup">
   <button class="btn">Dropup</button>
@@ -524,8 +509,6 @@
 </div>
    -
    -
    -- cgit v1.2.3 From 47e2c43401bfe0cae3a62ee215af75c4ea8333a0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 23:37:18 -0700 Subject: navs tabs pills to single column --- docs/components.html | 450 ++++++++++++++++++++++++--------------------------- 1 file changed, 211 insertions(+), 239 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 1dccd2082..281cea964 100644 --- a/docs/components.html +++ b/docs/components.html @@ -521,23 +521,21 @@

    Lightweight defaults Same markup, different classes

    -
    -
    -

    Powerful base class

    -

    All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.

    -

    When to use

    -

    Tabs and pills are great for sections of content or navigating between pages of related content.

    -

    Component alignment

    -

    To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

    -
    -
    -

    Basic tabs

    -

    Take a regular <ul> of links and add .nav-tabs:

    - + +

    Powerful base class

    +

    All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.

    +

    When to use

    +

    Tabs and pills are great for sections of content or navigating between pages of related content.

    +

    Component alignment

    +

    To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

    + +

    Basic tabs

    +

    Take a regular <ul> of links and add .nav-tabs:

    + 
     <ul class="nav nav-tabs">
   <li class="active">
@@ -547,15 +545,14 @@
   <li><a href="#">...</a></li>
 </ul>
    -
    -
    -

    Basic pills

    -

    Take that same HTML, but use .nav-pills instead:

    - + +

    Basic pills

    +

    Take that same HTML, but use .nav-pills instead:

    + 
     <ul class="nav nav-pills">
   <li class="active">
@@ -565,66 +562,58 @@
   <li><a href="#">...</a></li>
 </ul>
    -
    -
    +

    Stackable Make tabs or pills vertical

    -
    -
    -

    How to stack 'em

    -

    As tabs and pills are horizontal by default, just add a second class, .nav-stacked, to make them appear vertically stacked.

    -
    -
    -

    Stacked tabs

    - + +

    How to stack 'em

    +

    As tabs and pills are horizontal by default, just add a second class, .nav-stacked, to make them appear vertically stacked.

    + +

    Stacked tabs

    + 
     <ul class="nav nav-tabs nav-stacked">
   ...
 </ul>
    -
    -
    -

    Stacked pills

    - + +

    Stacked pills

    + 
     <ul class="nav nav-pills nav-stacked">
   ...
 </ul>
    -
    -

    Dropdowns For advanced nav components

    -
    -
    -

    Rich menus made easy

    -

    Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.

    -

    Head over to the Javascript page to read the docs on initializing dropdowns in Bootstrap.

    -
    -
    -

    Tabs with dropdowns

    -
    -
    -

    Pills with dropdowns

    -
    -

    Nav lists Build simple stacked navs, great for sidebars

    -
    -
    -

    Application-style navigation

    -

    Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

    -

    Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.

    -
    -

    With icons

    -

    Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.

    -

    Horizontal dividers

    -

    Add a horizontal divider by creating an empty list item with the class .divider, like so:

    + +

    Application-style navigation

    +

    Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

    +

    Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.

    +
    +

    With icons

    +

    Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.

    +

    Horizontal dividers

    +

    Add a horizontal divider by creating an empty list item with the class .divider, like so:

     <ul class="nav nav-list">
   ...
@@ -693,23 +678,22 @@
   ...
 </ul>
    -
    -
    -

    Example nav list

    -

    Take a list of links and add class="nav nav-list":

    -
    - -
    + +

    Example nav list

    +

    Take a list of links and add class="nav nav-list":

    +
    + + 
     <ul class="nav nav-list">
   <li class="nav-header">
@@ -724,23 +708,22 @@
   ...
 </ul>
    -
    -
    -

    Example with icons

    -

    Same example, but with <i> tags for icons.

    -
    - -
    + +

    Example with icons

    +

    Same example, but with <i> tags for icons.

    +
    + + 
     <ul class="nav nav-list">
   ...
@@ -753,49 +736,45 @@
   ...
 </ul>
    -
    -

    Tabbable nav Bring tabs to life via javascript

    -
    -
    -

    What's included

    -

    Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.

    -

    Changing between them is easy and only requires changing very little markup.

    -
    -

    Fade in tabs

    -

    To make tabs fade in, add .fade to each .tab-pane.

    -
    -

    Requires jQuery plugin

    -

    All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.

    -

    Get the javascript →

    + +

    What's included

    +

    Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.

    +

    Changing between them is easy and only requires changing very little markup.

    +
    +

    Fade in tabs

    +

    To make tabs fade in, add .fade to each .tab-pane.

    +
    +

    Requires jQuery plugin

    +

    All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.

    +

    Get the javascript →

    + +

    Tabbable example

    +

    To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.

    +
    + +
    +
    +

    I'm in Section 1.

    +
    +
    +

    Howdy, I'm in Section 2.

    +
    +
    +

    What up girl, this is Section 3.

    +
    -
    -

    Tabbable example

    -

    To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.

    -
    - -
    -
    -

    I'm in Section 1.

    -
    -
    -

    Howdy, I'm in Section 2.

    -
    -
    -

    What up girl, this is Section 3.

    -
    -
    -
    -

    For right or left aligned tabs, wrap the .nav-tabs and .tab-content in .tabbable.

    +
    +

    For right or left aligned tabs, wrap the .nav-tabs and .tab-content in .tabbable.

    -

    Straightforward markup

    -

    Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.

    +

    Straightforward markup

    +

    Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.

     <div class="tabbable"> <!-- Only required for left/right tabs -->
   <ul class="nav nav-tabs">
@@ -812,33 +791,30 @@
   </div>
 </div>
    -
    -

    Tabbable in any direction

    -
    -
    -

    Tabs on the bottom

    -

    Flip the order of the HTML and add a class to put tabs on the bottom.

    -
    -
    -
    -

    I'm in Section A.

    -
    -
    -

    Howdy, I'm in Section B.

    -
    -
    -

    What up girl, this is Section C.

    -
    -
    - -
    + +

    Tabs on the bottom

    +

    Flip the order of the HTML and add a class to put tabs on the bottom.

    +
    +
    +
    +

    I'm in Section A.

    +
    +
    +

    Howdy, I'm in Section B.

    +
    +
    +

    What up girl, this is Section C.

    +
    +
    + + 
     <div class="tabbable tabs-below">
   <div class="tab-content">
@@ -849,28 +825,27 @@
   </ul>
 </div>
    + +

    Tabs on the left

    +

    Swap the class to put tabs on the left.

    +
    + +
    +
    +

    I'm in Section A.

    +
    +
    +

    Howdy, I'm in Section B.

    +
    +
    +

    What up girl, this is Section C.

    +
    -
    -

    Tabs on the left

    -

    Swap the class to put tabs on the left.

    -
    - -
    -
    -

    I'm in Section A.

    -
    -
    -

    Howdy, I'm in Section B.

    -
    -
    -

    What up girl, this is Section C.

    -
    -
    -
    + 
     <div class="tabbable tabs-left">
   <ul class="nav nav-tabs">
@@ -881,28 +856,27 @@
   </div>
 </div>
    + +

    Tabs on the right

    +

    Swap the class to put tabs on the right.

    +
    + +
    +
    +

    I'm in Section A.

    +
    +
    +

    Howdy, I'm in Section B.

    +
    +
    +

    What up girl, this is Section C.

    +
    -
    -

    Tabs on the right

    -

    Swap the class to put tabs on the right.

    -
    - -
    -
    -

    I'm in Section A.

    -
    -
    -

    Howdy, I'm in Section B.

    -
    -
    -

    What up girl, this is Section C.

    -
    -
    -
    + 
     <div class="tabbable tabs-right">
   <ul class="nav nav-tabs">
@@ -913,8 +887,6 @@
   </div>
 </div>
    -
    -
    -- cgit v1.2.3 From de53f62a0464f92fe0c175478dc38696eebbda99 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 23:57:48 -0700 Subject: more changes to js and components, playing with new docs subnav --- docs/components.html | 937 ++++++++++++++++++++++++--------------------------- 1 file changed, 433 insertions(+), 504 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 281cea964..72b86200f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -908,13 +908,12 @@ - Project name + Title
    -
    -
    -

    Navbar scaffolding

    -

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

    + +

    Navbar scaffolding

    +

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

     <div class="navbar">
   <div class="navbar-inner">
@@ -963,47 +961,42 @@
   </div>
 </div>
    -

    Fixed navbar

    -

    Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.

    -
    -
    +

    Fixed navbar

    +

    Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.

     <div class="navbar navbar-fixed-top">
   ...
 </div>
    -
    - 
     <div class="navbar navbar-fixed-bottom">
   ...
 </div>
    -
    -
    -

    When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

    -

    Brand name

    -

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

    + +

    When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

    +

    Brand name

    +

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

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

    Forms in navbar

    -

    To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.

    +

    Forms in navbar

    +

    To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.

     <form class="navbar-form pull-left">
   <input type="text" class="span2">
 </form>
    -

    For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.

    +

    For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.

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

    Optional responsive variation

    -

    Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.

    +

    Optional responsive variation

    +

    Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.

     <div class="navbar">
   <div class="navbar-inner">
@@ -1028,14 +1021,12 @@
   </div>
 </div>
    -
    - Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file. -
    +
    + Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file. +
    -
    -
    -

    Nav links

    -

    Nav items are simple to add via unordered lists.

    +

    Nav links

    +

    Nav items are simple to add via unordered lists.

     <ul class="nav">
   <li class="active">
@@ -1045,7 +1036,7 @@
   <li><a href="#">Link</a></li>
 </ul>
    -

    You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:

    +

    You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:

     <ul class="nav">
   ...
@@ -1053,10 +1044,10 @@
   ...
 </ul>
    -

    Component alignment

    -

    To align a nav, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

    -

    Adding dropdown menus

    -

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

    +

    Component alignment

    +

    To align a nav, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

    +

    Adding dropdown menus

    +

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

     <ul class="nav">
   <li class="dropdown">
@@ -1072,12 +1063,10 @@
   </li>
 </ul>
    -

    Get the javascript →

    -
    -

    Text in the navbar

    -

    Wrap strings of text in a <.navbar-text>, usually on a <p> tag for proper leading and color.

    -
    -
    +

    Get the javascript →

    +
    +

    Text in the navbar

    +

    Wrap strings of text in a <.navbar-text>, usually on a <p> tag for proper leading and color.

    @@ -1090,29 +1079,26 @@

    Breadcrumbs

    -
    -
    -

    Why use them

    -

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

    +

    Why use them

    +

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

    -

    Examples

    -

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

    -
      -
    • Home
      • -
    -
      -
    • Home /
      • -
    • Library
      • -
    - -
    -
    -

    Markup

    -

    HTML is your standard unordered list with links.

    +

    Examples

    +

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

    +
      +
    • Home
      • +
    +
      +
    • Home /
      • +
    • Library
      • +
    + + +

    Markup

    +

    HTML is your standard unordered list with links.

     <ul class="breadcrumb">
   <li>
@@ -1124,8 +1110,6 @@
   <li class="active">Data</li>
 </ul>
    -
    -
    @@ -1139,59 +1123,56 @@

    Multicon-page pagination

    -
    -
    -

    When to use

    -

    Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

    -

    Stateful page links

    -

    Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.

    -

    Flexible alignment

    -

    Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

    -
    -
    -

    Examples

    -

    The default pagination component is flexible and works in a number of variations.

    - - - - -
    -
    -

    Markup

    -

    Wrapped in a <div>, pagination is just a <ul>.

    + +

    When to use

    +

    Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

    +

    Stateful page links

    +

    Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.

    +

    Flexible alignment

    +

    Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

    + +

    Examples

    +

    The default pagination component is flexible and works in a number of variations.

    + + + + + +

    Markup

    +

    Wrapped in a <div>, pagination is just a <ul>.

     <div class="pagination">
   <ul>
@@ -1206,24 +1187,20 @@
   </ul>
 </div>
    -
    -

    Pager For quick previous and next links

    -
    -
    -

    About pager

    -

    The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.

    -

    Optional disabled state

    -

    Pager links also use the general .disabled class from the pagination.

    -
    -
    -

    Default example

    -

    By default, the pager centers links.

    - + +

    About pager

    +

    The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.

    +

    Optional disabled state

    +

    Pager links also use the general .disabled class from the pagination.

    + +

    Default example

    +

    By default, the pager centers links.

    + 
     <ul class="pager">
   <li>
@@ -1234,14 +1211,13 @@
   </li>
 </ul>
    -
    -
    -

    Aligned links

    -

    Alternatively, you can align each link to the sides:

    - + +

    Aligned links

    +

    Alternatively, you can align each link to the sides:

    + 
     <ul class="pager">
   <li class="previous">
@@ -1252,8 +1228,7 @@
   </li>
 </ul>
    -
    -
    + @@ -1332,92 +1307,89 @@

    Badges Indicators and unread counts

    -
    -
    -

    About

    -

    Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.

    -
    -
    -

    Available classes

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameExampleMarkup
    - Default - - 1 - - <span class="badge">1</span> -
    - Success - - 2 - - <span class="badge badge-success">2</span> -
    - Warning - - 4 - - <span class="badge badge-warning">4</span> -
    - Important - - 6 - - <span class="badge badge-important">6</span> -
    - Info - - 8 - - <span class="badge badge-info">8</span> -
    - Inverse - - 10 - - <span class="badge badge-inverse">10</span> -
    -
    -
    + +

    About

    +

    Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.

    + +

    Available classes

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameExampleMarkup
    + Default + + 1 + + <span class="badge">1</span> +
    + Success + + 2 + + <span class="badge badge-success">2</span> +
    + Warning + + 4 + + <span class="badge badge-warning">4</span> +
    + Important + + 6 + + <span class="badge badge-important">6</span> +
    + Info + + 8 + + <span class="badge badge-info">8</span> +
    + Inverse + + 10 + + <span class="badge badge-inverse">10</span> +
    + @@ -1429,11 +1401,10 @@

    Typographic components Page header and hero unit for segmenting content

    Hero unit

    -
    -
    -

    Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.

    -

    Markup

    -

    Wrap your content in a div like so:

    + +

    Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.

    +

    Markup

    +

    Wrap your content in a div like so:

     <div class="hero-unit">
   <h1>Heading</h1>
@@ -1445,31 +1416,29 @@
   </p>
 </div>
    + +
    +
    +

    Hello, world!

    +

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    +

    Learn more

    -
    -
    -

    Hello, world!

    -

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    -

    Learn more

    -
    -
    -
    +
    +

    Page header

    -
    -
    -

    A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

    + +

    A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

    +
    +
    +

    Example page header Subtext for header

    -
    -
    -

    Example page header Subtext for header

    -
    + 
     <div class="page-header">
   <h1>Example page header</h1>
 </div>
    -
    -
    + @@ -1481,80 +1450,67 @@

    Thumbnails Grids of images, videos, text, and more

    -
    -
    -

    Default thumbnails

    -

    By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

    - -
    -
    -

    Highly customizable

    -

    With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

    -
      -
    • -
      - -
      -
      Thumbnail label
      -

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      -

      Action Action

      -
      -
      -
      • -
    • -
      - -
      -
      Thumbnail label
      -

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      -

      Action Action

      -
      -
      -
      • -
    -
    -
    +

    Default thumbnails

    +

    By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

    + -
    -
    -

    Why use thumbnails

    -

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    -
    -
    -

    Simple, flexible markup

    -

    Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

    -
    -
    -

    Uses grid column sizes

    -

    Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

    -
    -
    +

    Highly customizable

    +

    With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

    +
      +
    • +
      + +
      +
      Thumbnail label
      +

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      +

      Action Action

      +
      +
      +
      • +
    • +
      + +
      +
      Thumbnail label
      +

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      +

      Action Action

      +
      +
      +
      • +
    + +

    Why use thumbnails

    +

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    -
    -
    -

    The markup

    -

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

    +

    Simple, flexible markup

    +

    Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

    + +

    Uses grid column sizes

    +

    Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

    + +

    The markup

    +

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

     <ul class="thumbnails">
   <li class="span3">
@@ -1565,7 +1521,7 @@
   ...
 </ul>
    -

    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

    +

    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

     <ul class="thumbnails">
   <li class="span3">
@@ -1578,44 +1534,41 @@
   ...
 </ul>
    -
    -
    -

    More examples

    -

    Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

    - -
    -
    + +

    More examples

    +

    Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

    + @@ -1629,37 +1582,35 @@

    Lightweight defaults

    -
    -
    -

    Rewritten base class

    -

    With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.

    -

    Single alert message

    -

    For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.

    -
    -

    Goes great with javascript

    -

    Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

    -

    Get the plugin »

    -
    -
    -

    Example alerts

    -

    Wrap your message and an optional close icon in a div with simple class.

    -
    - - Warning! Best check yo self, you're not looking too good. -
    + +

    Rewritten base class

    +

    With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.

    +

    Single alert message

    +

    For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.

    +
    +

    Goes great with javascript

    +

    Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

    +

    Get the plugin »

    + +

    Example alerts

    +

    Wrap your message and an optional close icon in a div with simple class.

    +
    + + Warning! Best check yo self, you're not looking too good. + 
     <div class="alert">
   <button class="close" data-dismiss="alert">×</button>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>
    -

    Heads up! iOS devices require an href="#" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

    -

    Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

    -
    - -

    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.

    -
    +

    Heads up! iOS devices require an href="#" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

    +

    Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

    +
    + +

    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.

    + 
     <div class="alert alert-block">
   <a class="close" data-dismiss="alert" href="#">×</a>
@@ -1667,48 +1618,41 @@
   Best check yo self, you're not...
 </div>
    -
    -

    Contextual alternatives Add optional classes to change an alert's connotation

    -
    -
    -

    Error or danger

    -
    - - Oh snap! Change a few things up and try submitting again. -
    + +

    Error or danger

    +
    + + Oh snap! Change a few things up and try submitting again. + 
     <div class="alert alert-error">
   ...
 </div>
    -
    -
    -

    Success

    -
    - - Well done! You successfully read this important alert message. -
    + +

    Success

    +
    + + Well done! You successfully read this important alert message. + 
     <div class="alert alert-success">
   ...
 </div>
    -
    -
    -

    Information

    -
    - - Heads up! This alert needs your attention, but it's not super important. -
    + +

    Information

    +
    + + Heads up! This alert needs your attention, but it's not super important. + 
     <div class="alert alert-info">
   ...
 </div>
    -
    -
    @@ -1722,39 +1666,36 @@

    Examples and markup

    -
    -
    -

    Basic

    -

    Default progress bar with a vertical gradient.

    -
    -
    -
    + +

    Basic

    +

    Default progress bar with a vertical gradient.

    +
    +
    + 
     <div class="progress">
   <div class="bar"
        style="width: 60%;"></div>
 </div>
    -
    -
    -

    Striped

    -

    Uses a gradient to create a striped effect (no IE).

    -
    -
    -
    + +

    Striped

    +

    Uses a gradient to create a striped effect (no IE).

    +
    +
    + 
     <div class="progress progress-striped">
   <div class="bar"
        style="width: 20%;"></div>
 </div>
    -
    -
    -

    Animated

    -

    Takes the striped example and animates it (no IE).

    -
    -
    -
    + +

    Animated

    +

    Takes the striped example and animates it (no IE).

    +
    +
    + 
     <div class="progress progress-striped
      active">
@@ -1762,55 +1703,47 @@
        style="width: 40%;"></div>
 </div>
    -
    -

    Options and browser support

    -
    -
    -

    Additional colors

    -

    Progress bars use some of the same button and alert classes for consistent styles.

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

    Striped bars

    -

    Similar to the solid colors, we have varied striped progress bars.

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

    Behavior

    -

    Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

    -

    If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

    -
    -
    -

    Browser support

    -

    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

    -

    Opera and IE do not support animations at this time.

    -
    + +

    Additional colors

    +

    Progress bars use some of the same button and alert classes for consistent styles.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +

    Striped bars

    +

    Similar to the solid colors, we have varied striped progress bars.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Behavior

    +

    Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

    +

    If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

    + +

    Browser support

    +

    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

    +

    Opera and IE do not support animations at this time.

    + @@ -1823,20 +1756,19 @@

    Miscellaneous Lightweight utility components

    -
    -
    -

    Wells

    -

    Use the well as a simple effect on an element to give it an inset effect.

    -
    - Look, I'm in a well! -
    + +

    Wells

    +

    Use the well as a simple effect on an element to give it an inset effect.

    +
    + Look, I'm in a well! + 
     <div class="well">
   ...
 </div>
    -

    Optional classes

    -

    Control padding and rounded corners with two optional modifier classes.

    +

    Optional classes

    +

    Control padding and rounded corners with two optional modifier classes.

     <div class="well well-large">
   ...
@@ -1847,18 +1779,18 @@
   ...
 </div>
    -

    Close icon

    -

    Use the generic close icon for dismissing content like modals and alerts.

    -

    +

    Close icon

    +

    Use the generic close icon for dismissing content like modals and alerts.

    + 

    <button class="close">&times;</button>
    -

    iOS devices require an href="#" for click events if you rather use an anchor.

    +

    iOS devices require an href="#" for click events if you rather use an anchor.

    <a class="close" href="#">&times;</a>
    -

    Helper classes

    -

    Simple, focused classes for small display or behavior tweaks.

    +

    Helper classes

    +

    Simple, focused classes for small display or behavior tweaks.

    -

    .pull-left

    -

    Float an element left

    +

    .pull-left

    +

    Float an element left

     class="pull-left"
    @@ -1868,9 +1800,8 @@ class="pull-left" } - -

    .pull-right

    -

    Float an element right

    +

    .pull-right

    +

    Float an element right

     class="pull-right"
    @@ -1880,8 +1811,8 @@ class="pull-right" } -

    .muted

    -

    Change an element's color to #999

    +

    .muted

    +

    Change an element's color to #999

     class="muted"
    @@ -1891,8 +1822,8 @@ class="muted" } -

    .clearfix

    -

    Clear the float on any element

    +

    .clearfix

    +

    Clear the float on any element

     class="clearfix"
    @@ -1910,8 +1841,6 @@ class="clearfix" } -
    -
    -- cgit v1.2.3 From dd127611e12b9bab9d6da0c24532c5cd151108fd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Jun 2012 00:46:16 -0700 Subject: two col scaffolding rev --- docs/components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 72b86200f..1e324bbfd 100644 --- a/docs/components.html +++ b/docs/components.html @@ -74,7 +74,7 @@
    -
    +
    @@ -1847,10 +1847,10 @@ class="clearfix"
    -- cgit v1.2.3 From 22918f8f92d29a12a42db4e357f3d439e41bad0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Jun 2012 17:16:17 -0700 Subject: more tweaks to layouts and some docs styles --- docs/components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 1e324bbfd..72b86200f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -74,7 +74,7 @@
    -
    +
    @@ -1847,10 +1847,10 @@ class="clearfix"
    -- cgit v1.2.3 From 8ee067952202cc8a6e4865eab46598e346ad3971 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Jun 2012 18:25:46 -0700 Subject: updated javascripts for first pass at single column --- docs/components.html | 119 ++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 99 insertions(+), 20 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 72b86200f..b2f2d0afc 100644 --- a/docs/components.html +++ b/docs/components.html @@ -74,6 +74,89 @@
    +
    + + +
    +
    -
  • - Scaffolding - -
    • -
  • - Base CSS - -
    • -
  • - Components - -
    • -
  • - Javascript - -
    • -
  • - LESS - -
    • -
  • - Customize -
    • -
  • - Examples -
    • - -
    -
    -
    -
    -
    - - Bootstrap -
    - -
    -
    -
    + + +
    + +
    @@ -84,30 +117,6 @@ - -
    -
    -

    Contents

    -
      -
    1. Button groups
      2. -
    2. Button dropdowns
      3. -
    3. Nav, tabs, pills
      4. -
    4. Navbar
      5. -
    5. Breadcrumbs
      6. -
    6. Pagination
      7. -
    7. Labels
      8. -
    8. Badges
      9. -
    9. Type
      10. -
    10. Thumbnails
      11. -
    11. Alerts
      12. -
    12. Progress bars
      13. -
    13. Misc
      14. -
    -
    -
    - - -
    @@ -1843,10 +1852,10 @@ class="clearfix"
    -- cgit v1.2.3 From a1aa2b188a0267290cb17c2a0b5d4ad8b7c693c2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 10:20:52 -0700 Subject: more content changes to docs --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index f0856a19f..63cfac9ae 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1852,7 +1852,7 @@ class="clearfix"
    -

    Back to top

    +

    Back to top

    Designed and built with all the love in the world @twitter by @mdo and @fat.

    Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.

    Icons from Glyphicons Free, licensed under CC BY 3.0.

    -- cgit v1.2.3 From ff6dd0cf56c1b50b7fa7cba35aab4d13cb251f05 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 14:01:03 -0700 Subject: nav and content tweaks --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 63cfac9ae..15df4f5ce 100644 --- a/docs/components.html +++ b/docs/components.html @@ -27,7 +27,7 @@ - +
    -- cgit v1.2.3 From df869f1eb074f5c2baaaf744f333c5f5d6ce0bee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 21:45:37 -0700 Subject: fix grids --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 15df4f5ce..63cfac9ae 100644 --- a/docs/components.html +++ b/docs/components.html @@ -27,7 +27,7 @@ - +
    -- cgit v1.2.3 From c1c7528dd9f0617cb65bc5fac7aa6b2cfc2eb822 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 21:48:03 -0700 Subject: drop the side nav, restore topbar --- docs/components.html | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 63cfac9ae..8716963bd 100644 --- a/docs/components.html +++ b/docs/components.html @@ -29,6 +29,50 @@ + +
    +
    +
    + + Bootstrap +
    + +
    +
    +
    +
    +
      -- cgit v1.2.3 From bba0b34c36ae54e923cf89fe17914e715aaa9746 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 22:10:36 -0700 Subject: restore top navs entirely --- docs/components.html | 35 +++++++++++++++++++++++++++++++---- 1 file changed, 31 insertions(+), 4 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 8716963bd..afd8d60f4 100644 --- a/docs/components.html +++ b/docs/components.html @@ -33,7 +33,7 @@ ================================================== -->
      -
      +
      -
      - - -
      -
      +
      -- cgit v1.2.3 From f2e39233f54a733df54d5d998abd79233e0f143f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 10 Jun 2012 15:12:02 -0700 Subject: rewrite alerts and progress bars sections --- docs/components.html | 238 +++++++++++++++++++++++++++++++++------------------ 1 file changed, 156 insertions(+), 82 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index fc8857041..312e03c20 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1579,50 +1579,68 @@

      Alerts Styles for success, warning, and error messages

      -

      Lightweight defaults

      - -

      Rewritten base class

      -

      With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.

      -

      Single alert message

      -

      For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.

      -
      -

      Goes great with javascript

      -

      Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

      -

      Get the plugin »

      - -

      Example alerts

      -

      Wrap your message and an optional close icon in a div with simple class.

      -
      - - Warning! Best check yo self, you're not looking too good. +

      Default alert

      +

      Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

      +
      +
      + + Warning! Best check yo self, you're not looking too good. + 
       <div class="alert">
-  <button class="close" data-dismiss="alert">×</button>
+  <button type="button" class="close" data-dismiss="alert">×</button>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>
      -

      Heads up! iOS devices require an href="#" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

      -

      Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

      -
      - -

      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.

      + +

      Dismiss buttons

      +

      Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

      +
      +<a href="#" class="close" data-dismiss="alert">×</button>
+
      +

      Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

      +
      +<button type="button" class="close" data-dismiss="alert">×</button>
+
      + +

      Dismiss alerts via javascript

      +

      Use the alerts jQuery plugin for quick and easy dismissal of alerts.

      + + +
      + + +

      Options

      +

      For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

      +
      +
      + +

      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.

      + 
       <div class="alert alert-block">
-  <a class="close" data-dismiss="alert" href="#">×</a>
-  <h4 class="alert-heading">Warning!</h4>
+  <a class="close" data-dismiss="alert" href="#">&times;</a>
+  <h4>Warning!</h4>
   Best check yo self, you're not...
 </div>
      -

      Contextual alternatives Add optional classes to change an alert's connotation

      + +
      + + +

      Contextual alternatives

      +

      Add optional classes to change an alert's connotation.

      Error or danger

      -
      - - Oh snap! Change a few things up and try submitting again. +
      +
      + + Oh snap! Change a few things up and try submitting again. + 
       <div class="alert alert-error">
@@ -1631,9 +1649,11 @@

      Success

      -
      - - Well done! You successfully read this important alert message. +
      +
      + + Well done! You successfully read this important alert message. + 
       <div class="alert alert-success">
@@ -1642,9 +1662,11 @@

      Information

      -
      - - Heads up! This alert needs your attention, but it's not super important. +
      +
      + + Heads up! This alert needs your attention, but it's not super important. + 
       <div class="alert alert-info">
@@ -1667,78 +1689,116 @@
 
   
      Basic
      
   
      Default progress bar with a vertical gradient.
      
-  
      
-    
      
+  
      
+    
      
+      
      
+    
      
   
      
 
       <div class="progress">
-  <div class="bar"
-       style="width: 60%;"></div>
+  <div class="bar" style="width: 60%;"></div>
 </div>
 
      
 
   
      Striped
      
-  
      Uses a gradient to create a striped effect (no IE).
      
-  
      
-    
      
+  
      Uses a gradient to create a striped effect. Not available in IE7-8.
      
+  
      
+    
      
+      
      
+    
      
   
      
 
       <div class="progress progress-striped">
-  <div class="bar"
-       style="width: 20%;"></div>
+  <div class="bar" style="width: 20%;"></div>
 </div>
 
      
 
   
      Animated
      
-  
      Takes the striped example and animates it (no IE).
      
-  
      
-    
      
+  
      Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.
      
+  
      
+    
      
+      
      
+    
      
   
      
 
      -<div class="progress progress-striped
-     active">
-  <div class="bar"
-       style="width: 40%;"></div>
+<div class="progress progress-striped active">
+  <div class="bar" style="width: 40%;"></div>
 </div>
 
      
 
-  
      Options and browser support
      
+
+  
      
+
+
+  
      Options
      
 
   
      Additional colors
      
   
      Progress bars use some of the same button and alert classes for consistent styles.
      
-  
      
-    
      
-  
      
-  
      
-    
      
-  
      
-  
      
-    
      
-  
      
-  
      
-    
      
+  
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
   
      
+
      +<div class="progress progress-info">
+  <div class="bar" style="width: 20%"></div>
+</div>
+<div class="progress progress-success">
+  <div class="bar" style="width: 40%"></div>
+</div>
+<div class="progress progress-warning">
+  <div class="bar" style="width: 60%"></div>
+</div>
+<div class="progress progress-danger">
+  <div class="bar" style="width: 80%"></div>
+</div>
+
      
 
   
      Striped bars
      
   
      Similar to the solid colors, we have varied striped progress bars.
      
-  
      
-    
      
-  
      
-  
      
-    
      
-  
      
-  
      
-    
      
-  
      
-  
      
-    
      
+  
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
   
      
+
      +<div class="progress progress-info progress-striped">
+  <div class="bar" style="width: 20%"></div>
+</div>
+<div class="progress progress-success progress-striped">
+  <div class="bar" style="width: 40%"></div>
+</div>
+<div class="progress progress-warning progress-striped">
+  <div class="bar" style="width: 60%"></div>
+</div>
+<div class="progress progress-danger progress-striped">
+  <div class="bar" style="width: 80%"></div>
+</div>
+
      
+
 
-  
      Behavior
      
-  
      Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
      
-  
      If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.
      
+  
      
 
-  
      Browser support
      
+
+  
      Browser support
      
   
      Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.
      
   
      Opera and IE do not support animations at this time.
      
 
@@ -1757,21 +1817,33 @@
 
   
      Wells
      
   
      Use the well as a simple effect on an element to give it an inset effect.
      
-  
      
-    Look, I'm in a well!
+  
      
+    
      
+      Look, I'm in a well!
+    
      
   
      
 
       <div class="well">
   ...
 </div>
 
      
-  
      Optional classes
      
+  
      Optional classes
      
   
      Control padding and rounded corners with two optional modifier classes.
      
+  
      
+    
      
+      Look, I'm in a well!
+    
      
+  
      
 
       <div class="well well-large">
   ...
 </div>
 
      
+  
      
+    
      
+      Look, I'm in a well!
+    
      
+  
      
 
       <div class="well well-small">
   ...
@@ -1779,7 +1851,9 @@
 
      
   
      Close icon
      
   
      Use the generic close icon for dismissing content like modals and alerts.
      
-  
      
+  
      
+    
      
+  
      
 
      <button class="close">&times;</button>
      
   
      iOS devices require an href="#" for click events if you rather use an anchor.
      
 
      <a class="close" href="#">&times;</a>
      
-- 
cgit v1.2.3


From 3985379ccabcdcf9f96432ba37be2dd38ed117bc Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 10 Jun 2012 15:14:21 -0700
Subject: rearrange hero unit section

---
 docs/components.html | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 312e03c20..5fae8d4b5 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1398,11 +1398,16 @@
   
      
     
      Typographic components Page header and hero unit for segmenting content
      
   
      
-  
      Hero unit
      
 
-  
      Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.
      
-  
      Markup
      
-  
      Wrap your content in a div like so:
      
+  
      Hero unit
      
+  
      A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.
      
+  
      
+    
      
+      
      Hello, world!
      
+      
      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
      
+      
      Learn more
      
+    
      
+  
      
 
       <div class="hero-unit">
   <h1>Heading</h1>
@@ -1415,16 +1420,7 @@
 </div>
 
      
 
-  
      
-    
      
-      
      Hello, world!
      
-      
      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
      
-      
      Learn more
      
-    
      
-  
      
-
   
      Page header
      
-
   
      A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).
      
   
      
     
      
-- 
cgit v1.2.3


From 0c817bf5e2ab635777c17e00caed829e6939f34f Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 10 Jun 2012 16:46:46 -0700
Subject: redo pagination and breadcrumbs

---
 docs/components.html | 229 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 137 insertions(+), 92 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 5fae8d4b5..5ff824476 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1077,34 +1077,26 @@
     
      Breadcrumbs 
      
   
      
 
-  
      Why use them
      
-  
      Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.
      
-
-  
      Examples
      
+  
      Examples
      
   
      A single example shown as it might be displayed across multiple pages.
      
-  
        
-    
      • Home
        • 
-  
      
-  
        
-    
      • Home /
        • 
-    
      • Library
        • 
-  
      
-  
-
-  
      Markup
      
-  
      HTML is your standard unordered list with links.
      
+  
      
+    
        
+      
      • Home
        • 
+    
      
+    
        
+      
      • Home /
        • 
+      
      • Library
        • 
+    
      
+    
+  
      
 
       <ul class="breadcrumb">
-  <li>
-    <a href="#">Home</a> <span class="divider">/</span>
-  </li>
-  <li>
-    <a href="#">Library</a> <span class="divider">/</span>
-  </li>
+  <li><a href="#">Home</a> <span class="divider">/</span></li>
+  <li><a href="#">Library</a> <span class="divider">/</span></li>
   <li class="active">Data</li>
 </ul>
 
      
@@ -1120,85 +1112,119 @@
     
      Pagination Two options for paging through content
      
   
      
 
-  
      Multicon-page pagination
      
-
-  
      When to use
      
-  
      Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
      
-  
      Stateful page links
      
-  
      Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.
      
-  
      Flexible alignment
      
-  
      Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.
      
-
-  
      Examples
      
-  
      The default pagination component is flexible and works in a number of variations.
      
-  
-  
-  
-  
 
-  
      Nav links
      
-  
      Nav items are simple to add via unordered lists.
      
-
      -<ul class="nav">
-  <li class="active">
-    <a href="#">Home</a>
-  </li>
-  <li><a href="#">Link</a></li>
-  <li><a href="#">Link</a></li>
-</ul>
-
      
-  
      You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:
      
-
      -<ul class="nav">
-  ...
-  <li class="divider-vertical"></li>
-  ...
-</ul>
-
      
-  
      Component alignment
      
-  
      To align a nav, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.
      
-  
      Adding dropdown menus
      
-  
      Adding dropdowns and dropups to the nav is super simple, but does require the use of our javascript plugin.
      
-
      -<ul class="nav">
-  <li class="dropdown">
-    <a href="#"
-          class="dropdown-toggle"
-          data-toggle="dropdown">
-          Account
-          <b class="caret"></b>
-    </a>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </li>
-</ul>
-
      
-  
      Get the javascript →
      
-  
      
-  
      Text in the navbar
      
-  
      Wrap strings of text in a <.navbar-text>, usually on a <p> tag for proper leading and color.
      
-
 
 
 
-- 
cgit v1.2.3


From 081a07c168b095c2e9d34e1a77164cf9ac21f449 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 10 Jun 2012 20:50:49 -0700
Subject: updated button groups section

---
 docs/components.html | 57 +++++++++++++++++++++++++++++++---------------------
 1 file changed, 34 insertions(+), 23 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 933d89a36..4d7b6d3bb 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -110,6 +110,7 @@
 
 
 
+
 
 
      
@@ -117,10 +118,9 @@
     
      Button groups Join buttons for more toolbar-like functionality
      
   
      
 
-  
      Button groups
      
-  
      Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.
      
-  
      Best practices
      
-  
      We recommend the following guidelines for using button groups and toolbars:
      
+
+  
      Description and best practices
      
+  
      Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements. We recommend the following guidelines for using button groups and toolbars:
      
   
        
     
      • Always use the same element in a single button group, <a> or <button>.
        • 
     
      • Don't mix buttons of different colors in the same button group.
        • 
@@ -128,10 +128,17 @@
   
      
   
      Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.
      
 
-  
      Default example
      
-  
      Here's how the HTML looks for a standard button group built with anchor tag buttons:
      
-  
      
-    
      
+
+  
      
+
+
+  
      Examples and variations
      
+  
      Two basic options, along with two more specific variations.
      
+
+  
      Basic button group
      
+  
      Wrap a series of buttons with .btn in .btn-group.
      
+  
      
+    
      
       
       
       
@@ -144,22 +151,25 @@
   <button class="btn">3</button>
 </div>
      +

      Toolbar example

      Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

      -
      -
      - - - - -
      -
      - - - -
      -
      - +
      +
      +
      + + + + +
      +
      + + + +
      +
      + + 
      @@ -169,9 +179,10 @@
   </div>
 </div>
      +

      Checkbox and radio flavors

      Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

      -

      Get the javascript »

      +

      Dropdowns in button groups

      Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

      -- cgit v1.2.3 From c90c66e61f5e3f09a46d63cd79086c7b2ab6db5c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 10 Jun 2012 21:00:20 -0700 Subject: rewrite the split button dropdowns section --- docs/components.html | 532 ++++++++++++++++++++++++++------------------------- 1 file changed, 267 insertions(+), 265 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 4d7b6d3bb..c96e4aa03 100644 --- a/docs/components.html +++ b/docs/components.html @@ -196,87 +196,83 @@

      Button dropdown menus Built on button groups to provide contextual menus

      -

      Button dropdowns

      -

      Overview and examples

      +

      Overview and examples

      Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

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

      Example markup

      -

      Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

       <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -291,188 +287,191 @@
 
   
      Works with all button sizes
      
   
      Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.
      
-  
      
-    
      
-      
-      
-    
      
-    
      
-      
-      
-    
      
-    
      
-      
-      
-    
      
-  
      
+  
      
+    
      
+      
      
+        
+        
+      
      
+      
      
+        
+        
+      
      
+      
      
+        
+        
+      
      
+    
      
+  
      
 
   
      Requires javascript
      
   
      Button dropdowns require the Bootstrap dropdown plugin to function.
      
   
      In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.
      
 
-  
      
 
-  
      Split button dropdowns
      
+  
      
+
 
-  
      Overview and examples
      
+  
      Split button dropdowns
      
   
      Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.
      
-  
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
-  
      
-  
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
+  
      
+    
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+    
      
   
      
-  
      
-    
      
-      
-      
-      
-    
      
-  
      
-  
      Sizes
      
-  
      Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.
      
-  
      
-    
      
-      
-      
-      
-    
      
-  
      
-  
      
-    
      
-      
-      
-      
-    
      
-  
      
-  
      
-    
      
-      
-      
-      
-    
      
-  
      
 
       <div class="btn-group">
-  ...
-  <ul class="dropdown-menu pull-right">
+  <button class="btn">Action</button>
+  <button class="btn dropdown-toggle" data-toggle="dropdown">
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
     <!-- dropdown menu links -->
   </ul>
 </div>
 
      
 
-  
      Example markup
      
-  
      We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.
      
+  
      Sizes
      
+  
      Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.
      
+  
      
+    
      
+      
      
+        
+        
+        
+      
      
+    
      
+    
      
+      
      
+        
+        
+        
+      
      
+    
      
+    
      
+      
      
+        
+        
+        
+      
      
+    
      
+  
      
 
       <div class="btn-group">
-  <button class="btn">Action</button>
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
+  <button class="btn btn-mini">Action</button>
+  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
     <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
@@ -480,31 +479,34 @@
   </ul>
 </div>
 
      
+
   
      Dropup menus
      
   
      Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.
      
-  
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
+  
      
+    
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+    
      
   
      
 
       <div class="btn-group dropup">
-- 
cgit v1.2.3


From a0cd886c56708bbd8d6896ee81b04579f86fb0aa Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 10 Jun 2012 21:24:13 -0700
Subject: rewrite the rest of the nav section

---
 docs/components.html | 386 +++++++++++++++++++++++++++------------------------
 1 file changed, 201 insertions(+), 185 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index c96e4aa03..9d25a8b05 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -532,21 +532,17 @@
   
      
 
   
      Lightweight defaults Same markup, different classes
      
-
-  
      Powerful base class
      
   
      All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.
      
-  
      When to use
      
-  
      Tabs and pills are great for sections of content or navigating between pages of related content.
      
-  
      Component alignment
      
-  
      To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.
      
 
   
      Basic tabs
      
   
      Take a regular <ul> of links and add .nav-tabs:
      
-  
+  
      
+    
+  
      
 
       <ul class="nav nav-tabs">
   <li class="active">
@@ -559,11 +555,13 @@
 
   
      Basic pills
      
   
      Take that same HTML, but use .nav-pills instead:
      
-  
+  
      
+    
+  
      
 
       <ul class="nav nav-pills">
   <li class="active">
@@ -574,18 +572,24 @@
 </ul>
 
      
 
+  
      Component alignment
      
+  
      To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.
      
+
+
+  
      
 
-  
      Stackable Make tabs or pills vertical
      
 
-  
      How to stack 'em
      
+  
      Stackable
      
   
      As tabs and pills are horizontal by default, just add a second class, .nav-stacked, to make them appear vertically stacked.
      
 
   
      Stacked tabs
      
-  
+  
      
+    
+  
      
 
       <ul class="nav nav-tabs nav-stacked">
   ...
@@ -593,38 +597,43 @@
 
      
 
   
      Stacked pills
      
-  
+  
      
+    
+  
      
 
       <ul class="nav nav-pills nav-stacked">
   ...
 </ul>
 
      
 
-  
      Dropdowns For advanced nav components
      
 
-  
      Rich menus made easy
      
-  
      Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.
      
-  
      Head over to the Javascript page to read the docs on initializing dropdowns in Bootstrap.
      
+  
      
+
+
+  
      Dropdowns
      
+  
      Add dropdown menus with a little extra HTML and the dropdowns javascript plugin.
      
 
   
      Tabs with dropdowns
      
-  
+  
      
+    
+  
      
 
       <ul class="nav nav-tabs">
   <li class="dropdown">
@@ -642,20 +651,22 @@
 
      
 
   
      Pills with dropdowns
      
-  
+  
      
+    
+  
      
 
       <ul class="nav nav-pills">
   <li class="dropdown">
@@ -672,39 +683,30 @@
 </ul>
 
      
 
-  
      Nav lists Build simple stacked navs, great for sidebars
      
 
-  
      Application-style navigation
      
-  
      Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.
      
-  
      Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.
      
-  
      
-  
      With icons
      
-  
      Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.
      
-  
      Horizontal dividers
      
-  
      Add a horizontal divider by creating an empty list item with the class .divider, like so:
      
-
      -<ul class="nav nav-list">
-  ...
-  <li class="divider"></li>
-  ...
-</ul>
-
      
+  
      
+
+
+  
      Nav lists
      
+  
      A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.
      
 
   
      Example nav list
      
   
      Take a list of links and add class="nav nav-list":
      
-  
      
-    
-  
       
+  
      
+    
      
+      
+    
       
+  
      
 
       <ul class="nav nav-list">
   <li class="nav-header">
@@ -722,19 +724,21 @@
 
   
      Example with icons
      
   
      Same example, but with <i> tags for icons.
      
-  
      
-    
-  
       
+  
      
+    
      
+      
+    
       
+  
      
 
       <ul class="nav nav-list">
   ...
@@ -748,44 +752,45 @@
 </ul>
 
      
 
+  
      Horizontal dividers
      
+  
      Add a horizontal divider by creating an empty list item with the class .divider, like so:
      
+
      +<ul class="nav nav-list">
+  ...
+  <li class="divider"></li>
+  ...
+</ul>
+
      
+
+
+  
      
 
-  
      Tabbable nav Bring tabs to life via javascript
      
 
-  
      What's included
      
+  
      Tabbable nav
      
   
      Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.
      
-  
      Changing between them is easy and only requires changing very little markup.
      
-  
      
-  
      Fade in tabs
      
-  
      To make tabs fade in, add .fade to each .tab-pane.
      
-  
      
-  
      Requires jQuery plugin
      
-  
      All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.
      
-  
      Get the javascript →
      
 
   
      Tabbable example
      
   
      To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.
      
-  
      
-    
-    
      
-      
      
-        
      I'm in Section 1.
      
-      
      
-      
      
-        
      Howdy, I'm in Section 2.
      
-      
      
-      
      
-        
      What up girl, this is Section 3.
      
+  
      
+    
      
+      
+      
      
+        
      
+          
      I'm in Section 1.
      
+        
      
+        
      
+          
      Howdy, I'm in Section 2.
      
+        
      
+        
      
+          
      What up girl, this is Section 3.
      
+        
      
       
      
-    
      
-  
       
-  
      For right or left aligned tabs, wrap the .nav-tabs and .tab-content in .tabbable.
      
-
-  
      Straightforward markup
      
-  
      Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.
      
+    
       
+  
      
 
       <div class="tabbable"> <!-- Only required for left/right tabs -->
   <ul class="nav nav-tabs">
@@ -803,30 +808,37 @@
 </div>
 
      
 
+  
      Fade in tabs
      
+  
      To make tabs fade in, add .fade to each .tab-pane.
      
+
+  
      Requires jQuery plugin
      
+  
      All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.
      
 
   
      Tabbable in any direction
      
 
   
      Tabs on the bottom
      
   
      Flip the order of the HTML and add a class to put tabs on the bottom.
      
-  
      
-    
      
-      
      
-        
      I'm in Section A.
      
-      
      
-      
      
-        
      Howdy, I'm in Section B.
      
-      
      
-      
      
-        
      What up girl, this is Section C.
      
+  
      
+    
      
+      
      
+        
      
+          
      I'm in Section A.
      
+        
      
+        
      
+          
      Howdy, I'm in Section B.
      
+        
      
+        
      
+          
      What up girl, this is Section C.
      
+        
      
       
      
-    
      
-    
-  
       
-
      +      
+    
       
+  
      
+
       <div class="tabbable tabs-below">
   <div class="tab-content">
     ...
@@ -839,24 +851,26 @@
 
   
      Tabs on the left
      
   
      Swap the class to put tabs on the left.
      
-  
      
-    
-    
      
-      
      
-        
      I'm in Section A.
      
-      
      
-      
      
-        
      Howdy, I'm in Section B.
      
-      
      
-      
      
-        
      What up girl, this is Section C.
      
+  
      
+    
      
+      
+      
      
+        
      
+          
      I'm in Section A.
      
+        
      
+        
      
+          
      Howdy, I'm in Section B.
      
+        
      
+        
      
+          
      What up girl, this is Section C.
      
+        
      
       
      
-    
      
-  
       
+    
       
+  
      
 
       <div class="tabbable tabs-left">
   <ul class="nav nav-tabs">
@@ -870,24 +884,26 @@
 
   
      Tabs on the right
      
   
      Swap the class to put tabs on the right.
      
-  
      
-    
-    
      
-      
      
-        
      I'm in Section A.
      
-      
      
-      
      
-        
      Howdy, I'm in Section B.
      
-      
      
-      
      
-        
      What up girl, this is Section C.
      
+  
      
+    
      
+      
+      
      
+        
      
+          
      I'm in Section A.
      
+        
      
+        
      
+          
      Howdy, I'm in Section B.
      
+        
      
+        
      
+          
      What up girl, this is Section C.
      
+        
      
       
      
-    
      
-  
       
+    
       
+  
      
 
       <div class="tabbable tabs-right">
   <ul class="nav nav-tabs">
-- 
cgit v1.2.3


From f453909f390f88664cc590fe3f1fa3c0df041200 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 11 Jun 2012 21:48:41 -0700
Subject: add a dropdowns section to Components (still needs work) and reformat
 much of the js docs

---
 docs/components.html | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 85 insertions(+), 2 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 9d25a8b05..9eee56591 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -82,6 +82,7 @@
   
      Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
      
   
      
     
      
 
 
 
 
+
+
+
+
+
+
 
 
      
-- 
cgit v1.2.3


From c7ffe6edc894b00db16bc4386f421a3d8efadd50 Mon Sep 17 00:00:00 2001
From: Purwandi 
Date: Tue, 12 Jun 2012 12:17:10 +0700
Subject: Add space on navbar button

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 9eee56591..3cafb15b5 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -34,7 +34,7 @@
     
      
       
      
         
      
-          
      
+
+  
      Disabled state
      
+  
      For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.
      
+  
      
+    
+  
      
+
      +<ul class="nav nav-pills">
+  ...
+  <li class="disabled"><a href="#">Home</a></li>
+  ...
+</ul>
 
      
 
   
      Component alignment
      
-- 
cgit v1.2.3


From b54264cde0b1e72fbb463e4aa272ed1c2876bd02 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 19 Jun 2012 14:42:46 -0700
Subject: add basic vertical button group support

---
 docs/components.html | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index ce931783f..3b3f5a783 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -263,6 +263,30 @@
 </div>
 
      
 
+
+  
      
+
+
+  
      Vertical button groups
      
+  
      Make a set of buttons appear vertically stacked rather than horizontally.
      
+  
      
+    
      
+      
+      
+      
+      
+    
      
+  
      
+
      +<div class="btn-group btn-group-vertical">
+  ...
+</div>
+
      
+
+
+  
      
+
+
   
      Checkbox and radio flavors
      
   
      Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.
      
 
-- 
cgit v1.2.3


From ff92344f0d6cca2e00a73b9edf204c4231130d07 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 19 Jun 2012 14:46:14 -0700
Subject: remove icons example of nav list--doesn't really add anything useful

---
 docs/components.html | 30 ------------------------------
 1 file changed, 30 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 3b3f5a783..d70218163 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -844,36 +844,6 @@
   </li>
   ...
 </ul>
-
      
-
-  
      Example with icons
      
-  
      Same example, but with <i> tags for icons.
      
-  
      
-    
      
-      
-    
       
-  
      
-
      -<ul class="nav nav-list">
-  ...
-  <li>
-    <a href="#">
-      <i class="icon-book"></i>
-      Library
-    </a>
-  </li>
-  ...
-</ul>
 
      
 
   
      Horizontal dividers
      
-- 
cgit v1.2.3


From 40298ddbf1c26e2c9b7f67a39eeb35734417cc7e Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 19 Jun 2012 15:25:35 -0700
Subject: add note to components about nav list nesting

---
 docs/components.html | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index d70218163..825e9fdac 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -833,18 +833,16 @@
   
      
 
       <ul class="nav nav-list">
-  <li class="nav-header">
-    List header
-  </li>
-  <li class="active">
-    <a href="#">Home</a>
-  </li>
-  <li>
-    <a href="#">Library</a>
-  </li>
+  <li class="nav-header">List header</li>
+  <li class="active"><a href="#">Home</a></li>
+  <li><a href="#">Library</a></li>
   ...
 </ul>
 
      
+  
      
+    Note
+    For nesting within a nav list, include class="nav nav-list" on any nested <ul>.
+  
      
 
   
      Horizontal dividers
      
   
      Add a horizontal divider by creating an empty list item with the class .divider, like so:
      
-- 
cgit v1.2.3


From 089f42a07fd9e7ed393e9e4961ec4f5ff61aa173 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 20 Jun 2012 00:06:05 -0700
Subject: fix html typos

---
 docs/components.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 825e9fdac..2207103f5 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1316,7 +1316,7 @@
 
       <div class="pagination">
   <ul>
-    <li><a href="#">Prev</a></li>
+    <li><a href="#">Prev</a></li>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
@@ -1350,7 +1350,7 @@
 
       <div class="pagination ">
   <ul>
-    <li class="disabled"><a href="#">Prev</a></li>
+    <li class="disabled"><a href="#">Prev</a></li>
     <li class="active"><a href="#">1</a></li>
     ...
   </ul>
-- 
cgit v1.2.3


From 71669dda63644a7b4162ca63f8b9c88b3586c7e4 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 24 Jun 2012 20:26:48 -0700
Subject: tons of docs cleanup in css, adding subnav to official components

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 2207103f5..413a867b1 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -81,7 +81,7 @@
   
      Components
      
   
      Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
      
   
      
-    
      
         
      
-- 
cgit v1.2.3


From a645664e503475af2b8ed6f81f6860aad188f327 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 5 Jul 2012 10:12:15 -0700
Subject: update thumbnails to fix display issues and refine aesthetics

---
 docs/components.html | 115 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 67 insertions(+), 48 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 0c81aefa5..ed1ba953a 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1679,53 +1679,67 @@
 
   
      Default thumbnails
      
   
      By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
      
-  
+  
      
+    
+  
      
 
   
      Highly customizable
      
   
      With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
      
-  
        
-    
      • 
-      
        
-        
-        
        
-          
        Thumbnail label
        
-          
        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
        
-          
        Action Action
        
+  
        
+    
          
+      
        • 
+        
          
+          
+          
          
+            
          Thumbnail label
          
+            
          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
          
+            
          Action Action
          
+          
          
         
          
-      
        
-    
        • 
-    
      • 
-      
        
-        
-        
        
-          
        Thumbnail label
        
-          
        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
        
-          
        Action Action
        
+      
        • 
+      
      • 
+        
        
+          
+          
        
+            
        Thumbnail label
        
+            
        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
        
+            
        Action Action
        
+          
        
         
        
-      
      
-    
-
    + +
  • +
    + +
    +

    Thumbnail label

    +

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    +

    Action Action

    +
    +
    +
    • + +

    Why use thumbnails

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    @@ -1740,9 +1754,9 @@

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

     <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img src="http://placehold.it/300x200" alt="">
     </a>
   </li>
   ...
@@ -1751,11 +1765,11 @@
   
    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:
    
 
     <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <div class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
-      <h5>Thumbnail label</h5>
-      <p>Thumbnail caption right here...</p>
+      <img src="http://placehold.it/300x200" alt="">
+      <h3>Thumbnail label</h3>
+      <p>Thumbnail caption...</p>
     </div>
   </li>
   ...
@@ -1795,6 +1809,11 @@
         
       
     
+    
  • 
+      
+        
+      
+    
    • 
   
 
 
-- 
cgit v1.2.3


From c6ee96c02587aeea0da52018325c100bfd45127a Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 5 Jul 2012 10:37:23 -0700
Subject: fix up subnav styles, add subnav search form styles, add some basic
 docs for subnav

---
 docs/components.html | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index ed1ba953a..4a658c760 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1254,6 +1254,63 @@
     Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.
    + +
    + + +

    Responsive navbar

    +

    To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.

    +
    +
    +
    +
    + + + + + + Title +
    + +
    + +
    + +
    +
    +
    +
    +
    + -- cgit v1.2.3 From 3c07eaa251b73e6c5eff4b56e074c54708a4b4ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 15:11:54 -0700 Subject: updates to type scale --- docs/components.html | 7 ------- 1 file changed, 7 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 4a658c760..2c07efbf6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -57,13 +57,6 @@
  • Javascript
    • -
  • -
  • - Customize -
    • -
  • - Examples -
  • Extend
    • -- cgit v1.2.3 From 5f861ef51735d8b0f2c0f0faf8f438808a480d99 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jul 2012 23:16:07 -0700 Subject: fix up docs to use default container, fix responsive home changes --- docs/components.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 2c07efbf6..9a67b25e0 100644 --- a/docs/components.html +++ b/docs/components.html @@ -33,7 +33,7 @@ ================================================== -->
    -
    +
    -
    +
    @@ -2221,6 +2221,11 @@ class="clearfix"

    Designed and built with all the love in the world @twitter by @mdo and @fat.

    Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.

    Icons from Glyphicons Free, licensed under CC BY 3.0.

    +
    -- cgit v1.2.3 From 20676ddd4d3e46c9fb32aadfeddb3a4a68efa6a3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jul 2012 01:47:36 -0700 Subject: adding getting started page based on Bootstrap University from awhile back, testing out side nav on docs instead of subnav bar --- docs/components.html | 32 ++++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 9a67b25e0..213247821 100644 --- a/docs/components.html +++ b/docs/components.html @@ -27,7 +27,7 @@ - + @@ -105,13 +105,34 @@
    +
    +
    + +
    +
    +
    +
    + -- cgit v1.2.3 From 9887d3cf4af4897c4959491ece2fe56bef3d1114 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 00:26:32 -0700 Subject: updating docs examples to remove 13/18 resets, fix up buttons alignments and carets --- docs/components.html | 32 +++++++------------------------- 1 file changed, 7 insertions(+), 25 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 213247821..719a8ad48 100644 --- a/docs/components.html +++ b/docs/components.html @@ -214,27 +214,13 @@ ================================================== -->
    -

    Button groups Join buttons for more toolbar-like functionality

    +

    Button groups

    - -

    Description and best practices

    -

    Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements. We recommend the following guidelines for using button groups and toolbars:

    -
      -
    • Always use the same element in a single button group, <a> or <button>.
      • -
    • Don't mix buttons of different colors in the same button group.
      • -
    • Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.
      • -
    -

    Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.

    - - -
    - - -

    Examples and variations

    +

    Examples

    Two basic options, along with two more specific variations.

    -

    Basic button group

    +

    Single button group

    Wrap a series of buttons with .btn in .btn-group.

    @@ -251,7 +237,7 @@ </div> -

    Toolbar example

    +

    Multiple button groups

    Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

    @@ -279,11 +265,7 @@ </div> - -
    - - -

    Vertical button groups

    +

    Vertical button groups

    Make a set of buttons appear vertically stacked rather than horizontally.

    @@ -303,10 +285,10 @@
    -

    Checkbox and radio flavors

    +

    Checkbox and radio flavors

    Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

    -

    Dropdowns in button groups

    +

    Dropdowns in button groups

    Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

    -- cgit v1.2.3 From 75d952ffd80c3c3e18b2e47eac30a2b23d8ae7a7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 22:40:58 -0700 Subject: fix indenting and remove hidden subnav on Components --- docs/components.html | 2712 +++++++++++++++++++++++++------------------------- 1 file changed, 1344 insertions(+), 1368 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 719a8ad48..fec662d47 100644 --- a/docs/components.html +++ b/docs/components.html @@ -68,43 +68,17 @@
    -

    Components

    Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.

    -
    -
    - -
    -
    + + + 
     <ul class="nav nav-tabs">
   <li class="dropdown">
@@ -772,23 +746,23 @@
 </ul>
    -

    Pills with dropdowns

    -
    -
    + 
     <ul class="nav nav-pills">
   <li class="dropdown">
@@ -806,29 +780,29 @@
    -
    +
    -

    Nav lists

    -

    A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

    +

    Nav lists

    +

    A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

    -

    Example nav list

    -

    Take a list of links and add class="nav nav-list":

    -
    -
    - -
    -
    +

    Example nav list

    +

    Take a list of links and add class="nav nav-list":

    +
    +
    + +
    + 
     <ul class="nav nav-list">
   <li class="nav-header">List header</li>
@@ -837,50 +811,50 @@
   ...
 </ul>
    -

    - Note - For nesting within a nav list, include class="nav nav-list" on any nested <ul>. -

    +

    + Note + For nesting within a nav list, include class="nav nav-list" on any nested <ul>. +

    -

    Horizontal dividers

    -

    Add a horizontal divider by creating an empty list item with the class .divider, like so:

    +

    Horizontal dividers

    +

    Add a horizontal divider by creating an empty list item with the class .divider, like so:

     <ul class="nav nav-list">
   ...
   <li class="divider"></li>
   ...
 </ul>
-
    + -
    +
    -

    Tabbable nav

    -

    Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.

    +

    Tabbable nav

    +

    Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.

    -

    Tabbable example

    -

    To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.

    -
    -
    - -
    -
    -

    I'm in Section 1.

    -
    -
    -

    Howdy, I'm in Section 2.

    -
    -
    -

    What up girl, this is Section 3.

    -
    +

    Tabbable example

    +

    To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.

    +
    +
    + +
    +
    +

    I'm in Section 1.

    +
    +
    +

    Howdy, I'm in Section 2.

    +
    +
    +

    What up girl, this is Section 3.

    +
    +
    +
    -
    - 
     <div class="tabbable"> <!-- Only required for left/right tabs -->
   <ul class="nav nav-tabs">
@@ -898,36 +872,36 @@
 </div>
    -

    Fade in tabs

    -

    To make tabs fade in, add .fade to each .tab-pane.

    - -

    Requires jQuery plugin

    -

    All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.

    - -

    Tabbable in any direction

    - -

    Tabs on the bottom

    -

    Flip the order of the HTML and add a class to put tabs on the bottom.

    -
    -
    -
    -
    -

    I'm in Section A.

    -
    -
    -

    Howdy, I'm in Section B.

    -
    -
    -

    What up girl, this is Section C.

    -
    +

    Fade in tabs

    +

    To make tabs fade in, add .fade to each .tab-pane.

    + +

    Requires jQuery plugin

    +

    All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.

    + +

    Tabbable in any direction

    + +

    Tabs on the bottom

    +

    Flip the order of the HTML and add a class to put tabs on the bottom.

    +
    +
    +
    +
    +

    I'm in Section A.

    +
    +
    +

    Howdy, I'm in Section B.

    +
    +
    +

    What up girl, this is Section C.

    +
    +
    + +
    - -
    - 
     <div class="tabbable tabs-below">
   <div class="tab-content">
@@ -939,28 +913,28 @@
 </div>
    -

    Tabs on the left

    -

    Swap the class to put tabs on the left.

    -
    -
    - -
    -
    -

    I'm in Section A.

    -
    -
    -

    Howdy, I'm in Section B.

    -
    -
    -

    What up girl, this is Section C.

    -
    +

    Tabs on the left

    +

    Swap the class to put tabs on the left.

    +
    +
    + +
    +
    +

    I'm in Section A.

    +
    +
    +

    Howdy, I'm in Section B.

    +
    +
    +

    What up girl, this is Section C.

    +
    +
    +
    -
    - 
     <div class="tabbable tabs-left">
   <ul class="nav nav-tabs">
@@ -972,28 +946,28 @@
 </div>
    -

    Tabs on the right

    -

    Swap the class to put tabs on the right.

    -
    -
    - -
    -
    -

    I'm in Section A.

    -
    -
    -

    Howdy, I'm in Section B.

    -
    -
    -

    What up girl, this is Section C.

    -
    +

    Tabs on the right

    +

    Swap the class to put tabs on the right.

    +
    +
    + +
    +
    +

    I'm in Section A.

    +
    +
    +

    Howdy, I'm in Section B.

    +
    +
    +

    What up girl, this is Section C.

    +
    +
    +
    -
    - 
     <div class="tabbable tabs-right">
   <ul class="nav nav-tabs">
@@ -1005,32 +979,32 @@
 </div>
    - + - -
    +
    +
    +
    +
    - + - - - -
    -
    -

    Pagination Two options for paging through content

    -
    + +
    +
    +

    Pagination Two options for paging through content

    +
    -

    Standard pagination

    -

    Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

    -
    - -
    +

    Standard pagination

    +

    Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

    +
    + + 
     <div class="pagination">
   <ul>
@@ -1382,26 +1356,26 @@
    -
    +
    -

    Options

    +

    Options

    -

    Disabled and active states

    -

    Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

    -
    - -
    +

    Disabled and active states

    +

    Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

    +
    + + 
     <div class="pagination ">
   <ul>
@@ -1412,39 +1386,39 @@
 </div>
    -

    Alignment

    -

    Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

    -
    - -
    +

    Alignment

    +

    Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

    +
    + + 
     <div class="pagination pagination-centered">
   ...
 </div>
    -
    - -
    +
    + + 
     <div class="pagination pagination-right">
   ...
@@ -1452,20 +1426,20 @@
    -
    +
    -

    Pager

    -

    Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

    +

    Pager

    +

    Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

    -

    Default example

    -

    By default, the pager centers links.

    -
    - -
    +

    Default example

    +

    By default, the pager centers links.

    +
    + + 
     <ul class="pager">
   <li>
@@ -1477,14 +1451,14 @@
 </ul>
    -

    Aligned links

    -

    Alternatively, you can align each link to the sides:

    -
    - -
    +

    Aligned links

    +

    Alternatively, you can align each link to the sides:

    +
    + + 
     <ul class="pager">
   <li class="previous">
@@ -1496,14 +1470,14 @@
 </ul>
    -

    Optional disabled state

    -

    Pager links also use the general .disabled utility class from the pagination.

    -
    - -
    +

    Optional disabled state

    +

    Pager links also use the general .disabled utility class from the pagination.

    +
    + + 
     <ul class="pager">
   <li class="previous disabled">
@@ -1513,187 +1487,187 @@
 </ul>
    -
    +
    - -
    -
    -

    Inline labels Label and annotate text

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    LabelsMarkup
    - Default - - <span class="label">Default</span> -
    - Success - - <span class="label label-success">Success</span> -
    - Warning - - <span class="label label-warning">Warning</span> -
    - Important - - <span class="label label-important">Important</span> -
    - Info - - <span class="label label-info">Info</span> -
    - Inverse - - <span class="label label-inverse">Inverse</span> -
    -
    - - - - -
    -
    -

    Badges Indicators and unread counts

    -
    + +
    +
    +

    Inline labels Label and annotate text

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    LabelsMarkup
    + Default + + <span class="label">Default</span> +
    + Success + + <span class="label label-success">Success</span> +
    + Warning + + <span class="label label-warning">Warning</span> +
    + Important + + <span class="label label-important">Important</span> +
    + Info + + <span class="label label-info">Info</span> +
    + Inverse + + <span class="label label-inverse">Inverse</span> +
    +
    + + + + +
    +
    +

    Badges Indicators and unread counts

    +
    -

    About

    -

    Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.

    - -

    Available classes

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameExampleMarkup
    - Default - - 1 - - <span class="badge">1</span> -
    - Success - - 2 - - <span class="badge badge-success">2</span> -
    - Warning - - 4 - - <span class="badge badge-warning">4</span> -
    - Important - - 6 - - <span class="badge badge-important">6</span> -
    - Info - - 8 - - <span class="badge badge-info">8</span> -
    - Inverse - - 10 - - <span class="badge badge-inverse">10</span> -
    - -
    - - - - -
    -
    -

    Typographic components Page header and hero unit for segmenting content

    -
    +

    About

    +

    Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.

    + +

    Available classes

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameExampleMarkup
    + Default + + 1 + + <span class="badge">1</span> +
    + Success + + 2 + + <span class="badge badge-success">2</span> +
    + Warning + + 4 + + <span class="badge badge-warning">4</span> +
    + Important + + 6 + + <span class="badge badge-important">6</span> +
    + Info + + 8 + + <span class="badge badge-info">8</span> +
    + Inverse + + 10 + + <span class="badge badge-inverse">10</span> +
    + +
    + + + + +
    +
    +

    Typographic components Page header and hero unit for segmenting content

    +
    -

    Hero unit

    -

    A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.

    -
    -
    -

    Hello, world!

    -

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    -

    Learn more

    -
    -
    +

    Hero unit

    +

    A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.

    +
    +
    +

    Hello, world!

    +

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    +

    Learn more

    +
    + 
     <div class="hero-unit">
   <h1>Heading</h1>
@@ -1706,105 +1680,105 @@
 </div>
    -

    Page header

    -

    A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

    -
    -
    -

    Example page header Subtext for header

    -
    -
    +

    Page header

    +

    A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

    +
    +
    +

    Example page header Subtext for header

    +
    + 
     <div class="page-header">
   <h1>Example page header</h1>
 </div>
    -
    +
    - -
    -
    -

    Thumbnails Grids of images, videos, text, and more

    -
    + +
    +
    +

    Thumbnails Grids of images, videos, text, and more

    +
    -

    Default thumbnails

    -

    By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

    -
    - -
    +

    Default thumbnails

    +

    By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

    +
    + +
    -

    Highly customizable

    -

    With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

    -
    -
      -
    • -
      - -
      -

      Thumbnail label

      -

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      -

      Action Action

      -
      -
      -
      • -
    • -
      - -
      -

      Thumbnail label

      -

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      -

      Action Action

      -
      -
      -
      • -
    • -
      - -
      -

      Thumbnail label

      -

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      -

      Action Action

      -
      -
      -
      • -
    -
    +

    Highly customizable

    +

    With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

    +
    +
      +
    • +
      + +
      +

      Thumbnail label

      +

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      +

      Action Action

      +
      +
      +
      • +
    • +
      + +
      +

      Thumbnail label

      +

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      +

      Action Action

      +
      +
      +
      • +
    • +
      + +
      +

      Thumbnail label

      +

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      +

      Action Action

      +
      +
      +
      • +
    +
    -

    Why use thumbnails

    -

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    +

    Why use thumbnails

    +

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    -

    Simple, flexible markup

    -

    Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

    +

    Simple, flexible markup

    +

    Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

    -

    Uses grid column sizes

    -

    Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

    +

    Uses grid column sizes

    +

    Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

    -

    The markup

    -

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

    +

    The markup

    +

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

     <ul class="thumbnails">
   <li class="span4">
@@ -1815,7 +1789,7 @@
   ...
 </ul>
    -

    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

    +

    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

     <ul class="thumbnails">
   <li class="span4">
@@ -1829,65 +1803,65 @@
 </ul>
    -

    More examples

    -

    Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

    - - -
    - - - - -
    -
    -

    Alerts Styles for success, warning, and error messages

    -
    +

    More examples

    +

    Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

    + -

    Default alert

    -

    Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

    -
    -
    - - Warning! Best check yo self, you're not looking too good. -
    -
    +
    + + + + +
    +
    +

    Alerts Styles for success, warning, and error messages

    +
    + +

    Default alert

    +

    Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

    +
    +
    + + Warning! Best check yo self, you're not looking too good. +
    + 
     <div class="alert">
   <button type="button" class="close" data-dismiss="alert">×</button>
@@ -1895,32 +1869,32 @@
 </div>
    -

    Dismiss buttons

    -

    Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

    +

    Dismiss buttons

    +

    Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

     <a href="#" class="close" data-dismiss="alert">×</button>
    -

    Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

    +

    Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

     <button type="button" class="close" data-dismiss="alert">×</button>
    -

    Dismiss alerts via javascript

    -

    Use the alerts jQuery plugin for quick and easy dismissal of alerts.

    +

    Dismiss alerts via javascript

    +

    Use the alerts jQuery plugin for quick and easy dismissal of alerts.

    -
    +
    -

    Options

    -

    For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

    -
    -
    - -

    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.

    -
    -
    +

    Options

    +

    For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

    +
    +
    + +

    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.

    +
    + 
     <div class="alert alert-block">
   <a class="close" data-dismiss="alert" href="#">&times;</a>
@@ -1930,97 +1904,97 @@
    -
    +
    -

    Contextual alternatives

    -

    Add optional classes to change an alert's connotation.

    +

    Contextual alternatives

    +

    Add optional classes to change an alert's connotation.

    -

    Error or danger

    -
    -
    - - Oh snap! Change a few things up and try submitting again. -
    -
    +

    Error or danger

    +
    +
    + + Oh snap! Change a few things up and try submitting again. +
    + 
     <div class="alert alert-error">
   ...
 </div>
    -

    Success

    -
    -
    - - Well done! You successfully read this important alert message. -
    -
    +

    Success

    +
    +
    + + Well done! You successfully read this important alert message. +
    + 
     <div class="alert alert-success">
   ...
 </div>
    -

    Information

    -
    -
    - - Heads up! This alert needs your attention, but it's not super important. -
    -
    +

    Information

    +
    +
    + + Heads up! This alert needs your attention, but it's not super important. +
    + 
     <div class="alert alert-info">
   ...
 </div>
    -
    +
    - -
    -
    -

    Progress bars For loading, redirecting, or action status

    -
    + +
    +
    +

    Progress bars For loading, redirecting, or action status

    +
    -

    Examples and markup

    +

    Examples and markup

    -

    Basic

    -

    Default progress bar with a vertical gradient.

    -
    -
    -
    -
    -
    +

    Basic

    +

    Default progress bar with a vertical gradient.

    +
    +
    +
    +
    + 
     <div class="progress">
   <div class="bar" style="width: 60%;"></div>
 </div>
    -

    Striped

    -

    Uses a gradient to create a striped effect. Not available in IE7-8.

    -
    -
    -
    -
    -
    +

    Striped

    +

    Uses a gradient to create a striped effect. Not available in IE7-8.

    +
    +
    +
    +
    + 
     <div class="progress progress-striped">
   <div class="bar" style="width: 20%;"></div>
 </div>
    -

    Animated

    -

    Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

    -
    -
    -
    -
    -
    +

    Animated

    +

    Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

    +
    +
    +
    +
    + 
     <div class="progress progress-striped active">
   <div class="bar" style="width: 40%;"></div>
@@ -2028,27 +2002,27 @@
    -
    +
    -

    Options

    +

    Options

    -

    Additional colors

    -

    Progress bars use some of the same button and alert classes for consistent styles.

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

    Additional colors

    +

    Progress bars use some of the same button and alert classes for consistent styles.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + 
     <div class="progress progress-info">
   <div class="bar" style="width: 20%"></div>
@@ -2064,22 +2038,22 @@
 </div>
    -

    Striped bars

    -

    Similar to the solid colors, we have varied striped progress bars.

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

    Striped bars

    +

    Similar to the solid colors, we have varied striped progress bars.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + 
     <div class="progress progress-info progress-striped">
   <div class="bar" style="width: 20%"></div>
@@ -2096,74 +2070,74 @@
    -
    +
    -

    Browser support

    -

    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

    -

    Opera and IE do not support animations at this time.

    +

    Browser support

    +

    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

    +

    Opera and IE do not support animations at this time.

    -
    +
    - -
    -
    -

    Miscellaneous Lightweight utility components

    -
    + +
    +
    +

    Miscellaneous Lightweight utility components

    +
    -

    Wells

    -

    Use the well as a simple effect on an element to give it an inset effect.

    -
    -
    - Look, I'm in a well! -
    -
    +

    Wells

    +

    Use the well as a simple effect on an element to give it an inset effect.

    +
    +
    + Look, I'm in a well! +
    + 
     <div class="well">
   ...
 </div>
    -

    Optional classes

    -

    Control padding and rounded corners with two optional modifier classes.

    -
    -
    - Look, I'm in a well! -
    -
    +

    Optional classes

    +

    Control padding and rounded corners with two optional modifier classes.

    +
    +
    + Look, I'm in a well! +
    + 
     <div class="well well-large">
   ...
 </div>
    -
    -
    - Look, I'm in a well! -
    -
    +
    +
    + Look, I'm in a well! +
    + 
     <div class="well well-small">
   ...
 </div>
    -

    Close icon

    -

    Use the generic close icon for dismissing content like modals and alerts.

    -
    -

    -
    +

    Close icon

    +

    Use the generic close icon for dismissing content like modals and alerts.

    +
    +

    + 
    <button class="close">&times;</button>

    iOS devices require an href="#" for click events if you rather use an anchor.

    <a class="close" href="#">&times;</a>
    -

    Helper classes

    -

    Simple, focused classes for small display or behavior tweaks.

    +

    Helper classes

    +

    Simple, focused classes for small display or behavior tweaks.

    -

    .pull-left

    -

    Float an element left

    +

    .pull-left

    +

    Float an element left

     class="pull-left"
    @@ -2173,8 +2147,8 @@ class="pull-left" } -

    .pull-right

    -

    Float an element right

    +

    .pull-right

    +

    Float an element right

     class="pull-right"
    @@ -2184,8 +2158,8 @@ class="pull-right" } -

    .muted

    -

    Change an element's color to #999

    +

    .muted

    +

    Change an element's color to #999

     class="muted"
    @@ -2195,8 +2169,8 @@ class="muted" } -

    .clearfix

    -

    Clear the float on any element

    +

    .clearfix

    +

    Clear the float on any element

     class="clearfix"
    @@ -2214,7 +2188,9 @@ class="clearfix" } -
    +
    + + -- cgit v1.2.3 From 338c7ef2b6aa62cc6b5f08f687f04eeb960719f0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 13:45:07 -0700 Subject: tweak code snippet on pager and clean up type and font-sizes on docs Home --- docs/components.html | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index fec662d47..c144c130a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1442,12 +1442,8 @@ 
     <ul class="pager">
-  <li>
-    <a href="#">Previous</a>
-  </li>
-  <li>
-    <a href="#">Next</a>
-  </li>
+  <li><a href="#">Previous</a></li>
+  <li><a href="#">Next</a></li>
 </ul>
    -- cgit v1.2.3 From c884d6eaa6bbcf4cb4d679c4d9be57d2f28ce93b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 13:50:27 -0700 Subject: clean up docs for subnav --- docs/components.html | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index c144c130a..40cd2e19e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1228,19 +1228,19 @@
    -

    Responsive navbar

    -

    To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.

    +

    Subnav variation

    +

    Modify the look of the navbar by adding .navbar-subnav. Perfect for a secondary nav, or just a replacement to the default dark navbar.

    - + Title -
    +
    +
    +<div class="navbar navbar-subnav">
+  ...
+</div>
+
    -- cgit v1.2.3 From 549d61fc289cb9efe5f8959e706e170b080663ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 17:02:55 -0700 Subject: updated footer --- docs/components.html | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 40cd2e19e..b176a6d7e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2196,10 +2196,14 @@ class="clearfix"
    +
    + - - -- cgit v1.2.3 From a12f0e551f7da763a9be23013d1b51c161a0f6f8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 18:11:49 -0700 Subject: overhaul docs on sub pages, clean up css and copy --- docs/components.html | 2654 +++++++++++++++++++++++++------------------------- 1 file changed, 1316 insertions(+), 1338 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index b176a6d7e..ca8cfe2dd 100644 --- a/docs/components.html +++ b/docs/components.html @@ -66,62 +66,62 @@ -
    -
    -

    Components

    -

    Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.

    +
    +

    Components

    +

    Dozens of reusable components built to provide navigation, alerts, popovers, and more.

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

    Button groups

    -
    + +
    +
    +

    Button groups

    +
    -

    Examples

    -

    Two basic options, along with two more specific variations.

    +

    Examples

    +

    Two basic options, along with two more specific variations.

    -

    Single button group

    -

    Wrap a series of buttons with .btn in .btn-group.

    -
    -
    - - - +

    Single button group

    +

    Wrap a series of buttons with .btn in .btn-group.

    +
    +
    + + + +
    - 
     <div class="btn-group">
   <button class="btn">1</button>
@@ -211,26 +211,26 @@
 </div>
    -

    Multiple button groups

    -

    Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

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

    Multiple button groups

    +

    Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

    +
    +
    +
    + + + + +
    +
    + + + +
    +
    + +
    - 
     <div class="btn-toolbar">
   <div class="btn-group">
@@ -239,16 +239,16 @@
 </div>
    -

    Vertical button groups

    -

    Make a set of buttons appear vertically stacked rather than horizontally.

    -
    -
    - - - - +

    Vertical button groups

    +

    Make a set of buttons appear vertically stacked rather than horizontally.

    +
    +
    + + + + +
    - 
     <div class="btn-group btn-group-vertical">
   ...
@@ -256,102 +256,102 @@
    -
    +
    -

    Checkbox and radio flavors

    -

    Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

    +

    Checkbox and radio flavors

    +

    Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

    -

    Dropdowns in button groups

    -

    Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

    -
    +

    Dropdowns in button groups

    +

    Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

    +
    - -
    -
    -

    Button dropdown menus

    -
    + +
    +
    +

    Button dropdown menus

    +
    -

    Overview and examples

    -

    Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

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

    Overview and examples

    +

    Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + 
     <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -364,134 +364,134 @@
 </div>
    -

    Works with all button sizes

    -

    Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.

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

    Works with all button sizes

    +

    Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.

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

    Requires javascript

    -

    Button dropdowns require the Bootstrap dropdown plugin to function.

    -

    In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.

    +

    Requires javascript

    +

    Button dropdowns require the Bootstrap dropdown plugin to function.

    +

    In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.

    -
    +
    -

    Split button dropdowns

    -

    Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

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

    Split button dropdowns

    +

    Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

    +
    +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + 
     <div class="btn-group">
   <button class="btn">Action</button>
@@ -504,49 +504,49 @@
 </div>
    -

    Sizes

    -

    Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

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

    Sizes

    +

    Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    + 
     <div class="btn-group">
   <button class="btn btn-mini">Action</button>
@@ -559,34 +559,34 @@
 </div>
    -

    Dropup menus

    -

    Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

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

    Dropup menus

    +

    Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

    +
    +
    +
    + + + +
    +
    + + + +
    +
    - 
     <div class="btn-group dropup">
   <button class="btn">Dropup</button>
@@ -599,29 +599,29 @@
 </div>
    -
    +
    - - - - - - - -
    -
    -

    Pagination Two options for paging through content

    -
    + +
    +
    +

    Pagination Two options for paging through content

    +
    -

    Standard pagination

    -

    Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

    -
    - 
     <div class="pagination">
   <ul>
@@ -1361,26 +1361,26 @@
    -
    +
    -

    Options

    +

    Options

    -

    Disabled and active states

    -

    Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

    -
    - 
     <div class="pagination ">
   <ul>
@@ -1391,39 +1391,39 @@
 </div>
    -

    Alignment

    -

    Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

    -
    - 
     <div class="pagination pagination-centered">
   ...
 </div>
    -
    - 
     <div class="pagination pagination-right">
   ...
@@ -1431,20 +1431,20 @@
    -
    +
    -

    Pager

    -

    Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

    +

    Pager

    +

    Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

    -

    Default example

    -

    By default, the pager centers links.

    -
    - -
    +

    Default example

    +

    By default, the pager centers links.

    +
    + + 
     <ul class="pager">
   <li><a href="#">Previous</a></li>
@@ -1452,14 +1452,14 @@
 </ul>
    -

    Aligned links

    -

    Alternatively, you can align each link to the sides:

    -
    - -
    +

    Aligned links

    +

    Alternatively, you can align each link to the sides:

    +
    + + 
     <ul class="pager">
   <li class="previous">
@@ -1471,14 +1471,14 @@
 </ul>
    -

    Optional disabled state

    -

    Pager links also use the general .disabled utility class from the pagination.

    -
    - -
    +

    Optional disabled state

    +

    Pager links also use the general .disabled utility class from the pagination.

    +
    + + 
     <ul class="pager">
   <li class="previous disabled">
@@ -1488,187 +1488,175 @@
 </ul>
    -
    +
    - -
    -
    -

    Inline labels Label and annotate text

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    LabelsMarkup
    - Default - - <span class="label">Default</span> -
    - Success - - <span class="label label-success">Success</span> -
    - Warning - - <span class="label label-warning">Warning</span> -
    - Important - - <span class="label label-important">Important</span> -
    - Info - - <span class="label label-info">Info</span> -
    - Inverse - - <span class="label label-inverse">Inverse</span> -
    -
    - - - - -
    -
    -

    Badges Indicators and unread counts

    -
    - -

    About

    -

    Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.

    - -

    Available classes

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameExampleMarkup
    - Default - - 1 - - <span class="badge">1</span> -
    - Success - - 2 - - <span class="badge badge-success">2</span> -
    - Warning - - 4 - - <span class="badge badge-warning">4</span> -
    - Important - - 6 - - <span class="badge badge-important">6</span> -
    - Info - - 8 - - <span class="badge badge-info">8</span> -
    - Inverse - - 10 - - <span class="badge badge-inverse">10</span> -
    - -
    - - - - -
    -
    -

    Typographic components Page header and hero unit for segmenting content

    -
    + +
    +
    +

    Labels and badges

    +
    +

    Labels

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    LabelsMarkup
    + Default + + <span class="label">Default</span> +
    + Success + + <span class="label label-success">Success</span> +
    + Warning + + <span class="label label-warning">Warning</span> +
    + Important + + <span class="label label-important">Important</span> +
    + Info + + <span class="label label-info">Info</span> +
    + Inverse + + <span class="label label-inverse">Inverse</span> +
    + +

    Badges

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameExampleMarkup
    + Default + + 1 + + <span class="badge">1</span> +
    + Success + + 2 + + <span class="badge badge-success">2</span> +
    + Warning + + 4 + + <span class="badge badge-warning">4</span> +
    + Important + + 6 + + <span class="badge badge-important">6</span> +
    + Info + + 8 + + <span class="badge badge-info">8</span> +
    + Inverse + + 10 + + <span class="badge badge-inverse">10</span> +
    + +
    + + + + +
    +
    +

    Typographic components

    +
    -

    Hero unit

    -

    A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.

    -
    -
    -

    Hello, world!

    -

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    -

    Learn more

    +

    Hero unit

    +

    A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

    +
    +
    +

    Hello, world!

    +

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    +

    Learn more

    +
    - 
     <div class="hero-unit">
   <h1>Heading</h1>
@@ -1681,105 +1669,105 @@
 </div>
    -

    Page header

    -

    A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

    -
    -
    -

    Example page header Subtext for header

    +

    Page header

    +

    A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

    +
    +
    +

    Example page header Subtext for header

    +
    - 
     <div class="page-header">
   <h1>Example page header</h1>
 </div>
    -
    +
    - -
    -
    -

    Thumbnails Grids of images, videos, text, and more

    -
    + +
    +
    +

    Thumbnails Grids of images, videos, text, and more

    +
    -

    Default thumbnails

    -

    By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

    -
    - -
    +

    Default thumbnails

    +

    By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

    +
    + +
    -

    Highly customizable

    -

    With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

    -
    -
      -
    • -
      - -
      -

      Thumbnail label

      -

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      -

      Action Action

      +

      Highly customizable

      +

      With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

      +
      +
        +
      • +
        + +
        +

        Thumbnail label

        +

        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

        +

        Action Action

        +
        -
      -
      • -
    • -
      - -
      -

      Thumbnail label

      -

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      -

      Action Action

      +
      • +
    • +
      + +
      +

      Thumbnail label

      +

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      +

      Action Action

      +
      -
    - -
  • -
    - -
    -

    Thumbnail label

    -

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    -

    Action Action

    +
    • +
  • +
    + +
    +

    Thumbnail label

    +

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    +

    Action Action

    +
    -
    • - - -
    + + +
    -

    Why use thumbnails

    -

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    +

    Why use thumbnails

    +

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    -

    Simple, flexible markup

    -

    Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

    +

    Simple, flexible markup

    +

    Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

    -

    Uses grid column sizes

    -

    Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

    +

    Uses grid column sizes

    +

    Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

    -

    The markup

    -

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

    +

    Markup

    +

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

     <ul class="thumbnails">
   <li class="span4">
@@ -1790,7 +1778,7 @@
   ...
 </ul>
    -

    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

    +

    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

     <ul class="thumbnails">
   <li class="span4">
@@ -1804,65 +1792,55 @@
 </ul>
    -

    More examples

    -

    Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

    - +

    More examples

    +

    Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

    + - + - -
    -
    -

    Alerts Styles for success, warning, and error messages

    -
    + +
    +
    +

    Alerts Styles for success, warning, and error messages

    +
    -

    Default alert

    -

    Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

    -
    -
    - - Warning! Best check yo self, you're not looking too good. +

    Default alert

    +

    Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

    +
    +
    + + Warning! Best check yo self, you're not looking too good. +
    - 
     <div class="alert">
   <button type="button" class="close" data-dismiss="alert">×</button>
@@ -1870,32 +1848,32 @@
 </div>
    -

    Dismiss buttons

    -

    Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

    +

    Dismiss buttons

    +

    Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

     <a href="#" class="close" data-dismiss="alert">×</button>
    -

    Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

    +

    Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

     <button type="button" class="close" data-dismiss="alert">×</button>
    -

    Dismiss alerts via javascript

    -

    Use the alerts jQuery plugin for quick and easy dismissal of alerts.

    +

    Dismiss alerts via javascript

    +

    Use the alerts jQuery plugin for quick and easy dismissal of alerts.

    -
    +
    -

    Options

    -

    For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

    -
    -
    - -

    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.

    +

    Options

    +

    For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

    +
    +
    + +

    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.

    +
    - 
     <div class="alert alert-block">
   <a class="close" data-dismiss="alert" href="#">&times;</a>
@@ -1905,97 +1883,97 @@
    -
    +
    -

    Contextual alternatives

    -

    Add optional classes to change an alert's connotation.

    +

    Contextual alternatives

    +

    Add optional classes to change an alert's connotation.

    -

    Error or danger

    -
    -
    - - Oh snap! Change a few things up and try submitting again. +

    Error or danger

    +
    +
    + + Oh snap! Change a few things up and try submitting again. +
    - 
     <div class="alert alert-error">
   ...
 </div>
    -

    Success

    -
    -
    - - Well done! You successfully read this important alert message. +

    Success

    +
    +
    + + Well done! You successfully read this important alert message. +
    - 
     <div class="alert alert-success">
   ...
 </div>
    -

    Information

    -
    -
    - - Heads up! This alert needs your attention, but it's not super important. +

    Information

    +
    +
    + + Heads up! This alert needs your attention, but it's not super important. +
    - 
     <div class="alert alert-info">
   ...
 </div>
    -
    +
    - -
    -
    -

    Progress bars For loading, redirecting, or action status

    -
    + +
    +
    +

    Progress bars For loading, redirecting, or action status

    +
    -

    Examples and markup

    +

    Examples and markup

    -

    Basic

    -

    Default progress bar with a vertical gradient.

    -
    -
    -
    +

    Basic

    +

    Default progress bar with a vertical gradient.

    +
    +
    +
    +
    - 
     <div class="progress">
   <div class="bar" style="width: 60%;"></div>
 </div>
    -

    Striped

    -

    Uses a gradient to create a striped effect. Not available in IE7-8.

    -
    -
    -
    +

    Striped

    +

    Uses a gradient to create a striped effect. Not available in IE7-8.

    +
    +
    +
    +
    - 
     <div class="progress progress-striped">
   <div class="bar" style="width: 20%;"></div>
 </div>
    -

    Animated

    -

    Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

    -
    -
    -
    +

    Animated

    +

    Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

    +
    +
    +
    +
    - 
     <div class="progress progress-striped active">
   <div class="bar" style="width: 40%;"></div>
@@ -2003,27 +1981,27 @@
    -
    +
    -

    Options

    +

    Options

    -

    Additional colors

    -

    Progress bars use some of the same button and alert classes for consistent styles.

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

    Additional colors

    +

    Progress bars use some of the same button and alert classes for consistent styles.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - 
     <div class="progress progress-info">
   <div class="bar" style="width: 20%"></div>
@@ -2039,22 +2017,22 @@
 </div>
    -

    Striped bars

    -

    Similar to the solid colors, we have varied striped progress bars.

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

    Striped bars

    +

    Similar to the solid colors, we have varied striped progress bars.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - 
     <div class="progress progress-info progress-striped">
   <div class="bar" style="width: 20%"></div>
@@ -2071,74 +2049,74 @@
    -
    +
    -

    Browser support

    -

    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

    -

    Opera and IE do not support animations at this time.

    +

    Browser support

    +

    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

    +

    Opera and IE do not support animations at this time.

    -
    +
    - -
    -
    -

    Miscellaneous Lightweight utility components

    -
    + +
    +
    +

    Miscellaneous Lightweight utility components

    +
    -

    Wells

    -

    Use the well as a simple effect on an element to give it an inset effect.

    -
    -
    - Look, I'm in a well! +

    Wells

    +

    Use the well as a simple effect on an element to give it an inset effect.

    +
    +
    + Look, I'm in a well! +
    - 
     <div class="well">
   ...
 </div>
    -

    Optional classes

    -

    Control padding and rounded corners with two optional modifier classes.

    -
    -
    - Look, I'm in a well! +

    Optional classes

    +

    Control padding and rounded corners with two optional modifier classes.

    +
    +
    + Look, I'm in a well! +
    - 
     <div class="well well-large">
   ...
 </div>
    -
    -
    - Look, I'm in a well! +
    +
    + Look, I'm in a well! +
    - 
     <div class="well well-small">
   ...
 </div>
    -

    Close icon

    -

    Use the generic close icon for dismissing content like modals and alerts.

    -
    -

    -
    +

    Close icon

    +

    Use the generic close icon for dismissing content like modals and alerts.

    +
    +

    + 
    <button class="close">&times;</button>
    -

    iOS devices require an href="#" for click events if you rather use an anchor.

    +

    iOS devices require an href="#" for click events if you rather use an anchor.

    <a class="close" href="#">&times;</a>
    -

    Helper classes

    -

    Simple, focused classes for small display or behavior tweaks.

    +

    Helper classes

    +

    Simple, focused classes for small display or behavior tweaks.

    -

    .pull-left

    -

    Float an element left

    +

    .pull-left

    +

    Float an element left

     class="pull-left"
    @@ -2148,8 +2126,8 @@ class="pull-left" } -

    .pull-right

    -

    Float an element right

    +

    .pull-right

    +

    Float an element right

     class="pull-right"
    @@ -2159,8 +2137,8 @@ class="pull-right" } -

    .muted

    -

    Change an element's color to #999

    +

    .muted

    +

    Change an element's color to #999

     class="muted"
    @@ -2170,8 +2148,8 @@ class="muted" } -

    .clearfix

    -

    Clear the float on any element

    +

    .clearfix

    +

    Clear the float on any element

     class="clearfix"
    @@ -2189,14 +2167,14 @@ class="clearfix" } -
    +
    +
    -
    - + -- cgit v1.2.3 From 9343e1e933c1a38ec4cc58024b01edda631863b0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 21:38:18 -0700 Subject: remove getting started link from home, add to navbar, overhaul getting started docs --- docs/components.html | 3 +++ 1 file changed, 3 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index ca8cfe2dd..a48037a2d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -45,6 +45,9 @@
  • Home
    • +
  • + Get started +
  • Scaffolding
    • -- cgit v1.2.3 From 5cb116beb897b783195e059b205af52b0f5b72c1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 10:58:20 -0700 Subject: cleanup subnav example --- docs/components.html | 1 - 1 file changed, 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index a48037a2d..19f33028c 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1242,7 +1242,6 @@ - Title
    • Home
      • -- cgit v1.2.3 From 6c23fff4d6d06953ae9804a4146cdc3fe2dd5a2e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 18 Jul 2012 01:06:52 -0700 Subject: misc docs content changes --- docs/components.html | 12 ------------ 1 file changed, 12 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 19f33028c..7a25db4dd 100644 --- a/docs/components.html +++ b/docs/components.html @@ -168,20 +168,8 @@

      Options

      ...

      -

      Dropup menus

      -

      ...

      -

      Aligning the menus

      ...

      - - -
      - - -

      Usage

      -

      ...

      - - -- cgit v1.2.3 From b9105b98f9ee5f15d5b18bccf277344683d4a6db Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 20 Jul 2012 22:06:47 -0700 Subject: move from downloads.html to customize.html to better match purpose of page, fix up customize page layout to match other docs, link style refinement to jumbotrons --- docs/components.html | 34 ++++++++++++++-------------------- 1 file changed, 14 insertions(+), 20 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 7a25db4dd..11a23efb6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -61,7 +61,7 @@ Javascript
    • - Extend + Customize
    @@ -113,7 +113,7 @@

    Example

    -

    An isolated (without dropdown toggle) dropdown menu example, designed to be used with the dropdown javascript plugin.

    +

    Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown javascript plugin.

    -
    + + +
    -

    Why use thumbnails

    -

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    +

    Why use thumbnails

    +

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    -

    Simple, flexible markup

    -

    Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

    +

    Simple, flexible markup

    +

    Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

    -

    Uses grid column sizes

    -

    Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

    +

    Uses grid column sizes

    +

    Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

    -

    Markup

    -

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

    +

    Markup

    +

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

     <ul class="thumbnails">
   <li class="span4">
@@ -1762,7 +1763,7 @@
   ...
 </ul>
    -

    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

    +

    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

     <ul class="thumbnails">
   <li class="span4">
@@ -1776,55 +1777,55 @@
 </ul>
    -

    More examples

    -

    Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

    - +

    More examples

    +

    Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

    + - + - -
    -
    -

    Alerts Styles for success, warning, and error messages

    -
    + +
    +
    +

    Alerts Styles for success, warning, and error messages

    +
    -

    Default alert

    -

    Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

    -
    -
    - - Warning! Best check yo self, you're not looking too good. +

    Default alert

    +

    Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

    +
    +
    + + Warning! Best check yo self, you're not looking too good. +
    - 
     <div class="alert">
   <button type="button" class="close" data-dismiss="alert">×</button>
@@ -1832,32 +1833,28 @@
 </div>
    -

    Dismiss buttons

    -

    Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

    -
    -<a href="#" class="close" data-dismiss="alert">×</button>
-
    -

    Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

    -
    -<button type="button" class="close" data-dismiss="alert">×</button>
-
    +

    Dismiss buttons

    +

    Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

    + 
    <a href="#" class="close" data-dismiss="alert">×</button>
    +

    Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

    + 
    <button type="button" class="close" data-dismiss="alert">×</button>
    -

    Dismiss alerts via javascript

    -

    Use the alerts jQuery plugin for quick and easy dismissal of alerts.

    +

    Dismiss alerts via javascript

    +

    Use the alerts jQuery plugin for quick and easy dismissal of alerts.

    -
    +
    -

    Options

    -

    For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

    -
    -
    - -

    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.

    +

    Options

    +

    For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

    +
    +
    + +

    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.

    +
    - 
     <div class="alert alert-block">
   <a class="close" data-dismiss="alert" href="#">&times;</a>
@@ -1867,97 +1864,97 @@
    -
    +
    -

    Contextual alternatives

    -

    Add optional classes to change an alert's connotation.

    +

    Contextual alternatives

    +

    Add optional classes to change an alert's connotation.

    -

    Error or danger

    -
    -
    - - Oh snap! Change a few things up and try submitting again. +

    Error or danger

    +
    +
    + + Oh snap! Change a few things up and try submitting again. +
    - 
     <div class="alert alert-error">
   ...
 </div>
    -

    Success

    -
    -
    - - Well done! You successfully read this important alert message. +

    Success

    +
    +
    + + Well done! You successfully read this important alert message. +
    - 
     <div class="alert alert-success">
   ...
 </div>
    -

    Information

    -
    -
    - - Heads up! This alert needs your attention, but it's not super important. +

    Information

    +
    +
    + + Heads up! This alert needs your attention, but it's not super important. +
    - 
     <div class="alert alert-info">
   ...
 </div>
    -
    +
    - -
    -
    -

    Progress bars For loading, redirecting, or action status

    -
    + +
    +
    +

    Progress bars For loading, redirecting, or action status

    +
    -

    Examples and markup

    +

    Examples and markup

    -

    Basic

    -

    Default progress bar with a vertical gradient.

    -
    -
    -
    +

    Basic

    +

    Default progress bar with a vertical gradient.

    +
    +
    +
    +
    - 
     <div class="progress">
   <div class="bar" style="width: 60%;"></div>
 </div>
    -

    Striped

    -

    Uses a gradient to create a striped effect. Not available in IE7-8.

    -
    -
    -
    +

    Striped

    +

    Uses a gradient to create a striped effect. Not available in IE7-8.

    +
    +
    +
    +
    - 
     <div class="progress progress-striped">
   <div class="bar" style="width: 20%;"></div>
 </div>
    -

    Animated

    -

    Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

    -
    -
    -
    +

    Animated

    +

    Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

    +
    +
    +
    +
    - 
     <div class="progress progress-striped active">
   <div class="bar" style="width: 40%;"></div>
@@ -1965,27 +1962,27 @@
    -
    +
    -

    Options

    +

    Options

    -

    Additional colors

    -

    Progress bars use some of the same button and alert classes for consistent styles.

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

    Additional colors

    +

    Progress bars use some of the same button and alert classes for consistent styles.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - 
     <div class="progress progress-info">
   <div class="bar" style="width: 20%"></div>
@@ -2001,22 +1998,22 @@
 </div>
    -

    Striped bars

    -

    Similar to the solid colors, we have varied striped progress bars.

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

    Striped bars

    +

    Similar to the solid colors, we have varied striped progress bars.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - 
     <div class="progress progress-info progress-striped">
   <div class="bar" style="width: 20%"></div>
@@ -2033,74 +2030,75 @@
    -
    +
    -

    Browser support

    -

    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

    -

    Opera and IE do not support animations at this time.

    +

    Browser support

    +

    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

    +

    Opera and IE do not support animations at this time.

    -
    +
    - -
    -
    -

    Miscellaneous Lightweight utility components

    -
    + +
    +
    +

    Miscellaneous Lightweight utility components

    +
    -

    Wells

    -

    Use the well as a simple effect on an element to give it an inset effect.

    -
    -
    - Look, I'm in a well! +

    Wells

    +

    Use the well as a simple effect on an element to give it an inset effect.

    +
    +
    + Look, I'm in a well! +
    - 
     <div class="well">
   ...
 </div>
    -

    Optional classes

    -

    Control padding and rounded corners with two optional modifier classes.

    -
    -
    - Look, I'm in a well! +

    Optional classes

    +

    Control padding and rounded corners with two optional modifier classes.

    +
    +
    + Look, I'm in a well! +
    - 
     <div class="well well-large">
   ...
 </div>
    -
    -
    - Look, I'm in a well! +
    +
    + Look, I'm in a well! +
    - 
     <div class="well well-small">
   ...
 </div>
    -

    Close icon

    -

    Use the generic close icon for dismissing content like modals and alerts.

    -
    -

    -
    -
    <button class="close">&times;</button>
    -

    iOS devices require an href="#" for click events if you rather use an anchor.

    -
    <a class="close" href="#">&times;</a>
    -

    Helper classes

    -

    Simple, focused classes for small display or behavior tweaks.

    +

    Close icon

    +

    Use the generic close icon for dismissing content like modals and alerts.

    +
    +

    +
    + 
    <button class="close">&times;</button>
    +

    iOS devices require an href="#" for click events if you rather use an anchor.

    + 
    <a class="close" href="#">&times;</a>
    -

    .pull-left

    -

    Float an element left

    +

    Helper classes

    +

    Simple, focused classes for small display or behavior tweaks.

    + +

    .pull-left

    +

    Float an element left

     class="pull-left"
    @@ -2110,8 +2108,8 @@ class="pull-left" } -

    .pull-right

    -

    Float an element right

    +

    .pull-right

    +

    Float an element right

     class="pull-right"
    @@ -2121,8 +2119,8 @@ class="pull-right" } -

    .muted

    -

    Change an element's color to #999

    +

    .muted

    +

    Change an element's color to #999

     class="muted"
    @@ -2132,8 +2130,8 @@ class="muted" } -

    .clearfix

    -

    Clear the float on any element

    +

    .clearfix

    +

    Clear the float on any element

     class="clearfix"
    @@ -2151,11 +2149,13 @@ class="clearfix" } -
    +
    + + -- cgit v1.2.3 From e38fa4b1f40b8e8f64ad904fd5ea3d6d7ab9dffc Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 24 Jul 2012 00:30:58 -0700 Subject: fix scroll thinggg --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index b867c2c35..8198de37f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -86,7 +86,7 @@ ================================================== -->
    -
      +
      • Dropdowns
      • Button groups
      • Button dropdowns
        • -- cgit v1.2.3 From b7b4fd5c82ea321da3d7858e223eb6adcd225672 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jul 2012 01:53:32 -0700 Subject: wrap footer in bs docs canvas for scrolling doodad --- docs/components.html | 76 +++++++++++++++++++++++++++------------------------- 1 file changed, 39 insertions(+), 37 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 8198de37f..181a8cbfc 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2158,48 +2158,50 @@ class="clearfix"
    -
    - - - + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - -- cgit v1.2.3 From 9d5c4312232ebb53b2499ed495851c0d61eb648c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 10:06:54 -0700 Subject: add basic support for sub menus in dropdown menus --- docs/components.html | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 181a8cbfc..c36eec940 100644 --- a/docs/components.html +++ b/docs/components.html @@ -122,7 +122,16 @@
  • Another action
  • Something else here
  • -
  • Separated link
    • +
  • + Separated link + +
    • @@ -136,10 +145,6 @@ </ul> - -
    - -

    Markup

    Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.

    @@ -156,10 +161,6 @@ </div> - -
    - -

    Options

    ...

    -- cgit v1.2.3 From 16b4ac0d8fd5fd2aa588a8b486b71b449e3821ca Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 10:35:15 -0700 Subject: add docs for sub menu support on dropdowns, add caret via :after to submenu toggles --- docs/components.html | 55 ++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 43 insertions(+), 12 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index c36eec940..719a9e874 100644 --- a/docs/components.html +++ b/docs/components.html @@ -122,16 +122,7 @@
  • Another action
  • Something else here
  • -
  • - Separated link - -
    • +
  • Separated link
    • @@ -162,10 +153,50 @@

    Options

    -

    ...

    +

    Align menus to the right and add include additional levels of dropdowns.

    Aligning the menus

    -

    ...

    +

    Add .pull-right to a .dropdown-menu to right align the dropdown menu.

    +
    +<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
+  ...
+</ul>
+
    + +

    Sub menus on dropdowns

    +

    Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.

    +
    +
    + +
    +
    +
    +<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+  ...
+  <li class="dropdown-submenu">
+    <a tabindex="-1" href="#">More options</a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+</ul>
+
    + -- cgit v1.2.3 From a30045daef809edf5ed592ad842c04377898e444 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jul 2012 00:30:15 -0700 Subject: reverse navbar styles to save code --- docs/components.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 719a9e874..8399b4297 100644 --- a/docs/components.html +++ b/docs/components.html @@ -31,7 +31,7 @@ -
    +
    @@ -1113,6 +1114,7 @@ 
     <form class="navbar-form pull-left">
   <input type="text" class="span2">
+  <button type="submit" class="btn">Submit</button>
 </form>
    -- cgit v1.2.3 From dee57462e2805421a0fe0d786229446bbaef677b Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 14 Aug 2012 21:06:08 -0700 Subject: get affix actually working and update docs --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 39fe7bc4f..583890200 100644 --- a/docs/components.html +++ b/docs/components.html @@ -85,7 +85,7 @@ ================================================== -->
    -
      +
      • Dropdowns
      • Button groups
      • Button dropdowns
        • -- cgit v1.2.3 From b8715ddfd03514da7fd56c46204d460cbb95dfcf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 17 Aug 2012 11:27:11 -0700 Subject: fixes #4417: proper height on thumbnail placeholder image --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 583890200..0b2ba25c7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1866,7 +1866,7 @@
        • - +
        • -- cgit v1.2.3 From 077577c7f3e71f7451513059ccd1c3775acc4025 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 17 Aug 2012 11:46:23 -0700 Subject: fixes #4421: add static top navbar class --- docs/components.html | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 0b2ba25c7..f3803201a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1162,7 +1162,7 @@
          -

          Fixed navigation

          +

          Optional display variations

          Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.

          Fixed to top

          @@ -1209,6 +1209,28 @@ </div> +

          Static top navbar

          +

          Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the body.

          +
          +
          +
          +
          + Title + +
          +
          +
          +
          +
          +<div class="navbar navbar-static-top">
+  ...
+</div>
+
          +
          -- cgit v1.2.3 From e71e2b4be2ad484ece85ef22df934bd0acd926d1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Aug 2012 20:37:31 -0700 Subject: fixes #4460 and #4461: copy change for opera animations support --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index f3803201a..6ff9e5a5b 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2141,7 +2141,7 @@

          Browser support

          Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

          -

          Opera and IE do not support animations at this time.

          +

          Versions earlier than Internet Explorer 9 and Opera 12 do not support animations.

          -- cgit v1.2.3 From e4d4ef43b091ce6e554d02cf473602aeae2e51ae Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Aug 2012 20:38:27 -0700 Subject: copy change for previous commit --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 6ff9e5a5b..6312a3041 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2141,7 +2141,7 @@

          Browser support

          Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

          -

          Versions earlier than Internet Explorer 9 and Opera 12 do not support animations.

          +

          Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

          -- cgit v1.2.3 From 4e979f084d0a0942cb820ca54786ad2b99e4acff Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 19 Aug 2012 21:12:52 -0700 Subject: fix static navbar container issues, clean up docs presentation by unfixing the top navbar in favor of static one, start adding table of contents for longer sections of docs --- docs/components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 6312a3041..40f145756 100644 --- a/docs/components.html +++ b/docs/components.html @@ -27,11 +27,11 @@ - + -
          +