rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-03 15:24:19 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'v4-dev' into patch-1

Browse Source
This commit is contained in:
Heiko Jansen 2017-05-26 11:07:06 +02:00 committed by GitHub
commit 38682f69af
10 changed files with 214 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@ -1 +1 @@
{"version":3,"sources":["..\\..\\scss\\_reboot.scss","dist\\css\\bootstrap-reboot.css","bootstrap-reboot.css","..\\..\\scss\\mixins\\_hover.scss"],"names":[],"mappings":"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"}
{"version":3,"sources":["../../scss/_reboot.scss","dist/css/bootstrap-reboot.css","bootstrap-reboot.css","../../scss/mixins/_hover.scss"],"names":[],"mappings":"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"}

190
dist/css/bootstrap.css
View File

@ -2895,16 +2895,6 @@ tbody.collapse.show {
outline: 0;
}
.dropdown-menu-right {
right: 0;
left: auto !important;
}
.dropdown-menu-left {
right: auto !important;
left: 0;
}
.dropdown-menu.show {
display: block;
}
@ -3641,6 +3631,14 @@ tbody.collapse.show {
padding-left: 0;
}
.navbar-nav .dropdown-menu {
position: static !important;
float: none;
-webkit-transform: unset !important;
-o-transform: unset !important;
transform: unset !important;
}
.navbar-text {
display: inline-block;
padding-top: 0.5rem;
@ -3678,10 +3676,6 @@ tbody.collapse.show {
}
@media (max-width: 575px) {
.navbar-expand-sm .navbar-nav .dropdown-menu {
position: static;
float: none;
}
.navbar-expand-sm > .container,
.navbar-expand-sm > .container-fluid {
padding-right: 0;
@ -3712,7 +3706,8 @@ tbody.collapse.show {
flex-direction: row;
}
.navbar-expand-sm .navbar-nav .dropdown-menu {
position: absolute;
position: absolute !important;
top: 100% !important;
}
.navbar-expand-sm .navbar-nav .nav-link {
padding-right: .5rem;
@ -3736,10 +3731,6 @@ tbody.collapse.show {
}
@media (max-width: 767px) {
.navbar-expand-md .navbar-nav .dropdown-menu {
position: static;
float: none;
}
.navbar-expand-md > .container,
.navbar-expand-md > .container-fluid {
padding-right: 0;
@ -3770,7 +3761,8 @@ tbody.collapse.show {
flex-direction: row;
}
.navbar-expand-md .navbar-nav .dropdown-menu {
position: absolute;
position: absolute !important;
top: 100% !important;
}
.navbar-expand-md .navbar-nav .nav-link {
padding-right: .5rem;
@ -3794,10 +3786,6 @@ tbody.collapse.show {
}
@media (max-width: 991px) {
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: static;
float: none;
}
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
padding-right: 0;
@ -3828,7 +3816,8 @@ tbody.collapse.show {
flex-direction: row;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
position: absolute !important;
top: 100% !important;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: .5rem;
@ -3852,10 +3841,6 @@ tbody.collapse.show {
}
@media (max-width: 1199px) {
.navbar-expand-xl .navbar-nav .dropdown-menu {
position: static;
float: none;
}
.navbar-expand-xl > .container,
.navbar-expand-xl > .container-fluid {
padding-right: 0;
@ -3886,7 +3871,8 @@ tbody.collapse.show {
flex-direction: row;
}
.navbar-expand-xl .navbar-nav .dropdown-menu {
position: absolute;
position: absolute !important;
top: 100% !important;
}
.navbar-expand-xl .navbar-nav .nav-link {
padding-right: .5rem;
@ -3924,11 +3910,6 @@ tbody.collapse.show {
justify-content: flex-start;
}
.navbar-expand .navbar-nav .dropdown-menu {
position: static;
float: none;
}
.navbar-expand > .container,
.navbar-expand > .container-fluid {
padding-right: 0;
@ -3944,7 +3925,8 @@ tbody.collapse.show {
}
.navbar-expand .navbar-nav .dropdown-menu {
position: absolute;
position: absolute !important;
top: 100% !important;
}
.navbar-expand .navbar-nav .nav-link {
@ -5232,53 +5214,69 @@ button.close {
opacity: 0.9;
}
.tooltip.bs-tooltip-top {
.tooltip .arrow {
position: absolute;
display: block;
width: 5px;
height: 5px;
}
.tooltip.bs-tooltip-top, .tooltip.bs-tooltip-auto[x-placement^="top"] {
padding: 5px 0;
}
.tooltip.bs-tooltip-top .arrow::before {
.tooltip.bs-tooltip-top .arrow, .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
}
.tooltip.bs-tooltip-top .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
margin-left: -3px;
content: "";
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.bs-tooltip-right {
.tooltip.bs-tooltip-right, .tooltip.bs-tooltip-auto[x-placement^="right"] {
padding: 0 5px;
}
.tooltip.bs-tooltip-right .arrow::before {
top: 50%;
.tooltip.bs-tooltip-right .arrow, .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow {
left: 0;
margin-top: -5px;
}
.tooltip.bs-tooltip-right .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
margin-top: -3px;
content: "";
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
.tooltip.bs-tooltip-bottom {
.tooltip.bs-tooltip-bottom, .tooltip.bs-tooltip-auto[x-placement^="bottom"] {
padding: 5px 0;
}
.tooltip.bs-tooltip-bottom .arrow::before {
.tooltip.bs-tooltip-bottom .arrow, .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow {
top: 0;
left: 50%;
margin-left: -5px;
}
.tooltip.bs-tooltip-bottom .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
margin-left: -3px;
content: "";
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bs-tooltip-left {
.tooltip.bs-tooltip-left, .tooltip.bs-tooltip-auto[x-placement^="left"] {
padding: 0 5px;
}
.tooltip.bs-tooltip-left .arrow::before {
top: 50%;
.tooltip.bs-tooltip-left .arrow, .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow {
right: 0;
margin-top: -5px;
}
.tooltip.bs-tooltip-left .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
right: 0;
margin-top: -3px;
content: "";
border-width: 5px 0 5px 5px;
border-left-color: #000;
@ -5286,8 +5284,6 @@ button.close {
.tooltip .arrow::before {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
@ -5332,12 +5328,17 @@ button.close {
border-radius: 0.3rem;
}
.popover .arrow {
position: absolute;
display: block;
width: 10px;
height: 5px;
}
.popover .arrow::before,
.popover .arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
@ -5349,76 +5350,83 @@ button.close {
.popover .arrow::after {
content: "";
border-width: 10px;
border-width: 11px;
}
.popover.bs-popover-top {
.popover.bs-popover-top, .popover.bs-popover-auto[x-placement^="top"] {
margin-bottom: 10px;
}
.popover.bs-popover-top .arrow::before,
.popover.bs-popover-top .arrow::after {
left: 50%;
.popover.bs-popover-top .arrow, .popover.bs-popover-auto[x-placement^="top"] .arrow {
bottom: 0;
}
.popover.bs-popover-top .arrow::before, .popover.bs-popover-auto[x-placement^="top"] .arrow::before,
.popover.bs-popover-top .arrow::after, .popover.bs-popover-auto[x-placement^="top"] .arrow::after {
border-bottom-width: 0;
}
.popover.bs-popover-top .arrow::before {
.popover.bs-popover-top .arrow::before, .popover.bs-popover-auto[x-placement^="top"] .arrow::before {
bottom: -11px;
margin-left: -11px;
margin-left: -6px;
border-top-color: rgba(0, 0, 0, 0.25);
}
.popover.bs-popover-top .arrow::after {
.popover.bs-popover-top .arrow::after, .popover.bs-popover-auto[x-placement^="top"] .arrow::after {
bottom: -10px;
margin-left: -10px;
margin-left: -6px;
border-top-color: #fff;
}
.popover.bs-popover-right {
.popover.bs-popover-right, .popover.bs-popover-auto[x-placement^="right"] {
margin-left: 10px;
}
.popover.bs-popover-right .arrow::before,
.popover.bs-popover-right .arrow::after {
top: 50%;
.popover.bs-popover-right .arrow, .popover.bs-popover-auto[x-placement^="right"] .arrow {
left: 0;
}
.popover.bs-popover-right .arrow::before, .popover.bs-popover-auto[x-placement^="right"] .arrow::before,
.popover.bs-popover-right .arrow::after, .popover.bs-popover-auto[x-placement^="right"] .arrow::after {
margin-top: -8px;
border-left-width: 0;
}
.popover.bs-popover-right .arrow::before {
.popover.bs-popover-right .arrow::before, .popover.bs-popover-auto[x-placement^="right"] .arrow::before {
left: -11px;
margin-top: -11px;
border-right-color: rgba(0, 0, 0, 0.25);
}
.popover.bs-popover-right .arrow::after {
.popover.bs-popover-right .arrow::after, .popover.bs-popover-auto[x-placement^="right"] .arrow::after {
left: -10px;
margin-top: -10px;
border-right-color: #fff;
}
.popover.bs-popover-bottom {
.popover.bs-popover-bottom, .popover.bs-popover-auto[x-placement^="bottom"] {
margin-top: 10px;
}
.popover.bs-popover-bottom .arrow::before,
.popover.bs-popover-bottom .arrow::after {
left: 50%;
.popover.bs-popover-bottom .arrow, .popover.bs-popover-auto[x-placement^="bottom"] .arrow {
top: 0;
}
.popover.bs-popover-bottom .arrow::before, .popover.bs-popover-auto[x-placement^="bottom"] .arrow::before,
.popover.bs-popover-bottom .arrow::after, .popover.bs-popover-auto[x-placement^="bottom"] .arrow::after {
margin-left: -7px;
border-top-width: 0;
}
.popover.bs-popover-bottom .arrow::before {
.popover.bs-popover-bottom .arrow::before, .popover.bs-popover-auto[x-placement^="bottom"] .arrow::before {
top: -11px;
margin-left: -11px;
border-bottom-color: rgba(0, 0, 0, 0.25);
}
.popover.bs-popover-bottom .arrow::after {
.popover.bs-popover-bottom .arrow::after, .popover.bs-popover-auto[x-placement^="bottom"] .arrow::after {
top: -10px;
margin-left: -10px;
border-bottom-color: #fff;
}
.popover.bs-popover-bottom .popover-title::before {
.popover.bs-popover-bottom .popover-title::before, .popover.bs-popover-auto[x-placement^="bottom"] .popover-title::before {
position: absolute;
top: 0;
left: 50%;
@ -5429,25 +5437,27 @@ button.close {
border-bottom: 1px solid #f7f7f7;
}
.popover.bs-popover-left {
.popover.bs-popover-left, .popover.bs-popover-auto[x-placement^="left"] {
margin-right: 10px;
}
.popover.bs-popover-left .arrow::before,
.popover.bs-popover-left .arrow::after {
top: 50%;
.popover.bs-popover-left .arrow, .popover.bs-popover-auto[x-placement^="left"] .arrow {
right: 0;
}
.popover.bs-popover-left .arrow::before, .popover.bs-popover-auto[x-placement^="left"] .arrow::before,
.popover.bs-popover-left .arrow::after, .popover.bs-popover-auto[x-placement^="left"] .arrow::after {
margin-top: -8px;
border-right-width: 0;
}
.popover.bs-popover-left .arrow::before {
.popover.bs-popover-left .arrow::before, .popover.bs-popover-auto[x-placement^="left"] .arrow::before {
right: -11px;
margin-top: -11px;
border-left-color: rgba(0, 0, 0, 0.25);
}
.popover.bs-popover-left .arrow::after {
.popover.bs-popover-left .arrow::after, .popover.bs-popover-auto[x-placement^="left"] .arrow::after {
right: -10px;
margin-top: -10px;
border-left-color: #fff;
}

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

1
docs/_data/nav.yml
View File

@ -8,6 +8,7 @@
- title: Options
- title: Build tools
- title: Best practices
- title: Webpack
- title: Accessibility
- title: Layout

2
docs/getting-started/build-tools.md
View File

@ -40,7 +40,7 @@ Our [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) i
Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/build/postcss.js`](https://github.com/twbs/bootstrap/blob/v4-dev/build/postcss.js) for details.
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/build/postcss.config.js`](https://github.com/twbs/bootstrap/blob/v4-dev/build/postcss.config.js) for details.
## Local documentation

106
docs/getting-started/webpack.md Normal file
View File

@ -0,0 +1,106 @@
---
layout: docs
title: Webpack
description: Learn how to install Bootstrap using webpack 2
group: getting-started
---
Use [webpack v2.x](https://webpack.js.org/) to bundle Bootstrap into your project.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Installing Bootstrap
[Install bootstrap](/getting-started/download/#npm) as a node module using npm.
## Importing JavaScript
Import [Bootstrap's JavaScript](/getting-started/javascript/) by adding this line to your app's entry point (usally `index.js` or `app.js`):
{% highlight js %}
import 'bootstrap';
{% endhighlight %}
Alternatively, you may **import plugins individually** as needed:
{% highlight js %}
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
...
{% endhighlight %}
Bootstrap is dependent on [jQuery](https://jquery.com/) and [Popper](https://popper.js.org/), so npm will install them for you if needed. But they must be explicitly provided by webpack. Add the following code to the `plugins` section in your webpack config file:
{% highlight js %}
plugins: [
...
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
// In case you imported plugins individually, you must also require them here:
Util: "exports-loader?Util!bootstrap/js/dist/util",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
...
})
...
]
{% endhighlight %}
{% callout warning %}
Notice that if you chose to **import plugins individually**, you must also install [exports-loader](https://github.com/webpack-contrib/exports-loader)
{% endcallout %}
## Importing Styles
### Importing Precompiled SASS
To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.
First, create your own `_custom.scss` and use it to override the [built-in custom variables](/getting-started/options/). Then, use your main sass file to import your custom variables, followed by Bootstrap:
{% highlight scss %}
@import "custom";
@import "~bootstrap/scss/bootstrap";
{% endhighlight %}
For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/postcss/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack) and [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes). With minimal setup, your webpack config should include this rule or similar:
{% highlight js %}
...
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles SASS to CSS
}]
},
...
{% endhighlight %}
### Importing Compiled CSS
Alternatively, you may use Bootstrap's ready-to-use css by simply adding this line to your project's entry point:
{% highlight js %}
import 'bootstrap/dist/css/bootstrap.min.css';
{% endhighlight %}
In this case you may use your existing rule for `css` without any special modifications to webpack config.

1
scss/_progress.scss
View File

@ -11,6 +11,7 @@
text-align: center;
background-color: $progress-bg;
@include border-radius($progress-border-radius);
@include box-shadow($progress-box-shadow);
}
.progress-bar {