From 4fe37339653c909368ba772ea9214c0b2a511fee Mon Sep 17 00:00:00 2001 From: Thomas Park Date: Fri, 16 Aug 2013 16:26:07 -0700 Subject: update bootstrap to 3.0.0-rc2 --- bower_components/bootstrap/components.html | 1729 ++++++++++++++++++---------- 1 file changed, 1095 insertions(+), 634 deletions(-) mode change 100644 => 100755 bower_components/bootstrap/components.html (limited to 'bower_components/bootstrap/components.html') diff --git a/bower_components/bootstrap/components.html b/bower_components/bootstrap/components.html old mode 100644 new mode 100755 index 1f685c2d..815bd5d8 --- a/bower_components/bootstrap/components.html +++ b/bower_components/bootstrap/components.html @@ -2,7 +2,7 @@ layout: default title: Components slug: components -lead: "Dozens of reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more." +lead: "Over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more." base_url: "../" --- @@ -11,7 +11,7 @@ base_url: "../" ================================================== -->
-

Dropdown menus

+

Dropdowns

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

@@ -19,29 +19,30 @@ base_url: "../"

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 %} - +

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

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

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

+ +

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

-
{% highlight html %} -
@@ -102,14 +105,14 @@ base_url: "../"

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.

+

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.

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

+

Basic example

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

@@ -126,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.

@@ -154,13 +157,51 @@ base_url: "../"
{% endhighlight %} -

Nested button groups

-

Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.

+

Sizing

+

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

+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+{% highlight html %} +
...
+
...
+
...
+
...
+{% endhighlight %} + +

Nesting

+

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

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

Vertical button groups

+

Vertical variation

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

+
+ + +
+
+ + +
+
+ + +
+
+ + +
{% highlight html %} @@ -192,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.

@@ -203,8 +300,8 @@ base_url: "../"
Left - Right Middle + Right
{% highlight html %} @@ -221,7 +318,7 @@ base_url: "../" ================================================== -->
-

Button dropdown menus

+

Button dropdowns

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

@@ -231,60 +328,68 @@ base_url: "../"

Single button dropdowns

-

Turn a button into dropdown toggle with some basic markup changes.

+

Turn a button into a dropdown toggle with some basic markup changes.

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
{% highlight html %} @@ -305,69 +410,78 @@ base_url: "../"

Split button dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

-
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
{% highlight html %}
- - +
    @@ -380,12 +494,12 @@ base_url: "../"
{% endhighlight %} -

Works with all button sizes

+

Sizing

Button dropdowns work with buttons of all sizes.

-
+
-
+
+
-
    @@ -409,11 +525,25 @@ base_url: "../"
+
+
+ + +
+
{% highlight html %}
-
    @@ -423,17 +553,26 @@ base_url: "../"
    -
      ...
    + + +
    + +
      + ... +
    {% endhighlight %} -

    Dropup buttons

    +

    Dropup variation

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

    @@ -477,6 +616,316 @@ base_url: "../" + + +
    +
    +

    Input groups

    +
    +

    Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a .form-control.

    + +
    +

    Cross-browser compatibility

    +

    Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

    +
    +
    +

    Tooltips & popovers in input groups require special setting

    +

    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 example

    +
    +
    + @ + +
    +
    +
    + + .00 +
    +
    +
    + $ + + .00 +
    +
    +{% highlight html %} +
    + @ + +
    + +
    + + .00 +
    + +
    + $ + + .00 +
    +{% endhighlight %} + + +

    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.

    +
    +
    + @ + +
    +
    +
    + @ + +
    +
    +
    + @ + +
    +
    +{% highlight html %} +
    + @ + +
    + +
    + @ + +
    + +
    + @ + +
    +{% endhighlight %} + + +

    Checkboxes and radio addons

    +

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

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

    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.

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

    Buttons with dropdowns

    +

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

    Segmented buttons

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

Options

- +

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

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

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

@@ -583,34 +1032,33 @@ 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

- +
{% highlight html %}
    @@ -672,177 +1120,231 @@ base_url: "../"

    Navbar

- -

To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content.

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

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

-

Navbar components

+
+

Customize the collapsing point

+

Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

+
- -

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

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

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.

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

Plugin dependency

+

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

+
-
-
- - - -
-
+
+

Make navbars accessible

+

Be sure to add a role="navigation" to every navbar to help with accessibility.

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

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

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

Text

+ +

Text

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

-
- Brand -

Signed in as Mark Otto

-
+
{% highlight html %} -
- Brand -

Signed in as Mark Otto

-
+

Signed in as Mark Otto

{% endhighlight %} - + +

For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.

-
- Brand -

Signed in as Mark Otto

-
+
{% highlight html %} -
- Brand -

Signed in as Mark Otto

-
+

Signed in as Mark Otto

{% endhighlight %} - -

Align nav links, forms, buttons, or text, using the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction. To align nav links, put them in a separate <ul> with the respective utility class applied.

+ +

Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.

+

These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.

-

Optional display variations

-

Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar. These will also remove rounded corners.

- +

Add .navbar-fixed-top.

-
-
+
+
+
{% highlight html %} -
+
+ {% endhighlight %}
@@ -854,24 +1356,36 @@ body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

- + +

Add .navbar-fixed-bottom instead.

-
-
+
+
+
{% highlight html %} -
+
+ {% endhighlight %}
@@ -883,157 +1397,68 @@ body { padding-bottom: 70px; }

Make sure to include this after the core Bootstrap CSS.

- + +

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

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

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

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

Plugin dependency

-

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

-
- -

Inverted variation

+

Modify the look of the navbar by adding .navbar-inverse.

-
-
- Title -
- -
- -
- -
-
-
+
+ + +
+ +
+
{% highlight html %} -
+
+ {% endhighlight %}
@@ -1049,25 +1474,25 @@ body { padding-bottom: 70px; }

Indicate the current page's location within a navigational hierarchy.

Separators are automatically added in CSS through :before and content.

-
    +
    1. Home
      2. -
-
    + +
    1. Home
    2. Library
      3. -
- +
{% highlight html %} - + {% endhighlight %}
@@ -1081,7 +1506,7 @@ body { padding-bottom: 70px; }

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

-

Standard pagination

+

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