mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-28 20:52:21 +01:00
More navbar derping
This commit is contained in:
Mark Otto
parent
960804cea3
commit
9ba14cfb7c
114
docs/assets/css/bootstrap.css
vendored
114
docs/assets/css/bootstrap.css
vendored
@ -949,10 +949,9 @@ input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
min-height: 34px;
|
||||
padding: 6px 9px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #555555;
|
||||
@ -2868,6 +2867,7 @@ button.close {
|
||||
.navbar {
|
||||
padding: 15px;
|
||||
background-color: #eeeeee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.navbar:before,
|
||||
@ -2882,16 +2882,17 @@ button.close {
|
||||
|
||||
.navbar .brand {
|
||||
display: inline-block;
|
||||
padding: 7px 15px;
|
||||
padding: 15px 15px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
line-height: 20px;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
.navbar .brand:hover {
|
||||
color: #5e5e5e;
|
||||
text-decoration: none;
|
||||
background-color: #ddd;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-navbar {
|
||||
@ -2918,7 +2919,13 @@ button.close {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.navbar .nav > li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navbar .nav > li > a {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
line-height: 20px;
|
||||
color: #777777;
|
||||
}
|
||||
@ -2933,7 +2940,37 @@ button.close {
|
||||
.navbar .nav > .active > a:hover,
|
||||
.navbar .nav > .active > a:focus {
|
||||
color: #555555;
|
||||
background-color: #e1e1e1;
|
||||
background-color: #d5d5d5;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.navbar {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.navbar .brand {
|
||||
float: left;
|
||||
margin-left: -15px;
|
||||
}
|
||||
.navbar .nav {
|
||||
margin-top: 0;
|
||||
}
|
||||
.navbar .nav:before,
|
||||
.navbar .nav:after {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.navbar .nav:after {
|
||||
clear: both;
|
||||
}
|
||||
.navbar .btn-navbar {
|
||||
display: none;
|
||||
}
|
||||
.nav-collapse.collapse {
|
||||
float: left;
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-inverse {
|
||||
@ -2969,6 +3006,40 @@ button.close {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.navbar-static-top {
|
||||
position: static;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1030;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar-fixed-top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar-fixed-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.navbar .divider-vertical {
|
||||
height: 26px;
|
||||
margin: 7px 9px;
|
||||
border-right: 1px solid #fbfbfb;
|
||||
border-left: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
.navbar-form {
|
||||
margin-top: 9px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
// COMMON STYLES
|
||||
@ -4737,41 +4808,10 @@ a.badge:hover {
|
||||
}
|
||||
*/
|
||||
|
||||
/* Required to make the collapsing navbar work on regular desktops */
|
||||
|
||||
}
|
||||
.container {
|
||||
max-width: 940px;
|
||||
}
|
||||
.navbar {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.navbar .brand {
|
||||
float: left;
|
||||
padding-top: 11px;
|
||||
padding-bottom: 11px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
.navbar .nav {
|
||||
margin-top: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.navbar .nav > li {
|
||||
float: left;
|
||||
}
|
||||
.navbar .nav > li > a {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.navbar .btn-navbar {
|
||||
display: none;
|
||||
}
|
||||
.nav-collapse.collapse {
|
||||
float: left;
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
|
||||
@ -859,31 +859,16 @@
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar">
|
||||
<form class="navbar-form pull-left">
|
||||
<input type="text" class="span2">
|
||||
<input type="text" style="width: 200px;">
|
||||
<button type="submit" class="btn">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="navbar-form pull-left">
|
||||
<input type="text" class="span2">
|
||||
<form class="pull-left">
|
||||
<input type="text" style="width: 200px;">
|
||||
<button type="submit" class="btn">Submit</button>
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>Search form</h3>
|
||||
<p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar">
|
||||
<form class="navbar-search pull-left">
|
||||
<input type="text" class="search-query" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="navbar-search pull-left">
|
||||
<input type="text" class="search-query" placeholder="Search">
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>Component alignment</h3>
|
||||
|
||||
21
docs/templates/pages/components.mustache
vendored
21
docs/templates/pages/components.mustache
vendored
@ -791,31 +791,16 @@
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar">
|
||||
<form class="navbar-form pull-left">
|
||||
<input type="text" class="span2">
|
||||
<input type="text" style="width: 200px;">
|
||||
<button type="submit" class="btn">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="navbar-form pull-left">
|
||||
<input type="text" class="span2">
|
||||
<form class="pull-left">
|
||||
<input type="text" style="width: 200px;">
|
||||
<button type="submit" class="btn">Submit</button>
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>Search form</h3>
|
||||
<p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar">
|
||||
<form class="navbar-search pull-left">
|
||||
<input type="text" class="search-query" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="navbar-search pull-left">
|
||||
<input type="text" class="search-query" placeholder="Search">
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>Component alignment</h3>
|
||||
|
||||
32
less/bootstrap.less
vendored
32
less/bootstrap.less
vendored
@ -91,38 +91,6 @@
|
||||
max-width: 940px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.navbar .brand {
|
||||
float: left;
|
||||
padding-top: 11px;
|
||||
padding-bottom: 11px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
.navbar .nav {
|
||||
overflow: hidden; /* clearfix */
|
||||
margin-top: 0; /* undo top margin to make nav extend full height of navbar */
|
||||
}
|
||||
.navbar .nav > li {
|
||||
float: left;
|
||||
}
|
||||
.navbar .nav > li > a {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Required to make the collapsing navbar work on regular desktops */
|
||||
.navbar .btn-navbar {
|
||||
display: none;
|
||||
}
|
||||
.nav-collapse.collapse {
|
||||
float: left;
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Responsive: Large desktops and up
|
||||
|
||||
@ -55,11 +55,11 @@ input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
.box-sizing(border-box); // Makes inputs behave like true block-level elements
|
||||
min-height: @input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
padding: 6px 9px;
|
||||
margin-bottom: @line-height-base / 2;
|
||||
// margin-bottom: @line-height-base / 2;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @gray;
|
||||
|
||||
@ -412,8 +412,9 @@
|
||||
// -------------------------
|
||||
// Vertically center elements in the navbar.
|
||||
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
|
||||
.navbarVerticalAlign(@element-height) {
|
||||
.navbar-vertical-align(@element-height) {
|
||||
margin-top: (@navbar-height - @element-height) / 2;
|
||||
margin-bottom: (@navbar-height - @element-height) / 2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -6,24 +6,31 @@
|
||||
.navbar {
|
||||
padding: 15px;
|
||||
background-color: @navbar-bg;
|
||||
border-radius: @border-radius-base;
|
||||
// Prevent floats from breaking the navbar
|
||||
.clear_float();
|
||||
}
|
||||
|
||||
// Brand/project name
|
||||
// -------------------------
|
||||
|
||||
.navbar .brand {
|
||||
display: inline-block;
|
||||
padding: 7px 15px;
|
||||
padding: ((@navbar-height - @line-height-base) / 2) 15px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
line-height: @line-height-base;
|
||||
color: @navbar-brand-color;
|
||||
&:hover {
|
||||
color: @navbar-brand-color-hover;
|
||||
text-decoration: none;
|
||||
background-color: #ddd;
|
||||
background-color: @navbar-brand-bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive navbar button
|
||||
// -------------------------
|
||||
|
||||
.btn-navbar {
|
||||
float: right;
|
||||
padding: 10px 12px;
|
||||
@ -44,12 +51,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Nav links
|
||||
// Navbar nav links
|
||||
// -------------------------
|
||||
|
||||
.navbar {
|
||||
.nav {
|
||||
margin-top: 15px; // space out from .navbar .brand and .btn-navbar
|
||||
}
|
||||
.nav > li {
|
||||
float: left;
|
||||
}
|
||||
.nav > li > a {
|
||||
padding-top: (@navbar-height - @line-height-base) / 2;
|
||||
padding-bottom: (@navbar-height - @line-height-base) / 2;
|
||||
color: @navbar-link-color;
|
||||
line-height: 20px;
|
||||
}
|
||||
@ -65,8 +79,36 @@
|
||||
background-color: @navbar-link-bg-active;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 992px) {
|
||||
|
||||
.navbar {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.navbar .brand {
|
||||
float: left;
|
||||
margin-left: -15px;
|
||||
}
|
||||
.navbar .nav {
|
||||
.clear_float();
|
||||
margin-top: 0; // undo top margin to make nav extend full height of navbar
|
||||
}
|
||||
|
||||
// Required to make the collapsing navbar work on regular desktops
|
||||
.navbar .btn-navbar {
|
||||
display: none;
|
||||
}
|
||||
.nav-collapse.collapse {
|
||||
float: left;
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Inverse navbar
|
||||
// -------------------------
|
||||
|
||||
.navbar-inverse {
|
||||
background-color: @navbar-inverse-bg;
|
||||
|
||||
@ -97,6 +139,45 @@
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Navbar alignment options
|
||||
// --------------------------------------------------
|
||||
|
||||
// Static navbar
|
||||
.navbar-static-top {
|
||||
position: static;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Fixed navbar
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: @zindex-navbar-fixed;
|
||||
border-radius: 0;
|
||||
}
|
||||
.navbar-fixed-top { top: 0; }
|
||||
.navbar-fixed-bottom { bottom: 0; }
|
||||
|
||||
|
||||
//
|
||||
// Navbar optional components
|
||||
// --------------------------------------------------
|
||||
|
||||
// Dividers in navbar
|
||||
.navbar .divider-vertical {
|
||||
height: 26px;
|
||||
margin: 7px 9px;
|
||||
border-left: 1px solid darken(@navbar-bg, 5%);
|
||||
border-right: 1px solid lighten(@navbar-bg, 5%);
|
||||
}
|
||||
|
||||
// Navbar form
|
||||
.navbar-form {
|
||||
.navbar-vertical-align(32px); // Vertically center in navbar
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
|
||||
@ -150,20 +150,28 @@
|
||||
// Navbar
|
||||
// -------------------------
|
||||
|
||||
@navbar-collapse-width: 979px;
|
||||
@navbar-collapse-width-desktop: @navbar-collapse-width + 1;
|
||||
// Responsive collapsing
|
||||
// @navbar-collapse-width: 979px;
|
||||
// @navbar-collapse-width-desktop: @navbar-collapse-width + 1;
|
||||
|
||||
@navbar-height: 44px;
|
||||
// Basics of a navbar
|
||||
@navbar-height: 50px;
|
||||
@navbar-text: #777;
|
||||
@navbar-bg: #eee;
|
||||
|
||||
@navbar-text: #777;
|
||||
@navbar-link-color: #777;
|
||||
@navbar-link-color-hover: @grayDark;
|
||||
@navbar-link-color-active: @gray;
|
||||
@navbar-link-bg-hover: transparent;
|
||||
@navbar-link-bg-active: darken(@navbar-bg, 5%);
|
||||
|
||||
// Navbar brand label
|
||||
@navbar-brand-color: @navbar-link-color;
|
||||
@navbar-brand-color-hover: darken(@navbar-link-color, 10%);
|
||||
@navbar-brand-bg-hover: transparent;
|
||||
|
||||
// Navbar links
|
||||
@navbar-link-color: #777;
|
||||
@navbar-link-color-hover: #333;
|
||||
@navbar-link-color-active: #555;
|
||||
@navbar-link-bg-hover: transparent;
|
||||
@navbar-link-bg-active: darken(@navbar-bg, 10%);
|
||||
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
@navbar-inverse-bg: #222;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user