mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-27 14:46:01 +03:00
Code Activity

Merge branch 'master' into v4m

Browse Source
This commit is contained in:
Mark Otto
2015-08-04 22:29:45 -07:00
parent 8ee9da2f54 ab412b2404
commit 1ddc3f5e21
42 changed files with 1101 additions and 1005 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/forms.md
+42 -44
View File
@@ -487,6 +487,48 @@ Add the `readonly` boolean attribute on an input to prevent modification of the
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
{% endexample %}
## Control sizing
Set heights using classes like `.form-control-lg`, and set widths using grid column classes like `.col-lg-*`.
{% example html %}
<input class="form-control form-control-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".input-sm">
{% endexample %}
{% example html %}
<select class="form-control form-control-lg"></select>
<select class="form-control"></select>
<select class="form-control form-control-sm"></select>
{% endexample %}
## Column sizing
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
{% example html %}
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
{% endexample %}
## Help text
Block level help text for form controls.
{% example html %}
<p class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</p>
{% endexample %}
## Validation
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
@@ -632,50 +674,6 @@ For form controls with no visible label, add the `.sr-only` class on the label.
</div>
{% endexample %}
## Control sizing
Set heights using classes like `.form-control-lg`, and set widths using grid column classes like `.col-lg-*`.
{% example html %}
<input class="form-control form-control-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".input-sm">
{% endexample %}
{% example html %}
<select class="form-control form-control-lg"></select>
<select class="form-control"></select>
<select class="form-control form-control-sm"></select>
{% endexample %}
## Column sizing
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
{% example html %}
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
{% endexample %}
## Help text
Block level help text for form controls.
{% example html %}
<p class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</p>
{% endexample %}
## Custom forms
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements any default form control.