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