From 4b1ff7fa49361fd4a13341767d53231fc9ecef21 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 12 Jan 2014 00:04:24 -0800 Subject: Formatting and docs changes --- docs/components.html | 3702 +++++++++++++++++++++++++------------------------- 1 file changed, 1830 insertions(+), 1872 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index c20591de3..0c6fe0c2b 100644 --- a/docs/components.html +++ b/docs/components.html @@ -6,90 +6,87 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns, --- - -
-
-

Glyphicons

-
- -

Available glyphs

-

Includes 200 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

-
-
    - {% for iconClassName in site.data.glyphicons %} -
  • - - glyphicon {{ iconClassName }} -
    • - {% endfor %} -
-
+ +
+

Glyphicons

+ +

Available glyphs

+

Includes 200 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

+
+
    + {% for iconClassName in site.data.glyphicons %} +
  • + + glyphicon {{ iconClassName }} +
    • + {% endfor %} +
+
-

How to use

-

For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

-
-

Don't mix with other components

-

Icon classes cannot be combined with other elements. They are designed to be standalone elements.

-
+

How to use

+

For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

+
+

Don't mix with other components

+

Icon classes cannot be combined with other elements. They are designed to be standalone elements.

+
{% highlight html %} {% endhighlight %} -

Examples

-

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

-
- - -
- -
-
-

Dropdowns

-
-

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

+ +
+

Dropdowns

- -

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

-
-
- - -
-
+

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

+ + +

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

+
+
+ + +
+
{% highlight html %}
{% endhighlight %} - -

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

-
-

May require additional positioning

-

Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow properties or appear out of bounds of the viewport. Address these issues on your own as they arise.

-
-
-

Deprecated .pull-right alignment

-

As of v3.1, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

-
+ +

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

+
+

May require additional positioning

+

Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow properties or appear out of bounds of the viewport. Address these issues on your own as they arise.

+
+
+

Deprecated .pull-right alignment

+

As of v3.1, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

+
{% highlight html %} {% endhighlight %} - -

Add a header to label sections of actions in any dropdown menu.

-
-
- - -
-
+ +

Add a header to label sections of actions in any dropdown menu.

+
+
+ + +
+
{% highlight html %} {% endhighlight %} - -

Add .disabled to a <li> in the dropdown to disable the link.

-
-
- - -
-
+ +

Add .disabled to a <li> in the dropdown to disable the link.

+
+
+ + +
+
{% highlight html %} {% endhighlight %} -
+
- -
-
-

Button groups

-
-

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

+ +
+

Button groups

-
-

Tooltips & popovers in button groups require special setting

-

When using tooltips or popovers on elements within a .btn-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

-
+

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

-

Basic example

-

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

-
-
- - - -
+
+

Tooltips & popovers in button groups require special setting

+

When using tooltips or popovers on elements within a .btn-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

+
+ +

Basic example

+

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

+
+
+ + +
+
{% highlight html %}
@@ -207,26 +203,26 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
{% endhighlight %} -

Button toolbar

-

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

-
-