diff --git a/docs/_includes/components/alerts.html b/docs/_includes/components/alerts.html deleted file mode 100644 index 749ecc2b47..0000000000 --- a/docs/_includes/components/alerts.html +++ /dev/null @@ -1,85 +0,0 @@ -
-

Alerts

- -

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

- -

Examples

-

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

- -
-

No default class

-

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

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

Dismissible alerts

-

Build on any alert by adding an optional .alert-dismissible and close button.

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

Ensure proper behavior across all devices

-

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

-
- - -

Use the .alert-link utility class to quickly provide matching colored links within any alert.

-
- - - - -
-{% highlight html %} - - - - -{% endhighlight %} -
diff --git a/docs/_includes/components/badges.html b/docs/_includes/components/badges.html deleted file mode 100644 index df5efe4761..0000000000 --- a/docs/_includes/components/badges.html +++ /dev/null @@ -1,72 +0,0 @@ -
-

Badges

- -

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

- -
- Inbox 42 -
-{% highlight html %} -Inbox 42 -{% endhighlight %} - -

Self collapsing

-

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

- -
-

Cross-browser compatibility

-

Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.

-
- -

Adapts to active nav states

-

Built-in styles are included for placing badges in active states in pill navigations.

-
- -
- -
-

- - - - -

-
-{% highlight html %} - -{% endhighlight %} -
diff --git a/docs/_includes/components/dropdowns.html b/docs/_includes/components/dropdowns.html deleted file mode 100644 index eabfd9ca73..0000000000 --- a/docs/_includes/components/dropdowns.html +++ /dev/null @@ -1,98 +0,0 @@ -
-

Dropdowns

- -

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.

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

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.

-
-
- - -
-
-{% highlight html %} - -{% endhighlight %} -
diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html deleted file mode 100644 index f474a0998a..0000000000 --- a/docs/_includes/components/navs.html +++ /dev/null @@ -1,235 +0,0 @@ -
-

Navs

- -

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.

- - -

Roll your own navigation style by extending the base .nav component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but not the active state.

- -{% example html %} - -{% endexample %} - -

Classes are used so your markup can be super flexible.

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

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.

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

Requires JavaScript tabs plugin

-

For tabs with tabbable areas, you must use the tabs JavaScript plugin.

-
- - -

Take that same HTML, but use .nav-pills instead:

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

Just add .nav-stacked.

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

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

- -

Tabs with dropdowns

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

Pills with dropdowns

-
- -
-{% highlight html %} - -{% endhighlight %} -
diff --git a/docs/components.html b/docs/components.html index 11055d9cae..1bda126a51 100644 --- a/docs/components.html +++ b/docs/components.html @@ -5,19 +5,15 @@ slug: components lead: "Over a dozen reusable components built to provide dropdowns, input groups, navigation, alerts, and much more." --- -{% include components/dropdowns.html %} {% include components/button-groups.html %} {% include components/button-dropdowns.html %} {% include components/input-groups.html %} -{% include components/navs.html %} {% include components/navbar.html %} {% include components/breadcrumbs.html %} {% include components/pagination.html %} {% include components/labels.html %} -{% include components/badges.html %} {% include components/jumbotron.html %} {% include components/page-header.html %} -{% include components/alerts.html %} {% include components/media.html %} {% include components/list-group.html %} {% include components/responsive-embed.html %} diff --git a/docs/components/alerts.md b/docs/components/alerts.md new file mode 100644 index 0000000000..ff25de763d --- /dev/null +++ b/docs/components/alerts.md @@ -0,0 +1,66 @@ +--- +layout: page +title: Alerts +--- + +Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the [alerts jQuery plugin]({{ site.baseurl }}javascript/#alerts). + +Wrap any text and an optional dismiss button in `.alert` and one of the four contextual classes (e.g., `.alert-success`) for basic alert messages. + +
+

No default class

+

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

+
+ +{% example html %} + + + + +{% endexample %} + +### Dismissing + +Build on any alert by adding an optional `.alert-dismissible` and [close button](). + +{% example html %} + +{% endexample %} + +
+

Ensure proper behavior across all devices

+

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

+
+ +### Link color + +Use the `.alert-link` utility class to quickly provide matching colored links within any alert. + +{% example html %} + + + + +{% endexample %} diff --git a/docs/components/badges.md b/docs/components/badges.md new file mode 100644 index 0000000000..470f1979f4 --- /dev/null +++ b/docs/components/badges.md @@ -0,0 +1,68 @@ +--- +layout: page +title: Badges +--- + +Easily highlight new or unread items by adding a `` within links, Bootstrap navs, and more. + +{% example html %} +Inbox 42 +{% endexample %} + +### Self collapsing + +When there are no new or unread items, badges will simply collapse (via CSS's `:empty` selector) provided no content exists within. + +### Active nav + +Built-in styles are included for placing badges in active states in pill navigations. + +{% example html %} + + +{% endexample %} + +### Buttons + +Like active nav links, badges in Bootstrap buttons automatically restyle to better blend into the background. + +{% example html %} + + + + +{% endexample %} diff --git a/docs/components/buttons.md b/docs/components/buttons.md index c02e74e1f8..d97b881123 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -1,6 +1,7 @@ - - -# Buttons +--- +layout: page +title: Buttons +--- Use any of the available button classes to quickly create a styled button. @@ -24,10 +25,6 @@ Use any of the available button classes to quickly create a styled button. {% endexample %} - - - - ## Sizes Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes. @@ -54,10 +51,6 @@ Create block level buttons—those that span the full width of a parent—by add {% endexample %} - - - - ## Active state Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to ` + + +{% endexample %} + +### Alignment + +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.

+
+ +{% highlight html %} + +{% endhighlight %} + +### Menu headers + +Add a header to label sections of actions in any dropdown menu. + +{% example html %} + +{% endexample %} + +### Menu dividers + +Separate groups of related menu items with a divider. + +{% example html %} + +{% endexample %} + +### Disabled menu items + +Add `.disabled` to a `
  • ` in the dropdown to disable the link. + +{% example html %} + +{% endexample %} diff --git a/docs/components/forms.md b/docs/components/forms.md index 6192c6d808..b882e22332 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -1,32 +1,15 @@ -
    -

    Forms

    +--- +layout: page +title: Forms +--- -

    Basic example

    -

    Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

    -
    -
    -
    - - -
    -
    - - -
    -
    - - -

    Example block-level help text here.

    -
    -
    - -
    - -
    -
    -{% highlight html %} +Bootstrap normalizes common HTML5 form elements and adds a number of layout options for building forms of all sizes. + +## Example form + +Individual form controls automatically receive some global styling. All textual ``, ` - -
    -{% highlight html %} +
    +

    Input groups

    +

    To add integrated text or buttons before and/or after any text-based `<input>`, check out the input group component.

    +
    + +### Textarea + +Form control which supports multiple lines of text. Change `rows` attribute as necessary. + +{% example html %} -{% endhighlight %} +{% endexample %} -

    Checkboxes and radios

    -

    Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

    -

    A checkbox or radio with the disabled attribute will be styled appropriately. To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .radio-inline, .checkbox, .checkbox-inline, or <fieldset>.

    -

    Default (stacked)

    -
    -
    -
    - -
    -
    - -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -{% highlight html %} +### Checkboxes and radios + +Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. + +A checkbox or radio with the `disabled` attribute will be styled appropriately. To have the `