mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Merge branch 'v4-dev' into v4-docs-streamlined

Browse Source
This commit is contained in:
Mark Otto
2016-10-24 14:27:52 -07:00
parent 11d52ba949 cf5d94f6d5
commit f7f3e62c66
236 changed files with 28875 additions and 10822 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/_data/browser-bugs.yml
+13 -3
View File
@@ -2,11 +2,11 @@
browser: >
Microsoft Edge
summary: >
Dynamically generated `<label><input type="file"></label>` causes infinite loop of file dialogs.
Visual artifacts in scrollable modal dialogs
upstream_bug: >
Edge#8282613
Edge#9011176
origin: >
Bootstrap#20335
Bootstrap#20755
-
browser: >
@@ -88,6 +88,16 @@
origin: >
Bootstrap#19670
-
browser: >
Microsoft Edge
summary: >
Active `position: fixed;` `<button>` flickers when scrolling
upstream_bug: >
Edge#8770398
origin: >
Bootstrap#20507
-
browser: >
Firefox
docs/_data/browser-features.yml
+40
View File
@@ -28,6 +28,26 @@
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
@@ -58,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
@@ -88,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
docs/_data/nav.yml
+15 -1
View File
@@ -51,7 +51,21 @@
- title: Scrollspy
- title: Tag
- title: Tooltips
- title: Utilities
- title: Utilities
pages:
- title: Borders
- 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:
docs/_data/showcase.yml
+4 -4
View File
@@ -1,19 +1,19 @@
- name: Lyft
url: https://www.lyft.com
expo_url: http://expo.getbootstrap.com/2014/10/29/lyft/
expo_url: https://expo.getbootstrap.com/2014/10/29/lyft/
img: lyft
- name: Vogue
url: http://www.vogue.com
expo_url: http://expo.getbootstrap.com/2014/09/30/vogue/
expo_url: https://expo.getbootstrap.com/2014/09/30/vogue/
img: vogue
- name: Riot Design
url: http://riotdesign.eu/en/
expo_url: http://expo.getbootstrap.com/2014/03/13/riot-design/
expo_url: https://expo.getbootstrap.com/2014/03/13/riot-design/
img: riot
- name: Newsweek
url: http://www.newsweek.com/
expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/
expo_url: https://expo.getbootstrap.com/2014/02/12/newsweek/
img: newsweek
docs/_data/translations.yml
+5
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: https://bootstrapbrasil.github.io/v4/
docs/_includes/header.html
+5 -5
View File
@@ -1,17 +1,17 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<title>
{% if page.layout == "home" %}
{{ page.title }}
{% if page.title %}
{{ page.title }} &middot; {{ site.title }}
{% else %}
{{ page.title }} &middot; Bootstrap
{{ site.title }} &middot; {{ site.description }}
{% endif %}
</title>
{% include social.html %}
<!-- Bootstrap core CSS -->
{% if site.github %}
<link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
docs/_includes/nav-docs.html
+1 -1
View File
@@ -28,7 +28,7 @@
{% endif %}
<li class="{{ active }}">
<a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' }}">
<a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' }}/">
{{ doc.title }}
</a>
docs/_includes/nav-home.html
+2 -4
View File
@@ -1,7 +1,7 @@
<header class="navbar navbar-light navbar-static-top bd-navbar">
<div class="container">
{% comment %}
<nav class="nav navbar-nav pull-xs-right">
<nav class="nav navbar-nav float-xs-right">
<div class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v{{ site.current_version }}
@@ -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 float-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>
docs/_includes/page-headers.html
+5
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">
docs/_includes/social.html
+31
View File
@@ -0,0 +1,31 @@
<!-- Twitter -->
<meta name="twitter:site" content="@{{ site.twitter }}">
<meta name="twitter:creator" content="@{{ site.twitter }}">
{% if page.title %}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{{ page.title }}">
<meta name="twitter:description" content="{{ page.description }}">
<meta name="twitter:image" content="{{ site.url }}{{ site.social_logo_path }}">
{% else %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ site.title }}">
<meta name="twitter:description" content="{{ site.description }}">
<meta name="twitter:image" content="{{ site.url }}{{ site.social_image_path }}">
{% endif %}
<!-- Facebook -->
{% if page.title %}
<meta property="og:url" content="{{ site.url }}{{ page.url }}">
<meta property="og:title" content="{{ page.title }}">
<meta property="og:description" content="{{ page.description }}">
{% else %}
<meta property="og:url" content="{{ site.url }}">
<meta property="og:title" content="{{ site.title }}">
<meta property="og:description" content="{{ site.description }}">
{% endif %}
<meta property="og:image" content="{{ site.url }}{{ site.social_image_path }}">
<!-- Meta -->
<meta name="description" content="{{ site.description }}">
<meta name="author" content="{{ site.authors }}">
docs/about/brand.md
+2 -1
View File
@@ -1,10 +1,11 @@
---
layout: docs
title: Brand guidelines
description: Documentation and examples for Bootstrap's logo and brand usage guidelines.
group: about
---
Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](http://mailchimp.com/about/brand-assets/).
Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](https://mailchimp.com/about/brand-assets/).
## Mark and logo
docs/about/history.md
+1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: History
description: A brief overview of the history of Bootstrap.
group: about
redirect_from: "/about/"
---
docs/about/license.md
+1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: License FAQs
description: Commonly asked questions about Bootstrap's open source license.
group: about
---
docs/about/team.md
+1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Team
description: An overview of the founding team and core contributors to Bootstrap.
group: about
---
docs/about/translations.md
+1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Translations
description: Links to community-translated Bootstrap documentation sites.
group: about
---
docs/assets/brand/bootstrap-social-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

docs/assets/brand/bootstrap-social.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 330 KiB

docs/assets/css/docs-flexbox.min.css
Vendored
+73 -33
View File
@@ -54,7 +54,7 @@
justify-content: space-between;
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.flex-sm-first {
order: -1;
}
@@ -66,7 +66,7 @@
}
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.flex-items-sm-top {
align-items: flex-start;
}
@@ -78,7 +78,7 @@
}
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.flex-sm-top {
align-self: flex-start;
}
@@ -90,7 +90,7 @@
}
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.flex-items-sm-left {
justify-content: flex-start;
}
@@ -277,27 +277,31 @@
padding-right: 15px;
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.container {
max-width: 576px;
width: 540px;
max-width: 100%;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
width: 720px;
max-width: 100%;
}
}
@media (min-width: 992px) {
.container {
max-width: 940px;
width: 960px;
max-width: 100%;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
width: 1140px;
max-width: 100%;
}
}
@@ -311,26 +315,78 @@
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
margin-left: -15px;
}
.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 {
@media (min-width: 576px) {
.row {
margin-right: -15px;
margin-left: -15px;
}
}
@media (min-width: 768px) {
.row {
margin-right: -15px;
margin-left: -15px;
}
}
@media (min-width: 992px) {
.row {
margin-right: -15px;
margin-left: -15px;
}
}
@media (min-width: 1200px) {
.row {
margin-right: -15px;
margin-left: -15px;
}
}
.col-xs, .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, .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, .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, .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, .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;
width: 100%;
padding-right: 15px;
padding-left: 15px;
width: 100%;
}
@media (min-width: 576px) {
.col-xs, .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, .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, .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, .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, .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 {
padding-right: 15px;
padding-left: 15px;
}
}
@media (min-width: 768px) {
.col-xs, .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, .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, .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, .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, .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 {
padding-right: 15px;
padding-left: 15px;
}
}
@media (min-width: 992px) {
.col-xs, .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, .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, .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, .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, .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 {
padding-right: 15px;
padding-left: 15px;
}
}
@media (min-width: 1200px) {
.col-xs, .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, .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, .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, .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, .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 {
padding-right: 15px;
padding-left: 15px;
}
}
.col-xs {
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-1 {
@@ -541,15 +597,11 @@
margin-left: 91.666667%;
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.col-sm {
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-sm-1 {
flex: 0 0 8.333333%;
@@ -717,13 +769,9 @@
@media (min-width: 768px) {
.col-md {
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-md-1 {
flex: 0 0 8.333333%;
@@ -891,13 +939,9 @@
@media (min-width: 992px) {
.col-lg {
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-lg-1 {
flex: 0 0 8.333333%;
@@ -1065,13 +1109,9 @@
@media (min-width: 1200px) {
.col-xl {
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xl-1 {
flex: 0 0 8.333333%;
docs/assets/css/docs-flexbox.min.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/assets/css/docs.min.css
Vendored
+13 -13
View File
@@ -1,5 +1,5 @@
/*!
* Bootstrap Docs (http://getbootstrap.com)
* Bootstrap Docs (https://getbootstrap.com)
* Copyright 2011-2016 The Bootstrap Authors
* Copyright 2011-2016 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
@@ -113,7 +113,7 @@
margin-bottom: -2rem !important;
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.bd-masthead {
padding-top: 8rem;
padding-bottom: 2rem;
@@ -174,7 +174,7 @@
text-align: center;
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.bd-featurette {
text-align: left;
}
@@ -202,7 +202,7 @@
margin: 2.5rem auto;
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.half-rule {
margin-right: 0;
margin-left: 0;
@@ -298,7 +298,7 @@
text-decoration: none;
}
@media (min-width: 544px) {
@media (min-width: 576px) {
#carbonads {
max-width: 330px;
margin: 50px auto 0;
@@ -374,7 +374,7 @@
margin-bottom: .25rem;
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.bd-title {
font-size: 3rem;
}
@@ -418,7 +418,7 @@
font-weight: 300;
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.bd-pageheader {
padding-top: 4rem;
padding-bottom: 4rem;
@@ -600,7 +600,7 @@
margin-bottom: 0;
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.bd-footer {
text-align: left;
}
@@ -690,7 +690,7 @@
clear: both;
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.bd-example {
padding: 1.5rem;
margin-right: 0;
@@ -809,7 +809,7 @@
margin: 1rem -1rem -1rem;
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.bd-example .navbar-fixed-top {
margin: -1.5rem -1.5rem 1rem;
}
@@ -915,7 +915,7 @@
background-color: #f7f7f9;
}
@media (min-width: 544px) {
@media (min-width: 576px) {
.highlight {
padding: 1.5rem;
margin-right: 0;
@@ -997,13 +997,13 @@
border: 1px solid #d6e9c6;
}
@media (max-width: 543px) {
@media (max-width: 575px) {
.hidden-xs-only {
display: none !important;
}
}
@media (min-width: 544px) and (max-width: 767px) {
@media (min-width: 576px) and (max-width: 767px) {
.hidden-sm-only {
display: none !important;
}
docs/assets/css/docs.min.css.map
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/assets/js/docs.min.js
Vendored
+7 -7
View File
File diff suppressed because one or more lines are too long
docs/assets/js/ie10-viewport-bug-workaround.js
+1 -1
View File
@@ -6,7 +6,7 @@
*/
// See the Getting Started docs for more information:
// http://getbootstrap.com/getting-started/#support-ie10-width
// https://getbootstrap.com/getting-started/#support-ie10-width
(function () {
'use strict';
docs/assets/js/src/application.js
+1 -1
View File
@@ -3,7 +3,7 @@
// ++++++++++++++++++++++++++++++++++++++++++
/*!
* JavaScript for Bootstrap's docs (http://getbootstrap.com)
* JavaScript for Bootstrap's docs (https://getbootstrap.com)
* Copyright 2011-2016 The Bootstrap Authors
* Copyright 2011-2016 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
docs/assets/js/vendor/anchor.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/assets/js/vendor/clipboard.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/assets/js/vendor/holder.min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
docs/assets/js/vendor/jekyll-search.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/assets/js/vendor/jquery.min.js
Vendored
+4 -4
View File
File diff suppressed because one or more lines are too long
docs/assets/js/vendor/tether.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/assets/scss/_component-examples.scss
+1 -1
View File
@@ -324,7 +324,7 @@
.highlight {
padding: 1rem;
margin: 1rem (-$grid-gutter-width / 2);
margin: 1rem (-$grid-gutter-width-base / 2);
background-color: #f7f7f9;
@include media-breakpoint-up(sm) {
docs/assets/scss/_featurettes.scss
+2 -2
View File
@@ -26,10 +26,10 @@
@include media-breakpoint-up(md) {
.col-sm-6:first-child {
padding-right: ($grid-gutter-width * 1.5);
padding-right: ($grid-gutter-width-base * 1.5);
};
.col-sm-6:last-child {
padding-left: ($grid-gutter-width * 1.5);
padding-left: ($grid-gutter-width-base * 1.5);
}
}
}
docs/assets/scss/_masthead.scss
+1 -1
View File
@@ -2,7 +2,7 @@
.bd-masthead {
position: relative;
padding: 3rem ($grid-gutter-width / 2) 2rem;
padding: 3rem ($grid-gutter-width-base / 2) 2rem;
color: $bd-purple-light;
text-align: center;
background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
docs/assets/scss/_page-header.scss
+1 -1
View File
@@ -1,7 +1,7 @@
// scss-lint:disable ImportantRule
.bd-pageheader {
padding: 2rem ($grid-gutter-width / 2);
padding: 2rem ($grid-gutter-width-base / 2);
margin-bottom: 1.5rem;
color: $bd-purple-light;
text-align: center;
docs/assets/scss/_syntax.scss
+3
View File
@@ -61,3 +61,6 @@
.css .o,
.css .o + .nt,
.css .nt + .nt { color: #999; }
.language-bash::before { color: #009; content: "$ "; user-select: none; }
.language-powershell::before { color: #009; content: "PM> "; user-select: none; }
docs/assets/scss/docs.scss
+1 -1
View File
@@ -1,5 +1,5 @@
/*!
* Bootstrap Docs (http://getbootstrap.com)
* Bootstrap Docs (https://getbootstrap.com)
* Copyright 2011-2016 The Bootstrap Authors
* Copyright 2011-2016 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
docs/browser-bugs.md
+1 -1
View File
@@ -32,7 +32,7 @@ See also:
<tr>
<td>{{ bug.browser }}</td>
<td>{{ bug.summary | markdownify | bugify }}</td>
<td>{{ bug.upstream_bug | bugify }}</td>
<td>{{ bug.upstream_bug | bugify }}</td>
<td>{{ bug.origin | bugify }}</td>
</tr>
{% endfor %}
docs/components/alerts.md
+2 -1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Alerts
description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
group: components
---
@@ -60,7 +61,7 @@ Alerts can also contain additional HTML elements like headings and paragraphs.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<p class="m-b-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
{% endexample %}
docs/components/breadcrumb.md
+1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Breadcrumb
description: Indicate the current page's location within a navigational hierarchy.
group: components
---
docs/components/button-group.md
+1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Button group
description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
group: components
---
docs/components/buttons.md
+1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Buttons
description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
group: components
redirect_from: "/components/"
---
docs/components/card.md
+8 -7
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Cards
description: Bootstrap Cards provide a flexible and extensible content container with multiple variants and options.
group: components
---
@@ -141,7 +142,7 @@ Using custom widths:
## Text alignment
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/components/utilities/#text-alignment).
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/utilities/typography/#text-alignment).
{% example html %}
<div class="card card-block">
@@ -230,7 +231,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
{% example html %}
<div class="card text-xs-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs pull-xs-left">
<ul class="nav nav-tabs card-header-tabs float-xs-left">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
@@ -253,7 +254,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
{% example html %}
<div class="card text-xs-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills pull-xs-left">
<ul class="nav nav-pills card-header-pills float-xs-left">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
@@ -434,7 +435,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
## Groups
Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.
Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/) can switch that to use `display: flex;` and provide the same effect.
Only applies to small devices and above.
@@ -517,7 +518,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 +535,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 +558,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">
docs/components/carousel.md
+2 -1
View File
@@ -1,10 +1,11 @@
---
layout: docs
title: Carousel
description: A slideshow component for cycling through elements—images or slides of text—like a carousel.
group: components
---
A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the [Page Visibility API](http://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). **Nested carousels are not supported.**
A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). **Nested carousels are not supported.**
## Contents
docs/components/collapse.md
+26 -18
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Collapse
description: Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
group: components
---
@@ -43,40 +44,47 @@ 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="mb-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">
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 id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
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>
<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="mb-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">
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 id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
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>
<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="mb-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">
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 id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block">
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>
</div>
docs/components/dropdowns.md
+2 -1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Dropdowns
description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
group: components
---
@@ -36,7 +37,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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
docs/components/forms.md
+11 -10
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Forms
description: Examples and usage guidelines for from controls, form layouts, and custom forms.
group: components
---
@@ -191,7 +192,7 @@ Here are examples of `.form-control` applied to each textual HTML5 `<input>` `ty
<div class="form-group row">
<label for="example-url-input" class="col-xs-2 col-form-label">URL</label>
<div class="col-xs-10">
<input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input">
<input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
</div>
</div>
<div class="form-group row">
@@ -339,7 +340,7 @@ Assistive technologies such as screen readers will have trouble with your forms
### Using the Grid
For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes](/layout/grid/#predefined-classes) or [mixins](/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes]({{ site.baseurl }}/layout/grid/#predefined-classes) or [mixins]({{ site.baseurl }}/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.col-form-legend` to make them appear similar to regular `<label>` elements.
@@ -515,14 +516,14 @@ Should you have no text within the `<label>`, the input is positioned as you'd e
## Static controls
When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
When you need to place plain text next to a form label within a form, use the `.form-control-static` class on an element of your choice. Using an element like `<p>` with a default margin? Be sure to use a margin override (as shown below).
{% example html %}
<form>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
<p class="form-control-static mb-0">email@example.com</p>
</div>
</div>
<div class="form-group row">
@@ -584,7 +585,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
{% callout warning %}
#### Caveat about link functionality of `<a>`
By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons](../buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
{% endcallout %}
{% callout danger %}
@@ -703,25 +704,25 @@ Here are some examples of the aforementioned classes in action.
Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon](../components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples](../components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon]({{ site.baseurl }}/components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples]({{ site.baseurl }}/components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
{% endcallout %}
{% endcomment %}
{% example html %}
<div class="form-group has-success">
<label class="col-form-label" for="inputSuccess1">Input with success</label>
<label class="form-control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control form-control-success" id="inputSuccess1">
<div class="form-control-feedback">Success! You've done it.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-group has-warning">
<label class="col-form-label" for="inputWarning1">Input with warning</label>
<label class="form-control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control form-control-warning" id="inputWarning1">
<div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-group has-danger">
<label class="col-form-label" for="inputDanger1">Input with danger</label>
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
<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>
@@ -845,7 +846,7 @@ Add other states to your custom forms with our validation classes.
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
<div class="form-group has-danger m-b-0">
<div class="form-group has-danger mb-0">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
docs/components/input-group.md
+1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Input group
description: Extend form controls with the input group.
group: components
---
docs/components/jumbotron.md
+2 -1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Jumbotron
description: Lightweight, flexible component for showcasing hero unit style content.
group: components
---
@@ -12,7 +13,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="m-y-2">
<hr class="my-2">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
docs/components/list-group.md
+4 -3
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: List group
description: Learn about Bootstrap's list group component for rendering series of related content.
group: components
---
@@ -31,15 +32,15 @@ Add tags to any list group item to show unread counts, activity, etc.
{% example html %}
<ul class="list-group">
<li class="list-group-item">
<span class="tag tag-default tag-pill pull-xs-right">14</span>
<span class="tag tag-default tag-pill float-xs-right">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="tag tag-default tag-pill pull-xs-right">2</span>
<span class="tag tag-default tag-pill float-xs-right">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="tag tag-default tag-pill pull-xs-right">1</span>
<span class="tag tag-default tag-pill float-xs-right">1</span>
Morbi leo risus
</li>
</ul>
docs/components/modal.md
+7
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Modal
description: Learn how to use Bootstrap's modals to add dialog prompts to your site.
group: components
---
@@ -411,6 +412,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>true</td>
<td>Closes the modal when escape key is pressed</td>
</tr>
<tr>
<td>focus</td>
<td>boolean</td>
<td>true</td>
<td>Puts the focus on the modal when initialized.</td>
</tr>
<tr>
<td>show</td>
<td>boolean</td>
docs/components/navbar.md
+10 -13
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Navbar
description: Documentation and examples for Bootstrap's powerful, responsive navigation header.
group: components
---
@@ -26,7 +27,7 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc
- `.navbar-brand` for your company, product, or project name
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsing-content) behaviors.
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsible-content) behaviors.
Here's an example of all the sub-components included in a default, light navbar:
@@ -47,7 +48,7 @@ Here's an example of all the sub-components included in a default, light navbar:
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
@@ -64,7 +65,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
</nav>
<nav class="navbar navbar-light bg-faded">
<h1 class="navbar-brand m-b-0">Navbar</h1>
<h1 class="navbar-brand mb-0">Navbar</h1>
</nav>
{% endexample %}
@@ -129,7 +130,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-info" type="submit">Search</button>
</form>
@@ -150,7 +151,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-secondary" type="submit">Search</button>
</form>
@@ -171,7 +172,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
@@ -241,11 +242,9 @@ 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 p-a-1">
<div class="bg-inverse p-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
@@ -257,9 +256,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">
docs/components/navs.md
+1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Navs
description: Documentation and examples for how to use Bootstrap's included navigation components.
group: components
---
docs/components/pagination.md
+1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Pagination
description: Documentation and examples for showing pagination links.
group: components
---
docs/components/popovers.md
+7 -10
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Popovers
description: Documentation and examples for adding Bootstrap popovers to your site.
group: components
---
@@ -16,8 +17,8 @@ Add small overlay content, like those found in iOS, to any element for housing s
Things to know when using the popover plugin:
- Popovers rely on the 3rd party library [Tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for popovers to work!
- Popovers require the [tooltip plugin]({{ site.baseurl }}/components/tooltips) as a dependency.
- Popovers rely on the 3rd party library [Tether](http://tether.io/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for popovers to work!
- Popovers require the [tooltip plugin]({{ site.baseurl }}/components/tooltips/) as a dependency.
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
- Zero-length `title` and `content` values will never show a popover.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
@@ -55,7 +56,6 @@ Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-popover-static">
<div class="popover popover-top">
<div class="popover-arrow"></div>
<h3 class="popover-title">Popover top</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -63,7 +63,6 @@ Four options are available: top, right, bottom, and left aligned.
</div>
<div class="popover popover-right">
<div class="popover-arrow"></div>
<h3 class="popover-title">Popover right</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -71,7 +70,6 @@ Four options are available: top, right, bottom, and left aligned.
</div>
<div class="popover popover-bottom">
<div class="popover-arrow"></div>
<h3 class="popover-title">Popover bottom</h3>
<div class="popover-content">
@@ -80,7 +78,6 @@ Four options are available: top, right, bottom, and left aligned.
</div>
<div class="popover popover-left">
<div class="popover-arrow"></div>
<h3 class="popover-title">Popover left</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -141,7 +138,7 @@ Use the `focus` trigger to dismiss popovers on the next click that the user make
{% callout danger %}
#### Specific markup required for dismiss-on-next-click
For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex) attribute.
For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute.
{% endcallout %}
{% example html %}
@@ -229,7 +226,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>selector</td>
<td>string</td>
<td>false</td>
<td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
<td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
</tr>
<tr>
<td>template</td>
@@ -262,13 +259,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>constraints</td>
<td>Array</td>
<td>'hover focus'</td>
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td>
</tr>
<tr>
<td>offset</td>
<td>string</td>
<td>'0 0'</td>
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#offset">offset docs</a>.</td>
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td>
</tr>
</tbody>
</table>
docs/components/progress.md
+2 -1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Progress
description: Documentation and examples for using Bootstrap progress bars.
group: components
---
@@ -13,7 +14,7 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc
## 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.
To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/utilities/typography/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.
{% example html %}
docs/components/scrollspy.md
+1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Scrollspy
description: Documentation and examples for the scrollspy plugin with Bootstrap's navigation components.
group: components
---
docs/components/tag.md
+1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Tags
description: Documentation and examples for tags, our small label-badge component.
group: components
---
docs/components/tooltips.md
+20 -10
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Tooltips
description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript.
group: components
---
@@ -15,7 +16,7 @@ Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips a
Things to know when using the tooltip plugin:
- Tooltips rely on the 3rd party library [Tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work!
- Tooltips rely on the 3rd party library [Tether](http://tether.io/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work!
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
- Tooltips with zero-length titles are never displayed.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
@@ -50,25 +51,21 @@ Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-tooltip-static">
<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 tooltip-right" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the right
</div>
</div>
<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 tooltip-left" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the left
</div>
@@ -85,6 +82,7 @@ Hover over the buttons below to see their tooltips.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
</div>
</div>
@@ -103,6 +101,14 @@ Hover over the buttons below to see their tooltips.
</button>
{% endhighlight %}
And with custom HTML added:
{% highlight html %}
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
{% endhighlight %}
## Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
@@ -179,14 +185,18 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
<td>
<p>Allow HTML in the tooltip.</p>
<p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM.</p>
<p>Use text if you're worried about XSS attacks.</p>
</td>
</tr>
<tr>
<td>placement</td>
<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>
@@ -194,7 +204,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>selector</td>
<td>string</td>
<td>false</td>
<td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
<td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
</tr>
<tr>
<td>template</td>
@@ -226,13 +236,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>constraints</td>
<td>Array</td>
<td>[]</td>
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td>
</tr>
<tr>
<td>offset</td>
<td>string</td>
<td>'0 0'</td>
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</td>
<td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#constraints">offset docs</a>.</td>
</tr>
</tbody>
</table>
docs/components/utilities.md
-367
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 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 %}
## 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 %}
docs/content/code.md
+1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Code
description: Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.
group: content
---
docs/content/figures.md
+5 -4
View File
@@ -1,25 +1,26 @@
---
layout: docs
title: Figures
description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
group: content
---
Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `<figure>`.
Anytime you need to display a piece of content—like an image with an optional caption, consider using a `<figure>`.
Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `<img>` to make it responsive.
{% example html %}
<figure class="figure">
<img data-src="holder.js/400x300" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
{% endexample %}
Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/components/utilities/#text-alignment).
Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/utilities/typography/#text-alignment).
{% example html %}
<figure class="figure">
<img data-src="holder.js/400x300" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
</figure>
{% endexample %}
docs/content/images.md
+12 -15
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Images
description: Documentation and examples for styling images with Bootstrap.
group: content
---
@@ -29,52 +30,48 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
{% endcallout %}
## Image shapes
## Image thumbnails
Add classes to an `<img>` element to easily style images in any project.
In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
<img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
</div>
{% highlight html %}
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
{% endhighlight %}
## Aligning images
Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.m-x-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
Align images with the [helper float classes]({{ site.baseurl }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/utilities/spacing/#horizontal-centering).
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="img-rounded pull-xs-right" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded float-xs-left" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded float-xs-right" alt="A generic square placeholder image with rounded corners">
</div>
{% highlight html %}
<img src="..." class="img-rounded pull-xs-left" alt="...">
<img src="..." class="img-rounded pull-xs-right" alt="...">
<img src="..." class="rounded float-xs-left" alt="...">
<img src="..." class="rounded float-xs-right" alt="...">
{% endhighlight %}
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-rounded m-x-auto d-block" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded mx-auto d-block" alt="A generic square placeholder image with rounded corners">
</div>
{% highlight html %}
<img src="..." class="img-rounded m-x-auto d-block" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
{% endhighlight %}
<div class="bd-example bd-example-images">
<div class="text-xs-center">
<img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners">
</div>
</div>
{% highlight html %}
<div class="text-xs-center">
<img src="..." class="img-rounded" alt="...">
<img src="..." class="rounded" alt="...">
</div>
{% endhighlight %}
docs/content/reboot.md
+3 -10
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Reboot
description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that builds on Normalize.css.
group: content
redirect_from: "/content/"
---
@@ -46,14 +47,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 %}
@@ -328,7 +321,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
{% endcallout %}
To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/components/utilities/#invisible-content) instead.
To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/utilities/invisible-content/) instead.
## Click delay optimization for touch
@@ -342,4 +335,4 @@ To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 o
In the case of old iOS versions (prior to 9.3), the suggested approach is to use additional scripts such as [FastClick](https://github.com/ftlabs/fastclick) to explicitly work around the delay.
For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay).
For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay).
docs/content/tables.md
+3 -2
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Tables
description: Documentation and examples for styling tables with Bootstrap.
group: content
---
@@ -13,7 +14,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
## Examples
Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent.
{% example html %}
<table class="table">
@@ -575,7 +576,7 @@ Use contextual classes to color table rows or individual cells.
</tr>
{% endhighlight %}
Regular table background variants are not available with the inverse table, however, you may use [text or background utilities](/components/utilities/#contextual-colors-and-backgrounds) to achieve similar styles.
Regular table background variants are not available with the inverse table, however, you may use [text or background utilities]({{ site.baseurl }}/utilities/colors/) to achieve similar styles.
<div class="bd-example">
<table class="table table-inverse">
docs/content/typography.md
+13 -12
View File
@@ -1,10 +1,11 @@
---
layout: docs
title: Typography
description: Documentation and examples for Bootstrap typography, including global settings, body text, lists, and more.
group: content
---
Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/components/utilities/).
Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/utilities/).
## Contents
@@ -15,7 +16,7 @@ Bootstrap includes simple and easily customized typography for headings, body te
Bootstrap sets basic global display, typography, and link styles. Specifically, we:
- Use a [native font stack](/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device.
- Use a [native font stack]({{ site.baseurl }}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device.
- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`.
- Set the global link color via `$link-color` and apply link underlines only on `:hover`.
- Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default).
@@ -31,27 +32,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>
@@ -149,7 +150,7 @@ While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant
## Text utilities
Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/components/utilities/#text-alignment).
Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/utilities/typography/#text-alignment).
## Abbreviations
@@ -168,7 +169,7 @@ For quoting blocks of content from another source within your document. Wrap `<b
{% example html %}
<blockquote class="blockquote">
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
{% endexample %}
@@ -178,7 +179,7 @@ Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the
{% example html %}
<blockquote class="blockquote">
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
{% endexample %}
@@ -189,7 +190,7 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content.
{% example html %}
<blockquote class="blockquote blockquote-reverse">
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
{% endexample %}
docs/dist/css/bootstrap-flex.css
Vendored
+7203
View File
File diff suppressed because it is too large Load Diff
docs/dist/css/bootstrap-flex.css.map
Vendored
+1
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap-flex.min.css
Vendored
+7
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap-flex.min.css.map
Vendored
+1
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap-grid.css
Vendored
+996
View File
@@ -0,0 +1,996 @@
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.container::after {
content: "";
display: table;
clear: both;
}
@media (min-width: 576px) {
.container {
width: 540px;
max-width: 100%;
}
}
@media (min-width: 768px) {
.container {
width: 720px;
max-width: 100%;
}
}
@media (min-width: 992px) {
.container {
width: 960px;
max-width: 100%;
}
}
@media (min-width: 1200px) {
.container {
width: 1140px;
max-width: 100%;
}
}
.container-fluid {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.container-fluid::after {
content: "";
display: table;
clear: both;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.row::after {
content: "";
display: table;
clear: both;
}
@media (min-width: 576px) {
.row {
margin-right: -15px;
margin-left: -15px;
}
}
@media (min-width: 768px) {
.row {
margin-right: -15px;
margin-left: -15px;
}
}
@media (min-width: 992px) {
.row {
margin-right: -15px;
margin-left: -15px;
}
}
@media (min-width: 1200px) {
.row {
margin-right: -15px;
margin-left: -15px;
}
}
.col-xs, .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, .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, .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, .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, .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;
}
@media (min-width: 576px) {
.col-xs, .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, .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, .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, .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, .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 {
padding-right: 15px;
padding-left: 15px;
}
}
@media (min-width: 768px) {
.col-xs, .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, .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, .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, .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, .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 {
padding-right: 15px;
padding-left: 15px;
}
}
@media (min-width: 992px) {
.col-xs, .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, .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, .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, .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, .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 {
padding-right: 15px;
padding-left: 15px;
}
}
@media (min-width: 1200px) {
.col-xs, .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, .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, .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, .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, .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 {
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: 576px) {
.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 */
docs/dist/css/bootstrap-grid.css.map
Vendored
+1
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap-grid.min.css
Vendored
+2
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap-grid.min.css.map
Vendored
+1
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap-reboot.css
Vendored
+453
View File
@@ -0,0 +1,453 @@
/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
line-height: 1.15;
-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;
-webkit-text-decoration-skip: objects;
}
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,
optgroup,
select,
textarea {
font: inherit;
margin: 0;
}
optgroup {
font-weight: bold;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-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;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
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 {
line-height: inherit;
}
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 */
docs/dist/css/bootstrap-reboot.css.map
Vendored
+1
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap-reboot.min.css
Vendored
+2
View File
@@ -0,0 +1,2 @@
/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-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;-webkit-text-decoration-skip:objects}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,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-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;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}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{line-height:inherit}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 */
docs/dist/css/bootstrap-reboot.min.css.map
Vendored
+1
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":"4EAQA,KACE,YAAA,WACA,YAAA,KACA,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,KAWF,EACE,iBAAA,YACA,6BAAA,QAQF,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,QAWF,OAAA,MAAA,SAAA,OAAA,SAKE,KAAA,QACA,OAAA,EAOF,SACE,YAAA,IAQF,OAAA,MAEE,SAAA,QAQF,OAAA,OAEE,eAAA,KASF,aAAA,cAAA,OAAA,mBAIE,mBAAA,OAOF,gCAAA,+BAAA,gCAAA,yBAIE,aAAA,KACA,QAAA,EAOF,6BAAA,4BAAA,6BAAA,sBAIE,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,KCpKF,gBAAA,aD8KE,mBAAA,WAAA,WAAA,WACA,QAAA,ECzKF,yCAAA,yCDkLE,OAAA,KC7KF,cDsLE,mBAAA,UACA,eAAA,KClLF,4CAAA,yCD2LE,mBAAA,KAOF,4BACE,MAAA,QACA,QAAA,IAQF,6BACE,mBAAA,OACA,KAAA,QE/YF,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,OC8FiH,iBD9FjH,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,SAME,YAAA,QAGF,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,aDiEF,SCzDE,QAAA"}
docs/dist/css/bootstrap.css
+368 -228
View File
File diff suppressed because it is too large Load Diff
docs/dist/css/bootstrap.css.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap.min.css
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap.min.css.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/dist/js/bootstrap.js
+1820 -1963
View File
File diff suppressed because it is too large Load Diff
docs/dist/js/bootstrap.min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
docs/examples/album/index.html
+2 -4
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>
@@ -104,7 +102,7 @@
<footer class="text-muted">
<div class="container">
<p class="pull-xs-right">
<p class="float-xs-right">
<a href="#">Back to top</a>
</p>
<p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
docs/examples/blog/index.html
+1 -1
View File
@@ -148,7 +148,7 @@
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>Blog template built for <a href="https://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
docs/examples/carousel/index.html
+4 -4
View File
@@ -129,7 +129,7 @@
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid m-x-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
@@ -141,7 +141,7 @@
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5 pull-md-7">
<img class="featurette-image img-fluid m-x-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
@@ -153,7 +153,7 @@
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid m-x-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
@@ -164,7 +164,7 @@
<!-- FOOTER -->
<footer>
<p class="pull-xs-right"><a href="#">Back to top</a></p>
<p class="float-xs-right"><a href="#">Back to top</a></p>
<p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer>
docs/examples/cover/index.html
+1 -1
View File
@@ -47,7 +47,7 @@
<div class="mastfoot">
<div class="inner">
<p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</div>
docs/examples/dashboard/index.html
+3 -8
View File
@@ -21,21 +21,16 @@
<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">
<nav class="nav navbar-nav float-xs-left">
<a class="nav-item nav-link" href="#">Dashboard</a>
<a class="nav-item nav-link" href="#">Settings</a>
<a class="nav-item nav-link" href="#">Profile</a>
<a class="nav-item nav-link" href="#">Help</a>
</nav>
<form class="pull-xs-right">
<form class="float-xs-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
docs/examples/grid/index.html
+1 -1
View File
@@ -135,7 +135,7 @@
<hr>
<h3>Column clearing</h3>
<p><a href="http://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
<p><a href="https://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
<div class="row">
<div class="col-xs-6 col-sm-3">
.col-xs-6 .col-sm-3
docs/examples/index.md
+7 -7
View File
@@ -24,7 +24,7 @@ Examples that focus on implementing uses of built-in components provided by Boot
<h4>Grids</h4>
<p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up"></div>
<div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}/examples/jumbotron/">
@@ -61,7 +61,7 @@ Taking the default navbar component and showing how it can be moved, placed, and
<h4>Static top navbar</h4>
<p>Super basic template with a static top navbar along with some additional content.</p>
</div>
<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up"></div>
<div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}/examples/navbar-top-fixed/">
@@ -91,7 +91,7 @@ Brand new components and templates to help folks quickly get started with Bootst
<h4>Cover</h4>
<p>A one-page template for building simple and beautiful home pages.</p>
</div>
<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up"></div>
<div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}/examples/carousel/">
@@ -107,7 +107,7 @@ Brand new components and templates to help folks quickly get started with Bootst
<h4>Blog</h4>
<p>Simple two-column blog layout with custom navigation, header, and type.</p>
</div>
<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up"></div>
<div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}/examples/dashboard/">
@@ -123,14 +123,14 @@ Brand new components and templates to help folks quickly get started with Bootst
<h4>Sign-in page</h4>
<p>Custom form layout and design for a simple sign in form.</p>
</div>
<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up"></div>
<div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}/examples/justified-nav/">
<img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/justified-nav.jpg" alt="">
</a>
<h4>Justified nav</h4>
<p>Create a custom navbar with justified links. Heads up! <a href="{{ site.baseurl }}components/#nav-justified">Not too Safari friendly.</a></p>
<p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p>
</div>
<div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}/examples/sticky-footer/">
@@ -139,7 +139,7 @@ Brand new components and templates to help folks quickly get started with Bootst
<h4>Sticky footer</h4>
<p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
</div>
<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up"></div>
<div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}/examples/sticky-footer-navbar/">
docs/examples/narrow-jumbotron/index.html
+1 -1
View File
@@ -23,7 +23,7 @@
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-xs-right">
<ul class="nav nav-pills float-xs-right">
<li class="nav-item">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
</li>
docs/examples/navbar-top-fixed/index.html
+3 -5
View File
@@ -21,15 +21,13 @@
<div class="pos-f-t">
<div class="collapse" id="navbar-header">
<div class="container-fluid bg-inverse p-a-1">
<div class="container-fluid bg-inverse p-1">
<h3>Collapsed content</h3>
<p>Toggleable via the navbar brand.</p>
</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>
@@ -37,7 +35,7 @@
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</div>
</div>
docs/examples/navbar-top/index.html
+4 -6
View File
@@ -20,22 +20,20 @@
<body>
<div class="collapse" id="navbar-header">
<div class="container-fluid bg-inverse p-a-1">
<div class="container-fluid bg-inverse p-1">
<h3>Collapsed content</h3>
<p>Toggleable via the navbar brand.</p>
</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>
<div class="navbar navbar-light bg-faded navbar-static-top mb-1">
<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">
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</div>
</div>
docs/examples/navbar/index.html
+3 -5
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">
@@ -41,7 +39,7 @@
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
@@ -54,7 +52,7 @@
<p>This example is a quick exercise to illustrate how the default responsive navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/navbar" role="button">View navbar docs &raquo;</a>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</p>
</div>
docs/examples/offcanvas/index.html
+1 -1
View File
@@ -35,7 +35,7 @@
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-xs-right hidden-sm-up">
<p class="float-xs-right hidden-sm-up">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
docs/examples/sticky-footer-navbar/index.html
+3 -5
View File
@@ -23,16 +23,14 @@
<!-- Fixed navbar -->
<div class="pos-f-t">
<div class="collapse" id="navbar-header">
<div class="container bg-inverse p-a-1">
<div class="container bg-inverse p-1">
<h3>Collapsed content</h3>
<p>Toggleable via the navbar brand.</p>
</div>
</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">
@@ -56,7 +54,7 @@
<!-- Begin page content -->
<div class="container">
<div class="m-t-1">
<div class="mt-1">
<h1>Sticky footer with fixed navbar</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body &gt; .container</code>.</p>
docs/examples/sticky-footer/index.html
+1 -1
View File
@@ -22,7 +22,7 @@
<!-- Begin page content -->
<div class="container">
<div class="m-t-1">
<div class="mt-1">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
docs/examples/tooltip-viewport/index.html
+2 -2
View File
@@ -20,7 +20,7 @@
<body>
<button class="btn btn-secondary pull-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
<button class="btn btn-secondary float-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
<button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
<button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button>
@@ -30,7 +30,7 @@
<button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
<button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
<button class="btn btn-secondary pull-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
<button class="btn btn-secondary float-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
<button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
</div>
docs/extend/icon-fonts.md
+1
View File
@@ -3,3 +3,4 @@ layout: docs
title: Icon fonts
---
TODO
docs/getting-started/accessibility.md
+2 -1
View File
@@ -1,6 +1,7 @@
---
layout: docs
title: Accessibility
description: Learn how Bootstrap supports common web standards for making sites that are accessibile to those using assistive technology.
group: getting-started
---
@@ -46,7 +47,7 @@ Note that this bug will also affect any other in-page links your site may be usi
When nesting headings (`<h1>` - `<h6>`), your primary document header should be an `<h1>`. Subsequent headings should make logical use of `<h2>` - `<h6>` such that screen readers can construct a table of contents for your pages.
Learn more at [HTML CodeSniffer](http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings).
Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings).
## Additional resources

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