0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00

Fix up navbar forms by using inline form as a mixin; fix docs for those

This commit is contained in:
Mark Otto 2013-05-09 16:41:35 -07:00
parent 3c72b1e9a0
commit 7b6352d2cf
4 changed files with 26 additions and 10 deletions

View File

@ -3598,6 +3598,20 @@ button.close {
margin-bottom: 8px;
}
.navbar-form input,
.navbar-form select,
.navbar-form textarea,
.navbar-form .radio,
.navbar-form .checkbox {
display: inline-block;
}
.navbar-form .radio,
.navbar-form .checkbox {
margin-top: 0;
margin-bottom: 0;
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-right-radius: 0;

View File

@ -252,6 +252,7 @@ body {
.bs-example > select:last-child,
.bs-example > textarea:last-child,
.bs-example > .table:last-child,
.bs-example > .navbar:last-child
.bs-example > .jumbotron:last-child,
.bs-example > .alert:last-child,
.bs-example > .panel:last-child,

View File

@ -1123,7 +1123,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<div class="navbar">
<form class="navbar-form pull-left">
<input type="text" style="width: 200px;">
<button type="submit" class="btn">Submit</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
@ -1135,7 +1135,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<option value="3">3</option>
<option value="4">4</option>
</select>
<button type="submit" class="btn">Submit</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
@ -1143,7 +1143,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<form class="navbar-form pull-left">
<input type="text" style="width: 200px;">
<input type="checkbox">
<button type="submit" class="btn">Submit</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
@ -1153,7 +1153,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<label class="checkbox-inline">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Submit</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
@ -1161,7 +1161,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
{% highlight html %}
<form class="navbar-form pull-left">
<input type="text" style="width: 200px;">
<button type="submit" class="btn">Submit</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
{% endhighlight %}
@ -1170,7 +1170,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<div class="bs-example">
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="btn">Submit</button>
<button type="button" class="btn btn-default">Submit</button>
</div>
</div>
@ -1844,7 +1844,7 @@ body {
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
</div>
</div>
</div>
@ -1854,7 +1854,7 @@ body {
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
</div>
</div>
</div>
@ -1864,7 +1864,7 @@ body {
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
</div>
</div>
</div>
@ -1878,7 +1878,7 @@ body {
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p>
</div>
</div>
</div>

View File

@ -132,6 +132,7 @@
// Navbar form
.navbar-form {
.form-inline();
.navbar-vertical-align(34px); // Vertically center in navbar
}