kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Cleanup .navbar-form styles

Browse source 
* Nuke the commented out navbar forms code that's not currently needed
* Add a few more examples to the .navbar-form docs section
* Remove (for now at least) top padding on checkbox and radios
This commit is contained in:
Mark Otto 2013-05-02 22:52:32 -07:00
parent a4f2c9e156
commit bec8c90fd7
3 changed files with 35 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
docs/docs.html
View file

@ -3476,12 +3476,44 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="navbar-forms">Forms</h3> <h3 id="navbar-forms">Forms</h3>
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p> <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="navbar"> <div class="navbar">
<form class="navbar-form pull-left"> <form class="navbar-form pull-left">
<input type="text" style="width: 200px;"> <input type="text" style="width: 200px;">
<button type="submit" class="btn">Submit</button> <button type="submit" class="btn">Submit</button>
</form> </form>
</div> </div>
<div class="navbar">
<form class="navbar-form pull-left">
<select name="" id="" style="width: 200px;">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
<button type="submit" class="btn">Submit</button>
</form>
</div>
<div class="navbar">
<form class="navbar-form pull-left">
<input type="text" style="width: 200px;">
<input type="checkbox">
<button type="submit" class="btn">Submit</button>
</form>
</div>
<div class="navbar">
<form class="navbar-form pull-left">
<input type="text" style="width: 200px;">
<label class="checkbox-inline">
<input type="checkbox"> Derp
</label>
<button type="submit" class="btn">Submit</button>
</form>
</div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<form class="navbar-form pull-left"> <form class="navbar-form pull-left">

4
less/forms.less
View file

@ -193,17 +193,19 @@ textarea {
margin-top: ((@line-height-base / 4) * -1); margin-top: ((@line-height-base / 4) * -1);
} }
/*
// Move the options list down to align with labels // Move the options list down to align with labels
.controls > .radio:first-child, .controls > .radio:first-child,
.controls > .checkbox:first-child { .controls > .checkbox:first-child {
padding-top: 5px; // has to be padding because margin collaspes padding-top: 5px; // has to be padding because margin collaspes
} }
*/
// Radios and checkboxes on same line // Radios and checkboxes on same line
.radio-inline, .radio-inline,
.checkbox-inline { .checkbox-inline {
display: inline-block; display: inline-block;
padding-top: 5px; // padding-top: 5px;
padding-left: 20px; padding-left: 20px;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;

31
less/navbar.less
View file

@ -336,36 +336,5 @@
margin-top: 0; // then undo the margin here so we don't accidentally double it margin-top: 0; // then undo the margin here so we don't accidentally double it
} }
// Navbar forms
// -------------------------
.navbar-form {
margin-bottom: 0; // remove default bottom margin
.clearfix();
input,
select,
.radio,
.checkbox {
.navbarVerticalAlign(30px); // Vertically center in navbar
}
input,
select,
.btn {
display: inline-block;
margin-bottom: 0;
}
input[type="image"],
input[type="checkbox"],
input[type="radio"] {
margin-top: 3px;
}
.input-append,
.input-prepend {
margin-top: 5px;
white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
input {
margin-top: 0; // remove the margin on top since it's on the parent
}
}
}
*/ */