From 3e76d6565603fafa2c85ad81d7b6345c4e279c72 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 28 May 2017 22:50:57 -0700 Subject: Rearrange all the docs to allow for a docs/major.minor/ setup --- docs/components/forms.md | 1018 ---------------------------------------------- 1 file changed, 1018 deletions(-) delete mode 100644 docs/components/forms.md (limited to 'docs/components/forms.md') diff --git a/docs/components/forms.md b/docs/components/forms.md deleted file mode 100644 index 366f8f625..000000000 --- a/docs/components/forms.md +++ /dev/null @@ -1,1018 +0,0 @@ ---- -layout: docs -title: Forms -description: Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. -group: components -toc: true ---- - -## Form controls - -Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl }}/content/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes. - -Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `type` attribute**. - -{% example html %} -
-
- - - We'll never share your email with anyone else. -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - - This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. -
-
- Radio buttons -
- -
-
- -
-
- -
-
-
- -
- -
-{% endexample %} - -Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassesUsed forSupported variations
- {% markdown %}`.form-group`{% endmarkdown %} - - Any group of form controls - - {% markdown %}Use with any block-level element like `
` or `
`{% endmarkdown %} -
- {% markdown %}`.form-control`{% endmarkdown %} - - Textual inputs - - {% markdown %}`text`, `password`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`{% endmarkdown %} -
- Select menus - - {% markdown %}`multiple`, `size`{% endmarkdown %} -
- Textareas - - N/A -
- {% markdown %}`.form-control-file`{% endmarkdown %} - - File inputs - - {% markdown %}`file`{% endmarkdown %} -
-{% markdown %} -`.form-check` -{% endmarkdown %} - - Checkboxes and radios - - N/A -
- -### Textual inputs - -Here are examples of `.form-control` applied to each textual HTML5 `` `type`. - -{% example html %} -
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-{% endexample %} - -## Form layouts - -Since Bootstrap applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis. - -### Form groups - -The `.form-group` class is the easiest way to add some structure to forms. Its only purpose is to provide `margin-bottom` around a label and control pairing. As a bonus, since it's a class you can use it with `
`s, `
`s, or nearly any other element. - -{% example html %} -
-
- - -
-
- - -
-
-{% endexample %} - -### Inline forms - -Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states. - -- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{ site.baseurl }}/utilities/spacing/) and [flexbox]({{ site.baseurl }}/utilities/flexbox/) utilities. -- Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`. -- Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices. - -You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{ site.baseurl }}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `