Merge branch 'v4-dev' into v4-navbars

This commit is contained in:
Mark Otto 2016-09-15 10:20:57 -07:00
commit 64dcb8b507
154 changed files with 21154 additions and 1028 deletions

View File

@ -28,10 +28,6 @@ cache:
env:
global:
- NPM_CONFIG_PROGRESS="false"
- SAUCE_USERNAME="bootstrap"
- secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
- secure: "RKWpS+P20b4tG9tawzCMJSmQftoonmC7tJzyGYiHuEM1TcpHALLBcnzKlr/+DiPTfzDJWY4kS8pxfhK4uXOe8OHnhpMNub7LEWtFPePlZIervOJcsOydaQocTKqVVWD6OUubMeQmQ+tZmvmpjoJ1uPPEbFs9ciF7+dv3U5tLUZ0="
- secure: "XswSKBY0HJ/aO9VOBeWlvGpqSFF/DsJmNKz7o5RkJMJX340qe44J929uUNwwOwlv9YrgptzC2W6l8bpmZQV+p6IYs99SoSA8CCaUfIJaqeU9x/UiT5vIHgqaNax+vFJwvzHLpF5v/ggFqFEKCd54gCDasePLTztHeC4oL104iaQ="
matrix:
- TWBS_TEST=core
- TWBS_TEST=validate-html

View File

@ -184,8 +184,15 @@ module.exports = function (grunt) {
]
},
docs: {
src: 'docs/assets/css/docs.min.css',
dest: 'docs/assets/css/docs.min.css'
files: [
{
expand: true,
cwd: 'docs/assets/css',
src: ['*.css', '!*.min.css'],
dest: 'docs/assets/css',
ext: '.min.css'
}
]
}
},
@ -378,7 +385,7 @@ module.exports = function (grunt) {
require('./grunt/bs-sass-compile/' + sassCompilerName + '.js')(grunt);
})(process.env.TWBS_SASS || 'libsass');
// grunt.registerTask('sass-compile', ['sass:core', 'sass:extras', 'sass:docs']);
grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']);
grunt.registerTask('sass-compile', ['sass:core', 'sass:extras', 'sass:docs']);
grunt.registerTask('dist-css', ['sass-compile', 'exec:postcss', 'cssmin:core', 'cssmin:docs']);

View File

