From 3c880e681d49ade20f1b9fcbfb573172d24b3b89 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 16 Aug 2013 13:30:33 -0700 Subject: finish up second pass through docs nav, headings, organization, naming, etc (another run through at #9710) --- components.html | 91 +++++++++++++++++++++++++++------------------------------ 1 file changed, 43 insertions(+), 48 deletions(-) (limited to 'components.html') diff --git a/components.html b/components.html index a5bdb7c32..815bd5d89 100644 --- a/components.html +++ b/components.html @@ -42,7 +42,7 @@ base_url: "../" {% endhighlight %} - +

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

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

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

@@ -76,7 +76,7 @@ base_url: "../" {% endhighlight %} - +

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

@@ -112,7 +112,7 @@ base_url: "../"

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

+

Basic example

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

@@ -129,7 +129,7 @@ base_url: "../"
{% endhighlight %} -

Multiple button groups

+

Button toolbar

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

@@ -157,7 +157,7 @@ base_url: "../"
{% endhighlight %} -

Button group sizing

+

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.

@@ -196,7 +196,7 @@ base_url: "../"
...
{% endhighlight %} -

Nested button groups

+

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

@@ -233,7 +233,7 @@ base_url: "../"
{% endhighlight %} -

Vertical button groups

+

Vertical variation

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

@@ -289,7 +289,7 @@ base_url: "../"
{% endhighlight %} -

Justified button groups

+

Justified link variation

Make a group of buttons stretch at the same size to span the entire width of its parent.

@@ -494,7 +494,7 @@ base_url: "../"
{% endhighlight %} -

Works with all button sizes

+

Sizing

Button dropdowns work with buttons of all sizes.

@@ -572,7 +572,7 @@ base_url: "../"
{% endhighlight %} -

Dropup buttons

+

Dropup variation

Trigger dropdown menus above elements by adding .dropup to the parent.

@@ -634,7 +634,7 @@ base_url: "../"

When using tooltips or popovers on elements within an .input-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 input group

+

Basic example

@ @@ -670,7 +670,8 @@ base_url: "../"
{% endhighlight %} -

Optional sizes

+ +

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

@@ -706,7 +707,7 @@ base_url: "../" {% endhighlight %} -

Checkboxes and radio buttons

+

Checkboxes and radio addons

Place any checkbox or radio option within an input group's addon instead of text.

@@ -750,7 +751,7 @@ base_url: "../" {% endhighlight %} -

Buttons instead of text

+

Button addons

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

@@ -864,7 +865,7 @@ base_url: "../"
{% endhighlight %} -

Segmented dropdown groups

+

Segmented buttons

@@ -981,9 +982,8 @@ base_url: "../" {% endhighlight %} -

Options

- +

Easily make tabs or pills equal widths of their parent with .nav-justified.

    @@ -1007,7 +1007,8 @@ base_url: "../"
{% endhighlight %} - + +

For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects.

@@ -1031,14 +1032,11 @@ base_url: "../" {% endhighlight %} - +

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

-
- - - +

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Tabs with dropdowns

@@ -1244,10 +1242,7 @@ base_url: "../"
-

Optional navbar content

-

Quickly add other types of content, beyond links or forms, to a navbar with a few classes.

- - +

For buttons not residing in a <form>, add this class to vertically center buttons within a navbar.