0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00

Massive cleanup

- Simpler main nav on all pages
- Back to purple masthead on homepage instead of dark graphite
- Active link styles on the main nav
- Cleaned up sidebar nav
- New docs layout name
- Homepage copy edits
- Updated bright purple docs color
This commit is contained in:
Mark Otto 2015-08-14 22:45:55 -07:00
parent b388778f1f
commit c064eef67b
78 changed files with 484 additions and 602 deletions

View File

@ -362,6 +362,10 @@ module.exports = function (grunt) {
sass: { sass: {
files: 'scss/**/*.scss', files: 'scss/**/*.scss',
tasks: ['dist-css', 'docs'] tasks: ['dist-css', 'docs']
},
docs: {
files: 'docs/assets/scss/**/*.scss',
tasks: ['dist-css', 'docs']
} }
}, },

View File

@ -580,8 +580,8 @@ mark,
} }
.dl-horizontal { .dl-horizontal {
margin-right: -1.5rem; margin-right: -1.875rem;
margin-left: -1.5rem; margin-left: -1.875rem;
} }
.dl-horizontal:before, .dl-horizontal:before,
@ -734,8 +734,8 @@ pre code {
} }
.container { .container {
padding-right: .75rem; padding-right: .9375rem;
padding-left: .75rem; padding-left: .9375rem;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
@ -775,8 +775,8 @@ pre code {
} }
.container-fluid { .container-fluid {
padding-right: .75rem; padding-right: .9375rem;
padding-left: .75rem; padding-left: .9375rem;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
@ -792,8 +792,8 @@ pre code {
} }
.row { .row {
margin-right: -.75rem; margin-right: -.9375rem;
margin-left: -.75rem; margin-left: -.9375rem;
} }
.row:before, .row:before,
@ -809,8 +809,8 @@ pre code {
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
position: relative; position: relative;
min-height: 1px; min-height: 1px;
padding-right: .75rem; padding-right: .9375rem;
padding-left: .75rem; padding-left: .9375rem;
} }
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
@ -3596,31 +3596,13 @@ input[type="button"].btn-block {
list-style: none; list-style: none;
} }
.nav:before,
.nav:after {
display: table;
content: " ";
}
.nav:after {
clear: both;
}
.nav-item {
position: relative;
display: inline-block;
}
.nav-link { .nav-link {
display: inline-block; display: inline-block;
padding: .75em 1em;
line-height: 1;
} }
.nav-link:focus, .nav-link:focus,
.nav-link:hover { .nav-link:hover {
text-decoration: none; text-decoration: none;
background-color: #eceeef;
} }
.disabled > .nav-link, .disabled > .nav-link,
@ -3639,6 +3621,10 @@ input[type="button"].btn-block {
background-color: transparent; background-color: transparent;
} }
.nav-inline .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-tabs { .nav-tabs {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
@ -3654,6 +3640,7 @@ input[type="button"].btn-block {
.nav-tabs .nav-link { .nav-tabs .nav-link {
display: block; display: block;
padding: .75em 1em;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: .25rem .25rem 0 0; border-radius: .25rem .25rem 0 0;
} }
@ -3701,6 +3688,7 @@ input[type="button"].btn-block {
.nav-pills .nav-link { .nav-pills .nav-link {
display: block; display: block;
padding: .75em 1em;
border-radius: .25rem; border-radius: .25rem;
} }
@ -5974,39 +5962,39 @@ a.text-primary:hover {
} }
.text-success { .text-success {
color: #3c763d; color: #5cb85c;
} }
a.text-success:focus, a.text-success:focus,
a.text-success:hover { a.text-success:hover {
color: #2b542c; color: #449d44;
} }
.text-info { .text-info {
color: #31708f; color: #5bc0de;
} }
a.text-info:focus, a.text-info:focus,
a.text-info:hover { a.text-info:hover {
color: #245269; color: #31b0d5;
} }
.text-warning { .text-warning {
color: #8a6d3b; color: #f0ad4e;
} }
a.text-warning:focus, a.text-warning:focus,
a.text-warning:hover { a.text-warning:hover {
color: #66512c; color: #ec971f;
} }
.text-danger { .text-danger {
color: #a94442; color: #d9534f;
} }
a.text-danger:focus, a.text-danger:focus,
a.text-danger:hover { a.text-danger:hover {
color: #843534; color: #c9302c;
} }
.inverse { .inverse {
@ -6016,9 +6004,6 @@ a.text-danger:hover {
.bg-primary { .bg-primary {
color: #fff; color: #fff;
}
.bg-primary {
background-color: #0275d8; background-color: #0275d8;
} }
@ -6028,243 +6013,288 @@ a.bg-primary:hover {
} }
.bg-success { .bg-success {
background-color: #dff0d8; color: #fff;
background-color: #5cb85c;
} }
a.bg-success:focus, a.bg-success:focus,
a.bg-success:hover { a.bg-success:hover {
background-color: #c1e2b3; background-color: #449d44;
} }
.bg-info { .bg-info {
background-color: #d9edf7; color: #fff;
background-color: #5bc0de;
} }
a.bg-info:focus, a.bg-info:focus,
a.bg-info:hover { a.bg-info:hover {
background-color: #afd9ee; background-color: #31b0d5;
} }
.bg-warning { .bg-warning {
background-color: #fcf8e3; color: #fff;
background-color: #f0ad4e;
} }
a.bg-warning:focus, a.bg-warning:focus,
a.bg-warning:hover { a.bg-warning:hover {
background-color: #f7ecb5; background-color: #ec971f;
} }
.bg-danger { .bg-danger {
background-color: #f2dede; color: #fff;
background-color: #d9534f;
} }
a.bg-danger:focus, a.bg-danger:focus,
a.bg-danger:hover { a.bg-danger:hover {
background-color: #e4b9b9; background-color: #c9302c;
} }
.m-a-0 { .m-a-0 {
margin: 0; margin: 0 !important;
} }
.m-t-0 { .m-t-0 {
margin-top: 0; margin-top: 0 !important;
} }
.m-r-0 { .m-r-0 {
margin-right: 0; margin-right: 0 !important;
} }
.m-b-0 { .m-b-0 {
margin-bottom: 0; margin-bottom: 0 !important;
} }
.m-l-0 { .m-l-0 {
margin-left: 0; margin-left: 0 !important;
}
.m-x-0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.m-y-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
} }
.m-a { .m-a {
margin: 1rem; margin: 1rem !important;
} }
.m-t { .m-t {
margin-top: 1rem; margin-top: 1rem !important;
} }
.m-r { .m-r {
margin-right: 1rem; margin-right: 1rem !important;
} }
.m-b { .m-b {
margin-bottom: 1rem; margin-bottom: 1rem !important;
} }
.m-l { .m-l {
margin-left: 1rem; margin-left: 1rem !important;
} }
.m-x { .m-x {
margin-right: 1rem; margin-right: 1rem !important;
margin-left: 1rem; margin-left: 1rem !important;
} }
.m-y { .m-y {
margin-top: 1rem; margin-top: 1rem !important;
margin-bottom: 1rem; margin-bottom: 1rem !important;
}
.m-x-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.m-a-md {
margin: 1.5rem !important;
} }
.m-t-md { .m-t-md {
margin-top: 1.5rem; margin-top: 1.5rem !important;
} }
.m-r-md { .m-r-md {
margin-right: 1.5rem; margin-right: 1.5rem !important;
} }
.m-b-md { .m-b-md {
margin-bottom: 1.5rem; margin-bottom: 1.5rem !important;
} }
.m-l-md { .m-l-md {
margin-left: 1.5rem; margin-left: 1.5rem !important;
} }
.m-x-md { .m-x-md {
margin-right: 1.5rem; margin-right: 1.5rem !important;
margin-left: 1.5rem; margin-left: 1.5rem !important;
} }
.m-y-md { .m-y-md {
margin-top: 1.5rem; margin-top: 1.5rem !important;
margin-bottom: 1.5rem; margin-bottom: 1.5rem !important;
}
.m-a-lg {
margin: 3rem !important;
} }
.m-t-lg { .m-t-lg {
margin-top: 3rem; margin-top: 3rem !important;
} }
.m-r-lg { .m-r-lg {
margin-right: 3rem; margin-right: 3rem !important;
} }
.m-b-lg { .m-b-lg {
margin-bottom: 3rem; margin-bottom: 3rem !important;
} }
.m-l-lg { .m-l-lg {
margin-left: 3rem; margin-left: 3rem !important;
} }
.m-x-lg { .m-x-lg {
margin-right: 3rem; margin-right: 3rem !important;
margin-left: 3rem; margin-left: 3rem !important;
} }
.m-y-lg { .m-y-lg {
margin-top: 3rem; margin-top: 3rem !important;
margin-bottom: 3rem; margin-bottom: 3rem !important;
} }
.p-a-0 { .p-a-0 {
padding: 0; padding: 0 !important;
} }
.p-t-0 { .p-t-0 {
padding-top: 0; padding-top: 0 !important;
} }
.p-r-0 { .p-r-0 {
padding-right: 0; padding-right: 0 !important;
} }
.p-b-0 { .p-b-0 {
padding-bottom: 0; padding-bottom: 0 !important;
} }
.p-l-0 { .p-l-0 {
padding-left: 0; padding-left: 0 !important;
}
.p-x-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.p-y-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
} }
.p-a { .p-a {
padding: 1rem; padding: 1rem !important;
} }
.p-t { .p-t {
padding-top: 1rem; padding-top: 1rem !important;
} }
.p-r { .p-r {
padding-right: 1rem; padding-right: 1rem !important;
} }
.p-b { .p-b {
padding-bottom: 1rem; padding-bottom: 1rem !important;
} }
.p-l { .p-l {
padding-left: 1rem; padding-left: 1rem !important;
} }
.p-x { .p-x {
padding-right: 1rem; padding-right: 1rem !important;
padding-left: 1rem; padding-left: 1rem !important;
} }
.p-y { .p-y {
padding-top: 1rem; padding-top: 1rem !important;
padding-bottom: 1rem; padding-bottom: 1rem !important;
}
.p-a-md {
padding: 1.5rem !important;
} }
.p-t-md { .p-t-md {
padding-top: 1.5rem; padding-top: 1.5rem !important;
} }
.p-r-md { .p-r-md {
padding-right: 1.5rem; padding-right: 1.5rem !important;
} }
.p-b-md { .p-b-md {
padding-bottom: 1.5rem; padding-bottom: 1.5rem !important;
} }
.p-l-md { .p-l-md {
padding-left: 1.5rem; padding-left: 1.5rem !important;
} }
.p-x-md { .p-x-md {
padding-right: 1.5rem; padding-right: 1.5rem !important;
padding-left: 1.5rem; padding-left: 1.5rem !important;
} }
.p-y-md { .p-y-md {
padding-top: 1.5rem; padding-top: 1.5rem !important;
padding-bottom: 1.5rem; padding-bottom: 1.5rem !important;
}
.p-a-lg {
padding: 3rem !important;
} }
.p-t-lg { .p-t-lg {
padding-top: 3rem; padding-top: 3rem !important;
} }
.p-r-lg { .p-r-lg {
padding-right: 3rem; padding-right: 3rem !important;
} }
.p-b-lg { .p-b-lg {
padding-bottom: 3rem; padding-bottom: 3rem !important;
} }
.p-l-lg { .p-l-lg {
padding-left: 3rem; padding-left: 3rem !important;
} }
.p-x-lg { .p-x-lg {
padding-right: 3rem; padding-right: 3rem !important;
padding-left: 3rem; padding-left: 3rem !important;
} }
.p-y-lg { .p-y-lg {
padding-top: 3rem; padding-top: 3rem !important;
padding-bottom: 3rem; padding-bottom: 3rem !important;
} }
.pos-f-t { .pos-f-t {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -20,7 +20,8 @@
<link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet"> <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
<!-- Google Web fonts --> <!-- Google Web fonts -->
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,400italic,600' rel='stylesheet' type='text/css'>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script> <script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>

View File

@ -1,9 +1,11 @@
<header class="navbar navbar-sm navbar-inverse navbar-static-top bd-navbar" role="banner"> <header class="navbar navbar-sm navbar-defeault navbar-static-top bd-navbar" role="banner">
<nav class="nav navbar-nav"> <div class="container-fluid">
<a class="nav-item nav-link" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a> <nav class="nav nav-inline">
<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 {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
<a class="nav-item nav-link" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> <a class="nav-item nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
<a class="nav-item nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</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.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> <a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
</nav> </nav>
</div>
</header> </header>

36
docs/_layouts/docs.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
{% include header.html %}
</head>
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">Skip to main content</span>
</div>
</a>
{% include nav-home.html %}
<div class="bd-pageheader text-xs-center text-sm-left">
<div class="container">
{% include page-headers.html %}
{% include ads.html %}
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 col-md-push-9 bd-sidebar">
{% include nav-docs.html %}
</div>
<div class="col-md-9 col-md-pull-3 bd-content">
<h1 class="bd-title">{{ page.title }}</h1>
{{ content }}
</div>
</div>
</div>
{% include footer.html %}
</body>
</html>

View File

@ -1,22 +0,0 @@
---
layout: default
---
<div class="bd-pageheader text-xs-center text-sm-left">
<div class="container">
{% include page-headers.html %}
{% include ads.html %}
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 col-md-push-9 bd-sidebar">
{% include nav-docs.html %}
</div>
<div class="col-md-9 col-md-pull-3 bd-content">
<h1 class="bd-title">{{ page.title }}</h1>
{{ content }}
</div>
</div>
</div>

View File

@ -2,8 +2,16 @@
layout: default layout: default
--- ---
<div class="container bd-content"> <div class="bd-pageheader text-xs-center text-sm-left">
<div class="container">
<h1>{{ page.title }}</h1>
<p class="lead">
Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
</p>
{% include ads.html %} {% include ads.html %}
<h1 class="bd-title">{{ page.title }}</h1> </div>
</div>
<div class="container bd-content">
{{ content }} {{ content }}
</div> </div>

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Brand guidelines title: Brand guidelines
group: about group: about
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: History title: History
group: about group: about
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: License FAQs title: License FAQs
group: about group: about
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Team title: Team
group: about group: about
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Translations title: Translations
group: about group: about
--- ---

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -3,43 +3,14 @@
// Custom buttons for the docs. // Custom buttons for the docs.
.btn-bs { .btn-bs {
color: $bd-purple; color: $bd-purple-bright;
border-color: $bd-purple; border-color: $bd-purple-bright;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: #fff; color: #fff;
background-color:$bd-purple; background-color:$bd-purple-bright;
border-color: $bd-purple; border-color: $bd-purple-bright;
} }
} }
// .btn-outline {
// color: $bd-purple;
// background-color: transparent;
// border-color: $bd-purple;
//
// &:hover,
// &:focus,
// &:active {
// color: #fff;
// background-color:$bd-purple;
// border-color: $bd-purple;
// }
// }
//
// .btn-outline-inverse {
// color: #fff;
// background-color: transparent;
// border-color: $bd-purple-light;
//
// &:hover,
// &:focus,
// &:active {
// color: $bd-purple;
// text-shadow: none;
// background-color: #fff;
// border-color: #fff;
// }
// }

View File

@ -1,38 +1,12 @@
// //
// Home navigation // Main navbar
//
.bd-nav-home {
margin-bottom: 0;
background-color: #563d7c;
border-bottom: 0;
.navbar-brand > a {
font-weight: 500;
color: #fff;
}
.nav-link {
font-weight: 500;
color: #cdbfe3;
&:hover,
&:focus {
color: #fff;
background-color: rgba(0,0,0,.5);
}
}
}
//
// Homepage
// //
.bd-navbar { .bd-navbar {
padding: .25rem; padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 0; margin-bottom: 0;
background-color: $bd-graphite; // background-color: $bd-graphite;
.nav-link { .nav-link {
color: $bd-graphite-light; color: $bd-graphite-light;
@ -40,49 +14,15 @@
&.active, &.active,
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: $gray-dark;
background-color: transparent; background-color: transparent;
} }
}
}
// &.active {
// .bd-header { font-weight: 500;
// @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;
// }
// }
// //
@ -92,15 +32,15 @@
.bd-masthead { .bd-masthead {
position: relative; position: relative;
padding: ($grid-gutter-width / 2); padding: ($grid-gutter-width / 2);
color: $bd-graphite-light; color: $bd-purple-light;
text-align: center; text-align: center;
background: -webkit-linear-gradient(to bottom, $bd-graphite, lighten($bd-graphite, 7.5%)); background: -webkit-linear-gradient(135deg, darken($bd-purple, 15%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
background: linear-gradient(to bottom, $bd-graphite, lighten($bd-graphite, 7.5%)); background: linear-gradient(135deg, darken($bd-purple, 15%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
.bd-booticon { .bd-booticon {
margin: 0 auto 2rem; margin: 0 auto 2rem;
color: $bd-purple-bright; color: $bd-purple-light;
border-color: $bd-purple-bright; border-color: $bd-purple-light;
} }
h1 { h1 {
@ -112,7 +52,8 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 2rem; margin-bottom: 2rem;
font-size: 1.25rem; font-size: 1rem;
color: #fff;
} }
.version { .version {
@ -174,7 +115,7 @@
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
.lead { .lead {
width: 80%; width: 85%;
font-size: 2rem; font-size: 2rem;
} }
} }

View File

@ -3,65 +3,14 @@
// //
.bd-sidebar { .bd-sidebar {
// padding: 0; @include media-breakpoint-up(md) {
// margin-bottom: 0; padding-left: 1rem;
// background-color: #fafafa; }
// .navbar-toggler {
// position: absolute;
// top: 1rem;
// right: 0;
// z-index: 5;
// }
} }
// .bd-sidebar .navbar-header {
// float: none;
// margin-right: -15px;
// }
//
// .bd-sidebar .navbar-collapse {
// padding: 0;
// border: 0;
// }
// @media (min-width: 992px) {
// .bd-docs {
// margin-left: 240px;
// }
// .bd-sidebar {
// position: fixed;
// top: 3.7rem;
// bottom: 0;
// left: 0;
// width: 240px;
// overflow-y: auto;
// border-right: 1px solid #eee;
// -webkit-transform: translated3d(0,0,0); // Ensure proper scrolling of sidebar
// }
// }
//
// .bd-sidebar .navbar-brand {
// display: block;
// float: none;
// height: auto;
// padding: 1.55rem 1.25rem;
// font-size: 20px;
// font-weight: 500;
// line-height: 1;
// // color: #fff;
// }
// .bd-sidebar-brand:hover,
// .bd-sidebar-brand:focus {
// // color: #fff;
// text-decoration: none;
// }
.bd-search { .bd-search {
position: relative; position: relative;
margin-right: 1.25rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
margin-left: 1.25rem;
.form-control { .form-control {
height: 2.45rem; height: 2.45rem;
@ -108,21 +57,17 @@
.bd-toc-link { .bd-toc-link {
display: block; display: block;
padding: .25rem 1.25rem; padding: .25rem .75rem;
color: $gray; color: $gray;
// font-size: 1rem;
// color: #fff;
} }
.bd-toc-link:hover, .bd-toc-link:hover,
.bd-toc-link:focus { .bd-toc-link:focus {
// color: $bd-yellow;
color: $brand-primary; color: $brand-primary;
text-decoration: none; text-decoration: none;
} }
.active > .bd-toc-link { .active > .bd-toc-link {
font-weight: 500; font-weight: 500;
color: $gray-dark; color: $gray-dark;
// color: $bd-yellow;
} }
.active > .bd-sidenav { .active > .bd-sidenav {
display: block; display: block;
@ -142,14 +87,13 @@
// All levels of nav // All levels of nav
.bd-sidebar .nav > li > a { .bd-sidebar .nav > li > a {
display: block; display: block;
padding: .25rem 1.25rem; padding: .25rem .75rem;
font-size: 90%; font-size: 90%;
color: #99979c; color: #99979c;
} }
.bd-sidebar .nav > li > a:hover, .bd-sidebar .nav > li > a:hover,
.bd-sidebar .nav > li > a:focus { .bd-sidebar .nav > li > a:focus {
color: $brand-primary; color: $brand-primary;
// color: $bd-yellow;
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
} }
@ -158,34 +102,5 @@
.bd-sidebar .nav > .active:focus > a { .bd-sidebar .nav > .active:focus > a {
font-weight: 500; font-weight: 500;
color: $gray-dark; color: $gray-dark;
// color: $bd-yellow;
background-color: transparent; background-color: transparent;
} }
// Nav: second level (shown on .active)
.bd-sidebar .nav .nav {
display: none; // Hide by default, but at >768px, show it
padding-bottom: .75rem;
}
.bd-sidebar .nav .nav > li > a {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2rem;
font-size: 75%;
font-weight: normal;
}
.bd-sidebar .nav .nav > .active > a,
.bd-sidebar .nav .nav > .active:hover > a,
.bd-sidebar .nav .nav > .active:focus > a {
font-weight: 500;
}
.bd-sidebar .nav > .active > .nav {
display: block;
}
.bd-sidebar .nav .nav > li > a {
padding-top: .125rem;
padding-bottom: .125rem;
padding-left: 2rem;
font-size: 80%;
}

View File

@ -28,7 +28,7 @@
// Local docs variables // Local docs variables
$bd-purple: #563d7c; $bd-purple: #563d7c;
$bd-purple-bright: lighten(saturate($bd-purple, 25%), 25%); $bd-purple-bright: lighten(saturate($bd-purple, 15%), 25%);
$bd-purple-light: #cdbfe3; $bd-purple-light: #cdbfe3;
$bd-graphite: #2a2730; $bd-graphite: #2a2730;
$bd-graphite-light: lighten($bd-graphite, 40%); $bd-graphite-light: lighten($bd-graphite, 40%);

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Alerts title: Alerts
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Breadcrumb title: Breadcrumb
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Button dropdown title: Button dropdown
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Button group title: Button group
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Buttons title: Buttons
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Cards title: Cards
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Carousel title: Carousel
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Collapse title: Collapse
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Dropdowns title: Dropdowns
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Forms title: Forms
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Input group title: Input group
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Jumbotron title: Jumbotron
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Labels title: Labels
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: List group title: List group
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Modal title: Modal
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Navbar title: Navbar
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Navs title: Navs
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Pagination title: Pagination
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Popovers title: Popovers
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Progress title: Progress
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Srollspy title: Srollspy
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Tooltips title: Tooltips
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Utility classes title: Utility classes
group: components group: components
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Code title: Code
group: content group: content
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Images title: Images
group: content group: content
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Images title: Images
group: content group: content
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Reboot title: Reboot
group: content group: content
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Tables title: Tables
group: content group: content
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Typography title: Typography
group: content group: content
--- ---

View File

@ -580,8 +580,8 @@ mark,
} }
.dl-horizontal { .dl-horizontal {
margin-right: -1.5rem; margin-right: -1.875rem;
margin-left: -1.5rem; margin-left: -1.875rem;
} }
.dl-horizontal:before, .dl-horizontal:before,
@ -734,8 +734,8 @@ pre code {
} }
.container { .container {
padding-right: .75rem; padding-right: .9375rem;
padding-left: .75rem; padding-left: .9375rem;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
@ -775,8 +775,8 @@ pre code {
} }
.container-fluid { .container-fluid {
padding-right: .75rem; padding-right: .9375rem;
padding-left: .75rem; padding-left: .9375rem;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
@ -792,8 +792,8 @@ pre code {
} }
.row { .row {
margin-right: -.75rem; margin-right: -.9375rem;
margin-left: -.75rem; margin-left: -.9375rem;
} }
.row:before, .row:before,
@ -809,8 +809,8 @@ pre code {
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
position: relative; position: relative;
min-height: 1px; min-height: 1px;
padding-right: .75rem; padding-right: .9375rem;
padding-left: .75rem; padding-left: .9375rem;
} }
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
@ -3596,31 +3596,13 @@ input[type="button"].btn-block {
list-style: none; list-style: none;
} }
.nav:before,
.nav:after {
display: table;
content: " ";
}
.nav:after {
clear: both;
}
.nav-item {
position: relative;
display: inline-block;
}
.nav-link { .nav-link {
display: inline-block; display: inline-block;
padding: .75em 1em;
line-height: 1;
} }
.nav-link:focus, .nav-link:focus,
.nav-link:hover { .nav-link:hover {
text-decoration: none; text-decoration: none;
background-color: #eceeef;
} }
.disabled > .nav-link, .disabled > .nav-link,
@ -3639,6 +3621,10 @@ input[type="button"].btn-block {
background-color: transparent; background-color: transparent;
} }
.nav-inline .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-tabs { .nav-tabs {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
@ -3654,6 +3640,7 @@ input[type="button"].btn-block {
.nav-tabs .nav-link { .nav-tabs .nav-link {
display: block; display: block;
padding: .75em 1em;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: .25rem .25rem 0 0; border-radius: .25rem .25rem 0 0;
} }
@ -3701,6 +3688,7 @@ input[type="button"].btn-block {
.nav-pills .nav-link { .nav-pills .nav-link {
display: block; display: block;
padding: .75em 1em;
border-radius: .25rem; border-radius: .25rem;
} }
@ -5974,39 +5962,39 @@ a.text-primary:hover {
} }
.text-success { .text-success {
color: #3c763d; color: #5cb85c;
} }
a.text-success:focus, a.text-success:focus,
a.text-success:hover { a.text-success:hover {
color: #2b542c; color: #449d44;
} }
.text-info { .text-info {
color: #31708f; color: #5bc0de;
} }
a.text-info:focus, a.text-info:focus,
a.text-info:hover { a.text-info:hover {
color: #245269; color: #31b0d5;
} }
.text-warning { .text-warning {
color: #8a6d3b; color: #f0ad4e;
} }
a.text-warning:focus, a.text-warning:focus,
a.text-warning:hover { a.text-warning:hover {
color: #66512c; color: #ec971f;
} }
.text-danger { .text-danger {
color: #a94442; color: #d9534f;
} }
a.text-danger:focus, a.text-danger:focus,
a.text-danger:hover { a.text-danger:hover {
color: #843534; color: #c9302c;
} }
.inverse { .inverse {
@ -6016,9 +6004,6 @@ a.text-danger:hover {
.bg-primary { .bg-primary {
color: #fff; color: #fff;
}
.bg-primary {
background-color: #0275d8; background-color: #0275d8;
} }
@ -6028,243 +6013,288 @@ a.bg-primary:hover {
} }
.bg-success { .bg-success {
background-color: #dff0d8; color: #fff;
background-color: #5cb85c;
} }
a.bg-success:focus, a.bg-success:focus,
a.bg-success:hover { a.bg-success:hover {
background-color: #c1e2b3; background-color: #449d44;
} }
.bg-info { .bg-info {
background-color: #d9edf7; color: #fff;
background-color: #5bc0de;
} }
a.bg-info:focus, a.bg-info:focus,
a.bg-info:hover { a.bg-info:hover {
background-color: #afd9ee; background-color: #31b0d5;
} }
.bg-warning { .bg-warning {
background-color: #fcf8e3; color: #fff;
background-color: #f0ad4e;
} }
a.bg-warning:focus, a.bg-warning:focus,
a.bg-warning:hover { a.bg-warning:hover {
background-color: #f7ecb5; background-color: #ec971f;
} }
.bg-danger { .bg-danger {
background-color: #f2dede; color: #fff;
background-color: #d9534f;
} }
a.bg-danger:focus, a.bg-danger:focus,
a.bg-danger:hover { a.bg-danger:hover {
background-color: #e4b9b9; background-color: #c9302c;
} }
.m-a-0 { .m-a-0 {
margin: 0; margin: 0 !important;
} }
.m-t-0 { .m-t-0 {
margin-top: 0; margin-top: 0 !important;
} }
.m-r-0 { .m-r-0 {
margin-right: 0; margin-right: 0 !important;
} }
.m-b-0 { .m-b-0 {
margin-bottom: 0; margin-bottom: 0 !important;
} }
.m-l-0 { .m-l-0 {
margin-left: 0; margin-left: 0 !important;
}
.m-x-0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.m-y-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
} }
.m-a { .m-a {
margin: 1rem; margin: 1rem !important;
} }
.m-t { .m-t {
margin-top: 1rem; margin-top: 1rem !important;
} }
.m-r { .m-r {
margin-right: 1rem; margin-right: 1rem !important;
} }
.m-b { .m-b {
margin-bottom: 1rem; margin-bottom: 1rem !important;
} }
.m-l { .m-l {
margin-left: 1rem; margin-left: 1rem !important;
} }
.m-x { .m-x {
margin-right: 1rem; margin-right: 1rem !important;
margin-left: 1rem; margin-left: 1rem !important;
} }
.m-y { .m-y {
margin-top: 1rem; margin-top: 1rem !important;
margin-bottom: 1rem; margin-bottom: 1rem !important;
}
.m-x-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.m-a-md {
margin: 1.5rem !important;
} }
.m-t-md { .m-t-md {
margin-top: 1.5rem; margin-top: 1.5rem !important;
} }
.m-r-md { .m-r-md {
margin-right: 1.5rem; margin-right: 1.5rem !important;
} }
.m-b-md { .m-b-md {
margin-bottom: 1.5rem; margin-bottom: 1.5rem !important;
} }
.m-l-md { .m-l-md {
margin-left: 1.5rem; margin-left: 1.5rem !important;
} }
.m-x-md { .m-x-md {
margin-right: 1.5rem; margin-right: 1.5rem !important;
margin-left: 1.5rem; margin-left: 1.5rem !important;
} }
.m-y-md { .m-y-md {
margin-top: 1.5rem; margin-top: 1.5rem !important;
margin-bottom: 1.5rem; margin-bottom: 1.5rem !important;
}
.m-a-lg {
margin: 3rem !important;
} }
.m-t-lg { .m-t-lg {
margin-top: 3rem; margin-top: 3rem !important;
} }
.m-r-lg { .m-r-lg {
margin-right: 3rem; margin-right: 3rem !important;
} }
.m-b-lg { .m-b-lg {
margin-bottom: 3rem; margin-bottom: 3rem !important;
} }
.m-l-lg { .m-l-lg {
margin-left: 3rem; margin-left: 3rem !important;
} }
.m-x-lg { .m-x-lg {
margin-right: 3rem; margin-right: 3rem !important;
margin-left: 3rem; margin-left: 3rem !important;
} }
.m-y-lg { .m-y-lg {
margin-top: 3rem; margin-top: 3rem !important;
margin-bottom: 3rem; margin-bottom: 3rem !important;
} }
.p-a-0 { .p-a-0 {
padding: 0; padding: 0 !important;
} }
.p-t-0 { .p-t-0 {
padding-top: 0; padding-top: 0 !important;
} }
.p-r-0 { .p-r-0 {
padding-right: 0; padding-right: 0 !important;
} }
.p-b-0 { .p-b-0 {
padding-bottom: 0; padding-bottom: 0 !important;
} }
.p-l-0 { .p-l-0 {
padding-left: 0; padding-left: 0 !important;
}
.p-x-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.p-y-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
} }
.p-a { .p-a {
padding: 1rem; padding: 1rem !important;
} }
.p-t { .p-t {
padding-top: 1rem; padding-top: 1rem !important;
} }
.p-r { .p-r {
padding-right: 1rem; padding-right: 1rem !important;
} }
.p-b { .p-b {
padding-bottom: 1rem; padding-bottom: 1rem !important;
} }
.p-l { .p-l {
padding-left: 1rem; padding-left: 1rem !important;
} }
.p-x { .p-x {
padding-right: 1rem; padding-right: 1rem !important;
padding-left: 1rem; padding-left: 1rem !important;
} }
.p-y { .p-y {
padding-top: 1rem; padding-top: 1rem !important;
padding-bottom: 1rem; padding-bottom: 1rem !important;
}
.p-a-md {
padding: 1.5rem !important;
} }
.p-t-md { .p-t-md {
padding-top: 1.5rem; padding-top: 1.5rem !important;
} }
.p-r-md { .p-r-md {
padding-right: 1.5rem; padding-right: 1.5rem !important;
} }
.p-b-md { .p-b-md {
padding-bottom: 1.5rem; padding-bottom: 1.5rem !important;
} }
.p-l-md { .p-l-md {
padding-left: 1.5rem; padding-left: 1.5rem !important;
} }
.p-x-md { .p-x-md {
padding-right: 1.5rem; padding-right: 1.5rem !important;
padding-left: 1.5rem; padding-left: 1.5rem !important;
} }
.p-y-md { .p-y-md {
padding-top: 1.5rem; padding-top: 1.5rem !important;
padding-bottom: 1.5rem; padding-bottom: 1.5rem !important;
}
.p-a-lg {
padding: 3rem !important;
} }
.p-t-lg { .p-t-lg {
padding-top: 3rem; padding-top: 3rem !important;
} }
.p-r-lg { .p-r-lg {
padding-right: 3rem; padding-right: 3rem !important;
} }
.p-b-lg { .p-b-lg {
padding-bottom: 3rem; padding-bottom: 3rem !important;
} }
.p-l-lg { .p-l-lg {
padding-left: 3rem; padding-left: 3rem !important;
} }
.p-x-lg { .p-x-lg {
padding-right: 3rem; padding-right: 3rem !important;
padding-left: 3rem; padding-left: 3rem !important;
} }
.p-y-lg { .p-y-lg {
padding-top: 3rem; padding-top: 3rem !important;
padding-bottom: 3rem; padding-bottom: 3rem !important;
} }
.pos-f-t { .pos-f-t {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -3,8 +3,6 @@ layout: simple
title: Examples title: Examples
--- ---
Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
[Download the Bootstrap source code]({{ site.download.source }}) to snag these examples. [Download the Bootstrap source code]({{ site.download.source }}) to snag these examples.
## Framework ## Framework

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Approach title: Approach
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Icon fonts title: Icon fonts
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Extend title: Extend
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Accessibility title: Accessibility
group: getting-started group: getting-started
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Best practices title: Best practices
group: getting-started group: getting-started
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Browsers and devices title: Browsers and devices
group: getting-started group: getting-started
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Build tools title: Build tools
group: getting-started group: getting-started
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Contents title: Contents
group: getting-started group: getting-started
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Download title: Download
group: getting-started group: getting-started
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Flexbox title: Flexbox
group: getting-started group: getting-started
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Introduction title: Introduction
group: getting-started group: getting-started
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: JavaScript title: JavaScript
group: getting-started group: getting-started
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Customization options title: Customization options
group: getting-started group: getting-started
--- ---

View File

@ -1,53 +0,0 @@
---
layout: page
title: Quick start
group: getting-started
---
Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download)
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
{% highlight html %}
<link rel="stylesheet" href="{{ site.cdn.css }}">
{% endhighlight %}
Add our JavaScript plugins and jQuery near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery first as our code depends on it.
{% highlight html %}
<script src="{{ site.cdn.jquery }}"></script>
<script src="{{ site.cdn.js }}"></script>
{% endhighlight %}
And that's it—you're your way to a fully Bootstrapped site. If you're at all unsure about the general page structure, keep reading for an example page template.
## Page template
Be sure to have your pages set up with the latest design and development standards. That means:
* Using an HTML5 doctype
* Forcing Internet Explorer to use its latest rendering mode ([read more]())
* And, utilizing the viewport meta tag.
Put it all together and your pages should look like this:
{% highlight html %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{{ site.cdn.css }}">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery first, then Bootstrap JS. -->
<script src="{{ site.cdn.jquery }}"></script>
<script src="{{ site.cdn.js }}"></script>
</body>
</html>
{% endhighlight %}
That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/scaffolding) to start laying out your site's content before adding components.

View File

@ -5,9 +5,8 @@ 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">
<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 in the world for building responsive, mobile-first projects on the web.</p>
<p class="lead"> <p class="lead">
<a href="{{ site.baseurl }}/getting-started/download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a> <a href="{{ site.baseurl }}/getting-started/download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>
</p> </p>
@ -19,25 +18,16 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<div class="bd-featurette"> <div class="bd-featurette">
<div class="container"> <div class="container">
<h2 class="bd-featurette-title">Easy to get started.</h2> <h2 class="bd-featurette-title">Easy to get started.</h2>
<p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the <a href="#">Bootstrap CDN</a>.</p> <p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap CDN.</p>
<!-- <hr class="half-rule"> -->
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<h4>Managed dependencies</h4> <h4>Managed dependencies</h4>
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our Gruntfile and readme.</p> <p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our Gruntfile and readme.</p>
<p> <p>
<a class="btn btn-bs btn-outline" href="">View install methods</a> <a class="btn btn-bs btn-outline" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
</p> </p>
</div> </div>
<!-- <div class="col-sm-4">
<h4>Custom builds</h4>
<p>Need just a part of Bootstrap? Download a custom build of the compiled CSS and JS.</p>
<a class="btn btn-secondary" href="#">Reboot</a>
<a class="btn btn-secondary" href="#">Grid system</a>
<a class="btn btn-secondary" href="#">Flexbox</a>
</div> -->
<div class="col-sm-6"> <div class="col-sm-6">
<h4>Bootstrap CDN</h4> <h4>Bootstrap CDN</h4>
<p>When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the Max CDN folks.</p> <p>When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the Max CDN folks.</p>
@ -50,8 +40,8 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<hr class="half-rule"> <hr class="half-rule">
<p class="lead">More customized builds of Bootstrap's CSS and JS are also available.</p> <p><strong>Looking for something simpler?</strong> Customized builds of Bootstrap's CSS and JS are also available.</p>
<a href="{{ site.baseurl }}/getting-started/download" class="btn btn-bs btn-outline btn-lg">More download options</a> <a href="{{ site.baseurl }}/getting-started/download/#custom-builds" class="btn btn-bs btn-outline">More download options</a>
</div> </div>
</div> </div>
@ -60,8 +50,6 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<h2 class="bd-featurette-title">Designed for everyone, everywhere.</h2> <h2 class="bd-featurette-title">Designed for everyone, everywhere.</h2>
<p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p> <p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
<hr class="half-rule">
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<img src="assets/img/sass-less.png" alt="Sass support" class="img-responsive"> <img src="assets/img/sass-less.png" alt="Sass support" class="img-responsive">
@ -82,8 +70,8 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<hr class="half-rule"> <hr class="half-rule">
<p class="lead">Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p> <p><strong>Bootstrap is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.</p>
<a href="{{ site.repo }}" class="btn btn-bs btn-outline btn-lg">View the GitHub project</a> <a href="{{ site.repo }}" class="btn btn-bs btn-outline">View the GitHub project</a>
</div> </div>
</div> </div>
@ -92,8 +80,6 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<h2 class="bd-featurette-title">Built with Bootstrap.</h2> <h2 class="bd-featurette-title">Built with Bootstrap.</h2>
<p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p> <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p>
<hr class="half-rule">
<div class="row bd-featured-sites"> <div class="row bd-featured-sites">
{% for showcase in site.data.showcase %} {% for showcase in site.data.showcase %}
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
@ -106,7 +92,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<hr class="half-rule"> <hr class="half-rule">
<p class="lead">We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p> <p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
<a href="{{ site.expo }}" class="btn btn-bs btn-outline btn-lg">Explore the Expo</a> <a href="{{ site.expo }}" class="btn btn-bs btn-outline">Explore the Expo</a>
</div> </div>
</div> </div>

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Grid system title: Grid system
group: layout group: layout
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Media object title: Media object
group: layout group: layout
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Overview title: Overview
group: layout group: layout
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Responsive utilities title: Responsive utilities
group: layout group: layout
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Scaffolding title: Scaffolding
group: layout group: layout
--- ---

View File

@ -1,5 +1,5 @@
--- ---
layout: page layout: docs
title: Migrating to v4 title: Migrating to v4
group: migration group: migration
--- ---

View File

@ -2,34 +2,20 @@
// Navs // Navs
// -------------------------------------------------- // --------------------------------------------------
//
// Base styles
//
.nav { .nav {
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
list-style: none; list-style: none;
@include clearfix();
}
.nav-item {
position: relative;
display: inline-block;
} }
.nav-link { .nav-link {
display: inline-block; display: inline-block;
padding: $nav-link-padding;
line-height: 1;
@include hover-focus { @include hover-focus {
text-decoration: none; text-decoration: none;
background-color: $nav-link-hover-bg;
} }
// Disabled state sets text to gray and nukes hover/tab effects // Disabled state lightens text and removes hover/tab effects
.disabled > &, .disabled > &,
&.disabled { &.disabled {
color: $nav-disabled-link-color; color: $nav-disabled-link-color;
@ -43,6 +29,53 @@
} }
// Nav inline
.nav-inline {
.nav-link + .nav-link {
margin-left: 1rem;
}
}
//
// Base styles
//
// .nav {
// padding-left: 0;
// margin-bottom: 0;
// list-style: none;
// @include clearfix();
// }
//
// .nav-item {
// position: relative;
// display: inline-block;
// }
//
// .nav-link {
// display: inline-block;
//
// @include hover-focus {
// text-decoration: none;
// background-color: $nav-link-hover-bg;
// }
//
// // Disabled state sets text to gray and nukes hover/tab effects
// .disabled > &,
// &.disabled {
// color: $nav-disabled-link-color;
//
// @include plain-hover-focus {
// color: $nav-disabled-link-hover-color;
// cursor: $cursor-disabled;
// background-color: transparent;
// }
// }
// }
// //
// Tabs // Tabs
// //
@ -62,6 +95,7 @@
.nav-link { .nav-link {
display: block; display: block;
padding: $nav-link-padding;
border: 1px solid transparent; border: 1px solid transparent;
@include border-radius($border-radius $border-radius 0 0); @include border-radius($border-radius $border-radius 0 0);
@ -107,6 +141,7 @@
.nav-link { .nav-link {
display: block; display: block;
padding: $nav-link-padding;
@include border-radius($nav-pills-border-radius); @include border-radius($nav-pills-border-radius);
} }

View File

@ -115,7 +115,7 @@ $container-max-widths: (
// Set the number of columns and specify the width of the gutters. // Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default; $grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default; $grid-gutter-width: 1.875rem !default; // 30px
// Typography // Typography