mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-17 14:54:30 +01:00
rewrite some navbar stuff, clean out some commented out code
This commit is contained in:
Mark Otto
parent
ed42fc9b76
commit
18da568b8b
@ -161,56 +161,65 @@ Small navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the p
|
|||||||
|
|
||||||
When moving from a regular navbar to a small one, be sure to update your inputs and buttons to use their small variations as well.
|
When moving from a regular navbar to a small one, be sure to update your inputs and buttons to use their small variations as well.
|
||||||
|
|
||||||
{% example html %}
|
<div class="bd-example">
|
||||||
|
<nav class="navbar navbar-default navbar-sm">
|
||||||
|
<h3 class="navbar-brand pull-left">
|
||||||
|
<a href="#">Navbar</a>
|
||||||
|
</h3>
|
||||||
|
<ul class="nav navbar-nav pull-left">
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Features</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Pricing</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">About</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form class="form-inline pull-right">
|
||||||
|
<input class="form-control form-control-sm" type="text" placeholder="Search">
|
||||||
|
<button class="btn btn-sm btn-primary" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="navbar navbar-inverse navbar-sm">
|
||||||
|
<h3 class="navbar-brand pull-left">
|
||||||
|
<a href="#">Navbar</a>
|
||||||
|
</h3>
|
||||||
|
<ul class="nav navbar-nav pull-left">
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Features</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Pricing</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">About</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form class="form-inline pull-right">
|
||||||
|
<input class="form-control form-control-sm" type="text" placeholder="Search">
|
||||||
|
<button class="btn btn-sm btn-primary" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
<nav class="navbar navbar-default navbar-sm">
|
<nav class="navbar navbar-default navbar-sm">
|
||||||
<h3 class="navbar-brand pull-left">
|
<!-- Navbar contents -->
|
||||||
<a href="#">Navbar</a>
|
|
||||||
</h3>
|
|
||||||
<ul class="nav navbar-nav pull-left">
|
|
||||||
<li class="nav-item active">
|
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Features</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Pricing</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">About</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form class="form-inline pull-right">
|
|
||||||
<input class="form-control form-control-sm" type="text" placeholder="Search">
|
|
||||||
<button class="btn btn-sm btn-primary" type="submit">Search</button>
|
|
||||||
</form>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<nav class="navbar navbar-inverse navbar-sm">
|
<nav class="navbar navbar-inverse navbar-sm">
|
||||||
<h3 class="navbar-brand pull-left">
|
<!-- Navbar contents -->
|
||||||
<a href="#">Navbar</a>
|
|
||||||
</h3>
|
|
||||||
<ul class="nav navbar-nav pull-left">
|
|
||||||
<li class="nav-item active">
|
|
||||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Features</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">Pricing</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#">About</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<form class="form-inline pull-right">
|
|
||||||
<input class="form-control form-control-sm" type="text" placeholder="Search">
|
|
||||||
<button class="btn btn-sm btn-primary" type="submit">Search</button>
|
|
||||||
</form>
|
|
||||||
</nav>
|
</nav>
|
||||||
{% endexample %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
### Collapsible content
|
### Collapsible content
|
||||||
|
|
||||||
|
|||||||
@ -202,84 +202,6 @@
|
|||||||
background-color: $navbar-default-brand-hover-bg;
|
background-color: $navbar-default-brand-hover-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .navbar-text {
|
|
||||||
// color: $navbar-default-color;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .navbar-nav {
|
|
||||||
// > li > a {
|
|
||||||
// color: $navbar-default-link-color;
|
|
||||||
|
|
||||||
// @include hover-focus {
|
|
||||||
// color: $navbar-default-link-hover-color;
|
|
||||||
// background-color: $navbar-default-link-hover-bg;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// > .active > a {
|
|
||||||
// @include plain-hover-focus {
|
|
||||||
// color: $navbar-default-link-active-color;
|
|
||||||
// background-color: $navbar-default-link-active-bg;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// > .disabled > a {
|
|
||||||
// @include plain-hover-focus {
|
|
||||||
// color: $navbar-default-link-disabled-color;
|
|
||||||
// background-color: $navbar-default-link-disabled-bg;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .navbar-toggle {
|
|
||||||
// border-color: $navbar-default-toggle-border-color;
|
|
||||||
// @include hover-focus {
|
|
||||||
// background-color: $navbar-default-toggle-hover-bg;
|
|
||||||
// }
|
|
||||||
// .icon-bar {
|
|
||||||
// background-color: $navbar-default-toggle-icon-bar-bg;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .navbar-collapse,
|
|
||||||
// .navbar-form {
|
|
||||||
// border-color: $navbar-default-border;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Dropdown menu items
|
|
||||||
// .navbar-nav {
|
|
||||||
// // Remove background color from open dropdown
|
|
||||||
// > .open > a {
|
|
||||||
// @include plain-hover-focus {
|
|
||||||
// color: $navbar-default-link-active-color;
|
|
||||||
// background-color: $navbar-default-link-active-bg;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
// // Links in navbars
|
|
||||||
// //
|
|
||||||
// // Add a class to ensure links outside the navbar nav are colored correctly.
|
|
||||||
|
|
||||||
// .navbar-link {
|
|
||||||
// color: $navbar-default-link-color;
|
|
||||||
// @include hover {
|
|
||||||
// color: $navbar-default-link-hover-color;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .btn-link {
|
|
||||||
// color: $navbar-default-link-color;
|
|
||||||
// @include hover-focus {
|
|
||||||
// color: $navbar-default-link-hover-color;
|
|
||||||
// }
|
|
||||||
// &:disabled,
|
|
||||||
// fieldset[disabled] & {
|
|
||||||
// @include hover-focus {
|
|
||||||
// color: $navbar-default-link-disabled-color;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Inverse navbar
|
// Inverse navbar
|
||||||
@ -309,7 +231,6 @@
|
|||||||
background-color: $navbar-inverse-link-active-bg;
|
background-color: $navbar-inverse-link-active-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
color: $navbar-inverse-brand-color;
|
color: $navbar-inverse-brand-color;
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
@ -318,67 +239,65 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-text {
|
|
||||||
color: $navbar-inverse-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
> li > a {
|
.navbar-link {
|
||||||
color: $navbar-inverse-link-color;
|
color: $navbar-inverse-link-color;
|
||||||
|
|
||||||
@include hover-focus {
|
@include hover-focus {
|
||||||
color: $navbar-inverse-link-hover-color;
|
color: $navbar-inverse-link-hover-color;
|
||||||
background-color: $navbar-inverse-link-hover-bg;
|
background-color: $navbar-inverse-link-hover-bg;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
> .active > a {
|
&.active > a {
|
||||||
@include plain-hover-focus {
|
@include plain-hover-focus {
|
||||||
color: $navbar-inverse-link-active-color;
|
color: $navbar-inverse-link-active-color;
|
||||||
background-color: $navbar-inverse-link-active-bg;
|
background-color: $navbar-inverse-link-active-bg;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
> .disabled > a {
|
&.disabled > a {
|
||||||
@include plain-hover-focus {
|
@include plain-hover-focus {
|
||||||
color: $navbar-inverse-link-disabled-color;
|
color: $navbar-inverse-link-disabled-color;
|
||||||
background-color: $navbar-inverse-link-disabled-bg;
|
background-color: $navbar-inverse-link-disabled-bg;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-collapse,
|
// .navbar-collapse,
|
||||||
.navbar-form {
|
// .navbar-form {
|
||||||
border-color: darken($navbar-inverse-bg, 7%);
|
// border-color: darken($navbar-inverse-bg, 7%);
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
|
// // Dropdowns
|
||||||
|
// .navbar-nav {
|
||||||
|
// > .open > a {
|
||||||
|
// @include plain-hover-focus {
|
||||||
|
// color: $navbar-inverse-link-active-color;
|
||||||
|
// background-color: $navbar-inverse-link-active-bg;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
// Dropdowns
|
// .navbar-link {
|
||||||
.navbar-nav {
|
// color: $navbar-inverse-link-color;
|
||||||
> .open > a {
|
// @include hover {
|
||||||
@include plain-hover-focus {
|
// color: $navbar-inverse-link-hover-color;
|
||||||
color: $navbar-inverse-link-active-color;
|
// }
|
||||||
background-color: $navbar-inverse-link-active-bg;
|
// }
|
||||||
}
|
//
|
||||||
}
|
// .btn-link {
|
||||||
}
|
// color: $navbar-inverse-link-color;
|
||||||
|
//
|
||||||
.navbar-link {
|
// @include hover-focus {
|
||||||
color: $navbar-inverse-link-color;
|
// color: $navbar-inverse-link-hover-color;
|
||||||
@include hover {
|
// }
|
||||||
color: $navbar-inverse-link-hover-color;
|
//
|
||||||
}
|
// &:disabled,
|
||||||
}
|
// fieldset[disabled] & {
|
||||||
|
// @include hover-focus {
|
||||||
.btn-link {
|
// color: $navbar-inverse-link-disabled-color;
|
||||||
color: $navbar-inverse-link-color;
|
// }
|
||||||
|
// }
|
||||||
@include hover-focus {
|
// }
|
||||||
color: $navbar-inverse-link-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled,
|
|
||||||
fieldset[disabled] & {
|
|
||||||
@include hover-focus {
|
|
||||||
color: $navbar-inverse-link-disabled-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user