margin-top: 9px;
}
- <<<<<<< HEAD
-.nav-list {
- padding-right: 15px;
- padding-left: 15px;
- margin-bottom: 0;
-}
-
-.nav-list > li > a,
-.nav-list .nav-header {
- margin-right: -15px;
- margin-left: -15px;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-}
-
-.nav-list > li > a {
- padding: 3px 15px;
-}
-
-.nav-list > .active > a,
-.nav-list > .active > a:hover {
- color: #ffffff;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
- background-color: #0088cc;
-}
-
-.nav-list [class^="icon-"],
-.nav-list [class*=" icon-"] {
- margin-right: 2px;
-}
-
-.nav-list .divider {
- *width: 100%;
+.nav .divider {
- =======
- .nav-list {
- padding-right: 15px;
- padding-left: 15px;
- margin-bottom: 0;
- }
-
- .nav-list > li > a,
- .nav-list .nav-header {
- margin-right: -15px;
- margin-left: -15px;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
- }
-
- .nav-list > li > a {
- padding: 3px 15px;
- }
-
- .nav-list > .active > a,
- .nav-list > .active > a:hover {
- color: #ffffff;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
- background-color: #0088cc;
- }
-
- .nav-list [class^="icon-"],
- .nav-list [class*=" icon-"] {
- margin-right: 2px;
- }
-
- .nav-list .divider {
- *width: 100%;
- >>>>>>> 2.1.2-wip
height: 1px;
margin: 9px 1px;
- *margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}
.label {
- padding: 1px 4px 2px;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
+ border-radius: 3px;
}
.badge {
- padding: 1px 9px 2px;
+ padding-right: 9px;
+ padding-left: 9px;
- -webkit-border-radius: 9px;
- -moz-border-radius: 9px;
- border-radius: 9px;
+ border-radius: 9px;
}
a.label:hover,
.affix {
position: fixed;
}
- top: auto;
+
+.control-block-level {
+ display: block;
+ width: 100%;
+}
+
+.hidden {
+ display: none;
+ visibility: hidden;
+}
+
+.visible-phone {
+ display: none !important;
+}
+
+.visible-tablet {
+ display: none !important;
+}
+
+.hidden-desktop {
+ display: none !important;
+}
+
+.visible-desktop {
+ display: inherit !important;
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+ .hidden-desktop {
+ display: inherit !important;
+ }
+ .visible-desktop {
+ display: none !important ;
+ }
+ .visible-tablet {
+ display: inherit !important;
+ }
+ .hidden-tablet {
+ display: none !important;
+ }
+}
+
+@media (max-width: 767px) {
+ .hidden-desktop {
+ display: inherit !important;
+ }
+ .visible-desktop {
+ display: none !important;
+ }
+ .visible-phone {
+ display: inherit !important;
+ }
+ .hidden-phone {
+ display: none !important;
+ }
+}
+
+@media (min-width: 1200px) {
+ .container,
+ .navbar-fixed-top .container,
+ .navbar-fixed-bottom .container {
+ width: 1170px;
+ }
+ .row {
+ margin-right: -15px;
+ margin-left: -15px;
+ }
+ .row:before,
+ .row:after {
+ display: table;
+ line-height: 0;
+ content: "";
+ }
+ .row:after {
+ clear: both;
+ }
+ [class*="span"] {
+ float: left;
+ min-height: 1px;
+ padding-right: 15px;
+ padding-left: 15px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+ .span12 {
+ width: 100%;
+ }
+ .span11 {
+ width: 91.66666666666666%;
+ }
+ .span10 {
+ width: 83.33333333333334%;
+ }
+ .span9 {
+ width: 75%;
+ }
+ .span8 {
+ width: 66.66666666666666%;
+ }
+ .span7 {
+ width: 58.333333333333336%;
+ }
+ .span6 {
+ width: 50%;
+ }
+ .span5 {
+ width: 41.66666666666667%;
+ }
+ .span4 {
+ width: 33.33333333333333%;
+ }
+ .span3 {
+ width: 25%;
+ }
+ .span2 {
+ width: 16.666666666666664%;
+ }
+ .span1 {
+ width: 8.333333333333332%;
+ }
+ .offset12 {
+ margin-left: 100%;
+ }
+ .offset11 {
+ margin-left: 91.66666666666666%;
+ }
+ .offset10 {
+ margin-left: 83.33333333333334%;
+ }
+ .offset9 {
+ margin-left: 75%;
+ }
+ .offset8 {
+ margin-left: 66.66666666666666%;
+ }
+ .offset7 {
+ margin-left: 58.333333333333336%;
+ }
+ .offset6 {
+ margin-left: 50%;
+ }
+ .offset5 {
+ margin-left: 41.66666666666667%;
+ }
+ .offset4 {
+ margin-left: 33.33333333333333%;
+ }
+ .offset3 {
+ margin-left: 25%;
+ }
+ .offset2 {
+ margin-left: 16.666666666666664%;
+ }
+ .offset1 {
+ margin-left: 8.333333333333332%;
+ }
+ input.span12,
+ textarea.span12,
+ select.span12,
+ .uneditable-input.span12 {
+ width: 97.43589743589743%;
+ margin-right: 1.282051282051282%;
+ margin-left: 1.282051282051282%;
+ }
+ input.span11,
+ textarea.span11,
+ select.span11,
+ .uneditable-input.span11 {
+ width: 89.10256410256409%;
+ margin-right: 1.282051282051282%;
+ margin-left: 1.282051282051282%;
+ }
+ input.span10,
+ textarea.span10,
+ select.span10,
+ .uneditable-input.span10 {
+ width: 80.76923076923077%;
+ margin-right: 1.282051282051282%;
+ margin-left: 1.282051282051282%;
+ }
+ input.span9,
+ textarea.span9,
+ select.span9,
+ .uneditable-input.span9 {
+ width: 72.43589743589743%;
+ margin-right: 1.282051282051282%;
+ margin-left: 1.282051282051282%;
+ }
+ input.span8,
+ textarea.span8,
+ select.span8,
+ .uneditable-input.span8 {
+ width: 64.10256410256409%;
+ margin-right: 1.282051282051282%;
+ margin-left: 1.282051282051282%;
+ }
+ input.span7,
+ textarea.span7,
+ select.span7,
+ .uneditable-input.span7 {
+ width: 55.769230769230774%;
+ margin-right: 1.282051282051282%;
+ margin-left: 1.282051282051282%;
+ }
+ input.span6,
+ textarea.span6,
+ select.span6,
+ .uneditable-input.span6 {
+ width: 47.43589743589744%;
+ margin-right: 1.282051282051282%;
+ margin-left: 1.282051282051282%;
+ }
+ input.span5,
+ textarea.span5,
+ select.span5,
+ .uneditable-input.span5 {
+ width: 39.10256410256411%;
+ margin-right: 1.282051282051282%;
+ margin-left: 1.282051282051282%;
+ }
+ input.span4,
+ textarea.span4,
+ select.span4,
+ .uneditable-input.span4 {
+ width: 30.769230769230766%;
+ margin-right: 1.282051282051282%;
+ margin-left: 1.282051282051282%;
+ }
+ input.span3,
+ textarea.span3,
+ select.span3,
+ .uneditable-input.span3 {
+ width: 22.435897435897438%;
+ margin-right: 1.282051282051282%;
+ margin-left: 1.282051282051282%;
+ }
+ input.span2,
+ textarea.span2,
+ select.span2,
+ .uneditable-input.span2 {
+ width: 14.1025641025641%;
+ margin-right: 1.282051282051282%;
+ margin-left: 1.282051282051282%;
+ }
+ input.span1,
+ textarea.span1,
+ select.span1,
+ .uneditable-input.span1 {
+ width: 5.769230769230768%;
+ margin-right: 1.282051282051282%;
+ margin-left: 1.282051282051282%;
+ }
+ input.offset12,
+ textarea.offset12,
+ select.offset12,
+ uneditable-input.offset12 {
+ margin-left: 101.28205128205128%;
+ }
+ input.offset11,
+ textarea.offset11,
+ select.offset11,
+ uneditable-input.offset11 {
+ margin-left: 92.94871794871794%;
+ }
+ input.offset10,
+ textarea.offset10,
+ select.offset10,
+ uneditable-input.offset10 {
+ margin-left: 84.61538461538463%;
+ }
+ input.offset9,
+ textarea.offset9,
+ select.offset9,
+ uneditable-input.offset9 {
+ margin-left: 76.28205128205128%;
+ }
+ input.offset8,
+ textarea.offset8,
+ select.offset8,
+ uneditable-input.offset8 {
+ margin-left: 67.94871794871794%;
+ }
+ input.offset7,
+ textarea.offset7,
+ select.offset7,
+ uneditable-input.offset7 {
+ margin-left: 59.61538461538462%;
+ }
+ input.offset6,
+ textarea.offset6,
+ select.offset6,
+ uneditable-input.offset6 {
+ margin-left: 51.282051282051285%;
+ }
+ input.offset5,
+ textarea.offset5,
+ select.offset5,
+ uneditable-input.offset5 {
+ margin-left: 42.948717948717956%;
+ }
+ input.offset4,
+ textarea.offset4,
+ select.offset4,
+ uneditable-input.offset4 {
+ margin-left: 34.61538461538461%;
+ }
+ input.offset3,
+ textarea.offset3,
+ select.offset3,
+ uneditable-input.offset3 {
+ margin-left: 26.28205128205128%;
+ }
+ input.offset2,
+ textarea.offset2,
+ select.offset2,
+ uneditable-input.offset2 {
+ margin-left: 17.948717948717945%;
+ }
+ input.offset1,
+ textarea.offset1,
+ select.offset1,
+ uneditable-input.offset1 {
+ margin-left: 9.615384615384613%;
+ }
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+ .row {
+ margin-right: -10px;
+ margin-left: -10px;
+ }
+ .row:before,
+ .row:after {
+ display: table;
+ line-height: 0;
+ content: "";
+ }
+ .row:after {
+ clear: both;
+ }
+ [class*="span"] {
+ float: left;
+ min-height: 1px;
+ padding-right: 10px;
+ padding-left: 10px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+ .span12 {
+ width: 100%;
+ }
+ .span11 {
+ width: 91.66666666666666%;
+ }
+ .span10 {
+ width: 83.33333333333334%;
+ }
+ .span9 {
+ width: 75%;
+ }
+ .span8 {
+ width: 66.66666666666666%;
+ }
+ .span7 {
+ width: 58.333333333333336%;
+ }
+ .span6 {
+ width: 50%;
+ }
+ .span5 {
+ width: 41.66666666666667%;
+ }
+ .span4 {
+ width: 33.33333333333333%;
+ }
+ .span3 {
+ width: 25%;
+ }
+ .span2 {
+ width: 16.666666666666664%;
+ }
+ .span1 {
+ width: 8.333333333333332%;
+ }
+ .offset12 {
+ margin-left: 100%;
+ }
+ .offset11 {
+ margin-left: 91.66666666666666%;
+ }
+ .offset10 {
+ margin-left: 83.33333333333334%;
+ }
+ .offset9 {
+ margin-left: 75%;
+ }
+ .offset8 {
+ margin-left: 66.66666666666666%;
+ }
+ .offset7 {
+ margin-left: 58.333333333333336%;
+ }
+ .offset6 {
+ margin-left: 50%;
+ }
+ .offset5 {
+ margin-left: 41.66666666666667%;
+ }
+ .offset4 {
+ margin-left: 33.33333333333333%;
+ }
+ .offset3 {
+ margin-left: 25%;
+ }
+ .offset2 {
+ margin-left: 16.666666666666664%;
+ }
+ .offset1 {
+ margin-left: 8.333333333333332%;
+ }
+}
+
+@media (max-width: 767px) {
+ body {
+ padding-right: 20px;
+ padding-left: 20px;
+ }
+ .navbar-fixed-top,
+ .navbar-fixed-bottom,
+ .navbar-static-top {
+ margin-right: -20px;
+ margin-left: -20px;
+ }
+ .container-fluid {
+ padding: 0;
+ }
+ .dl-horizontal dt {
+ float: none;
+ width: auto;
+ clear: none;
+ text-align: left;
+ }
+ .dl-horizontal dd {
+ margin-left: 0;
+ }
+ .container {
+ width: auto;
+ }
+ [class*="span"],
+ .uneditable-input[class*="span"] {
+ display: block;
+ float: none;
+ width: 100%;
+ margin-left: 0;
+ }
+ input[class*="span"],
+ select[class*="span"],
+ textarea[class*="span"],
+ .uneditable-input {
+ display: block;
+ width: 100%;
+ }
+ .input-prepend input,
+ .input-append input,
+ .input-prepend input[class*="span"],
+ .input-append input[class*="span"] {
+ display: inline-block;
+ width: auto;
+ }
+ .controls-row [class*="span"] + [class*="span"] {
+ margin-left: 0;
+ }
+ .modal {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ left: 20px;
+ width: auto;
+ margin: 0;
+ }
++ .modal.fade {
++ top: -100px;
++ }
+ .modal.fade.in {
++ top: 20px;
+ }
+}
+
+@media (max-width: 480px) {
+ .nav-collapse {
+ -webkit-transform: translate3d(0, 0, 0);
+ }
+ .page-header h1 small {
+ display: block;
+ line-height: 20px;
+ }
+ input[type="checkbox"],
+ input[type="radio"] {
+ border: 1px solid #ccc;
+ }
+ .form-horizontal .control-label {
+ float: none;
+ width: auto;
+ padding-top: 0;
+ text-align: left;
+ }
+ .form-horizontal .controls {
+ margin-left: 0;
+ }
+ .form-horizontal .control-list {
+ padding-top: 0;
+ }
+ .form-horizontal .form-actions {
+ padding-right: 10px;
+ padding-left: 10px;
+ }
+ .media .pull-left,
+ .media .pull-right {
+ display: block;
+ float: none;
+ margin-bottom: 10px;
+ }
+ .media-object {
+ margin-right: 0;
+ margin-left: 0;
+ }
+ .modal {
+ top: 10px;
+ right: 10px;
+ left: 10px;
+ }
+ .modal-header .close {
+ padding: 10px;
+ margin: -10px;
+ }
+ .carousel-caption {
+ position: static;
+ }
+}
+
+@media (max-width: 979px) {
+ body {
+ padding-top: 0;
+ }
+ .navbar-fixed-top,
+ .navbar-fixed-bottom {
+ position: static;
+ }
+ .navbar-fixed-top {
+ margin-bottom: 20px;
+ }
+ .navbar-fixed-bottom {
+ margin-top: 20px;
+ }
+ .navbar-fixed-top,
+ .navbar-fixed-bottom {
+ padding: 5px;
+ }
+ .navbar .container {
+ width: auto;
+ padding: 0;
+ }
+ .navbar .brand {
+ padding-right: 10px;
+ padding-left: 10px;
+ margin: 0 0 0 -5px;
+ }
+ .nav-collapse {
+ clear: both;
+ }
+ .nav-collapse .nav {
+ float: none;
+ margin: 0 0 10px;
+ }
+ .nav-collapse .nav > li {
+ float: none;
+ }
+ .nav-collapse .nav > li > a {
+ margin-bottom: 2px;
+ }
+ .nav-collapse .nav > .divider-vertical {
+ display: none;
+ }
+ .nav-collapse .nav .nav-header {
+ color: #777777;
+ text-shadow: none;
+ }
+ .nav-collapse .nav > li > a,
+ .nav-collapse .dropdown-menu a {
+ padding: 9px 15px;
+ font-weight: bold;
+ color: #777777;
+ border-radius: 3px;
+ }
+ .nav-collapse .btn {
+ padding: 4px 10px 4px;
+ font-weight: normal;
+ border-radius: 4px;
+ }
+ .nav-collapse .dropdown-menu li + li a {
+ margin-bottom: 2px;
+ }
+ .nav-collapse .nav > li > a:hover,
+ .nav-collapse .dropdown-menu a:hover {
+ background-color: #f2f2f2;
+ }
+ .navbar-inverse .nav-collapse .nav > li > a:hover,
+ .navbar-inverse .nav-collapse .dropdown-menu a:hover {
+ background-color: #111111;
+ }
+ .nav-collapse.in .btn-group {
+ padding: 0;
+ margin-top: 5px;
+ }
+ .nav-collapse .dropdown-menu {
+ position: static;
+ top: auto;
+ left: auto;
+ display: block;
+ float: none;
+ max-width: none;
+ padding: 0;
+ margin: 0 15px;
+ background-color: transparent;
+ border: none;
+ border-radius: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+ .nav-collapse .dropdown-menu:before,
+ .nav-collapse .dropdown-menu:after {
+ display: none;
+ }
+ .nav-collapse .dropdown-menu .divider {
+ display: none;
+ }
+ .nav-collapse .nav > li > .dropdown-menu:before,
+ .nav-collapse .nav > li > .dropdown-menu:after {
+ display: none;
+ }
+ .nav-collapse .navbar-form,
+ .nav-collapse .navbar-search {
+ float: none;
+ padding: 10px 15px;
+ margin: 10px 0;
+ border-top: 1px solid #f2f2f2;
+ border-bottom: 1px solid #f2f2f2;
+ -webkit-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-inverse .nav-collapse .navbar-form,
+ .navbar-inverse .nav-collapse .navbar-search {
+ border-top-color: #111111;
+ border-bottom-color: #111111;
+ }
+ .navbar .nav-collapse .nav.pull-right {
+ float: none;
+ margin-left: 0;
+ }
+ .nav-collapse,
+ .nav-collapse.collapse {
+ height: 0;
+ overflow: hidden;
+ }
+ .navbar .btn-navbar {
+ display: block;
+ }
+ .navbar-static {
+ padding-right: 10px;
+ padding-left: 10px;
+ }
+}
+
+@media (min-width: 980px) {
+ .nav-collapse.collapse {
+ height: auto !important;
+ overflow: visible !important;
+ }
+}
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
<div class="bs-docs-example">
<div class="navbar">
- <div class="navbar-inner">
- <div class="container">
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </a>
- <a class="brand" href="#">Title</a>
- <div class="nav-collapse collapse navbar-responsive-collapse">
- <ul class="nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="nav-header">Nav header</li>
- <li><a href="#">Separated link</a></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </li>
- </ul>
- <form class="navbar-search pull-left" action="">
- <input type="text" class="search-query span2" placeholder="Search">
- </form>
- <ul class="nav pull-right">
- <li><a href="#">Link</a></li>
- <li class="divider-vertical"></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </li>
- </ul>
- </div><!-- /.nav-collapse -->
- </div>
- </div><!-- /navbar-inner -->
+ <div class="container">
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
++ <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </a>
+ <a class="brand" href="#">Title</a>
- <div class="nav-collapse collapse">
++ <div class="nav-collapse collapse navbar-responsive-collapse">
+ <ul class="nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li class="nav-header">Nav header</li>
+ <li><a href="#">Separated link</a></li>
+ <li><a href="#">One more separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form class="navbar-search pull-left" action="">
+ <input type="text" class="search-query span2" placeholder="Search">
+ </form>
+ <ul class="nav pull-right">
+ <li><a href="#">Link</a></li>
+ <li class="divider-vertical"></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!-- /.nav-collapse -->
+ </div>
++
</div><!-- /navbar -->
</div>
<pre class="prettyprint linenums">
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-docs-example">
<div class="navbar navbar-inverse" style="position: static;">
- <div class="navbar-inner">
- <div class="container">
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </a>
- <a class="brand" href="#">Title</a>
- <div class="nav-collapse collapse navbar-inverse-collapse">
- <ul class="nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li class="nav-header">Nav header</li>
- <li><a href="#">Separated link</a></li>
- <li><a href="#">One more separated link</a></li>
- </ul>
- </li>
- </ul>
- <form class="navbar-search pull-left" action="">
- <input type="text" class="search-query span2" placeholder="Search">
- </form>
- <ul class="nav pull-right">
- <li><a href="#">Link</a></li>
- <li class="divider-vertical"></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </li>
- </ul>
- </div><!-- /.nav-collapse -->
- </div>
- </div><!-- /navbar-inner -->
+ <div class="container">
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
++ <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </a>
+ <a class="brand" href="#">Title</a>
- <div class="nav-collapse collapse">
++ <div class="nav-collapse collapse navbar-inverse-collapse">
+ <ul class="nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li class="nav-header">Nav header</li>
+ <li><a href="#">Separated link</a></li>
+ <li><a href="#">One more separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form class="navbar-search pull-left" action="">
+ <input type="text" class="search-query span2" placeholder="Search">
+ </form>
+ <ul class="nav pull-right">
+ <li><a href="#">Link</a></li>
+ <li class="divider-vertical"></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!-- /.nav-collapse -->
+ </div>
</div><!-- /navbar -->
</div>
<pre class="prettyprint linenums">
<p>{{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
<div class="bs-docs-example">
<div class="navbar">
- <div class="navbar-inner">
- <div class="container">
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </a>
- <a class="brand" href="#">{{_i}}Title{{/i}}</a>
- <div class="nav-collapse collapse navbar-responsive-collapse">
- <ul class="nav">
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
- <li class="divider"></li>
- <li class="nav-header">Nav header</li>
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
- <li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
- </ul>
- </li>
- </ul>
- <form class="navbar-search pull-left" action="">
- <input type="text" class="search-query span2" placeholder="Search">
- </form>
- <ul class="nav pull-right">
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
- <li class="divider-vertical"></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
- <li class="divider"></li>
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
- </ul>
- </li>
- </ul>
- </div><!-- /.nav-collapse -->
- </div>
- </div><!-- /navbar-inner -->
+ <div class="container">
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
++ <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </a>
+ <a class="brand" href="#">{{_i}}Title{{/i}}</a>
- <div class="nav-collapse collapse">
++ <div class="nav-collapse collapse navbar-responsive-collapse">
+ <ul class="nav">
+ <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#">{{_i}}Link{{/i}}</a></li>
+ <li><a href="#">{{_i}}Link{{/i}}</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+ <li class="divider"></li>
+ <li class="nav-header">Nav header</li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+ <li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form class="navbar-search pull-left" action="">
+ <input type="text" class="search-query span2" placeholder="Search">
+ </form>
+ <ul class="nav pull-right">
+ <li><a href="#">{{_i}}Link{{/i}}</a></li>
+ <li class="divider-vertical"></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+ <li class="divider"></li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!-- /.nav-collapse -->
+ </div>
++
</div><!-- /navbar -->
</div>{{! /example }}
<pre class="prettyprint linenums">
<p>{{_i}}Modify the look of the navbar by adding <code>.navbar-inverse</code>.{{/i}}</p>
<div class="bs-docs-example">
<div class="navbar navbar-inverse" style="position: static;">
- <div class="navbar-inner">
- <div class="container">
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </a>
- <a class="brand" href="#">{{_i}}Title{{/i}}</a>
- <div class="nav-collapse collapse navbar-inverse-collapse">
- <ul class="nav">
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
- <li class="divider"></li>
- <li class="nav-header">Nav header</li>
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
- <li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
- </ul>
- </li>
- </ul>
- <form class="navbar-search pull-left" action="">
- <input type="text" class="search-query span2" placeholder="Search">
- </form>
- <ul class="nav pull-right">
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
- <li class="divider-vertical"></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
- <li class="divider"></li>
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
- </ul>
- </li>
- </ul>
- </div><!-- /.nav-collapse -->
- </div>
- </div><!-- /navbar-inner -->
+ <div class="container">
- <a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
++ <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </a>
+ <a class="brand" href="#">{{_i}}Title{{/i}}</a>
- <div class="nav-collapse collapse">
++ <div class="nav-collapse collapse navbar-inverse-collapse">
+ <ul class="nav">
+ <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#">{{_i}}Link{{/i}}</a></li>
+ <li><a href="#">{{_i}}Link{{/i}}</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+ <li class="divider"></li>
+ <li class="nav-header">Nav header</li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+ <li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
+ </ul>
+ </li>
+ </ul>
+ <form class="navbar-search pull-left" action="">
+ <input type="text" class="search-query span2" placeholder="Search">
+ </form>
+ <ul class="nav pull-right">
+ <li><a href="#">{{_i}}Link{{/i}}</a></li>
+ <li class="divider-vertical"></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+ <li class="divider"></li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!-- /.nav-collapse -->
+ </div>
</div><!-- /navbar -->
</div>{{! /example }}
<pre class="prettyprint linenums">
}
// Float to collapse white-space for proper grid alignment
-.controls-row [class*="span"],
-// Redeclare the fluid grid collapse since we undo the float for inputs
-.row-fluid .controls-row [class*="span"] {
+.controls-row [class*="span"] {
float: left;
}
+ // Explicity set top padding on all checkboxes/radios, not just first-child
+ .controls-row .checkbox[class*="span"],
+ .controls-row .radio[class*="span"] {
+ padding-top: 5px;
+ }
}
// Set unique padding and border-radii
.label {
- padding: 1px 4px 2px;
- .border-radius(3px);
+ border-radius: 3px;
}
.badge {
- padding: 1px 9px 2px;
+ padding-left: 9px;
+ padding-right: 9px;
- .border-radius(9px);
+ border-radius: 9px;
}
// Hover state, but only for links
margin-left: 0; // undo default grid column styles
}
-// Change the column widths to account for td/th padding
-.table td,
-.table th {
- &.span1 { .tableColumns(1); }
- &.span2 { .tableColumns(2); }
- &.span3 { .tableColumns(3); }
- &.span4 { .tableColumns(4); }
- &.span5 { .tableColumns(5); }
- &.span6 { .tableColumns(6); }
- &.span7 { .tableColumns(7); }
- &.span8 { .tableColumns(8); }
- &.span9 { .tableColumns(9); }
- &.span10 { .tableColumns(10); }
- &.span11 { .tableColumns(11); }
- &.span12 { .tableColumns(12); }
-}
-
--
--
// TABLE BACKGROUNDS
// -----------------
// Exact selectors below required to override .table-striped
projects / thirdparty / bootstrap.git / commitdiff
