html css bootstrap,Css · Bootstrap - Bootstrap中文网

Forms

Default styles

Individual form controls automatically receive some global styling. By default, inputs are set to width: 100%;.

Legend

Label name

Example block-level help text here.

Check me out

Submit

Legend

Label name

Example block-level help text here.

Check me out

Submit

Optional layouts

Included with Bootstrap are optional form layouts for common use cases.

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

Remember me

Sign in

Remember me

Sign in

Horizontal form

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

Add .form-horizontal to the form

Wrap labels and controls in .control-group

Add .control-label to the label

Wrap any associated controls in .controls for proper alignment

Email

Password

Remember me

Sign in

Email

Password

Remember me

Sign in

Supported form controls

Examples of standard form controls supported in an example form layout.

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Requires the use of a specified type at all times.

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

Checkboxes and radios

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

Default (stacked)

Option one is this and that—be sure to include why it's great

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option one is this and that—be sure to include why it's great

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Inline checkboxes

Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.

1

2

3

1

2

3

Selects

Use the default option or specify a multiple="multiple" to show multiple options at once.

1

2

3

4

5

1

2

3

4

5

1

2

3

4

5

1

2

3

4

5

Form control states

Provide feedback to users or visitors with basic feedback states on form controls and labels.

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

Invalid inputs

Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

Disabled fieldsets

Add the disabled attribute to a

to disable all the controls within the at once. Link buttons (with the element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.

Disabled select

Can't check this

Submit

Disabled select

Can't check this

Submit

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use:

Add .has-warning, .has-error, or .has-success to the parent element

Add .input-with-feedback to the field(s) in question

Validation styles are applied on a per-input basis. With horizontal forms, the will always be styled.

Input with warning

Input with error

Input with success

Input with warning

Input with error

Input with success

Extending form controls

Adding on top of existing browser controls, Bootstrap includes other useful form components.

Input groups

Add text or buttons before, after, or on both sides of any text-based input. Use .input-group with a .add-on to prepend or append elements to an .

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

@

.00

$

.00

@

.00

$

.00

Optional sizes

Add the relative form sizing classes to the `.input-group-addon`.

@

@

@

@

@

@

Buttons instead of text

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.

Go!

Go!

Go!

Go!

Button dropdowns

Action

...

Action

...

Segmented dropdown groups

...

...

Control sizing

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

Relative sizing

Create larger or smaller form controls that match button sizes.

Column sizing

Use .span1 to .span12 for setting widths on inputs that match Bootstrap's grid system.

1

2

3

4

5

1

2

3

4

5

1

2

3

4

5

...

...

...

If you need multiple inputs on the same line, wrap them in the standard grid markup (with .row and .span* classes). Each input should have it's own column and will expand to fill the available width automatically.

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

Some value here

Some value here

Form actions

End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

Save changes

Cancel

Save changes

Cancel

Help text

Inline and block level support for help text that appears around form controls.

Inline help

Inline help text

Inline help text

Block help

A longer block of help text that breaks onto a new line and may extend beyond one line.

A longer block of help text that breaks onto a new line and may extend beyond one line.