From d9bb7ddac5c2be077f9d1f250325bb07b4e963ce Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 11 Jul 2014 22:34:47 -0700 Subject: rearrange docs components --- docs/components/alerts.md | 66 +++++ docs/components/badges.md | 68 +++++ docs/components/buttons.md | 24 +- docs/components/code.md | 27 +- docs/components/dropdowns.md | 100 +++++++ docs/components/forms.md | 657 +++++++++++------------------------------ docs/components/navs.md | 162 ++++++++++ docs/components/scaffolding.md | 20 -- docs/components/tables.html | 458 ---------------------------- docs/components/tables.md | 444 ++++++++++++++++++++++++++++ docs/components/type.md | 47 +-- 11 files changed, 1017 insertions(+), 1056 deletions(-) create mode 100644 docs/components/alerts.md create mode 100644 docs/components/badges.md create mode 100644 docs/components/dropdowns.md create mode 100644 docs/components/navs.md delete mode 100644 docs/components/tables.html create mode 100644 docs/components/tables.md (limited to 'docs/components') diff --git a/docs/components/alerts.md b/docs/components/alerts.md new file mode 100644 index 000000000..ff25de763 --- /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 000000000..470f1979f --- /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 c02e74e1f..d97b88112 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 6192c6d80..b882e2233 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -1,32 +1,15 @@ -
    -

    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 %} +--- +layout: page +title: Forms +--- + +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 `