Skip to content
GitLab
Commit 95b0ec18 authored by Mark Otto's avatar Mark Otto
Browse files

new global navbar for all docs pages

parent 60a04563
Hide whitespace changes
Inline Side-by-side
Showing
with 70 additions and 72 deletions
+70 -72
docs/_includes/nav-home.html
+ 9
- 8
View file @ 95b0ec18
<header class="bd-header" role="banner"> <header class="navbar navbar-sm navbar-inverse navbar-fixed-top bd-navbar" role="banner">
<a class="bd-header-mark hidden-xs-down" href="{{ site.baseurl }}">Bootstrap 4 Alpha</a> <div class="container">
<nav class="nav navbar-nav">
<nav class="nav nav-pills bd-header-nav"> <a class="nav-item nav-link" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
<a class="nav-link" href="{{ site.baseurl }}/getting-started/overview/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a> <a class="nav-item nav-link" href="{{ site.baseurl }}/getting-started/overview/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
<a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a> <a class="nav-item nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
<a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a> <a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
</nav> </nav>
</div>
</header> </header>
docs/_layouts/default.html
+ 2
- 1
View file @ 95b0ec18
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Meta, title, CSS, favicons, etc. -->
{% include header.html %} {% include header.html %}
</head> </head>
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active"> <body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
...@@ -11,6 +10,8 @@ ...@@ -11,6 +10,8 @@
</div> </div>
</a> </a>
{% include nav-home.html %}
{{ content }} {{ content }}
{% include footer.html %} {% include footer.html %}
......
docs/_layouts/home.html
+ 2
- 2
View file @ 95b0ec18
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Meta, title, CSS, favicons, etc. -->
{% include header.html %} {% include header.html %}
</head> </head>
<body class="bd-home"> <body class="bd-home">
...@@ -11,7 +10,8 @@ ...@@ -11,7 +10,8 @@
</div> </div>
</a> </a>
<!-- Page content of course! --> {% include nav-home.html %}
{{ content }} {{ content }}
{% include footer.html %} {% include footer.html %}
......
docs/assets/css/docs.min.css
+ 10
- 31
View file @ 95b0ec18
...@@ -239,38 +239,17 @@ ...@@ -239,38 +239,17 @@
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.5); } background-color: rgba(0, 0, 0, 0.5); }
.bd-header { .bd-navbar {
padding-bottom: .5rem; padding-top: .25rem;
margin-bottom: 1rem; padding-bottom: .25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.25); } background-color: #2a2730; }
.bd-header:before, .bd-navbar .nav-link {
.bd-header:after { color: #8e869d; }
content: " "; .bd-navbar .nav-link.active,
display: table; } .bd-navbar .nav-link:hover,
.bd-header:after { .bd-navbar .nav-link:focus {
clear: both; } color: #fff;
.bd-header .bd-header-mark {
float: left;
padding-top: .6rem;
padding-bottom: .6rem;
font-size: 1.25rem;
font-weight: 500; }
.bd-header-nav {
padding-bottom: 1rem;
margin-bottom: 2rem;
border-bottom: .0625rem solid #eee; }
.bd-header-nav .nav-link {
display: inline-block;
padding: 1.2rem 0.75rem; }
.bd-header-nav .nav-link:hover {
background-color: transparent; } background-color: transparent; }
@media (min-width: 34em) {
.bd-header-nav {
float: right;
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0; } }
.bd-masthead { .bd-masthead {
position: relative; position: relative;
......
docs/assets/css/docs.min.css.map
-472 bytes (-2%)
View file @ 95b0ec18
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
docs/assets/scss/_homepage.scss
+ 47
- 29
View file @ 95b0ec18
...@@ -29,43 +29,61 @@ ...@@ -29,43 +29,61 @@
// Homepage // Homepage
// //
.bd-header { .bd-navbar {
@include clearfix; padding-top: .25rem;
padding-bottom: .5rem; padding-bottom: .25rem;
margin-bottom: 1rem; background-color: $bd-graphite;
border-bottom: 1px solid rgba(255,255,255,.25);
.bd-header-mark {
float: left;
padding-top: .6rem;
padding-bottom: .6rem;
font-size: 1.25rem;
font-weight: 500;
}
}
.bd-header-nav {
padding-bottom: 1rem;
margin-bottom: 2rem;
border-bottom: .0625rem solid #eee;
.nav-link { .nav-link {
display: inline-block; color: $bd-graphite-light;
padding: 1.2rem .75rem;
&:hover { &.active,
&:hover,
&:focus {
color: #fff;
background-color: transparent; background-color: transparent;
} }
} }
@include media-breakpoint-up(sm) {
float: right;
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
} }
//
// .bd-header {
// @include clearfix;
// padding-bottom: .5rem;
// margin-bottom: 1rem;
// border-bottom: 1px solid rgba(255,255,255,.25);
//
// .bd-header-mark {
// float: left;
// padding-top: .6rem;
// padding-bottom: .6rem;
// font-size: 1.25rem;
// font-weight: 500;
// }
// }
//
// .bd-header-nav {
// padding-bottom: 1rem;
// margin-bottom: 2rem;
// border-bottom: .0625rem solid #eee;
//
// .nav-link {
// display: inline-block;
// padding: 1.2rem .75rem;
//
// &:hover {
// background-color: transparent;
// }
// }
//
// @include media-breakpoint-up(sm) {
// float: right;
// padding-bottom: 0;
// margin-bottom: 0;
// border-bottom: 0;
// }
// }
// //
// Masthead (headings and download button) // Masthead (headings and download button)
......
docs/index.html
+ 0
- 1
View file @ 95b0ec18
...@@ -5,7 +5,6 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f ...@@ -5,7 +5,6 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<main class="bd-masthead" id="content" role="main"> <main class="bd-masthead" id="content" role="main">
<div class="container"> <div class="container">
{% include nav-home.html %}
<span class="bd-booticon outline">B</span> <span class="bd-booticon outline">B</span>
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p> <p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
......
Supports Markdown
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