From 1ded0d6a4eefb7daca62c44e4e735aec200f0b6f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 11 Feb 2019 11:15:34 -0800 Subject: Release v4.3.0 (#28228) * Prep for v4.3.0 * More updates for v4.3.0. * rerun to build docs source map --- site/docs/4.2/components/forms.md | 1376 ------------------------------------- 1 file changed, 1376 deletions(-) delete mode 100644 site/docs/4.2/components/forms.md (limited to 'site/docs/4.2/components/forms.md') diff --git a/site/docs/4.2/components/forms.md b/site/docs/4.2/components/forms.md deleted file mode 100644 index e655e2158..000000000 --- a/site/docs/4.2/components/forms.md +++ /dev/null @@ -1,1376 +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 ---- - -## Overview - -Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. - -Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information) to take advantage of newer input controls like email verification, number selection, and more. - -Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more. - -{% capture example %} -
-
- - - We'll never share your email with anyone else. -
-
- - -
-
- - -
- -
-{% endcapture %} -{% include example.html content=example %} - -## Form controls - -Textual form controls—like ``s, ` - - -{% endcapture %} -{% include example.html content=example %} - -For file inputs, swap the `.form-control` for `.form-control-file`. - -{% capture example %} -
-
- - -
-
-{% endcapture %} -{% include example.html content=example %} - -### Sizing - -Set heights using classes like `.form-control-lg` and `.form-control-sm`. - -{% capture example %} - - - -{% endcapture %} -{% include example.html content=example %} - -{% capture example %} - - - -{% endcapture %} -{% include example.html content=example %} - -### Readonly - -Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor. - -{% capture example %} - -{% endcapture %} -{% include example.html content=example %} - -### Readonly plain text - -If you want to have `` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding. - -{% capture example %} -
-
- -
- -
-
-
- -
- -
-
-
-{% endcapture %} -{% include example.html content=example %} - -{% capture example %} -
-
- - -
-
- - -
- -
-{% endcapture %} -{% include example.html content=example %} - -## Range Inputs - -Set horizontally scrollable range inputs using `.form-control-range`. - -{% capture example %} -
-
- - -
-
-{% endcapture %} -{% include example.html content=example %} - -## Checkboxes and radios - -Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. - -Disabled checkboxes and radios are supported. The `disabled` attribute will apply a lighter color to help indicate the input's state. - -Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our ``s and `