rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Cleanup form-inline examples in docs

Browse Source
This commit is contained in:
Robert Burns 2013-05-14 08:33:49 -04:00
parent 8544ef8734
commit 45f62f9589
2 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/assets/css/docs.css
View File

@ -288,6 +288,11 @@ body {
margin: 0; margin: 0;
} }
.bs-example.form-inline input:not([type=checkbox]):not([type=radio]),
.bs-example.form-inline select {
width: 180px;
}
/* List groups */ /* List groups */
.bs-example > .list-group { .bs-example > .list-group {
max-width: 400px; max-width: 400px;

34
docs/css.html
View File

@ -1051,8 +1051,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p> <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
</div> </div>
<form class="bs-example form-inline"> <form class="bs-example form-inline">
<input type="text" placeholder="Email" style="width: 180px;"> <input type="text" placeholder="Email">
<input type="password" placeholder="Password" style="width: 180px;"> <input type="password" placeholder="Password">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
@ -1062,8 +1062,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form><!-- /example --> </form><!-- /example -->
{% highlight html %} {% highlight html %}
<form class="form-inline"> <form class="form-inline">
<input type="text" placeholder="Email" style="width: 180px;"> <input type="text" placeholder="Email">
<input type="password" placeholder="Password" style="width: 180px;"> <input type="password" placeholder="Password">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
@ -1132,7 +1132,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Type declaration required</h4> <h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p> <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
</div> </div>
<form class="bs-example form-inline"> <form class="bs-example">
<input type="text" placeholder="Text input"> <input type="text" placeholder="Text input">
</form> </form>
{% highlight html %} {% highlight html %}
@ -1141,7 +1141,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Textarea</h3> <h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p> <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<form class="bs-example form-inline"> <form class="bs-example">
<textarea rows="3"></textarea> <textarea rows="3"></textarea>
</form> </form>
{% highlight html %} {% highlight html %}
@ -1257,7 +1257,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-input-focus">Input focus</h3> <h3 id="forms-input-focus">Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<form class="bs-example form-inline"> <form class="bs-example">
<input class="focused" id="focusedInput" type="text" value="This is focused..."> <input class="focused" id="focusedInput" type="text" value="This is focused...">
</form> </form>
{% highlight html %} {% highlight html %}
@ -1272,7 +1272,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p> <p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
</div> </div>
<form class="bs-example form-inline"> <form class="bs-example">
<input type="email" placeholder="test@example.com" required> <input type="email" placeholder="test@example.com" required>
</form> </form>
{% highlight html %} {% highlight html %}
@ -1281,7 +1281,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-disabled-inputs">Disabled inputs</h3> <h3 id="forms-disabled-inputs">Disabled inputs</h3>
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
<form class="bs-example form-inline"> <form class="bs-example">
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</form> </form>
{% highlight html %} {% highlight html %}
@ -1303,14 +1303,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-example form-inline"> <form class="bs-example form-inline">
<fieldset disabled> <fieldset disabled>
<div> <input type="text" placeholder="Disabled input">
<input type="text" class="col col-lg-4" placeholder="Disabled input"> <select>
</div> <option>Disabled select</option>
<div> </select>
<select class="col col-lg-4">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox"> Can't check this <input type="checkbox"> Can't check this
@ -1323,10 +1319,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="form-inline"> <form class="form-inline">
<fieldset disabled> <fieldset disabled>
<div> <div>
<input type="text" class="col col-lg-4" placeholder="Disabled input"> <input type="text" placeholder="Disabled input">
</div> </div>
<div> <div>
<select class="col col-lg-4"> <select>
<option>Disabled select</option> <option>Disabled select</option>
</select> </select>
</div> </div>