Hopiu/bootstrap
1
0
Fork 0
mirror of https://github.com/Hopiu/bootstrap.git synced 2026-04-27 23:44:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'v4-dev' into colors-redux

Browse source
This commit is contained in:
Mark Otto 2017-06-18 02:19:34 -07:00
commit 74f1d002b4
57 changed files with 575 additions and 472 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.scss-lint.yml
View file

@ -153,6 +153,7 @@ linters:
- align-items
- align-self
- justify-content
- order
- float
- width
- min-width

9
README.md
View file

@ -8,7 +8,14 @@
<p align="center">
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
<br>
<a href="https://v4-alpha.getbootstrap.com"><strong>Visit Bootstrap &raquo;</strong></a>
<a href="https://v4-alpha.getbootstrap.com"><strong>Explore Bootstrap docs &raquo;</strong></a>
<br>
<br>
<a href="https://themes.getbootstrap.com">Bootstrap Themes</a>
&middot;
<a href="https://jobs.getbootstrap.com">Job Board</a>
&middot;
<a href="https://blog.getbootstrap.com">Blog</a>
</p>
</p>

2
_data/nav.yml
View file

@ -7,7 +7,7 @@
- title: JavaScript
- title: Options
- title: Build tools
- title: Best practices
# - title: Best practices # TODO: Write this content
- title: Webpack
- title: Accessibility

12
_includes/docs-navbar.html
View file

@ -1,5 +1,5 @@
<header class="navbar navbar-inverse navbar-expand-md flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/">
<header class="navbar navbar-inverse flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/" aria-label="Bootstrap">
{% include icons/bootstrap.svg width="36" height="36" class="d-block" %}
</a>
@ -43,21 +43,21 @@
</li>
<li class="nav-item">
<a class="nav-link p-2" href="{{ site.repo }}" target="_blank">
<a class="nav-link p-2" href="{{ site.repo }}" target="_blank" aria-label="GitHub">
{% include icons/github.svg class="navbar-nav-svg" %}
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}" target="_blank">
<a class="nav-link p-2" href="https://twitter.com/{{ site.twitter }}" target="_blank" aria-label="Twitter">
{% include icons/twitter.svg class="navbar-nav-svg" %}
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="{{ site.slack }}" target="_blank">
<a class="nav-link p-2" href="{{ site.slack }}" target="_blank" aria-label="Slack">
{% include icons/slack.svg class="navbar-nav-svg" %}
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-md-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
</header>

2
_includes/icons/bootstrap.svg
View file

