Input group 路 Bootstrap |
您所在的位置：网站首页 › inputup › Input group 路 Bootstrap |
|
Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. Basic examplePlace 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 s outside the input group. @ @example.com https://example.com/users/ $ .00 With textarea @ @example.com Your vanity URL https://example.com/users/ $ .00 With textarea SizingAdd the relative form sizing classes to the .input-group itself and contents within will automatically resize鈥攏o need for repeating the form control size classes on each element. Sizing on the individual input group elements isn鈥檛 supported. Small Default Large Small Default Large Checkboxes and radiosPlace any checkbox or radio option within an input group鈥檚 addon instead of text. Multiple inputsWhile multiple s are supported visually, validation styles are only available for input groups with a single . First and last name First and last name Multiple addonsMultiple add-ons are supported and can be mixed with checkbox and radio input versions. $ 0.00 $ 0.00 $ 0.00 $ 0.00 Button addons Button Button Button Button Button Button Buttons with dropdowns Action Another action Something else here Separated link Action Another action Something else here Separated link Dropdown Action Another action Something else here Separated link Dropdown Action Another action Something else here Separated link Segmented buttons Action Another action Something else here Separated link Action Another action Something else here Separated link Action Toggle Dropdown Action Another action Something else here Separated link Action Toggle Dropdown Action Another action Something else here Separated link Custom formsInput groups include support for custom selects and custom file inputs. Browser default versions of these are not supported. Custom select Options Choose... One Two Three Choose... One Two Three Options Button Choose... One Two Three Choose... One Two Three Button Custom file input Upload Upload Upload Choose file Choose file Upload Button Choose file Choose file Button AccessibilityScreen readers will have trouble with your forms if you don鈥檛 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 ( 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鈥檙e implementing. The examples in this section provide a few suggested, case-specific approaches. |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |