Add comprehensive `.form-control` example(/testcase) to docs
Put all the textual input types right next to each other for easy visual comparison. Refs #17308, #18763 [skip sauce]
This commit is contained in:
parent
cbe9b7a035
commit
3d5b340217
|
@ -343,7 +343,12 @@ module.exports = function (grunt) {
|
|||
'Attribute “autocomplete” not allowed on element “button” at this point.',
|
||||
'Element “div” not allowed as child of element “progress” in this context. (Suppressing further errors from this subtree.)',
|
||||
'Consider using the “h1” element as a top-level heading only (all “h1” elements are treated as top-level headings by many screen readers and other tools).',
|
||||
'The “datetime-local” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.'
|
||||
'The “color” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “date” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “datetime-local” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “month” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “time” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
|
||||
'The “week” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.'
|
||||
]
|
||||
},
|
||||
src: ['_gh_pages/**/*.html', 'js/tests/visual/*.html']
|
||||
|
|
|
@ -163,6 +163,91 @@ Below is a complete list of the specific from controls supported by Bootstrap an
|
|||
</tbody>
|
||||
</table>
|
||||
|
||||
### Textual inputs
|
||||
|
||||
Here are examples of `.form-control` applied to each textual HTML5 `<input>` `type`.
|
||||
|
||||
{% example html %}
|
||||
<div class="form-group row">
|
||||
<label for="example-text-input" class="col-xs-2 form-control-label">Text</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-search-input" class="col-xs-2 form-control-label">Search</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-email-input" class="col-xs-2 form-control-label">Email</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-url-input" class="col-xs-2 form-control-label">URL</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-tel-input" class="col-xs-2 form-control-label">Telephone</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-password-input" class="col-xs-2 form-control-label">Password</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="password" value="hunter2" id="example-password-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-number-input" class="col-xs-2 form-control-label">Number</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="number" value="42" id="example-number-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-datetime-local-input" class="col-xs-2 form-control-label">Date and time</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-date-input" class="col-xs-2 form-control-label">Date</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="date" value="2011-08-19" id="example-date-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-month-input" class="col-xs-2 form-control-label">Month</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="month" value="2011-08" id="example-month-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-week-input" class="col-xs-2 form-control-label">Week</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="week" value="2011-W33" id="example-week-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-time-input" class="col-xs-2 form-control-label">Time</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="time" value="13:45:00" id="example-time-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-color-input" class="col-xs-2 form-control-label">Color</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="color" value="#563d7c" id="example-color-input">
|
||||
</div>
|
||||
</div>
|
||||
{% 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.
|
||||
|
|
Loading…
Reference in New Issue