@ -1 +1 @@
<svg {% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg {% if include.class %} class="{{ include.class }}"{% endif %}{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 849 B

After

Width:  |  Height:  |  Size: 891 B

2
_includes/icons/github.svg
View file

@ -1 +1 @@
<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

2
_includes/icons/menu.svg
View file

@ -1 +1 @@
<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 373 B

After

Width:  |  Height:  |  Size: 410 B

2
_includes/icons/slack.svg
View file

@ -1 +1 @@
<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

2
_includes/icons/twitter.svg
View file

@ -1 +1 @@
<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 843 B

After

Width:  |  Height:  |  Size: 861 B

13
_layouts/docs.html
View file

@ -17,18 +17,19 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
{% include docs-sidebar.html %}
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">{{ page.title }}</h1>
<p class="bd-lead">{{ page.description }}</p>
{% include ads.html %}
{{ content }}
</main>
{% if page.toc %}
<div class="d-none d-xl-block col-xl-2 bd-toc">
{{ content | toc_only }}
</div>
{% endif %}
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">{{ page.title }}</h1>
<p class="bd-lead">{{ page.description }}</p>
{% include ads.html %}
{{ content }}
</main>
</div>
</div>

2
assets/scss/_content.scss
View file

@ -5,6 +5,8 @@
//
.bd-content {
order: 1;
// Hack the sticky header
> h2[id],
> h3[id],

13
assets/scss/_nav.scss
View file

@ -1,5 +1,3 @@
// scss-lint:disable VendorPrefix
//
// Main navbar
//
@ -17,7 +15,7 @@
max-width: 100%;
height: 2.5rem;
margin-top: .25rem;
overflow-x: hidden;
overflow: hidden;
font-size: .875rem;
.navbar-nav {
@ -30,10 +28,11 @@
}
@include media-breakpoint-up(md) {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1071; // over everything in bootstrap
@supports (position: sticky) {
position: sticky;
top: 0;
z-index: 1071; // over everything in bootstrap
}
}
.navbar-nav {

2
assets/scss/_sidebar.scss
View file

@ -10,6 +10,7 @@
top: 4rem;
max-height: calc(100vh - 4rem);
}
order: 2;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
overflow-x: visible;
@ -49,6 +50,7 @@
//
.bd-sidebar {
order: 0;
background-color: #f5f2f9;
border-bottom: 1px solid rgba(0,0,0,.1);

73
dist/css/bootstrap.css
View file

@ -3815,7 +3815,7 @@ tbody.collapse.show {
}
.nav-pills .nav-link.active,
.show .nav-pills .nav-link {
.show > .nav-pills .nav-link {
color: #fff;
background-color: #0275d8;
}
@ -3930,11 +3930,8 @@ tbody.collapse.show {
}
.navbar-nav .dropdown-menu {
position: static !important;
position: static;
float: none;
-webkit-transform: unset !important;
-o-transform: unset !important;
transform: unset !important;
}
.navbar-text {
@ -4004,8 +4001,11 @@ tbody.collapse.show {
flex-direction: row;
}
.navbar-expand-sm .navbar-nav .dropdown-menu {
position: absolute !important;
top: 100% !important;
position: absolute;
}
.navbar-expand-sm .navbar-nav .dropdown-menu-right {
right: 0;
left: auto;
}
.navbar-expand-sm .navbar-nav .nav-link {
padding-right: .5rem;
@ -4059,8 +4059,11 @@ tbody.collapse.show {
flex-direction: row;
}
.navbar-expand-md .navbar-nav .dropdown-menu {
position: absolute !important;
top: 100% !important;
position: absolute;
}
.navbar-expand-md .navbar-nav .dropdown-menu-right {
right: 0;
left: auto;
}
.navbar-expand-md .navbar-nav .nav-link {
padding-right: .5rem;
@ -4114,8 +4117,11 @@ tbody.collapse.show {
flex-direction: row;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute !important;
top: 100% !important;
position: absolute;
}
.navbar-expand-lg .navbar-nav .dropdown-menu-right {
right: 0;
left: auto;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: .5rem;
@ -4169,8 +4175,11 @@ tbody.collapse.show {
flex-direction: row;
}
.navbar-expand-xl .navbar-nav .dropdown-menu {
position: absolute !important;
top: 100% !important;
position: absolute;
}
.navbar-expand-xl .navbar-nav .dropdown-menu-right {
right: 0;
left: auto;
}
.navbar-expand-xl .navbar-nav .nav-link {
padding-right: .5rem;
@ -4223,8 +4232,12 @@ tbody.collapse.show {
}
.navbar-expand .navbar-nav .dropdown-menu {
position: absolute !important;
top: 100% !important;
position: absolute;
}
.navbar-expand .navbar-nav .dropdown-menu-right {
right: 0;
left: auto;
}
.navbar-expand .navbar-nav .nav-link {
@ -6067,27 +6080,27 @@ a.bg-inverse:focus, a.bg-inverse:hover {
}
.rounded {
border-radius: 0.25rem;
border-radius: 0.25rem !important;
}
.rounded-top {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
border-top-left-radius: 0.25rem !important;
border-top-right-radius: 0.25rem !important;
}
.rounded-right {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0.25rem !important;
border-bottom-right-radius: 0.25rem !important;
}
.rounded-bottom {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important;
}
.rounded-left {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important;
}
.rounded-circle {
@ -7330,11 +7343,13 @@ a.bg-inverse:focus, a.bg-inverse:hover {
z-index: 1030;
}
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
@supports ((position: -webkit-sticky) or (position: sticky)) {
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}
}
.sr-only {

BIN
dist/css/bootstrap.css.map vendored
View file

Binary file not shown.

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

File diff suppressed because one or more lines are too long

BIN
dist/css/bootstrap.min.css.map vendored
View file

Binary file not shown.

460
dist/js/bootstrap.js
View file

File diff suppressed because it is too large Load diff

2
dist/js/bootstrap.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
docs/4.0/components/input-group.md
View file

@ -8,7 +8,7 @@ toc: true
## Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group.**
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group** and `<label>`s must come outside the input group.
{% example html %}
<div class="input-group">

32
docs/4.0/examples/index.md
View file

@ -15,15 +15,15 @@ Examples that focus on implementing uses of built-in components provided by Boot
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/starter-template/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/starter-template.jpg" alt="">
<h4>Starter template</h4>
</a>
<h4>Starter template</h4>
<p>Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/grid/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/grid.jpg" alt="">
<h4>Grids</h4>
</a>
<h4>Grids</h4>
<p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
<div class="clearfix hidden-md-up"></div>
@ -31,8 +31,8 @@ Examples that focus on implementing uses of built-in components provided by Boot
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/jumbotron/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/jumbotron.jpg" alt="">
<h4>Jumbotron</h4>
</a>
<h4>Jumbotron</h4>
<p>Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
<div class="col-6 col-md-4">
@ -52,15 +52,15 @@ Taking the default navbar component and showing how it can be moved, placed, and
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbars/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar.jpg" alt="">
<h4>Navbar</h4>
</a>
<h4>Navbar</h4>
<p>Super basic template that includes the navbar along with some additional content.</p>
</div>
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-top/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-static.jpg" alt="">
<h4>Static top navbar</h4>
</a>
<h4>Static top navbar</h4>
<p>Super basic template with a static top navbar along with some additional content.</p>
</div>
<div class="clearfix hidden-md-up"></div>
@ -68,8 +68,8 @@ Taking the default navbar component and showing how it can be moved, placed, and
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-top-fixed/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-fixed.jpg" alt="">
<h4>Fixed navbar</h4>
</a>
<h4>Fixed navbar</h4>
<p>Super basic template with a fixed top navbar along with some additional content.</p>
</div>
</div>
@ -82,15 +82,15 @@ Brand new components and templates to help folks quickly get started with Bootst
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/album/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/album.jpg" alt="">
<h4>Album</h4>
</a>
<h4>Album</h4>
<p>Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/cover/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/cover.jpg" alt="">
<h4>Cover</h4>
</a>
<h4>Cover</h4>
<p>A one-page template for building simple and beautiful home pages.</p>
</div>
<div class="clearfix hidden-md-up"></div>
@ -98,15 +98,15 @@ Brand new components and templates to help folks quickly get started with Bootst
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/carousel/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/carousel.jpg" alt="">
<h4>Carousel</h4>
</a>
<h4>Carousel</h4>
<p>Customize the navbar and carousel, then add some new components.</p>
</div>
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/blog/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/blog.jpg" alt="">
<h4>Blog</h4>
</a>
<h4>Blog</h4>
<p>Simple two-column blog layout with custom navigation, header, and type.</p>
</div>
<div class="clearfix hidden-md-up"></div>
@ -114,15 +114,15 @@ Brand new components and templates to help folks quickly get started with Bootst
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/dashboard/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/dashboard.jpg" alt="">
<h4>Dashboard</h4>
</a>
<h4>Dashboard</h4>
<p>Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/signin/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sign-in.jpg" alt="">
<h4>Sign-in page</h4>
</a>
<h4>Sign-in page</h4>
<p>Custom form layout and design for a simple sign in form.</p>
</div>
<div class="clearfix hidden-md-up"></div>
@ -130,15 +130,15 @@ Brand new components and templates to help folks quickly get started with Bootst
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/justified-nav/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/justified-nav.jpg" alt="">
<h4>Justified nav</h4>
</a>
<h4>Justified nav</h4>
<p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p>
</div>
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/sticky-footer/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sticky-footer.jpg" alt="">
<h4>Sticky footer</h4>
</a>
<h4>Sticky footer</h4>
<p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
</div>
<div class="clearfix hidden-md-up"></div>
@ -146,8 +146,8 @@ Brand new components and templates to help folks quickly get started with Bootst
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/sticky-footer-navbar/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sticky-footer-navbar.jpg" alt="">
<h4>Sticky footer w/ navbar</h4>
</a>
<h4>Sticky footer w/ navbar</h4>
<p>Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
</div>
@ -160,8 +160,8 @@ Examples that focus on future-friendly features or techniques.
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/offcanvas/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/offcanvas.jpg" alt="">
<h4>Offcanvas</h4>
</a>
<h4>Offcanvas</h4>
<p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
</div>
</div>

2
docs/4.0/getting-started/download.md
View file

@ -12,7 +12,7 @@ toc: true
**Current version:** v{{ site.current_version}}
<a href="{{ site.download.dist }}" class="btn btn-lg " onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
<a href="{{ site.download.dist }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
## Source files
**Want to compile Bootstrap with your project's asset pipeline?** Choose this option to download our source Sass, JavaScript, and documentation files. Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes), and [some setup]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup).

9
docs/4.0/getting-started/options.md
View file

@ -1,23 +1,18 @@
---
layout: docs
title: Customization options
description: Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new Sass variables.
description: Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.
group: getting-started
toc: true
---
## Customizing variables
Bootstrap 4 ships with a `_custom.scss` file for easy overriding of default variables in `/scss/_variables.scss`. Copy and paste relevant lines from there into the `_custom.scss` file, modify the values, and recompile your Sass to change our default values. **Be sure to remove the `!default` flag from override values.**
Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass even after that original variable's been defined. Copy and paste variables as needed, modify the values, remove the `!default` flag, and recompile.
For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following:
{% highlight scss %}
// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.
$body-bg: $gray-dark;
$body-color: $gray-light;
{% endhighlight %}

2
docs/4.0/utilities/position.md
View file

@ -26,6 +26,8 @@ Position an element at the bottom of the viewport, from edge to edge. Be sure yo
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers.
**Microsoft Edge and IE11 will render `position: sticky` as `position: relative`.** As such, we wrap the styles in a `@supports` query, limiting the stickiness to only browsers that properly can render it.
{% highlight html %}
<div class="sticky-top">...</div>
{% endhighlight %}

18
js/dist/alert.js vendored
View file

@ -39,14 +39,14 @@ var Alert = function ($) {
ALERT: 'alert',
FADE: 'fade',
SHOW: 'show'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Alert = function () {
function Alert(element) {
_classCallCheck(this, Alert);
@ -163,7 +163,7 @@ var Alert = function ($) {
* ------------------------------------------------------------------------
*/
$(document).on(Event.CLICK_DATA_API, Selector.DISMISS, Alert._handleDismiss(new Alert()));
$(document).on(Event.CLICK_DATA_API, Selector.DISMISS, Alert._handleDismiss(new Alert())
/**
* ------------------------------------------------------------------------
@ -171,7 +171,7 @@ var Alert = function ($) {
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Alert._jQueryInterface;
);$.fn[NAME] = Alert._jQueryInterface;
$.fn[NAME].Constructor = Alert;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;

BIN
js/dist/alert.js.map vendored
View file

Binary file not shown.

18
js/dist/button.js vendored
View file

@ -41,14 +41,14 @@ var Button = function ($) {
var Event = {
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY,
FOCUS_BLUR_DATA_API: 'focus' + EVENT_KEY + DATA_API_KEY + ' ' + ('blur' + EVENT_KEY + DATA_API_KEY)
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Button = function () {
function Button(element) {
_classCallCheck(this, Button);
@ -154,7 +154,7 @@ var Button = function ($) {
}).on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, function (event) {
var button = $(event.target).closest(Selector.BUTTON)[0];
$(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type));
});
}
/**
* ------------------------------------------------------------------------
@ -162,7 +162,7 @@ var Button = function ($) {
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Button._jQueryInterface;
);$.fn[NAME] = Button._jQueryInterface;
$.fn[NAME].Constructor = Button;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;

BIN
js/dist/button.js.map vendored
View file

Binary file not shown.

18
js/dist/carousel.js vendored
View file

@ -83,14 +83,14 @@ var Carousel = function ($) {
INDICATORS: '.carousel-indicators',
DATA_SLIDE: '[data-slide], [data-slide-to]',
DATA_RIDE: '[data-ride="carousel"]'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Carousel = function () {
function Carousel(element, config) {
_classCallCheck(this, Carousel);
@ -493,7 +493,7 @@ var Carousel = function ($) {
var $carousel = $(this);
Carousel._jQueryInterface.call($carousel, $carousel.data());
});
});
}
/**
* ------------------------------------------------------------------------
@ -501,7 +501,7 @@ var Carousel = function ($) {
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Carousel._jQueryInterface;
);$.fn[NAME] = Carousel._jQueryInterface;
$.fn[NAME].Constructor = Carousel;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;

BIN
js/dist/carousel.js.map vendored
View file

Binary file not shown.

22
js/dist/collapse.js vendored
View file

@ -60,14 +60,14 @@ var Collapse = function ($) {
var Selector = {
ACTIVES: '.show, .collapsing',
DATA_TOGGLE: '[data-toggle="collapse"]'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Collapse = function () {
function Collapse(element, config) {
_classCallCheck(this, Collapse);
@ -249,8 +249,8 @@ var Collapse = function ($) {
Collapse.prototype._getConfig = function _getConfig(config) {
config = $.extend({}, Default, config);
config.toggle = Boolean(config.toggle); // coerce string values
Util.typeCheckConfig(NAME, config, DefaultType);
config.toggle = Boolean(config.toggle // coerce string values
);Util.typeCheckConfig(NAME, config, DefaultType);
return config;
};
@ -347,7 +347,7 @@ var Collapse = function ($) {
var config = data ? 'toggle' : $trigger.data();
Collapse._jQueryInterface.call($target, config);
});
});
}
/**
* ------------------------------------------------------------------------
@ -355,7 +355,7 @@ var Collapse = function ($) {
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Collapse._jQueryInterface;
);$.fn[NAME] = Collapse._jQueryInterface;
$.fn[NAME].Constructor = Collapse;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;

BIN
js/dist/collapse.js.map vendored
View file

Binary file not shown.

70
js/dist/dropdown.js vendored
View file

@ -85,14 +85,14 @@ var Dropdown = function ($) {
placement: 'string',
offset: '(number|string)',
flip: 'boolean'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Dropdown = function () {
function Dropdown(element, config) {
_classCallCheck(this, Dropdown);
@ -101,6 +101,7 @@ var Dropdown = function ($) {
this._popper = null;
this._config = this._getConfig(config);
this._menu = this._getMenuElement();
this._inNavbar = this._detectNavbar();
this._addEventListeners();
}
@ -141,17 +142,7 @@ var Dropdown = function ($) {
element = parent;
}
}
this._popper = new Popper(element, this._menu, {
placement: this._getPlacement(),
modifiers: {
offset: {
offset: this._config.offset
},
flip: {
enabled: this._config.flip
}
}
});
this._popper = new Popper(element, this._menu, this._getPopperConfig());
// if this is a touch-enabled device we add extra
// empty mouseover listeners to the body's immediate children;
@ -180,6 +171,7 @@ var Dropdown = function ($) {
};
Dropdown.prototype.update = function update() {
this._inNavbar = this._detectNavbar();
if (this._popper !== null) {
this._popper.scheduleUpdate();
}
@ -228,14 +220,44 @@ var Dropdown = function ($) {
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.TOPEND;
}
} else {
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.BOTTOMEND;
}
} else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.BOTTOMEND;
}
return placement;
};
Dropdown.prototype._detectNavbar = function _detectNavbar() {
return $(this._element).closest('.navbar').length > 0;
};
Dropdown.prototype._getPopperConfig = function _getPopperConfig() {
var _this2 = this;
var popperConfig = {
placement: this._getPlacement(),
modifiers: {
offset: {
offset: this._config.offset
},
flip: {
enabled: this._config.flip
}
}
};
if (this._inNavbar) {
popperConfig.modifiers.AfterApplyStyle = {
enabled: true,
order: 901, // ApplyStyle order + 1
fn: function fn() {
// reset Popper styles
$(_this2._menu).attr('style', '');
}
};
}
return popperConfig;
};
// static
Dropdown._jQueryInterface = function _jQueryInterface(config) {
@ -396,7 +418,7 @@ var Dropdown = function ($) {
Dropdown._jQueryInterface.call($(this), 'toggle');
}).on(Event.CLICK_DATA_API, Selector.FORM_CHILD, function (e) {
e.stopPropagation();
});
}
/**
* ------------------------------------------------------------------------
@ -404,7 +426,7 @@ var Dropdown = function ($) {
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Dropdown._jQueryInterface;
);$.fn[NAME] = Dropdown._jQueryInterface;
$.fn[NAME].Constructor = Dropdown;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;

BIN
js/dist/dropdown.js.map vendored
View file

Binary file not shown.

38
js/dist/modal.js vendored
View file

@ -71,14 +71,14 @@ var Modal = function ($) {
DATA_DISMISS: '[data-dismiss="modal"]',
FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
NAVBAR_TOGGLER: '.navbar-toggler'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Modal = function () {
function Modal(element, config) {
_classCallCheck(this, Modal);
@ -270,8 +270,8 @@ var Modal = function ($) {
Modal.prototype._enforceFocus = function _enforceFocus() {
var _this4 = this;
$(document).off(Event.FOCUSIN) // guard against infinite focus loop
.on(Event.FOCUSIN, function (event) {
$(document).off(Event.FOCUSIN // guard against infinite focus loop
).on(Event.FOCUSIN, function (event) {
if (document !== event.target && _this4._element !== event.target && !$(_this4._element).has(event.target).length) {
_this4._element.focus();
}
@ -433,17 +433,17 @@ var Modal = function ($) {
var actualPadding = $(element)[0].style.paddingRight;
var calculatedPadding = $(element).css('padding-right');
$(element).data('padding-right', actualPadding).css('padding-right', parseFloat(calculatedPadding) + _this9._scrollbarWidth + 'px');
});
}
// Adjust navbar-toggler margin
$(Selector.NAVBAR_TOGGLER).each(function (index, element) {
);$(Selector.NAVBAR_TOGGLER).each(function (index, element) {
var actualMargin = $(element)[0].style.marginRight;
var calculatedMargin = $(element).css('margin-right');
$(element).data('margin-right', actualMargin).css('margin-right', parseFloat(calculatedMargin) + _this9._scrollbarWidth + 'px');
});
}
// Adjust body padding
var actualPadding = document.body.style.paddingRight;
);var actualPadding = document.body.style.paddingRight;
var calculatedPadding = $('body').css('padding-right');
$('body').data('padding-right', actualPadding).css('padding-right', parseFloat(calculatedPadding) + this._scrollbarWidth + 'px');
}
@ -456,18 +456,18 @@ var Modal = function ($) {
if (typeof padding !== 'undefined') {
$(element).css('padding-right', padding).removeData('padding-right');
}
});
}
// Restore navbar-toggler margin
$(Selector.NAVBAR_TOGGLER).each(function (index, element) {
);$(Selector.NAVBAR_TOGGLER).each(function (index, element) {
var margin = $(element).data('margin-right');
if (typeof margin !== 'undefined') {
$(element).css('margin-right', margin).removeData('margin-right');
}
});
}
// Restore body padding
var padding = $('body').data('padding-right');
);var padding = $('body').data('padding-right');
if (typeof padding !== 'undefined') {
$('body').css('padding-right', padding).removeData('padding-right');
}
@ -557,7 +557,7 @@ var Modal = function ($) {
});
Modal._jQueryInterface.call($(target), config, this);
});
}
/**
* ------------------------------------------------------------------------
@ -565,7 +565,7 @@ var Modal = function ($) {
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Modal._jQueryInterface;
);$.fn[NAME] = Modal._jQueryInterface;
$.fn[NAME].Constructor = Modal;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;

BIN
js/dist/modal.js.map vendored
View file

Binary file not shown.

18
js/dist/popover.js vendored
View file

@ -63,14 +63,14 @@ var Popover = function ($) {
FOCUSOUT: 'focusout' + EVENT_KEY,
MOUSEENTER: 'mouseenter' + EVENT_KEY,
MOUSELEAVE: 'mouseleave' + EVENT_KEY
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Popover = function (_Tooltip) {
_inherits(Popover, _Tooltip);
@ -95,10 +95,10 @@ var Popover = function ($) {
};
Popover.prototype.setContent = function setContent() {
var $tip = $(this.getTipElement());
var $tip = $(this.getTipElement()
// we use append for html objects to maintain js events
this.setElementContent($tip.find(Selector.TITLE), this.getTitle());
);this.setElementContent($tip.find(Selector.TITLE), this.getTitle());
this.setElementContent($tip.find(Selector.CONTENT), this._getContent());
$tip.removeClass(ClassName.FADE + ' ' + ClassName.SHOW);

BIN
js/dist/popover.js.map vendored
View file

Binary file not shown.

22
js/dist/scrollspy.js vendored
View file

@ -64,14 +64,14 @@ var ScrollSpy = function ($) {
var OffsetMethod = {
OFFSET: 'offset',
POSITION: 'position'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var ScrollSpy = function () {
function ScrollSpy(element, config) {
var _this = this;
@ -236,10 +236,10 @@ var ScrollSpy = function ($) {
$link.addClass(ClassName.ACTIVE);
} else {
// Set triggered link as active
$link.addClass(ClassName.ACTIVE);
$link.addClass(ClassName.ACTIVE
// Set triggered links parents as active
// With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
$link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_LINKS + ', ' + Selector.LIST_ITEMS).addClass(ClassName.ACTIVE);
);$link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_LINKS + ', ' + Selector.LIST_ITEMS).addClass(ClassName.ACTIVE);
}
$(this._scrollElement).trigger(Event.ACTIVATE, {
@ -300,7 +300,7 @@ var ScrollSpy = function ($) {
var $spy = $(scrollSpys[i]);
ScrollSpy._jQueryInterface.call($spy, $spy.data());
}
});
}
/**
* ------------------------------------------------------------------------
@ -308,7 +308,7 @@ var ScrollSpy = function ($) {
* ------------------------------------------------------------------------
*/
$.fn[NAME] = ScrollSpy._jQueryInterface;
);$.fn[NAME] = ScrollSpy._jQueryInterface;
$.fn[NAME].Constructor = ScrollSpy;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;

BIN
js/dist/scrollspy.js.map vendored
View file

Binary file not shown.

18
js/dist/tab.js vendored
View file

@ -48,14 +48,14 @@ var Tab = function ($) {
DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
DROPDOWN_TOGGLE: '.dropdown-toggle',
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Tab = function () {
function Tab(element) {
_classCallCheck(this, Tab);
@ -234,7 +234,7 @@ var Tab = function ($) {
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
event.preventDefault();
Tab._jQueryInterface.call($(this), 'show');
});
}
/**
* ------------------------------------------------------------------------
@ -242,7 +242,7 @@ var Tab = function ($) {
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Tab._jQueryInterface;
);$.fn[NAME] = Tab._jQueryInterface;
$.fn[NAME].Constructor = Tab;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;

BIN
js/dist/tab.js.map vendored
View file

Binary file not shown.

22
js/dist/tooltip.js vendored
View file

@ -106,14 +106,14 @@ var Tooltip = function ($) {
FOCUS: 'focus',
CLICK: 'click',
MANUAL: 'manual'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
var Tooltip = function () {
function Tooltip(element, config) {
_classCallCheck(this, Tooltip);
@ -270,13 +270,13 @@ var Tooltip = function ($) {
}
});
$(tip).addClass(ClassName.SHOW);
$(tip).addClass(ClassName.SHOW
// if this is a touch-enabled device we add extra
// empty mouseover listeners to the body's immediate children;
// only needed because of broken event delegation on iOS
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
if ('ontouchstart' in document.documentElement) {
);if ('ontouchstart' in document.documentElement) {
$('body').children().on('mouseover', null, $.noop);
}
@ -330,11 +330,11 @@ var Tooltip = function ($) {
return;
}
$(tip).removeClass(ClassName.SHOW);
$(tip).removeClass(ClassName.SHOW
// if this is a touch-enabled device we remove the extra
// empty mouseover listeners we added for iOS support
if ('ontouchstart' in document.documentElement) {
);if ('ontouchstart' in document.documentElement) {
$('body').children().off('mouseover', null, $.noop);
}

BIN
js/dist/tooltip.js.map vendored
View file

Binary file not shown.

8
js/dist/util.js vendored
View file

@ -22,10 +22,9 @@ var Util = function ($) {
MozTransition: 'transitionend',
OTransition: 'oTransitionEnd otransitionend',
transition: 'transitionend'
};
// shoutout AngusCroll (https://goo.gl/pxwQGp)
function toType(obj) {
// shoutout AngusCroll (https://goo.gl/pxwQGp)
};function toType(obj) {
return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
}
@ -39,7 +38,8 @@ var Util = function ($) {
delegateType: transition.end,
handle: function handle(event) {
if ($(event.target).is(this)) {
return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params
return event.handleObj.handler.apply(this, arguments // eslint-disable-line prefer-rest-params
);
}
return undefined;
}

BIN
js/dist/util.js.map vendored
View file

Binary file not shown.

59
js/src/dropdown.js
View file

@ -96,10 +96,11 @@ const Dropdown = (($) => {
class Dropdown {
constructor(element, config) {
this._element = element
this._popper = null
this._config = this._getConfig(config)
this._menu = this._getMenuElement()
this._element = element
this._popper = null
this._config = this._getConfig(config)
this._menu = this._getMenuElement()
this._inNavbar = this._detectNavbar()
this._addEventListeners()
}
@ -153,17 +154,7 @@ const Dropdown = (($) => {
element = parent
}
}
this._popper = new Popper(element, this._menu, {
placement : this._getPlacement(),
modifiers : {
offset : {
offset : this._config.offset
},
flip : {
enabled : this._config.flip
}
}
})
this._popper = new Popper(element, this._menu, this._getPopperConfig())
// if this is a touch-enabled device we add extra
// empty mouseover listeners to the body's immediate children;
@ -195,6 +186,7 @@ const Dropdown = (($) => {
}
update() {
this._inNavbar = this._detectNavbar()
if (this._popper !== null) {
this._popper.scheduleUpdate()
}
@ -250,15 +242,42 @@ const Dropdown = (($) => {
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.TOPEND
}
}
else {
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.BOTTOMEND
}
} else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.BOTTOMEND
}
return placement
}
_detectNavbar() {
return $(this._element).closest('.navbar').length > 0
}
_getPopperConfig() {
const popperConfig = {
placement : this._getPlacement(),
modifiers : {
offset : {
offset : this._config.offset
},
flip : {
enabled : this._config.flip
}
}
}
if (this._inNavbar) {
popperConfig.modifiers.AfterApplyStyle = {
enabled: true,
order: 901, // ApplyStyle order + 1
fn: () => {
// reset Popper styles
$(this._menu).attr('style', '')
}
}
}
return popperConfig
}
// static
static _jQueryInterface(config) {

4
package.json
View file

@ -28,7 +28,7 @@
"css-prefix-docs": "postcss --config build/ --no-map --replace assets/css/docs.min.css",
"css-minify": "cleancss --level 1 --source-map --output dist/css/bootstrap.min.css dist/css/bootstrap.css && cleancss --level 1 --source-map --output dist/css/bootstrap-grid.min.css dist/css/bootstrap-grid.css && cleancss --level 1 --source-map --output dist/css/bootstrap-reboot.min.css dist/css/bootstrap-reboot.css",
"css-minify-docs": "cleancss --level 1 --source-map --output assets/css/docs.min.css assets/css/docs.min.css",
"js": "npm-run-all js-compile js-minify",
"js": "npm-run-all js-lint js-compile js-minify",
"js-docs": "npm-run-all js-lint-docs js-minify-docs",
"js-lint": "eslint js/ && eslint --config js/tests/.eslintrc.json --env node build/ Gruntfile.js",
"js-lint-docs": "eslint --config js/tests/.eslintrc.json assets/js/",
@ -54,7 +54,7 @@
"dist": "npm-run-all --parallel css js",
"test": "npm-run-all dist js-test docs",
"watch-css": "nodemon --ignore js/ --ignore dist/ -e scss -x \"npm run css && npm run css-docs\"",
"watch-js": "nodemon --ignore scss/ --ignore js/dist/ --ignore dist/ -e js -x \"npm run js-compile\"",
"watch-js": "nodemon --ignore scss/ --ignore js/dist/ --ignore dist/ -e js -x \"npm run js-compile-plugins\"",
"watch": "npm-run-all --parallel watch-css watch-js"
},
"style": "dist/css/bootstrap.css",

8
scss/_list-group.scss
View file

@ -19,19 +19,19 @@
.list-group-item-action {
width: 100%; // For `<button>`s (anchors become 100% by default though)
color: $list-group-link-color;
color: $list-group-action-color;
text-align: inherit; // For `<button>`s (anchors inherit)
// Hover state
@include hover-focus {
color: $list-group-link-hover-color;
color: $list-group-action-hover-color;
text-decoration: none;
background-color: $list-group-hover-bg;
}
&:active {
color: $list-group-link-active-color;
background-color: $list-group-link-active-bg;
color: $list-group-action-active-color;
background-color: $list-group-action-active-bg;
}
}

2
scss/_nav.scss
View file

@ -76,7 +76,7 @@
@include border-radius($nav-pills-border-radius);
&.active,
.show & {
.show > & {
color: $nav-pills-link-active-color;
background-color: $nav-pills-link-active-bg;
}

11
scss/_navbar.scss
View file

@ -77,9 +77,8 @@
}
.dropdown-menu {
position: static !important;
position: static;
float: none;
transform: unset !important;
}
}
@ -158,8 +157,12 @@
flex-direction: row;
.dropdown-menu {
position: absolute !important;
top: 100% !important;
position: absolute;
}
.dropdown-menu-right {
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
}
.nav-link {

8
scss/_variables.scss
View file

@ -854,11 +854,11 @@ $list-group-active-border-color: $list-group-active-bg !default;
$list-group-disabled-color: $gray-light !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-link-color: $gray !default;
$list-group-link-hover-color: $list-group-link-color !default;
$list-group-action-color: $gray !default;
$list-group-action-hover-color: $list-group-action-color !default;
$list-group-link-active-color: $list-group-color !default;
$list-group-link-active-bg: $gray-lighter !default;
$list-group-action-active-color: $list-group-color !default;
$list-group-action-active-bg: $gray-lighter !default;
// Image thumbnails

10
scss/mixins/_breakpoints.scss
View file

@ -93,7 +93,13 @@
$min: breakpoint-min($name, $breakpoints);
$max: breakpoint-max($name, $breakpoints);
@media (min-width: $min) and (max-width: $max) {
@content;
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else if $max == null {
@include media-breakpoint-up($name)
} @else if $min == null {
@include media-breakpoint-down($name)
}
}

2
scss/mixins/_grid-framework.scss
View file

@ -56,7 +56,7 @@
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
.offset#{$infix}-#{$i} {
@include make-col-modifier(offset, $i, $columns)
}

1
scss/mixins/_pagination.scss
View file

@ -4,6 +4,7 @@
.page-link {
padding: $padding-y $padding-x;
font-size: $font-size;
line-height: $line-height;
}
.page-item {

14
scss/utilities/_borders.scss
View file

@ -13,19 +13,23 @@
//
.rounded {
@include border-radius($border-radius);
border-radius: $border-radius !important;
}
.rounded-top {
@include border-top-radius($border-radius);
border-top-left-radius: $border-radius !important;
border-top-right-radius: $border-radius !important;
}
.rounded-right {
@include border-right-radius($border-radius);
border-top-right-radius: $border-radius !important;
border-bottom-right-radius: $border-radius !important;
}
.rounded-bottom {
@include border-bottom-radius($border-radius);
border-bottom-right-radius: $border-radius !important;
border-bottom-left-radius: $border-radius !important;
}
.rounded-left {
@include border-left-radius($border-radius);
border-top-left-radius: $border-radius !important;
border-bottom-left-radius: $border-radius !important;
}
.rounded-circle {

8
scss/utilities/_position.scss
View file

@ -17,7 +17,9 @@
}
.sticky-top {
position: sticky;
top: 0;
z-index: $zindex-sticky;
@supports (position: sticky) {
position: sticky;
top: 0;
z-index: $zindex-sticky;
}
}