From aaf03bdc9e3cfa0d625f9758ad059c0db9fe2abe Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 12 Jul 2019 16:52:33 -0500 Subject: v5: Forms update (#28450) * Initial spike of consolidated form checks * Stub out forms rearrangement - Prepping to drop non-custom file and range inputs - Prepping to merge custom and native checks and radios (with switches) - Prepping to merge custom select with form select - Moving docs arround so forms has it's own area given volume of CSS * Move input group Sass file to forms subdir * Start to split and move the docs around * Simpler imports * Copyediting * delete overview file * Remove commented out code * remove the custom-forms import * rewrite flex-check as form-check, replace all custom properties * Remove old forms doc * stub out new subpage link section * update migration guide * Update nav, forms overview in page nav, and descriptions * fix check bg position * fix margin-top calculation * rename .custom-select to .form-select * Update validation styles for new checks * add some vertical margin, fix inline checks * fix docs examples * better way to do this contents stuff, redo the toc while i'm at it * page restyle for docs while here * un-callout that, edit text * redo padding on toc * fix toc * start to cleanup checks docs * Rewrite Markdown tables into HTML * Redesign tables, redo their docs * Replace Open Iconic icons with custom Bootstrap icons * Redesign the docs navbar, add a subheader, redo the sidebar * Redesign docs homepage a bit * Simplify table style overrides for docs tables * Simplify docs typography for page titles and reading line length * Stub out icons page * Part of sidebar update, remove migration from nav.yml * Move toc CSS to separate partial * Change appearance of overview page * fix sidebar arrow direction * Add footer to docs layout * Update descriptions * Drop the .form-group class for margin utilities * Remove lingering form-group-margin-bottom var * improve footer spacing * add headings to range page * uncomment form range css * Rename .custom-range to .form-range * Drop unused docs var * Uncomment the comment * Remove unused variable * Fix radio image sizing * Reboot update: reset horizontal ul and ol padding * de-dupe IDs * tweak toc styles * nvm, fix dropdown versions stuff * remove sidebar nav toggle for now * broken html * fix more broken html, move css * scss linting * comment out broken helper docs * scope styles * scope styles * Fixes #25540 and fixes #26407 for v5 only * Update sidebar once more * Match new sidenav order * fix syntax error * Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696 * rename back * fix size and alignment * rename that back too --- site/content/docs/4.3/components/alerts.md | 65 +- site/content/docs/4.3/components/buttons.md | 30 +- site/content/docs/4.3/components/carousel.md | 63 +- site/content/docs/4.3/components/collapse.md | 43 +- site/content/docs/4.3/components/dropdowns.md | 108 +- site/content/docs/4.3/components/forms.md | 1319 -------------------- site/content/docs/4.3/components/icons.md | 21 + site/content/docs/4.3/components/input-group.md | 376 ------ site/content/docs/4.3/components/list-group.md | 2 +- site/content/docs/4.3/components/modal.md | 8 +- site/content/docs/4.3/components/navs.md | 4 +- site/content/docs/4.3/components/popovers.md | 6 +- site/content/docs/4.3/components/scrollspy.md | 6 +- site/content/docs/4.3/components/toasts.md | 6 +- site/content/docs/4.3/components/tooltips.md | 6 +- site/content/docs/4.3/content/reboot.md | 2 +- site/content/docs/4.3/content/tables.md | 198 ++- site/content/docs/4.3/forms/checks.md | 217 ++++ site/content/docs/4.3/forms/file.md | 37 + site/content/docs/4.3/forms/form-control.md | 75 ++ site/content/docs/4.3/forms/input-group.md | 376 ++++++ site/content/docs/4.3/forms/layout.md | 388 ++++++ site/content/docs/4.3/forms/overview.md | 123 ++ site/content/docs/4.3/forms/range.md | 34 + site/content/docs/4.3/forms/select.md | 62 + site/content/docs/4.3/forms/validation.md | 404 ++++++ .../docs/4.3/getting-started/browsers-devices.md | 64 +- .../docs/4.3/getting-started/build-tools.md | 53 +- site/content/docs/4.3/getting-started/contents.md | 32 +- site/content/docs/4.3/layout/grid.md | 24 +- site/content/docs/4.3/migration.md | 23 +- site/content/docs/4.3/utilities/display.md | 72 +- 32 files changed, 2269 insertions(+), 1978 deletions(-) delete mode 100644 site/content/docs/4.3/components/forms.md create mode 100644 site/content/docs/4.3/components/icons.md delete mode 100644 site/content/docs/4.3/components/input-group.md create mode 100644 site/content/docs/4.3/forms/checks.md create mode 100644 site/content/docs/4.3/forms/file.md create mode 100644 site/content/docs/4.3/forms/form-control.md create mode 100644 site/content/docs/4.3/forms/input-group.md create mode 100644 site/content/docs/4.3/forms/layout.md create mode 100644 site/content/docs/4.3/forms/overview.md create mode 100644 site/content/docs/4.3/forms/range.md create mode 100644 site/content/docs/4.3/forms/select.md create mode 100644 site/content/docs/4.3/forms/validation.md (limited to 'site/content/docs') diff --git a/site/content/docs/4.3/components/alerts.md b/site/content/docs/4.3/components/alerts.md index fa5e5b24c..be1bf1504 100644 --- a/site/content/docs/4.3/components/alerts.md +++ b/site/content/docs/4.3/components/alerts.md @@ -107,11 +107,40 @@ var bsAlert = new bootstrap.Alert(myAlert) This makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) -| Method | Description | -| --- | --- | -| `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. | -| `dispose` | Destroys an element's alert. | -| `_getInstance` | *Static* method which allows you to get the alert instance associated to a DOM element, you can use it like this: `bootstrap.Alert._getInstance(alert)` | + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
+ close + + Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed. +
+ dispose + + Destroys an element's alert. +
+ _getInstance + + Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: bootstrap.Alert._getInstance(alert) +
{{< highlight js >}} var alertNode = document.querySelector('.alert') @@ -123,10 +152,28 @@ alert.close() Bootstrap's alert plugin exposes a few events for hooking into alert functionality. -| Event | Description | -| --- | --- | -| `close.bs.alert` | This event fires immediately when the close instance method is called. | -| `closed.bs.alert` | This event is fired when the alert has been closed (will wait for CSS transitions to complete). | + + + + + + + + + + + + + + + + + +
EventDescription
close.bs.alert + Fires immediately when the close instance method is called. +
closed.bs.alert + Fired when the alert has been closed and CSS transitions have completed. +
{{< highlight js >}} var myAlert = document.getElementById('myAlert') diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md index de13ae5df..1839622e3 100644 --- a/site/content/docs/4.3/components/buttons.md +++ b/site/content/docs/4.3/components/buttons.md @@ -159,10 +159,32 @@ var button = document.getElementById('myButton') var bsButton = new bootstrap.Button(button) {{< /highlight >}} -| Method | Description | -| --------- | ------------------------------------------------------------------------------- | -| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. | -| `dispose` | Destroys an element's button. | + + + + + + + + + + + + + + + + + +
MethodDescription
+ toggle + + Toggles push state. Gives the button the appearance that it has been activated. +
+ dispose + + Destroys an element's button. +
For example, to toggle all buttons diff --git a/site/content/docs/4.3/components/carousel.md b/site/content/docs/4.3/components/carousel.md index 2cdd7c3f4..300c42cef 100644 --- a/site/content/docs/4.3/components/carousel.md +++ b/site/content/docs/4.3/components/carousel.md @@ -230,7 +230,7 @@ var carousel = new bootstrap.Carousel(myCarousel) Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`. - +
@@ -296,17 +296,44 @@ var carousel = new bootstrap.Carousel(myCarousel, { }) {{< /highlight >}} - -| Method | Description | -| --- | --- | -| `cycle` | Cycles through the carousel items from left to right. | -| `pause` | Stops the carousel from cycling through items. | -| `prev` | Cycles to the previous item. **Returns to the caller before the previous item has been shown** (i.e. before the `slid.bs.carousel` event occurs). | -| `next` | Cycles to the next item. **Returns to the caller before the next item has been shown** (i.e. before the `slid.bs.carousel` event occurs). | -| `nextWhenVisible` | Only go to the next slide when the page, carousel and the carousel parent is visible. | -| `to` | Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (i.e. before the `slid.bs.carousel` event occurs). | -| `dispose` | Destroys an element's carousel. | -| `_getInstance` | *Static* method which allows you to get the carousel instance associated with a DOM element | +
Name
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
cycleCycles through the carousel items from left to right.
pauseStops the carousel from cycling through items.
prevCycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the slid.bs.carousel event occurs).
nextCycles to the next item. Returns to the caller before the next item has been shown (e.g., before the slid.bs.carousel event occurs).
nextWhenVisibleCycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the slid.bs.carousel event occurs).
disposeDestroys an element's carousel.
_getInstanceStatic method which allows you to get the carousel instance associated with a DOM element.
### Events @@ -319,21 +346,21 @@ Bootstrap's carousel class exposes two events for hooking into carousel function All carousel events are fired at the carousel itself (i.e. at the `
`). - +
- + - - + + - - + +
Event TypeEvent type Description
slide.bs.carouselThis event fires immediately when the slide instance method is invoked.slide.bs.carouselFires immediately when the slide instance method is invoked.
slid.bs.carouselThis event is fired when the carousel has completed its slide transition.slid.bs.carouselFired when the carousel has completed its slide transition.
diff --git a/site/content/docs/4.3/components/collapse.md b/site/content/docs/4.3/components/collapse.md index 1197f0afc..0eed61ebc 100644 --- a/site/content/docs/4.3/components/collapse.md +++ b/site/content/docs/4.3/components/collapse.md @@ -160,7 +160,7 @@ var collapseList = collapseElementList.map(function (collapseEl) { Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-parent=""`. - +
@@ -202,22 +202,45 @@ var bsCollapse = new bootstrap.Collapse(myCollapse, { }) {{< /highlight >}} -| Method | Description | -| --- | --- | -| `toggle` | Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). | -| `show` | Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (i.e. before the `shown.bs.collapse` event occurs).| -| `hide` | Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (i.e. before the `hidden.bs.collapse` event occurs).| -| `dispose` | Destroys an element's collapse. | -| `_getInstance` | *Static* method which allows you to get the collapse instance associated with a DOM element | +
Name
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
toggleToggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).
showShows a collapsible element. Returns to the caller before the collapsible element has actually been shown (e.g., before the shown.bs.collapse event occurs).
hideHides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (e.g., before the hidden.bs.collapse event occurs).
disposeDestroys an element's collapse.
_getInstanceStatic method which allows you to get the collapse instance associated with a DOM element.
### Events Bootstrap's collapse class exposes a few events for hooking into collapse functionality. - +
- + diff --git a/site/content/docs/4.3/components/dropdowns.md b/site/content/docs/4.3/components/dropdowns.md index edf57087d..3669f4d1c 100644 --- a/site/content/docs/4.3/components/dropdowns.md +++ b/site/content/docs/4.3/components/dropdowns.md @@ -811,7 +811,7 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`. -
Event TypeEvent type Description
+
@@ -862,26 +862,100 @@ Note when `boundary` is set to any value other than `'scrollParent'`, the style ### Methods -| Method | Description | -| --- | --- | -| `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. | -| `show` | Shows the dropdown menu of a given navbar or tabbed navigation. | -| `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. | -| `update` | Updates the position of an element's dropdown. | -| `dispose` | Destroys an element's dropdown. | -| `_getInstance` | *Static* method which allows you to get the dropdown instance associated with a DOM element | +
Name
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
toggle + Toggles the dropdown menu of a given navbar or tabbed navigation. +
show + Shows the dropdown menu of a given navbar or tabbed navigation. +
hide + Hides the dropdown menu of a given navbar or tabbed navigation. +
update + Updates the position of an element's dropdown. +
dispose + Destroys an element's dropdown. +
_getInstance + Static method which allows you to get the dropdown instance associated with a DOM element. +
### Events All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element. -`hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original event type is `click`) that contains an Event Object for the click event. - -| Event | Description | -| --- | --- | -| `show.bs.dropdown` | This event fires immediately when the show instance method is called. | -| `shown.bs.dropdown` | This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). | -| `hide.bs.dropdown` | This event is fired immediately when the hide instance method has been called. | -| `hidden.bs.dropdown`| This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). | +`hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event. + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
+ show.bs.dropdown + + Fires immediately when the show instance method is called. +
+ shown.bs.dropdown + + Fired when the dropdown has been made visible to the user and CSS transitions have completed. +
+ hide.bs.dropdown + + Fires immediately when the hide instance method has been called. +
+ hidden.bs.dropdown + + Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. +
{{< highlight js >}} var myDropdown = document.getElementById('myDropdown') diff --git a/site/content/docs/4.3/components/forms.md b/site/content/docs/4.3/components/forms.md deleted file mode 100644 index 83564dd22..000000000 --- a/site/content/docs/4.3/components/forms.md +++ /dev/null @@ -1,1319 +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]({{< docsref "/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. - -{{< example >}} -
-
- - - We'll never share your email with anyone else. -
-
- - -
-
- - -
- -
-{{< /example >}} - -## Form controls - -Textual form controls—like ``s, ` -
- -{{< /example >}} - -For file inputs, swap the `.form-control` for `.form-control-file`. - -{{< example >}} -
-
- - -
-
-{{< /example >}} - -### Sizing - -Set heights using classes like `.form-control-lg` and `.form-control-sm`. - -{{< example >}} - - - -{{< /example >}} - -{{< example >}} - - - -{{< /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. - -{{< example >}} - -{{< /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. - -{{< example >}} -
-
- -
- -
-
-
- -
- -
-
-
-{{< /example >}} - -{{< example >}} -
-
- - -
-
- - -
- -
-{{< /example >}} - -## Range Inputs - -Set horizontally scrollable range inputs using `.form-control-range`. - -{{< example >}} -
-
- - -
-
-{{< /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 `