From 0dda2c4659c6e0407b5b9fda6618ab5c8c12a897 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jul 2012 22:36:08 -0700 Subject: make docs scroll over jumbotrons, but only for 980px up --- docs/components.html | 2622 +++++++++++++++++++++++++------------------------- 1 file changed, 1311 insertions(+), 1311 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 11a23efb6..d95d35973 100644 --- a/docs/components.html +++ b/docs/components.html @@ -78,53 +78,54 @@ -
- - - -
-
- -
-
+
+ +
+ +
+
+ +
+
- - +

Aligning the menus

+

...

+ - -
-
-

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>
@@ -196,26 +197,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">
@@ -224,16 +225,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">
   ...
@@ -241,102 +242,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="#">
@@ -349,134 +350,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>
@@ -489,49 +490,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>
@@ -544,34 +545,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>
@@ -584,29 +585,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>
@@ -1345,26 +1346,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>
@@ -1375,39 +1376,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">
   ...
@@ -1415,20 +1416,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>
@@ -1436,14 +1437,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">
@@ -1455,14 +1456,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">
@@ -1472,175 +1473,175 @@
 </ul>
-
+
- -
-
-

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

-
+ +
+
+

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

+

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>
@@ -1653,105 +1654,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.

    -

    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