rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

fix navbar form alignment, and update examples to show these cases

Browse Source
This commit is contained in:
Mark Otto 2012-07-30 12:15:08 -07:00
parent 6bf661aceb
commit 7fa99fb1fe
5 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/assets/css/bootstrap.css vendored
View File

@ -4018,7 +4018,7 @@ input[type="submit"].btn.btn-mini {
.navbar .brand { .navbar .brand {
display: block; display: block;
float: left; float: left;
padding: 10px 20px 10px; padding: 8px 20px 12px;
margin-left: -20px; margin-left: -20px;
font-size: 20px; font-size: 20px;
font-weight: 200; font-weight: 200;
@ -4072,7 +4072,7 @@ input[type="submit"].btn.btn-mini {
.navbar-form select, .navbar-form select,
.navbar-form .radio, .navbar-form .radio,
.navbar-form .checkbox { .navbar-form .checkbox {
margin-top: 6px; margin-top: 5px;
} }
.navbar-form input, .navbar-form input,

14
docs/examples/fluid.html
View File

@ -44,18 +44,10 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </a>
<a class="brand" href="#">Project name</a> <a class="brand" href="#">Project name</a>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li class="divider"></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<p class="navbar-text pull-right">
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
<ul class="nav"> <ul class="nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>

5
docs/examples/hero.html
View File

@ -47,6 +47,11 @@
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
</ul> </ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>
</div> </div>

5
less/navbar.less
View File

@ -48,7 +48,8 @@
display: block; display: block;
// Vertically center the text given @navbarHeight // Vertically center the text given @navbarHeight
@elementHeight: 20px; @elementHeight: 20px;
padding: ((@navbarHeight - @elementHeight) / 2) 20px ((@navbarHeight - @elementHeight) / 2); @heightDifference: @navbarHeight - @elementHeight;
padding: ((@heightDifference / 2) - 2) 20px ((@heightDifference / 2) + 2);
margin-left: -20px; // negative indent to left-align the text down the page margin-left: -20px; // negative indent to left-align the text down the page
font-size: 20px; font-size: 20px;
font-weight: 200; font-weight: 200;
@ -93,7 +94,7 @@
select, select,
.radio, .radio,
.checkbox { .checkbox {
.navbarVerticalAlign(28px); // Vertically center in navbar .navbarVerticalAlign(30px); // Vertically center in navbar
} }
input, input,
select, select,

5
less/tests/css-tests.html
View File

@ -34,7 +34,7 @@
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
<a class="brand" href="../../docs/index.html">Bootstrap</a> <a class="brand" href="../../docs/index.html">Bootstrap</a>
@ -53,6 +53,8 @@
</header> </header>
<div class="bs-docs-canvas">
<div class="container"> <div class="container">
@ -1096,6 +1098,7 @@
</div> </div>
</footer> </footer>
</div>
<!-- Le javascript <!-- Le javascript