Skip to content

B
bootstrap
Commit 95b0ec18 authored by Mark Otto's avatar Mark Otto
Browse files
Options

new global navbar for all docs pages

parent 60a04563
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 72 deletions
docs/_includes/nav-home.html
View file @ 95b0ec18
<header class="bd-header" role="banner">
<a class="bd-header-mark hidden-xs-down" href="{{ site.baseurl }}">Bootstrap 4 Alpha</a>
<nav class="nav nav-pills bd-header-nav">
<a class="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-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
</nav>
<header class="navbar navbar-sm navbar-inverse navbar-fixed-top bd-navbar" role="banner">
<div class="container">
<nav class="nav navbar-nav">
<a class="nav-item nav-link" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</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-item nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
<a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
</nav>
</div>
</header>
docs/_layouts/default.html
View file @ 95b0ec18
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
{% include header.html %}
</head>
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
......@@ -11,6 +10,8 @@
</div>
</a>
{% include nav-home.html %}
{{ content }}
{% include footer.html %}
......
docs/_layouts/home.html
View file @ 95b0ec18
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
{% include header.html %}
</head>
<body class="bd-home">
......@@ -11,7 +10,8 @@
</div>
</a>
<!-- Page content of course! -->
{% include nav-home.html %}
{{ content }}
{% include footer.html %}
......
docs/assets/css/docs.min.css
View file @ 95b0ec18
......@@ -239,38 +239,17 @@
color: #fff;
background-color: rgba(0, 0, 0, 0.5); }
.bd-header {
padding-bottom: .5rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.bd-header:before,
.bd-header:after {
content: " ";
display: table; }
.bd-header:after {
clear: both; }
.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 {
.bd-navbar {
padding-top: .25rem;
padding-bottom: .25rem;
background-color: #2a2730; }
.bd-navbar .nav-link {
color: #8e869d; }
.bd-navbar .nav-link.active,
.bd-navbar .nav-link:hover,
.bd-navbar .nav-link:focus {
color: #fff;
background-color: transparent; }
@media (min-width: 34em) {
.bd-header-nav {
float: right;
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0; } }
.bd-masthead {
position: relative;
......
docs/assets/css/docs.min.css.map
View file @ 95b0ec18
This diff was suppressed by a .gitattributes entry.
docs/assets/scss/_homepage.scss
View file @ 95b0ec18
......@@ -29,43 +29,61 @@
// Homepage
//
.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;
.bd-navbar {
padding-top: .25rem;
padding-bottom: .25rem;
background-color: $bd-graphite;
.nav-link {
display: inline-block;
padding: 1.2rem .75rem;
color: $bd-graphite-light;
&:hover {
&.active,
&:hover,
&:focus {
color: #fff;
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)
......
docs/index.html
View file @ 95b0ec18
......@@ -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">
<div class="container">
{% include nav-home.html %}
<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>
......
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