diff --git a/css.html b/css.html index c686190ec..3ea6a84c7 100644 --- a/css.html +++ b/css.html @@ -1446,27 +1446,29 @@ For example, <section> should be wrapped as inline.

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.

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

Example block-level help text here.

+
+
+ +
+ +
+
{% highlight html %}
@@ -1502,22 +1504,24 @@ For example, <section> should be wrapped as inline.

Always add labels

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

- -
- - -
-
- - -
-
- -
- -
+
+
+
+ + +
+
+ + +
+
+ +
+ +
+
{% highlight html %}
@@ -1540,34 +1544,36 @@ For example, <section> should be wrapped as inline.

Horizontal form

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.

- -
- -
- -
-
-
- -
- -
-
-
-
-
- +
+ +
+ +
+
-
-
-
- +
+ +
+ +
-
- +
+
+
+ +
+
+
+
+
+ +
+
+ +
{% highlight html %}
@@ -1609,18 +1615,22 @@ For example, <section> should be wrapped as inline.

Type declaration required

Inputs will only be fully styled if their type is properly declared.

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

Textarea

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

-
- -
+
+
+ +
+
{% highlight html %} {% endhighlight %} @@ -1628,27 +1638,29 @@ For example, <section> should be wrapped as inline.

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)

-
-
- -
-
-
- -
-
- -
-
+
+
+
+ +
+
+
+ +
+
+ +
+
+
{% highlight html %}
- + +
{% highlight html %}
@@ -1773,18 +1791,22 @@ For example, <section> should be wrapped as inline.

Input focus

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

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

Disabled inputs

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

- - - +
+
+ +
+
{% highlight html %} {% endhighlight %} @@ -1802,26 +1824,28 @@ For example, <section> should be wrapped as inline.

While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.

-
-
-
- - -
-
- - -
-
- -
- -
-
+
+
+
+
+ + +
+
+ + +
+
+ +
+ +
+
+
{% highlight html %}
@@ -1848,20 +1872,22 @@ For example, <section> should be wrapped as inline.

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

- -
- - -
-
- - -
-
- - -
- +
+
+
+ + +
+
+ + +
+
+ + +
+
+
{% highlight html %}
@@ -1883,23 +1909,25 @@ For example, <section> should be wrapped as inline.

Height sizing

Create larger or smaller form controls that match button sizes.

-
-
- - - +
+ +
+ + + - - - -
- + + + +
+ +
{% highlight html %} @@ -1912,19 +1940,21 @@ For example, <section> should be wrapped as inline.

Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

-
-
-
- +
+ +
+
+ +
+
+ +
+
+ +
-
- -
-
- -
-
- + +
{% highlight html %}
@@ -1941,10 +1971,12 @@ For example, <section> should be wrapped as inline.

Help text

Block level help text for form controls.

-
- - A block of help text that breaks onto a new line and may extend beyond one line. -
+
+
+ + A block of help text that breaks onto a new line and may extend beyond one line. +
+
{% highlight html %} A block of help text that breaks onto a new line and may extend beyond one line. {% endhighlight %}