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

Merge branch 'v4' of github.com:twbs/derpstrap into v4

Browse Source
This commit is contained in:
Jacob Thornton 2015-08-18 17:02:24 -07:00
commit e07071416b
79 changed files with 1135 additions and 1652 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_config.yml
View File

@ -18,6 +18,9 @@ url: http://getbootstrap.com
encoding: UTF-8 encoding: UTF-8
exclude: [assets/scss/] exclude: [assets/scss/]
gems:
- jekyll-redirect-from
# Custom vars # Custom vars
current_version: 4.0.0-alpha current_version: 4.0.0-alpha
repo: https://github.com/twbs/bootstrap repo: https://github.com/twbs/bootstrap

275
dist/css/bootstrap.css
View File

@ -495,11 +495,11 @@ h6, .h6 {
} }
h1, .h1 { h1, .h1 {
font-size: 2.75rem; font-size: 2.5rem;
} }
h2, .h2 { h2, .h2 {
font-size: 2.25rem; font-size: 2rem;
} }
h3, .h3 { h3, .h3 {
@ -1859,7 +1859,7 @@ pre code {
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
padding: .5rem .75rem; padding: .375rem .75rem;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
color: #55595c; color: #55595c;
@ -1917,7 +1917,7 @@ fieldset[disabled] .form-control {
} }
.form-control-label { .form-control-label {
padding: .5625rem .75rem; padding: .4375rem .75rem;
margin-bottom: 0; margin-bottom: 0;
} }
@ -1926,7 +1926,7 @@ fieldset[disabled] .form-control {
input[type="time"].form-control, input[type="time"].form-control,
input[type="datetime-local"].form-control, input[type="datetime-local"].form-control,
input[type="month"].form-control { input[type="month"].form-control {
line-height: 2.625rem; line-height: 2.375rem;
} }
input[type="date"].input-sm, input[type="date"].input-sm,
.input-group-sm input[type="date"].form-control, .input-group-sm input[type="date"].form-control,
@ -1951,9 +1951,9 @@ fieldset[disabled] .form-control {
} }
.form-control-static { .form-control-static {
min-height: 2.625rem; min-height: 2.375rem;
padding-top: .5625rem; padding-top: .4375rem;
padding-bottom: .5625rem; padding-bottom: .4375rem;
margin-bottom: 0; margin-bottom: 0;
} }
@ -1971,7 +1971,6 @@ fieldset[disabled] .form-control {
.form-control-sm, .input-group-sm > .form-control, .form-control-sm, .input-group-sm > .form-control,
.input-group-sm > .input-group-addon, .input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn { .input-group-sm > .input-group-btn > .btn {
height: 1.95rem;
padding: .275rem .75rem; padding: .275rem .75rem;
font-size: .85rem; font-size: .85rem;
line-height: 1.5; line-height: 1.5;
@ -1981,8 +1980,7 @@ fieldset[disabled] .form-control {
.form-control-lg, .input-group-lg > .form-control, .form-control-lg, .input-group-lg > .form-control,
.input-group-lg > .input-group-addon, .input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn { .input-group-lg > .input-group-btn > .btn {
height: 3.291667rem; padding: .75rem 1.25rem;
padding: .75rem 1.5rem;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.333333; line-height: 1.333333;
border-radius: .3rem; border-radius: .3rem;
@ -2071,9 +2069,9 @@ fieldset[disabled] .checkbox label {
.form-control-error { .form-control-error {
padding-right: 2.25rem; padding-right: 2.25rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center right .65625rem; background-position: center right .59375rem;
-webkit-background-size: 1.70625rem 1.70625rem; -webkit-background-size: 1.54375rem 1.54375rem;
background-size: 1.70625rem 1.70625rem; background-size: 1.54375rem 1.54375rem;
} }
.has-success .help-block, .has-success .help-block,
@ -2222,7 +2220,7 @@ fieldset[disabled] .checkbox label {
.btn { .btn {
display: inline-block; display: inline-block;
padding: .5rem 1rem; padding: .375rem 1rem;
font-size: 1rem; font-size: 1rem;
font-weight: normal; font-weight: normal;
line-height: 1.5; line-height: 1.5;
@ -2550,7 +2548,7 @@ fieldset[disabled] .btn-danger:hover {
.btn-primary-outline { .btn-primary-outline {
color: #0275d8; color: #0275d8;
background-color: #fff; background-color: transparent;
background-image: none; background-image: none;
border-color: #0275d8; border-color: #0275d8;
} }
@ -2588,7 +2586,7 @@ fieldset[disabled] .btn-primary-outline:hover {
.btn-secondary-outline { .btn-secondary-outline {
color: #ccc; color: #ccc;
background-color: #fff; background-color: transparent;
background-image: none; background-image: none;
border-color: #ccc; border-color: #ccc;
} }
@ -2626,7 +2624,7 @@ fieldset[disabled] .btn-secondary-outline:hover {
.btn-info-outline { .btn-info-outline {
color: #5bc0de; color: #5bc0de;
background-color: #fff; background-color: transparent;
background-image: none; background-image: none;
border-color: #5bc0de; border-color: #5bc0de;
} }
@ -2664,7 +2662,7 @@ fieldset[disabled] .btn-info-outline:hover {
.btn-success-outline { .btn-success-outline {
color: #5cb85c; color: #5cb85c;
background-color: #fff; background-color: transparent;
background-image: none; background-image: none;
border-color: #5cb85c; border-color: #5cb85c;
} }
@ -2702,7 +2700,7 @@ fieldset[disabled] .btn-success-outline:hover {
.btn-warning-outline { .btn-warning-outline {
color: #f0ad4e; color: #f0ad4e;
background-color: #fff; background-color: transparent;
background-image: none; background-image: none;
border-color: #f0ad4e; border-color: #f0ad4e;
} }
@ -2740,7 +2738,7 @@ fieldset[disabled] .btn-warning-outline:hover {
.btn-danger-outline { .btn-danger-outline {
color: #d9534f; color: #d9534f;
background-color: #fff; background-color: transparent;
background-image: none; background-image: none;
border-color: #d9534f; border-color: #d9534f;
} }
@ -2816,14 +2814,14 @@ fieldset[disabled] .btn-link:hover {
} }
.btn-lg, .btn-group-lg > .btn { .btn-lg, .btn-group-lg > .btn {
padding: .75rem 1.5rem; padding: .75rem 1.25rem;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.333333; line-height: 1.333333;
border-radius: .3rem; border-radius: .3rem;
} }
.btn-sm, .btn-group-sm > .btn { .btn-sm, .btn-group-sm > .btn {
padding: .275rem .75rem; padding: .25rem .75rem;
font-size: .85rem; font-size: .85rem;
line-height: 1.5; line-height: 1.5;
border-radius: .2rem; border-radius: .2rem;
@ -2919,47 +2917,51 @@ input[type="button"].btn-block {
border-radius: .25rem; border-radius: .25rem;
} }
.dropdown-menu .dropdown-divider { .dropdown-divider {
height: 1px; height: 1px;
margin: .5rem 0; margin: .5rem 0;
overflow: hidden; overflow: hidden;
background-color: #e5e5e5; background-color: #e5e5e5;
} }
.dropdown-menu > li > a { .dropdown-item {
display: block; display: block;
width: 100%;
padding: 3px 20px; padding: 3px 20px;
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 1.5; line-height: 1.5;
color: #373a3c; color: #373a3c;
text-align: inherit;
white-space: nowrap; white-space: nowrap;
background: none;
border: 0;
} }
.dropdown-menu > li > a:focus, .dropdown-item:focus,
.dropdown-menu > li > a:hover { .dropdown-item:hover {
color: #2b2d2f; color: #2b2d2f;
text-decoration: none; text-decoration: none;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.dropdown-menu > .active > a, .dropdown-item.active,
.dropdown-menu > .active > a:focus, .dropdown-item.active:focus,
.dropdown-menu > .active > a:hover { .dropdown-item.active:hover {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
background-color: #0275d8; background-color: #0275d8;
outline: 0; outline: 0;
} }
.dropdown-menu > .disabled > a, .dropdown-item.disabled,
.dropdown-menu > .disabled > a:focus, .dropdown-item.disabled:focus,
.dropdown-menu > .disabled > a:hover { .dropdown-item.disabled:hover {
color: #818a91; color: #818a91;
} }
.dropdown-menu > .disabled > a:focus, .dropdown-item.disabled:focus,
.dropdown-menu > .disabled > a:hover { .dropdown-item.disabled:hover {
text-decoration: none; text-decoration: none;
cursor: not-allowed; cursor: not-allowed;
background-color: transparent; background-color: transparent;
@ -3252,7 +3254,7 @@ input[type="button"].btn-block {
} }
.input-group-addon { .input-group-addon {
padding: .5rem .75rem; padding: .375rem .75rem;
font-size: 1rem; font-size: 1rem;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
@ -3272,7 +3274,7 @@ input[type="button"].btn-block {
.input-group-addon.form-control-lg, .input-group-lg > .input-group-addon, .input-group-addon.form-control-lg, .input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .input-group-addon.btn { .input-group-lg > .input-group-btn > .input-group-addon.btn {
padding: 1.5rem 1.5rem; padding: 1.25rem 1.25rem;
font-size: 1.25rem; font-size: 1.25rem;
border-radius: .3rem; border-radius: .3rem;
} }
@ -3640,7 +3642,7 @@ input[type="button"].btn-block {
.nav-tabs .nav-link { .nav-tabs .nav-link {
display: block; display: block;
padding: .75em 1em; padding: .5em 1em;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: .25rem .25rem 0 0; border-radius: .25rem .25rem 0 0;
} }
@ -3688,7 +3690,7 @@ input[type="button"].btn-block {
.nav-pills .nav-link { .nav-pills .nav-link {
display: block; display: block;
padding: .75em 1em; padding: .5em 1em;
border-radius: .25rem; border-radius: .25rem;
} }
@ -3735,8 +3737,7 @@ input[type="button"].btn-block {
.navbar { .navbar {
position: relative; position: relative;
padding: 1rem; padding: .5rem 1rem;
margin-bottom: 1rem;
} }
.navbar:before, .navbar:before,
@ -3805,15 +3806,14 @@ input[type="button"].btn-block {
.navbar-brand { .navbar-brand {
float: left; float: left;
padding: .625rem .75rem; padding-top: .25rem;
padding-bottom: .25rem;
margin-right: 1rem; margin-right: 1rem;
margin-bottom: 0;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1;
} }
.navbar-brand > a:focus, .navbar-brand:focus,
.navbar-brand > a:hover { .navbar-brand:hover {
text-decoration: none; text-decoration: none;
} }
@ -3821,14 +3821,27 @@ input[type="button"].btn-block {
display: block; display: block;
} }
.navbar-toggler { .navbar-divider {
padding: .55rem .75rem; float: left;
width: 1px;
padding-top: .425rem;
padding-bottom: .425rem;
margin-right: 1rem; margin-right: 1rem;
margin-bottom: 0; margin-left: 1rem;
overflow: hidden;
}
.navbar-divider:before {
content: '\00a0';
}
.navbar-toggler {
padding: .5rem .75rem;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1; line-height: 1;
background: none; background: none;
border: 0; border: .0625rem solid transparent;
border-radius: .25rem;
} }
.navbar-toggler:focus, .navbar-toggler:focus,
@ -3848,140 +3861,96 @@ input[type="button"].btn-block {
} }
} }
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.navbar-sm {
padding-top: 0;
padding-bottom: 0;
}
.navbar-sm .navbar-brand {
padding-top: .95rem;
padding-bottom: .95rem;
}
.navbar-sm .form-inline {
margin-top: .6rem;
}
.navbar-nav .nav-item { .navbar-nav .nav-item {
float: left; float: left;
} }
.navbar-nav .nav-link { .navbar-nav .nav-link {
display: block; display: block;
padding-top: .95rem; padding-top: .425rem;
padding-bottom: .95rem; padding-bottom: .425rem;
line-height: 1.25;
} }
.navbar-nav .open > .nav-link, .navbar-nav .nav-link + .nav-link {
.navbar-nav .open > .nav-link:focus, margin-left: 1rem;
.navbar-nav .open > .nav-link:hover,
.navbar-nav .active > .nav-link,
.navbar-nav .active > .nav-link:focus,
.navbar-nav .active > .nav-link:hover,
.navbar-nav .nav-link.open,
.navbar-nav .nav-link.open:focus,
.navbar-nav .nav-link.open:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active:focus,
.navbar-nav .nav-link.active:hover {
color: #555;
cursor: default;
background-color: #e7e7e7;
} }
.navbar-default { .navbar-nav .nav-item + .nav-item {
background-color: #f8f8f8; margin-left: 1rem;
border-color: #e7e7e7;
} }
.navbar-default .navbar-brand { .navbar-light .navbar-brand {
color: #777; color: rgba(0, 0, 0, .8);
} }
.navbar-default .navbar-brand:focus, .navbar-light .navbar-brand:focus,
.navbar-default .navbar-brand:hover { .navbar-light .navbar-brand:hover {
color: #5e5e5e; color: rgba(0, 0, 0, .8);
background-color: transparent;
} }
.navbar-inverse { .navbar-light .navbar-nav .nav-link {
background-color: #373a3c; color: rgba(0, 0, 0, .3);
border-color: #1f2021;
} }
.navbar-inverse .navbar-toggler, .navbar-light .navbar-nav .nav-link:focus,
.navbar-inverse .navbar-brand > a, .navbar-light .navbar-nav .nav-link:hover {
.navbar-inverse .nav-pills > .nav-item > .nav-link { color: rgba(0, 0, 0, .6);
color: #aab0b5;
} }
.navbar-inverse .navbar-toggler:focus, .navbar-light .navbar-nav .open > .nav-link,
.navbar-inverse .navbar-toggler:hover, .navbar-light .navbar-nav .open > .nav-link:focus,
.navbar-inverse .navbar-brand > a:focus, .navbar-light .navbar-nav .open > .nav-link:hover,
.navbar-inverse .navbar-brand > a:hover, .navbar-light .navbar-nav .active > .nav-link,
.navbar-inverse .nav-pills > .nav-item > .nav-link:focus, .navbar-light .navbar-nav .active > .nav-link:focus,
.navbar-inverse .nav-pills > .nav-item > .nav-link:hover { .navbar-light .navbar-nav .active > .nav-link:hover,
color: #fff; .navbar-light .navbar-nav .nav-link.open,
.navbar-light .navbar-nav .nav-link.open:focus,
.navbar-light .navbar-nav .nav-link.open:hover,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.active:focus,
.navbar-light .navbar-nav .nav-link.active:hover {
color: rgba(0, 0, 0, .8);
} }
.navbar-inverse .nav-pills > .nav-item > .nav-link:focus, .navbar-light .navbar-divider {
.navbar-inverse .nav-pills > .nav-item > .nav-link:hover { background-color: rgba(0, 0, 0, .075);
color: #fff;
background-color: #1f2021;
} }
.navbar-inverse .nav-pills > .active > .nav-link, .navbar-dark .navbar-brand {
.navbar-inverse .nav-pills > .nav-link.active { color: white;
color: #fff;
background-color: #1f2021;
} }
.navbar-inverse .navbar-brand { .navbar-dark .navbar-brand:focus,
color: #aab0b5; .navbar-dark .navbar-brand:hover {
color: white;
} }
.navbar-inverse .navbar-brand:focus, .navbar-dark .navbar-nav .nav-link {
.navbar-inverse .navbar-brand:hover { color: rgba(255, 255, 255, .5);
color: #fff;
background-color: transparent;
} }
.navbar-inverse .navbar-nav .navbar-link { .navbar-dark .navbar-nav .nav-link:focus,
color: #aab0b5; .navbar-dark .navbar-nav .nav-link:hover {
color: rgba(255, 255, 255, .75);
} }
.navbar-inverse .navbar-nav .navbar-link:focus, .navbar-dark .navbar-nav .open > .nav-link,
.navbar-inverse .navbar-nav .navbar-link:hover { .navbar-dark .navbar-nav .open > .nav-link:focus,
color: #fff; .navbar-dark .navbar-nav .open > .nav-link:hover,
background-color: transparent; .navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link:focus,
.navbar-dark .navbar-nav .active > .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.open,
.navbar-dark .navbar-nav .nav-link.open:focus,
.navbar-dark .navbar-nav .nav-link.open:hover,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.active:focus,
.navbar-dark .navbar-nav .nav-link.active:hover {
color: white;
} }
.navbar-inverse .navbar-nav .navbar-link.active > a, .navbar-dark .navbar-divider {
.navbar-inverse .navbar-nav .navbar-link.active > a:focus, background-color: rgba(255, 255, 255, .075);
.navbar-inverse .navbar-nav .navbar-link.active > a:hover {
color: #fff;
background-color: #1f2021;
}
.navbar-inverse .navbar-nav .navbar-link.disabled > a,
.navbar-inverse .navbar-nav .navbar-link.disabled > a:focus,
.navbar-inverse .navbar-nav .navbar-link.disabled > a:hover {
color: #444;
background-color: transparent;
} }
.card { .card {
@ -5997,11 +5966,15 @@ a.text-danger:hover {
color: #c9302c; color: #c9302c;
} }
.inverse { .bg-inverse {
color: #eceeef; color: #eceeef;
background-color: #373a3c; background-color: #373a3c;
} }
.bg-faded {
background-color: #f7f7f9;
}
.bg-primary { .bg-primary {
color: #fff; color: #fff;
background-color: #0275d8; background-color: #0275d8;

2
dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

13
docs/_includes/footer.html
View File

@ -47,16 +47,3 @@ Holder.addTheme('gray', {
fontweight: 'normal' fontweight: 'normal'
}) })
</script> </script>
<script>
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>

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

@ -1,11 +1,31 @@
<header class="navbar navbar-sm navbar-defeault navbar-static-top bd-navbar" role="banner"> <header class="navbar navbar-light navbar-static-top bd-navbar" role="banner">
<div class="container-fluid"> <nav class="nav navbar-nav pull-right">
<nav class="nav nav-inline"> <div class="nav-item dropdown">
<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 dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<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> v{{ site.current_version }}
<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>
<a class="nav-item nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a> <a class="dropdown-item" href="#">v4.0.0-alpha</a>
</nav> <a class="dropdown-item" href="#">v3.3.5</a>
</div> <a class="dropdown-item" href="#">v3.3.4</a>
<a class="dropdown-item" href="#">v3.3.2</a>
<a class="dropdown-item" href="#">v3.3.1</a>
<a class="dropdown-item" href="#">v3.3.0</a>
<a class="dropdown-item" href="#">v3.2.0</a>
<a class="dropdown-item" href="#">v3.1.1</a>
<a class="dropdown-item" href="#">v3.1.0</a>
<a class="dropdown-item" href="#">v3.0.3</a>
<a class="dropdown-item" href="#">v3.0.2</a>
<a class="dropdown-item" href="#">v3.0.1</a>
<a class="dropdown-item" href="#">v3.0.0</a>
</div>
</div>
</nav>
<nav class="nav navbar-nav">
<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 {% 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.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
</nav>
</header> </header>

2
docs/_layouts/docs.html
View File

@ -12,7 +12,7 @@
{% include nav-home.html %} {% include nav-home.html %}
<div class="bd-pageheader text-xs-center text-sm-left"> <div class="bd-pageheader">
<div class="container"> <div class="container">
{% include page-headers.html %} {% include page-headers.html %}
{% include ads.html %} {% include ads.html %}

1
docs/about/history.md
View File

@ -2,6 +2,7 @@
layout: docs layout: docs
title: History title: History
group: about group: about
redirect_from: "/about/"
--- ---
Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world. Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
docs/assets/js/docs.min.js vendored
View File

@ -29,4 +29,4 @@ function AnchorJS(a){"use strict";this.options=a||{},this._applyRemainingDefault
* Licensed under the Creative Commons Attribution 3.0 Unported License. For * Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see https://creativecommons.org/licenses/by/3.0/. * details, see https://creativecommons.org/licenses/by/3.0/.
*/ */
!function(a){"use strict";a(function(){a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a('[data-toggle="popover"]').popover(),a(".tooltip-test").tooltip(),a(".popover-test").popover(),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';a(this).before(b)});var b=new ZeroClipboard(a(".btn-clipboard")),c=a("#global-zeroclipboard-html-bridge");b.on("load",function(){c.data("placement","top").attr("title","Copy to clipboard").tooltip(),b.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),b.on("complete",function(){c.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")})}),b.on("noflash wrongflash",function(){a(".zero-clipboard").remove(),ZeroClipboard.destroy()})})}(jQuery); !function(a){"use strict";a(function(){a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a('[data-toggle="popover"]').popover(),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bd-example [href=#]").click(function(a){a.preventDefault()}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';a(this).before(b)});var b=new ZeroClipboard(a(".btn-clipboard")),c=a("#global-zeroclipboard-html-bridge");b.on("load",function(){c.data("placement","top").attr("title","Copy to clipboard").tooltip(),b.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),b.on("complete",function(){c.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")})}),b.on("noflash wrongflash",function(){a(".zero-clipboard").remove(),ZeroClipboard.destroy()})})}(jQuery),function(){"use strict";anchors.options.placement="left",anchors.add(".bd-content > h1, .bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5")}();

12
docs/assets/js/src/application.js
View File

@ -28,6 +28,11 @@
$('.tooltip-test').tooltip() $('.tooltip-test').tooltip()
$('.popover-test').popover() $('.popover-test').popover()
// Disable empty links in docs examples
$('.bd-example [href=#]').click(function (e) {
e.preventDefault()
})
// Config ZeroClipboard // Config ZeroClipboard
ZeroClipboard.config({ ZeroClipboard.config({
moviePath: '/assets/flash/ZeroClipboard.swf', moviePath: '/assets/flash/ZeroClipboard.swf',
@ -76,3 +81,10 @@
}) })
}(jQuery) }(jQuery)
;(function () {
'use strict';
anchors.options.placement = 'left';
anchors.add('.bd-content > h1, .bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
})();

6
docs/assets/scss/_ads.scss
View File

@ -6,7 +6,7 @@
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
padding: 1.25rem !important; padding: 1.25rem !important;
margin: 2rem -1.5rem -2rem !important; margin: 2rem ($grid-gutter-width * -1) -2rem !important;
overflow: hidden; // clearfix overflow: hidden; // clearfix
font-size: .8rem !important; font-size: .8rem !important;
font-family: inherit !important; font-family: inherit !important;
@ -17,10 +17,6 @@
border: 0 !important; border: 0 !important;
} }
.bd-masthead .carbonad {
background: $bd-graphite !important;
}
.carbonad-img { .carbonad-img {
margin: 0 !important; margin: 0 !important;
} }

104
docs/assets/scss/_anchor.scss
View File

@ -1,107 +1,3 @@
// //
// // Store the link icon as a base64 embedded icon font.
// //
// @font-face {
// font-family: 'anchorjs-icons';
// src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6v8yoAAAC8AAAAYGNtYXDL8RqdAAABHAAAADxnYXNwAAAAEAAAAVgAAAAIZ2x5Zkm2oNUAAAFgAAABWGhlYWQAHd4cAAACuAAAADZoaGVhB3sECwAAAvAAAAAkaG10eAYAAEcAAAMUAAAADGxvY2EACgCsAAADIAAAAAhtYXhwAAYAcAAAAygAAAAgbmFtZUQXtNYAAANIAAABOXBvc3QAAwAAAAAEhAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAACDmAAPA/8D/wAPAAEAAAAAAAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACACDmAP//AAAAIOYA////4RoCAAEAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAIARwAHA7kDeQA2AG0AAAEnLgEiBg8BDgEUFh8BHgMXNy4DLwEuATQ2PwE+ATIWHwEeARQGDwEeAxU3PgE0JicBLgMnBx4DHwEeARQGDwEOASImLwEuATQ2PwEuAzUHDgEUFh8BHgEyNj8BPgE0Ji8BA7kEI1ldWiPaIyQkIwQDBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMk/r4DBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMkBCNZXVoj2iMkJCMEA3UEJCMjJNojWV1aIwQDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkj/sYDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkjBCQjIyTaI1ldWiMEAAEAAAABAABR/4xQXw889QALBAAAAAAAzqNM0wAAAADOo0zTAAAAAAO5A3kAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAABHA7kAAQAAAAAAAAAAAAAAAAAAAAMAAAAAAgAAAAQAAEcAAAAAAAoArAABAAAAAwBuAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADAALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
// url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATwAAsAAAAABKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDq/zKmNtYXAAAAFoAAAAPAAAADzL8RqdZ2FzcAAAAaQAAAAIAAAACAAAABBnbHlmAAABrAAAAVgAAAFYSbag1WhlYWQAAAMEAAAANgAAADYAHd4caGhlYQAAAzwAAAAkAAAAJAd7BAtobXR4AAADYAAAAAwAAAAMBgAAR2xvY2EAAANsAAAACAAAAAgACgCsbWF4cAAAA3QAAAAgAAAAIAAGAHBuYW1lAAADlAAAATkAAAE5RBe01nBvc3QAAATQAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAg5gADwP/A/8ADwABAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAoAAAABgAEAAEAAgAg5gD//wAAACDmAP///+EaAgABAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAACAEcABwO5A3kANgBtAAABJy4BIgYPAQ4BFBYfAR4DFzcuAy8BLgE0Nj8BPgEyFh8BHgEUBg8BHgMVNz4BNCYnAS4DJwceAx8BHgEUBg8BDgEiJi8BLgE0Nj8BLgM1Bw4BFBYfAR4BMjY/AT4BNCYvAQO5BCNZXVoj2iMkJCMEAwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJP6+AwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJAQjWV1aI9ojJCQjBAN1BCQjIyTaI1ldWiMEAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZI/7GAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZIwQkIyMk2iNZXVojBAABAAAAAQAAUf+MUF8PPPUACwQAAAAAAM6jTNMAAAAAzqNM0wAAAAADuQN5AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAARwO5AAEAAAAAAAAAAAAAAAAAAAADAAAAAAIAAAAEAABHAAAAAAAKAKwAAQAAAAMAbgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAwAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
// font-style: normal;
// font-weight: normal;
// }
//
// .anchorjs-icon {
// font-family: 'anchorjs-icons';
// font-style: normal;
// font-variant: normal;
// font-weight: normal;
// line-height: 1;
// speak: none;
// text-transform: none;
//
// // Better Icon Rendering
// -webkit-font-smoothing: antialiased;
// -moz-osx-font-smoothing: grayscale;
// }
//
// //
// // Link placement and hover behavior.
// //
// .anchorjs-link {
// opacity: 0;
// text-decoration: none;
// }
// *:hover > .anchorjs-link,
// .anchorjs-link:focus {
// // To fade links as they appear, change transition-property from 'color' to 'all'
// opacity: 1;
// transition: color .16s linear;
// }
//
// //
// // Make screen-reader friendly description text visually hidden.
// //
// .anchorjs-description {
// border: 0;
// clip: rect(0 0 0 0);
// height: 1px;
// margin: -1px;
// overflow: hidden;
// padding: 0;
// position: absolute;
// width: 1px;
// }
//
// //
// // Reasonable default styles.
// // Feel free to override or replace these with your own.
// //
// // .anchorjs-link:link { color: #DFD487; }
// // .anchorjs-link:visited { color: #DFD487; }
// // .anchorjs-link:hover { color: #EC7963; }
// // .anchorjs-link:active { color: #EC7963; }
//
// .anchorjs-link {
// float: left;
// width: 1.2em;
// height: 1em;
// padding-right: .2em;
// margin-top: .25em;
// margin-left: -1.2em;
// font-size: 70%;
// color: inherit;
// text-align: center;
// }
// *:hover > .anchorjs-link:hover {
// color: $brand-primary;
// text-decoration: none;
// }
//
// // .anchorjs-icon {
// // font-size: 90%;
// // padding-left: 6px;
// // }
//
// .anchorjs-icon:before {
// content: '\e600';
// // alternative icons -- uncomment to use
// //
// // content: '#';
// // content: '';
// // content: '❡';
// // content: '§';
// }
//
// @include media-breakpoint-down(sm) {
// .anchorjs-link {
// display: none;
// }
// }
//
// AnchorJS Styles
//
.anchorjs-link { .anchorjs-link {
color: inherit; color: inherit;
} }

1
docs/assets/scss/_buttons.scss
View File

@ -3,6 +3,7 @@
// Custom buttons for the docs. // Custom buttons for the docs.
.btn-bs { .btn-bs {
font-weight: 500;
color: $bd-purple-bright; color: $bd-purple-bright;
border-color: $bd-purple-bright; border-color: $bd-purple-bright;

85
docs/assets/scss/_component-examples.scss
View File

@ -88,6 +88,12 @@
width: auto; width: auto;
} }
> .form-control {
+ .form-control {
margin-top: .5rem;
}
}
// Card examples should be horizontal // Card examples should be horizontal
> .card { > .card {
max-width: 20rem; max-width: 20rem;
@ -107,12 +113,6 @@
} }
} }
// Tweak content of examples for optimum awesome
.bd-example > *:last-child,
.bd-example > .table-responsive:last-child > .table {
margin-bottom: 0 !important;
}
.bd-example > .close { .bd-example > .close {
float: none; float: none;
} }
@ -149,16 +149,6 @@
margin-left: .5rem; margin-left: .5rem;
} }
} }
// .bd-example > .img-circle,
// .bd-example > .img-rounded,
// .bd-example > .img-thumbnail {
// margin: .25rem;
// }
// Tables
// .bd-example > .table-responsive > .table {
// background-color: #fff;
// }
// Buttons // Buttons
.bd-example > .btn-group { .bd-example > .btn-group {
@ -187,44 +177,23 @@
} }
// Navbars // Navbars
.bd-example .navbar:last-child { .bd-example {
margin-bottom: 0; .navbar-fixed-top {
} position: static;
.bd-navbar-top-example, margin: -1rem -1rem 1rem;
.bd-navbar-bottom-example { }
z-index: 1; .navbar-fixed-bottom {
padding: 0; position: static;
overflow: hidden; // cut the drop shadows off margin: 1rem -1rem -1rem;
} }
.bd-navbar-top-example .navbar-header,
.bd-navbar-bottom-example .navbar-header { @include media-breakpoint-up(sm) {
margin-left: 0; .navbar-fixed-top {
} margin: -1.5rem -1.5rem 1rem;
.bd-navbar-top-example .navbar-fixed-top, }
.bd-navbar-bottom-example .navbar-fixed-bottom { .navbar-fixed-bottom {
position: relative; margin: 1rem -1.5rem -1.5rem;
margin-right: 0; }
margin-left: 0;
}
.bd-navbar-top-example {
padding-bottom: 45px;
}
.bd-navbar-top-example .navbar-fixed-top {
top: -1px;
}
.bd-navbar-bottom-example {
padding-top: 45px;
}
.bd-navbar-bottom-example .navbar-fixed-bottom {
bottom: -1px;
}
.bd-navbar-bottom-example .navbar {
margin-bottom: 0;
}
@media (min-width: 768px) {
.bd-navbar-top-example .navbar-fixed-top,
.bd-navbar-bottom-example .navbar-fixed-bottom {
position: absolute;
} }
} }
@ -325,9 +294,11 @@
.bg-info, .bg-info,
.bg-warning, .bg-warning,
.bg-danger { .bg-danger {
padding: .5rem; &:not(.navbar) {
margin-top: .5rem; padding: .5rem;
margin-bottom: .5rem; margin-top: .5rem;
margin-bottom: .5rem;
}
} }
} }

56
docs/assets/scss/_layout.scss → docs/assets/scss/_content.scss
View File

@ -1,3 +1,7 @@
//
// Automatically style Markdown-based tables like a Bootstrap `.table`.
//
.bd-content { .bd-content {
> table { > table {
display: block; display: block;
@ -32,58 +36,6 @@
} }
} }
.bd-pageheader {
padding: 2rem .75rem;
margin-bottom: 3rem;
color: $bd-purple-light;
background-color: $bd-purple;
.container {
position: relative;
}
h1 {
font-size: 3rem;
font-weight: normal;
color: #fff;
}
p {
margin-bottom: 0;
font-size: 1.5rem;
}
@include media-breakpoint-up(sm) {
padding-top: 4rem;
padding-bottom: 4rem;
.carbonad {
margin: 2rem 0 0 !important;
}
}
@include media-breakpoint-up(md) {
h1 {
font-size: 4rem;
}
}
@include media-breakpoint-up(lg) {
h1,
p {
margin-right: 380px;
}
.carbonad {
position: absolute;
top: 0;
right: .75rem; // offset from the .container's padding
margin: 0 !important;
}
}
}
// //
// Docs sections // Docs sections
// //

21
docs/assets/scss/_featured-sites.scss Normal file
View File

@ -0,0 +1,21 @@
.bd-featured-sites {
margin-right: -1px;
margin-left: -1px;
}
.bd-featured-sites .col-xs-6 {
padding: 1px;
}
.bd-featured-sites .img-responsive {
margin-top: 0;
}
@media (min-width: 768px) {
.bd-featured-sites .col-sm-3:first-child img {
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.bd-featured-sites .col-sm-3:last-child img {
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
}
}

81
docs/assets/scss/_featurettes.scss Normal file
View File

@ -0,0 +1,81 @@
.bd-featurette {
padding-top: 3rem;
padding-bottom: 3rem;
font-size: 1rem;
line-height: 1.5;
color: #555;
// text-align: center;
background-color: #fff;
border-top: 1px solid #eee;
.highlight {
text-align: left;
}
@include media-breakpoint-up(md) {
.col-sm-6:first-child {
padding-right: ($grid-gutter-width * 1.5);
};
.col-sm-6:last-child {
padding-left: ($grid-gutter-width * 1.5);
}
}
}
.bd-featurette-title {
margin-bottom: .5rem;
font-size: 2rem;
font-weight: normal;
color: #333;
+ .lead {
font-size: 1.5rem;
margin-bottom: 2rem;
}
}
.half-rule {
width: 6rem;
margin: 2.5rem 0;
}
.bd-featurette h4 {
margin-top: 1rem;
margin-bottom: .5rem;
font-weight: normal;
color: #333;
}
.bd-featurette-img {
display: block;
margin-bottom: 1.25rem;
color: #333;
}
.bd-featurette-img:hover {
color: $brand-primary;
text-decoration: none;
}
.bd-featurette-img img {
display: block;
margin-bottom: 1rem;
}
@media (min-width: 480px) {
.bd-featurette .img-responsive {
margin-top: 2rem;
}
}
@media (min-width: 768px) {
.bd-featurette {
padding-top: 6rem;
padding-bottom: 6rem;
}
.bd-featurette-title {
font-size: 2.5rem;
}
.bd-featurette .lead {
max-width: 80%;
// margin-right: auto;
// margin-left: auto;
}
.bd-featurette .img-responsive {
margin-top: 0;
}
}

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

@ -1,227 +0,0 @@
//
// Main navbar
//
.bd-navbar {
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 0;
// background-color: $bd-graphite;
.nav-link {
color: $bd-graphite-light;
&.active,
&:hover,
&:focus {
color: $gray-dark;
background-color: transparent;
}
&.active {
font-weight: 500;
}
}
}
//
// Masthead (headings and download button)
//
.bd-masthead {
position: relative;
padding: ($grid-gutter-width / 2);
color: $bd-purple-light;
text-align: center;
background: -webkit-linear-gradient(135deg, darken($bd-purple, 15%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
background: linear-gradient(135deg, darken($bd-purple, 15%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
.bd-booticon {
margin: 0 auto 2rem;
color: $bd-purple-light;
border-color: $bd-purple-light;
}
h1 {
font-weight: 300;
line-height: 1;
}
.lead {
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
font-size: 1rem;
color: #fff;
}
.version {
margin-top: -1rem;
margin-bottom: 2rem;
}
.btn {
width: 100%;
padding: 1rem 2rem;
font-size: 1.25rem;
font-weight: 500;
color: $bd-yellow;
border-color: $bd-yellow;
&:hover {
color: $bd-graphite;
background-color: $bd-yellow;
border-color: $bd-yellow;
}
}
.carbonad {
margin-bottom: -2rem !important;
}
@include media-breakpoint-up(sm) {
padding-top: 8rem;
padding-bottom: 2rem;
.btn {
width: auto;
}
.carbonad {
margin-bottom: 0 !important;
}
}
@include media-breakpoint-up(md) {
padding-bottom: 4rem;
.bd-header {
margin-bottom: 4rem;
}
h1 {
font-size: 4rem;
}
.lead {
font-size: 1.5rem;
}
.carbonad {
margin-top: 3rem !important;
}
}
@include media-breakpoint-up(lg) {
.lead {
width: 85%;
font-size: 2rem;
}
}
}
//
// Homepage featurettes
//
.bd-featurette {
padding-top: 3rem;
padding-bottom: 3rem;
font-size: 1rem;
line-height: 1.5;
color: #555;
// text-align: center;
background-color: #fff;
border-top: 1px solid #eee;
.highlight {
text-align: left;
}
}
.bd-featurette-title {
margin-bottom: .5rem;
font-size: 2rem;
font-weight: normal;
color: #333;
+ .lead {
font-size: 1.5rem;
margin-bottom: 2rem;
}
}
.half-rule {
width: 6rem;
margin: 2.5rem 0;
}
.bd-featurette h4 {
margin-top: 1rem;
margin-bottom: .5rem;
font-weight: normal;
color: #333;
}
.bd-featurette-img {
display: block;
margin-bottom: 1.25rem;
color: #333;
}
.bd-featurette-img:hover {
color: $brand-primary;
text-decoration: none;
}
.bd-featurette-img img {
display: block;
margin-bottom: 1rem;
}
@media (min-width: 480px) {
.bd-featurette .img-responsive {
margin-top: 2rem;
}
}
@media (min-width: 768px) {
.bd-featurette {
padding-top: 6rem;
padding-bottom: 6rem;
}
.bd-featurette-title {
font-size: 2.5rem;
}
.bd-featurette .lead {
max-width: 80%;
// margin-right: auto;
// margin-left: auto;
}
.bd-featurette .img-responsive {
margin-top: 0;
}
}
//
// Featured Expo sites
//
.bd-featured-sites {
margin-right: -1px;
margin-left: -1px;
}
.bd-featured-sites .col-xs-6 {
padding: 1px;
}
.bd-featured-sites .img-responsive {
margin-top: 0;
}
@media (min-width: 768px) {
.bd-featured-sites .col-sm-3:first-child img {
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.bd-featured-sites .col-sm-3:last-child img {
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
}
}

91
docs/assets/scss/_masthead.scss Normal file
View File

@ -0,0 +1,91 @@
.bd-masthead {
position: relative;
padding: ($grid-gutter-width / 2);
color: $bd-purple-light;
text-align: center;
background: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
background: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
.bd-booticon {
margin: 0 auto 2rem;
color: $bd-purple-light;
border-color: $bd-purple-light;
}
h1 {
font-weight: 300;
line-height: 1;
}
.lead {
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
font-size: 1rem;
color: #fff;
}
.version {
margin-top: -1rem;
margin-bottom: 2rem;
}
.btn {
width: 100%;
padding: 1rem 2rem;
font-size: 1.25rem;
font-weight: 500;
color: $bd-yellow;
border-color: $bd-yellow;
&:hover {
color: $bd-graphite;
background-color: $bd-yellow;
border-color: $bd-yellow;
}
}
.carbonad {
margin-bottom: -2rem !important;
}
@include media-breakpoint-up(sm) {
padding-top: 8rem;
padding-bottom: 2rem;
.btn {
width: auto;
}
.carbonad {
margin-bottom: 0 !important;
}
}
@include media-breakpoint-up(md) {
padding-bottom: 4rem;
.bd-header {
margin-bottom: 4rem;
}
h1 {
font-size: 4rem;
}
.lead {
font-size: 1.5rem;
}
.carbonad {
margin-top: 3rem !important;
}
}
@include media-breakpoint-up(lg) {
.lead {
width: 85%;
font-size: 2rem;
}
}
}

24
docs/assets/scss/_nav.scss Normal file
View File

@ -0,0 +1,24 @@
//
// Main navbar
//
.bd-navbar {
font-size: 87.5%; // 14px
.navbar-nav {
.nav-link {
color: $bd-graphite-light;
&.active,
&:hover,
&:focus {
color: $gray-dark;
background-color: transparent;
}
&.active {
font-weight: 500;
}
}
}
}

82
docs/assets/scss/_page-header.scss
View File

@ -1,45 +1,53 @@
// .bd-pageheader {
// Page headers padding: 2rem .75rem;
// margin-bottom: 1.5rem;
color: $bd-purple-light;
text-align: center;
background-color: $bd-purple;
// .bd-header { .container {
// padding-top: 2rem; position: relative;
// padding-bottom: 2rem; }
// margin-bottom: 2rem;
// text-align: center;
// background-color: $bd-purple;
// .container { h1 {
// position: relative; font-size: 3rem;
// } font-weight: normal;
color: #fff;
}
// h1 { p {
// margin-top: 0; margin-bottom: 0;
// color: #fff; font-size: 1.5rem;
// } }
// p { @include media-breakpoint-up(sm) {
// margin-bottom: 0; padding-top: 4rem;
// font-weight: 300; padding-bottom: 4rem;
// color: rgba(255,255,255,.65); margin-bottom: 3rem;
// } text-align: left;
// @media (min-width: 768px) { .carbonad {
// text-align: left; margin: 2rem 0 0 !important;
}
}
// h1 { @include media-breakpoint-up(md) {
// font-size: 4rem; h1 {
// line-height: 1; font-size: 4rem;
// } }
// } }
// @media (min-width: 992px) { @include media-breakpoint-up(lg) {
// padding-top: 4rem; h1,
// padding-bottom: 4rem; p {
margin-right: 380px;
}
// h1, .carbonad {
// p { position: absolute;
// margin-right: 380px; top: 0;
// } right: .75rem; // offset from the .container's padding
// } margin: 0 !important;
// } }
}
}

31
docs/assets/scss/_social-buttons.scss
View File

@ -1,31 +0,0 @@
//
// Social buttons
//
.bd-social {
margin-bottom: 1.5rem;
margin-left: -.5rem;
}
.bd-social-buttons {
display: inline-block;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.bd-social-buttons li {
display: inline-block;
padding: .25rem .5rem;
line-height: 1;
}
.bd-social-buttons .twitter-follow-button {
width: 225px !important;
}
.bd-social-buttons .twitter-share-button {
width: 98px !important;
}
// Style the GitHub buttons via CSS instead of inline attributes
.github-btn {
overflow: hidden;
border: 0;
}

6
docs/assets/scss/_team.scss
View File

@ -1,7 +1,3 @@
//
// Team members
//
.bd-team { .bd-team {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -21,7 +17,7 @@
height: 1.25rem; height: 1.25rem;
margin-top: .25rem; margin-top: .25rem;
} }
img { img {
float: left; float: left;
width: 2rem; width: 2rem;

4
docs/assets/scss/_zeroclipboard.scss
View File

@ -1,6 +1,6 @@
// ZeroClipboard
// //
// ZeroClipboard styles // Flash-based `Copy` buttons for code snippets.
//
.zero-clipboard { .zero-clipboard {
position: relative; position: relative;

14
docs/assets/scss/docs.scss
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, 15%), 25%); $bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%);
$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%);
@ -38,14 +38,16 @@ $bd-warning: #f0ad4e;
$bd-info: #5bc0de; $bd-info: #5bc0de;
// Load docs components // Load docs components
@import "layout";
@import "sidebar";
@import "booticon"; @import "booticon";
@import "homepage"; @import "nav";
@import "masthead";
@import "featurettes";
@import "featured-sites";
@import "ads"; @import "ads";
@import "footer"; @import "content";
@import "social-buttons";
@import "page-header"; @import "page-header";
@import "sidebar";
@import "footer";
@import "component-examples"; @import "component-examples";
@import "responsive-tests"; @import "responsive-tests";
@import "buttons"; @import "buttons";

282
docs/components/button-dropdown.md
View File

@ -24,63 +24,63 @@ Turn a button into a dropdown toggle with some basic markup changes.
<div class="bd-example"> <div class="bd-example">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>
@ -90,13 +90,13 @@ Turn a button into a dropdown toggle with some basic markup changes.
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action Action
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -110,78 +110,78 @@ Similarly, create split button dropdowns with the same markup changes, only with
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>
@ -192,13 +192,13 @@ Similarly, create split button dropdowns with the same markup changes, only with
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -212,13 +212,13 @@ Button dropdowns work with buttons of all sizes.
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button Large button
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
@ -226,13 +226,13 @@ Button dropdowns work with buttons of all sizes.
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button Small button
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
@ -240,13 +240,13 @@ Button dropdowns work with buttons of all sizes.
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button Extra small button
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /btn-toolbar --> </div><!-- /btn-toolbar -->
</div><!-- /example --> </div><!-- /example -->
@ -257,9 +257,9 @@ Button dropdowns work with buttons of all sizes.
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button Large button
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
... ...
</ul> </div>
</div> </div>
<!-- Small button group --> <!-- Small button group -->
@ -267,9 +267,9 @@ Button dropdowns work with buttons of all sizes.
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button Small button
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
... ...
</ul> </div>
</div> </div>
<!-- Extra small button group --> <!-- Extra small button group -->
@ -277,9 +277,9 @@ Button dropdowns work with buttons of all sizes.
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button Extra small button
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
... ...
</ul> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -294,26 +294,26 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
<div class="btn-group dropup"> <div class="btn-group dropup">
<button type="button" class="btn btn-primary">Right dropup</button> <button type="button" class="btn btn-primary">Right dropup</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div> </div>
</div> </div>
@ -324,8 +324,8 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<!-- Dropdown menu links --> <!-- Dropdown menu links -->
</ul> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}

1
docs/components/buttons.md
View File

@ -2,6 +2,7 @@
layout: docs layout: docs
title: Buttons title: Buttons
group: components group: components
redirect_from: "/components/"
--- ---
Use Bootstrap's custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more. Use Bootstrap's custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.

101
docs/components/dropdowns.md
View File

@ -20,20 +20,33 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li> <a class="dropdown-item" href="#">Action</a>
<a href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
</li> <a class="dropdown-item" href="#">Something else here</a>
<li> </div>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
</ul>
</div> </div>
{% endexample %} {% endexample %}
### Button elements
You can optionally use `<button>` elements in your dropdowns instead of `<a>`s.
{% example html %}
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
{% endexample %}
## Alignment ## Alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu. By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
@ -43,9 +56,9 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
{% endcallout %} {% endcallout %}
{% highlight html %} {% highlight html %}
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
... ...
</ul> </div>
{% endhighlight %} {% endhighlight %}
## Menu headers ## Menu headers
@ -53,15 +66,11 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
Add a header to label sections of actions in any dropdown menu. Add a header to label sections of actions in any dropdown menu.
{% example html %} {% example html %}
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li class="dropdown-header">Dropdown header</li> <h6 class="dropdown-header">Dropdown header</h6>
<li> <a class="dropdown-item" href="#">Action</a>
<a href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
</li> </div>
<li>
<a href="#">Another action</a>
</li>
</ul>
{% endexample %} {% endexample %}
## Menu dividers ## Menu dividers
@ -69,39 +78,25 @@ Add a header to label sections of actions in any dropdown menu.
Separate groups of related menu items with a divider. Separate groups of related menu items with a divider.
{% example html %} {% example html %}
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li> <a class="dropdown-item" href="#">Action</a>
<a href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
</li> <a class="dropdown-item" href="#">Something else here</a>
<li> <div class="dropdown-divider"></div>
<a href="#">Another action</a> <a class="dropdown-item" href="#">Separated link</a>
</li> </div>
<li>
<a href="#">Something else here</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
{% endexample %} {% endexample %}
## Disabled menu items ## Disabled menu items
Add `.disabled` to a `<li>` in the dropdown to disable the link. Add `.disabled` to items in the dropdown to **style them as disabled**.
{% example html %} {% example html %}
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li> <a class="dropdown-item" href="#">Regular link</a>
<a href="#">Regular link</a> <a class="dropdown-item disabled" href="#">Disabled link</a>
</li> <a class="dropdown-item" href="#">Another link</a>
<li class="disabled"> </div>
<a href="#">Disabled link</a>
</li>
<li>
<a href="#">Another link</a>
</li>
</ul>
{% endexample %} {% endexample %}
## Usage ## Usage
@ -121,9 +116,9 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger Dropdown trigger
</button> </button>
<ul class="dropdown-menu" aria-labelledby="dLabel"> <div class="dropdown-menu" aria-labelledby="dLabel">
... ...
</ul> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -135,9 +130,9 @@ To keep URLs intact with link buttons, use the `data-target` attribute instead o
Dropdown trigger Dropdown trigger
</a> </a>
<ul class="dropdown-menu" aria-labelledby="dLabel"> <div class="dropdown-menu" aria-labelledby="dLabel">
... ...
</ul> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}

4
docs/components/list-group.md
View File

@ -24,9 +24,9 @@ List groups are a flexible and powerful component for displaying not only simple
</ul> </ul>
{% endexample %} {% endexample %}
## Badges ## Labels
Add the badges component to any list group item and it will automatically be positioned on the right. Add labels to any list group item to show unread counts, activity, etc.
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">

268
docs/components/navbar.md
View File

@ -4,41 +4,38 @@ title: Navbar
group: components group: components
--- ---
The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and with the help of our collapse plugin it can easily integrate offscreen content. The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.
## Contents ## Contents
* Will be replaced with the ToC, excluding the "Contents" header * Will be replaced with the ToC, excluding the "Contents" header
{:toc} {:toc}
### Basics ## Basics
Here's what you need to know before getting started with the navbar: Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` and either a color scheme class or custom styles. - Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`).
- When using multiple components in a navbar, some [alignment classes](#alignment) are required. - When using multiple components in a navbar, some [alignment classes](#alignment) are required.
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width. - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
- Use `.pull-left` and `.pull-right` to quickly align sub-components.
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies. - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
### Branding ## Supported content
Name your company, product, or project with `.navbar-brand`. Navbars come with built-in support for a handful of sub-components. Mix and match from the following as you need:
- `.navbar-brand` for your company, product, or project name
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
- `.navbar-form` for vertically centering default-sized inputs and buttons.
- `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors.
Here's an example of all the sub-components included in a default, light navbar:
{% example html %} {% example html %}
<nav class="navbar navbar-default"> <nav class="navbar navbar-light bg-faded">
<h3 class="navbar-brand"> <a class="navbar-brand" href="#">Navbar</a>
<a href="#">Navbar</a> <ul class="nav navbar-nav">
</h3>
</nav>
{% endexample %}
### Navigation
Use `.nav-pills` within a navbar for basic navigation.
{% example html %}
<nav class="navbar navbar-default">
<ul class="nav nav-pills">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>
@ -52,122 +49,23 @@ Use `.nav-pills` within a navbar for basic navigation.
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
</nav> <form class="form-inline navbar-form pull-right">
{% endexample %}
### Inline forms
Add an `.inline-form` within the navbar with nearly any combination of form controls and buttons.
{% example html %}
<nav class="navbar navbar-default">
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button> <button class="btn btn-success-outline" type="submit">Search</button>
</form> </form>
</nav> </nav>
{% endexample %} {% endexample %}
### Containers ## Color schemes
Although it's not required, you can wrap a navbar in a `.container` to center it on a page, or add one within to only center the contents of the navbar. Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.
{% example html %} Here are some examples to show what we mean.
<div class="container">
<nav class="navbar navbar-default">
<h3 class="navbar-brand">
<a href="#">Navbar</a>
</h3>
</nav>
</div>
{% endexample %}
{% example html %}
<nav class="navbar navbar-default">
<div class="container">
<h3 class="navbar-brand">
<a href="#">Navbar</a>
</h3>
</div>
</nav>
{% endexample %}
### Alignment
Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.
{% example html %}
<nav 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 <span class="sr-only">(current)</span></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>
</nav>
{% endexample %}
### Inverse color scheme
Replace `.navbar-default` with `.navbar-inverse` for a darker background color and white text.
{% example html %}
<nav 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 <span class="sr-only">(current)</span></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 class="form-inline pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</nav>
{% endexample %}
### Small navbar
Small navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the padding down, enables full-height navigation, and tweaks vertical alignment for search forms, buttons, and more. It's also available in both default and inverse schemes.
When moving from a regular navbar to a small one, be sure to update your inputs and buttons to use their small variations as well.
<div class="bd-example"> <div class="bd-example">
<nav class="navbar navbar-default navbar-sm"> <nav class="navbar navbar-dark bg-inverse">
<h3 class="navbar-brand pull-left"> <a class="navbar-brand" href="#">Navbar</a>
<a href="#">Navbar</a> <ul class="nav navbar-nav">
</h3>
<ul class="nav navbar-nav pull-left">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>
@ -181,17 +79,14 @@ When moving from a regular navbar to a small one, be sure to update your inputs
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="form-inline pull-right"> <form class="form-inline navbar-form pull-right">
<input class="form-control form-control-sm" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button> <button class="btn btn-info-outline" type="submit">Search</button>
</form> </form>
</nav> </nav>
<nav class="navbar navbar-dark bg-primary">
<nav class="navbar navbar-inverse navbar-sm"> <a class="navbar-brand" href="#">Navbar</a>
<h3 class="navbar-brand pull-left"> <ul class="nav navbar-nav">
<a href="#">Navbar</a>
</h3>
<ul class="nav navbar-nav pull-left">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>
@ -205,35 +100,97 @@ When moving from a regular navbar to a small one, be sure to update your inputs
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="form-inline pull-right"> <form class="form-inline navbar-form pull-right">
<input class="form-control form-control-sm" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button> <button class="btn btn-secondary-outline" type="submit">Search</button>
</form>
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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 class="form-inline navbar-form pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary-outline" type="submit">Search</button>
</form> </form>
</nav> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<nav class="navbar navbar-default navbar-sm"> <nav class="navbar navbar-dark bg-inverse">
<!-- Navbar contents --> <!-- Navbar content -->
</nav> </nav>
<nav class="navbar navbar-inverse navbar-sm"> <nav class="navbar navbar-dark bg-primary">
<!-- Navbar contents --> <!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav> </nav>
{% endhighlight %} {% endhighlight %}
### Collapsible content ## Containers
Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of the navbar.
{% example html %}
<div class="container">
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
{% endexample %}
{% example html %}
<nav class="navbar navbar-light bg-faded">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
{% endexample %}
## Placement
Navbars can be statically placed (their default behavior), or fixed to the top or bottom of the viewport.
{% example html %}
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
{% endexample %}
{% example html %}
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
{% endexample %}
## Collapsible content
Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content. Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
{% example html %} {% example html %}
<div class="collapse" id="exCollapsingNavbar"> <div class="collapse" id="exCollapsingNavbar">
<div class="inverse p-a"> <div class="bg-inverse p-a">
<h4>Collapsed content</h4> <h4>Collapsed content</h4>
<p>Toggleable via the navbar brand.</p> <span class="text-muted">Toggleable via the navbar brand.</span>
</div> </div>
</div> </div>
<nav class="navbar navbar-default"> <nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
&#9776; &#9776;
</button> </button>
@ -243,13 +200,26 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
For more complex navbar patterns, like those used in Bootstrap v3, use the `.navbar-toggleable-*` classes in conjunction with the `.navbar-toggler`. These classes override our responsive utilities to show navigation only when content is meant to be shown. For more complex navbar patterns, like those used in Bootstrap v3, use the `.navbar-toggleable-*` classes in conjunction with the `.navbar-toggler`. These classes override our responsive utilities to show navigation only when content is meant to be shown.
{% example html %} {% example html %}
<nav class="navbar navbar-default"> <nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2"> <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
&#9776; &#9776;
</button> </button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<h4>Collapsed on xs devices</h4> <a class="navbar-brand" href="#">Responsive navbar</a>
<p>Toggleable via the navbar brand.</p> <ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav> </nav>
{% endexample %} {% endexample %}

40
docs/components/navs.md
View File

@ -123,13 +123,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a href="#" class="nav-link">Another link</a>
@ -149,13 +149,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li><a href="#">Action</a></li> <a class="dropdown-item" href="#">Action</a>
<li><a href="#">Another action</a></li> <a class="dropdown-item" href="#">Another action</a>
<li><a href="#">Something else here</a></li> <a class="dropdown-item" href="#">Something else here</a>
<li role="separator" class="divider"></li> <div class="dropdown-divider"></div>
<li><a href="#">Separated link</a></li> <a class="dropdown-item" href="#">Separated link</a>
</ul> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Another link</a> <a href="#" class="nav-link">Another link</a>
@ -182,14 +182,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown Dropdown
</a> </a>
<ul class="dropdown-menu"> <div class="dropdown-menu">
<li> <a class="dropdown-item" href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
<a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a> <a class="dropdown-item" href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
</li> </div>
<li>
<a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
</li>
</ul>
</li> </li>
</ul> </ul>
<div id="myTabContent" class="tab-content"> <div id="myTabContent" class="tab-content">

1
docs/content/reboot.md
View File

@ -2,6 +2,7 @@
layout: docs layout: docs
title: Reboot title: Reboot
group: content group: content
redirect_from: "/content/"
--- ---
Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that. Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that.

275
docs/dist/css/bootstrap.css
View File

@ -495,11 +495,11 @@ h6, .h6 {
} }
h1, .h1 { h1, .h1 {
font-size: 2.75rem; font-size: 2.5rem;
} }
h2, .h2 { h2, .h2 {
font-size: 2.25rem; font-size: 2rem;
} }
h3, .h3 { h3, .h3 {
@ -1859,7 +1859,7 @@ pre code {
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
padding: .5rem .75rem; padding: .375rem .75rem;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
color: #55595c; color: #55595c;
@ -1917,7 +1917,7 @@ fieldset[disabled] .form-control {
} }
.form-control-label { .form-control-label {
padding: .5625rem .75rem; padding: .4375rem .75rem;
margin-bottom: 0; margin-bottom: 0;
} }
@ -1926,7 +1926,7 @@ fieldset[disabled] .form-control {
input[type="time"].form-control, input[type="time"].form-control,
input[type="datetime-local"].form-control, input[type="datetime-local"].form-control,
input[type="month"].form-control { input[type="month"].form-control {
line-height: 2.625rem; line-height: 2.375rem;
} }
input[type="date"].input-sm, input[type="date"].input-sm,
.input-group-sm input[type="date"].form-control, .input-group-sm input[type="date"].form-control,
@ -1951,9 +1951,9 @@ fieldset[disabled] .form-control {
} }
.form-control-static { .form-control-static {
min-height: 2.625rem; min-height: 2.375rem;
padding-top: .5625rem; padding-top: .4375rem;
padding-bottom: .5625rem; padding-bottom: .4375rem;
margin-bottom: 0; margin-bottom: 0;
} }
@ -1971,7 +1971,6 @@ fieldset[disabled] .form-control {
.form-control-sm, .input-group-sm > .form-control, .form-control-sm, .input-group-sm > .form-control,
.input-group-sm > .input-group-addon, .input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn { .input-group-sm > .input-group-btn > .btn {
height: 1.95rem;
padding: .275rem .75rem; padding: .275rem .75rem;
font-size: .85rem; font-size: .85rem;
line-height: 1.5; line-height: 1.5;
@ -1981,8 +1980,7 @@ fieldset[disabled] .form-control {
.form-control-lg, .input-group-lg > .form-control, .form-control-lg, .input-group-lg > .form-control,
.input-group-lg > .input-group-addon, .input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn { .input-group-lg > .input-group-btn > .btn {
height: 3.291667rem; padding: .75rem 1.25rem;
padding: .75rem 1.5rem;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.333333; line-height: 1.333333;
border-radius: .3rem; border-radius: .3rem;
@ -2071,9 +2069,9 @@ fieldset[disabled] .checkbox label {
.form-control-error { .form-control-error {
padding-right: 2.25rem; padding-right: 2.25rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center right .65625rem; background-position: center right .59375rem;
-webkit-background-size: 1.70625rem 1.70625rem; -webkit-background-size: 1.54375rem 1.54375rem;
background-size: 1.70625rem 1.70625rem; background-size: 1.54375rem 1.54375rem;
} }
.has-success .help-block, .has-success .help-block,
@ -2222,7 +2220,7 @@ fieldset[disabled] .checkbox label {
.btn { .btn {
display: inline-block; display: inline-block;
padding: .5rem 1rem; padding: .375rem 1rem;
font-size: 1rem; font-size: 1rem;
font-weight: normal; font-weight: normal;
line-height: 1.5; line-height: 1.5;
@ -2550,7 +2548,7 @@ fieldset[disabled] .btn-danger:hover {
.btn-primary-outline { .btn-primary-outline {
color: #0275d8; color: #0275d8;
background-color: #fff; background-color: transparent;
background-image: none; background-image: none;
border-color: #0275d8; border-color: #0275d8;
} }
@ -2588,7 +2586,7 @@ fieldset[disabled] .btn-primary-outline:hover {
.btn-secondary-outline { .btn-secondary-outline {
color: #ccc; color: #ccc;
background-color: #fff; background-color: transparent;
background-image: none; background-image: none;
border-color: #ccc; border-color: #ccc;
} }
@ -2626,7 +2624,7 @@ fieldset[disabled] .btn-secondary-outline:hover {
.btn-info-outline { .btn-info-outline {
color: #5bc0de; color: #5bc0de;
background-color: #fff; background-color: transparent;
background-image: none; background-image: none;
border-color: #5bc0de; border-color: #5bc0de;
} }
@ -2664,7 +2662,7 @@ fieldset[disabled] .btn-info-outline:hover {
.btn-success-outline { .btn-success-outline {
color: #5cb85c; color: #5cb85c;
background-color: #fff; background-color: transparent;
background-image: none; background-image: none;
border-color: #5cb85c; border-color: #5cb85c;
} }
@ -2702,7 +2700,7 @@ fieldset[disabled] .btn-success-outline:hover {
.btn-warning-outline { .btn-warning-outline {
color: #f0ad4e; color: #f0ad4e;
background-color: #fff; background-color: transparent;
background-image: none; background-image: none;
border-color: #f0ad4e; border-color: #f0ad4e;
} }
@ -2740,7 +2738,7 @@ fieldset[disabled] .btn-warning-outline:hover {
.btn-danger-outline { .btn-danger-outline {
color: #d9534f; color: #d9534f;
background-color: #fff; background-color: transparent;
background-image: none; background-image: none;
border-color: #d9534f; border-color: #d9534f;
} }
@ -2816,14 +2814,14 @@ fieldset[disabled] .btn-link:hover {
} }
.btn-lg, .btn-group-lg > .btn { .btn-lg, .btn-group-lg > .btn {
padding: .75rem 1.5rem; padding: .75rem 1.25rem;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.333333; line-height: 1.333333;
border-radius: .3rem; border-radius: .3rem;
} }
.btn-sm, .btn-group-sm > .btn { .btn-sm, .btn-group-sm > .btn {
padding: .275rem .75rem; padding: .25rem .75rem;
font-size: .85rem; font-size: .85rem;
line-height: 1.5; line-height: 1.5;
border-radius: .2rem; border-radius: .2rem;
@ -2919,47 +2917,51 @@ input[type="button"].btn-block {
border-radius: .25rem; border-radius: .25rem;
} }
.dropdown-menu .dropdown-divider { .dropdown-divider {
height: 1px; height: 1px;
margin: .5rem 0; margin: .5rem 0;
overflow: hidden; overflow: hidden;
background-color: #e5e5e5; background-color: #e5e5e5;
} }
.dropdown-menu > li > a { .dropdown-item {
display: block; display: block;
width: 100%;
padding: 3px 20px; padding: 3px 20px;
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 1.5; line-height: 1.5;
color: #373a3c; color: #373a3c;
text-align: inherit;
white-space: nowrap; white-space: nowrap;
background: none;
border: 0;
} }
.dropdown-menu > li > a:focus, .dropdown-item:focus,
.dropdown-menu > li > a:hover { .dropdown-item:hover {
color: #2b2d2f; color: #2b2d2f;
text-decoration: none; text-decoration: none;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.dropdown-menu > .active > a, .dropdown-item.active,
.dropdown-menu > .active > a:focus, .dropdown-item.active:focus,
.dropdown-menu > .active > a:hover { .dropdown-item.active:hover {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
background-color: #0275d8; background-color: #0275d8;
outline: 0; outline: 0;
} }
.dropdown-menu > .disabled > a, .dropdown-item.disabled,
.dropdown-menu > .disabled > a:focus, .dropdown-item.disabled:focus,
.dropdown-menu > .disabled > a:hover { .dropdown-item.disabled:hover {
color: #818a91; color: #818a91;
} }
.dropdown-menu > .disabled > a:focus, .dropdown-item.disabled:focus,
.dropdown-menu > .disabled > a:hover { .dropdown-item.disabled:hover {
text-decoration: none; text-decoration: none;
cursor: not-allowed; cursor: not-allowed;
background-color: transparent; background-color: transparent;
@ -3252,7 +3254,7 @@ input[type="button"].btn-block {
} }
.input-group-addon { .input-group-addon {
padding: .5rem .75rem; padding: .375rem .75rem;
font-size: 1rem; font-size: 1rem;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
@ -3272,7 +3274,7 @@ input[type="button"].btn-block {
.input-group-addon.form-control-lg, .input-group-lg > .input-group-addon, .input-group-addon.form-control-lg, .input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .input-group-addon.btn { .input-group-lg > .input-group-btn > .input-group-addon.btn {
padding: 1.5rem 1.5rem; padding: 1.25rem 1.25rem;
font-size: 1.25rem; font-size: 1.25rem;
border-radius: .3rem; border-radius: .3rem;
} }
@ -3640,7 +3642,7 @@ input[type="button"].btn-block {
.nav-tabs .nav-link { .nav-tabs .nav-link {
display: block; display: block;
padding: .75em 1em; padding: .5em 1em;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: .25rem .25rem 0 0; border-radius: .25rem .25rem 0 0;
} }
@ -3688,7 +3690,7 @@ input[type="button"].btn-block {
.nav-pills .nav-link { .nav-pills .nav-link {
display: block; display: block;
padding: .75em 1em; padding: .5em 1em;
border-radius: .25rem; border-radius: .25rem;
} }
@ -3735,8 +3737,7 @@ input[type="button"].btn-block {
.navbar { .navbar {
position: relative; position: relative;
padding: 1rem; padding: .5rem 1rem;
margin-bottom: 1rem;
} }
.navbar:before, .navbar:before,
@ -3805,15 +3806,14 @@ input[type="button"].btn-block {
.navbar-brand { .navbar-brand {
float: left; float: left;
padding: .625rem .75rem; padding-top: .25rem;
padding-bottom: .25rem;
margin-right: 1rem; margin-right: 1rem;
margin-bottom: 0;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1;
} }
.navbar-brand > a:focus, .navbar-brand:focus,
.navbar-brand > a:hover { .navbar-brand:hover {
text-decoration: none; text-decoration: none;
} }
@ -3821,14 +3821,27 @@ input[type="button"].btn-block {
display: block; display: block;
} }
.navbar-toggler { .navbar-divider {
padding: .55rem .75rem; float: left;
width: 1px;
padding-top: .425rem;
padding-bottom: .425rem;
margin-right: 1rem; margin-right: 1rem;
margin-bottom: 0; margin-left: 1rem;
overflow: hidden;
}
.navbar-divider:before {
content: '\00a0';
}
.navbar-toggler {
padding: .5rem .75rem;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1; line-height: 1;
background: none; background: none;
border: 0; border: .0625rem solid transparent;
border-radius: .25rem;
} }
.navbar-toggler:focus, .navbar-toggler:focus,
@ -3848,140 +3861,96 @@ input[type="button"].btn-block {
} }
} }
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.navbar-sm {
padding-top: 0;
padding-bottom: 0;
}
.navbar-sm .navbar-brand {
padding-top: .95rem;
padding-bottom: .95rem;
}
.navbar-sm .form-inline {
margin-top: .6rem;
}
.navbar-nav .nav-item { .navbar-nav .nav-item {
float: left; float: left;
} }
.navbar-nav .nav-link { .navbar-nav .nav-link {
display: block; display: block;
padding-top: .95rem; padding-top: .425rem;
padding-bottom: .95rem; padding-bottom: .425rem;
line-height: 1.25;
} }
.navbar-nav .open > .nav-link, .navbar-nav .nav-link + .nav-link {
.navbar-nav .open > .nav-link:focus, margin-left: 1rem;
.navbar-nav .open > .nav-link:hover,
.navbar-nav .active > .nav-link,
.navbar-nav .active > .nav-link:focus,
.navbar-nav .active > .nav-link:hover,
.navbar-nav .nav-link.open,
.navbar-nav .nav-link.open:focus,
.navbar-nav .nav-link.open:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active:focus,
.navbar-nav .nav-link.active:hover {
color: #555;
cursor: default;
background-color: #e7e7e7;
} }
.navbar-default { .navbar-nav .nav-item + .nav-item {
background-color: #f8f8f8; margin-left: 1rem;
border-color: #e7e7e7;
} }
.navbar-default .navbar-brand { .navbar-light .navbar-brand {
color: #777; color: rgba(0, 0, 0, .8);
} }
.navbar-default .navbar-brand:focus, .navbar-light .navbar-brand:focus,
.navbar-default .navbar-brand:hover { .navbar-light .navbar-brand:hover {
color: #5e5e5e; color: rgba(0, 0, 0, .8);
background-color: transparent;
} }
.navbar-inverse { .navbar-light .navbar-nav .nav-link {
background-color: #373a3c; color: rgba(0, 0, 0, .3);
border-color: #1f2021;
} }
.navbar-inverse .navbar-toggler, .navbar-light .navbar-nav .nav-link:focus,
.navbar-inverse .navbar-brand > a, .navbar-light .navbar-nav .nav-link:hover {
.navbar-inverse .nav-pills > .nav-item > .nav-link { color: rgba(0, 0, 0, .6);
color: #aab0b5;
} }
.navbar-inverse .navbar-toggler:focus, .navbar-light .navbar-nav .open > .nav-link,
.navbar-inverse .navbar-toggler:hover, .navbar-light .navbar-nav .open > .nav-link:focus,
.navbar-inverse .navbar-brand > a:focus, .navbar-light .navbar-nav .open > .nav-link:hover,
.navbar-inverse .navbar-brand > a:hover, .navbar-light .navbar-nav .active > .nav-link,
.navbar-inverse .nav-pills > .nav-item > .nav-link:focus, .navbar-light .navbar-nav .active > .nav-link:focus,
.navbar-inverse .nav-pills > .nav-item > .nav-link:hover { .navbar-light .navbar-nav .active > .nav-link:hover,
color: #fff; .navbar-light .navbar-nav .nav-link.open,
.navbar-light .navbar-nav .nav-link.open:focus,
.navbar-light .navbar-nav .nav-link.open:hover,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.active:focus,
.navbar-light .navbar-nav .nav-link.active:hover {
color: rgba(0, 0, 0, .8);
} }
.navbar-inverse .nav-pills > .nav-item > .nav-link:focus, .navbar-light .navbar-divider {
.navbar-inverse .nav-pills > .nav-item > .nav-link:hover { background-color: rgba(0, 0, 0, .075);
color: #fff;
background-color: #1f2021;
} }
.navbar-inverse .nav-pills > .active > .nav-link, .navbar-dark .navbar-brand {
.navbar-inverse .nav-pills > .nav-link.active { color: white;
color: #fff;
background-color: #1f2021;
} }
.navbar-inverse .navbar-brand { .navbar-dark .navbar-brand:focus,
color: #aab0b5; .navbar-dark .navbar-brand:hover {
color: white;
} }
.navbar-inverse .navbar-brand:focus, .navbar-dark .navbar-nav .nav-link {
.navbar-inverse .navbar-brand:hover { color: rgba(255, 255, 255, .5);
color: #fff;
background-color: transparent;
} }
.navbar-inverse .navbar-nav .navbar-link { .navbar-dark .navbar-nav .nav-link:focus,
color: #aab0b5; .navbar-dark .navbar-nav .nav-link:hover {
color: rgba(255, 255, 255, .75);
} }
.navbar-inverse .navbar-nav .navbar-link:focus, .navbar-dark .navbar-nav .open > .nav-link,
.navbar-inverse .navbar-nav .navbar-link:hover { .navbar-dark .navbar-nav .open > .nav-link:focus,
color: #fff; .navbar-dark .navbar-nav .open > .nav-link:hover,
background-color: transparent; .navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link:focus,
.navbar-dark .navbar-nav .active > .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.open,
.navbar-dark .navbar-nav .nav-link.open:focus,
.navbar-dark .navbar-nav .nav-link.open:hover,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.active:focus,
.navbar-dark .navbar-nav .nav-link.active:hover {
color: white;
} }
.navbar-inverse .navbar-nav .navbar-link.active > a, .navbar-dark .navbar-divider {
.navbar-inverse .navbar-nav .navbar-link.active > a:focus, background-color: rgba(255, 255, 255, .075);
.navbar-inverse .navbar-nav .navbar-link.active > a:hover {
color: #fff;
background-color: #1f2021;
}
.navbar-inverse .navbar-nav .navbar-link.disabled > a,
.navbar-inverse .navbar-nav .navbar-link.disabled > a:focus,
.navbar-inverse .navbar-nav .navbar-link.disabled > a:hover {
color: #444;
background-color: transparent;
} }
.card { .card {
@ -5997,11 +5966,15 @@ a.text-danger:hover {
color: #c9302c; color: #c9302c;
} }
.inverse { .bg-inverse {
color: #eceeef; color: #eceeef;
background-color: #373a3c; background-color: #373a3c;
} }
.bg-faded {
background-color: #f7f7f9;
}
.bg-primary { .bg-primary {
color: #fff; color: #fff;
background-color: #0275d8; background-color: #0275d8;

2
docs/dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/css/bootstrap.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

11
docs/dist/js/bootstrap.js
View File

@ -1454,7 +1454,7 @@ var Dropdown = (function ($) {
this.setAttribute('aria-expanded', 'true'); this.setAttribute('aria-expanded', 'true');
$(parent).toggleClass(ClassName.OPEN); $(parent).toggleClass(ClassName.OPEN);
$(parent).trigger(Event.SHOWN, relatedTarget); $(parent).trigger($.Event(Event.SHOWN, relatedTarget));
return false; return false;
} }
@ -1525,7 +1525,7 @@ var Dropdown = (function ($) {
toggles[i].setAttribute('aria-expanded', 'false'); toggles[i].setAttribute('aria-expanded', 'false');
$(_parent).removeClass(ClassName.OPEN).trigger(Event.HIDDEN, relatedTarget); $(_parent).removeClass(ClassName.OPEN).trigger($.Event(Event.HIDDEN, relatedTarget));
} }
} }
}, { }, {
@ -1669,6 +1669,7 @@ var Modal = (function ($) {
}; };
var ClassName = { var ClassName = {
SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
BACKDROP: 'modal-backdrop', BACKDROP: 'modal-backdrop',
OPEN: 'modal-open', OPEN: 'modal-open',
FADE: 'fade', FADE: 'fade',
@ -1679,7 +1680,7 @@ var Modal = (function ($) {
DIALOG: '.modal-dialog', DIALOG: '.modal-dialog',
DATA_TOGGLE: '[data-toggle="modal"]', DATA_TOGGLE: '[data-toggle="modal"]',
DATA_DISMISS: '[data-dismiss="modal"]', DATA_DISMISS: '[data-dismiss="modal"]',
SCROLLBAR_MEASURER: 'modal-scrollbar-measure' FIXED_CONTENT: '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
}; };
/** /**
@ -2029,7 +2030,7 @@ var Modal = (function ($) {
}, { }, {
key: '_setScrollbar', key: '_setScrollbar',
value: function _setScrollbar() { value: function _setScrollbar() {
var bodyPadding = parseInt($(document.body).css('padding-right') || 0, 10); var bodyPadding = parseInt($(Selector.FIXED_CONTENT).css('padding-right') || 0, 10);
this._originalBodyPadding = document.body.style.paddingRight || ''; this._originalBodyPadding = document.body.style.paddingRight || '';
@ -2047,7 +2048,7 @@ var Modal = (function ($) {
value: function _getScrollbarWidth() { value: function _getScrollbarWidth() {
// thx d.walsh // thx d.walsh
var scrollDiv = document.createElement('div'); var scrollDiv = document.createElement('div');
scrollDiv.className = Selector.SCROLLBAR_MEASURER; scrollDiv.className = ClassName.SCROLLBAR_MEASURER;
document.body.appendChild(scrollDiv); document.body.appendChild(scrollDiv);
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv); document.body.removeChild(scrollDiv);

5
docs/dist/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
docs/dist/js/umd/dropdown.js vendored
View File

@ -133,7 +133,7 @@
this.setAttribute('aria-expanded', 'true'); this.setAttribute('aria-expanded', 'true');
$(parent).toggleClass(ClassName.OPEN); $(parent).toggleClass(ClassName.OPEN);
$(parent).trigger(Event.SHOWN, relatedTarget); $(parent).trigger($.Event(Event.SHOWN, relatedTarget));
return false; return false;
} }
@ -204,7 +204,7 @@
toggles[i].setAttribute('aria-expanded', 'false'); toggles[i].setAttribute('aria-expanded', 'false');
$(_parent).removeClass(ClassName.OPEN).trigger(Event.HIDDEN, relatedTarget); $(_parent).removeClass(ClassName.OPEN).trigger($.Event(Event.HIDDEN, relatedTarget));
} }
} }
}, { }, {

7
docs/dist/js/umd/modal.js vendored
View File

@ -74,6 +74,7 @@
}; };
var ClassName = { var ClassName = {
SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
BACKDROP: 'modal-backdrop', BACKDROP: 'modal-backdrop',
OPEN: 'modal-open', OPEN: 'modal-open',
FADE: 'fade', FADE: 'fade',
@ -84,7 +85,7 @@
DIALOG: '.modal-dialog', DIALOG: '.modal-dialog',
DATA_TOGGLE: '[data-toggle="modal"]', DATA_TOGGLE: '[data-toggle="modal"]',
DATA_DISMISS: '[data-dismiss="modal"]', DATA_DISMISS: '[data-dismiss="modal"]',
SCROLLBAR_MEASURER: 'modal-scrollbar-measure' FIXED_CONTENT: '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
}; };
/** /**
@ -434,7 +435,7 @@
}, { }, {
key: '_setScrollbar', key: '_setScrollbar',
value: function _setScrollbar() { value: function _setScrollbar() {
var bodyPadding = parseInt($(document.body).css('padding-right') || 0, 10); var bodyPadding = parseInt($(Selector.FIXED_CONTENT).css('padding-right') || 0, 10);
this._originalBodyPadding = document.body.style.paddingRight || ''; this._originalBodyPadding = document.body.style.paddingRight || '';
@ -452,7 +453,7 @@
value: function _getScrollbarWidth() { value: function _getScrollbarWidth() {
// thx d.walsh // thx d.walsh
var scrollDiv = document.createElement('div'); var scrollDiv = document.createElement('div');
scrollDiv.className = Selector.SCROLLBAR_MEASURER; scrollDiv.className = ClassName.SCROLLBAR_MEASURER;
document.body.appendChild(scrollDiv); document.body.appendChild(scrollDiv);
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv); document.body.removeChild(scrollDiv);

1
docs/getting-started/introduction.md
View File

@ -2,6 +2,7 @@
layout: docs layout: docs
title: Introduction title: Introduction
group: getting-started group: getting-started
redirect_from: "/getting-started/"
--- ---
Bootstrap is the world's most popular framework for building responsive, mobile-first sites and applications. Inside you'll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever. Bootstrap is the world's most popular framework for building responsive, mobile-first sites and applications. Inside you'll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever.

1
docs/layout/overview.md
View File

@ -2,6 +2,7 @@
layout: docs layout: docs
title: Overview title: Overview
group: layout group: layout
redirect_from: "/layout/"
--- ---
Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes. Bootstrap includes several components and options for laying out your project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.

14
docs/migration.md
View File

@ -127,14 +127,22 @@ TODO: audit classes in v4 that aren't present in v4
### Responsive utilities ### Responsive utilities
The following deprecated Less/SCSS variables have been removed in v4.0.0: The following deprecated variables have been removed in v4.0.0:
* `@screen-phone`, `@screen-tablet`, `@screen-desktop`, `@screen-lg-desktop`. Use the more abstract `$screen-{xs,sm,md,lg,xl}-*` variables instead. * `@screen-phone`, `@screen-tablet`, `@screen-desktop`, `@screen-lg-desktop`. Use the more abstract `$screen-{xs,sm,md,lg,xl}-*` variables instead.
* `@screen-sm`, `@screen-md`, `@screen-lg`. Use the more clearly named `$screen-{xs,sm,md,lg,xl}-min` variables instead. * `@screen-sm`, `@screen-md`, `@screen-lg`. Use the more clearly named `$screen-{xs,sm,md,lg,xl}-min` variables instead.
* `@screen-xs`, `@screen-xs-min`. The extra small breakpoint has no lower bound, so these variables were logically absurd. Reformulate your expression in terms of `$screen-xs-max` instead. * `@screen-xs`, `@screen-xs-min`. The extra small breakpoint has no lower bound, so these variables were logically absurd. Reformulate your expression in terms of `$screen-xs-max` instead.
* `@grid-float-breakpoint`
The responsive utility classes have been overhauled. The old classes (`.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` `.visible-xs-block` `.visible-xs-inline` `.visible-xs-inline-block` `.visible-sm-block` `.visible-sm-inline` `.visible-sm-inline-block` `.visible-md-block` `.visible-md-inline` `.visible-md-inline-block` `.visible-lg-block` `.visible-lg-inline` `.visible-lg-inline-block`) are gone. They have been replaced by `.hidden-xs-up` `.hidden-xs-down` `.hidden-sm-up` `.hidden-sm-down` `.hidden-md-up` `.hidden-md-down` `.hidden-lg-up` `.hidden-lg-down`. The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider (e.g. `.hidden-md-up` hides an element on medium, large, and extra-large devices). The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller (e.g. `.hidden-md-down` hides an element on extra-small, small, and medium devices). Rather than using explicit `.visible-*` classes, you make an element visible by simply not hiding it at that screen size. You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes (e.g. `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large devices). Note that the changes to the grid breakpoints in v4 means that you'll need to go one breakpoint larger to achieve the same results (e.g. `.hidden-md` is more similar to `.hidden-lg-down` than to `.hidden-md-down`). .The new responsive utility classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases. The responsive utility classes have also been overhauled.
- The old classes (`.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` `.visible-xs-block` `.visible-xs-inline` `.visible-xs-inline-block` `.visible-sm-block` `.visible-sm-inline` `.visible-sm-inline-block` `.visible-md-block` `.visible-md-inline` `.visible-md-inline-block` `.visible-lg-block` `.visible-lg-inline` `.visible-lg-inline-block`) are gone.
- They have been replaced by `.hidden-xs-up` `.hidden-xs-down` `.hidden-sm-up` `.hidden-sm-down` `.hidden-md-up` `.hidden-md-down` `.hidden-lg-up` `.hidden-lg-down`.
- The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or larger (e.g. `.hidden-md-up` hides an element on medium, large, and extra-large devices).
- The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller (e.g. `.hidden-md-down` hides an element on extra-small, small, and medium devices).
Rather than using explicit `.visible-*` classes, you make an element visible by simply not hiding it at that screen size. You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes (e.g. `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large devices).
Note that the changes to the grid breakpoints in v4 means that you'll need to go one breakpoint larger to achieve the same results (e.g. `.hidden-md` is more similar to `.hidden-lg-down` than to `.hidden-md-down`). The new responsive utility classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.
## Misc notes to prioritize ## Misc notes to prioritize

5
scss/_alert.scss
View File

@ -1,8 +1,3 @@
//
// Alerts
// --------------------------------------------------
// //
// Base styles // Base styles
// //

4
scss/_animation.scss
View File

@ -1,7 +1,3 @@
//
// Component animations
// --------------------------------------------------
.fade { .fade {
opacity: 0; opacity: 0;
transition: opacity .15s linear; transition: opacity .15s linear;

5
scss/_breadcrumb.scss
View File

@ -1,8 +1,3 @@
//
// Breadcrumbs
// --------------------------------------------------
.breadcrumb { .breadcrumb {
padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
margin-bottom: $spacer-y; margin-bottom: $spacer-y;

5
scss/_button-group.scss
View File

@ -1,8 +1,3 @@
//
// Button groups
// --------------------------------------------------
// Make the div behave like a button // Make the div behave like a button
.btn-group, .btn-group,
.btn-group-vertical { .btn-group-vertical {

5
scss/_buttons.scss
View File

@ -1,8 +1,3 @@
//
// Buttons
// --------------------------------------------------
// //
// Base styles // Base styles
// //

5
scss/_carousel.scss
View File

@ -1,8 +1,3 @@
//
// Carousel
// --------------------------------------------------
// Wrapper for the slide container and indicators // Wrapper for the slide container and indicators
.carousel { .carousel {
position: relative; position: relative;

5
scss/_close.scss
View File

@ -1,8 +1,3 @@
//
// Close icons
// --------------------------------------------------
.close { .close {
float: right; float: right;
font-size: ($font-size-base * 1.5); font-size: ($font-size-base * 1.5);

5
scss/_code.scss
View File

@ -1,8 +1,3 @@
//
// Code (inline and block)
// --------------------------------------------------
// Inline and block code styles // Inline and block code styles
code, code,
kbd, kbd,

5
scss/_custom-forms.scss
View File

@ -1,8 +1,3 @@
//
// Custom forms
// --------------------------------------------------
// Embedded icons from Open Iconic. // Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury. // Released under MIT and copyright 2014 Waybury.
// http://useiconic.com/open // http://useiconic.com/open

93
scss/_dropdown.scss
View File

@ -1,8 +1,3 @@
//
// Dropdown menus
// --------------------------------------------------
// The dropdown wrapper (div) // The dropdown wrapper (div)
.dropup, .dropup,
.dropdown { .dropdown {
@ -48,59 +43,61 @@
border: 1px solid $dropdown-border; border: 1px solid $dropdown-border;
@include border-radius($border-radius); @include border-radius($border-radius);
@include box-shadow(0 6px 12px rgba(0,0,0,.175)); @include box-shadow(0 6px 12px rgba(0,0,0,.175));
// Dividers (basically an hr) within the dropdown
.dropdown-divider {
@include nav-divider($dropdown-divider-bg);
}
// Links within the dropdown menu
> li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: $line-height;
color: $dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
} }
// Hover/Focus state // Dividers (basically an hr) within the dropdown
.dropdown-menu > li > a { .dropdown-divider {
@include nav-divider($dropdown-divider-bg);
}
// Links, buttons, and more within the dropdown menu
.dropdown-item {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: $line-height;
color: $dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
// For `<button>`s
text-align: inherit;
width: 100%;
background: none;
border: 0;
@include hover-focus { @include hover-focus {
color: $dropdown-link-hover-color; color: $dropdown-link-hover-color;
text-decoration: none; text-decoration: none;
background-color: $dropdown-link-hover-bg; background-color: $dropdown-link-hover-bg;
} }
}
// Active state // Active state
.dropdown-menu > .active > a { &.active {
@include plain-hover-focus { @include plain-hover-focus {
color: $dropdown-link-active-color; color: $dropdown-link-active-color;
text-decoration: none; text-decoration: none;
background-color: $dropdown-link-active-bg; background-color: $dropdown-link-active-bg;
outline: 0; outline: 0;
} }
}
// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a {
@include plain-hover-focus {
color: $dropdown-link-disabled-color;
} }
// Nuke hover/focus effects // Disabled state
@include hover-focus { //
text-decoration: none; // Gray out text and ensure the hover/focus state remains gray
cursor: $cursor-disabled; &.disabled {
background-color: transparent; @include plain-hover-focus {
background-image: none; // Remove CSS gradient color: $dropdown-link-disabled-color;
@include reset-filter(); }
// Nuke hover/focus effects
@include hover-focus {
text-decoration: none;
cursor: $cursor-disabled;
background-color: transparent;
background-image: none; // Remove CSS gradient
@include reset-filter();
}
} }
} }

9
scss/_forms.scss
View File

@ -1,8 +1,3 @@
//
// Forms
// --------------------------------------------------
// //
// Textual form controls // Textual form controls
// //
@ -149,7 +144,7 @@
// issue documented in https://github.com/twbs/bootstrap/issues/15074. // issue documented in https://github.com/twbs/bootstrap/issues/15074.
.form-control-sm { .form-control-sm {
height: $input-height-sm; // height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm; padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: $line-height-sm; line-height: $line-height-sm;
@ -157,7 +152,7 @@
} }
.form-control-lg { .form-control-lg {
height: $input-height-lg; // height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg; padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: $line-height-lg; line-height: $line-height-lg;

5
scss/_grid.scss
View File

@ -1,8 +1,3 @@
//
// Grid system
// --------------------------------------------------
// Container widths // Container widths
// //
// Set the container width, and override it for fixed navbars in media queries. // Set the container width, and override it for fixed navbars in media queries.

5
scss/_input-group.scss
View File

@ -1,8 +1,3 @@
//
// Input groups
// --------------------------------------------------
// //
// Base styles // Base styles
// //

5
scss/_jumbotron.scss
View File

@ -1,8 +1,3 @@
//
// Jumbotron
// --------------------------------------------------
.jumbotron { .jumbotron {
padding: $jumbotron-padding ($jumbotron-padding / 2); padding: $jumbotron-padding ($jumbotron-padding / 2);
margin-bottom: $jumbotron-padding; margin-bottom: $jumbotron-padding;

6
scss/_labels.scss
View File

@ -1,7 +1,7 @@
// Base class
// //
// Labels // Requires one of the contextual, color modifier classes for `color` and
// -------------------------------------------------- // `background-color`.
.label { .label {
display: inline-block; display: inline-block;

5
scss/_list-group.scss
View File

@ -1,8 +1,3 @@
//
// List groups
// --------------------------------------------------
// Base class // Base class
// //
// Easily usable on <ul>, <ol>, or <div>. // Easily usable on <ul>, <ol>, or <div>.

6
scss/_media.scss
View File

@ -1,7 +1,3 @@
//
// Media
// --------------------------------------------------
@if $enable-flex { @if $enable-flex {
.media { .media {
display: flex; display: flex;
@ -47,7 +43,7 @@
.media-object { .media-object {
display: block; display: block;
// Fix collapse in webkit from max-width: 100% and display: table-cell. // Fix collapse in webkit from max-width: 100% and display: table-cell.
&.img-thumbnail { &.img-thumbnail {
max-width: none; max-width: none;

3
scss/_mixins.scss
View File

@ -1,6 +1,3 @@
// Mixins
// --------------------------------------------------
// Toggles // Toggles
// //
// Used in conjunction with global variables to enable certain theme features. // Used in conjunction with global variables to enable certain theme features.

5
scss/_modal.scss
View File

@ -1,8 +1,3 @@
//
// Modals
// --------------------------------------------------
// .modal-open - body class for killing the scroll // .modal-open - body class for killing the scroll
// .modal - container to scroll within // .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal // .modal-dialog - positioning shell for the actual modal

5
scss/_nav.scss
View File

@ -1,6 +1,7 @@
// Base class
// //
// Navs // Kickstart any navigation component with a set of style resets. Works with
// -------------------------------------------------- // `<nav>`s or `<ul>`s.
.nav { .nav {
padding-left: 0; padding-left: 0;

251
scss/_navbar.scss
View File

@ -1,8 +1,3 @@
//
// Navbars
// --------------------------------------------------
// Wrapper and base class // Wrapper and base class
// //
// Provide a static navbar from which we expand to create full-width, fixed, and // Provide a static navbar from which we expand to create full-width, fixed, and
@ -10,8 +5,7 @@
.navbar { .navbar {
position: relative; position: relative;
padding: $spacer; padding: $navbar-padding-vertical $navbar-padding-horizontal;
margin-bottom: $navbar-margin-bottom;
@include clearfix; @include clearfix;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
@ -20,7 +14,6 @@
} }
//
// Navbar alignment options // Navbar alignment options
// //
// Display the navbar across the entirety of the page or fixed it to the top or // Display the navbar across the entirety of the page or fixed it to the top or
@ -71,20 +64,19 @@
} }
//
// Brand/project name // Brand/project name
//
.navbar-brand { .navbar-brand {
float: left; float: left;
padding: .625rem .75rem; margin-right: 1rem;
margin-right: $spacer; padding-top: .25rem;
margin-bottom: 0; // For headings padding-bottom: .25rem;
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: 1;
> a { @include hover-focus {
@include hover-focus { text-decoration: none;
text-decoration: none;
}
} }
> img { > img {
@ -93,19 +85,33 @@
} }
.navbar-divider {
float: left;
width: 1px;
padding-top: .425rem;
padding-bottom: .425rem;
overflow: hidden;
margin-left: $navbar-padding-horizontal;
margin-right: $navbar-padding-horizontal;
&:before {
content: '\00a0';
}
}
// Navbar toggle // Navbar toggle
// //
// Custom button for toggling the `.navbar-collapse`, powered by the collapse // Custom button for toggling the `.navbar-collapse`, powered by the collapse
// Bootstrap JavaScript plugin. // Bootstrap JavaScript plugin.
.navbar-toggler { .navbar-toggler {
padding: .55rem .75rem; padding: .5rem .75rem;
margin-right: $spacer;
margin-bottom: 0; // For headings
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: 1; line-height: 1;
background: none; background: none;
border: 0; border: $border-width solid transparent;
@include border-radius($btn-border-radius);
@include hover-focus { @include hover-focus {
text-decoration: none; text-decoration: none;
@ -127,37 +133,9 @@
} }
// Dropdown menus // Navigation
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
@include border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
@include border-top-radius($navbar-border-radius);
@include border-bottom-radius(0);
}
// Small navbar
// //
// Condensed dimensions for an aesthetic closer to v3's navbar. // Custom navbar navigation built on the base `.nav` styles.
.navbar-sm {
padding-top: 0;
padding-bottom: 0;
.navbar-brand {
padding-top: .95rem;
padding-bottom: .95rem;
}
.form-inline {
margin-top: .6rem;
}
}
.navbar-nav { .navbar-nav {
.nav-item { .nav-item {
@ -166,138 +144,83 @@
.nav-link { .nav-link {
display: block; display: block;
padding-top: .95rem; padding-top: .425rem;
padding-bottom: .95rem; padding-bottom: .425rem;
line-height: 1.25; // Match the `.navbar-brand`
+ .nav-link {
margin-left: 1rem;
}
} }
.open > .nav-link, .nav-item + .nav-item {
.active > .nav-link, margin-left: 1rem;
.nav-link.open,
.nav-link.active {
@include plain-hover-focus {
color: $navbar-default-link-active-color;
cursor: default;
background-color: $navbar-default-link-active-bg;
}
} }
} }
// Dark links against a light background
// Alternate navbars .navbar-light {
// --------------------------------------------------
// todo: audit these styles
// Default navbar
.navbar-default {
background-color: $navbar-default-bg;
border-color: $navbar-default-border;
.navbar-brand { .navbar-brand {
color: $navbar-default-brand-color; color: $navbar-light-active-color;
@include hover-focus { @include hover-focus {
color: $navbar-default-brand-hover-color; color: $navbar-light-active-color;
background-color: $navbar-default-brand-hover-bg;
}
}
}
// Inverse navbar
.navbar-inverse {
background-color: $navbar-inverse-bg;
border-color: $navbar-inverse-border;
.navbar-toggler,
.navbar-brand > a,
.nav-pills > .nav-item > .nav-link {
color: $navbar-inverse-link-color;
@include hover-focus {
color: $navbar-inverse-link-hover-color;
}
}
.nav-pills > .nav-item > .nav-link {
@include 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 {
color: $navbar-inverse-brand-color;
@include hover-focus {
color: $navbar-inverse-brand-hover-color;
background-color: $navbar-inverse-brand-hover-bg;
} }
} }
.navbar-nav { .navbar-nav {
.navbar-link { .nav-link {
color: $navbar-inverse-link-color; color: $navbar-light-color;
@include hover-focus { @include hover-focus {
color: $navbar-inverse-link-hover-color; color: $navbar-light-hover-color;
background-color: $navbar-inverse-link-hover-bg;
} }
}
&.active > a { .open > .nav-link,
@include plain-hover-focus { .active > .nav-link,
color: $navbar-inverse-link-active-color; .nav-link.open,
background-color: $navbar-inverse-link-active-bg; .nav-link.active {
} @include plain-hover-focus {
} color: $navbar-light-active-color;
&.disabled > a {
@include plain-hover-focus {
color: $navbar-inverse-link-disabled-color;
background-color: $navbar-inverse-link-disabled-bg;
}
} }
} }
} }
// .navbar-collapse, .navbar-divider {
// .navbar-form { background-color: rgba(0,0,0,.075);
// border-color: darken($navbar-inverse-bg, 7%); }
// } }
//
// // Dropdowns // White links against a dark background
// .navbar-nav { .navbar-dark {
// > .open > a { .navbar-brand {
// @include plain-hover-focus { color: $navbar-dark-active-color;
// color: $navbar-inverse-link-active-color;
// background-color: $navbar-inverse-link-active-bg; @include hover-focus {
// } color: $navbar-dark-active-color;
// } }
// } }
// .navbar-link { .navbar-nav {
// color: $navbar-inverse-link-color; .nav-link {
// @include hover { color: $navbar-dark-color;
// color: $navbar-inverse-link-hover-color;
// } @include hover-focus {
// } color: $navbar-dark-hover-color;
// }
// .btn-link { }
// color: $navbar-inverse-link-color;
// .open > .nav-link,
// @include hover-focus { .active > .nav-link,
// color: $navbar-inverse-link-hover-color; .nav-link.open,
// } .nav-link.active {
// @include plain-hover-focus {
// &:disabled, color: $navbar-dark-active-color;
// fieldset[disabled] & { }
// @include hover-focus { }
// color: $navbar-inverse-link-disabled-color; }
// }
// } .navbar-divider {
// } background-color: rgba(255,255,255,.075);
}
} }

5
scss/_pager.scss
View File

@ -1,8 +1,3 @@
//
// Pager pagination
// --------------------------------------------------
.pager { .pager {
padding-left: 0; padding-left: 0;
margin-top: $spacer-y; margin-top: $spacer-y;

5
scss/_pagination.scss
View File

@ -1,8 +1,3 @@
//
// Pagination (multiple pages)
// --------------------------------------------------
.pagination { .pagination {
display: inline-block; display: inline-block;
padding-left: 0; padding-left: 0;

5
scss/_popover.scss
View File

@ -1,8 +1,3 @@
//
// Popovers
// --------------------------------------------------
.popover { .popover {
position: absolute; position: absolute;
top: 0; top: 0;

5
scss/_progress.scss
View File

@ -1,8 +1,3 @@
//
// Progress bars
// --------------------------------------------------
// //
// Progress animations // Progress animations
// //

4
scss/_responsive-embed.scss
View File

@ -1,7 +1,3 @@
//
// Responsive embed
// --------------------------------------------------
// Credit: Nicolas Gallagher and SUIT CSS. // Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive { .embed-responsive {

7
scss/_tables.scss
View File

@ -1,10 +1,5 @@
// //
// Custom tables // Basic Bootstrap table
// --------------------------------------------------
//
// Basic tables
// //
.table { .table {

5
scss/_tooltip.scss
View File

@ -1,8 +1,3 @@
//
// Tooltips
// --------------------------------------------------
// Base class // Base class
.tooltip { .tooltip {
position: absolute; position: absolute;

5
scss/_type.scss
View File

@ -1,8 +1,3 @@
//
// Typography
// --------------------------------------------------
// //
// Headings // Headings
// //

5
scss/_utilities-responsive.scss
View File

@ -1,8 +1,3 @@
//
// Responsive: Utility classes
// --------------------------------------------------
// //
// Mixins // Mixins
// //

11
scss/_utilities.scss
View File

@ -1,8 +1,3 @@
//
// Utility classes
// --------------------------------------------------
// //
// Floats // Floats
// //
@ -122,11 +117,15 @@
// Inverse // Inverse
// Todo: redo this as a proper class // Todo: redo this as a proper class
.inverse { .bg-inverse {
color: $gray-lighter; color: $gray-lighter;
background-color: $gray-dark; background-color: $gray-dark;
} }
.bg-faded {
background-color: $gray-lightest;
}
@include bg-variant('.bg-primary', $brand-primary); @include bg-variant('.bg-primary', $brand-primary);
@include bg-variant('.bg-success', $brand-success); @include bg-variant('.bg-success', $brand-success);

74
scss/_variables.scss
View File

@ -135,8 +135,8 @@ $font-size-lg: 1.25rem !default;
$font-size-sm: .85rem !default; $font-size-sm: .85rem !default;
$font-size-xs: .75rem !default; $font-size-xs: .75rem !default;
$font-size-h1: 2.75rem !default; $font-size-h1: 2.5rem !default;
$font-size-h2: 2.25rem !default; $font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default; $font-size-h3: 1.75rem !default;
$font-size-h4: 1.5rem !default; $font-size-h4: 1.5rem !default;
$font-size-h5: 1.25rem !default; $font-size-h5: 1.25rem !default;
@ -213,7 +213,7 @@ $table-border-color: $gray-lighter !default;
// For each of Bootstrap's buttons, define text, background and border color. // For each of Bootstrap's buttons, define text, background and border color.
$btn-padding-x: 1rem; $btn-padding-x: 1rem;
$btn-padding-y: .5rem; $btn-padding-y: .375rem;
$btn-font-weight: normal !default; $btn-font-weight: normal !default;
$btn-primary-color: #fff !default; $btn-primary-color: #fff !default;
@ -243,9 +243,9 @@ $btn-danger-border: $btn-danger-bg !default;
$btn-link-disabled-color: $gray-light !default; $btn-link-disabled-color: $gray-light !default;
$btn-padding-x-sm: .75rem !default; $btn-padding-x-sm: .75rem !default;
$btn-padding-y-sm: .275rem !default; $btn-padding-y-sm: .25rem !default;
$btn-padding-x-lg: 1.5rem !default; $btn-padding-x-lg: 1.25rem !default;
$btn-padding-y-lg: .75rem !default; $btn-padding-y-lg: .75rem !default;
// Allows for customizing button radius independently from global border radius // Allows for customizing button radius independently from global border radius
@ -257,7 +257,7 @@ $btn-border-radius-sm: $border-radius-sm;
// Forms // Forms
$input-padding-x: .75rem !default; $input-padding-x: .75rem !default;
$input-padding-y: .5rem !default; $input-padding-y: .375rem !default;
$input-bg: #fff !default; $input-bg: #fff !default;
$input-bg-disabled: $gray-lighter !default; $input-bg-disabled: $gray-lighter !default;
@ -278,7 +278,7 @@ $input-color-placeholder: #999 !default;
$input-padding-x-sm: .75rem !default; $input-padding-x-sm: .75rem !default;
$input-padding-y-sm: .275rem !default; $input-padding-y-sm: .275rem !default;
$input-padding-x-lg: 1.5rem !default; $input-padding-x-lg: 1.25rem !default;
$input-padding-y-lg: .75rem !default; $input-padding-y-lg: .75rem !default;
$input-height: (($font-size-base * $line-height) + ($input-padding-y * 2) + ($border-width * 2)) !default; $input-height: (($font-size-base * $line-height) + ($input-padding-y * 2) + ($border-width * 2)) !default;
@ -336,61 +336,25 @@ $zindex-modal: 1050 !default;
// Navbar // Navbar
//
//
// Basics of a navbar $navbar-border-radius: $border-radius !default;
$navbar-margin-bottom: $spacer-y !default; $navbar-padding-horizontal: $spacer !default;
$navbar-border-radius: $border-radius !default; $navbar-padding-vertical: ($spacer / 2) !default;
$navbar-padding-horizontal: $spacer !default;
$navbar-padding-vertical: ($spacer / 2) !default;
$navbar-default-color: #777 !default; $navbar-dark-color: rgba(255,255,255,.5);
$navbar-default-bg: #f8f8f8 !default; $navbar-dark-hover-color: rgba(255,255,255,.75);
$navbar-default-border: darken($navbar-default-bg, 6.5%) !default; $navbar-dark-active-color: rgba(255,255,255,1);
$navbar-dark-disabled-color: rgba(255,255,255,.25);
$navbar-default-link-color: #777 !default; $navbar-light-color: rgba(0,0,0,.3);
$navbar-default-link-hover-color: #333 !default; $navbar-light-hover-color: rgba(0,0,0,.6);
$navbar-default-link-hover-bg: transparent !default; $navbar-light-active-color: rgba(0,0,0,.8);
$navbar-default-link-active-color: #555 !default; $navbar-light-disabled-color: rgba(0,0,0,.15);
$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
$navbar-default-link-disabled-color: #ccc !default;
$navbar-default-link-disabled-bg: transparent !default;
$navbar-default-brand-color: $navbar-default-link-color !default;
$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
$navbar-default-brand-hover-bg: transparent !default;
$navbar-default-toggle-hover-bg: #ddd !default;
$navbar-default-toggle-icon-bar-bg: #888 !default;
$navbar-default-toggle-border-color: #ddd !default;
// Inverted navbar
$navbar-inverse-color: lighten($gray-light, 12%) !default;
$navbar-inverse-bg: #373a3c !default;
$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
$navbar-inverse-link-color: lighten($gray-light, 15%) !default;
$navbar-inverse-link-hover-color: #fff !default;
$navbar-inverse-link-hover-bg: transparent !default;
$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
$navbar-inverse-link-disabled-color: #444 !default;
$navbar-inverse-link-disabled-bg: transparent !default;
$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
$navbar-inverse-brand-hover-color: #fff !default;
$navbar-inverse-brand-hover-bg: transparent !default;
$navbar-inverse-toggle-hover-bg: #333 !default;
$navbar-inverse-toggle-icon-bar-bg: #fff !default;
$navbar-inverse-toggle-border-color: #333 !default;
// Navs // Navs
$nav-link-padding: .75em 1em !default; $nav-link-padding: .5em 1em !default;
$nav-link-hover-bg: $gray-lighter !default; $nav-link-hover-bg: $gray-lighter !default;
$nav-disabled-link-color: $gray-light !default; $nav-disabled-link-color: $gray-light !default;

2
scss/mixins/_buttons.scss
View File

@ -52,7 +52,7 @@
@mixin button-outline-variant($color) { @mixin button-outline-variant($color) {
color: $color; color: $color;
background-image: none; background-image: none;
background-color: $body-bg; background-color: transparent;
border-color: $color; border-color: $color;
&:focus, &:focus,