Skip to content

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

new navbar ideas

parent b831dc06
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 987 additions and 855 deletions
dist/css/bootstrap.css
View file @ 3e896193
This diff is collapsed.
dist/css/bootstrap.css.map
View file @ 3e896193
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ 3e896193
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/_data/nav.yml
View file @ 3e896193
......@@ -66,6 +66,7 @@
- title: Badges
- title: Navs
- title: Navbar
- title: New navbar
- title: Breadcrumb
- title: Pagination
- title: Alerts
......
docs/components/navbar.md
View file @ 3e896193
......@@ -3,85 +3,84 @@ layout: page
title: Navbar
---
<div class="bs-docs-section">
<h1 id="navbar" class="page-header">Navbar</h1>
<h2 id="navbar-default">Default navbar</h2>
<p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>
<div class="bs-callout bs-callout-warning" id="callout-navbar-overflow">
<h4>Overflowing content</h4>
<p>Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:</p>
<ol type="a">
<li>Reduce the amount or width of navbar items.</li>
<li>Hide certain navbar items at certain screen sizes using <a href="../css/#responsive-utilities">responsive utility classes</a>.</li>
<li>Change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</li>
</ol>
</div>
<div class="bs-callout bs-callout-danger">
<h4>Requires JavaScript</h4>
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
</div>
<div class="bs-callout bs-callout-info">
<h4>Changing the collapsed mobile navbar breakpoint</h4>
<p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
</div>
## Default navbar
Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.
<div class="bs-callout bs-callout-warning" id="callout-navbar-overflow">
<h4>Overflowing content</h4>
<p>Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:</p>
<ol type="a">
<li>Reduce the amount or width of navbar items.</li>
<li>Hide certain navbar items at certain screen sizes using <a href="../css/#responsive-utilities">responsive utility classes</a>.</li>
<li>Change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</li>
</ol>
</div>
<div class="bs-callout bs-callout-danger">
<h4>Requires JavaScript</h4>
<p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
</div>
<div class="bs-callout bs-callout-info">
<h4>Changing the collapsed mobile navbar breakpoint</h4>
<p>The navbar collapses into its vertical mobile view when the viewport is narrower than <code>@grid-float-breakpoint</code>, and expands into its horizontal non-mobile view when the viewport is at least <code>@grid-float-breakpoint</code> in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is <code>768px</code> (the smallest "small" or "tablet" screen).</p>
</div>
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="bs-example">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu" role="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>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-secondary">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu" role="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><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu" role="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>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-secondary">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu" role="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><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
{% highlight html %}
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
......@@ -467,4 +466,3 @@ body { padding-bottom: 70px; }
...
</nav>
{% endhighlight %}
</div>
docs/components/new-navbar.md 0 → 100644
View file @ 3e896193
---
layout: page
title: New navbar
---
Proposal to replace the existing navbar with something simpler and more customizable.
<div class="navbar navbar-default">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
</div>
<div class="navbar navbar-default">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav nav-pills pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home</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>
</div>
<div class="navbar navbar-default">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav nav-pills pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home</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>
<ul class="nav nav-pills pull-right">
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</div>
<div class="navbar navbar-default">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav nav-pills pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home</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 action="" class="form-inline pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</div>
<div class="navbar navbar-inverse">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav nav-pills pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home</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 action="" class="form-inline pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</div>
<div class="navbar navbar-default">
<div class="collapse" id="navbar-header">
<h3>Collapsed content</h3>
<p>Toggleable via the navbar brand.</p>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
&#9776;
</button>
</div>
docs/dist/css/bootstrap.css
View file @ 3e896193
This diff is collapsed.
docs/dist/css/bootstrap.css.map
View file @ 3e896193
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ 3e896193
This source diff could not be displayed because it is too large. You can view the blob instead.
less/buttons.less
View file @ 3e896193
......@@ -15,7 +15,7 @@
touch-action: manipulation;
cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid transparent;
border: @border-width solid transparent;
white-space: nowrap;
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
user-select: none;
......
less/navbar.less
View file @ 3e896193
......@@ -10,9 +10,10 @@
.navbar {
position: relative;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
padding: @spacer;
/*min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)*/
margin-bottom: @navbar-margin-bottom;
border: 1px solid transparent;
/*border: 1px solid transparent;*/
// Prevent floats from breaking the navbar
&:extend(.clearfix all);
......@@ -163,13 +164,15 @@
.navbar-brand {
float: left;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
padding: .55rem .75rem;
margin-right: @spacer;
margin-bottom: 0; // For headings
font-size: @font-size-large;
line-height: @line-height-computed;
height: @navbar-height;
/*height: @navbar-height;*/
&:hover,
&:focus {
> a:hover,
> a:focus {
text-decoration: none;
}
......@@ -177,14 +180,34 @@
display: block;
}
/*
@media (min-width: @grid-float-breakpoint) {
.navbar > .container &,
.navbar > .container-fluid & {
margin-left: -@navbar-padding-horizontal;
}
}
*/
}
// New hotness
.navbar-toggler {
float: left;
padding: .55rem .75rem;
margin-right: @spacer;
margin-bottom: 0; // For headings
font-size: @font-size-large;
line-height: @line-height-computed;
background: none;
border: 0;
&:hover,
&:focus {
text-decoration: none;
}
}
// Navbar toggle
//
......@@ -225,6 +248,7 @@
}
// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
......@@ -524,6 +548,29 @@
background-color: @navbar-inverse-bg;
border-color: @navbar-inverse-border;
.navbar-brand > a,
.nav-pills > .nav-item > .nav-link {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
}
}
.nav-pills > .nav-item > .nav-link {
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
.nav-pills > .active > .nav-link,
.nav-pills > .nav-link.active {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
.navbar-brand {
color: @navbar-inverse-brand-color;
&:hover,
......
less/navs.less
View file @ 3e896193
......@@ -3,6 +3,7 @@
// --------------------------------------------------
.nav {
margin-bottom: 0;
.list-unstyled();
&:extend(.clearfix all);
}
......@@ -44,7 +45,6 @@
//
.nav-tabs {
margin-bottom: @line-height-computed;
border-bottom: 1px solid @nav-tabs-border-color;
.nav-item {
......@@ -99,8 +99,6 @@
//
.nav-pills {
margin-bottom: @line-height-computed;
.nav-item {
float: left;
......
less/type.less
View file @ 3e896193
......@@ -8,6 +8,7 @@
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-top: 0;
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @headings-line-height;
......@@ -24,7 +25,6 @@ h1, h2, h3, h4, h5, h6,
h1, .h1,
h2, .h2,
h3, .h3 {
margin-top: @line-height-computed;
margin-bottom: (@line-height-computed / 2);
small,
......@@ -35,7 +35,6 @@ h3, .h3 {
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: (@line-height-computed / 2);
margin-bottom: (@line-height-computed / 2);
small,
......
less/variables.less
View file @ 3e896193
......@@ -45,6 +45,8 @@
@enable-gradients: true;
@enable-transitions: true;
@spacer: 1rem;
@border-width: .05rem;
//== Typography
//
......@@ -88,7 +90,7 @@
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@padding-base-vertical: .5rem;
@padding-base-horizontal: 1rem;
@padding-base-horizontal: .75rem;
@padding-large-vertical: .75rem;
@padding-large-horizontal: 1.5rem;
......@@ -102,7 +104,7 @@
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: .2rem;
@border-radius-base: .25rem;
@border-radius-large: .3rem;
@border-radius-small: .2rem;
......@@ -122,7 +124,7 @@
//## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for `<th>`s and `<td>`s.
@table-cell-padding: .6rem;
@table-cell-padding: .5rem;
//** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding: .3rem;
......@@ -135,7 +137,7 @@
@table-bg-active: @table-bg-hover;
//** Border color for table and cell borders.
@table-border-color: #ddd;
@table-border-color: @gray-lighter;
//== Buttons
......@@ -194,11 +196,11 @@
@input-color-placeholder: #999;
//** Default `.form-control` height
@input-height-base: ((@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + .2);
@input-height-base: ((@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + (@border-width * 2));
//** Large `.form-control` height
@input-height-large: ((@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + .2);
@input-height-large: ((@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + (@border-width * 2));
//** Small `.form-control` height
@input-height-small: ((@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + .2);
@input-height-small: ((@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + (@border-width * 2));
@legend-color: @gray-dark;
@legend-border-color: #e5e5e5;
......@@ -342,7 +344,7 @@
// Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: lighten(@gray-light, 12%);
@navbar-inverse-bg: #222;
@navbar-inverse-bg: #373a3c;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
......@@ -370,7 +372,7 @@
//##
//=== Shared nav styles
@nav-link-padding: .5em 1em;
@nav-link-padding: .6em 1em;
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
......
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