Skip to content

B
bootstrap
Commit b7acbd84 authored by Mark Otto's avatar Mark Otto
Browse files
Options

move collapsing navbar nav to 480 and below, unfloat nav for 768 and below to... 

move collapsing navbar nav to 480 and below, unfloat nav for 768 and below to wrap links with position absolute
parent 9e7acc63
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 106 deletions
bootstrap.css
View file @ b7acbd84
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Sun Jan 8 02:30:05 PST 2012 * Date: Sun Jan 8 02:58:37 PST 2012
*/ */
html, body { html, body {
margin: 0; margin: 0;
...@@ -3007,53 +3007,6 @@ a.thumbnail:hover { ...@@ -3007,53 +3007,6 @@ a.thumbnail:hover {
visibility: hidden; visibility: hidden;
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.modal {
width: auto;
margin: 0;
}
.modal.fade.in {
top: auto;
}
.horizontal-form .control-group > label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
.horizontal-form .controls {
margin-left: 0;
}
.horizontal-form .control-list {
padding-top: 0;
}
.horizontal-form .form-actions {
padding-left: 0;
}
.modal {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
width: auto;
}
.modal .close {
padding: 10px;
}
}
@media (max-width: 768px) {
.container {
width: auto;
padding: 0 20px;
}
.row {
margin-left: 0;
}
.row > [class*="span"] {
float: none;
display: block;
width: auto;
margin: 0;
}
.navbar .nav { .navbar .nav {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -3109,6 +3062,59 @@ a.thumbnail:hover { ...@@ -3109,6 +3062,59 @@ a.thumbnail:hover {
.navbar .nav:hover > li > a:hover { .navbar .nav:hover > li > a:hover {
background-color: #333; background-color: #333;
} }
.modal {
width: auto;
margin: 0;
}
.modal.fade.in {
top: auto;
}
.horizontal-form .control-group > label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
.horizontal-form .controls {
margin-left: 0;
}
.horizontal-form .control-list {
padding-top: 0;
}
.horizontal-form .form-actions {
padding-left: 0;
}
.modal {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
width: auto;
}
.modal .close {
padding: 10px;
}
}
@media (max-width: 768px) {
.navbar-fixed {
position: absolute;
}
.navbar-fixed .nav {
float: none;
}
.container {
width: auto;
padding: 0 20px;
}
.row {
margin-left: 0;
}
.row > [class*="span"] {
float: none;
display: block;
width: auto;
margin: 0;
}
} }
@media (min-width: 768px) and (max-width: 940px) { @media (min-width: 768px) and (max-width: 940px) {
.container { .container {
......
bootstrap.min.css
View file @ b7acbd84
...@@ -513,4 +513,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, ...@@ -513,4 +513,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
.progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);} .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);}
.progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}
.hidden{display:none;visibility:hidden;} .hidden{display:none;visibility:hidden;}
@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .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;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} @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;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
lib/responsive.less
View file @ b7acbd84
...@@ -18,6 +18,64 @@ ...@@ -18,6 +18,64 @@
// --------------------- // ---------------------
@media (max-width: 480px) { @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;
}
}
// Resize modals // Resize modals
.modal { .modal {
width: auto; width: auto;
...@@ -63,6 +121,15 @@ ...@@ -63,6 +121,15 @@
// -------------------------------------------------- // --------------------------------------------------
@media (max-width: 768px) { @media (max-width: 768px) {
// Unfix the navbar
.navbar-fixed {
position: absolute;
}
.navbar-fixed .nav {
float: none;
}
// Remove width from containers // Remove width from containers
.container { .container {
width: auto; width: auto;
...@@ -80,63 +147,6 @@ ...@@ -80,63 +147,6 @@
margin: 0; margin: 0;
} }
// 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;
}
}
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment