From f919f6f94f3e8405d7653a5f16f8b3d587c47f4c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Sep 2011 01:40:27 -0700 Subject: huge update to forms, docs for the new forms, added a new link for js example to tabs/pills, add some new mixins --- docs/assets/css/docs.css | 10 +- docs/index.html | 475 +++++++++++++++++------------------------------ 2 files changed, 181 insertions(+), 304 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index fb727a900..a17fd5692 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -310,8 +310,16 @@ img.large-bird { opacity: .1; } + /* Pretty Print -------------------------------------------------- */ pre.prettyprint { overflow: hidden; -} \ No newline at end of file +} + + +/* Wells +-------------------------------------------------- */ +.well form { + margin-bottom: 0; +} diff --git a/docs/index.html b/docs/index.html index b24999c62..75a18ea40 100644 --- a/docs/index.html +++ b/docs/index.html @@ -884,331 +884,198 @@

Forms

+
+
+

Four types of forms

+

With 2.0, we now have four types of forms to choose from:

+
    +
  • Search form for a super-rounded input and optional button
    • +
  • Inline form for a series of elements on one line
    • +
  • Horizontal form for left-aligned labels
    • +
  • Vertical form for stacked labels and inputs
    • +
+
+
+

+
+
-

Default styles

-

All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.

+

Search form

-
-
- Example form legend -
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- Some value here -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - Small snippet of help text -
-
-
-
- Example form legend -
- -
-
- @ - -
-
-
-
- -
-
- - -
-
-
-
- -
-
- - -
-
-
-
- -
- -
-
-
-
- Example form legend -
- -
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
- - Note: Labels surround all the options for much larger click areas and a more usable form. - -
-
-
- -
-
- - - to - - - All times are shown as Pacific Standard Time (GMT -08:00). -
-
-
-
- -
- - - Block of help text to describe the field above if need be. - -
-
-
- -
-
    -
  • - -
    • -
  • - -
    • -
-
-
-
-   -
-
-
+
+
+ + +
+
-
- -
- +
-

Stacked forms

-

Add .form-stacked to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.

+

Inline form

-
-
- Example form legend -
- -
- -
-
-
- -
- -
-
-
-
- Example form legend -
- -
- - Small snippet of help text -
-
-
- -
-
    -
  • - -
    • -
  • - -
    • -
- - Note: Labels surround all the options for much larger click areas and a more usable form. - -
-
-
-
-   -
-
+
+
+

Some directional text

+

And maybe some kind of optional supporting text right here.

+ + + + +
+
-
- +
-

Form field sizes

-

Customize any form input, select, or textarea width by adding just a few classes to your markup.

-

As of v1.3.0, we have added the grid-based sizing classes for form elements. Please use the these over the existing .mini, .small, etc classes.

+

Horizontal form

-
-
-
-
-
-
-
-
-
-
-
-
+ + Example form +
+ +
+ +

Help text here. Be sure to fill this out like so, or else!

+
+
+
+ +
+ +
+
+
+ +
+ +
+
+ Example form +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+
+ + + + +
+

Note: Labels surround all the options for much larger click areas and a more usable form.

+
+
+
+ +
+
+ + +
+

Note: Labels surround all the options for much larger click areas and a more usable form.

+
+
+
+ + +
-
-

Buttons

-

As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.

-

All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue .primary class, a light-blue .info class, a green .success class, and a red .danger class.

+

Vertical form

-

Example buttons

-

Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:

-
-      -
-

Alternate sizes

-

Fancy larger or smaller buttons? Have at it!

-
- Primary action - Action -
-
- Primary action - Action -
-

Disabled state

-

For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s .disabled for links and :disabled for <button> elements.

-

Links

-
- Primary action - Action -
-

Buttons

-
-   -
+
+ Example form +
+ +
+ +

Be sure to fill this out like so, or else!

+
+
+
+ +
+ +
+
+
+ +
+
+ + + +
+
+
+
+ + +
+
-
+ @@ -1378,6 +1245,7 @@

Tabs and pills

Create simple secondary navigation with a <ul>. Swap between tabs or pills by adding the appropriate class.

Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.

+

Get the javascript »

-- cgit v1.2.3