@ -8,7 +8,8 @@
[![devDependency Status](https://img.shields.io/david/dev/twbs/bootstrap.svg)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
[![Meteor Atmosphere](https://img.shields.io/badge/meteor-twbs%3Abootstrap-blue.svg)](https://atmospherejs.com/twbs/bootstrap)
[![Packagist Prerelease](https://img.shields.io/packagist/vpre/twbs/bootstrap.svg)](https://packagist.org/packages/twbs/bootstrap)
[![NuGet](https://img.shields.io/nuget/vpre/bootstrap.svg)](https://www.nuget.org/packages/bootstrap/4.0.0-alpha2)
[![NuGet](https://img.shields.io/nuget/vpre/bootstrap.svg)](https://www.nuget.org/packages/bootstrap/4.0.0-alpha4)
[![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thornton](https://twitter.com/fat), and maintained by the [core team](https://github.com/orgs/twbs/people) with the massive support and involvement of the community.
@ -30,12 +31,12 @@ To get started, check out <http://getbootstrap.com>!
Several quick start options are available:
- [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.2.zip)
- [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.4.zip)
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
- Install with [npm](https://www.npmjs.com): `npm install bootstrap@4.0.0-alpha.2`
- Install with [Meteor](https://www.meteor.com): `meteor add twbs:bootstrap@=4.0.0-alpha.2`
- Install with [npm](https://www.npmjs.com): `npm install bootstrap@4.0.0-alpha.4`
- Install with [Meteor](https://www.meteor.com): `meteor add twbs:bootstrap@=4.0.0-alpha.4`
- Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap`
- Install with [Bower](http://bower.io): `bower install bootstrap#v4.0.0-alpha.2`
- Install with [Bower](https://bower.io): `bower install bootstrap#v4.0.0-alpha.4`
- Install with [NuGet](https://www.nuget.org): CSS: `Install-Package bootstrap -Pre` Sass: `Install-Package bootstrap.sass -Pre` (`-Pre` is only required until Bootstrap v4 has a stable release).
Read the [Getting started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.

View File

@ -23,13 +23,13 @@ gems:
- jekyll-sitemap
# Custom vars
current_version: 4.0.0-alpha.2
current_version: 4.0.0-alpha.4
repo: https://github.com/twbs/bootstrap
slack: https://bootstrap-slack.herokuapp.com
download:
source: https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.2.zip
dist: https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip
source: https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.4.zip
dist: https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.4/bootstrap-4.0.0-alpha.4-dist.zip
blog: http://blog.getbootstrap.com
expo: http://expo.getbootstrap.com
@ -37,10 +37,10 @@ themes: http://themes.getbootstrap.com
cdn:
# See https://www.srihash.org for info on how to generate the hashes
css: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css
css_hash: "sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd"
js: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js
js_hash: "sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7"
css: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css
css_hash: "sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj"
js: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js
js_hash: "sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU"
jquery: https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js
jquery_hash: "sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY"
tether: https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js

7109
dist/css/bootstrap-flex.css vendored Normal file

File diff suppressed because it is too large Load Diff

1
dist/css/bootstrap-flex.css.map vendored Normal file

File diff suppressed because one or more lines are too long

7
dist/css/bootstrap-flex.min.css vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/css/bootstrap-flex.min.css.map vendored Normal file

File diff suppressed because one or more lines are too long

936
dist/css/bootstrap-grid.css vendored Normal file
View File

@ -0,0 +1,936 @@
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.container::after {
content: "";
display: table;
clear: both;
}
@media (min-width: 544px) {
.container {
max-width: 576px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 940px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.container-fluid {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.container-fluid::after {
content: "";
display: table;
clear: both;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.row::after {
content: "";
display: table;
clear: both;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-1 {
float: left;
width: 8.333333%;
}
.col-xs-2 {
float: left;
width: 16.666667%;
}
.col-xs-3 {
float: left;
width: 25%;
}
.col-xs-4 {
float: left;
width: 33.333333%;
}
.col-xs-5 {
float: left;
width: 41.666667%;
}
.col-xs-6 {
float: left;
width: 50%;
}
.col-xs-7 {
float: left;
width: 58.333333%;
}
.col-xs-8 {
float: left;
width: 66.666667%;
}
.col-xs-9 {
float: left;
width: 75%;
}
.col-xs-10 {
float: left;
width: 83.333333%;
}
.col-xs-11 {
float: left;
width: 91.666667%;
}
.col-xs-12 {
float: left;
width: 100%;
}
.pull-xs-0 {
right: auto;
}
.pull-xs-1 {
right: 8.333333%;
}
.pull-xs-2 {
right: 16.666667%;
}
.pull-xs-3 {
right: 25%;
}
.pull-xs-4 {
right: 33.333333%;
}
.pull-xs-5 {
right: 41.666667%;
}
.pull-xs-6 {
right: 50%;
}
.pull-xs-7 {
right: 58.333333%;
}
.pull-xs-8 {
right: 66.666667%;
}
.pull-xs-9 {
right: 75%;
}
.pull-xs-10 {
right: 83.333333%;
}
.pull-xs-11 {
right: 91.666667%;
}
.pull-xs-12 {
right: 100%;
}
.push-xs-0 {
left: auto;
}
.push-xs-1 {
left: 8.333333%;
}
.push-xs-2 {
left: 16.666667%;
}
.push-xs-3 {
left: 25%;
}
.push-xs-4 {
left: 33.333333%;
}
.push-xs-5 {
left: 41.666667%;
}
.push-xs-6 {
left: 50%;
}
.push-xs-7 {
left: 58.333333%;
}
.push-xs-8 {
left: 66.666667%;
}
.push-xs-9 {
left: 75%;
}
.push-xs-10 {
left: 83.333333%;
}
.push-xs-11 {
left: 91.666667%;
}
.push-xs-12 {
left: 100%;
}
.offset-xs-1 {
margin-left: 8.333333%;
}
.offset-xs-2 {
margin-left: 16.666667%;
}
.offset-xs-3 {
margin-left: 25%;
}
.offset-xs-4 {
margin-left: 33.333333%;
}
.offset-xs-5 {
margin-left: 41.666667%;
}
.offset-xs-6 {
margin-left: 50%;
}
.offset-xs-7 {
margin-left: 58.333333%;
}
.offset-xs-8 {
margin-left: 66.666667%;
}
.offset-xs-9 {
margin-left: 75%;
}
.offset-xs-10 {
margin-left: 83.333333%;
}
.offset-xs-11 {
margin-left: 91.666667%;
}
@media (min-width: 544px) {
.col-sm-1 {
float: left;
width: 8.333333%;
}
.col-sm-2 {
float: left;
width: 16.666667%;
}
.col-sm-3 {
float: left;
width: 25%;
}
.col-sm-4 {
float: left;
width: 33.333333%;
}
.col-sm-5 {
float: left;
width: 41.666667%;
}
.col-sm-6 {
float: left;
width: 50%;
}
.col-sm-7 {
float: left;
width: 58.333333%;
}
.col-sm-8 {
float: left;
width: 66.666667%;
}
.col-sm-9 {
float: left;
width: 75%;
}
.col-sm-10 {
float: left;
width: 83.333333%;
}
.col-sm-11 {
float: left;
width: 91.666667%;
}
.col-sm-12 {
float: left;
width: 100%;
}
.pull-sm-0 {
right: auto;
}
.pull-sm-1 {
right: 8.333333%;
}
.pull-sm-2 {
right: 16.666667%;
}
.pull-sm-3 {
right: 25%;
}
.pull-sm-4 {
right: 33.333333%;
}
.pull-sm-5 {
right: 41.666667%;
}
.pull-sm-6 {
right: 50%;
}
.pull-sm-7 {
right: 58.333333%;
}
.pull-sm-8 {
right: 66.666667%;
}
.pull-sm-9 {
right: 75%;
}
.pull-sm-10 {
right: 83.333333%;
}
.pull-sm-11 {
right: 91.666667%;
}
.pull-sm-12 {
right: 100%;
}
.push-sm-0 {
left: auto;
}
.push-sm-1 {
left: 8.333333%;
}
.push-sm-2 {
left: 16.666667%;
}
.push-sm-3 {
left: 25%;
}
.push-sm-4 {
left: 33.333333%;
}
.push-sm-5 {
left: 41.666667%;
}
.push-sm-6 {
left: 50%;
}
.push-sm-7 {
left: 58.333333%;
}
.push-sm-8 {
left: 66.666667%;
}
.push-sm-9 {
left: 75%;
}
.push-sm-10 {
left: 83.333333%;
}
.push-sm-11 {
left: 91.666667%;
}
.push-sm-12 {
left: 100%;
}
.offset-sm-0 {
margin-left: 0%;
}
.offset-sm-1 {
margin-left: 8.333333%;
}
.offset-sm-2 {
margin-left: 16.666667%;
}
.offset-sm-3 {
margin-left: 25%;
}
.offset-sm-4 {
margin-left: 33.333333%;
}
.offset-sm-5 {
margin-left: 41.666667%;
}
.offset-sm-6 {
margin-left: 50%;
}
.offset-sm-7 {
margin-left: 58.333333%;
}
.offset-sm-8 {
margin-left: 66.666667%;
}
.offset-sm-9 {
margin-left: 75%;
}
.offset-sm-10 {
margin-left: 83.333333%;
}
.offset-sm-11 {
margin-left: 91.666667%;
}
}
@media (min-width: 768px) {
.col-md-1 {
float: left;
width: 8.333333%;
}
.col-md-2 {
float: left;
width: 16.666667%;
}
.col-md-3 {
float: left;
width: 25%;
}
.col-md-4 {
float: left;
width: 33.333333%;
}
.col-md-5 {
float: left;
width: 41.666667%;
}
.col-md-6 {
float: left;
width: 50%;
}
.col-md-7 {
float: left;
width: 58.333333%;
}
.col-md-8 {
float: left;
width: 66.666667%;
}
.col-md-9 {
float: left;
width: 75%;
}
.col-md-10 {
float: left;
width: 83.333333%;
}
.col-md-11 {
float: left;
width: 91.666667%;
}
.col-md-12 {
float: left;
width: 100%;
}
.pull-md-0 {
right: auto;
}
.pull-md-1 {
right: 8.333333%;
}
.pull-md-2 {
right: 16.666667%;
}
.pull-md-3 {
right: 25%;
}
.pull-md-4 {
right: 33.333333%;
}
.pull-md-5 {
right: 41.666667%;
}
.pull-md-6 {
right: 50%;
}
.pull-md-7 {
right: 58.333333%;
}
.pull-md-8 {
right: 66.666667%;
}
.pull-md-9 {
right: 75%;
}
.pull-md-10 {
right: 83.333333%;
}
.pull-md-11 {
right: 91.666667%;
}
.pull-md-12 {
right: 100%;
}
.push-md-0 {
left: auto;
}
.push-md-1 {
left: 8.333333%;
}
.push-md-2 {
left: 16.666667%;
}
.push-md-3 {
left: 25%;
}
.push-md-4 {
left: 33.333333%;
}
.push-md-5 {
left: 41.666667%;
}
.push-md-6 {
left: 50%;
}
.push-md-7 {
left: 58.333333%;
}
.push-md-8 {
left: 66.666667%;
}
.push-md-9 {
left: 75%;
}
.push-md-10 {
left: 83.333333%;
}
.push-md-11 {
left: 91.666667%;
}
.push-md-12 {
left: 100%;
}
.offset-md-0 {
margin-left: 0%;
}
.offset-md-1 {
margin-left: 8.333333%;
}
.offset-md-2 {
margin-left: 16.666667%;
}
.offset-md-3 {
margin-left: 25%;
}
.offset-md-4 {
margin-left: 33.333333%;
}
.offset-md-5 {
margin-left: 41.666667%;
}
.offset-md-6 {
margin-left: 50%;
}
.offset-md-7 {
margin-left: 58.333333%;
}
.offset-md-8 {
margin-left: 66.666667%;
}
.offset-md-9 {
margin-left: 75%;
}
.offset-md-10 {
margin-left: 83.333333%;
}
.offset-md-11 {
margin-left: 91.666667%;
}
}
@media (min-width: 992px) {
.col-lg-1 {
float: left;
width: 8.333333%;
}
.col-lg-2 {
float: left;
width: 16.666667%;
}
.col-lg-3 {
float: left;
width: 25%;
}
.col-lg-4 {
float: left;
width: 33.333333%;
}
.col-lg-5 {
float: left;
width: 41.666667%;
}
.col-lg-6 {
float: left;
width: 50%;
}
.col-lg-7 {
float: left;
width: 58.333333%;
}
.col-lg-8 {
float: left;
width: 66.666667%;
}
.col-lg-9 {
float: left;
width: 75%;
}
.col-lg-10 {
float: left;
width: 83.333333%;
}
.col-lg-11 {
float: left;
width: 91.666667%;
}
.col-lg-12 {
float: left;
width: 100%;
}
.pull-lg-0 {
right: auto;
}
.pull-lg-1 {
right: 8.333333%;
}
.pull-lg-2 {
right: 16.666667%;
}
.pull-lg-3 {
right: 25%;
}
.pull-lg-4 {
right: 33.333333%;
}
.pull-lg-5 {
right: 41.666667%;
}
.pull-lg-6 {
right: 50%;
}
.pull-lg-7 {
right: 58.333333%;
}
.pull-lg-8 {
right: 66.666667%;
}
.pull-lg-9 {
right: 75%;
}
.pull-lg-10 {
right: 83.333333%;
}
.pull-lg-11 {
right: 91.666667%;
}
.pull-lg-12 {
right: 100%;
}
.push-lg-0 {
left: auto;
}
.push-lg-1 {
left: 8.333333%;
}
.push-lg-2 {
left: 16.666667%;
}
.push-lg-3 {
left: 25%;
}
.push-lg-4 {
left: 33.333333%;
}
.push-lg-5 {
left: 41.666667%;
}
.push-lg-6 {
left: 50%;
}
.push-lg-7 {
left: 58.333333%;
}
.push-lg-8 {
left: 66.666667%;
}
.push-lg-9 {
left: 75%;
}
.push-lg-10 {
left: 83.333333%;
}
.push-lg-11 {
left: 91.666667%;
}
.push-lg-12 {
left: 100%;
}
.offset-lg-0 {
margin-left: 0%;
}
.offset-lg-1 {
margin-left: 8.333333%;
}
.offset-lg-2 {
margin-left: 16.666667%;
}
.offset-lg-3 {
margin-left: 25%;
}
.offset-lg-4 {
margin-left: 33.333333%;
}
.offset-lg-5 {
margin-left: 41.666667%;
}
.offset-lg-6 {
margin-left: 50%;
}
.offset-lg-7 {
margin-left: 58.333333%;
}
.offset-lg-8 {
margin-left: 66.666667%;
}
.offset-lg-9 {
margin-left: 75%;
}
.offset-lg-10 {
margin-left: 83.333333%;
}
.offset-lg-11 {
margin-left: 91.666667%;
}
}
@media (min-width: 1200px) {
.col-xl-1 {
float: left;
width: 8.333333%;
}
.col-xl-2 {
float: left;
width: 16.666667%;
}
.col-xl-3 {
float: left;
width: 25%;
}
.col-xl-4 {
float: left;
width: 33.333333%;
}
.col-xl-5 {
float: left;
width: 41.666667%;
}
.col-xl-6 {
float: left;
width: 50%;
}
.col-xl-7 {
float: left;
width: 58.333333%;
}
.col-xl-8 {
float: left;
width: 66.666667%;
}
.col-xl-9 {
float: left;
width: 75%;
}
.col-xl-10 {
float: left;
width: 83.333333%;
}
.col-xl-11 {
float: left;
width: 91.666667%;
}
.col-xl-12 {
float: left;
width: 100%;
}
.pull-xl-0 {
right: auto;
}
.pull-xl-1 {
right: 8.333333%;
}
.pull-xl-2 {
right: 16.666667%;
}
.pull-xl-3 {
right: 25%;
}
.pull-xl-4 {
right: 33.333333%;
}
.pull-xl-5 {
right: 41.666667%;
}
.pull-xl-6 {
right: 50%;
}
.pull-xl-7 {
right: 58.333333%;
}
.pull-xl-8 {
right: 66.666667%;
}
.pull-xl-9 {
right: 75%;
}
.pull-xl-10 {
right: 83.333333%;
}
.pull-xl-11 {
right: 91.666667%;
}
.pull-xl-12 {
right: 100%;
}
.push-xl-0 {
left: auto;
}
.push-xl-1 {
left: 8.333333%;
}
.push-xl-2 {
left: 16.666667%;
}
.push-xl-3 {
left: 25%;
}
.push-xl-4 {
left: 33.333333%;
}
.push-xl-5 {
left: 41.666667%;
}
.push-xl-6 {
left: 50%;
}
.push-xl-7 {
left: 58.333333%;
}
.push-xl-8 {
left: 66.666667%;
}
.push-xl-9 {
left: 75%;
}
.push-xl-10 {
left: 83.333333%;
}
.push-xl-11 {
left: 91.666667%;
}
.push-xl-12 {
left: 100%;
}
.offset-xl-0 {
margin-left: 0%;
}
.offset-xl-1 {
margin-left: 8.333333%;
}
.offset-xl-2 {
margin-left: 16.666667%;
}
.offset-xl-3 {
margin-left: 25%;
}
.offset-xl-4 {
margin-left: 33.333333%;
}
.offset-xl-5 {
margin-left: 41.666667%;
}
.offset-xl-6 {
margin-left: 50%;
}
.offset-xl-7 {
margin-left: 58.333333%;
}
.offset-xl-8 {
margin-left: 66.666667%;
}
.offset-xl-9 {
margin-left: 75%;
}
.offset-xl-10 {
margin-left: 83.333333%;
}
.offset-xl-11 {
margin-left: 91.666667%;
}
}
/*# sourceMappingURL=bootstrap-grid.css.map */

1
dist/css/bootstrap-grid.css.map vendored Normal file

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap-grid.min.css vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/css/bootstrap-grid.min.css.map vendored Normal file

File diff suppressed because one or more lines are too long

455
dist/css/bootstrap-reboot.css vendored Normal file
View File

@ -0,0 +1,455 @@
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
progress {
vertical-align: baseline;
}
template,
[hidden] {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline-width: 0;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: inherit;
}
b,
strong {
font-weight: bolder;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background-color: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
figure {
margin: 1em 40px;
}
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible;
}
button,
input,
select,
textarea {
font: inherit;
}
optgroup {
font-weight: bold;
}
button,
input,
select {
overflow: visible;
}
button,
input,
select,
textarea {
margin: 0;
}
button,
select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
}
[disabled] {
cursor: default;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
button:-moz-focusring,
input:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
@-ms-viewport {
width: device-width;
}
html {
font-size: 16px;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373a3c;
background-color: #fff;
}
[tabindex="-1"]:focus {
outline: none !important;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #818a91;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: .5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
a {
color: #0275d8;
text-decoration: none;
}
a:focus, a:hover {
color: #014c8c;
text-decoration: underline;
}
a:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
outline: none;
}
pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
}
figure {
margin: 0 0 1rem;
}
img {
vertical-align: middle;
}
[role="button"] {
cursor: pointer;
}
a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
table {
border-collapse: collapse;
background-color: transparent;
}
caption {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #818a91;
text-align: left;
caption-side: bottom;
}
th {
text-align: left;
}
label {
display: inline-block;
margin-bottom: .5rem;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
textarea {
margin: 0;
line-height: inherit;
border-radius: 0;
}
input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
cursor: not-allowed;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
textarea {
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
}
input[type="search"] {
-webkit-appearance: none;
}
output {
display: inline-block;
}
[hidden] {
display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */

1
dist/css/bootstrap-reboot.css.map vendored Normal file

File diff suppressed because one or more lines are too long

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

@ -0,0 +1,2 @@
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit}optgroup{font-weight:700}button,input,select{overflow:visible}button,input,select,textarea{margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}@-ms-viewport{width:device-width}html{font-size:16px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;line-height:1.5;color:#373a3c;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #818a91}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}a{color:#0275d8;text-decoration:none}a:focus,a:hover{color:#014c8c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle}[role=button]{cursor:pointer}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse;background-color:transparent}caption{padding-top:.75rem;padding-bottom:.75rem;color:#818a91;text-align:left;caption-side:bottom}th{text-align:left}label{display:inline-block;margin-bottom:.5rem}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,select,textarea{margin:0;line-height:inherit;border-radius:0}input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit}input[type=search]{-webkit-appearance:none}output{display:inline-block}[hidden]{display:none!important}
/*# sourceMappingURL=bootstrap-reboot.min.css.map */

1
dist/css/bootstrap-reboot.min.css.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["../../scss/_normalize.scss","bootstrap-reboot.css","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_tab-focus.scss"],"names":[],"mappings":"4EAOA,KACE,YAAA,WACA,qBAAA,KACA,yBAAA,KAOF,KACE,OAAA,EAYF,QAAA,MAAA,QAAA,WAAA,OAAA,OAAA,OAAA,KAAA,KAAA,IAAA,QAAA,QAYE,QAAA,MAOF,MAAA,OAAA,SAAA,MAIE,QAAA,aAOF,sBACE,QAAA,KACA,OAAA,EAOF,SACE,eAAA,SAQF,SAAA,SAEE,QAAA,KAUF,EACE,iBAAA,YAQF,SAAA,QAEE,cAAA,EAWF,YACE,cAAA,KACA,gBAAA,UACA,gBAAA,UAAA,OAOF,EAAA,OAEE,YAAA,QAOF,EAAA,OAEE,YAAA,OAOF,IACE,WAAA,OAQF,GACE,UAAA,IACA,OAAA,MAAA,EAOF,KACE,iBAAA,KACA,MAAA,KAOF,MACE,UAAA,IAQF,IAAA,IAEE,UAAA,IACA,YAAA,EACA,SAAA,SACA,eAAA,SAGF,IACE,OAAA,OAGF,IACE,IAAA,MAUF,IACE,aAAA,KAOF,eACE,SAAA,OAWF,KAAA,IAAA,IAAA,KAIE,YAAA,UAAA,UACA,UAAA,IAOF,OACE,OAAA,IAAA,KAQF,GACE,mBAAA,YAAA,WAAA,YACA,OAAA,EACA,SAAA,QAUF,OAAA,MAAA,OAAA,SAIE,KAAA,QAOF,SACE,YAAA,IASF,OAAA,MAAA,OAGE,SAAA,QAQF,OAAA,MAAA,OAAA,SAIE,OAAA,EAQF,OAAA,OAEE,eAAA,KAOF,cAAA,aAAA,cAAA,OAIE,OAAA,QC9IF,WDsJE,OAAA,QASF,aAAA,cAAA,OAAA,mBAIE,mBAAA,OAOF,yBAAA,wBAEE,OAAA,EACA,QAAA,EAOF,sBAAA,qBAEE,QAAA,IAAA,OAAA,WAOF,SACE,OAAA,IAAA,MAAA,OACA,OAAA,EAAA,IACA,QAAA,MAAA,OAAA,MAUF,OACE,mBAAA,WAAA,WAAA,WACA,MAAA,QACA,QAAA,MACA,UAAA,KACA,QAAA,EACA,YAAA,OAOF,SACE,SAAA,KC/KF,gBAAA,aDyLE,mBAAA,WAAA,WAAA,WACA,QAAA,ECpLF,yCAAA,yCD6LE,OAAA,KCxLF,cDgME,mBAAA,UC5LF,4CAAA,yCDsME,mBAAA,KEjZF,KACE,mBAAA,WAAA,WAAA,WAGF,EAAA,QAAA,SAGE,mBAAA,QAAA,WAAA,QAoBA,cAAgB,MAAA,aAQlB,KAEE,UAAA,KAOA,mBAAA,UAEA,4BAAA,YAGF,KAEE,YAAA,cAAA,mBAAA,WAAA,OCwFiH,iBDxFjH,MAAA,WACA,UAAA,KACA,YAAA,IAEA,MAAA,QAEA,iBAAA,KDmLF,sBC1KE,QAAA,YAYF,GAAI,GAAI,GAAI,GAAI,GAAI,GAClB,WAAA,EACA,cAAA,MAOF,EACE,WAAA,EACA,cAAA,KAIF,0BAAA,YAGE,OAAA,KACA,cAAA,IAAA,OAAA,QAGF,QACE,cAAA,KACA,WAAA,OACA,YAAA,QAGF,GAAA,GAAA,GAGE,WAAA,EACA,cAAA,KAGF,MAAA,MAAA,MAAA,MAIE,cAAA,EAGF,GACE,YAAA,IAGF,GACE,cAAA,MACA,YAAA,EAGF,WACE,OAAA,EAAA,EAAA,KAQF,EACE,MAAA,QACA,gBAAA,KAFF,QAAS,QAKL,MAAA,QACA,gBAAA,UANJ,QEzJE,QAAA,IAAA,KAAA,yBACA,eAAA,KF4KF,8BACE,MAAA,QACA,gBAAA,KAFF,oCAAqC,oCAKjC,MAAA,QACA,gBAAA,KANJ,oCAUI,QAAA,EASJ,IAEE,WAAA,EAEA,cAAA,KAEA,SAAA,KAQF,OAGE,OAAA,EAAA,EAAA,KAQF,IAGE,eAAA,OD+HF,cClHE,OAAA,QAcF,cAAA,EAAA,KAAA,OAAA,MAAA,MAAA,OAAA,QAAA,SASE,iBAAA,aAAA,aAAA,aAQF,MAEE,gBAAA,SAEA,iBAAA,YAGF,QACE,YAAA,OACA,eAAA,OACA,MAAA,QACA,WAAA,KACA,aAAA,OAGF,GAEE,WAAA,KAQF,MAEE,QAAA,aACA,cAAA,MAOF,aACE,QAAA,IAAA,OACA,QAAA,IAAA,KAAA,yBAGF,OAAA,MAAA,OAAA,SAKE,OAAA,EAIA,YAAA,QAEA,cAAA,EAGF,8BAAA,2BAMI,OAAA,YAKJ,iBAAA,iBAAA,2BAAA,kBASE,mBAAA,QAGF,SAEE,OAAA,SAGF,SAIE,UAAA,EAEA,QAAA,EACA,OAAA,EACA,OAAA,EAGF,OAEE,QAAA,MACA,MAAA,KACA,QAAA,EACA,cAAA,MACA,UAAA,OACA,YAAA,QAGF,mBAKE,mBAAA,KAIF,OACE,QAAA,aD8DF,SCtDE,QAAA"}

View File

@ -1,5 +1,5 @@
/*!
* Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
* Bootstrap v4.0.0-alpha.4 (http://getbootstrap.com)
* Copyright 2011-2016 The Bootstrap Authors
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@ -321,7 +321,7 @@ html {
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373a3c;
@ -2097,14 +2097,8 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
.has-success .form-control-feedback,
.has-success .form-control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label,
.has-success .form-check-label,
.has-success .form-check-inline,
.has-success .custom-control {
color: #5cb85c;
}
@ -2129,14 +2123,8 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
.has-warning .form-control-feedback,
.has-warning .form-control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label,
.has-warning .form-check-label,
.has-warning .form-check-inline,
.has-warning .custom-control {
color: #f0ad4e;
}
@ -2161,14 +2149,8 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
.has-danger .form-control-feedback,
.has-danger .form-control-label,
.has-danger .radio,
.has-danger .checkbox,
.has-danger .radio-inline,
.has-danger .checkbox-inline,
.has-danger.radio label,
.has-danger.checkbox label,
.has-danger.radio-inline label,
.has-danger.checkbox-inline label,
.has-danger .form-check-label,
.has-danger .form-check-inline,
.has-danger .custom-control {
color: #d9534f;
}
@ -3377,7 +3359,7 @@ input[type="button"].btn-block {
.custom-control {
position: relative;
display: inline;
display: inline-block;
padding-left: 1.5rem;
cursor: pointer;
}
@ -3419,7 +3401,7 @@ input[type="button"].btn-block {
.custom-control-indicator {
position: absolute;
top: .0625rem;
top: .25rem;
left: 0;
display: block;
width: 1rem;
@ -3458,13 +3440,8 @@ input[type="button"].btn-block {
}
.custom-controls-stacked .custom-control {
display: inline;
}
.custom-controls-stacked .custom-control::after {
display: block;
margin-bottom: 0.25rem;
content: "";
float: left;
clear: left;
}
.custom-controls-stacked .custom-control + .custom-control {
@ -3800,10 +3777,14 @@ input[type="button"].btn-block {
}
.navbar-toggler {
width: 2.5em;
height: 2em;
padding: .5rem .75rem;
font-size: 1.25rem;
line-height: 1;
background: none;
background: transparent no-repeat center center;
-webkit-background-size: 24px 24px;
background-size: 24px 24px;
border: 1px solid transparent;
border-radius: 0.25rem;
}
@ -3812,24 +3793,6 @@ input[type="button"].btn-block {
text-decoration: none;
}
@media (min-width: 544px) {
.navbar-toggleable-xs {
display: block !important;
}
}
@media (min-width: 768px) {
.navbar-toggleable-sm {
display: block !important;
}
}
@media (min-width: 992px) {
.navbar-toggleable-md {
display: block !important;
}
}
.navbar-nav .nav-item {
float: left;
}
@ -3877,6 +3840,10 @@ input[type="button"].btn-block {
color: rgba(0, 0, 0, 0.8);
}
.navbar-light .navbar-toggler {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.3)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-light .navbar-divider {
background-color: rgba(0, 0, 0, 0.075);
}
@ -3910,10 +3877,71 @@ input[type="button"].btn-block {
color: white;
}
.navbar-dark .navbar-toggler {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-dark .navbar-divider {
background-color: rgba(255, 255, 255, 0.075);
}
.navbar-toggleable-xs::after {
content: "";
display: table;
clear: both;
}
@media (max-width: 543px) {
.navbar-toggleable-xs .navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@media (min-width: 544px) {
.navbar-toggleable-xs {
display: block !important;
}
}
.navbar-toggleable-sm::after {
content: "";
display: table;
clear: both;
}
@media (max-width: 767px) {
.navbar-toggleable-sm .navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@media (min-width: 768px) {
.navbar-toggleable-sm {
display: block !important;
}
}
.navbar-toggleable-md::after {
content: "";
display: table;
clear: both;
}
@media (max-width: 991px) {
.navbar-toggleable-md .navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@media (min-width: 992px) {
.navbar-toggleable-md {
display: block !important;
}
}
.card {
position: relative;
display: block;
@ -3966,6 +3994,7 @@ input[type="button"].btn-block {
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: #f5f5f5;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
@ -3977,7 +4006,7 @@ input[type="button"].btn-block {
}
.card-header:first-child {
border-radius: 0.25rem 0.25rem 0 0;
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.card-footer {
@ -3993,7 +4022,7 @@ input[type="button"].btn-block {
}
.card-footer:last-child {
border-radius: 0 0 0.25rem 0.25rem;
border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}
.card-header-tabs {
@ -4118,7 +4147,7 @@ input[type="button"].btn-block {
}
.card-img {
border-radius: 0.25rem;
border-radius: calc(0.25rem - 1px);
}
.card-img-overlay {
@ -4131,13 +4160,13 @@ input[type="button"].btn-block {
}
.card-img-top {
border-top-right-radius: 0.25rem;
border-top-left-radius: 0.25rem;
border-top-right-radius: calc(0.25rem - 1px);
border-top-left-radius: calc(0.25rem - 1px);
}
.card-img-bottom {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: calc(0.25rem - 1px);
border-bottom-left-radius: calc(0.25rem - 1px);
}
@media (min-width: 544px) {
@ -4447,7 +4476,7 @@ a.tag:focus, a.tag:hover {
}
.alert {
padding: 15px;
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
@ -4462,13 +4491,13 @@ a.tag:focus, a.tag:hover {
}
.alert-dismissible {
padding-right: 35px;
padding-right: 2rem;
}
.alert-dismissible .close {
position: relative;
top: -2px;
right: -21px;
top: -.125rem;
right: -1rem;
color: inherit;
}
@ -4744,14 +4773,6 @@ base::-moz-progress-bar,
}
}
.media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
.media,
.media-body {
overflow: hidden;
@ -5100,7 +5121,7 @@ button.close {
.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform .3s ease-out;
transition: -webkit-transform .3s ease-out;
-o-transition: transform .3s ease-out, -o-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
transition: transform .3s ease-out, -webkit-transform .3s ease-out, -o-transform .3s ease-out;
-webkit-transform: translate(0, -25%);
@ -5220,7 +5241,7 @@ button.close {
position: absolute;
z-index: 1070;
display: block;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
@ -5320,7 +5341,7 @@ button.close {
display: block;
max-width: 276px;
padding: 1px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
@ -5485,7 +5506,7 @@ button.close {
.carousel-inner > .carousel-item {
-webkit-transition: -webkit-transform .6s ease-in-out;
transition: -webkit-transform .6s ease-in-out;
-o-transition: transform .6s ease-in-out, -o-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out, -o-transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
@ -5691,10 +5712,6 @@ button.close {
}
}
.bg-inverse {
background-color: #373a3c;
}
.bg-faded {
background-color: #f7f7f9;
}
@ -5744,6 +5761,15 @@ a.bg-danger:focus, a.bg-danger:hover {
background-color: #c9302c !important;
}
.bg-inverse {
color: #fff !important;
background-color: #373a3c !important;
}
a.bg-inverse:focus, a.bg-inverse:hover {
background-color: #1f2021 !important;
}
.clearfix::after {
content: "";
display: table;
@ -6202,7 +6228,7 @@ a.bg-danger:focus, a.bg-danger:hover {
}
a.text-muted:focus, a.text-muted:hover {
color: #687077;
color: #687077 !important;
}
.text-primary {
@ -6210,7 +6236,7 @@ a.text-muted:focus, a.text-muted:hover {
}
a.text-primary:focus, a.text-primary:hover {
color: #025aa5;
color: #025aa5 !important;
}
.text-success {
@ -6218,7 +6244,7 @@ a.text-primary:focus, a.text-primary:hover {
}
a.text-success:focus, a.text-success:hover {
color: #449d44;
color: #449d44 !important;
}
.text-info {
@ -6226,7 +6252,7 @@ a.text-success:focus, a.text-success:hover {
}
a.text-info:focus, a.text-info:hover {
color: #31b0d5;
color: #31b0d5 !important;
}
.text-warning {
@ -6234,7 +6260,7 @@ a.text-info:focus, a.text-info:hover {
}
a.text-warning:focus, a.text-warning:hover {
color: #ec971f;
color: #ec971f !important;
}
.text-danger {
@ -6242,7 +6268,15 @@ a.text-warning:focus, a.text-warning:hover {
}
a.text-danger:focus, a.text-danger:hover {
color: #c9302c;
color: #c9302c !important;
}
.text-gray-dark {
color: #373a3c !important;
}
a.text-gray-dark:focus, a.text-gray-dark:hover {
color: #1f2021 !important;
}
.text-hide {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,5 @@
/*!
* Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
* Bootstrap v4.0.0-alpha.4 (http://getbootstrap.com)
* Copyright 2011-2016 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@ -20,7 +20,7 @@ if (typeof jQuery === 'undefined') {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): util.js
* Bootstrap (v4.0.0-alpha.4): util.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -190,7 +190,7 @@ var Util = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): alert.js
* Bootstrap (v4.0.0-alpha.4): alert.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -204,7 +204,7 @@ var Alert = (function ($) {
*/
var NAME = 'alert';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.alert';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -376,7 +376,7 @@ var Alert = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): button.js
* Bootstrap (v4.0.0-alpha.4): button.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -390,7 +390,7 @@ var Button = (function ($) {
*/
var NAME = 'button';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.button';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -544,7 +544,7 @@ var Button = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): carousel.js
* Bootstrap (v4.0.0-alpha.4): carousel.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -558,7 +558,7 @@ var Carousel = (function ($) {
*/
var NAME = 'carousel';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.carousel';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -1020,7 +1020,7 @@ var Carousel = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): collapse.js
* Bootstrap (v4.0.0-alpha.4): collapse.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -1034,7 +1034,7 @@ var Collapse = (function ($) {
*/
var NAME = 'collapse';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.collapse';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -1378,7 +1378,7 @@ var Collapse = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): dropdown.js
* Bootstrap (v4.0.0-alpha.4): dropdown.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -1392,7 +1392,7 @@ var Dropdown = (function ($) {
*/
var NAME = 'dropdown';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.dropdown';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -1669,7 +1669,7 @@ var Dropdown = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): modal.js
* Bootstrap (v4.0.0-alpha.4): modal.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -1683,7 +1683,7 @@ var Modal = (function ($) {
*/
var NAME = 'modal';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.modal';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -2196,7 +2196,7 @@ var Modal = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): scrollspy.js
* Bootstrap (v4.0.0-alpha.4): scrollspy.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -2210,7 +2210,7 @@ var ScrollSpy = (function ($) {
*/
var NAME = 'scrollspy';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.scrollspy';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -2511,7 +2511,7 @@ var ScrollSpy = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): tab.js
* Bootstrap (v4.0.0-alpha.4): tab.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -2525,7 +2525,7 @@ var Tab = (function ($) {
*/
var NAME = 'tab';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.tab';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -2770,7 +2770,7 @@ var Tab = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): tooltip.js
* Bootstrap (v4.0.0-alpha.4): tooltip.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -2792,7 +2792,7 @@ var Tooltip = (function ($) {
*/
var NAME = 'tooltip';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.tooltip';
var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME];
@ -3381,7 +3381,7 @@ var Tooltip = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): popover.js
* Bootstrap (v4.0.0-alpha.4): popover.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -3395,7 +3395,7 @@ var Popover = (function ($) {
*/
var NAME = 'popover';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.popover';
var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME];

File diff suppressed because one or more lines are too long

View File

@ -78,6 +78,16 @@
origin: >
Bootstrap#19670
-
browser: >
Microsoft Edge
summary: >
Active `position: fixed;` `<button>` flickers when scrolling
upstream_bug: >
Edge#8770398
origin: >
Bootstrap#20507
-
browser: >
Firefox
@ -138,6 +148,16 @@
origin: >
Bootstrap#20161
-
browser: >
Firefox
summary: >
`min-width: 0` has no effect on `<fieldset>`
upstream_bug: >
Mozilla#504622
origin: >
Bootstrap#12359
-
browser: >
Firefox (Windows)

View File

@ -18,6 +18,36 @@
origin: >
Bootstrap#17021
-
browser: >
Microsoft Edge
summary: >
Implement the HTML5 [`<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
upstream_bug: >
UserVoice#6508895
origin: >
Bootstrap#20175
-
browser: >
Microsoft Edge
summary: >
Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
upstream_bug: >
UserVoice#15939898
origin: >
Bootstrap#20618
-
browser: >
Microsoft Edge
summary: >
Implement the [`of <selector-list>` clause](http://caniuse.com/#feat=css-nth-child-of) of the `:nth-child()` pseudo-class
upstream_bug: >
UserVoice#15944476
origin: >
Bootstrap#20143
-
browser: >
Firefox
@ -48,6 +78,16 @@
origin: >
Bootstrap#20175
-
browser: >
Chrome
summary: >
Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
upstream_bug: >
Chromium#642487
origin: >
Chromium#437860
-
browser: >
Chrome
@ -78,6 +118,16 @@
origin: >
Bootstrap#17021
-
browser: >
Safari
summary: >
Fire a [`transitioncancel` event](https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel) when a CSS transition is canceled
upstream_bug: >
WebKit#161535
origin: >
Bootstrap#20618
-
browser: >
Safari

View File

@ -53,6 +53,20 @@
- title: Tooltips
- title: Utilities
- title: Utilities
pages:
- title: Clearfix
- title: Close icon
- title: Colors
- title: Display property
- title: Image replacement
- title: Invisible content
- title: Responsive helpers
- title: Screenreaders
- title: Sizing and positioning
- title: Spacing
- title: Typography
# - title: Extend
# pages:
# - title: Approach

View File

@ -12,3 +12,8 @@
code: ja
description: Bootstrap 4 日本語リファレンス
url: http://bootstrap4.jp/
- name: Brazilian Portuguese
code: pt-BR
description: Bootstrap 4 Português do Brasil
url: http://bootstrapbrasil.github.io/v4/

View File

@ -1 +1 @@
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>

View File

@ -15,6 +15,9 @@
<!-- Bootstrap core CSS -->
{% if site.github %}
<link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
{% if page.title == "Flexbox grid system" %}
<link href="{{ site.baseurl }}/assets/css/docs-flexbox.min.css" rel="stylesheet">
{% endif %}
{% else %}
<link href="{{ site.baseurl }}/dist/css/bootstrap.css" rel="stylesheet">
{% endif %}

View File

@ -27,9 +27,7 @@
<nav>
<div class="clearfix">
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
</button>
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
Bootstrap
</a>

View File

@ -18,6 +18,11 @@
<p class="lead">
Over a dozen reusable components built to provide buttons, dropdowns, input groups, navigation, alerts, and much more.
</p>
{% elsif page.group == "utilities" %}
<h1>Utilities</h1>
<p class="lead">
Bootstrap includes dozens of utilities—classes with a single purpose to reduce the frequency of highly repetitive declarations.
</p>
{% elsif page.group == "javascript" %}
<h1>JavaScript plugins</h1>
<p class="lead">

1240
docs/assets/css/docs-flexbox.min.css vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,66 +1,50 @@
// scss-lint:disable ImportantRule
// scss-lint:disable ImportantRule, IdSelector
//
// Carbon ads
//
.carbonad {
width: auto !important;
height: auto !important;
padding: 1.25rem !important;
margin: 2rem ($grid-gutter-width * -1) -2rem !important;
overflow: hidden; // clearfix
font-family: inherit !important;
font-size: .8rem !important;
line-height: 1rem !important;
color: $bd-purple-light !important;
#carbonads {
display: block;
padding: 15px 15px 15px 160px;
margin: 50px -15px 0;
overflow: hidden;
font-size: 13px;
line-height: 1.5;
text-align: left;
background: darken($bd-purple, 10%) !important;
border: 0 !important;
}
border: solid #866ab3;
border-width: 1px 0 0;
.carbonad-img {
margin: 0 !important;
}
a {
color: #fff;
text-decoration: none;
}
.carbonad-text,
.carbonad-tag {
display: block !important;
float: none !important;
width: auto !important;
height: auto !important;
margin-left: 145px !important;
font-family: inherit !important;
}
@include media-breakpoint-up(sm) {
max-width: 330px;
margin: 50px auto 0;
border-width: 1px;
border-radius: 4px;
}
.carbonad-text {
padding-top: 0 !important;
}
@include media-breakpoint-up(lg) {
position: absolute;
top: 0;
right: 15px;
margin-top: 0;
.carbonad-tag {
color: inherit !important;
text-align: left !important;
}
.carbonad-text a,
.carbonad-tag a {
color: $bd-purple-light !important;
&:hover {
color: #fff !important;
.bd-masthead & {
position: static;
}
}
}
@include media-breakpoint-up(sm) {
.carbonad {
width: 330px !important;
padding: 1rem !important;
margin-right: auto !important;
margin-left: auto !important;
border-radius: .25rem;
}
.carbon-img {
float: left;
margin-left: -145px;
}
@include media-breakpoint-up(md) {
.carbon-poweredby {
display: block;
color: #cdbfe3 !important;
}

View File

@ -3,6 +3,9 @@
//
.bd-navbar {
padding-right: 0;
padding-left: 0;
.navbar-nav {
.nav-link {
color: $bd-graphite-light;

View File

@ -0,0 +1,33 @@
// Bootstrap flexbox grid for our docs page
//
// Variables
//
@import "custom";
@import "variables";
// Override for flexbox mode
$enable-flex: true;
//
// Grid mixins
//
@import "mixins/clearfix";
@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";
//
// Utilities for flex alignment
//
@import "utilities/flex";
//
// Generate the grid class
//
@import "grid";

View File

@ -517,7 +517,7 @@ Only applies to small devices and above.
{% example html %}
<div class="card-columns">
<div class="card">
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
<img class="card-img-top img-fluid" data-src="holder.js/100px160/" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@ -534,7 +534,7 @@ Only applies to small devices and above.
</blockquote>
</div>
<div class="card">
<img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
<img class="card-img-top img-fluid" data-src="holder.js/100px160/" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@ -557,7 +557,7 @@ Only applies to small devices and above.
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card">
<img class="card-img" data-src="holder.js/100px260/" alt="Card image">
<img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image">
</div>
<div class="card card-block text-xs-right">
<blockquote class="card-blockquote">

View File

@ -43,39 +43,39 @@ Extend the default collapse behavior to create an accordion.
{% example html %}
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="m-b-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</h5>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div id="collapseOne" class="card-block collapse in" role="tabpanel" aria-labelledby="headingOne">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="m-b-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</h5>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div id="collapseTwo" class="card-block collapse" role="tabpanel" aria-labelledby="headingTwo">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="m-b-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</h5>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div id="collapseThree" class="card-block collapse" role="tabpanel" aria-labelledby="headingThree">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>

View File

@ -36,7 +36,7 @@ And with `<a>` elements:
{% example html %}
<div class="dropdown open">
<a class="btn btn-secondary dropdown-toggle" href="http://example.com" id="dropdownMenuLink" data-target="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="btn btn-secondary dropdown-toggle" href="http://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
@ -361,7 +361,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<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 dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -500,20 +500,6 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
</div>
{% endhighlight %}
To keep URLs intact with link buttons, use the `data-target` attribute instead of `href="#"`.
{% highlight html %}
<div class="dropdown">
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
</a>
<div class="dropdown-menu" aria-labelledby="dLabel">
...
</div>
</div>
{% endhighlight %}
### Via JavaScript
Call the dropdowns via JavaScript:

View File

@ -59,28 +59,29 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
</div>
<fieldset class="form-group">
<legend>Radio buttons</legend>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</fieldset>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
@ -150,10 +151,8 @@ Below is a complete list of the specific form controls supported by Bootstrap an
<tr>
<td class="text-nowrap">
{% markdown %}
`.radio`<br>
`.radio-inline`<br>
`.checkbox`<br>
`.checkbox-inline`
`.form-check`<br>
`.form-check-inline`
{% endmarkdown %}
</td>
<td class="text-nowrap">
@ -724,27 +723,27 @@ Ensure that an alternative indication of state is also provided. For instance, y
<div class="form-group has-danger">
<label class="col-form-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
<div class="form-control-feedback">Shit, that username's taken. Try another?</div>
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
{% endexample %}
{% example html %}
<div class="checkbox has-success">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
<div class="form-check has-success">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
<div class="checkbox has-warning">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
<div class="form-check has-warning">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
<div class="checkbox has-danger">
<label>
<input type="checkbox" id="checkboxDanger" value="option1">
<div class="form-check has-danger">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="checkboxDanger" value="option1">
Checkbox with danger
</label>
</div>

View File

@ -200,7 +200,7 @@ Buttons in input groups are a bit different and require one extra level of nesti
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary">Action</button>
<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 dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -219,7 +219,7 @@ Buttons in input groups are a bit different and require one extra level of nesti
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary">Action</button>
<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 dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right">

View File

@ -304,9 +304,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
{% example html %}
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse text-muted p-a-1">
<h4>Collapsed content</h4>
@ -334,9 +332,7 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
{% example html %}
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
</button>
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Responsive navbar</a>
<ul class="nav navbar-nav">

View File

@ -11,7 +11,7 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
### Example
## Example
To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/components/utilities/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.
@ -33,7 +33,7 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t
<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
{% endexample %}
### IE9 support
## IE9 support
Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that.
@ -46,7 +46,7 @@ Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can w
</progress>
{% endexample %}
### Contextual alternatives
## Contextual alternatives
Progress bars use some of the same button and alert classes for consistent styles.

View File

@ -49,25 +49,25 @@ Hover over the links below to see tooltips:
Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-tooltip-static">
<div class="tooltip top" role="tooltip">
<div class="tooltip tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the top
</div>
</div>
<div class="tooltip right" role="tooltip">
<div class="tooltip tooltip-right" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the right
</div>
</div>
<div class="tooltip bottom" role="tooltip">
<div class="tooltip tooltip-bottom" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the bottom
</div>
</div>
<div class="tooltip left" role="tooltip">
<div class="tooltip tooltip-left" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the left
@ -128,7 +128,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
<div class="tooltip tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
@ -186,7 +186,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>string | function</td>
<td>'top'</td>
<td>
<p>How to position the tooltip - top | bottom | left | right | auto.<br>When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</p>
<p>How to position the tooltip - top | bottom | left | right.</p>
<p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
</td>
</tr>

View File

@ -1,367 +0,0 @@
---
layout: docs
title: Utility classes
group: components
---
Bootstrap includes dozens of utilities—classes with a single purpose. They're designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Spacing
Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.
The classes are named using the format: `{property}-{sides}-{size}`
Where *property* is one of:
* `m` - for classes that set `margin`
* `p` - for classes that set `padding`
Where *sides* is one of:
* `t` - for classes that set `margin-top` or `padding-top`
* `b` - for classes that set `margin-bottom` or `padding-bottom`
* `l` - for classes that set `margin-left` or `padding-left`
* `r` - for classes that set `margin-right` or `padding-right`
* `x` - for classes that set both `*-left` and `*-right`
* `y` - for classes that set both `*-top` and `*-bottom`
* `a` - for classes that set a `margin` or `padding` on all 4 sides of the element
Where *size* is one of:
* `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y`
* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3`
(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
Here are some representative examples of these classes:
{% highlight scss %}
.m-t-0 {
margin-top: 0 !important;
}
.m-l-1 {
margin-left: $spacer-x !important;
}
.p-x-2 {
padding-left: ($spacer-x * 1.5) !important;
padding-right: ($spacer-x * 1.5) !important;
}
.p-a-3 {
padding: ($spacer-y * 3) ($spacer-x * 3) !important;
}
{% endhighlight %}
### Horizontal centering
Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
<div class="bd-example">
<div class="m-x-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
Centered element
</div>
</div>
{% highlight html %}
<div class="m-x-auto" style="width: 200px;">
Centered element
</div>
{% endhighlight %}
## Text alignment
Easily realign text to components with text alignment classes.
{% example html %}
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
{% endexample %}
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
{% example html %}
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
{% endexample %}
## Text transform
Transform text in components with text capitalization classes.
{% example html %}
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
{% endexample %}
Note how `text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected.
## Font weight and italics
Quickly change the weight (boldness) of text or italicize text.
{% example html %}
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-italic">Italic text.</p>
{% endexample %}
## Contextual colors and backgrounds
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
{% example html %}
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
{% endexample %}
Contextual text classes also work well on anchors with the provided hover and focus states.
{% example html %}
<a href="#" class="text-muted">Muted link</a>
<a href="#" class="text-primary">Primary link</a>
<a href="#" class="text-success">Success link</a>
<a href="#" class="text-info">Info link</a>
<a href="#" class="text-warning">Warning link</a>
<a href="#" class="text-danger">Danger link</a>
{% endexample %}
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
{% example html %}
<div class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
<div class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
<div class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
<div class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</div>
<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
<div class="bg-inverse">Cras mattis consectetur purus sit amet fermentum.</div>
{% endexample %}
{% callout info %}
#### Dealing with specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class.
{% endcallout %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
## Widths
Easily make an element as wide as its parent using the `.w-100` utility class, which sets `width: 100%`.
{% example html %}
<img class="w-100" data-src="holder.js/200px100?outline=yes&text=Width%20%3D%20100%25" alt="Width = 100%">
{% endexample %}
## CSS `display` (`block`, `inline`, `inline-block`)
Use `.d-block`, `.d-inline`, or `.d-inline-block` to simply set an element's [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) to `block`, `inline`, or `inline-block` (respectively).
To make an element `display: none`, use our [responsive utilities](../layout/responsive-utilities/) instead.
{% example html %}
<div class="d-inline bg-success">Inline</div>
<div class="d-inline bg-success">Inline</div>
<span class="d-block bg-primary">Block</span>
<div class="d-inline-block bg-warning">
<h3>inline-block</h3>
Boot that strap!
</div>
<div class="d-inline-block bg-warning">
<h3>inline-block</h3>
Strap that boot!
</div>
{% endexample %}
## Close icon
Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`.
{% example html %}
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{% endexample %}
## Responsive floats
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.
Two similar non-responsive mixins (`pull-left` and `pull-right`) are also available.
{% example html %}
<div class="pull-xs-left">Float left on all viewport sizes</div><br>
<div class="pull-xs-right">Float right on all viewport sizes</div><br>
<div class="pull-xs-none">Don't float on all viewport sizes</div><br>
<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
{% endexample %}
{% highlight scss %}
// Related simple non-responsive mixins
.element {
@include pull-left;
}
.another-element {
@include pull-right;
}
{% endhighlight %}
## Clearfix
Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin.
{% highlight html %}
<div class="clearfix">...</div>
{% endhighlight %}
{% highlight scss %}
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
@include clearfix;
}
{% endhighlight %}
## Fixed positioning
The `.pos-f-t` class can be used to easily position elements at the top of the viewport and make them as wide as the viewport. **Be sure you understand the ramifications of fixed-position elements within your project.** Here's how the class is defined:
{% highlight scss %}
.pos-f-t {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $zindex-navbar-fixed;
}
{% endhighlight %}
## Invisible content
The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
{% highlight html %}
<div class="invisible">...</div>
{% endhighlight %}
{% highlight scss %}
// Class
.invisible {
visibility: hidden;
}
// Usage as a mixin
.element {
@include invisible;
}
{% endhighlight %}
## Screen readers and keyboard users
Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
{% comment %}
Necessary for following [accessibility best practices](../getting-started/#accessibility).
{% endcomment %}
{% highlight html %}
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
{% endhighlight %}
{% highlight scss %}
// Usage as a mixin
.skip-navigation {
@include sr-only;
@include sr-only-focusable;
}
{% endhighlight %}
## Image replacement
Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image.
{% highlight html %}
<h1 class="text-hide">Custom heading</h1>
{% endhighlight %}
{% highlight scss %}
// Usage as a mixin
.heading {
@include text-hide;
}
{% endhighlight %}
## Responsive embeds
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.
**Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
{% example html %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
{% endexample %}
Aspect ratios can be customized with modifier classes.
{% highlight html %}
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
{% endhighlight %}

View File

@ -46,14 +46,6 @@ $font-family-sans-serif:
"Segoe UI",
// Android
"Roboto",
// Linux
"Oxygen", // KDE
"Ubuntu",
"Cantarell", // GNOME
// Firefox OS [R.I.P.]
"Fira Sans",
// Older Android
"Droid Sans",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif !default;
{% endhighlight %}

View File

@ -31,27 +31,27 @@ All HTML headings, `<h1>` through `<h6>`, are available.
<tbody>
<tr>
<td><h1>h1. Bootstrap heading</h1></td>
<td class="type-info">Semibold 36px</td>
<td class="type-info">Semibold 2.5rem (40px)</td>
</tr>
<tr>
<td><h2>h2. Bootstrap heading</h2></td>
<td class="type-info">Semibold 30px</td>
<td class="type-info">Semibold 2rem (32px)</td>
</tr>
<tr>
<td><h3>h3. Bootstrap heading</h3></td>
<td class="type-info">Semibold 24px</td>
<td class="type-info">Semibold 1.75rem (28px)</td>
</tr>
<tr>
<td><h4>h4. Bootstrap heading</h4></td>
<td class="type-info">Semibold 18px</td>
<td class="type-info">Semibold 1.5rem (24px)</td>
</tr>
<tr>
<td><h5>h5. Bootstrap heading</h5></td>
<td class="type-info">Semibold 14px</td>
<td class="type-info">Semibold 1.25rem (20px)</td>
</tr>
<tr>
<td><h6>h6. Bootstrap heading</h6></td>
<td class="type-info">Semibold 12px</td>
<td class="type-info">Semibold 1rem (16px)</td>
</tr>
</tbody>
</table>

7109
docs/dist/css/bootstrap-flex.css vendored Normal file

File diff suppressed because it is too large Load Diff

1
docs/dist/css/bootstrap-flex.css.map vendored Normal file

File diff suppressed because one or more lines are too long

7
docs/dist/css/bootstrap-flex.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

936
docs/dist/css/bootstrap-grid.css vendored Normal file
View File

@ -0,0 +1,936 @@
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.container::after {
content: "";
display: table;
clear: both;
}
@media (min-width: 544px) {
.container {
max-width: 576px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 940px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.container-fluid {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.container-fluid::after {
content: "";
display: table;
clear: both;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.row::after {
content: "";
display: table;
clear: both;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-1 {
float: left;
width: 8.333333%;
}
.col-xs-2 {
float: left;
width: 16.666667%;
}
.col-xs-3 {
float: left;
width: 25%;
}
.col-xs-4 {
float: left;
width: 33.333333%;
}
.col-xs-5 {
float: left;
width: 41.666667%;
}
.col-xs-6 {
float: left;
width: 50%;
}
.col-xs-7 {
float: left;
width: 58.333333%;
}
.col-xs-8 {
float: left;
width: 66.666667%;
}
.col-xs-9 {
float: left;
width: 75%;
}
.col-xs-10 {
float: left;
width: 83.333333%;
}
.col-xs-11 {
float: left;
width: 91.666667%;
}
.col-xs-12 {
float: left;
width: 100%;
}
.pull-xs-0 {
right: auto;
}
.pull-xs-1 {
right: 8.333333%;
}
.pull-xs-2 {
right: 16.666667%;
}
.pull-xs-3 {
right: 25%;
}
.pull-xs-4 {
right: 33.333333%;
}
.pull-xs-5 {
right: 41.666667%;
}
.pull-xs-6 {
right: 50%;
}
.pull-xs-7 {
right: 58.333333%;
}
.pull-xs-8 {
right: 66.666667%;
}
.pull-xs-9 {
right: 75%;
}
.pull-xs-10 {
right: 83.333333%;
}
.pull-xs-11 {
right: 91.666667%;
}
.pull-xs-12 {
right: 100%;
}
.push-xs-0 {
left: auto;
}
.push-xs-1 {
left: 8.333333%;
}
.push-xs-2 {
left: 16.666667%;
}
.push-xs-3 {
left: 25%;
}
.push-xs-4 {
left: 33.333333%;
}
.push-xs-5 {
left: 41.666667%;
}
.push-xs-6 {
left: 50%;
}
.push-xs-7 {
left: 58.333333%;
}
.push-xs-8 {
left: 66.666667%;
}
.push-xs-9 {
left: 75%;
}
.push-xs-10 {
left: 83.333333%;
}
.push-xs-11 {
left: 91.666667%;
}
.push-xs-12 {
left: 100%;
}
.offset-xs-1 {
margin-left: 8.333333%;
}
.offset-xs-2 {
margin-left: 16.666667%;
}
.offset-xs-3 {
margin-left: 25%;
}
.offset-xs-4 {
margin-left: 33.333333%;
}
.offset-xs-5 {
margin-left: 41.666667%;
}
.offset-xs-6 {
margin-left: 50%;
}
.offset-xs-7 {
margin-left: 58.333333%;
}
.offset-xs-8 {
margin-left: 66.666667%;
}
.offset-xs-9 {
margin-left: 75%;
}
.offset-xs-10 {
margin-left: 83.333333%;
}
.offset-xs-11 {
margin-left: 91.666667%;
}
@media (min-width: 544px) {
.col-sm-1 {
float: left;
width: 8.333333%;
}
.col-sm-2 {
float: left;
width: 16.666667%;
}
.col-sm-3 {
float: left;
width: 25%;
}
.col-sm-4 {
float: left;
width: 33.333333%;
}
.col-sm-5 {
float: left;
width: 41.666667%;
}
.col-sm-6 {
float: left;
width: 50%;
}
.col-sm-7 {
float: left;
width: 58.333333%;
}
.col-sm-8 {
float: left;
width: 66.666667%;
}
.col-sm-9 {
float: left;
width: 75%;
}
.col-sm-10 {
float: left;
width: 83.333333%;
}
.col-sm-11 {
float: left;
width: 91.666667%;
}
.col-sm-12 {
float: left;
width: 100%;
}
.pull-sm-0 {
right: auto;
}
.pull-sm-1 {
right: 8.333333%;
}
.pull-sm-2 {
right: 16.666667%;
}
.pull-sm-3 {
right: 25%;
}
.pull-sm-4 {
right: 33.333333%;
}
.pull-sm-5 {
right: 41.666667%;
}
.pull-sm-6 {
right: 50%;
}
.pull-sm-7 {
right: 58.333333%;
}
.pull-sm-8 {
right: 66.666667%;
}
.pull-sm-9 {
right: 75%;
}
.pull-sm-10 {
right: 83.333333%;
}
.pull-sm-11 {
right: 91.666667%;
}
.pull-sm-12 {
right: 100%;
}
.push-sm-0 {
left: auto;
}
.push-sm-1 {
left: 8.333333%;
}
.push-sm-2 {
left: 16.666667%;
}
.push-sm-3 {
left: 25%;
}
.push-sm-4 {
left: 33.333333%;
}
.push-sm-5 {
left: 41.666667%;
}
.push-sm-6 {
left: 50%;
}
.push-sm-7 {
left: 58.333333%;
}
.push-sm-8 {
left: 66.666667%;
}
.push-sm-9 {
left: 75%;
}
.push-sm-10 {
left: 83.333333%;
}
.push-sm-11 {
left: 91.666667%;
}
.push-sm-12 {
left: 100%;
}
.offset-sm-0 {
margin-left: 0%;
}
.offset-sm-1 {
margin-left: 8.333333%;
}
.offset-sm-2 {
margin-left: 16.666667%;
}
.offset-sm-3 {
margin-left: 25%;
}
.offset-sm-4 {
margin-left: 33.333333%;
}
.offset-sm-5 {
margin-left: 41.666667%;
}
.offset-sm-6 {
margin-left: 50%;
}
.offset-sm-7 {
margin-left: 58.333333%;
}
.offset-sm-8 {
margin-left: 66.666667%;
}
.offset-sm-9 {
margin-left: 75%;
}
.offset-sm-10 {
margin-left: 83.333333%;
}
.offset-sm-11 {
margin-left: 91.666667%;
}
}
@media (min-width: 768px) {
.col-md-1 {
float: left;
width: 8.333333%;
}
.col-md-2 {
float: left;
width: 16.666667%;
}
.col-md-3 {
float: left;
width: 25%;
}
.col-md-4 {
float: left;
width: 33.333333%;
}
.col-md-5 {
float: left;
width: 41.666667%;
}
.col-md-6 {
float: left;
width: 50%;
}
.col-md-7 {
float: left;
width: 58.333333%;
}
.col-md-8 {
float: left;
width: 66.666667%;
}
.col-md-9 {
float: left;
width: 75%;
}
.col-md-10 {
float: left;
width: 83.333333%;
}
.col-md-11 {
float: left;
width: 91.666667%;
}
.col-md-12 {
float: left;
width: 100%;
}
.pull-md-0 {
right: auto;
}
.pull-md-1 {
right: 8.333333%;
}
.pull-md-2 {
right: 16.666667%;
}
.pull-md-3 {
right: 25%;
}
.pull-md-4 {
right: 33.333333%;
}
.pull-md-5 {
right: 41.666667%;
}
.pull-md-6 {
right: 50%;
}
.pull-md-7 {
right: 58.333333%;
}
.pull-md-8 {
right: 66.666667%;
}
.pull-md-9 {
right: 75%;
}
.pull-md-10 {
right: 83.333333%;
}
.pull-md-11 {
right: 91.666667%;
}
.pull-md-12 {
right: 100%;
}
.push-md-0 {
left: auto;
}
.push-md-1 {
left: 8.333333%;
}
.push-md-2 {
left: 16.666667%;
}
.push-md-3 {
left: 25%;
}
.push-md-4 {
left: 33.333333%;
}
.push-md-5 {
left: 41.666667%;
}
.push-md-6 {
left: 50%;
}
.push-md-7 {
left: 58.333333%;
}
.push-md-8 {
left: 66.666667%;
}
.push-md-9 {
left: 75%;
}
.push-md-10 {
left: 83.333333%;
}
.push-md-11 {
left: 91.666667%;
}
.push-md-12 {
left: 100%;
}
.offset-md-0 {
margin-left: 0%;
}
.offset-md-1 {
margin-left: 8.333333%;
}
.offset-md-2 {
margin-left: 16.666667%;
}
.offset-md-3 {
margin-left: 25%;
}
.offset-md-4 {
margin-left: 33.333333%;
}
.offset-md-5 {
margin-left: 41.666667%;
}
.offset-md-6 {
margin-left: 50%;
}
.offset-md-7 {
margin-left: 58.333333%;
}
.offset-md-8 {
margin-left: 66.666667%;
}
.offset-md-9 {
margin-left: 75%;
}
.offset-md-10 {
margin-left: 83.333333%;
}
.offset-md-11 {
margin-left: 91.666667%;
}
}
@media (min-width: 992px) {
.col-lg-1 {
float: left;
width: 8.333333%;
}
.col-lg-2 {
float: left;
width: 16.666667%;
}
.col-lg-3 {
float: left;
width: 25%;
}
.col-lg-4 {
float: left;
width: 33.333333%;
}
.col-lg-5 {
float: left;
width: 41.666667%;
}
.col-lg-6 {
float: left;
width: 50%;
}
.col-lg-7 {
float: left;
width: 58.333333%;
}
.col-lg-8 {
float: left;
width: 66.666667%;
}
.col-lg-9 {
float: left;
width: 75%;
}
.col-lg-10 {
float: left;
width: 83.333333%;
}
.col-lg-11 {
float: left;
width: 91.666667%;
}
.col-lg-12 {
float: left;
width: 100%;
}
.pull-lg-0 {
right: auto;
}
.pull-lg-1 {
right: 8.333333%;
}
.pull-lg-2 {
right: 16.666667%;
}
.pull-lg-3 {
right: 25%;
}
.pull-lg-4 {
right: 33.333333%;
}
.pull-lg-5 {
right: 41.666667%;
}
.pull-lg-6 {
right: 50%;
}
.pull-lg-7 {
right: 58.333333%;
}
.pull-lg-8 {
right: 66.666667%;
}
.pull-lg-9 {
right: 75%;
}
.pull-lg-10 {
right: 83.333333%;
}
.pull-lg-11 {
right: 91.666667%;
}
.pull-lg-12 {
right: 100%;
}
.push-lg-0 {
left: auto;
}
.push-lg-1 {
left: 8.333333%;
}
.push-lg-2 {
left: 16.666667%;
}
.push-lg-3 {
left: 25%;
}
.push-lg-4 {
left: 33.333333%;
}
.push-lg-5 {
left: 41.666667%;
}
.push-lg-6 {
left: 50%;
}
.push-lg-7 {
left: 58.333333%;
}
.push-lg-8 {
left: 66.666667%;
}
.push-lg-9 {
left: 75%;
}
.push-lg-10 {
left: 83.333333%;
}
.push-lg-11 {
left: 91.666667%;
}
.push-lg-12 {
left: 100%;
}
.offset-lg-0 {
margin-left: 0%;
}
.offset-lg-1 {
margin-left: 8.333333%;
}
.offset-lg-2 {
margin-left: 16.666667%;
}
.offset-lg-3 {
margin-left: 25%;
}
.offset-lg-4 {
margin-left: 33.333333%;
}
.offset-lg-5 {
margin-left: 41.666667%;
}
.offset-lg-6 {
margin-left: 50%;
}
.offset-lg-7 {
margin-left: 58.333333%;
}
.offset-lg-8 {
margin-left: 66.666667%;
}
.offset-lg-9 {
margin-left: 75%;
}
.offset-lg-10 {
margin-left: 83.333333%;
}
.offset-lg-11 {
margin-left: 91.666667%;
}
}
@media (min-width: 1200px) {
.col-xl-1 {
float: left;
width: 8.333333%;
}
.col-xl-2 {
float: left;
width: 16.666667%;
}
.col-xl-3 {
float: left;
width: 25%;
}
.col-xl-4 {
float: left;
width: 33.333333%;
}
.col-xl-5 {
float: left;
width: 41.666667%;
}
.col-xl-6 {
float: left;
width: 50%;
}
.col-xl-7 {
float: left;
width: 58.333333%;
}
.col-xl-8 {
float: left;
width: 66.666667%;
}
.col-xl-9 {
float: left;
width: 75%;
}
.col-xl-10 {
float: left;
width: 83.333333%;
}
.col-xl-11 {
float: left;
width: 91.666667%;
}
.col-xl-12 {
float: left;
width: 100%;
}
.pull-xl-0 {
right: auto;
}
.pull-xl-1 {
right: 8.333333%;
}
.pull-xl-2 {
right: 16.666667%;
}
.pull-xl-3 {
right: 25%;
}
.pull-xl-4 {
right: 33.333333%;
}
.pull-xl-5 {
right: 41.666667%;
}
.pull-xl-6 {
right: 50%;
}
.pull-xl-7 {
right: 58.333333%;
}
.pull-xl-8 {
right: 66.666667%;
}
.pull-xl-9 {
right: 75%;
}
.pull-xl-10 {
right: 83.333333%;
}
.pull-xl-11 {
right: 91.666667%;
}
.pull-xl-12 {
right: 100%;
}
.push-xl-0 {
left: auto;
}
.push-xl-1 {
left: 8.333333%;
}
.push-xl-2 {
left: 16.666667%;
}
.push-xl-3 {
left: 25%;
}
.push-xl-4 {
left: 33.333333%;
}
.push-xl-5 {
left: 41.666667%;
}
.push-xl-6 {
left: 50%;
}
.push-xl-7 {
left: 58.333333%;
}
.push-xl-8 {
left: 66.666667%;
}
.push-xl-9 {
left: 75%;
}
.push-xl-10 {
left: 83.333333%;
}
.push-xl-11 {
left: 91.666667%;
}
.push-xl-12 {
left: 100%;
}
.offset-xl-0 {
margin-left: 0%;
}
.offset-xl-1 {
margin-left: 8.333333%;
}
.offset-xl-2 {
margin-left: 16.666667%;
}
.offset-xl-3 {
margin-left: 25%;
}
.offset-xl-4 {
margin-left: 33.333333%;
}
.offset-xl-5 {
margin-left: 41.666667%;
}
.offset-xl-6 {
margin-left: 50%;
}
.offset-xl-7 {
margin-left: 58.333333%;
}
.offset-xl-8 {
margin-left: 66.666667%;
}
.offset-xl-9 {
margin-left: 75%;
}
.offset-xl-10 {
margin-left: 83.333333%;
}
.offset-xl-11 {
margin-left: 91.666667%;
}
}
/*# sourceMappingURL=bootstrap-grid.css.map */

1
docs/dist/css/bootstrap-grid.css.map vendored Normal file

File diff suppressed because one or more lines are too long

2
docs/dist/css/bootstrap-grid.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

455
docs/dist/css/bootstrap-reboot.css vendored Normal file
View File

@ -0,0 +1,455 @@
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
progress {
vertical-align: baseline;
}
template,
[hidden] {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline-width: 0;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: inherit;
}
b,
strong {
font-weight: bolder;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background-color: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
figure {
margin: 1em 40px;
}
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible;
}
button,
input,
select,
textarea {
font: inherit;
}
optgroup {
font-weight: bold;
}
button,
input,
select {
overflow: visible;
}
button,
input,
select,
textarea {
margin: 0;
}
button,
select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
}
[disabled] {
cursor: default;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
button:-moz-focusring,
input:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
@-ms-viewport {
width: device-width;
}
html {
font-size: 16px;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373a3c;
background-color: #fff;
}
[tabindex="-1"]:focus {
outline: none !important;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #818a91;
}
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: .5rem;
margin-left: 0;
}
blockquote {
margin: 0 0 1rem;
}
a {
color: #0275d8;
text-decoration: none;
}
a:focus, a:hover {
color: #014c8c;
text-decoration: underline;
}
a:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
color: inherit;
text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
outline: none;
}
pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
}
figure {
margin: 0 0 1rem;
}
img {
vertical-align: middle;
}
[role="button"] {
cursor: pointer;
}
a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
table {
border-collapse: collapse;
background-color: transparent;
}
caption {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #818a91;
text-align: left;
caption-side: bottom;
}
th {
text-align: left;
}
label {
display: inline-block;
margin-bottom: .5rem;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
textarea {
margin: 0;
line-height: inherit;
border-radius: 0;
}
input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
cursor: not-allowed;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}
textarea {
resize: vertical;
}
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
}
input[type="search"] {
-webkit-appearance: none;
}
output {
display: inline-block;
}
[hidden] {
display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,2 @@
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit}optgroup{font-weight:700}button,input,select{overflow:visible}button,input,select,textarea{margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}@-ms-viewport{width:device-width}html{font-size:16px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;line-height:1.5;color:#373a3c;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #818a91}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}a{color:#0275d8;text-decoration:none}a:focus,a:hover{color:#014c8c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle}[role=button]{cursor:pointer}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse;background-color:transparent}caption{padding-top:.75rem;padding-bottom:.75rem;color:#818a91;text-align:left;caption-side:bottom}th{text-align:left}label{display:inline-block;margin-bottom:.5rem}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,select,textarea{margin:0;line-height:inherit;border-radius:0}input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit}input[type=search]{-webkit-appearance:none}output{display:inline-block}[hidden]{display:none!important}
/*# sourceMappingURL=bootstrap-reboot.min.css.map */

View File

@ -0,0 +1 @@
{"version":3,"sources":["../../scss/_normalize.scss","bootstrap-reboot.css","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_tab-focus.scss"],"names":[],"mappings":"4EAOA,KACE,YAAA,WACA,qBAAA,KACA,yBAAA,KAOF,KACE,OAAA,EAYF,QAAA,MAAA,QAAA,WAAA,OAAA,OAAA,OAAA,KAAA,KAAA,IAAA,QAAA,QAYE,QAAA,MAOF,MAAA,OAAA,SAAA,MAIE,QAAA,aAOF,sBACE,QAAA,KACA,OAAA,EAOF,SACE,eAAA,SAQF,SAAA,SAEE,QAAA,KAUF,EACE,iBAAA,YAQF,SAAA,QAEE,cAAA,EAWF,YACE,cAAA,KACA,gBAAA,UACA,gBAAA,UAAA,OAOF,EAAA,OAEE,YAAA,QAOF,EAAA,OAEE,YAAA,OAOF,IACE,WAAA,OAQF,GACE,UAAA,IACA,OAAA,MAAA,EAOF,KACE,iBAAA,KACA,MAAA,KAOF,MACE,UAAA,IAQF,IAAA,IAEE,UAAA,IACA,YAAA,EACA,SAAA,SACA,eAAA,SAGF,IACE,OAAA,OAGF,IACE,IAAA,MAUF,IACE,aAAA,KAOF,eACE,SAAA,OAWF,KAAA,IAAA,IAAA,KAIE,YAAA,UAAA,UACA,UAAA,IAOF,OACE,OAAA,IAAA,KAQF,GACE,mBAAA,YAAA,WAAA,YACA,OAAA,EACA,SAAA,QAUF,OAAA,MAAA,OAAA,SAIE,KAAA,QAOF,SACE,YAAA,IASF,OAAA,MAAA,OAGE,SAAA,QAQF,OAAA,MAAA,OAAA,SAIE,OAAA,EAQF,OAAA,OAEE,eAAA,KAOF,cAAA,aAAA,cAAA,OAIE,OAAA,QC9IF,WDsJE,OAAA,QASF,aAAA,cAAA,OAAA,mBAIE,mBAAA,OAOF,yBAAA,wBAEE,OAAA,EACA,QAAA,EAOF,sBAAA,qBAEE,QAAA,IAAA,OAAA,WAOF,SACE,OAAA,IAAA,MAAA,OACA,OAAA,EAAA,IACA,QAAA,MAAA,OAAA,MAUF,OACE,mBAAA,WAAA,WAAA,WACA,MAAA,QACA,QAAA,MACA,UAAA,KACA,QAAA,EACA,YAAA,OAOF,SACE,SAAA,KC/KF,gBAAA,aDyLE,mBAAA,WAAA,WAAA,WACA,QAAA,ECpLF,yCAAA,yCD6LE,OAAA,KCxLF,cDgME,mBAAA,UC5LF,4CAAA,yCDsME,mBAAA,KEjZF,KACE,mBAAA,WAAA,WAAA,WAGF,EAAA,QAAA,SAGE,mBAAA,QAAA,WAAA,QAoBA,cAAgB,MAAA,aAQlB,KAEE,UAAA,KAOA,mBAAA,UAEA,4BAAA,YAGF,KAEE,YAAA,cAAA,mBAAA,WAAA,OCwFiH,iBDxFjH,MAAA,WACA,UAAA,KACA,YAAA,IAEA,MAAA,QAEA,iBAAA,KDmLF,sBC1KE,QAAA,YAYF,GAAI,GAAI,GAAI,GAAI,GAAI,GAClB,WAAA,EACA,cAAA,MAOF,EACE,WAAA,EACA,cAAA,KAIF,0BAAA,YAGE,OAAA,KACA,cAAA,IAAA,OAAA,QAGF,QACE,cAAA,KACA,WAAA,OACA,YAAA,QAGF,GAAA,GAAA,GAGE,WAAA,EACA,cAAA,KAGF,MAAA,MAAA,MAAA,MAIE,cAAA,EAGF,GACE,YAAA,IAGF,GACE,cAAA,MACA,YAAA,EAGF,WACE,OAAA,EAAA,EAAA,KAQF,EACE,MAAA,QACA,gBAAA,KAFF,QAAS,QAKL,MAAA,QACA,gBAAA,UANJ,QEzJE,QAAA,IAAA,KAAA,yBACA,eAAA,KF4KF,8BACE,MAAA,QACA,gBAAA,KAFF,oCAAqC,oCAKjC,MAAA,QACA,gBAAA,KANJ,oCAUI,QAAA,EASJ,IAEE,WAAA,EAEA,cAAA,KAEA,SAAA,KAQF,OAGE,OAAA,EAAA,EAAA,KAQF,IAGE,eAAA,OD+HF,cClHE,OAAA,QAcF,cAAA,EAAA,KAAA,OAAA,MAAA,MAAA,OAAA,QAAA,SASE,iBAAA,aAAA,aAAA,aAQF,MAEE,gBAAA,SAEA,iBAAA,YAGF,QACE,YAAA,OACA,eAAA,OACA,MAAA,QACA,WAAA,KACA,aAAA,OAGF,GAEE,WAAA,KAQF,MAEE,QAAA,aACA,cAAA,MAOF,aACE,QAAA,IAAA,OACA,QAAA,IAAA,KAAA,yBAGF,OAAA,MAAA,OAAA,SAKE,OAAA,EAIA,YAAA,QAEA,cAAA,EAGF,8BAAA,2BAMI,OAAA,YAKJ,iBAAA,iBAAA,2BAAA,kBASE,mBAAA,QAGF,SAEE,OAAA,SAGF,SAIE,UAAA,EAEA,QAAA,EACA,OAAA,EACA,OAAA,EAGF,OAEE,QAAA,MACA,MAAA,KACA,QAAA,EACA,cAAA,MACA,UAAA,OACA,YAAA,QAGF,mBAKE,mBAAA,KAIF,OACE,QAAA,aD8DF,SCtDE,QAAA"}

View File

@ -1,5 +1,5 @@
/*!
* Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
* Bootstrap v4.0.0-alpha.4 (http://getbootstrap.com)
* Copyright 2011-2016 The Bootstrap Authors
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@ -321,7 +321,7 @@ html {
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373a3c;
@ -2097,14 +2097,8 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
.has-success .form-control-feedback,
.has-success .form-control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label,
.has-success .form-check-label,
.has-success .form-check-inline,
.has-success .custom-control {
color: #5cb85c;
}
@ -2129,14 +2123,8 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
.has-warning .form-control-feedback,
.has-warning .form-control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label,
.has-warning .form-check-label,
.has-warning .form-check-inline,
.has-warning .custom-control {
color: #f0ad4e;
}
@ -2161,14 +2149,8 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
.has-danger .form-control-feedback,
.has-danger .form-control-label,
.has-danger .radio,
.has-danger .checkbox,
.has-danger .radio-inline,
.has-danger .checkbox-inline,
.has-danger.radio label,
.has-danger.checkbox label,
.has-danger.radio-inline label,
.has-danger.checkbox-inline label,
.has-danger .form-check-label,
.has-danger .form-check-inline,
.has-danger .custom-control {
color: #d9534f;
}
@ -3377,7 +3359,7 @@ input[type="button"].btn-block {
.custom-control {
position: relative;
display: inline;
display: inline-block;
padding-left: 1.5rem;
cursor: pointer;
}
@ -3419,7 +3401,7 @@ input[type="button"].btn-block {
.custom-control-indicator {
position: absolute;
top: .0625rem;
top: .25rem;
left: 0;
display: block;
width: 1rem;
@ -3458,13 +3440,8 @@ input[type="button"].btn-block {
}
.custom-controls-stacked .custom-control {
display: inline;
}
.custom-controls-stacked .custom-control::after {
display: block;
margin-bottom: 0.25rem;
content: "";
float: left;
clear: left;
}
.custom-controls-stacked .custom-control + .custom-control {
@ -3800,10 +3777,14 @@ input[type="button"].btn-block {
}
.navbar-toggler {
width: 2.5em;
height: 2em;
padding: .5rem .75rem;
font-size: 1.25rem;
line-height: 1;
background: none;
background: transparent no-repeat center center;
-webkit-background-size: 24px 24px;
background-size: 24px 24px;
border: 1px solid transparent;
border-radius: 0.25rem;
}
@ -3812,24 +3793,6 @@ input[type="button"].btn-block {
text-decoration: none;
}
@media (min-width: 544px) {
.navbar-toggleable-xs {
display: block !important;
}
}
@media (min-width: 768px) {
.navbar-toggleable-sm {
display: block !important;
}
}
@media (min-width: 992px) {
.navbar-toggleable-md {
display: block !important;
}
}
.navbar-nav .nav-item {
float: left;
}
@ -3877,6 +3840,10 @@ input[type="button"].btn-block {
color: rgba(0, 0, 0, 0.8);
}
.navbar-light .navbar-toggler {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.3)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-light .navbar-divider {
background-color: rgba(0, 0, 0, 0.075);
}
@ -3910,10 +3877,71 @@ input[type="button"].btn-block {
color: white;
}
.navbar-dark .navbar-toggler {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-dark .navbar-divider {
background-color: rgba(255, 255, 255, 0.075);
}
.navbar-toggleable-xs::after {
content: "";
display: table;
clear: both;
}
@media (max-width: 543px) {
.navbar-toggleable-xs .navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@media (min-width: 544px) {
.navbar-toggleable-xs {
display: block !important;
}
}
.navbar-toggleable-sm::after {
content: "";
display: table;
clear: both;
}
@media (max-width: 767px) {
.navbar-toggleable-sm .navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@media (min-width: 768px) {
.navbar-toggleable-sm {
display: block !important;
}
}
.navbar-toggleable-md::after {
content: "";
display: table;
clear: both;
}
@media (max-width: 991px) {
.navbar-toggleable-md .navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@media (min-width: 992px) {
.navbar-toggleable-md {
display: block !important;
}
}
.card {
position: relative;
display: block;
@ -3966,6 +3994,7 @@ input[type="button"].btn-block {
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: #f5f5f5;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
@ -3977,7 +4006,7 @@ input[type="button"].btn-block {
}
.card-header:first-child {
border-radius: 0.25rem 0.25rem 0 0;
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.card-footer {
@ -3993,7 +4022,7 @@ input[type="button"].btn-block {
}
.card-footer:last-child {
border-radius: 0 0 0.25rem 0.25rem;
border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}
.card-header-tabs {
@ -4118,7 +4147,7 @@ input[type="button"].btn-block {
}
.card-img {
border-radius: 0.25rem;
border-radius: calc(0.25rem - 1px);
}
.card-img-overlay {
@ -4131,13 +4160,13 @@ input[type="button"].btn-block {
}
.card-img-top {
border-top-right-radius: 0.25rem;
border-top-left-radius: 0.25rem;
border-top-right-radius: calc(0.25rem - 1px);
border-top-left-radius: calc(0.25rem - 1px);
}
.card-img-bottom {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: calc(0.25rem - 1px);
border-bottom-left-radius: calc(0.25rem - 1px);
}
@media (min-width: 544px) {
@ -4447,7 +4476,7 @@ a.tag:focus, a.tag:hover {
}
.alert {
padding: 15px;
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
@ -4462,13 +4491,13 @@ a.tag:focus, a.tag:hover {
}
.alert-dismissible {
padding-right: 35px;
padding-right: 2rem;
}
.alert-dismissible .close {
position: relative;
top: -2px;
right: -21px;
top: -.125rem;
right: -1rem;
color: inherit;
}
@ -4744,14 +4773,6 @@ base::-moz-progress-bar,
}
}
.media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
.media,
.media-body {
overflow: hidden;
@ -5100,7 +5121,7 @@ button.close {
.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform .3s ease-out;
transition: -webkit-transform .3s ease-out;
-o-transition: transform .3s ease-out, -o-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
transition: transform .3s ease-out, -webkit-transform .3s ease-out, -o-transform .3s ease-out;
-webkit-transform: translate(0, -25%);
@ -5220,7 +5241,7 @@ button.close {
position: absolute;
z-index: 1070;
display: block;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
@ -5320,7 +5341,7 @@ button.close {
display: block;
max-width: 276px;
padding: 1px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
@ -5485,7 +5506,7 @@ button.close {
.carousel-inner > .carousel-item {
-webkit-transition: -webkit-transform .6s ease-in-out;
transition: -webkit-transform .6s ease-in-out;
-o-transition: transform .6s ease-in-out, -o-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out, -o-transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
@ -5691,10 +5712,6 @@ button.close {
}
}
.bg-inverse {
background-color: #373a3c;
}
.bg-faded {
background-color: #f7f7f9;
}
@ -5744,6 +5761,15 @@ a.bg-danger:focus, a.bg-danger:hover {
background-color: #c9302c !important;
}
.bg-inverse {
color: #fff !important;
background-color: #373a3c !important;
}
a.bg-inverse:focus, a.bg-inverse:hover {
background-color: #1f2021 !important;
}
.clearfix::after {
content: "";
display: table;
@ -6202,7 +6228,7 @@ a.bg-danger:focus, a.bg-danger:hover {
}
a.text-muted:focus, a.text-muted:hover {
color: #687077;
color: #687077 !important;
}
.text-primary {
@ -6210,7 +6236,7 @@ a.text-muted:focus, a.text-muted:hover {
}
a.text-primary:focus, a.text-primary:hover {
color: #025aa5;
color: #025aa5 !important;
}
.text-success {
@ -6218,7 +6244,7 @@ a.text-primary:focus, a.text-primary:hover {
}
a.text-success:focus, a.text-success:hover {
color: #449d44;
color: #449d44 !important;
}
.text-info {
@ -6226,7 +6252,7 @@ a.text-success:focus, a.text-success:hover {
}
a.text-info:focus, a.text-info:hover {
color: #31b0d5;
color: #31b0d5 !important;
}
.text-warning {
@ -6234,7 +6260,7 @@ a.text-info:focus, a.text-info:hover {
}
a.text-warning:focus, a.text-warning:hover {
color: #ec971f;
color: #ec971f !important;
}
.text-danger {
@ -6242,7 +6268,15 @@ a.text-warning:focus, a.text-warning:hover {
}
a.text-danger:focus, a.text-danger:hover {
color: #c9302c;
color: #c9302c !important;
}
.text-gray-dark {
color: #373a3c !important;
}
a.text-gray-dark:focus, a.text-gray-dark:hover {
color: #1f2021 !important;
}
.text-hide {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,5 @@
/*!
* Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
* Bootstrap v4.0.0-alpha.4 (http://getbootstrap.com)
* Copyright 2011-2016 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@ -20,7 +20,7 @@ if (typeof jQuery === 'undefined') {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): util.js
* Bootstrap (v4.0.0-alpha.4): util.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -190,7 +190,7 @@ var Util = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): alert.js
* Bootstrap (v4.0.0-alpha.4): alert.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -204,7 +204,7 @@ var Alert = (function ($) {
*/
var NAME = 'alert';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.alert';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -376,7 +376,7 @@ var Alert = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): button.js
* Bootstrap (v4.0.0-alpha.4): button.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -390,7 +390,7 @@ var Button = (function ($) {
*/
var NAME = 'button';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.button';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -544,7 +544,7 @@ var Button = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): carousel.js
* Bootstrap (v4.0.0-alpha.4): carousel.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -558,7 +558,7 @@ var Carousel = (function ($) {
*/
var NAME = 'carousel';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.carousel';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -1020,7 +1020,7 @@ var Carousel = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): collapse.js
* Bootstrap (v4.0.0-alpha.4): collapse.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -1034,7 +1034,7 @@ var Collapse = (function ($) {
*/
var NAME = 'collapse';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.collapse';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -1378,7 +1378,7 @@ var Collapse = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): dropdown.js
* Bootstrap (v4.0.0-alpha.4): dropdown.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -1392,7 +1392,7 @@ var Dropdown = (function ($) {
*/
var NAME = 'dropdown';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.dropdown';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -1669,7 +1669,7 @@ var Dropdown = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): modal.js
* Bootstrap (v4.0.0-alpha.4): modal.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -1683,7 +1683,7 @@ var Modal = (function ($) {
*/
var NAME = 'modal';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.modal';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -2196,7 +2196,7 @@ var Modal = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): scrollspy.js
* Bootstrap (v4.0.0-alpha.4): scrollspy.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -2210,7 +2210,7 @@ var ScrollSpy = (function ($) {
*/
var NAME = 'scrollspy';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.scrollspy';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -2511,7 +2511,7 @@ var ScrollSpy = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): tab.js
* Bootstrap (v4.0.0-alpha.4): tab.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -2525,7 +2525,7 @@ var Tab = (function ($) {
*/
var NAME = 'tab';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.tab';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
@ -2770,7 +2770,7 @@ var Tab = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): tooltip.js
* Bootstrap (v4.0.0-alpha.4): tooltip.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -2792,7 +2792,7 @@ var Tooltip = (function ($) {
*/
var NAME = 'tooltip';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.tooltip';
var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME];
@ -3381,7 +3381,7 @@ var Tooltip = (function ($) {
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): popover.js
* Bootstrap (v4.0.0-alpha.4): popover.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -3395,7 +3395,7 @@ var Popover = (function ($) {
*/
var NAME = 'popover';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.popover';
var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME];

File diff suppressed because one or more lines are too long

View File

@ -37,9 +37,7 @@
</div>
<div class="navbar navbar-static-top navbar-dark bg-inverse">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
&#9776;
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
<a href="#" class="navbar-brand">Album</a>
</div>
</div>

View File

@ -21,12 +21,7 @@
<body>
<nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Project name</a>
<div id="navbar">
<nav class="nav navbar-nav pull-xs-left">

View File

@ -157,11 +157,11 @@
<p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

View File

@ -27,9 +27,7 @@
</div>
</div>
<div class="navbar navbar-light bg-faded navbar-static-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
&#9776;
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
</div>
</div>

View File

@ -26,9 +26,7 @@
</div>
</div>
<div class="navbar navbar-light bg-faded navbar-static-top m-b-1">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
&#9776;
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
</div>
<div class="container">

View File

@ -22,9 +22,7 @@
<div class="container">
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
&#9776;
</button>
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">

View File

@ -30,9 +30,7 @@
</div>
<nav class="navbar navbar-light navbar-static-top bg-faded">
<div class="container">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
&#9776;
</button>
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-expanded="false" aria-controls="exCollapsingNavbar2" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Sticky footer</a>
<ul class="nav navbar-nav">

View File

@ -6,27 +6,10 @@ group: getting-started
**Bootstrap v{{ site.current_version}}** is available for download in several ways, including some of your favorite package managers. Choose from the options below to snag just what you need.
<div class="row m-t-2">
<div class="col-sm-6">
{% markdown %}
### Compiled
Download just the compiled and minified CSS and JavaScript. Doesn't include any documentation or original source files.
{% comment %}
<a href="{{ site.download.dist }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
{% endcomment %}
<span class="text-muted">Coming soon!</span>
{% endmarkdown %}
</div>
<div class="col-sm-6">
{% markdown %}
### Source files
Download everything: 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 }}/getting-started/build-tools/#tooling-setup).**
<a href="{{ site.download.source }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
{% endmarkdown %}
</div>
</div>
## Package managers
@ -100,6 +83,7 @@ PM> Install-Package bootstrap.sass -Pre
The `-Pre` is required until Bootstrap v4 has a stable release.
{% comment %}
## Custom builds
Need only a part of Bootstrap's CSS or JS? Use one of the custom builds to snag just what you need.
@ -121,4 +105,4 @@ Need only a part of Bootstrap's CSS or JS? Use one of the custom builds to snag
<a class="btn btn-bs btn-outline" href="#">Download</a>
</div>
</div>
{% endcomment %}

View File

@ -37,4 +37,4 @@ You can find and customize these variables for key global options in our `_varia
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
| `$enable-hover-media-query` | `true` or `false` (default) | ... |
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.col-md-1` etc.). |
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |

View File

@ -35,7 +35,6 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
{% endhighlight %}
<p class="text-muted">Not yet available, but hopefully soon!</p>
</div>
</div>

View File

@ -9,7 +9,7 @@ Fancy a more modern grid system? [Enable flexbox support in Bootstrap](/getting-
Bootstrap's flexbox grid includes support for every feature from our [default grid system](/layout/grid), and then some. Please read the [default grid system docs](/layout/grid) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it.
{% callout warning %}
**Heads up!** The flexbox grid documentation is only functional when flexbox support is explicitly enabled.
**Heads up!** This flexbox grid documentation is powered by an additional CSS file that overrides our default grid system's CSS. This is only available in our hosted docs and is disabled in development.
{% endcallout %}
## Contents
@ -59,7 +59,7 @@ When flexbox support is enabled, you can utilize breakpoint-specific column clas
{% endexample %}
</div>
Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths.
Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
<div class="bd-example-row">
{% example html %}
@ -75,6 +75,17 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
3 of 3
</div>
</div>
<div class="row">
<div class="col-xs">
1 of 3
</div>
<div class="col-xs-5">
2 of 3 (wider)
</div>
<div class="col-xs">
3 of 3
</div>
</div>
</div>
{% endexample %}
</div>
@ -210,3 +221,25 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
</div>
{% endexample %}
</div>
## Reordering
Flexbox utilities for controlling the **visual order** of your content.
<div class="bd-example-row">
{% example html %}
<div class="container">
<div class="row">
<div class="col-xs flex-xs-unordered">
First, but unordered
</div>
<div class="col-xs flex-xs-last">
Second, but last
</div>
<div class="col-xs flex-xs-first">
Third, but first
</div>
</div>
</div>
{% endexample %}
</div>

View File

@ -139,7 +139,7 @@ Variables and maps determine the number of columns, the gutter width, and the me
{% highlight scss %}
$grid-columns: 12;
$grid-gutter-width: 15px;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
@ -180,7 +180,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
}
// Make the element grid-ready (applying everything but the width)
@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
@mixin make-col-ready($gutter: $grid-gutter-width) {
position: relative;
min-height: 1px; // Prevent collapsing
padding-right: ($gutter / 2);
@ -194,7 +194,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
}
}
@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
@mixin make-col($size, $columns: $grid-columns) {
@if $enable-flex {
flex: 0 0 percentage($size / $columns);
// Add a `max-width` to ensure content within each column does not blow out
@ -208,14 +208,16 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
}
// Get fancy by offsetting, or changing the sort order
@mixin make-col-offset($columns) {
margin-left: percentage(($columns / $grid-columns));
@mixin make-col-offset($size, $columns: $grid-columns) {
margin-left: percentage($size / $columns);
}
@mixin make-col-push($columns) {
left: percentage(($columns / $grid-columns));
@mixin make-col-push($size, $columns: $grid-columns) {
left: if($size > 0, percentage($size / $columns), auto);
}
@mixin make-col-pull($columns) {
right: percentage(($columns / $grid-columns));
@mixin make-col-pull($size, $columns: $grid-columns) {
right: if($size > 0, percentage($size / $columns), auto);
}
{% endhighlight %}
@ -270,36 +272,36 @@ In addition to our semantic mixins, Bootstrap includes an extensive set of prebu
### Example: Stacked-to-horizontal
Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns with the `.col` base class and a modifier within any `.row`.
Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any `.row`.
<div class="bd-example-row">
{% example html %}
<div class="row">
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">md-8</div>
<div class="col-md-4">md-4</div>
<div class="col-md-8">col-md-8</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">md-4</div>
<div class="col-md-4">md-4</div>
<div class="col-md-4">md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">md-6</div>
<div class="col-md-6">md-6</div>
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
{% endexample %}
</div>
@ -459,7 +461,18 @@ Easily change the order of our built-in grid columns with `.push-md-*` and `.pul
Using our built-in grid Sass variables and maps, it's possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.
For example, if you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this:
### Columns and gutters
The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` is divided evenly across `padding-left` and `padding-right` for the column gutters.
{% highlight scss %}
$grid-columns: 12;
$grid-gutter-width: 30px;
{% endhighlight %}
### Grid tiers
Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this:
{% highlight scss %}
$grid-breakpoints: (
@ -475,4 +488,4 @@ $container-max-widths: (
);
{% endhighlight %}
Save your changes and recompile to have a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints.
When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints.

View File

@ -45,7 +45,7 @@ Media components can also be nested.
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
<div class="media m-t-2">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
@ -123,7 +123,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
<h4 class="media-heading">Media heading</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
<!-- Nested media object -->
<div class="media">
<div class="media m-t-2">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
@ -131,7 +131,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<!-- Nested media object -->
<div class="media">
<div class="media m-t-2">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
@ -145,7 +145,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
</div>
</div>
<!-- Nested media object -->
<div class="media">
<div class="media m-t-2">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
@ -158,7 +158,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
</div>
</div>
</li>
<li class="media">
<li class="media m-t-2">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

View File

@ -59,7 +59,7 @@ This list highlights key changes by component between v3.x.x and v4.0.0.
### Reboot
New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the `box-sizing: border-box` change, moving from `rem` to `em` units on many elements, link styles, and many form element resets.
New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the `box-sizing: border-box` change, moving from `em` to `rem` units on many elements, link styles, and many form element resets.
### Typography
@ -80,7 +80,8 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
- Renamed `.table-condensed` to `.table-sm` for consistency.
- Added a new `.table-inverse` option.
- Added a new `.table-reflow` option.
- Added table header modifiers: `.thead-default` and `.thead-inverse`
- Added table header modifiers: `.thead-default` and `.thead-inverse`.
- Renamed contextual classes to have a `.table-`-prefix. Hence `.active`, `.success`, `.warning`, `.danger` and `.table-info` to `.table-active`, `.table-success`, `.table-warning`, `.table-danger` and `.table-info`.
### Forms
@ -111,6 +112,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
- Simplified dropdown styles to no longer ship with upward or downward facing arrows attached to the dropdown menu.
- Dropdowns can be built with `<div>`s or `<ul>`s now.
- Rebuilt dropdown styles and markup to provide easy, built-in support for `<a>` and `<button>` based dropdown items.
- Renamed `.divider` to `.dropdown-divider`.
- Dropdown items now require `.dropdown-item`.
- Dropdown toggles no longer require an explicit `<span class="caret"></span>`; this is now provided automatically via CSS's `::after` on `.dropdown-toggle`.
@ -161,6 +163,7 @@ Dropped entirely for the new card component.
- `.panel` to `.card`
- `.panel-default` removed and no replacement
- `.panel-group` removed and no replacement. `.card-group` is not a replacement, it is different.
- `.panel-heading` to `.card-header`
- `.panel-title` to `.card-header`. Depending on the desired look, you may also want to use [heading elements or classes]({{ site.baseurl }}/content/typography/#headings) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`]({{ site.baseurl }}/components/utilities/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
- `.panel-body` to `.card-block`
@ -171,6 +174,10 @@ Dropped entirely for the new card component.
- `.panel-warning` to `.card-warning` and `.card-inverse` (or use `.bg-warning` on `.card-header`)
- `.panel-danger` to `.card-danger` and `.card-inverse` (or use `.bg-danger` on `.card-header`)
### Tooltips
- Removed support for `auto` placement options.
### Carousel
- Renamed `.item` to `.carousel-item`.

View File

@ -0,0 +1,39 @@
---
layout: docs
title: Clearfix
group: utilities
---
Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin.
{% highlight html %}
<div class="clearfix">...</div>
{% endhighlight %}
{% highlight scss %}
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
@include clearfix;
}
{% endhighlight %}
The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
{% example html %}
<div class="bg-info clearfix">
<button class="btn btn-secondary pull-xs-left">Example Button pulled left</button>
<button class="btn btn-secondary pull-xs-right">Example Button pullred right</button>
</div>
{% endexample %}

View File

@ -0,0 +1,13 @@
---
layout: docs
title: Close icon
group: utilities
---
Use a generic close icon for dismissing content like modals and alerts. **Be sure to include text for screen readers**, as we've done with `aria-label`.
{% example html %}
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{% endexample %}

47
docs/utilities/colors.md Normal file
View File

@ -0,0 +1,47 @@
---
layout: docs
title: Colors
group: utilities
---
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
{% example html %}
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
{% endexample %}
Contextual text classes also work well on anchors with the provided hover and focus states.
{% example html %}
<a href="#" class="text-muted">Muted link</a>
<a href="#" class="text-primary">Primary link</a>
<a href="#" class="text-success">Success link</a>
<a href="#" class="text-info">Info link</a>
<a href="#" class="text-warning">Warning link</a>
<a href="#" class="text-danger">Danger link</a>
{% endexample %}
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
{% example html %}
<div class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
<div class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
<div class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
<div class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</div>
<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
<div class="bg-inverse">Cras mattis consectetur purus sit amet fermentum.</div>
{% endexample %}
{% callout info %}
#### Dealing with specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class.
{% endcallout %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}

View File

@ -0,0 +1,29 @@
---
layout: docs
title: Display property
group: utilities
---
Use `.d-block`, `.d-inline`, or `.d-inline-block` to simply set an element's [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) to `block`, `inline`, or `inline-block` (respectively).
To make an element `display: none`, use our [responsive utilities](../../layout/responsive-utilities/) instead.
{% example html %}
<div class="d-inline bg-success">Inline</div>
<div class="d-inline bg-success">Inline</div>
{% endexample %}
{% example html %}
<span class="d-block bg-primary">Block</span>
{% endexample %}
{% example html %}
<div class="d-inline-block bg-warning">
<h3>inline-block</h3>
Boot that strap!
</div>
<div class="d-inline-block bg-warning">
<h3>inline-block</h3>
Strap that boot!
</div>
{% endexample %}

View File

@ -0,0 +1,18 @@
---
layout: docs
title: Image replacement
group: utilities
---
Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image.
{% highlight html %}
<h1 class="text-hide">Custom heading</h1>
{% endhighlight %}
{% highlight scss %}
// Usage as a mixin
.heading {
@include text-hide;
}
{% endhighlight %}

View File

@ -0,0 +1,23 @@
---
layout: docs
title: Invisible content
group: utilities
---
The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
{% highlight html %}
<div class="invisible">...</div>
{% endhighlight %}
{% highlight scss %}
// Class
.invisible {
visibility: hidden;
}
// Usage as a mixin
.element {
@include invisible;
}
{% endhighlight %}

View File

@ -0,0 +1,70 @@
---
layout: docs
title: Responsive helpers
group: utilities
---
## Responsive embeds
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.
**Pro-Tip!** You don't need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
{% example html %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
{% endexample %}
Aspect ratios can be customized with modifier classes.
{% highlight html %}
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
{% endhighlight %}
## Responsive floats
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.
Two similar non-responsive Sass mixins (`pull-left` and `pull-right`) are also available.
{% example html %}
<div class="pull-xs-left">Float left on all viewport sizes</div><br>
<div class="pull-xs-right">Float right on all viewport sizes</div><br>
<div class="pull-xs-none">Don't float on all viewport sizes</div><br>
<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
{% endexample %}
{% highlight scss %}
// Related simple non-responsive mixins
.element {
@include pull-left;
}
.another-element {
@include pull-right;
}
{% endhighlight %}

View File

@ -0,0 +1,23 @@
---
layout: docs
title: Screenreaders
group: utilities
---
Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
{% comment %}
Necessary for following [accessibility best practices](../getting-started/#accessibility).
{% endcomment %}
{% highlight html %}
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
{% endhighlight %}
{% highlight scss %}
// Usage as a mixin
.skip-navigation {
@include sr-only;
@include sr-only-focusable;
}
{% endhighlight %}

View File

@ -0,0 +1,28 @@
---
layout: docs
title: Sizing and positioning
group: utilities
---
## Fixed positioning
The `.pos-f-t` class can be used to easily position elements at the top of the viewport and make them as wide as the viewport. **Be sure you understand the ramifications of fixed-position elements within your project.** Here's how the class is defined:
{% highlight scss %}
.pos-f-t {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $zindex-navbar-fixed;
}
{% endhighlight %}
## Full width
Easily make an element as wide as its parent using the `.w-100` utility class, which sets `width: 100%`.
{% example html %}
<img class="w-100" data-src="holder.js/200px100?outline=yes&text=Width%20%3D%20100%25" alt="Width = 100%">
{% endexample %}

69
docs/utilities/spacing.md Normal file
View File

@ -0,0 +1,69 @@
---
layout: docs
title: Spacing
group: utilities
---
Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.
The classes are named using the format: `{property}-{sides}-{size}`
Where *property* is one of:
* `m` - for classes that set `margin`
* `p` - for classes that set `padding`
Where *sides* is one of:
* `t` - for classes that set `margin-top` or `padding-top`
* `b` - for classes that set `margin-bottom` or `padding-bottom`
* `l` - for classes that set `margin-left` or `padding-left`
* `r` - for classes that set `margin-right` or `padding-right`
* `x` - for classes that set both `*-left` and `*-right`
* `y` - for classes that set both `*-top` and `*-bottom`
* `a` - for classes that set a `margin` or `padding` on all 4 sides of the element
Where *size* is one of:
* `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y`
* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3`
(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
Here are some representative examples of these classes:
{% highlight scss %}
.m-t-0 {
margin-top: 0 !important;
}
.m-l-1 {
margin-left: $spacer-x !important;
}
.p-x-2 {
padding-left: ($spacer-x * 1.5) !important;
padding-right: ($spacer-x * 1.5) !important;
}
.p-a-3 {
padding: ($spacer-y * 3) ($spacer-x * 3) !important;
}
{% endhighlight %}
### Horizontal centering
Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
<div class="bd-example">
<div class="m-x-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
Centered element
</div>
</div>
{% highlight html %}
<div class="m-x-auto" style="width: 200px;">
Centered element
</div>
{% endhighlight %}

View File

@ -0,0 +1,58 @@
---
layout: docs
title: Typography
group: utilities
---
The following utilities can be used to add additional styles to texts.
## Text alignment
Easily realign text to components with text alignment classes.
{% example html %}
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
{% endexample %}
{% example html %}
<div class="card">
<div class="card-block text-nowrap">
Curabitur blandit tempus ardua ridiculus sed magna.
</div>
</div>
{% endexample %}
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
{% example html %}
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
{% endexample %}
## Text transform
Transform text in components with text capitalization classes.
{% example html %}
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
{% endexample %}
Note how `text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected.
## Font weight and italics
Quickly change the weight (boldness) of text or italicize text.
{% example html %}
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-italic">Italic text.</p>
{% endexample %}

View File

@ -25,7 +25,8 @@ module.exports = function configureLibsass(grunt) {
},
docs: {
files: {
'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss'
'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss',
'docs/assets/css/docs-flexbox.min.css': 'docs/assets/scss/flex-grid.scss'
}
}
}

View File

@ -29,7 +29,8 @@ module.exports = function configureRubySass(grunt) {
docs: {
options: options,
files: {
'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss'
'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss',
'docs/assets/css/docs-flexbox.min.css': 'docs/assets/scss/flex-grid.scss'
}
}
}

View File

@ -1,6 +1,6 @@
{
"name": "bootstrap",
"version": "4.0.0-alpha.2",
"version": "4.0.0-alpha.4",
"dependencies": {
"abbrev": {
"version": "1.0.9",

4
js/dist/alert.js vendored
View File

@ -6,7 +6,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): alert.js
* Bootstrap (v4.0.0-alpha.4): alert.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -20,7 +20,7 @@ var Alert = (function ($) {
*/
var NAME = 'alert';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.alert';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';

File diff suppressed because one or more lines are too long

4
js/dist/button.js vendored
View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): button.js
* Bootstrap (v4.0.0-alpha.4): button.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -20,7 +20,7 @@ var Button = (function ($) {
*/
var NAME = 'button';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.button';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';

File diff suppressed because one or more lines are too long

4
js/dist/carousel.js vendored
View File

@ -6,7 +6,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-alpha.2): carousel.js
* Bootstrap (v4.0.0-alpha.4): carousel.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
@ -20,7 +20,7 @@ var Carousel = (function ($) {
*/
var NAME = 'carousel';
var VERSION = '4.0.0-alpha.2';
var VERSION = '4.0.0-alpha.4';
var DATA_KEY = 'bs.carousel';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';

File diff suppressed because one or more lines are too long

Some files were not shown because too many files have changed in this diff Show More