rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases Activity

new global navbar for all docs pages

Browse Source
This commit is contained in:
Mark Otto 2015-08-04 23:39:51 -07:00
parent 60a045634c
commit 95b0ec18f4
7 changed files with 71 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/_includes/nav-home.html
View File

@ -1,9 +1,10 @@
<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>

3
docs/_layouts/default.html
View File

@ -1,7 +1,6 @@
<!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 @@
</div> </div>
</a> </a>
{% include nav-home.html %}
{{ content }} {{ content }}
{% include footer.html %} {% include footer.html %}

4
docs/_layouts/home.html
View File

@ -1,7 +1,6 @@
<!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 @@
</div> </div>
</a> </a>
<!-- Page content of course! --> {% include nav-home.html %}
{{ content }} {{ content }}
{% include footer.html %} {% include footer.html %}

41
docs/assets/css/docs.min.css vendored
View File

@ -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;

2
docs/assets/css/docs.min.css.map
View File

File diff suppressed because one or more lines are too long

76
docs/assets/scss/_homepage.scss
View File

@ -29,42 +29,60 @@
// 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; // .bd-header {
padding-bottom: 0; // @include clearfix;
margin-bottom: 0; // padding-bottom: .5rem;
border-bottom: 0; // 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;
// }
// }
// //

1
docs/index.html
View File

@ -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>