mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
overhaul navbar behavior in responsive css
This commit is contained in:
Mark Otto
parent
800d0b24e0
commit
f6dc566963
150
docs/assets/css/bootstrap-responsive.css
vendored
150
docs/assets/css/bootstrap-responsive.css
vendored
@ -3,60 +3,6 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.navbar .nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 180px;
|
||||
padding-top: 40px;
|
||||
list-style: none;
|
||||
}
|
||||
.navbar .nav, .navbar .nav > li:last-child a {
|
||||
-webkit-border-radius: 0 0 4px 0;
|
||||
-moz-border-radius: 0 0 4px 0;
|
||||
border-radius: 0 0 4px 0;
|
||||
}
|
||||
.navbar .nav > li {
|
||||
float: none;
|
||||
display: none;
|
||||
}
|
||||
.navbar .nav > li > a {
|
||||
float: none;
|
||||
background-color: #222;
|
||||
}
|
||||
.navbar .nav > .active {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.navbar .nav > .active > a {
|
||||
background-color: transparent;
|
||||
}
|
||||
.navbar .nav > .active > a:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
.navbar .nav > .active > a:after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 8px;
|
||||
margin-left: 6px;
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid #ffffff;
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
content: "↓";
|
||||
}
|
||||
.navbar .nav:hover > li {
|
||||
display: block;
|
||||
}
|
||||
.navbar .nav:hover > li > a:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
.form-horizontal .control-group > label {
|
||||
float: none;
|
||||
width: auto;
|
||||
@ -88,12 +34,6 @@
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar-fixed {
|
||||
position: absolute;
|
||||
}
|
||||
.navbar-fixed .nav {
|
||||
float: none;
|
||||
}
|
||||
.container {
|
||||
width: auto;
|
||||
padding: 0 20px;
|
||||
@ -187,6 +127,96 @@
|
||||
margin-left: 788px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 940px) {
|
||||
body {
|
||||
padding-top: 0;
|
||||
}
|
||||
.navbar-fixed-top {
|
||||
position: static;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.navbar-inner {
|
||||
padding: 10px;
|
||||
background-image: none;
|
||||
}
|
||||
.navbar .container {
|
||||
padding: 0;
|
||||
}
|
||||
.navbar .brand {
|
||||
float: none;
|
||||
display: block;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
.navbar .nav {
|
||||
float: none;
|
||||
margin: 9px 0;
|
||||
}
|
||||
.navbar .nav > li {
|
||||
float: none;
|
||||
}
|
||||
.navbar .nav > li > a {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.navbar .nav > .vertical-divider {
|
||||
display: none;
|
||||
}
|
||||
.navbar .nav > li > a, .navbar .dropdown-menu a {
|
||||
padding: 6px 15px;
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.navbar .dropdown-menu li + li a {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover {
|
||||
background-color: #222222;
|
||||
}
|
||||
.navbar .dropdown-menu {
|
||||
position: static;
|
||||
display: block;
|
||||
float: none;
|
||||
max-width: none;
|
||||
margin: 0 15px;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
|
||||
display: none;
|
||||
}
|
||||
.navbar .dropdown-menu .divider {
|
||||
display: none;
|
||||
}
|
||||
.navbar-form, .navbar-search {
|
||||
float: none;
|
||||
padding: 9px 15px;
|
||||
margin: 9px 0;
|
||||
border-top: 1px solid #222222;
|
||||
border-bottom: 1px solid #222222;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.navbar .nav.pull-right {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
.navbar-static .navbar-inner {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
/*
|
||||
@media (min-width: 1210px) {
|
||||
|
||||
|
||||
4
docs/assets/css/bootstrap.css
vendored
4
docs/assets/css/bootstrap.css
vendored
@ -6,7 +6,7 @@
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Fri Jan 27 15:27:51 PST 2012
|
||||
* Date: Fri Jan 27 16:25:59 PST 2012
|
||||
*/
|
||||
article,
|
||||
aside,
|
||||
@ -2004,7 +2004,7 @@ table .span12 {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar .nav .active > a {
|
||||
.navbar .nav .active > a, .navbar .nav .active > a:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
background-color: #222222;
|
||||
|
||||
@ -723,6 +723,11 @@ form.well {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* Remove any padding from the body */
|
||||
body {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Subnav */
|
||||
.subnav {
|
||||
position: static;
|
||||
@ -745,13 +750,6 @@ form.well {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
/* Adjust the jumbotron */
|
||||
.jumbotron .benefits {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: 36px 0;
|
||||
}
|
||||
|
||||
/* Popovers */
|
||||
.large-bird {
|
||||
display: none;
|
||||
@ -787,9 +785,14 @@ form.well {
|
||||
.jumbotron h1 {
|
||||
font-size: 54px;
|
||||
}
|
||||
.masthead p {
|
||||
font-size: 25px;
|
||||
line-height: 36px;
|
||||
}
|
||||
.jumbotron h1,
|
||||
.jumbotron p {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
@ -797,15 +800,27 @@ form.well {
|
||||
|
||||
@media (min-width: 768px) and (max-width: 940px) {
|
||||
|
||||
/* Remove any padding from the body */
|
||||
body {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Scale down the jumbotron content */
|
||||
.jumbotron h1 {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
/* Provide enough space on right-hand side for benefits list */
|
||||
.jumbotron h1,
|
||||
.jumbotron p {
|
||||
margin-right: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 940px) {
|
||||
|
||||
/* Unfloat brand */
|
||||
.navbar-fixed-top .brand {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -165,7 +165,8 @@
|
||||
}
|
||||
|
||||
// Active nav items
|
||||
.navbar .nav .active > a {
|
||||
.navbar .nav .active > a,
|
||||
.navbar .nav .active > a:hover {
|
||||
color: @navbarLinkColorHover;
|
||||
text-decoration: none;
|
||||
background-color: @navbarBackground;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
// ------------------
|
||||
|
||||
// Hide from screenreaders and browsers
|
||||
// Credit: HTML5BP
|
||||
// Credit: HTML5 Boilerplate
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
@ -27,62 +27,6 @@
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
// Make the nav work for small devices
|
||||
.navbar {
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 180px;
|
||||
padding-top: 40px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav,
|
||||
.nav > li:last-child a {
|
||||
.border-radius(0 0 4px 0);
|
||||
}
|
||||
.nav > li {
|
||||
float: none;
|
||||
display: none;
|
||||
}
|
||||
.nav > li > a {
|
||||
float: none;
|
||||
background-color: #222;
|
||||
}
|
||||
.nav > .active {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.nav > .active > a {
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav > .active > a:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
.nav > .active > a:after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 8px;
|
||||
margin-left: 6px;
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid @white;
|
||||
.opacity(100);
|
||||
content: "↓";
|
||||
}
|
||||
.nav:hover > li {
|
||||
display: block;
|
||||
}
|
||||
.nav:hover > li > a:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove the horizontal form styles
|
||||
.form-horizontal .control-group > label {
|
||||
float: none;
|
||||
@ -124,15 +68,9 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
// Unfix the navbar
|
||||
.navbar-fixed {
|
||||
position: absolute;
|
||||
}
|
||||
.navbar-fixed .nav {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// GRID & CONTAINERS
|
||||
// -----------------
|
||||
// Remove width from containers
|
||||
.container {
|
||||
width: auto;
|
||||
@ -209,6 +147,111 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
// TABLETS AND BELOW
|
||||
// -----------------
|
||||
@media (max-width: 940px) {
|
||||
|
||||
// UNFIX THE TOPBAR
|
||||
// ----------------
|
||||
// Remove any padding from the body
|
||||
body {
|
||||
padding-top: 0;
|
||||
}
|
||||
// Unfix the navbar
|
||||
.navbar-fixed-top {
|
||||
position: static;
|
||||
margin-bottom: @baseLineHeight * 2;
|
||||
}
|
||||
.navbar-inner {
|
||||
padding: 10px;
|
||||
background-image: none;
|
||||
}
|
||||
.navbar .container {
|
||||
padding: 0;
|
||||
}
|
||||
// Account for brand name
|
||||
.navbar .brand {
|
||||
float: none;
|
||||
display: block;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
// Block-level the nav
|
||||
.navbar .nav {
|
||||
float: none;
|
||||
margin: (@baseLineHeight / 2) 0;
|
||||
}
|
||||
.navbar .nav > li {
|
||||
float: none;
|
||||
}
|
||||
.navbar .nav > li > a {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.navbar .nav > .vertical-divider {
|
||||
display: none;
|
||||
}
|
||||
// Nav and dropdown links in navbar
|
||||
.navbar .nav > li > a,
|
||||
.navbar .dropdown-menu a {
|
||||
padding: 6px 15px;
|
||||
font-weight: bold;
|
||||
color: @navbarLinkColor;
|
||||
.border-radius(3px);
|
||||
}
|
||||
.navbar .dropdown-menu li + li a {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.navbar .nav > li > a:hover,
|
||||
.navbar .dropdown-menu a:hover {
|
||||
background-color: @navbarBackground;
|
||||
}
|
||||
// Dropdowns in the navbar
|
||||
.navbar .dropdown-menu {
|
||||
position: static;
|
||||
display: block;
|
||||
float: none;
|
||||
max-width: none;
|
||||
margin: 0 15px;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
.border-radius(0);
|
||||
.box-shadow(none);
|
||||
}
|
||||
.navbar .dropdown-menu:before,
|
||||
.navbar .dropdown-menu:after {
|
||||
display: none;
|
||||
}
|
||||
.navbar .dropdown-menu .divider {
|
||||
display: none;
|
||||
}
|
||||
// Forms in navbar
|
||||
.navbar-form,
|
||||
.navbar-search {
|
||||
float: none;
|
||||
padding: (@baseLineHeight / 2) 15px;
|
||||
margin: (@baseLineHeight / 2) 0;
|
||||
border-top: 1px solid @navbarBackground;
|
||||
border-bottom: 1px solid @navbarBackground;
|
||||
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
// Pull right (secondary) nav content
|
||||
.navbar .nav.pull-right {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
// Static navbar
|
||||
.navbar-static .navbar-inner {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// LARGE DESKTOP & UP
|
||||
// ------------------
|
||||
/*
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user