mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
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
This commit is contained in:
Mark Otto
@@ -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)` |
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>close</code>
|
||||
</td>
|
||||
<td>
|
||||
Closes an alert by removing it from the DOM. If the <code>.fade</code> and <code>.show</code> classes are present on the element, the alert will fade out before it is removed.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>dispose</code>
|
||||
</td>
|
||||
<td>
|
||||
Destroys an element's alert.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>_getInstance</code>
|
||||
</td>
|
||||
<td>
|
||||
Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: <code>bootstrap.Alert._getInstance(alert)</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{< 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 <code>close</code> instance method is called. |
|
||||
| `closed.bs.alert` | This event is fired when the alert has been closed (will wait for CSS transitions to complete). |
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>close.bs.alert</code></td>
|
||||
<td>
|
||||
Fires immediately when the <code>close</code> instance method is called.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>closed.bs.alert</code></td>
|
||||
<td>
|
||||
Fired when the alert has been closed and CSS transitions have completed.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{< highlight js >}}
|
||||
var myAlert = document.getElementById('myAlert')
|
||||
|
||||
@@ -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. |
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>toggle</code>
|
||||
</td>
|
||||
<td>
|
||||
Toggles push state. Gives the button the appearance that it has been activated.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>dispose</code>
|
||||
</td>
|
||||
<td>
|
||||
Destroys an element's button.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
For example, to toggle all buttons
|
||||
|
||||
|
||||
@@ -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=""`.
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
@@ -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 |
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>cycle</code></td>
|
||||
<td>Cycles through the carousel items from left to right.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>pause</code></td>
|
||||
<td>Stops the carousel from cycling through items.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>prev</code></td>
|
||||
<td>Cycles to the previous item. <strong>Returns to the caller before the previous item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>next</code></td>
|
||||
<td>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>nextWhenVisible</code></td>
|
||||
<td>Cycles the carousel to a particular frame (0 based, similar to an array). <strong>Returns to the caller before the target item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>dispose</code></td>
|
||||
<td>Destroys an element's carousel.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>_getInstance</code></td>
|
||||
<td>Static method which allows you to get the carousel instance associated with a DOM element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### 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 `<div class="carousel">`).
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th style="width: 150px;">Event type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>slide.bs.carousel</td>
|
||||
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
|
||||
<td><code>slide.bs.carousel</code></td>
|
||||
<td>Fires immediately when the <code>slide</code> instance method is invoked.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>slid.bs.carousel</td>
|
||||
<td>This event is fired when the carousel has completed its slide transition.</td>
|
||||
<td><code>slid.bs.carousel</code></td>
|
||||
<td>Fired when the carousel has completed its slide transition.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -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=""`.
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
@@ -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 |
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>toggle</code></td>
|
||||
<td>Toggles a collapsible element to shown or hidden. <strong>Returns to the caller before the collapsible element has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.collapse</code> or <code>hidden.bs.collapse</code> event occurs).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>show</code></td>
|
||||
<td>Shows a collapsible element. <strong>Returns to the caller before the collapsible element has actually been shown</strong> (e.g., before the <code>shown.bs.collapse</code> event occurs). </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>hide</code></td>
|
||||
<td>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (e.g., before the <code>hidden.bs.collapse</code> event occurs).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>dispose</code></td>
|
||||
<td>Destroys an element's collapse.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>_getInstance</code></td>
|
||||
<td>Static method which allows you to get the collapse instance associated with a DOM element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Events
|
||||
|
||||
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th style="width: 150px;">Event type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -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=""`.
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
@@ -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 |
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>toggle</code></td>
|
||||
<td>
|
||||
Toggles the dropdown menu of a given navbar or tabbed navigation.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>show</code></td>
|
||||
<td>
|
||||
Shows the dropdown menu of a given navbar or tabbed navigation.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>hide</code></td>
|
||||
<td>
|
||||
Hides the dropdown menu of a given navbar or tabbed navigation.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>update</code></td>
|
||||
<td>
|
||||
Updates the position of an element's dropdown.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>dispose</code></td>
|
||||
<td>
|
||||
Destroys an element's dropdown.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>_getInstance</code></td>
|
||||
<td>
|
||||
Static method which allows you to get the dropdown instance associated with a DOM element.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### 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.
|
||||
`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). |
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>show.bs.dropdown</code>
|
||||
</td>
|
||||
<td>
|
||||
Fires immediately when the show instance method is called.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>shown.bs.dropdown</code>
|
||||
</td>
|
||||
<td>
|
||||
Fired when the dropdown has been made visible to the user and CSS transitions have completed.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>hide.bs.dropdown</code>
|
||||
</td>
|
||||
<td>
|
||||
Fires immediately when the hide instance method has been called.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>hidden.bs.dropdown</code>
|
||||
</td>
|
||||
<td>
|
||||
Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{< highlight js >}}
|
||||
var myDropdown = document.getElementById('myDropdown')
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,21 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Icons
|
||||
description: Custom icons for Bootstrap components.
|
||||
group: components
|
||||
toc: true
|
||||
---
|
||||
|
||||
<div class="booticons-list">
|
||||
<svg class="booticon booticon-chevron-left" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M11 2L5 8l6 6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="booticon booticon-chevron-right" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M5 14l6-6-6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="booticon booticon-chevron-up" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M2 11l6-6 6 6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="booticon booticon-chevron-down" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M2 5l6 6 6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="booticon booticon-chevron-condensed-left" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M9 2L6 8l3 6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="booticon booticon-chevron-condensed-right" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M7 14l3-6-3-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="booticon booticon-check" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M4 8.5L6.5 11l6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="booticon booticon-x" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 8l-3 3 3-3 3 3-3-3zm0 0l3-3-3 3-3-3 3 3z" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="booticon booticon-dash" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5 8h6" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<svg class="booticon booticon-circle" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12zm0-2a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" fill="currentColor" fill-rule="nonzero"/></svg>
|
||||
<svg class="booticon booticon-dot" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 8v.082" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
@@ -1,376 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Input group
|
||||
description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
|
||||
group: components
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Basic example
|
||||
|
||||
Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `<label>`s outside the input group.
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="basic-addon1">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text" id="basic-addon2">@example.com</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="basic-url">Your vanity URL</label>
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">With textarea</span>
|
||||
</div>
|
||||
<textarea class="form-control" aria-label="With textarea"></textarea>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Wrapping
|
||||
|
||||
Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group flex-nowrap">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="addon-wrapping">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Sizing
|
||||
|
||||
Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
|
||||
|
||||
**Sizing on the individual input group elements isn't supported.**
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group input-group-sm mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
|
||||
</div>
|
||||
|
||||
<div class="input-group input-group-lg">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Checkboxes and radios
|
||||
|
||||
Place any checkbox or radio option within an input group's addon instead of text.
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<input type="checkbox" aria-label="Checkbox for following text input">
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with checkbox">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<input type="radio" aria-label="Radio button for following text input">
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with radio button">
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Multiple inputs
|
||||
|
||||
While multiple `<input>`s are supported visually, validation styles are only available for input groups with a single `<input>`.
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">First and last name</span>
|
||||
</div>
|
||||
<input type="text" aria-label="First name" class="form-control">
|
||||
<input type="text" aria-label="Last name" class="form-control">
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Multiple addons
|
||||
|
||||
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
<span class="input-group-text">0.00</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">$</span>
|
||||
<span class="input-group-text">0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Button addons
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend" id="button-addon3">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
|
||||
<div class="input-group-append" id="button-addon4">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Buttons with dropdowns
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Segmented buttons
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button type="button" class="btn btn-outline-secondary">Action</button>
|
||||
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
|
||||
<div class="input-group-append">
|
||||
<button type="button" class="btn btn-outline-secondary">Action</button>
|
||||
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Custom forms
|
||||
|
||||
Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
|
||||
|
||||
### Custom select
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<label class="input-group-text" for="inputGroupSelect01">Options</label>
|
||||
</div>
|
||||
<select class="custom-select" id="inputGroupSelect01">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<select class="custom-select" id="inputGroupSelect02">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<div class="input-group-append">
|
||||
<label class="input-group-text" for="inputGroupSelect02">Options</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
<select class="custom-select" id="inputGroupSelect03" aria-label="Example select with button addon">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### Custom file input
|
||||
|
||||
{{< example >}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
|
||||
</div>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
|
||||
<label class="custom-file-label" for="inputGroupFile01">
|
||||
<span class="custom-file-text">Choose file...</span>
|
||||
<span class="custom-file-button">Browse</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="inputGroupFile02">
|
||||
<label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">
|
||||
<span class="custom-file-text">Choose file...</span>
|
||||
<span class="custom-file-button">Browse</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
|
||||
</div>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
|
||||
<label class="custom-file-label" for="inputGroupFile03">
|
||||
<span class="custom-file-text">Choose file...</span>
|
||||
<span class="custom-file-button">Browse</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
|
||||
<label class="custom-file-label" for="inputGroupFile04">
|
||||
<span class="custom-file-text">Choose file...</span>
|
||||
<span class="custom-file-button">Browse</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Accessibility
|
||||
|
||||
Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
|
||||
|
||||
The exact technique to be used (`<label>` elements hidden using the `.sr-only` class, or use of the `aria-label` and `aria-labelledby` attributes, possibly in combination with `aria-describedby`) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.
|
||||
@@ -356,7 +356,7 @@ When showing a new tab, the events fire in the following order:
|
||||
|
||||
If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event type</th>
|
||||
|
||||
@@ -590,7 +590,7 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr
|
||||
|
||||
Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Size</th>
|
||||
@@ -737,7 +737,7 @@ Create a modal with a single line of JavaScript:
|
||||
|
||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`.
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
@@ -833,10 +833,10 @@ var modal = bootstrap.Modal._getInstance(myModalEl) // Returns a Bootstrap modal
|
||||
|
||||
Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th style="width: 150px;">Event type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -615,10 +615,10 @@ When showing a new tab, the events fire in the following order:
|
||||
|
||||
If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th style="width: 150px;">Event type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -153,7 +153,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` options cannot be supplied using data attributes.
|
||||
{{< /callout >}}
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
@@ -356,10 +356,10 @@ var popover = bootstrap.Popover._getInstance(exampleTriggerEl) // Returns a Boot
|
||||
|
||||
### Events
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th style="width: 150px;">Event type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -287,7 +287,7 @@ Destroys an element's scrollspy.
|
||||
|
||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`.
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
@@ -320,10 +320,10 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
|
||||
### Events
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th style="width: 150px;">Event type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -233,7 +233,7 @@ var toastList = toastElList.map(function (toastEl) {
|
||||
|
||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
@@ -293,10 +293,10 @@ Hides an element's toast. Your toast will remain on the DOM but won't show anymo
|
||||
|
||||
### Events
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th style="width: 150px;">Event type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -148,7 +148,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` options cannot be supplied using data attributes.
|
||||
{{< /callout >}}
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
@@ -343,10 +343,10 @@ Updates the position of an element's tooltip.
|
||||
|
||||
### Events
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th style="width: 150px;">Event type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
Reference in New Issue
Block a user