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 Show 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 @@ ...@@ -66,6 +66,7 @@
- title: Badges - title: Badges
- title: Navs - title: Navs
- title: Navbar - title: Navbar
- title: New navbar
- title: Breadcrumb - title: Breadcrumb
- title: Pagination - title: Pagination
- title: Alerts - title: Alerts
......
docs/components/navbar.md
View file @ 3e896193
...@@ -3,13 +3,11 @@ layout: page ...@@ -3,13 +3,11 @@ layout: page
title: Navbar title: Navbar
--- ---
<div class="bs-docs-section"> ## Default navbar
<h1 id="navbar" class="page-header">Navbar</h1>
<h2 id="navbar-default">Default navbar</h2> 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>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"> <div class="bs-callout bs-callout-warning" id="callout-navbar-overflow">
<h4>Overflowing content</h4> <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> <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"> <ol type="a">
...@@ -17,17 +15,17 @@ title: Navbar ...@@ -17,17 +15,17 @@ title: Navbar
<li>Hide certain navbar items at certain screen sizes using <a href="../css/#responsive-utilities">responsive utility classes</a>.</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> <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> </ol>
</div> </div>
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Requires JavaScript</h4> <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> <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>
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-info">
<h4>Changing the collapsed mobile navbar breakpoint</h4> <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> <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>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
...@@ -81,7 +79,8 @@ title: Navbar ...@@ -81,7 +79,8 @@ title: Navbar
</div><!-- /.navbar-collapse --> </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid --> </div><!-- /.container-fluid -->
</nav> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid"> <div class="container-fluid">
...@@ -467,4 +466,3 @@ body { padding-bottom: 70px; } ...@@ -467,4 +466,3 @@ body { padding-bottom: 70px; }
... ...
</nav> </nav>
{% endhighlight %} {% 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 @@ ...@@ -15,7 +15,7 @@
touch-action: manipulation; touch-action: manipulation;
cursor: pointer; cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 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; white-space: nowrap;
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base); .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
user-select: none; user-select: none;
......
less/navbar.less
View file @ 3e896193
...@@ -10,9 +10,10 @@ ...@@ -10,9 +10,10 @@
.navbar { .navbar {
position: relative; 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; margin-bottom: @navbar-margin-bottom;
border: 1px solid transparent; /*border: 1px solid transparent;*/
// Prevent floats from breaking the navbar // Prevent floats from breaking the navbar
&:extend(.clearfix all); &:extend(.clearfix all);
...@@ -163,13 +164,15 @@ ...@@ -163,13 +164,15 @@
.navbar-brand { .navbar-brand {
float: left; 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; font-size: @font-size-large;
line-height: @line-height-computed; line-height: @line-height-computed;
height: @navbar-height; /*height: @navbar-height;*/
&:hover, > a:hover,
&:focus { > a:focus {
text-decoration: none; text-decoration: none;
} }
...@@ -177,14 +180,34 @@ ...@@ -177,14 +180,34 @@
display: block; display: block;
} }
/*
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
.navbar > .container &, .navbar > .container &,
.navbar > .container-fluid & { .navbar > .container-fluid & {
margin-left: -@navbar-padding-horizontal; 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 // Navbar toggle
// //
...@@ -225,6 +248,7 @@ ...@@ -225,6 +248,7 @@
} }
// Navbar nav links // Navbar nav links
// //
// Builds on top of the `.nav` components with its own modifier class to make // Builds on top of the `.nav` components with its own modifier class to make
...@@ -524,6 +548,29 @@ ...@@ -524,6 +548,29 @@
background-color: @navbar-inverse-bg; background-color: @navbar-inverse-bg;
border-color: @navbar-inverse-border; 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 { .navbar-brand {
color: @navbar-inverse-brand-color; color: @navbar-inverse-brand-color;
&:hover, &:hover,
......
less/navs.less
View file @ 3e896193
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
// -------------------------------------------------- // --------------------------------------------------
.nav { .nav {
margin-bottom: 0;
.list-unstyled(); .list-unstyled();
&:extend(.clearfix all); &:extend(.clearfix all);
} }
...@@ -44,7 +45,6 @@ ...@@ -44,7 +45,6 @@
// //
.nav-tabs { .nav-tabs {
margin-bottom: @line-height-computed;
border-bottom: 1px solid @nav-tabs-border-color; border-bottom: 1px solid @nav-tabs-border-color;
.nav-item { .nav-item {
...@@ -99,8 +99,6 @@ ...@@ -99,8 +99,6 @@
// //
.nav-pills { .nav-pills {
margin-bottom: @line-height-computed;
.nav-item { .nav-item {
float: left; float: left;
......
less/type.less
View file @ 3e896193
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
h1, h2, h3, h4, h5, h6, h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { .h1, .h2, .h3, .h4, .h5, .h6 {
margin-top: 0;
font-family: @headings-font-family; font-family: @headings-font-family;
font-weight: @headings-font-weight; font-weight: @headings-font-weight;
line-height: @headings-line-height; line-height: @headings-line-height;
...@@ -24,7 +25,6 @@ h1, h2, h3, h4, h5, h6, ...@@ -24,7 +25,6 @@ h1, h2, h3, h4, h5, h6,
h1, .h1, h1, .h1,
h2, .h2, h2, .h2,
h3, .h3 { h3, .h3 {
margin-top: @line-height-computed;
margin-bottom: (@line-height-computed / 2); margin-bottom: (@line-height-computed / 2);
small, small,
...@@ -35,7 +35,6 @@ h3, .h3 { ...@@ -35,7 +35,6 @@ h3, .h3 {
h4, .h4, h4, .h4,
h5, .h5, h5, .h5,
h6, .h6 { h6, .h6 {
margin-top: (@line-height-computed / 2);
margin-bottom: (@line-height-computed / 2); margin-bottom: (@line-height-computed / 2);
small, small,
......
less/variables.less
View file @ 3e896193
...@@ -45,6 +45,8 @@ ...@@ -45,6 +45,8 @@
@enable-gradients: true; @enable-gradients: true;
@enable-transitions: true; @enable-transitions: true;
@spacer: 1rem;
@border-width: .05rem;
//== Typography //== Typography
// //
...@@ -88,7 +90,7 @@ ...@@ -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). //## 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-vertical: .5rem;
@padding-base-horizontal: 1rem; @padding-base-horizontal: .75rem;
@padding-large-vertical: .75rem; @padding-large-vertical: .75rem;
@padding-large-horizontal: 1.5rem; @padding-large-horizontal: 1.5rem;
...@@ -102,7 +104,7 @@ ...@@ -102,7 +104,7 @@
@line-height-large: 1.33; @line-height-large: 1.33;
@line-height-small: 1.5; @line-height-small: 1.5;
@border-radius-base: .2rem; @border-radius-base: .25rem;
@border-radius-large: .3rem; @border-radius-large: .3rem;
@border-radius-small: .2rem; @border-radius-small: .2rem;
...@@ -122,7 +124,7 @@ ...@@ -122,7 +124,7 @@
//## Customizes the `.table` component with basic values, each used across all table variations. //## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for `<th>`s and `<td>`s. //** Padding for `<th>`s and `<td>`s.
@table-cell-padding: .6rem; @table-cell-padding: .5rem;
//** Padding for cells in `.table-condensed`. //** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding: .3rem; @table-condensed-cell-padding: .3rem;
...@@ -135,7 +137,7 @@ ...@@ -135,7 +137,7 @@
@table-bg-active: @table-bg-hover; @table-bg-active: @table-bg-hover;
//** Border color for table and cell borders. //** Border color for table and cell borders.
@table-border-color: #ddd; @table-border-color: @gray-lighter;
//== Buttons //== Buttons
...@@ -194,11 +196,11 @@ ...@@ -194,11 +196,11 @@
@input-color-placeholder: #999; @input-color-placeholder: #999;
//** Default `.form-control` height //** 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 //** 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 //** 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-color: @gray-dark;
@legend-border-color: #e5e5e5; @legend-border-color: #e5e5e5;
...@@ -342,7 +344,7 @@ ...@@ -342,7 +344,7 @@
// Inverted navbar // Inverted navbar
// Reset inverted navbar basics // Reset inverted navbar basics
@navbar-inverse-color: lighten(@gray-light, 12%); @navbar-inverse-color: lighten(@gray-light, 12%);
@navbar-inverse-bg: #222; @navbar-inverse-bg: #373a3c;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); @navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links // Inverted navbar links
...@@ -370,7 +372,7 @@ ...@@ -370,7 +372,7 @@
//## //##
//=== Shared nav styles //=== Shared nav styles
@nav-link-padding: .5em 1em; @nav-link-padding: .6em 1em;
@nav-link-hover-bg: @gray-lighter; @nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light; @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