From 7fa99fb1fe9392f61cb5c46f7e5082e73e8b8784 Mon Sep 17 00:00:00 2001 From: Mark Otto <markotto@twitter.com> Date: Mon, 30 Jul 2012 12:15:08 -0700 Subject: [PATCH] fix navbar form alignment, and update examples to show these cases --- docs/assets/css/bootstrap.css | 4 ++-- docs/examples/fluid.html | 14 +++----------- docs/examples/hero.html | 5 +++++ less/navbar.less | 5 +++-- less/tests/css-tests.html | 7 +++++-- 5 files changed, 18 insertions(+), 17 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 9cabb3687b..f407a5db31 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4018,7 +4018,7 @@ input[type="submit"].btn.btn-mini { .navbar .brand { display: block; float: left; - padding: 10px 20px 10px; + padding: 8px 20px 12px; margin-left: -20px; font-size: 20px; font-weight: 200; @@ -4072,7 +4072,7 @@ input[type="submit"].btn.btn-mini { .navbar-form select, .navbar-form .radio, .navbar-form .checkbox { - margin-top: 6px; + margin-top: 5px; } .navbar-form input, diff --git a/docs/examples/fluid.html b/docs/examples/fluid.html index e39ea8b1a9..24ea26582f 100644 --- a/docs/examples/fluid.html +++ b/docs/examples/fluid.html @@ -44,18 +44,10 @@ <span class="icon-bar"></span> </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"> + <p class="navbar-text pull-right"> + Logged in as <a href="#" class="navbar-link">Username</a> + </p> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> diff --git a/docs/examples/hero.html b/docs/examples/hero.html index 32f6561bde..3efe568eb8 100644 --- a/docs/examples/hero.html +++ b/docs/examples/hero.html @@ -47,6 +47,11 @@ <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </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> </div> diff --git a/less/navbar.less b/less/navbar.less index 02535a4674..0e027d2c32 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -48,7 +48,8 @@ display: block; // Vertically center the text given @navbarHeight @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 font-size: 20px; font-weight: 200; @@ -93,7 +94,7 @@ select, .radio, .checkbox { - .navbarVerticalAlign(28px); // Vertically center in navbar + .navbarVerticalAlign(30px); // Vertically center in navbar } input, select, diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 81d5b18965..a8f62c3ccf 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -34,7 +34,7 @@ <!-- Navbar ================================================== --> - <div class="navbar navbar-fixed-top"> + <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="../../docs/index.html">Bootstrap</a> @@ -53,7 +53,9 @@ </header> -<div class="container"> +<div class="bs-docs-canvas"> + + <div class="container"> @@ -1096,6 +1098,7 @@ </div> </footer> +</div> <!-- Le javascript