mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-27 14:46:01 +03:00
Merge branch 'master' into v4m
This commit is contained in:
Mark Otto
+42
-44
@@ -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.
|
||||
|
||||
@@ -25,6 +25,12 @@ Place one add-on or button on either side of an input. You may also place one on
|
||||
<span class="input-group-addon" id="basic-addon2">.00</span>
|
||||
</div>
|
||||
<br>
|
||||
<label for="basic-url">Your vanity URL</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
|
||||
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||
|
||||
+20
-22
@@ -274,28 +274,26 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
|
||||
<h4 class="modal-title" id="gridModalLabel">Modal title</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
Level 1: .col-sm-9
|
||||
<div class="row">
|
||||
<div class="col-xs-8 col-sm-6">
|
||||
Level 2: .col-xs-8 .col-sm-6
|
||||
</div>
|
||||
<div class="col-xs-4 col-sm-6">
|
||||
Level 2: .col-xs-4 .col-sm-6
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
Level 1: .col-sm-9
|
||||
<div class="row">
|
||||
<div class="col-xs-8 col-sm-6">
|
||||
Level 2: .col-xs-8 .col-sm-6
|
||||
</div>
|
||||
<div class="col-xs-4 col-sm-6">
|
||||
Level 2: .col-xs-4 .col-sm-6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -254,8 +254,8 @@ The `<address>` element is updated to reset the browser default `font-style` fro
|
||||
<div class="bd-example">
|
||||
<address>
|
||||
<strong>Twitter, Inc.</strong><br>
|
||||
795 Folsom Ave, Suite 600<br>
|
||||
San Francisco, CA 94107<br>
|
||||
1355 Market St, Suite 900<br>
|
||||
San Francisco, CA 94103<br>
|
||||
<abbr title="Phone">P:</abbr> (123) 456-7890
|
||||
</address>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user