mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-30 15:24:08 +03:00
Update docs to reflect new breakpoint naming convention
This commit is contained in:
+32
-32
@@ -172,80 +172,80 @@ Here are examples of `.form-control` applied to each textual HTML5 `<input>` `ty
|
||||
|
||||
{% example html %}
|
||||
<div class="form-group row">
|
||||
<label for="example-text-input" class="col-xs-2 col-form-label">Text</label>
|
||||
<div class="col-xs-10">
|
||||
<label for="example-text-input" class="col-2 col-form-label">Text</label>
|
||||
<div class="col-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 col-form-label">Search</label>
|
||||
<div class="col-xs-10">
|
||||
<label for="example-search-input" class="col-2 col-form-label">Search</label>
|
||||
<div class="col-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 col-form-label">Email</label>
|
||||
<div class="col-xs-10">
|
||||
<label for="example-email-input" class="col-2 col-form-label">Email</label>
|
||||
<div class="col-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 col-form-label">URL</label>
|
||||
<div class="col-xs-10">
|
||||
<label for="example-url-input" class="col-2 col-form-label">URL</label>
|
||||
<div class="col-10">
|
||||
<input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-tel-input" class="col-xs-2 col-form-label">Telephone</label>
|
||||
<div class="col-xs-10">
|
||||
<label for="example-tel-input" class="col-2 col-form-label">Telephone</label>
|
||||
<div class="col-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 col-form-label">Password</label>
|
||||
<div class="col-xs-10">
|
||||
<label for="example-password-input" class="col-2 col-form-label">Password</label>
|
||||
<div class="col-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 col-form-label">Number</label>
|
||||
<div class="col-xs-10">
|
||||
<label for="example-number-input" class="col-2 col-form-label">Number</label>
|
||||
<div class="col-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 col-form-label">Date and time</label>
|
||||
<div class="col-xs-10">
|
||||
<label for="example-datetime-local-input" class="col-2 col-form-label">Date and time</label>
|
||||
<div class="col-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 col-form-label">Date</label>
|
||||
<div class="col-xs-10">
|
||||
<label for="example-date-input" class="col-2 col-form-label">Date</label>
|
||||
<div class="col-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 col-form-label">Month</label>
|
||||
<div class="col-xs-10">
|
||||
<label for="example-month-input" class="col-2 col-form-label">Month</label>
|
||||
<div class="col-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 col-form-label">Week</label>
|
||||
<div class="col-xs-10">
|
||||
<label for="example-week-input" class="col-2 col-form-label">Week</label>
|
||||
<div class="col-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 col-form-label">Time</label>
|
||||
<div class="col-xs-10">
|
||||
<label for="example-time-input" class="col-2 col-form-label">Time</label>
|
||||
<div class="col-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 col-form-label">Color</label>
|
||||
<div class="col-xs-10">
|
||||
<label for="example-color-input" class="col-2 col-form-label">Color</label>
|
||||
<div class="col-10">
|
||||
<input class="form-control" type="color" value="#563d7c" id="example-color-input">
|
||||
</div>
|
||||
</div>
|
||||
@@ -630,14 +630,14 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
|
||||
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col-xs-2">
|
||||
<input type="text" class="form-control" placeholder=".col-xs-2">
|
||||
<div class="col-2">
|
||||
<input type="text" class="form-control" placeholder=".col-2">
|
||||
</div>
|
||||
<div class="col-xs-3">
|
||||
<input type="text" class="form-control" placeholder=".col-xs-3">
|
||||
<div class="col-3">
|
||||
<input type="text" class="form-control" placeholder=".col-3">
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<input type="text" class="form-control" placeholder=".col-xs-4">
|
||||
<div class="col-4">
|
||||
<input type="text" class="form-control" placeholder=".col-4">
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Reference in New Issue
Block a user