mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Merge branch 'v4' of https://github.com/twbs/derpstrap into v4
This commit is contained in:
Mark Otto
commit
0ab1576ae2
@ -285,12 +285,49 @@ body {
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, button, select, textarea {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-family: inherit;
|
margin-top: 0;
|
||||||
font-size: inherit;
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
cursor: help;
|
||||||
|
border-bottom-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-style: normal;
|
||||||
line-height: inherit;
|
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 {
|
a {
|
||||||
color: #0275d8;
|
color: #0275d8;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -305,44 +342,78 @@ a:focus {
|
|||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
pre {
|
||||||
max-width: 100%;
|
margin-top: 0;
|
||||||
height: auto;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-rounded {
|
|
||||||
border-radius: .3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-thumbnail {
|
|
||||||
padding: .25rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: .25rem;
|
|
||||||
-webkit-transition: all .2s ease-in-out;
|
|
||||||
-o-transition: all .2s ease-in-out;
|
|
||||||
transition: all .2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-circle {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
border: 0;
|
}
|
||||||
border-top: .0625rem solid #eceeef;
|
|
||||||
|
figure {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button, select, textarea {
|
||||||
|
margin: 0;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
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-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
output {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
margin-top: 0;
|
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
@ -392,16 +463,18 @@ h6, .h6 {
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead {
|
.lead {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border: 0;
|
||||||
|
border-top: .0625rem solid #eceeef;
|
||||||
|
}
|
||||||
|
|
||||||
small, .small {
|
small, .small {
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
}
|
}
|
||||||
@ -411,14 +484,6 @@ mark, .mark {
|
|||||||
background-color: #fcf8e3;
|
background-color: #fcf8e3;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul, ol {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: .5;
|
|
||||||
}
|
|
||||||
ul ul, ul ol, ol ul, ol ol {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-unstyled, .list-inline, .nav {
|
.list-unstyled, .list-inline, .nav {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
@ -433,23 +498,6 @@ ul ul, ul ol, ol ul, ol ol {
|
|||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
dl {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt, dd {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dl-horizontal {
|
.dl-horizontal {
|
||||||
margin-right: -1.5rem;
|
margin-right: -1.5rem;
|
||||||
margin-left: -1.5rem;
|
margin-left: -1.5rem;
|
||||||
@ -462,11 +510,6 @@ dd {
|
|||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
abbr[title], abbr[data-original-title] {
|
|
||||||
cursor: help;
|
|
||||||
border-bottom: 1px dotted #818a91;
|
|
||||||
}
|
|
||||||
|
|
||||||
.initialism {
|
.initialism {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@ -474,7 +517,7 @@ abbr[title], abbr[data-original-title] {
|
|||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
padding: .5rem 1rem;
|
padding: .5rem 1rem;
|
||||||
margin: 0 0 1rem;
|
margin-bottom: 1rem;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
border-left: .25rem solid #eceeef;
|
border-left: .25rem solid #eceeef;
|
||||||
}
|
}
|
||||||
@ -505,10 +548,32 @@ blockquote footer:before {
|
|||||||
content: "\00A0 \2014";
|
content: "\00A0 \2014";
|
||||||
}
|
}
|
||||||
|
|
||||||
address {
|
.img-responsive, .carousel-inner > .carousel-item > img, .carousel-inner > .carousel-item > a > img {
|
||||||
margin-bottom: 1;
|
display: block;
|
||||||
font-style: normal;
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-rounded {
|
||||||
|
border-radius: .3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-thumbnail {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
padding: .25rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: .25rem;
|
||||||
|
-webkit-transition: all .2s ease-in-out;
|
||||||
|
-o-transition: all .2s ease-in-out;
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-circle {
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
code, kbd, pre, samp {
|
code, kbd, pre, samp {
|
||||||
@ -1468,21 +1533,6 @@ pre code {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
caption {
|
|
||||||
padding-top: .75rem;
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
color: #818a91;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
@ -1634,33 +1684,8 @@ th {
|
|||||||
border: 1px solid #eceeef;
|
border: 1px solid #eceeef;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: 1;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: inherit;
|
|
||||||
color: #373a3c;
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: inline-block;
|
margin-bottom: .5rem;
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="search"] {
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"], input[type="checkbox"] {
|
input[type="radio"], input[type="checkbox"] {
|
||||||
@ -1669,19 +1694,6 @@ input[type="radio"], input[type="checkbox"] {
|
|||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="file"] {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
select[multiple], select[size] {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
|
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
|
||||||
outline: thin dotted;
|
outline: thin dotted;
|
||||||
outline: 5px auto -webkit-focus-ring-color;
|
outline: 5px auto -webkit-focus-ring-color;
|
||||||
@ -1689,7 +1701,6 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focu
|
|||||||
}
|
}
|
||||||
|
|
||||||
output {
|
output {
|
||||||
display: block;
|
|
||||||
padding-top: 1.5rem;
|
padding-top: 1.5rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
@ -2095,7 +2106,6 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
|
|||||||
.btn {
|
.btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: .5rem .75rem;
|
padding: .5rem .75rem;
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|||||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,7 +1,7 @@
|
|||||||
<!-- Footer
|
<!-- Footer
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<footer class="bs-docs-footer" role="contentinfo">
|
<footer class="bd-footer" role="contentinfo">
|
||||||
<div class="bs-docs-container">
|
<div class="bd-container">
|
||||||
{% include social-buttons.html %}
|
{% include social-buttons.html %}
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
@ -10,7 +10,7 @@
|
|||||||
Code licensed <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.
|
Code licensed <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<ul class="bs-docs-footer-links text-muted">
|
<ul class="bd-footer-links text-muted">
|
||||||
<li>Currently v{{ site.current_version }}</li>
|
<li>Currently v{{ site.current_version }}</li>
|
||||||
<li>·</li>
|
<li>·</li>
|
||||||
<li><a href="{{ site.repo }}">GitHub</a></li>
|
<li><a href="{{ site.repo }}">GitHub</a></li>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<header class="navbar navbar-static-top bs-docs-sidebar" id="top" role="banner">
|
<header class="navbar navbar-static-top bd-sidebar" id="top" role="banner">
|
||||||
<a href="{{ site.baseurl }}/" class="navbar-brand">
|
<a href="{{ site.baseurl }}/" class="navbar-brand">
|
||||||
Bootstrap
|
Bootstrap
|
||||||
</a>
|
</a>
|
||||||
@ -7,12 +7,12 @@
|
|||||||
☰
|
☰
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<form class="bs-docs-search hidden-sm-down">
|
<form class="bd-search hidden-sm-down">
|
||||||
<input type="text" class="form-control" id="search-input" placeholder="Search...">
|
<input type="text" class="form-control" id="search-input" placeholder="Search...">
|
||||||
<ul class="dropdown-menu bs-docs-search-results" id="search-results"></ul>
|
<ul class="dropdown-menu bd-search-results" id="search-results"></ul>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<nav class="bs-docs-links collapse navbar-toggleable-xs" id="docsNavbarContent">
|
<nav class="bd-links collapse navbar-toggleable-xs" id="docsNavbarContent">
|
||||||
{% for group in site.data.nav %}
|
{% for group in site.data.nav %}
|
||||||
{% assign link = group.pages | first %}
|
{% assign link = group.pages | first %}
|
||||||
{% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
|
{% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
|
||||||
@ -22,18 +22,18 @@
|
|||||||
{% assign active = 'active' %}
|
{% assign active = 'active' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div class="bs-docs-toc-item {{ active }}">
|
<div class="bd-toc-item {{ active }}">
|
||||||
<a class="bs-docs-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ link.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' }}">
|
<a class="bd-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ link.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' }}">
|
||||||
{{ group.title }}
|
{{ group.title }}
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<ul class="nav bs-docs-sidenav">
|
<ul class="nav bd-sidenav">
|
||||||
{% for doc in group.pages %}
|
{% for doc in group.pages %}
|
||||||
{% assign slug = doc.title | downcase | replace: ' ', '-' %}
|
{% assign slug = doc.title | downcase | replace: ' ', '-' %}
|
||||||
{% assign active = nil %}
|
{% assign active = nil %}
|
||||||
|
|
||||||
{% if page.url contains slug %}
|
{% if page.url contains slug %}
|
||||||
{% assign active = 'active bs-docs-sidenav-active' %}
|
{% assign active = 'active bd-sidenav-active' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<li class="{{ active }}">
|
<li class="{{ active }}">
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<div class="bs-docs-social">
|
<div class="bd-social">
|
||||||
<ul class="bs-docs-social-buttons">
|
<ul class="bd-social-buttons">
|
||||||
<li>
|
<li>
|
||||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" width="100" height="20" title="Star on GitHub"></iframe>
|
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" width="100" height="20" title="Star on GitHub"></iframe>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
<!-- Meta, title, CSS, favicons, etc. -->
|
<!-- Meta, title, CSS, favicons, etc. -->
|
||||||
{% include header.html %}
|
{% include header.html %}
|
||||||
</head>
|
</head>
|
||||||
<body class="bs-docs" data-spy="scroll" data-target=".bs-docs-sidenav-active">
|
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
||||||
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<span class="skiplink-text">Skip to main content</span>
|
<span class="skiplink-text">Skip to main content</span>
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
<!-- Meta, title, CSS, favicons, etc. -->
|
<!-- Meta, title, CSS, favicons, etc. -->
|
||||||
{% include header.html %}
|
{% include header.html %}
|
||||||
</head>
|
</head>
|
||||||
<body class="bs-docs-home">
|
<body class="bd-home">
|
||||||
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<span class="skiplink-text">Skip to main content</span>
|
<span class="skiplink-text">Skip to main content</span>
|
||||||
|
|||||||
@ -4,8 +4,8 @@ layout: default
|
|||||||
|
|
||||||
{% include nav-docs.html %}
|
{% include nav-docs.html %}
|
||||||
|
|
||||||
<div class="bs-docs-container bs-docs-content">
|
<div class="bd-container bd-content">
|
||||||
{% include ads.html %}
|
{% include ads.html %}
|
||||||
<h1 class="bs-docs-title">{{ page.title }}</h1>
|
<h1 class="bd-title">{{ page.title }}</h1>
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
29
docs/_plugins/callout.rb
Normal file
29
docs/_plugins/callout.rb
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
# Source: http://stackoverflow.com/questions/19169849/how-to-get-markdown-processed-content-in-jekyll-tag-plugin
|
||||||
|
|
||||||
|
module Jekyll
|
||||||
|
module Tags
|
||||||
|
class CalloutTag < Liquid::Block
|
||||||
|
|
||||||
|
def initialize(tag_name, type, tokens)
|
||||||
|
super
|
||||||
|
@type = type
|
||||||
|
if type == "danger"
|
||||||
|
@type = "danger"
|
||||||
|
elsif type == "warning"
|
||||||
|
@type = "warning"
|
||||||
|
elsif type == "info"
|
||||||
|
@type = "info"
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
def render(context)
|
||||||
|
site = context.registers[:site]
|
||||||
|
converter = site.getConverterImpl(::Jekyll::Converters::Markdown)
|
||||||
|
output = converter.convert(super(context))
|
||||||
|
"<div class=\"bd-callout bd-callout-#{@type}\">#{output}</div>"
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
Liquid::Template.register_tag('callout', Jekyll::Tags::CalloutTag)
|
||||||
@ -55,7 +55,7 @@ eos
|
|||||||
end
|
end
|
||||||
|
|
||||||
def example(output)
|
def example(output)
|
||||||
"<div class=\"bs-example\" data-example-id=\"#{@options[:id]}\">\n#{output}\n</div>"
|
"<div class=\"bd-example\" data-example-id=\"#{@options[:id]}\">\n#{output}\n</div>"
|
||||||
end
|
end
|
||||||
|
|
||||||
def render_rouge(code)
|
def render_rouge(code)
|
||||||
|
|||||||
@ -9,19 +9,19 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline
|
|||||||
|
|
||||||
Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in Helvetica Neue Bold. **Do not use the Twitter bird** in association with Bootstrap.
|
Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in Helvetica Neue Bold. **Do not use the Twitter bird** in association with Bootstrap.
|
||||||
|
|
||||||
<div class="bs-brand-logos">
|
<div class="bd-brand-logos">
|
||||||
<div class="bs-brand-item">
|
<div class="bd-brand-item">
|
||||||
<div class="bs-docs-booticon bs-docs-booticon-lg">B</div>
|
<div class="bd-booticon bd-booticon-lg">B</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bs-brand-item inverse">
|
<div class="bd-brand-item inverse">
|
||||||
<div class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-inverse">B</div>
|
<div class="bd-booticon bd-booticon-lg bd-booticon-inverse">B</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bs-brand-logos">
|
<div class="bd-brand-logos">
|
||||||
<div class="bs-brand-item">
|
<div class="bd-brand-item">
|
||||||
<h1>Bootstrap</h1>
|
<h1>Bootstrap</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="bs-brand-item inverse">
|
<div class="bd-brand-item inverse">
|
||||||
<h1>Bootstrap</h1>
|
<h1>Bootstrap</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -30,14 +30,14 @@ Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Boo
|
|||||||
|
|
||||||
Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.
|
Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.
|
||||||
|
|
||||||
<div class="bs-brand-logos">
|
<div class="bd-brand-logos">
|
||||||
<div class="bs-brand-item">
|
<div class="bd-brand-item">
|
||||||
<img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
|
<img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
|
||||||
</div>
|
</div>
|
||||||
<div class="bs-brand-item inverse">
|
<div class="bd-brand-item inverse">
|
||||||
<img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
|
<img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
|
||||||
</div>
|
</div>
|
||||||
<div class="bs-brand-item inverse">
|
<div class="bd-brand-item inverse">
|
||||||
<img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144">
|
<img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -46,16 +46,16 @@ Download the Bootstrap mark in one of three styles, each available as an SVG fil
|
|||||||
|
|
||||||
The project and framework should always be referred to as **Bootstrap**. No Twitter before it, no capital _s_, and no abbreviations except for one, a capital **B**.
|
The project and framework should always be referred to as **Bootstrap**. No Twitter before it, no capital _s_, and no abbreviations except for one, a capital **B**.
|
||||||
|
|
||||||
<div class="bs-brand-logos">
|
<div class="bd-brand-logos">
|
||||||
<div class="bs-brand-item">
|
<div class="bd-brand-item">
|
||||||
<h3>Bootstrap</h3>
|
<h3>Bootstrap</h3>
|
||||||
<strong class="text-success">Right</strong>
|
<strong class="text-success">Right</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="bs-brand-item">
|
<div class="bd-brand-item">
|
||||||
<h3 class="text-muted">BootStrap</h3>
|
<h3 class="text-muted">BootStrap</h3>
|
||||||
<strong class="text-warning">Wrong</strong>
|
<strong class="text-warning">Wrong</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="bs-brand-item">
|
<div class="bd-brand-item">
|
||||||
<h3 class="text-muted">Twitter Bootstrap</h3>
|
<h3 class="text-muted">Twitter Bootstrap</h3>
|
||||||
<strong class="text-warning">Wrong</strong>
|
<strong class="text-warning">Wrong</strong>
|
||||||
</div>
|
</div>
|
||||||
@ -65,11 +65,11 @@ The project and framework should always be referred to as **Bootstrap**. No Twit
|
|||||||
|
|
||||||
Our docs and branding use a handful of primary colors to differentiate what *is* Bootstrap from what *is in* Bootstrap. In other words, if it's purple, it's representative of Bootstrap.
|
Our docs and branding use a handful of primary colors to differentiate what *is* Bootstrap from what *is in* Bootstrap. In other words, if it's purple, it's representative of Bootstrap.
|
||||||
|
|
||||||
<div class="bs-brand">
|
<div class="bd-brand">
|
||||||
<div class="color-swatches">
|
<div class="color-swatches">
|
||||||
<div class="color-swatch bs-purple"></div>
|
<div class="color-swatch bd-purple"></div>
|
||||||
<div class="color-swatch bs-purple-light"></div>
|
<div class="color-swatch bd-purple-light"></div>
|
||||||
<div class="color-swatch bs-purple-lighter"></div>
|
<div class="color-swatch bd-purple-lighter"></div>
|
||||||
<div class="color-swatch bs-gray"></div>
|
<div class="color-swatch bd-gray"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -5,7 +5,7 @@ title: Team
|
|||||||
|
|
||||||
Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.
|
Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.
|
||||||
|
|
||||||
<div class="list-group bs-team">
|
<div class="list-group bd-team">
|
||||||
{% for member in site.data.core-team %}
|
{% for member in site.data.core-team %}
|
||||||
<div class="list-group-item">
|
<div class="list-group-item">
|
||||||
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user={{ member.user }}&type=follow"></iframe>
|
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user={{ member.user }}&type=follow"></iframe>
|
||||||
|
|||||||
2
docs/assets/css/docs.min.css
vendored
2
docs/assets/css/docs.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
docs/assets/js/docs.min.js
vendored
2
docs/assets/js/docs.min.js
vendored
@ -23,4 +23,4 @@ License: http://opensource.org/licenses/MIT
|
|||||||
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
||||||
* details, see http://creativecommons.org/licenses/by/3.0/.
|
* details, see http://creativecommons.org/licenses/by/3.0/.
|
||||||
*/
|
*/
|
||||||
!function(a){"use strict";a(function(){a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".popover-demo").popover({selector:'[data-toggle="popover"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bs-docs-popover").popover(),a("#loading-example-btn").on("click",function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)}),a("#exampleModal").on("show.bs.modal",function(b){var c=a(b.relatedTarget),d=c.data("whatever"),e=a(this);e.find(".modal-title").text("New message to "+d),e.find(".modal-body input").val(d)}),a(".bs-docs-activate-animated-progressbar").on("click",function(){a(this).prev(".progress-striped").toggleClass("progress-animated")}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';a(this).before(b)});var b=new ZeroClipboard(a(".btn-clipboard")),c=a("#global-zeroclipboard-html-bridge");b.on("load",function(){c.data("placement","top").attr("title","Copy to clipboard").tooltip()}),b.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),b.on("complete",function(){c.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")}),b.on("noflash wrongflash",function(){c.attr("title","Flash required").tooltip("fixTitle").tooltip("show")})})}(jQuery);
|
!function(a){"use strict";a(function(){a(".tooltip-demo").tooltip({selector:'[data-toggle="tooltip"]',container:"body"}),a(".popover-demo").popover({selector:'[data-toggle="popover"]',container:"body"}),a(".tooltip-test").tooltip(),a(".popover-test").popover(),a(".bd-popover").popover(),a("#loading-example-btn").on("click",function(){var b=a(this);b.button("loading"),setTimeout(function(){b.button("reset")},3e3)}),a("#exampleModal").on("show.bs.modal",function(b){var c=a(b.relatedTarget),d=c.data("whatever"),e=a(this);e.find(".modal-title").text("New message to "+d),e.find(".modal-body input").val(d)}),a(".bd-activate-animated-progressbar").on("click",function(){a(this).prev(".progress-striped").toggleClass("progress-animated")}),ZeroClipboard.config({moviePath:"/assets/flash/ZeroClipboard.swf",hoverClass:"btn-clipboard-hover"}),a(".highlight").each(function(){var b='<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';a(this).before(b)});var b=new ZeroClipboard(a(".btn-clipboard")),c=a("#global-zeroclipboard-html-bridge");b.on("load",function(){c.data("placement","top").attr("title","Copy to clipboard").tooltip()}),b.on("dataRequested",function(b){var c=a(this).parent().nextAll(".highlight").first();b.setText(c.text())}),b.on("complete",function(){c.attr("title","Copied!").tooltip("fixTitle").tooltip("show").attr("title","Copy to clipboard").tooltip("fixTitle")}),b.on("noflash wrongflash",function(){c.attr("title","Flash required").tooltip("fixTitle").tooltip("show")})})}(jQuery);
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
// var $body = $(document.body)
|
// var $body = $(document.body)
|
||||||
|
|
||||||
// $body.scrollspy({
|
// $body.scrollspy({
|
||||||
// target: '.active .bs-docs-sidenav'
|
// target: '.active .bd-sidenav'
|
||||||
// })
|
// })
|
||||||
// $window.on('load', function () {
|
// $window.on('load', function () {
|
||||||
// $body.scrollspy('refresh')
|
// $body.scrollspy('refresh')
|
||||||
@ -47,7 +47,7 @@
|
|||||||
$('.popover-test').popover()
|
$('.popover-test').popover()
|
||||||
|
|
||||||
// Popover demos
|
// Popover demos
|
||||||
$('.bs-docs-popover').popover()
|
$('.bd-popover').popover()
|
||||||
|
|
||||||
// Button state demo
|
// Button state demo
|
||||||
$('#loading-example-btn').on('click', function () {
|
$('#loading-example-btn').on('click', function () {
|
||||||
@ -70,7 +70,7 @@
|
|||||||
})
|
})
|
||||||
|
|
||||||
// Activate animated progress bar
|
// Activate animated progress bar
|
||||||
$('.bs-docs-activate-animated-progressbar').on('click', function () {
|
$('.bd-activate-animated-progressbar').on('click', function () {
|
||||||
$(this).prev('.progress-striped').toggleClass('progress-animated')
|
$(this).prev('.progress-striped').toggleClass('progress-animated')
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -129,5 +129,5 @@
|
|||||||
|
|
||||||
;(function () {
|
;(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
addAnchors('.bs-docs-container > h1, .bs-docs-container > h2, .bs-docs-container > h3, .bs-docs-container > h4, .bs-docs-container > h5');
|
addAnchors('.bd-container > h1, .bd-container > h2, .bd-container > h3, .bd-container > h4, .bd-container > h5');
|
||||||
})();
|
})();
|
||||||
|
|||||||
101
docs/assets/scss/_ads.scss
Normal file
101
docs/assets/scss/_ads.scss
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
//
|
||||||
|
// Carbon ads
|
||||||
|
//
|
||||||
|
|
||||||
|
.carbonad {
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
padding: 1.25rem !important;
|
||||||
|
margin: 0 -1rem 2rem !important;
|
||||||
|
overflow: hidden; /* clearfix */
|
||||||
|
font-size: .8rem !important;
|
||||||
|
line-height: 1rem !important;
|
||||||
|
color: $gray !important;
|
||||||
|
text-align: left;
|
||||||
|
background: #f5f5f5 !important;
|
||||||
|
border: 0 !important;
|
||||||
|
// border: solid #e5e5e5 !important;
|
||||||
|
// border-width: 1px 0 !important;
|
||||||
|
}
|
||||||
|
.carbonad-img {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
.carbonad-text,
|
||||||
|
.carbonad-tag {
|
||||||
|
display: block !important;
|
||||||
|
float: none !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
margin-left: 145px !important;
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
|
||||||
|
}
|
||||||
|
.carbonad-text {
|
||||||
|
padding-top: 0 !important;
|
||||||
|
}
|
||||||
|
.carbonad-tag {
|
||||||
|
color: inherit !important;
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
.carbonad-text a,
|
||||||
|
.carbonad-tag a {
|
||||||
|
color: $gray !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $brand-primary !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.carbonad #azcarbon > img {
|
||||||
|
display: none; // hide what I assume are tracking images
|
||||||
|
}
|
||||||
|
|
||||||
|
// In the lighter page headers
|
||||||
|
// .bd-header .carbonad {
|
||||||
|
// color: #777;
|
||||||
|
// background-color: #fff !important;
|
||||||
|
// border-color: #eee !important;
|
||||||
|
// }
|
||||||
|
// .bd-header .carbonad-text a,
|
||||||
|
// .bd-header .carbonad-tag a {
|
||||||
|
// color: $bd-purple !important;
|
||||||
|
// }
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
.carbonad {
|
||||||
|
width: 330px !important;
|
||||||
|
margin: 1.5rem auto !important;
|
||||||
|
border-width: 1px !important;
|
||||||
|
border-radius: .25rem;
|
||||||
|
}
|
||||||
|
.bd-masthead .carbonad {
|
||||||
|
margin: 3rem auto 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
.carbonad {
|
||||||
|
margin-right: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
.carbonad {
|
||||||
|
float: right;
|
||||||
|
width: 330px !important;
|
||||||
|
padding: 1rem !important;
|
||||||
|
margin: .5rem 0 1rem 2rem !important;
|
||||||
|
}
|
||||||
|
.bd-masthead {
|
||||||
|
.carbonad {
|
||||||
|
float: none;
|
||||||
|
margin: 0 !important;
|
||||||
|
// color: $bd-purple-light !important;
|
||||||
|
// background: transparent !important;
|
||||||
|
// border: 1px solid #866ab3 !important;
|
||||||
|
}
|
||||||
|
// .carbonad-text a,
|
||||||
|
// .carbonad-tag a {
|
||||||
|
// color: #fff !important;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,60 +1,98 @@
|
|||||||
/**
|
//
|
||||||
* Store the link icon as a base64 embedded icon font.
|
// Store the link icon as a base64 embedded icon font.
|
||||||
*/
|
//
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'anchorjs-link';
|
font-family: 'anchorjs-icons';
|
||||||
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6v8yoAAAC8AAAAYGNtYXDL8RqdAAABHAAAADxnYXNwAAAAEAAAAVgAAAAIZ2x5Zkm2oNUAAAFgAAABWGhlYWQAHd4cAAACuAAAADZoaGVhB3sECwAAAvAAAAAkaG10eAYAAEcAAAMUAAAADGxvY2EACgCsAAADIAAAAAhtYXhwAAYAcAAAAygAAAAgbmFtZUQXtNYAAANIAAABOXBvc3QAAwAAAAAEhAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAACDmAAPA/8D/wAPAAEAAAAAAAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACACDmAP//AAAAIOYA////4RoCAAEAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAIARwAHA7kDeQA2AG0AAAEnLgEiBg8BDgEUFh8BHgMXNy4DLwEuATQ2PwE+ATIWHwEeARQGDwEeAxU3PgE0JicBLgMnBx4DHwEeARQGDwEOASImLwEuATQ2PwEuAzUHDgEUFh8BHgEyNj8BPgE0Ji8BA7kEI1ldWiPaIyQkIwQDBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMk/r4DBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMkBCNZXVoj2iMkJCMEA3UEJCMjJNojWV1aIwQDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkj/sYDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkjBCQjIyTaI1ldWiMEAAEAAAABAABR/4xQXw889QALBAAAAAAAzqNM0wAAAADOo0zTAAAAAAO5A3kAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAABHA7kAAQAAAAAAAAAAAAAAAAAAAAMAAAAAAgAAAAQAAEcAAAAAAAoArAABAAAAAwBuAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADAALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
|
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6v8yoAAAC8AAAAYGNtYXDL8RqdAAABHAAAADxnYXNwAAAAEAAAAVgAAAAIZ2x5Zkm2oNUAAAFgAAABWGhlYWQAHd4cAAACuAAAADZoaGVhB3sECwAAAvAAAAAkaG10eAYAAEcAAAMUAAAADGxvY2EACgCsAAADIAAAAAhtYXhwAAYAcAAAAygAAAAgbmFtZUQXtNYAAANIAAABOXBvc3QAAwAAAAAEhAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAACDmAAPA/8D/wAPAAEAAAAAAAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACACDmAP//AAAAIOYA////4RoCAAEAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAIARwAHA7kDeQA2AG0AAAEnLgEiBg8BDgEUFh8BHgMXNy4DLwEuATQ2PwE+ATIWHwEeARQGDwEeAxU3PgE0JicBLgMnBx4DHwEeARQGDwEOASImLwEuATQ2PwEuAzUHDgEUFh8BHgEyNj8BPgE0Ji8BA7kEI1ldWiPaIyQkIwQDBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMk/r4DBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMkBCNZXVoj2iMkJCMEA3UEJCMjJNojWV1aIwQDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkj/sYDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkjBCQjIyTaI1ldWiMEAAEAAAABAABR/4xQXw889QALBAAAAAAAzqNM0wAAAADOo0zTAAAAAAO5A3kAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAABHA7kAAQAAAAAAAAAAAAAAAAAAAAMAAAAAAgAAAAQAAEcAAAAAAAoArAABAAAAAwBuAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADAALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
|
||||||
url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATwAAsAAAAABKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDq/zKmNtYXAAAAFoAAAAPAAAADzL8RqdZ2FzcAAAAaQAAAAIAAAACAAAABBnbHlmAAABrAAAAVgAAAFYSbag1WhlYWQAAAMEAAAANgAAADYAHd4caGhlYQAAAzwAAAAkAAAAJAd7BAtobXR4AAADYAAAAAwAAAAMBgAAR2xvY2EAAANsAAAACAAAAAgACgCsbWF4cAAAA3QAAAAgAAAAIAAGAHBuYW1lAAADlAAAATkAAAE5RBe01nBvc3QAAATQAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAg5gADwP/A/8ADwABAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAoAAAABgAEAAEAAgAg5gD//wAAACDmAP///+EaAgABAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAACAEcABwO5A3kANgBtAAABJy4BIgYPAQ4BFBYfAR4DFzcuAy8BLgE0Nj8BPgEyFh8BHgEUBg8BHgMVNz4BNCYnAS4DJwceAx8BHgEUBg8BDgEiJi8BLgE0Nj8BLgM1Bw4BFBYfAR4BMjY/AT4BNCYvAQO5BCNZXVoj2iMkJCMEAwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJP6+AwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJAQjWV1aI9ojJCQjBAN1BCQjIyTaI1ldWiMEAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZI/7GAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZIwQkIyMk2iNZXVojBAABAAAAAQAAUf+MUF8PPPUACwQAAAAAAM6jTNMAAAAAzqNM0wAAAAADuQN5AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAARwO5AAEAAAAAAAAAAAAAAAAAAAADAAAAAAIAAAAEAABHAAAAAAAKAKwAAQAAAAMAbgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAwAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
|
url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATwAAsAAAAABKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDq/zKmNtYXAAAAFoAAAAPAAAADzL8RqdZ2FzcAAAAaQAAAAIAAAACAAAABBnbHlmAAABrAAAAVgAAAFYSbag1WhlYWQAAAMEAAAANgAAADYAHd4caGhlYQAAAzwAAAAkAAAAJAd7BAtobXR4AAADYAAAAAwAAAAMBgAAR2xvY2EAAANsAAAACAAAAAgACgCsbWF4cAAAA3QAAAAgAAAAIAAGAHBuYW1lAAADlAAAATkAAAE5RBe01nBvc3QAAATQAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAg5gADwP/A/8ADwABAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAoAAAABgAEAAEAAgAg5gD//wAAACDmAP///+EaAgABAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAACAEcABwO5A3kANgBtAAABJy4BIgYPAQ4BFBYfAR4DFzcuAy8BLgE0Nj8BPgEyFh8BHgEUBg8BHgMVNz4BNCYnAS4DJwceAx8BHgEUBg8BDgEiJi8BLgE0Nj8BLgM1Bw4BFBYfAR4BMjY/AT4BNCYvAQO5BCNZXVoj2iMkJCMEAwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJP6+AwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJAQjWV1aI9ojJCQjBAN1BCQjIyTaI1ldWiMEAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZI/7GAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZIwQkIyMk2iNZXVojBAABAAAAAQAAUf+MUF8PPPUACwQAAAAAAM6jTNMAAAAAzqNM0wAAAAADuQN5AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAARwO5AAEAAAAAAAAAAAAAAAAAAAADAAAAAAIAAAAEAABHAAAAAAAKAKwAAQAAAAMAbgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAwAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.anchorjs-icon {
|
.anchorjs-icon {
|
||||||
font-family: 'anchorjs-link';
|
font-family: 'anchorjs-icons';
|
||||||
speak: none;
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: normal;
|
|
||||||
font-variant: normal;
|
font-variant: normal;
|
||||||
text-transform: none;
|
font-weight: normal;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
speak: none;
|
||||||
|
text-transform: none;
|
||||||
|
|
||||||
/* Better Icon Rendering */
|
// Better Icon Rendering
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
//
|
||||||
* Link placement and hover behavior.
|
// Link placement and hover behavior.
|
||||||
*/
|
//
|
||||||
|
.anchorjs-link {
|
||||||
|
opacity: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
*:hover > .anchorjs-link,
|
||||||
|
.anchorjs-link:focus {
|
||||||
|
// To fade links as they appear, change transition-property from 'color' to 'all'
|
||||||
|
opacity: 1;
|
||||||
|
transition: color .16s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Make screen-reader friendly description text visually hidden.
|
||||||
|
//
|
||||||
|
.anchorjs-description {
|
||||||
|
border: 0;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
height: 1px;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Reasonable default styles.
|
||||||
|
// Feel free to override or replace these with your own.
|
||||||
|
//
|
||||||
|
// .anchorjs-link:link { color: #DFD487; }
|
||||||
|
// .anchorjs-link:visited { color: #DFD487; }
|
||||||
|
// .anchorjs-link:hover { color: #EC7963; }
|
||||||
|
// .anchorjs-link:active { color: #EC7963; }
|
||||||
|
|
||||||
.anchorjs-link {
|
.anchorjs-link {
|
||||||
float: left;
|
float: left;
|
||||||
width: 1em;
|
width: 1.2em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
|
padding-right: .2em;
|
||||||
|
margin-top: .25em;
|
||||||
margin-left: -1.2em;
|
margin-left: -1.2em;
|
||||||
opacity: 0;
|
font-size: 70%;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
*:hover > .anchorjs-link:hover {
|
||||||
|
color: $brand-primary;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
// .anchorjs-icon {
|
||||||
|
// font-size: 90%;
|
||||||
|
// padding-left: 6px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.anchorjs-icon:before {
|
||||||
|
content: '\e600';
|
||||||
|
// alternative icons -- uncomment to use
|
||||||
|
//
|
||||||
|
// content: '#';
|
||||||
|
// content: '¶';
|
||||||
|
// content: '❡';
|
||||||
|
// content: '§';
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(sm) {
|
||||||
.anchorjs-link {
|
.anchorjs-link {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
*:hover > .anchorjs-link,
|
|
||||||
.anchorjs-link:focus {
|
|
||||||
opacity: .75;
|
|
||||||
transition: color .16s linear;
|
|
||||||
}
|
|
||||||
*:hover > .anchorjs-link:hover {
|
|
||||||
opacity: 1;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.anchorjs-icon {
|
|
||||||
font-size: 60%;
|
|
||||||
vertical-align: .2em;
|
|
||||||
}
|
|
||||||
.anchorjs-icon:before {
|
|
||||||
content: "\e600";
|
|
||||||
}
|
|
||||||
|
|||||||
25
docs/assets/scss/_booticon.scss
Normal file
25
docs/assets/scss/_booticon.scss
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
//
|
||||||
|
// Bootstrap "B" Booticon
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-booticon {
|
||||||
|
display: block;
|
||||||
|
width: 9rem;
|
||||||
|
height: 9rem;
|
||||||
|
font-size: 6.5rem;
|
||||||
|
line-height: 9rem;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
cursor: default;
|
||||||
|
background-color: $bd-purple;
|
||||||
|
border-radius: 15%;
|
||||||
|
|
||||||
|
&.inverse {
|
||||||
|
color: $bd-purple;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
&.outline {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid $bd-purple-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
108
docs/assets/scss/_brand.scss
Normal file
108
docs/assets/scss/_brand.scss
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
//
|
||||||
|
// Brand guidelines
|
||||||
|
//
|
||||||
|
|
||||||
|
// Logo series wrapper
|
||||||
|
.bd-brand-logos {
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #563d7c;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Individual items
|
||||||
|
.bd-brand-item {
|
||||||
|
padding: 4rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bd-brand-item + .bd-brand-item {
|
||||||
|
border-top: 1px solid #fff;
|
||||||
|
}
|
||||||
|
.bd-brand-logos .inverse {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #563d7c;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Heading content within
|
||||||
|
.bd-brand-item h1,
|
||||||
|
.bd-brand-item h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.bd-brand-item .bd-booticon {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make the icons stand out on what is/isn't okay
|
||||||
|
// .bd-brand-item .glyphicon {
|
||||||
|
// width: 30px;
|
||||||
|
// height: 30px;
|
||||||
|
// margin: 10px auto -10px;
|
||||||
|
// line-height: 30px;
|
||||||
|
// color: #fff;
|
||||||
|
// border-radius: 50%;
|
||||||
|
// }
|
||||||
|
// .bd-brand-item .glyphicon-ok {
|
||||||
|
// background-color: #5cb85c;
|
||||||
|
// }
|
||||||
|
// .bd-brand-item .glyphicon-remove {
|
||||||
|
// background-color: #d9534f;
|
||||||
|
// }
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.bd-brand-item {
|
||||||
|
display: table-cell;
|
||||||
|
width: 1%;
|
||||||
|
}
|
||||||
|
.bd-brand-item + .bd-brand-item {
|
||||||
|
border-top: 0;
|
||||||
|
border-left: 1px solid #fff;
|
||||||
|
}
|
||||||
|
.bd-brand-item h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Color swatches
|
||||||
|
//
|
||||||
|
|
||||||
|
.color-swatches {
|
||||||
|
margin: 0 -5px;
|
||||||
|
overflow: hidden; // clearfix
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-swatch {
|
||||||
|
float: left;
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
margin-right: .25rem;
|
||||||
|
margin-left: .25rem;
|
||||||
|
border-radius: .25rem;
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
width: 6rem;
|
||||||
|
height: 6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Docs colors
|
||||||
|
.color-swatches {
|
||||||
|
.bd-purple {
|
||||||
|
background-color: $bd-purple;
|
||||||
|
}
|
||||||
|
.bd-purple-light {
|
||||||
|
background-color: $bd-purple-light;
|
||||||
|
}
|
||||||
|
.bd-purple-lighter {
|
||||||
|
background-color: #e5e1ea;
|
||||||
|
}
|
||||||
|
.bd-gray {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
12
docs/assets/scss/_browser-bugs.scss
Normal file
12
docs/assets/scss/_browser-bugs.scss
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
// Wall of Browser Bugs
|
||||||
|
//
|
||||||
|
// Better display for the responsive table on the Wall of Browser Bugs.
|
||||||
|
|
||||||
|
.bd-browser-bugs {
|
||||||
|
td p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
th:first-child {
|
||||||
|
width: 18%;
|
||||||
|
}
|
||||||
|
}
|
||||||
32
docs/assets/scss/_buttons.scss
Normal file
32
docs/assets/scss/_buttons.scss
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
// Buttons
|
||||||
|
//
|
||||||
|
// Custom buttons for the docs.
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
color: $bd-purple;
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: $bd-purple;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
color: #fff;
|
||||||
|
background-color:$bd-purple;
|
||||||
|
border-color: $bd-purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-inverse {
|
||||||
|
color: #fff;
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: $bd-purple-light;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
color: $bd-purple;
|
||||||
|
text-shadow: none;
|
||||||
|
background-color: #fff;
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
36
docs/assets/scss/_callouts.scss
Normal file
36
docs/assets/scss/_callouts.scss
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
//
|
||||||
|
// Callouts
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-callout {
|
||||||
|
padding: 1.25rem;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-left-width: .25rem;
|
||||||
|
border-radius: .25rem;
|
||||||
|
}
|
||||||
|
.bd-callout h4 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
}
|
||||||
|
.bd-callout p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.bd-callout code {
|
||||||
|
border-radius: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-callout + .bd-callout {
|
||||||
|
margin-top: -.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Variations
|
||||||
|
@mixin bs-callout-variant($color) {
|
||||||
|
border-left-color: $color;
|
||||||
|
|
||||||
|
h4 { color: $color; }
|
||||||
|
}
|
||||||
|
.bd-callout-info { @include bs-callout-variant($bd-info); }
|
||||||
|
.bd-callout-warning { @include bs-callout-variant($bd-warning); }
|
||||||
|
.bd-callout-danger { @include bs-callout-variant($bd-danger); }
|
||||||
326
docs/assets/scss/_component-examples.scss
Normal file
326
docs/assets/scss/_component-examples.scss
Normal file
@ -0,0 +1,326 @@
|
|||||||
|
//
|
||||||
|
// Grid examples
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-example > .row {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.bd-example > .row > [class^="col-"] {
|
||||||
|
padding-top: .75rem;
|
||||||
|
padding-bottom: .75rem;
|
||||||
|
background-color: rgba(86,61,124,.15);
|
||||||
|
border: 1px solid rgba(86,61,124,.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Docs examples
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-example {
|
||||||
|
position: relative;
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 1rem -1rem;
|
||||||
|
border: solid #f7f7f9;
|
||||||
|
border-width: .2rem 0 0;
|
||||||
|
@include clearfix();
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: -1rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-width: .2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
+ p {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Undo width of container
|
||||||
|
.container {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Card examples should be horizontal
|
||||||
|
> .card {
|
||||||
|
float: left;
|
||||||
|
max-width: 15rem;
|
||||||
|
margin: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .nav + .nav,
|
||||||
|
> .alert + .alert,
|
||||||
|
> .progress + .progress {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .dropdown-menu:first-child {
|
||||||
|
position: static;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Tweak content of examples for optimum awesome
|
||||||
|
.bd-example > *:last-child,
|
||||||
|
.bd-example > .table-responsive:last-child > .table {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
.bd-example > .close {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
.bd-example-type .table .type-info {
|
||||||
|
color: #999;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.bd-example-type .table td {
|
||||||
|
padding: 1rem 0;
|
||||||
|
border-color: #eee;
|
||||||
|
}
|
||||||
|
.bd-example-type .table tr:first-child td {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
.bd-example-type h1,
|
||||||
|
.bd-example-type h2,
|
||||||
|
.bd-example-type h3,
|
||||||
|
.bd-example-type h4,
|
||||||
|
.bd-example-type h5,
|
||||||
|
.bd-example-type h6 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Contextual background colors
|
||||||
|
.bd-example-bg-classes p {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Images
|
||||||
|
.bd-example > img {
|
||||||
|
+ img {
|
||||||
|
margin-left: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// .bd-example > .img-circle,
|
||||||
|
// .bd-example > .img-rounded,
|
||||||
|
// .bd-example > .img-thumbnail {
|
||||||
|
// margin: .25rem;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// Tables
|
||||||
|
// .bd-example > .table-responsive > .table {
|
||||||
|
// background-color: #fff;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
.bd-example > .btn-group {
|
||||||
|
margin-top: .25rem;
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
}
|
||||||
|
.bd-example > .btn-toolbar + .btn-toolbar {
|
||||||
|
margin-top: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Forms
|
||||||
|
.bd-example-control-sizing select,
|
||||||
|
.bd-example-control-sizing input[type="text"] + input[type="text"] {
|
||||||
|
margin-top: .5rem;
|
||||||
|
}
|
||||||
|
.bd-example-form .input-group {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
.bd-example > textarea.form-control {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
// List groups
|
||||||
|
.bd-example > .list-group {
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navbars
|
||||||
|
.bd-example .navbar:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.bd-navbar-top-example,
|
||||||
|
.bd-navbar-bottom-example {
|
||||||
|
z-index: 1;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden; // cut the drop shadows off
|
||||||
|
}
|
||||||
|
.bd-navbar-top-example .navbar-header,
|
||||||
|
.bd-navbar-bottom-example .navbar-header {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.bd-navbar-top-example .navbar-fixed-top,
|
||||||
|
.bd-navbar-bottom-example .navbar-fixed-bottom {
|
||||||
|
position: relative;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.bd-navbar-top-example {
|
||||||
|
padding-bottom: 45px;
|
||||||
|
}
|
||||||
|
.bd-navbar-top-example .navbar-fixed-top {
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
.bd-navbar-bottom-example {
|
||||||
|
padding-top: 45px;
|
||||||
|
}
|
||||||
|
.bd-navbar-bottom-example .navbar-fixed-bottom {
|
||||||
|
bottom: -1px;
|
||||||
|
}
|
||||||
|
.bd-navbar-bottom-example .navbar {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.bd-navbar-top-example .navbar-fixed-top,
|
||||||
|
.bd-navbar-bottom-example .navbar-fixed-bottom {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
.bd-example .pagination {
|
||||||
|
margin-top: .5rem;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pager
|
||||||
|
.bd-example > .pager {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Example modals
|
||||||
|
.bd-example-modal {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
.bd-example-modal .modal {
|
||||||
|
position: relative;
|
||||||
|
top: auto;
|
||||||
|
right: auto;
|
||||||
|
bottom: auto;
|
||||||
|
left: auto;
|
||||||
|
z-index: 1;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.bd-example-modal .modal-dialog {
|
||||||
|
left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Example dropdowns
|
||||||
|
.bd-example > .dropdown > .dropdown-toggle {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.bd-example > .dropdown > .dropdown-menu {
|
||||||
|
position: static;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Example tabbable tabs
|
||||||
|
.bd-example-tabs .nav-tabs {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tooltips
|
||||||
|
.bd-example-tooltips {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bd-example-tooltips > .btn {
|
||||||
|
margin-top: .25rem;
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Popovers
|
||||||
|
.bd-example-popover {
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
.bd-example-popover .popover {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
width: 260px;
|
||||||
|
margin: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tooltips
|
||||||
|
.bd-example-tooltip .tooltip {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 10px 20px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scrollspy demo on fixed height div
|
||||||
|
.scrollspy-example {
|
||||||
|
position: relative;
|
||||||
|
height: 200px;
|
||||||
|
margin-top: .5rem;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helpers
|
||||||
|
.bd-example > {
|
||||||
|
.center-block:not(img) {
|
||||||
|
max-width: 200px;
|
||||||
|
padding: .5rem;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-primary,
|
||||||
|
.bg-success,
|
||||||
|
.bg-info,
|
||||||
|
.bg-warning,
|
||||||
|
.bg-danger {
|
||||||
|
padding: .5rem;
|
||||||
|
margin-top: .5rem;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Code snippets
|
||||||
|
//
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 1rem -1rem;
|
||||||
|
background-color: #f7f7f9;
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.highlight pre {
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.highlight pre code {
|
||||||
|
font-size: inherit;
|
||||||
|
color: $gray-dark; // Effectively the base text color
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Pseudo focus
|
||||||
|
//
|
||||||
|
// Custom `:focus` state for showing how it looks in the docs.
|
||||||
|
|
||||||
|
#focusedInput {
|
||||||
|
border-color: $input-border-focus;
|
||||||
|
outline: 0;
|
||||||
|
outline: thin dotted \9; // IE9
|
||||||
|
box-shadow: 0 0 .5rem $input-box-shadow-focus;
|
||||||
|
}
|
||||||
24
docs/assets/scss/_examples.scss
Normal file
24
docs/assets/scss/_examples.scss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
//
|
||||||
|
// Examples
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-examples .img-thumbnail {
|
||||||
|
margin-bottom: .75rem;
|
||||||
|
}
|
||||||
|
.bd-examples h4 {
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
}
|
||||||
|
.bd-examples p {
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.bd-examples {
|
||||||
|
margin-right: -.75rem;
|
||||||
|
margin-left: -.75rem;
|
||||||
|
}
|
||||||
|
.bd-examples > [class^="col-"] {
|
||||||
|
padding-right: .75rem;
|
||||||
|
padding-left: .75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
29
docs/assets/scss/_footer.scss
Normal file
29
docs/assets/scss/_footer.scss
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
//
|
||||||
|
// Footer
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-footer {
|
||||||
|
padding-top: 2rem;
|
||||||
|
margin-top: 6rem;
|
||||||
|
font-size: 85%;
|
||||||
|
color: #777;
|
||||||
|
border-top: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
.bd-footer-links {
|
||||||
|
padding-left: 0;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.bd-footer-links li {
|
||||||
|
display: inline;
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
.bd-footer-links li:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.bd-footer p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
249
docs/assets/scss/_homepage.scss
Normal file
249
docs/assets/scss/_homepage.scss
Normal file
@ -0,0 +1,249 @@
|
|||||||
|
//
|
||||||
|
// Home navigation
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-nav-home {
|
||||||
|
margin-bottom: 0;
|
||||||
|
background-color: #563d7c;
|
||||||
|
border-bottom: 0;
|
||||||
|
|
||||||
|
.navbar-brand > a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #cdbfe3;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0,0,0,.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// .bd-nav-home .navbar-toggle .icon-bar {
|
||||||
|
// background-color: #fff;
|
||||||
|
// }
|
||||||
|
// .bd-nav-home .navbar-header .navbar-toggle {
|
||||||
|
// border-color: #322f38;
|
||||||
|
// }
|
||||||
|
// .bd-nav-home .navbar-header .navbar-toggle:hover,
|
||||||
|
// .bd-nav-home .navbar-header .navbar-toggle:focus {
|
||||||
|
// background-color: #29262f;
|
||||||
|
// border-color: #29262f;
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Homepage
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-header {
|
||||||
|
@include clearfix;
|
||||||
|
padding-bottom: .5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,.25);
|
||||||
|
|
||||||
|
.bd-header-mark {
|
||||||
|
float: left;
|
||||||
|
padding-top: .6em;
|
||||||
|
padding-bottom: .6em;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-header-nav {
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Masthead (headings and download button)
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-masthead {
|
||||||
|
position: relative;
|
||||||
|
padding: 2rem 0;
|
||||||
|
// color: #cdbfe3;
|
||||||
|
// text-align: center;
|
||||||
|
// text-shadow: 0 1px 0 rgba(0,0,0,.1);
|
||||||
|
// background-color: #6f5499;
|
||||||
|
// @include gradient-vertical($bd-purple, #6f5499);
|
||||||
|
// background-image: linear-gradient(135deg, #a8b7be, #cdd1d4, #d4d5d7, #cecfd1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-masthead .bd-booticon {
|
||||||
|
margin: 0 0 2rem;
|
||||||
|
color: $gray;
|
||||||
|
border-color: $gray;
|
||||||
|
}
|
||||||
|
.bd-masthead h1 {
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1;
|
||||||
|
// color: #fff;
|
||||||
|
}
|
||||||
|
.bd-masthead .lead {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
// color: #fff;
|
||||||
|
}
|
||||||
|
.bd-masthead .version {
|
||||||
|
margin-top: -1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
// color: #9783b9;
|
||||||
|
}
|
||||||
|
.bd-masthead .btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: $gray;
|
||||||
|
border-color: $gray;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: $gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 480px) {
|
||||||
|
.bd-masthead .btn {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.bd-masthead {
|
||||||
|
padding: 2rem 0 4rem;
|
||||||
|
// padding: 5rem 0;
|
||||||
|
}
|
||||||
|
.bd-header {
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
.bd-masthead h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
.bd-masthead .lead {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.bd-masthead .lead {
|
||||||
|
width: 80%;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Homepage featurettes
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-featurette {
|
||||||
|
padding-top: 3rem;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #555;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fff;
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
.bd-featurette + .bd-footer {
|
||||||
|
margin-top: 0;
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-featurette-title {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.half-rule {
|
||||||
|
width: 6rem;
|
||||||
|
margin: 2.5rem auto;
|
||||||
|
}
|
||||||
|
.bd-featurette h4 {
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.bd-featurette-img {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.bd-featurette-img:hover {
|
||||||
|
color: $brand-primary;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.bd-featurette-img img {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 480px) {
|
||||||
|
.bd-featurette .img-responsive {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.bd-featurette {
|
||||||
|
padding-top: 6rem;
|
||||||
|
padding-bottom: 6rem;
|
||||||
|
}
|
||||||
|
.bd-featurette-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
.bd-featurette .lead {
|
||||||
|
max-width: 80%;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.bd-featurette .img-responsive {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Featured Expo sites
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-featured-sites {
|
||||||
|
margin-right: -1px;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
.bd-featured-sites .col-xs-6 {
|
||||||
|
padding: 1px;
|
||||||
|
}
|
||||||
|
.bd-featured-sites .img-responsive {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.bd-featured-sites .col-sm-3:first-child img {
|
||||||
|
border-top-left-radius: .25rem;
|
||||||
|
border-bottom-left-radius: .25rem;
|
||||||
|
}
|
||||||
|
.bd-featured-sites .col-sm-3:last-child img {
|
||||||
|
border-top-right-radius: .25rem;
|
||||||
|
border-bottom-right-radius: .25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
81
docs/assets/scss/_layout.scss
Normal file
81
docs/assets/scss/_layout.scss
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
// Custom container
|
||||||
|
//
|
||||||
|
// Doesn't use the default `.container` styles for easier modifications.
|
||||||
|
|
||||||
|
.bd-container {
|
||||||
|
position: relative;
|
||||||
|
max-width: 62rem;
|
||||||
|
padding: 0 1rem 1rem;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
padding: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
> table {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
margin-bottom: $spacer;
|
||||||
|
// border: 1px solid $table-border-color;
|
||||||
|
|
||||||
|
// Cells
|
||||||
|
> thead,
|
||||||
|
> tbody,
|
||||||
|
> tfoot {
|
||||||
|
> tr {
|
||||||
|
> th,
|
||||||
|
> td {
|
||||||
|
padding: $table-cell-padding;
|
||||||
|
line-height: $line-height-base;
|
||||||
|
vertical-align: top;
|
||||||
|
// border-top: 1px solid $table-border-color;
|
||||||
|
border: 1px solid $table-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prevent breaking of code (e.g., Grunt tasks list)
|
||||||
|
td:first-child > code {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Docs sections
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-content {
|
||||||
|
> h2 {
|
||||||
|
margin-top: 3rem;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
> h3 {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul li,
|
||||||
|
> ol li {
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-title {
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
font-size: 4rem;
|
||||||
|
|
||||||
|
+ p {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
45
docs/assets/scss/_page-header.scss
Normal file
45
docs/assets/scss/_page-header.scss
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
//
|
||||||
|
// Page headers
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-header {
|
||||||
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
background-color: $bd-purple;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-weight: 300;
|
||||||
|
color: rgba(255,255,255,.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
padding-top: 4rem;
|
||||||
|
padding-bottom: 4rem;
|
||||||
|
|
||||||
|
h1,
|
||||||
|
p {
|
||||||
|
margin-right: 380px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
92
docs/assets/scss/_responsive-tests.scss
Normal file
92
docs/assets/scss/_responsive-tests.scss
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
//
|
||||||
|
// Responsive tests
|
||||||
|
//
|
||||||
|
|
||||||
|
// Responsive (scrollable) doc tables
|
||||||
|
.table-responsive .highlight pre {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Utility classes table
|
||||||
|
.bd-table th small,
|
||||||
|
.responsive-utilities th small {
|
||||||
|
display: block;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.responsive-utilities tbody th {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.responsive-utilities td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.responsive-utilities td.is-visible {
|
||||||
|
color: #468847;
|
||||||
|
background-color: #dff0d8 !important;
|
||||||
|
}
|
||||||
|
.responsive-utilities td.is-hidden {
|
||||||
|
color: #ccc;
|
||||||
|
background-color: #f9f9f9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive tests
|
||||||
|
.responsive-utilities-test {
|
||||||
|
margin-top: .25rem;
|
||||||
|
}
|
||||||
|
.responsive-utilities-test .col-xs-6 {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
.responsive-utilities-test span {
|
||||||
|
display: block;
|
||||||
|
padding: 1rem .5rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.1;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: .25rem;
|
||||||
|
}
|
||||||
|
.visible-on,
|
||||||
|
.hidden-on {
|
||||||
|
.col-xs-6 {
|
||||||
|
> .not-visible {
|
||||||
|
color: #999;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.visible-on,
|
||||||
|
.hidden-on {
|
||||||
|
.col-xs-6 {
|
||||||
|
.visible {
|
||||||
|
color: #468847;
|
||||||
|
background-color: #dff0d8;
|
||||||
|
border: 1px solid #d6e9c6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-only(xs) {
|
||||||
|
.hidden-xs-only {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include media-breakpoint-only(sm) {
|
||||||
|
.hidden-sm-only {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include media-breakpoint-only(md) {
|
||||||
|
.hidden-md-only {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include media-breakpoint-only(lg) {
|
||||||
|
.hidden-lg-only {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include media-breakpoint-only(xl) {
|
||||||
|
.hidden-xl-only {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
203
docs/assets/scss/_sidebar.scss
Normal file
203
docs/assets/scss/_sidebar.scss
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
//
|
||||||
|
// Side navigation
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-sidebar {
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
// background-color: #322f38;
|
||||||
|
|
||||||
|
.navbar-toggler {
|
||||||
|
position: absolute;
|
||||||
|
top: 1.25rem;
|
||||||
|
right: 0;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-sidebar .navbar-toggle .icon-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-sidebar .navbar-header {
|
||||||
|
float: none;
|
||||||
|
margin-right: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-sidebar .navbar-collapse {
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.bd-docs {
|
||||||
|
padding-left: 240px;
|
||||||
|
}
|
||||||
|
.bd-sidebar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 100; // Ensure scrolling always works in Safari
|
||||||
|
width: 240px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
// @include gradient-vertical(#29262f, #322f38);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-sidebar .navbar-brand {
|
||||||
|
display: block;
|
||||||
|
float: none;
|
||||||
|
height: auto;
|
||||||
|
padding: 1.75rem 1.25rem;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1;
|
||||||
|
// color: #fff;
|
||||||
|
}
|
||||||
|
.bd-sidebar-brand:hover,
|
||||||
|
.bd-sidebar-brand:focus {
|
||||||
|
// color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-search {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// .form-control {
|
||||||
|
// width: 12rem;
|
||||||
|
// }
|
||||||
|
|
||||||
|
margin-right: 1.25rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
margin-left: 1.25rem;
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
height: 2.45rem;
|
||||||
|
padding-top: .4rem;
|
||||||
|
padding-bottom: .4rem;
|
||||||
|
// color: rgba(255,255,255,.5);
|
||||||
|
// background-color: lighten(#29262f, 10%);
|
||||||
|
// border-color: lighten(#29262f, 15%);
|
||||||
|
|
||||||
|
// &:focus {
|
||||||
|
// border-color: rgba(255,255,255,.25);
|
||||||
|
// box-shadow: 0 0 .5rem rgba(255,255,255,.25);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-search-results {
|
||||||
|
top: 108%;
|
||||||
|
right: 0;
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: .9rem;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
> li > a {
|
||||||
|
padding-left: .75rem;
|
||||||
|
padding-right: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
> li:first-child { margin-top: .25rem; }
|
||||||
|
> li:last-child { margin-bottom: .25rem; }
|
||||||
|
|
||||||
|
> .no-results {
|
||||||
|
padding: .75rem 1rem;
|
||||||
|
color: #7a7a7a;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.bd-sidenav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-toc-link {
|
||||||
|
display: block;
|
||||||
|
padding: .25rem 1.25rem;
|
||||||
|
color: $gray;
|
||||||
|
// font-size: 1rem;
|
||||||
|
// color: #fff;
|
||||||
|
}
|
||||||
|
.bd-toc-link:hover,
|
||||||
|
.bd-toc-link:focus {
|
||||||
|
// color: $bd-yellow;
|
||||||
|
color: $brand-primary;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.active > .bd-toc-link {
|
||||||
|
font-weight: 500;
|
||||||
|
color: $gray-dark;
|
||||||
|
// color: $bd-yellow;
|
||||||
|
}
|
||||||
|
.active > .bd-sidenav {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-toc-item.active {
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.bd-toc-item:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.bd-toc-item:last-child {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// All levels of nav
|
||||||
|
.bd-sidebar .nav > li > a {
|
||||||
|
display: block;
|
||||||
|
padding: .25rem 1.25rem;
|
||||||
|
font-size: 90%;
|
||||||
|
color: #99979c;
|
||||||
|
}
|
||||||
|
.bd-sidebar .nav > li > a:hover,
|
||||||
|
.bd-sidebar .nav > li > a:focus {
|
||||||
|
color: $brand-primary;
|
||||||
|
// color: $bd-yellow;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.bd-sidebar .nav > .active > a,
|
||||||
|
.bd-sidebar .nav > .active:hover > a,
|
||||||
|
.bd-sidebar .nav > .active:focus > a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: $gray-dark;
|
||||||
|
// color: $bd-yellow;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Nav: second level (shown on .active)
|
||||||
|
.bd-sidebar .nav .nav {
|
||||||
|
display: none; // Hide by default, but at >768px, show it
|
||||||
|
padding-bottom: .75rem;
|
||||||
|
}
|
||||||
|
.bd-sidebar .nav .nav > li > a {
|
||||||
|
padding-top: 1px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
padding-left: 2rem;
|
||||||
|
font-size: 75%;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.bd-sidebar .nav .nav > .active > a,
|
||||||
|
.bd-sidebar .nav .nav > .active:hover > a,
|
||||||
|
.bd-sidebar .nav .nav > .active:focus > a {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-sidebar .nav > .active > .nav {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.bd-sidebar .nav .nav > li > a {
|
||||||
|
padding-top: .125rem;
|
||||||
|
padding-bottom: .125rem;
|
||||||
|
padding-left: 2rem;
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
31
docs/assets/scss/_social-buttons.scss
Normal file
31
docs/assets/scss/_social-buttons.scss
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
//
|
||||||
|
// Social buttons
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-social {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
margin-left: -.5rem;
|
||||||
|
}
|
||||||
|
.bd-social-buttons {
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.bd-social-buttons li {
|
||||||
|
display: inline-block;
|
||||||
|
padding: .25rem .5rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.bd-social-buttons .twitter-follow-button {
|
||||||
|
width: 225px !important;
|
||||||
|
}
|
||||||
|
.bd-social-buttons .twitter-share-button {
|
||||||
|
width: 98px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style the GitHub buttons via CSS instead of inline attributes
|
||||||
|
.github-btn {
|
||||||
|
overflow: hidden;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
26
docs/assets/scss/_team.scss
Normal file
26
docs/assets/scss/_team.scss
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
//
|
||||||
|
// Team members
|
||||||
|
//
|
||||||
|
|
||||||
|
.bd-team {
|
||||||
|
.team-member {
|
||||||
|
line-height: 2rem;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
.team-member:hover {
|
||||||
|
color: #333;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.github-btn {
|
||||||
|
float: right;
|
||||||
|
width: 180px;
|
||||||
|
height: 1.25rem;
|
||||||
|
margin-top: .25rem;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
float: left;
|
||||||
|
width: 2rem;
|
||||||
|
margin-right: .5rem;
|
||||||
|
border-radius: .25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
32
docs/assets/scss/_zeroclipboard.scss
Normal file
32
docs/assets/scss/_zeroclipboard.scss
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
//
|
||||||
|
// ZeroClipboard styles
|
||||||
|
//
|
||||||
|
|
||||||
|
.zero-clipboard {
|
||||||
|
position: relative;
|
||||||
|
display: none;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.btn-clipboard {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 10;
|
||||||
|
display: block;
|
||||||
|
padding: .25rem .5rem;
|
||||||
|
font-size: 75%;
|
||||||
|
color: #818a91;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #eceeef;
|
||||||
|
border-radius: 0 .2rem 0 .2rem;
|
||||||
|
}
|
||||||
|
.btn-clipboard-hover {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #027de7;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.zero-clipboard {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -5,1504 +5,53 @@
|
|||||||
* details, see http://creativecommons.org/licenses/by/3.0/.
|
* details, see http://creativecommons.org/licenses/by/3.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Import Bootstrap variables and mixins
|
// Dev notes
|
||||||
|
//
|
||||||
|
// Background information on nomenclature and architecture decisions here.
|
||||||
|
//
|
||||||
|
// - Bootstrap variables and mixins are included for easy reuse.
|
||||||
|
// Doing so gives us access to the same core utilities provided by Bootstrap.
|
||||||
|
// For example, consistent media queries through those mixins.
|
||||||
|
//
|
||||||
|
// - Bootstrap's docs variables are prefixed with `%bd-`.
|
||||||
|
// These custom colors avoid collision with the components Bootstrap provides.
|
||||||
|
//
|
||||||
|
// - Classes are prefixed with `.bd-`.
|
||||||
|
// These classes indicate custom-built or modified components for the design
|
||||||
|
// and layout of the Bootstrap docs. They are not included in our builds.
|
||||||
|
|
||||||
|
|
||||||
|
// Load Bootstrap variables and mixins
|
||||||
@import "../../../scss/variables";
|
@import "../../../scss/variables";
|
||||||
@import "../../../scss/mixins";
|
@import "../../../scss/mixins";
|
||||||
|
|
||||||
// Import the syntax highlighting
|
// Local docs variables
|
||||||
|
$bd-purple: #563d7c;
|
||||||
|
$bd-purple-light: #cdbfe3;
|
||||||
|
$bd-yellow: #ffe484;
|
||||||
|
$bd-danger: #d9534f;
|
||||||
|
$bd-warning: #f0ad4e;
|
||||||
|
$bd-info: #5bc0de;
|
||||||
|
|
||||||
|
// Load docs components
|
||||||
|
@import "layout";
|
||||||
|
@import "sidebar";
|
||||||
|
@import "booticon";
|
||||||
|
@import "homepage";
|
||||||
|
@import "ads";
|
||||||
|
@import "footer";
|
||||||
|
@import "social-buttons";
|
||||||
|
@import "page-header";
|
||||||
|
@import "component-examples";
|
||||||
|
@import "responsive-tests";
|
||||||
|
@import "buttons";
|
||||||
|
@import "callouts";
|
||||||
|
@import "examples";
|
||||||
|
@import "team";
|
||||||
|
@import "browser-bugs";
|
||||||
|
@import "brand";
|
||||||
|
@import "zeroclipboard";
|
||||||
|
|
||||||
|
// Load docs dependencies
|
||||||
@import "syntax";
|
@import "syntax";
|
||||||
@import "anchor";
|
@import "anchor";
|
||||||
|
|
||||||
// Local docs variables
|
|
||||||
$bs-purple: #563d7c;
|
|
||||||
$bs-purple-light: #cdbfe3;
|
|
||||||
$bs-yellow: #ffe484;
|
|
||||||
$bs-danger: #d9534f;
|
|
||||||
$bs-warning: #f0ad4e;
|
|
||||||
$bs-info: #5bc0de;
|
|
||||||
|
|
||||||
|
|
||||||
// Scaffolding
|
|
||||||
//
|
|
||||||
// Update the basics of our documents to prep for docs content.
|
|
||||||
|
|
||||||
body {
|
|
||||||
position: relative; // For scrollspy?
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Buttons
|
|
||||||
//
|
|
||||||
|
|
||||||
.btn-outline {
|
|
||||||
color: $bs-purple;
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: $bs-purple;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
color: #fff;
|
|
||||||
background-color:$bs-purple;
|
|
||||||
border-color: $bs-purple;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline-inverse {
|
|
||||||
color: #fff;
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: $bs-purple-light;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
color: $bs-purple;
|
|
||||||
text-shadow: none;
|
|
||||||
background-color: #fff;
|
|
||||||
border-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Bootstrap "B" icon
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-docs-booticon {
|
|
||||||
display: block;
|
|
||||||
width: 9rem;
|
|
||||||
height: 9rem;
|
|
||||||
font-size: 6.5rem;
|
|
||||||
line-height: 9rem;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
cursor: default;
|
|
||||||
background-color: $bs-purple;
|
|
||||||
border-radius: 15%;
|
|
||||||
|
|
||||||
&.inverse {
|
|
||||||
color: $bs-purple;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
&.outline {
|
|
||||||
background-color: transparent;
|
|
||||||
border: 1px solid $bs-purple-light;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Main navigation
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-nav-home {
|
|
||||||
margin-bottom: 0;
|
|
||||||
background-color: #563d7c;
|
|
||||||
border-bottom: 0;
|
|
||||||
|
|
||||||
.navbar-brand > a {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #cdbfe3;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: #fff;
|
|
||||||
background-color: rgba(0,0,0,.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// .bs-nav-home .navbar-toggle .icon-bar {
|
|
||||||
// background-color: #fff;
|
|
||||||
// }
|
|
||||||
// .bs-nav-home .navbar-header .navbar-toggle {
|
|
||||||
// border-color: #322f38;
|
|
||||||
// }
|
|
||||||
// .bs-nav-home .navbar-header .navbar-toggle:hover,
|
|
||||||
// .bs-nav-home .navbar-header .navbar-toggle:focus {
|
|
||||||
// background-color: #29262f;
|
|
||||||
// border-color: #29262f;
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Footer
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-docs-footer {
|
|
||||||
padding-top: 2rem;
|
|
||||||
margin-top: 6rem;
|
|
||||||
font-size: 85%;
|
|
||||||
color: #777;
|
|
||||||
border-top: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
.bs-docs-footer-links {
|
|
||||||
padding-left: 0;
|
|
||||||
margin-top: 20px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
.bs-docs-footer-links li {
|
|
||||||
display: inline;
|
|
||||||
padding: 0 2px;
|
|
||||||
}
|
|
||||||
.bs-docs-footer-links li:first-child {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bs-docs-footer p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Social buttons
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-docs-social {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
margin-left: -.5rem;
|
|
||||||
}
|
|
||||||
.bs-docs-social-buttons {
|
|
||||||
display: inline-block;
|
|
||||||
padding-left: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
.bs-docs-social-buttons li {
|
|
||||||
display: inline-block;
|
|
||||||
padding: .25rem .5rem;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.bs-docs-social-buttons .twitter-follow-button {
|
|
||||||
width: 225px !important;
|
|
||||||
}
|
|
||||||
.bs-docs-social-buttons .twitter-share-button {
|
|
||||||
width: 98px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Style the GitHub buttons via CSS instead of inline attributes
|
|
||||||
.github-btn {
|
|
||||||
overflow: hidden;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Homepage
|
|
||||||
//
|
|
||||||
|
|
||||||
.bd-header {
|
|
||||||
@include clearfix;
|
|
||||||
padding-bottom: .5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,.25);
|
|
||||||
|
|
||||||
.bd-header-mark {
|
|
||||||
float: left;
|
|
||||||
padding-top: .6em;
|
|
||||||
padding-bottom: .6em;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-header-nav {
|
|
||||||
float: right;
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Masthead (headings and download button)
|
|
||||||
.bs-docs-masthead {
|
|
||||||
position: relative;
|
|
||||||
padding: 2rem 0;
|
|
||||||
// color: #cdbfe3;
|
|
||||||
// text-align: center;
|
|
||||||
// text-shadow: 0 1px 0 rgba(0,0,0,.1);
|
|
||||||
// background-color: #6f5499;
|
|
||||||
// @include gradient-vertical($bs-purple, #6f5499);
|
|
||||||
// background-image: linear-gradient(135deg, #a8b7be, #cdd1d4, #d4d5d7, #cecfd1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-docs-masthead .bs-docs-booticon {
|
|
||||||
margin: 0 0 2rem;
|
|
||||||
color: $gray;
|
|
||||||
border-color: $gray;
|
|
||||||
}
|
|
||||||
.bs-docs-masthead h1 {
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1;
|
|
||||||
// color: #fff;
|
|
||||||
}
|
|
||||||
.bs-docs-masthead .lead {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
// color: #fff;
|
|
||||||
}
|
|
||||||
.bs-docs-masthead .version {
|
|
||||||
margin-top: -1rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
// color: #9783b9;
|
|
||||||
}
|
|
||||||
.bs-docs-masthead .btn {
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: $gray;
|
|
||||||
border-color: $gray;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #fff;
|
|
||||||
background-color: $gray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 480px) {
|
|
||||||
.bs-docs-masthead .btn {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bs-docs-masthead {
|
|
||||||
padding: 2rem 0 4rem;
|
|
||||||
// padding: 5rem 0;
|
|
||||||
}
|
|
||||||
.bd-header {
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
.bs-docs-masthead h1 {
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
.bs-docs-masthead .lead {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
.bs-docs-masthead .lead {
|
|
||||||
width: 80%;
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Page headers
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-docs-header {
|
|
||||||
padding-top: 2rem;
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
background-color: $bs-purple;
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-weight: 300;
|
|
||||||
color: rgba(255,255,255,.65);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 4rem;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
padding-top: 4rem;
|
|
||||||
padding-bottom: 4rem;
|
|
||||||
|
|
||||||
h1,
|
|
||||||
p {
|
|
||||||
margin-right: 380px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Carbon ads
|
|
||||||
//
|
|
||||||
|
|
||||||
.carbonad {
|
|
||||||
width: auto !important;
|
|
||||||
height: auto !important;
|
|
||||||
padding: 1.25rem !important;
|
|
||||||
margin: 0 -1rem 2rem !important;
|
|
||||||
overflow: hidden; /* clearfix */
|
|
||||||
font-size: .8rem !important;
|
|
||||||
line-height: 1rem !important;
|
|
||||||
color: $gray !important;
|
|
||||||
text-align: left;
|
|
||||||
background: #f5f5f5 !important;
|
|
||||||
border: 0 !important;
|
|
||||||
// border: solid #e5e5e5 !important;
|
|
||||||
// border-width: 1px 0 !important;
|
|
||||||
}
|
|
||||||
.carbonad-img {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
.carbonad-text,
|
|
||||||
.carbonad-tag {
|
|
||||||
display: block !important;
|
|
||||||
float: none !important;
|
|
||||||
width: auto !important;
|
|
||||||
height: auto !important;
|
|
||||||
margin-left: 145px !important;
|
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
|
|
||||||
}
|
|
||||||
.carbonad-text {
|
|
||||||
padding-top: 0 !important;
|
|
||||||
}
|
|
||||||
.carbonad-tag {
|
|
||||||
color: inherit !important;
|
|
||||||
text-align: left !important;
|
|
||||||
}
|
|
||||||
.carbonad-text a,
|
|
||||||
.carbonad-tag a {
|
|
||||||
color: $gray !important;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $brand-primary !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.carbonad #azcarbon > img {
|
|
||||||
display: none; // hide what I assume are tracking images
|
|
||||||
}
|
|
||||||
|
|
||||||
// In the lighter page headers
|
|
||||||
// .bs-docs-header .carbonad {
|
|
||||||
// color: #777;
|
|
||||||
// background-color: #fff !important;
|
|
||||||
// border-color: #eee !important;
|
|
||||||
// }
|
|
||||||
// .bs-docs-header .carbonad-text a,
|
|
||||||
// .bs-docs-header .carbonad-tag a {
|
|
||||||
// color: $bs-purple !important;
|
|
||||||
// }
|
|
||||||
|
|
||||||
@include media-breakpoint-up(sm) {
|
|
||||||
.carbonad {
|
|
||||||
width: 330px !important;
|
|
||||||
margin: 1.5rem auto !important;
|
|
||||||
border-width: 1px !important;
|
|
||||||
border-radius: .25rem;
|
|
||||||
}
|
|
||||||
.bs-docs-masthead .carbonad {
|
|
||||||
margin: 3rem auto 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-breakpoint-up(md) {
|
|
||||||
.carbonad {
|
|
||||||
margin-right: 0 !important;
|
|
||||||
margin-left: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-breakpoint-up(lg) {
|
|
||||||
.carbonad {
|
|
||||||
float: right;
|
|
||||||
width: 330px !important;
|
|
||||||
padding: 1rem !important;
|
|
||||||
margin: .5rem 0 1rem 2rem !important;
|
|
||||||
}
|
|
||||||
.bs-docs-masthead {
|
|
||||||
.carbonad {
|
|
||||||
float: none;
|
|
||||||
margin: 0 !important;
|
|
||||||
// color: $bs-purple-light !important;
|
|
||||||
// background: transparent !important;
|
|
||||||
// border: 1px solid #866ab3 !important;
|
|
||||||
}
|
|
||||||
// .carbonad-text a,
|
|
||||||
// .carbonad-tag a {
|
|
||||||
// color: #fff !important;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Homepage featurettes
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-docs-featurette {
|
|
||||||
padding-top: 3rem;
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: #555;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #fff;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
.bs-docs-featurette + .bs-docs-footer {
|
|
||||||
margin-top: 0;
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-docs-featurette-title {
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: normal;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.half-rule {
|
|
||||||
width: 6rem;
|
|
||||||
margin: 2.5rem auto;
|
|
||||||
}
|
|
||||||
.bs-docs-featurette h4 {
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
font-weight: normal;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.bs-docs-featurette-img {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.bs-docs-featurette-img:hover {
|
|
||||||
color: $brand-primary;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.bs-docs-featurette-img img {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 480px) {
|
|
||||||
.bs-docs-featurette .img-responsive {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bs-docs-featurette {
|
|
||||||
padding-top: 6rem;
|
|
||||||
padding-bottom: 6rem;
|
|
||||||
}
|
|
||||||
.bs-docs-featurette-title {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
.bs-docs-featurette .lead {
|
|
||||||
max-width: 80%;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
.bs-docs-featurette .img-responsive {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Featured Expo sites
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-docs-featured-sites {
|
|
||||||
margin-right: -1px;
|
|
||||||
margin-left: -1px;
|
|
||||||
}
|
|
||||||
.bs-docs-featured-sites .col-xs-6 {
|
|
||||||
padding: 1px;
|
|
||||||
}
|
|
||||||
.bs-docs-featured-sites .img-responsive {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bs-docs-featured-sites .col-sm-3:first-child img {
|
|
||||||
border-top-left-radius: .25rem;
|
|
||||||
border-bottom-left-radius: .25rem;
|
|
||||||
}
|
|
||||||
.bs-docs-featured-sites .col-sm-3:last-child img {
|
|
||||||
border-top-right-radius: .25rem;
|
|
||||||
border-bottom-right-radius: .25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Examples
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-examples .img-thumbnail {
|
|
||||||
margin-bottom: .75rem;
|
|
||||||
}
|
|
||||||
.bs-examples h4 {
|
|
||||||
margin-bottom: .25rem;
|
|
||||||
}
|
|
||||||
.bs-examples p {
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.bs-examples {
|
|
||||||
margin-right: -.75rem;
|
|
||||||
margin-left: -.75rem;
|
|
||||||
}
|
|
||||||
.bs-examples > [class^="col-"] {
|
|
||||||
padding-right: .75rem;
|
|
||||||
padding-left: .75rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Custom container
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-docs-container {
|
|
||||||
position: relative;
|
|
||||||
max-width: 62rem;
|
|
||||||
padding: 0 1rem 1rem;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
padding: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
> table {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
margin-bottom: $spacer;
|
|
||||||
// border: 1px solid $table-border-color;
|
|
||||||
|
|
||||||
// Cells
|
|
||||||
> thead,
|
|
||||||
> tbody,
|
|
||||||
> tfoot {
|
|
||||||
> tr {
|
|
||||||
> th,
|
|
||||||
> td {
|
|
||||||
padding: $table-cell-padding;
|
|
||||||
line-height: $line-height-base;
|
|
||||||
vertical-align: top;
|
|
||||||
// border-top: 1px solid $table-border-color;
|
|
||||||
border: 1px solid $table-border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Prevent breaking of code (e.g., Grunt tasks list)
|
|
||||||
td:first-child > code {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Side navigation
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-docs-sidebar {
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
// background-color: #322f38;
|
|
||||||
|
|
||||||
.navbar-toggler {
|
|
||||||
position: absolute;
|
|
||||||
top: 1.25rem;
|
|
||||||
right: 0;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-docs-sidebar .navbar-toggle .icon-bar {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-docs-sidebar .navbar-header {
|
|
||||||
float: none;
|
|
||||||
margin-right: -15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-docs-sidebar .navbar-collapse {
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
.bs-docs {
|
|
||||||
padding-left: 240px;
|
|
||||||
}
|
|
||||||
.bs-docs-sidebar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 100; // Ensure scrolling always works in Safari
|
|
||||||
width: 240px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-right: 1px solid #eee;
|
|
||||||
// @include gradient-vertical(#29262f, #322f38);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-docs-sidebar .navbar-brand {
|
|
||||||
display: block;
|
|
||||||
float: none;
|
|
||||||
height: auto;
|
|
||||||
padding: 1.75rem 1.25rem;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1;
|
|
||||||
// color: #fff;
|
|
||||||
}
|
|
||||||
.bs-docs-sidebar-brand:hover,
|
|
||||||
.bs-docs-sidebar-brand:focus {
|
|
||||||
// color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-docs-search {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
// .form-control {
|
|
||||||
// width: 12rem;
|
|
||||||
// }
|
|
||||||
|
|
||||||
margin-right: 1.25rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
margin-left: 1.25rem;
|
|
||||||
|
|
||||||
.form-control {
|
|
||||||
height: 2.45rem;
|
|
||||||
padding-top: .4rem;
|
|
||||||
padding-bottom: .4rem;
|
|
||||||
// color: rgba(255,255,255,.5);
|
|
||||||
// background-color: lighten(#29262f, 10%);
|
|
||||||
// border-color: lighten(#29262f, 15%);
|
|
||||||
|
|
||||||
// &:focus {
|
|
||||||
// border-color: rgba(255,255,255,.25);
|
|
||||||
// box-shadow: 0 0 .5rem rgba(255,255,255,.25);
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-docs-search-results {
|
|
||||||
top: 108%;
|
|
||||||
right: 0;
|
|
||||||
display: block;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: .9rem;
|
|
||||||
border: 0;
|
|
||||||
|
|
||||||
> li > a {
|
|
||||||
padding-left: .75rem;
|
|
||||||
padding-right: .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
> li:first-child { margin-top: .25rem; }
|
|
||||||
> li:last-child { margin-bottom: .25rem; }
|
|
||||||
|
|
||||||
> .no-results {
|
|
||||||
padding: .75rem 1rem;
|
|
||||||
color: #7a7a7a;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bs-docs-sidenav {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-docs-toc-link {
|
|
||||||
display: block;
|
|
||||||
padding: .25rem 1.25rem;
|
|
||||||
color: $gray;
|
|
||||||
// font-size: 1rem;
|
|
||||||
// color: #fff;
|
|
||||||
}
|
|
||||||
.bs-docs-toc-link:hover,
|
|
||||||
.bs-docs-toc-link:focus {
|
|
||||||
// color: $bs-yellow;
|
|
||||||
color: $brand-primary;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.active > .bs-docs-toc-link {
|
|
||||||
font-weight: 500;
|
|
||||||
color: $gray-dark;
|
|
||||||
// color: $bs-yellow;
|
|
||||||
}
|
|
||||||
.active > .bs-docs-sidenav {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-docs-toc-item.active {
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.bs-docs-toc-item:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.bs-docs-toc-item:last-child {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// All levels of nav
|
|
||||||
.bs-docs-sidebar .nav > li > a {
|
|
||||||
display: block;
|
|
||||||
padding: .25rem 1.25rem;
|
|
||||||
font-size: 90%;
|
|
||||||
color: #99979c;
|
|
||||||
}
|
|
||||||
.bs-docs-sidebar .nav > li > a:hover,
|
|
||||||
.bs-docs-sidebar .nav > li > a:focus {
|
|
||||||
color: $brand-primary;
|
|
||||||
// color: $bs-yellow;
|
|
||||||
text-decoration: none;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.bs-docs-sidebar .nav > .active > a,
|
|
||||||
.bs-docs-sidebar .nav > .active:hover > a,
|
|
||||||
.bs-docs-sidebar .nav > .active:focus > a {
|
|
||||||
font-weight: 500;
|
|
||||||
color: $gray-dark;
|
|
||||||
// color: $bs-yellow;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Nav: second level (shown on .active)
|
|
||||||
.bs-docs-sidebar .nav .nav {
|
|
||||||
display: none; // Hide by default, but at >768px, show it
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
}
|
|
||||||
.bs-docs-sidebar .nav .nav > li > a {
|
|
||||||
padding-top: 1px;
|
|
||||||
padding-bottom: 1px;
|
|
||||||
padding-left: 2rem;
|
|
||||||
font-size: 75%;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
.bs-docs-sidebar .nav .nav > .active > a,
|
|
||||||
.bs-docs-sidebar .nav .nav > .active:hover > a,
|
|
||||||
.bs-docs-sidebar .nav .nav > .active:focus > a {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-docs-sidebar .nav > .active > .nav {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.bs-docs-sidebar .nav .nav > li > a {
|
|
||||||
padding-top: .125rem;
|
|
||||||
padding-bottom: .125rem;
|
|
||||||
padding-left: 2rem;
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Docs sections
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-docs-content {
|
|
||||||
> h2 {
|
|
||||||
margin-top: 3rem;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
> h3 {
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-docs-title {
|
|
||||||
@include media-breakpoint-up(sm) {
|
|
||||||
margin-right: 23rem;
|
|
||||||
font-size: 4rem;
|
|
||||||
|
|
||||||
+ p {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: 300;
|
|
||||||
margin-right: 23rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Callouts
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-callout {
|
|
||||||
padding: 1.25rem;
|
|
||||||
margin-top: 1.25rem;
|
|
||||||
margin-bottom: 1.25rem;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
border-left-width: .25rem;
|
|
||||||
border-radius: .25rem;
|
|
||||||
}
|
|
||||||
.bs-callout h4 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: .25rem;
|
|
||||||
}
|
|
||||||
.bs-callout p:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.bs-callout code {
|
|
||||||
border-radius: .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bs-callout + .bs-callout {
|
|
||||||
margin-top: -.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Variations
|
|
||||||
@mixin bs-callout-variant($color) {
|
|
||||||
border-left-color: $color;
|
|
||||||
|
|
||||||
h4 { color: $color; }
|
|
||||||
}
|
|
||||||
.bs-callout-danger { @include bs-callout-variant($bs-danger); }
|
|
||||||
.bs-callout-warning { @include bs-callout-variant($bs-warning); }
|
|
||||||
.bs-callout-info { @include bs-callout-variant($bs-info); }
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Color swatches
|
|
||||||
//
|
|
||||||
|
|
||||||
.color-swatches {
|
|
||||||
margin: 0 -5px;
|
|
||||||
overflow: hidden; // clearfix
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-swatch {
|
|
||||||
float: left;
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
margin-right: .25rem;
|
|
||||||
margin-left: .25rem;
|
|
||||||
border-radius: .25rem;
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
width: 6rem;
|
|
||||||
height: 6rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Docs colors
|
|
||||||
.color-swatches {
|
|
||||||
.bs-purple {
|
|
||||||
background-color: $bs-purple;
|
|
||||||
}
|
|
||||||
.bs-purple-light {
|
|
||||||
background-color: $bs-purple-light;
|
|
||||||
}
|
|
||||||
.bs-purple-lighter {
|
|
||||||
background-color: #e5e1ea;
|
|
||||||
}
|
|
||||||
.bs-gray {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Team members
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-team {
|
|
||||||
.team-member {
|
|
||||||
line-height: 2rem;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
.team-member:hover {
|
|
||||||
color: #333;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.github-btn {
|
|
||||||
float: right;
|
|
||||||
width: 180px;
|
|
||||||
height: 1.25rem;
|
|
||||||
margin-top: .25rem;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
float: left;
|
|
||||||
width: 2rem;
|
|
||||||
margin-right: .5rem;
|
|
||||||
border-radius: .25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Wall of Browser Bugs
|
|
||||||
//
|
|
||||||
// Better display for the responsive table on the Wall of Browser Bugs.
|
|
||||||
|
|
||||||
.bs-docs-browser-bugs {
|
|
||||||
td p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
th:first-child {
|
|
||||||
width: 18%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Grid examples
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-example > .row {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.bs-example > .row > [class^="col-"] {
|
|
||||||
padding-top: .75rem;
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
background-color: rgba(86,61,124,.15);
|
|
||||||
border: 1px solid rgba(86,61,124,.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Docs examples
|
|
||||||
//
|
|
||||||
|
|
||||||
.bs-example {
|
|
||||||
position: relative;
|
|
||||||
padding: 1rem;
|
|
||||||
margin: 1rem -1rem;
|
|
||||||
border: solid #f7f7f9;
|
|
||||||
border-width: .2rem 0 0;
|
|
||||||
@include clearfix();
|
|
||||||
|
|
||||||
@include media-breakpoint-up(sm) {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding: 1.5rem;
|
|
||||||
border-width: .2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
+ p {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Undo width of container
|
|
||||||
.container {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Card examples should be horizontal
|
|
||||||
> .card {
|
|
||||||
float: left;
|
|
||||||
max-width: 15rem;
|
|
||||||
margin: .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .nav + .nav,
|
|
||||||
> .alert + .alert,
|
|
||||||
> .progress + .progress {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .dropdown-menu:first-child {
|
|
||||||
position: static;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Tweak content of examples for optimum awesome
|
|
||||||
.bs-example > *:last-child,
|
|
||||||
.bs-example > .table-responsive:last-child > .table {
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
}
|
|
||||||
.bs-example > .close {
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Typography
|
|
||||||
.bs-example-type .table .type-info {
|
|
||||||
color: #999;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.bs-example-type .table td {
|
|
||||||
padding: 1rem 0;
|
|
||||||
border-color: #eee;
|
|
||||||
}
|
|
||||||
.bs-example-type .table tr:first-child td {
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
.bs-example-type h1,
|
|
||||||
.bs-example-type h2,
|
|
||||||
.bs-example-type h3,
|
|
||||||
.bs-example-type h4,
|
|
||||||
.bs-example-type h5,
|
|
||||||
.bs-example-type h6 {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Contextual background colors
|
|
||||||
.bs-example-bg-classes p {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Images
|
|
||||||
.bs-example > img {
|
|
||||||
+ img {
|
|
||||||
margin-left: .5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .bs-example > .img-circle,
|
|
||||||
// .bs-example > .img-rounded,
|
|
||||||
// .bs-example > .img-thumbnail {
|
|
||||||
// margin: .25rem;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// Tables
|
|
||||||
// .bs-example > .table-responsive > .table {
|
|
||||||
// background-color: #fff;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// Buttons
|
|
||||||
.bs-example > .btn-group {
|
|
||||||
margin-top: .25rem;
|
|
||||||
margin-bottom: .25rem;
|
|
||||||
}
|
|
||||||
.bs-example > .btn-toolbar + .btn-toolbar {
|
|
||||||
margin-top: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Forms
|
|
||||||
.bs-example-control-sizing select,
|
|
||||||
.bs-example-control-sizing input[type="text"] + input[type="text"] {
|
|
||||||
margin-top: .5rem;
|
|
||||||
}
|
|
||||||
.bs-example-form .input-group {
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
}
|
|
||||||
.bs-example > textarea.form-control {
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
// List groups
|
|
||||||
.bs-example > .list-group {
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Navbars
|
|
||||||
.bs-example .navbar:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.bs-navbar-top-example,
|
|
||||||
.bs-navbar-bottom-example {
|
|
||||||
z-index: 1;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden; // cut the drop shadows off
|
|
||||||
}
|
|
||||||
.bs-navbar-top-example .navbar-header,
|
|
||||||
.bs-navbar-bottom-example .navbar-header {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
.bs-navbar-top-example .navbar-fixed-top,
|
|
||||||
.bs-navbar-bottom-example .navbar-fixed-bottom {
|
|
||||||
position: relative;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
.bs-navbar-top-example {
|
|
||||||
padding-bottom: 45px;
|
|
||||||
}
|
|
||||||
.bs-navbar-top-example .navbar-fixed-top {
|
|
||||||
top: -1px;
|
|
||||||
}
|
|
||||||
.bs-navbar-bottom-example {
|
|
||||||
padding-top: 45px;
|
|
||||||
}
|
|
||||||
.bs-navbar-bottom-example .navbar-fixed-bottom {
|
|
||||||
bottom: -1px;
|
|
||||||
}
|
|
||||||
.bs-navbar-bottom-example .navbar {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bs-navbar-top-example .navbar-fixed-top,
|
|
||||||
.bs-navbar-bottom-example .navbar-fixed-bottom {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pagination
|
|
||||||
.bs-example .pagination {
|
|
||||||
margin-top: .5rem;
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pager
|
|
||||||
.bs-example > .pager {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Example modals
|
|
||||||
.bs-example-modal {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
.bs-example-modal .modal {
|
|
||||||
position: relative;
|
|
||||||
top: auto;
|
|
||||||
right: auto;
|
|
||||||
bottom: auto;
|
|
||||||
left: auto;
|
|
||||||
z-index: 1;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.bs-example-modal .modal-dialog {
|
|
||||||
left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Example dropdowns
|
|
||||||
.bs-example > .dropdown > .dropdown-toggle {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.bs-example > .dropdown > .dropdown-menu {
|
|
||||||
position: static;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: .25rem;
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Example tabbable tabs
|
|
||||||
.bs-example-tabs .nav-tabs {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tooltips
|
|
||||||
.bs-example-tooltips {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.bs-example-tooltips > .btn {
|
|
||||||
margin-top: .25rem;
|
|
||||||
margin-bottom: .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Popovers
|
|
||||||
.bs-example-popover {
|
|
||||||
padding-bottom: 1.5rem;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
.bs-example-popover .popover {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
width: 260px;
|
|
||||||
margin: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tooltips
|
|
||||||
.bs-example-tooltip .tooltip {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 10px 20px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Scrollspy demo on fixed height div
|
|
||||||
.scrollspy-example {
|
|
||||||
position: relative;
|
|
||||||
height: 200px;
|
|
||||||
margin-top: .5rem;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helpers
|
|
||||||
.bs-example > {
|
|
||||||
.center-block:not(img) {
|
|
||||||
max-width: 200px;
|
|
||||||
padding: .5rem;
|
|
||||||
background-color: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-primary,
|
|
||||||
.bg-success,
|
|
||||||
.bg-info,
|
|
||||||
.bg-warning,
|
|
||||||
.bg-danger {
|
|
||||||
padding: .5rem;
|
|
||||||
margin-top: .5rem;
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Code snippets
|
|
||||||
//
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
padding: 1rem;
|
|
||||||
margin: 0 -1rem 1rem;
|
|
||||||
background-color: #f7f7f9;
|
|
||||||
|
|
||||||
@include media-breakpoint-up(sm) {
|
|
||||||
padding: 1.5rem;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.highlight pre {
|
|
||||||
padding: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
.highlight pre code {
|
|
||||||
font-size: inherit;
|
|
||||||
color: $gray-dark; // Effectively the base text color
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Responsive tests
|
|
||||||
//
|
|
||||||
|
|
||||||
// Responsive (scrollable) doc tables
|
|
||||||
.table-responsive .highlight pre {
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Utility classes table
|
|
||||||
.bs-table th small,
|
|
||||||
.responsive-utilities th small {
|
|
||||||
display: block;
|
|
||||||
font-weight: normal;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
.responsive-utilities tbody th {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
.responsive-utilities td {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.responsive-utilities td.is-visible {
|
|
||||||
color: #468847;
|
|
||||||
background-color: #dff0d8 !important;
|
|
||||||
}
|
|
||||||
.responsive-utilities td.is-hidden {
|
|
||||||
color: #ccc;
|
|
||||||
background-color: #f9f9f9 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsive tests
|
|
||||||
.responsive-utilities-test {
|
|
||||||
margin-top: .25rem;
|
|
||||||
}
|
|
||||||
.responsive-utilities-test .col-xs-6 {
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
}
|
|
||||||
.responsive-utilities-test span {
|
|
||||||
display: block;
|
|
||||||
padding: 1rem .5rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 1.1;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: .25rem;
|
|
||||||
}
|
|
||||||
.visible-on,
|
|
||||||
.hidden-on {
|
|
||||||
.col-xs-6 {
|
|
||||||
> .not-visible {
|
|
||||||
color: #999;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.visible-on,
|
|
||||||
.hidden-on {
|
|
||||||
.col-xs-6 {
|
|
||||||
.visible {
|
|
||||||
color: #468847;
|
|
||||||
background-color: #dff0d8;
|
|
||||||
border: 1px solid #d6e9c6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-breakpoint-only(xs) {
|
|
||||||
.hidden-xs-only {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include media-breakpoint-only(sm) {
|
|
||||||
.hidden-sm-only {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include media-breakpoint-only(md) {
|
|
||||||
.hidden-md-only {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include media-breakpoint-only(lg) {
|
|
||||||
.hidden-lg-only {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include media-breakpoint-only(xl) {
|
|
||||||
.hidden-xl-only {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Brand guidelines
|
|
||||||
//
|
|
||||||
|
|
||||||
// Logo series wrapper
|
|
||||||
.bs-brand-logos {
|
|
||||||
display: table;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
overflow: hidden;
|
|
||||||
color: #563d7c;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
border-radius: .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Individual items
|
|
||||||
.bs-brand-item {
|
|
||||||
padding: 4rem 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.bs-brand-item + .bs-brand-item {
|
|
||||||
border-top: 1px solid #fff;
|
|
||||||
}
|
|
||||||
.bs-brand-logos .inverse {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #563d7c;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Heading content within
|
|
||||||
.bs-brand-item h1,
|
|
||||||
.bs-brand-item h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.bs-brand-item .bs-docs-booticon {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Make the icons stand out on what is/isn't okay
|
|
||||||
// .bs-brand-item .glyphicon {
|
|
||||||
// width: 30px;
|
|
||||||
// height: 30px;
|
|
||||||
// margin: 10px auto -10px;
|
|
||||||
// line-height: 30px;
|
|
||||||
// color: #fff;
|
|
||||||
// border-radius: 50%;
|
|
||||||
// }
|
|
||||||
// .bs-brand-item .glyphicon-ok {
|
|
||||||
// background-color: #5cb85c;
|
|
||||||
// }
|
|
||||||
// .bs-brand-item .glyphicon-remove {
|
|
||||||
// background-color: #d9534f;
|
|
||||||
// }
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bs-brand-item {
|
|
||||||
display: table-cell;
|
|
||||||
width: 1%;
|
|
||||||
}
|
|
||||||
.bs-brand-item + .bs-brand-item {
|
|
||||||
border-top: 0;
|
|
||||||
border-left: 1px solid #fff;
|
|
||||||
}
|
|
||||||
.bs-brand-item h1 {
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// ZeroClipboard styles
|
|
||||||
//
|
|
||||||
|
|
||||||
.zero-clipboard {
|
|
||||||
position: relative;
|
|
||||||
display: none;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.btn-clipboard {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 10;
|
|
||||||
display: block;
|
|
||||||
padding: .25rem .5rem;
|
|
||||||
font-size: 75%;
|
|
||||||
color: #818a91;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: #eceeef;
|
|
||||||
border-radius: 0 .2rem 0 .2rem;
|
|
||||||
}
|
|
||||||
.btn-clipboard-hover {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #027de7;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.zero-clipboard {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Miscellaneous
|
|
||||||
//
|
|
||||||
|
|
||||||
// Pseudo :focus state for showing how it looks in the docs
|
|
||||||
#focusedInput {
|
|
||||||
border-color: $input-border-focus;
|
|
||||||
outline: 0;
|
|
||||||
outline: thin dotted \9; // IE9
|
|
||||||
box-shadow: 0 0 .5rem $input-box-shadow-focus;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -8,7 +8,7 @@ Bootstrap currently works around several outstanding browser bugs in major brows
|
|||||||
We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs](../getting-started/#support).
|
We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, [see our browser compatibility docs](../getting-started/#support).
|
||||||
|
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="bs-docs-browser-bugs table table-bordered table-hover">
|
<table class="bd-browser-bugs table table-bordered table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Browser(s)</th>
|
<th>Browser(s)</th>
|
||||||
|
|||||||
@ -7,10 +7,11 @@ Provide contextual feedback messages for typical user actions with the handful o
|
|||||||
|
|
||||||
Wrap any text and an optional dismiss button in `.alert` and one of the four contextual classes (e.g., `.alert-success`) for basic alert messages.
|
Wrap any text and an optional dismiss button in `.alert` and one of the four contextual classes (e.g., `.alert-success`) for basic alert messages.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
{% callout info %}
|
||||||
<h4>No default class</h4>
|
#### No default class
|
||||||
<p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
|
|
||||||
</div>
|
Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<div class="alert alert-success" role="alert">
|
<div class="alert alert-success" role="alert">
|
||||||
@ -41,10 +42,11 @@ Build on any alert by adding an optional `.alert-dismissible` and [close button]
|
|||||||
</div>
|
</div>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% callout warning %}
|
||||||
<h4>Ensure proper behavior across all devices</h4>
|
#### Ensure proper behavior across all devices
|
||||||
<p>Be sure to use the <code><button></code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
|
|
||||||
</div>
|
Be sure to use the `<button>` element with the `data-dismiss="alert"` data attribute.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
### Link color
|
### Link color
|
||||||
|
|
||||||
|
|||||||
@ -5,16 +5,17 @@ title: Button dropdown
|
|||||||
|
|
||||||
Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper dropdown menu markup.
|
Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper dropdown menu markup.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
{% callout danger %}
|
||||||
<h4>Plugin dependency</h4>
|
#### Plugin dependency
|
||||||
<p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p>
|
|
||||||
</div>
|
Button dropdowns require the [dropdown plugin](../javascript/#dropdowns) to be included in your version of Bootstrap.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
### Single button dropdowns
|
### Single button dropdowns
|
||||||
|
|
||||||
Turn a button into a dropdown toggle with some basic markup changes.
|
Turn a button into a dropdown toggle with some basic markup changes.
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default</button>
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default</button>
|
||||||
<ul class="dropdown-menu" role="menu">
|
<ul class="dropdown-menu" role="menu">
|
||||||
@ -97,7 +98,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
|||||||
|
|
||||||
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
|
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button type="button" class="btn btn-secondary">Default</button>
|
<button type="button" class="btn btn-secondary">Default</button>
|
||||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||||
@ -199,7 +200,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
|
|||||||
|
|
||||||
Button dropdowns work with buttons of all sizes.
|
Button dropdowns work with buttons of all sizes.
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<div class="btn-toolbar" role="toolbar">
|
<div class="btn-toolbar" role="toolbar">
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||||
@ -280,7 +281,7 @@ Button dropdowns work with buttons of all sizes.
|
|||||||
|
|
||||||
Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<div class="btn-toolbar" role="toolbar">
|
<div class="btn-toolbar" role="toolbar">
|
||||||
<div class="btn-group dropup">
|
<div class="btn-group dropup">
|
||||||
<button type="button" class="btn btn-secondary">Dropup</button>
|
<button type="button" class="btn btn-secondary">Dropup</button>
|
||||||
|
|||||||
@ -5,16 +5,19 @@ title: Button group
|
|||||||
|
|
||||||
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](../javascript/#buttons).
|
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](../javascript/#buttons).
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% callout warning %}
|
||||||
<h4>Tooltips & popovers in button groups require special setting</h4>
|
#### Tooltips & popovers in button groups require special setting
|
||||||
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
When using tooltips or popovers on elements within a `.btn-group`, you'll have to specify the option `container: 'body'` to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
|
||||||
<h4>Ensure correct <code>role</code> and provide a label</h4>
|
{% endcallout %}
|
||||||
<p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
|
|
||||||
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
|
{% callout warning %}
|
||||||
</div>
|
#### Ensure correct `role` and provide a label
|
||||||
|
|
||||||
|
In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
|
||||||
|
|
||||||
|
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct `role` attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
### Basic example
|
### Basic example
|
||||||
|
|
||||||
@ -55,7 +58,7 @@ Combine sets of button groups into button toolbars for more complex components.
|
|||||||
|
|
||||||
Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
|
Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
|
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
|
||||||
<button type="button" class="btn btn-secondary">Left</button>
|
<button type="button" class="btn btn-secondary">Left</button>
|
||||||
<button type="button" class="btn btn-secondary">Middle</button>
|
<button type="button" class="btn btn-secondary">Middle</button>
|
||||||
@ -113,7 +116,7 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
|
|||||||
|
|
||||||
Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
|
Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||||
<button type="button" class="btn btn-secondary">Button</button>
|
<button type="button" class="btn btn-secondary">Button</button>
|
||||||
<button type="button" class="btn btn-secondary">Button</button>
|
<button type="button" class="btn btn-secondary">Button</button>
|
||||||
|
|||||||
@ -36,21 +36,23 @@ A slideshow component for cycling through elements—images or slides of text—
|
|||||||
</div>
|
</div>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning" id="callout-carousel-transitions">
|
{% callout warning %}
|
||||||
<h4>Transition animations not supported in Internet Explorer 9</h4>
|
#### Transition animations not supported in Internet Explorer 9
|
||||||
<p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 doesn't support the necessary CSS properties. Thus, there are no slide transition animations when using that browser. We have intentionally decided not to include jQuery-based fallbacks for the transitions.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning" id="callout-carousel-active">
|
Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 doesn't support the necessary CSS properties. Thus, there are no slide transition animations when using that browser. We have intentionally decided not to include jQuery-based fallbacks for the transitions.
|
||||||
<h4>Initial active element required</h4>
|
{% endcallout %}
|
||||||
<p>The <code>.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p>
|
|
||||||
</div>
|
{% callout warning %}
|
||||||
|
#### Initial active element required
|
||||||
|
|
||||||
|
The `.active` class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
### Optional captions
|
### Optional captions
|
||||||
|
|
||||||
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
|
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
|
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
|
||||||
<ol class="carousel-indicators">
|
<ol class="carousel-indicators">
|
||||||
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
|
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
|
||||||
@ -101,10 +103,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
|
|||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
{% callout danger %}
|
||||||
<h4>Accessibility issue</h4>
|
#### Accessibility issue
|
||||||
<p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.</p>
|
|
||||||
</div>
|
The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|||||||
@ -5,10 +5,11 @@ title: Collapse
|
|||||||
|
|
||||||
Flexible plugin that utilizes a handful of classes for easy toggle behavior.
|
Flexible plugin that utilizes a handful of classes for easy toggle behavior.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
{% callout danger %}
|
||||||
<h4>Plugin dependency</h4>
|
#### Plugin dependency
|
||||||
<p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
|
|
||||||
</div>
|
Collapse requires the [transitions plugin](#transitions) to be included in your version of Bootstrap.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
## Example
|
## Example
|
||||||
|
|
||||||
@ -87,11 +88,11 @@ Extend the default collapse behavior to create an accordion with the panel compo
|
|||||||
</div>
|
</div>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
## Accessibility
|
||||||
<h4>Make expand/collapse controls accessible</h4>
|
|
||||||
<p>Be sure to add <code>aria-expanded</code> to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of <code>aria-expanded="false"</code>. If you've set the collapsible element to be open by default using the <code>in</code> class, set <code>aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.</p>
|
Be sure to add `aria-expanded` to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `in` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.
|
||||||
<p>Additionally, if your control element is targetting a single collapsible element – i.e. the <code>data-target</code> attribute is pointing to an <code>id</code> selector – you may add an additional <code>aria-controls</code> attribute to the control element, containing the <code>id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
|
|
||||||
</div>
|
Additionally, if your control element is targetting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you may add an additional `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|||||||
@ -31,7 +31,7 @@ In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](h
|
|||||||
|
|
||||||
Custom checkboxes can also utilize the `:indeterminate` pseudo class.
|
Custom checkboxes can also utilize the `:indeterminate` pseudo class.
|
||||||
|
|
||||||
<div class="bs-example bs-example-indeterminate">
|
<div class="bd-example bd-example-indeterminate">
|
||||||
<label class="c-input c-checkbox">
|
<label class="c-input c-checkbox">
|
||||||
<input type="checkbox">
|
<input type="checkbox">
|
||||||
<span class="c-indicator"></span>
|
<span class="c-indicator"></span>
|
||||||
|
|||||||
@ -32,10 +32,11 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another
|
|||||||
|
|
||||||
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
|
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% callout warning %}
|
||||||
<h4>May require additional positioning</h4>
|
#### May require additional positioning
|
||||||
<p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p>
|
|
||||||
</div>
|
Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain `overflow` properties or appear out of bounds of the viewport. Address these issues on your own as they arise.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
|
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
|
||||||
@ -146,10 +147,11 @@ Call the dropdowns via JavaScript:
|
|||||||
$('.dropdown-toggle').dropdown()
|
$('.dropdown-toggle').dropdown()
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
{% callout info %}
|
||||||
<h4><code>data-toggle="dropdown"</code> still required</h4>
|
#### `data-toggle="dropdown"` still required
|
||||||
<p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code>data-toggle="dropdown"</code> is always required to be present on the dropdown's trigger element.</p>
|
|
||||||
</div>
|
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
### Options
|
### Options
|
||||||
|
|
||||||
|
|||||||
@ -16,14 +16,17 @@ Convey meaning through color with a handful of emphasis utility classes. These m
|
|||||||
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
{% callout info %}
|
||||||
<h4>Dealing with specificity</h4>
|
#### Dealing with specificity
|
||||||
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
|
|
||||||
</div>
|
Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a `<span>` with the class.
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% endcallout %}
|
||||||
<h4>Conveying meaning to assistive technologies</h4>
|
|
||||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
|
{% callout warning %}
|
||||||
</div>
|
#### Conveying meaning to assistive technologies
|
||||||
|
|
||||||
|
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
### Contextual backgrounds
|
### Contextual backgrounds
|
||||||
|
|
||||||
@ -37,15 +40,17 @@ Similar to the contextual text color classes, easily set the background of an el
|
|||||||
<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
|
<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
{% callout info %}
|
||||||
<h4>Dealing with specificity</h4>
|
#### Dealing with specificity
|
||||||
<p>Sometimes contextual background 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 <code><div></code> with the class.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
Sometimes contextual background 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.
|
||||||
<h4>Conveying meaning to assistive technologies</h4>
|
{% endcallout %}
|
||||||
<p>As with <a href="#helper-classes-colors">contextual colors</a>, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.</p>
|
|
||||||
</div>
|
{% callout warning %}
|
||||||
|
#### Conveying meaning to assistive technologies
|
||||||
|
|
||||||
|
As with [contextual colors](#helper-classes-colors), ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
### Close icon
|
### Close icon
|
||||||
|
|
||||||
|
|||||||
@ -13,24 +13,29 @@ $('#myModal').on('shown.bs.modal', function () {
|
|||||||
})
|
})
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning" id="callout-stacked-modals">
|
{% callout warning %}
|
||||||
<h4>Overlapping modals not supported</h4>
|
#### Overlapping modals not supported
|
||||||
<p>Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.</p>
|
|
||||||
</div>
|
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
|
||||||
<div class="bs-callout bs-callout-warning" id="callout-modal-markup-placement">
|
{% endcallout %}
|
||||||
<h4>Modal markup placement</h4>
|
|
||||||
<p>Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.</p>
|
{% callout warning %}
|
||||||
</div>
|
#### Modal markup placement
|
||||||
<div class="bs-callout bs-callout-warning">
|
|
||||||
<h4>Mobile device caveats</h4>
|
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
|
||||||
<p>There are some caveats regarding using modals on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
|
{% endcallout %}
|
||||||
</div>
|
|
||||||
|
{% callout warning %}
|
||||||
|
#### Mobile device caveats
|
||||||
|
|
||||||
|
There are some caveats regarding using modals on mobile devices. [See our browser support docs](../getting-started/#support-fixed-position-keyboards) for details.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
### Static example
|
### Static example
|
||||||
|
|
||||||
A rendered modal with header, body, and set of actions in the footer.</p>
|
A rendered modal with header, body, and set of actions in the footer.</p>
|
||||||
|
|
||||||
<div class="bs-example bs-example-modal">
|
<div class="bd-example bd-example-modal">
|
||||||
<div class="modal">
|
<div class="modal">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
@ -123,7 +128,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
|
|||||||
</div><!-- /.modal-dialog -->
|
</div><!-- /.modal-dialog -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bs-example" style="padding-bottom: 24px;">
|
<div class="bd-example" style="padding-bottom: 24px;">
|
||||||
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
|
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
|
||||||
Launch demo modal
|
Launch demo modal
|
||||||
</button>
|
</button>
|
||||||
@ -158,31 +163,34 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
|
|||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% callout warning %}
|
||||||
<h4>Make modals accessible</h4>
|
#### Make modals accessible
|
||||||
<p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p>
|
|
||||||
<p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
Be sure to add `role="dialog"` to `.modal`, `aria-labelledby="myModalLabel"` attribute to reference the modal title, and `aria-hidden="true"` to tell assistive technologies to skip the modal's DOM elements.
|
||||||
<h4>Embedding YouTube videos</h4>
|
|
||||||
<p>Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. <a href="http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal">See this helpful Stack Overflow post</a> for more information.</p>
|
Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`.
|
||||||
</div>
|
{% endcallout %}
|
||||||
|
|
||||||
|
{% callout info %}
|
||||||
|
#### Embedding YouTube videos
|
||||||
|
|
||||||
|
Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post](http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
## Optional sizes
|
## Optional sizes
|
||||||
|
|
||||||
Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`.
|
Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`.
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
|
||||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<!-- Large modal -->
|
<!-- Large modal -->
|
||||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
|
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
|
||||||
|
|
||||||
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-lg">
|
<div class="modal-dialog modal-lg">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
...
|
...
|
||||||
@ -191,9 +199,9 @@ Modals have two optional sizes, available via modifier classes to be placed on a
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Small modal -->
|
<!-- Small modal -->
|
||||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
|
||||||
|
|
||||||
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-sm">
|
<div class="modal-dialog modal-sm">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
...
|
...
|
||||||
@ -202,7 +210,7 @@ Modals have two optional sizes, available via modifier classes to be placed on a
|
|||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-lg">
|
<div class="modal-dialog modal-lg">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -220,7 +228,7 @@ Modals have two optional sizes, available via modifier classes to be placed on a
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-sm">
|
<div class="modal-dialog modal-sm">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
|
|
||||||
@ -295,7 +303,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bs-example bs-example-padded-bottom">
|
<div class="bd-example bd-example-padded-bottom">
|
||||||
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
|
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
|
||||||
Launch demo modal
|
Launch demo modal
|
||||||
</button>
|
</button>
|
||||||
@ -307,7 +315,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
|
|||||||
Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`.
|
Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`.
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
|
||||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
|
||||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
|
||||||
|
|||||||
@ -3,46 +3,45 @@ layout: page
|
|||||||
title: Popovers
|
title: Popovers
|
||||||
---
|
---
|
||||||
|
|
||||||
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
|
Add small overlays of content, like those found in iOS, to any element for housing secondary information.
|
||||||
|
|
||||||
Popovers whose both title and content are zero-length are never displayed.
|
## Overview
|
||||||
|
|
||||||
|
Things to know when using the popover plugin:
|
||||||
|
|
||||||
|
- Popovers require the [tooltip plugin](/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).
|
||||||
|
- Triggering popovers on hidden elements will not work.
|
||||||
|
- Popovers for `.disabled` or `disabled` elements must be triggered on a wrapper element.
|
||||||
|
- When triggered from hyperlinks that span multiple lines, popovers will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
|
||||||
|
|
||||||
|
## Example: Enable popovers everywhere
|
||||||
|
|
||||||
|
One way to initialize all popovers on a page would be to select them by their `data-toggle` attribute:
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
|
||||||
<h4>Plugin dependency</h4>
|
|
||||||
<p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
|
||||||
<h4>Opt-in functionality</h4>
|
|
||||||
<p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
|
|
||||||
<p>One way to initialize all popovers on a page would be to select them by their <code>data-toggle</code> attribute:</p>
|
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$(function () {
|
$(function () {
|
||||||
$('[data-toggle="popover"]').popover()
|
$('[data-toggle="popover"]').popover()
|
||||||
})
|
})
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
</div>
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
|
||||||
<h4>Popovers in button groups and input groups require special setting</h4>
|
|
||||||
<p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
|
|
||||||
</div>
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
|
||||||
<h4>Don't try to show popovers on hidden elements</h4>
|
|
||||||
<p>Invoking <code>$(...).popover('show')</code> when the target element is <code>display: none;</code> will cause the popover to be incorrectly positioned.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bs-callout bs-callout-info">
|
|
||||||
<h4>Popovers on disabled elements require wrapper elements</h4>
|
|
||||||
<p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the popover to that <code><div></code> instead.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bs-callout bs-callout-info">
|
|
||||||
<h4>Multiple-line links</h4>
|
|
||||||
<p>Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### Static popover
|
## Example: Using the `container` option
|
||||||
|
|
||||||
|
{% highlight js %}
|
||||||
|
$(function () {
|
||||||
|
$('.example-popover').popover(
|
||||||
|
container: 'body'
|
||||||
|
)
|
||||||
|
})
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
## Static popover
|
||||||
|
|
||||||
Four options are available: top, right, bottom, and left aligned.
|
Four options are available: top, right, bottom, and left aligned.
|
||||||
|
|
||||||
<div class="bs-example bs-example-popover">
|
<div class="bd-example bd-example-popover">
|
||||||
<div class="popover popover-top">
|
<div class="popover popover-top">
|
||||||
<div class="popover-arrow"></div>
|
<div class="popover-arrow"></div>
|
||||||
<h3 class="popover-title">Popover top</h3>
|
<h3 class="popover-title">Popover top</h3>
|
||||||
@ -79,16 +78,16 @@ Four options are available: top, right, bottom, and left aligned.
|
|||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
### Live demo
|
## Live demo
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
<button type="button" class="btn btn-lg btn-danger bd-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
#### Four directions
|
### Four directions
|
||||||
|
|
||||||
<div class="bs-example popover-demo">
|
<div class="bd-example popover-demo">
|
||||||
<div class="bs-example-popovers">
|
<div class="bd-example-popovers">
|
||||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||||
Popover on left
|
Popover on left
|
||||||
</button>
|
</button>
|
||||||
@ -123,17 +122,18 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
|
|||||||
</button>
|
</button>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
#### Dismiss on next click
|
### Dismiss on next click
|
||||||
|
|
||||||
Use the `focus` trigger to dismiss popovers on the next click that the user makes.
|
Use the `focus` trigger to dismiss popovers on the next click that the user makes.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
{% callout danger %}
|
||||||
<h4>Specific markup required for dismiss-on-next-click</h4>
|
#### Specific markup required for dismiss-on-next-click
|
||||||
<p>For proper cross-browser and cross-platform behavior, you must use the <code><a></code> tag, <i>not</i> the <code><button></code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> attribute.</p>
|
|
||||||
</div>
|
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 %}
|
{% example html %}
|
||||||
<a tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
|
<a tabindex="0" class="btn btn-lg btn-danger bd-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
@ -258,10 +258,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
{% callout info %}
|
||||||
<h4>Data attributes for individual popovers</h4>
|
#### Data attributes for individual popovers
|
||||||
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
|
|
||||||
</div>
|
Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
|
|
||||||
|
|||||||
@ -56,9 +56,9 @@ The striped gradient can also be animated. Add `.progress-animated` to `.progres
|
|||||||
|
|
||||||
**Animated progress bars do not work in IE9 and Opera 12** as they don't support CSS3 animations.
|
**Animated progress bars do not work in IE9 and Opera 12** as they don't support CSS3 animations.
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<progress class="progress progress-striped" value="25" max="100">25%</progress>
|
<progress class="progress progress-striped" value="25" max="100">25%</progress>
|
||||||
<button type="button" class="btn btn-secondary bs-docs-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">
|
<button type="button" class="btn btn-secondary bd-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">
|
||||||
Toggle animation
|
Toggle animation
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
305
docs/components/reboot.md
Normal file
305
docs/components/reboot.md
Normal file
@ -0,0 +1,305 @@
|
|||||||
|
---
|
||||||
|
layout: page
|
||||||
|
title: Reboot
|
||||||
|
---
|
||||||
|
|
||||||
|
Several HTML elements are "rebooted" by Bootstrap for a more logical starting point and easier customization. This reboot builds upon Normalize, and as such, only uses element selectors to add our own opinionated resets.
|
||||||
|
|
||||||
|
## Approach
|
||||||
|
|
||||||
|
Here are our guidelines for choosing what to override in our reboot:
|
||||||
|
|
||||||
|
- Only use `rem`s and `em`s as the global units whenever possible.
|
||||||
|
- Avoid `margin-top` whenever possible. Vertical margins often collapse, sometimes yielding unexpected results. Moreover, a single direction of `margin` is an easier and quicker mental model to adopt.
|
||||||
|
|
||||||
|
|
||||||
|
## Headings and paragaphs
|
||||||
|
|
||||||
|
All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
{% markdown %}
|
||||||
|
# h1 heading
|
||||||
|
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
||||||
|
|
||||||
|
## h2 heading
|
||||||
|
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
||||||
|
|
||||||
|
### h3 heading
|
||||||
|
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
||||||
|
|
||||||
|
#### h4 heading
|
||||||
|
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
||||||
|
|
||||||
|
##### h5 heading
|
||||||
|
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
||||||
|
|
||||||
|
###### h6 heading
|
||||||
|
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
||||||
|
{% endmarkdown %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Lists
|
||||||
|
|
||||||
|
All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`.
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
{% markdown %}
|
||||||
|
* Lorem ipsum dolor sit amet
|
||||||
|
* Consectetur adipiscing elit
|
||||||
|
* Integer molestie lorem at massa
|
||||||
|
* Facilisis in pretium nisl aliquet
|
||||||
|
* Nulla volutpat aliquam velit
|
||||||
|
* Phasellus iaculis neque
|
||||||
|
* Purus sodales ultricies
|
||||||
|
* Vestibulum laoreet porttitor sem
|
||||||
|
* Ac tristique libero volutpat at
|
||||||
|
* Faucibus porta lacus fringilla vel
|
||||||
|
* Aenean sit amet erat nunc
|
||||||
|
* Eget porttitor lorem
|
||||||
|
|
||||||
|
1. Lorem ipsum dolor sit amet
|
||||||
|
2. Consectetur adipiscing elit
|
||||||
|
3. Integer molestie lorem at massa
|
||||||
|
4. Facilisis in pretium nisl aliquet
|
||||||
|
5. Nulla volutpat aliquam velit
|
||||||
|
6. Faucibus porta lacus fringilla vel
|
||||||
|
7. Aenean sit amet erat nunc
|
||||||
|
8. Eget porttitor lorem
|
||||||
|
{% endmarkdown %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
{% markdown %}
|
||||||
|
<dl>
|
||||||
|
<dt>Description lists</dt>
|
||||||
|
<dd>A description list is perfect for defining terms.</dd>
|
||||||
|
<dt>Euismod</dt>
|
||||||
|
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
|
||||||
|
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
|
||||||
|
<dt>Malesuada porta</dt>
|
||||||
|
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||||
|
</dl>
|
||||||
|
{% endmarkdown %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Tables
|
||||||
|
|
||||||
|
Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout.
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
<table>
|
||||||
|
<caption>
|
||||||
|
This is an example table, and this is it's caption to describe the contents.
|
||||||
|
</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Table heading</th>
|
||||||
|
<th>Table heading</th>
|
||||||
|
<th>Table heading</th>
|
||||||
|
<th>Table heading</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Code blocks
|
||||||
|
|
||||||
|
The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
{% markdown %}
|
||||||
|
```
|
||||||
|
pre {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
{% endmarkdown %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
## Inline elements
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
{% markdown %}
|
||||||
|
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. For example, `<section>` should be wrapped as inline. Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.
|
||||||
|
{% endmarkdown %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h1>Address</h1>
|
||||||
|
|
||||||
|
<address>
|
||||||
|
<strong>Twitter, Inc.</strong><br>
|
||||||
|
795 Folsom Ave, Suite 600<br>
|
||||||
|
San Francisco, CA 94107<br>
|
||||||
|
<abbr title="Phone">P:</abbr> (123) 456-7890
|
||||||
|
</address>
|
||||||
|
|
||||||
|
<address>
|
||||||
|
<strong>Full Name</strong><br>
|
||||||
|
<a href="mailto:#">first.last@example.com</a>
|
||||||
|
</address>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h1>Blockquote</h1>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||||
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h1>Tables</h1>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<caption>
|
||||||
|
This is an example table, and this is it's caption to describe the contents.
|
||||||
|
</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Table heading</th>
|
||||||
|
<th>Table heading</th>
|
||||||
|
<th>Table heading</th>
|
||||||
|
<th>Table heading</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h1>Forms</h1>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Example legend</legend>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="input">Example input</label>
|
||||||
|
<input type="text" id="input" placeholder="Example input">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="select">Example select</label>
|
||||||
|
<select id="select">
|
||||||
|
<option value="">Choose...</option>
|
||||||
|
<optgroup label="Option group 1">
|
||||||
|
<option value="">Option 1</option>
|
||||||
|
<option value="">Option 2</option>
|
||||||
|
<option value="">Option 3</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Option group 2">
|
||||||
|
<option value="">Option 4</option>
|
||||||
|
<option value="">Option 5</option>
|
||||||
|
<option value="">Option 6</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<formgroup>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" value="">
|
||||||
|
Check this checkbox
|
||||||
|
</label>
|
||||||
|
</formgroup>
|
||||||
|
|
||||||
|
<formgroup>
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||||
|
Option one is this and that
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||||
|
Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
||||||
|
Option three is disabled
|
||||||
|
</label>
|
||||||
|
</formgroup>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="textarea">Example textarea</label>
|
||||||
|
<textarea id="example" rows="3"></textarea>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="file">Example file</label>
|
||||||
|
<input type="file">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="progress">Example progress bar</label>
|
||||||
|
<progress value="25" min="0" max="100"></progress>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="range">Example range</label>
|
||||||
|
<input type="range">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="time">Example temporal</label>
|
||||||
|
<input type="date">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<button type="submit">Button submit</button>
|
||||||
|
<input type="submit" value="Input submit button">
|
||||||
|
<input type="button" value="Input button">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<button type="submit" disabled>Button submit</button>
|
||||||
|
<input type="submit" value="Input submit button" disabled>
|
||||||
|
<input type="button" value="Input button" disabled>
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
@ -7,11 +7,11 @@ title: Srollspy
|
|||||||
|
|
||||||
The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.
|
The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
|
<nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
|
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bd-example-js-navbar-scrollspy">
|
||||||
<span class="sr-only">Toggle navigation</span>
|
<span class="sr-only">Toggle navigation</span>
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
@ -19,7 +19,7 @@ The ScrollSpy plugin is for automatically updating nav targets based on scroll p
|
|||||||
</button>
|
</button>
|
||||||
<a class="navbar-brand" href="#">Project Name</a>
|
<a class="navbar-brand" href="#">Project Name</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
|
<div class="collapse navbar-collapse bd-example-js-navbar-scrollspy">
|
||||||
<ul class="nav navbar-nav">
|
<ul class="nav navbar-nav">
|
||||||
<li><a href="#fat">@fat</a></li>
|
<li><a href="#fat">@fat</a></li>
|
||||||
<li><a href="#mdo">@mdo</a></li>
|
<li><a href="#mdo">@mdo</a></li>
|
||||||
@ -93,15 +93,17 @@ After adding `position: relative;` in your CSS, call the scrollspy via JavaScrip
|
|||||||
$('body').scrollspy({ target: '#navbar-example' })
|
$('body').scrollspy({ target: '#navbar-example' })
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
{% callout danger %}
|
||||||
<h4>Resolvable ID targets required</h4>
|
#### Resolvable ID targets required
|
||||||
<p>Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the DOM like <code><div id="home"></div></code>.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
Navbar links must have resolvable id targets. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`.
|
||||||
<h4>Non-<code>:visible</code> target elements ignored</h4>
|
{% endcallout %}
|
||||||
<p>Target elements that are not <a href="http://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
|
|
||||||
</div>
|
{% callout info %}
|
||||||
|
#### Non-`:visible` target elements ignored
|
||||||
|
|
||||||
|
Target elements that are not [`:visible` according to jQuery](http://api.jquery.com/visible-selector/) will be ignored and their corresponding nav items will never be highlighted.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
|
|
||||||
|
|||||||
@ -3,15 +3,34 @@ layout: page
|
|||||||
title: Tooltips
|
title: Tooltips
|
||||||
---
|
---
|
||||||
|
|
||||||
## Examples
|
|
||||||
|
|
||||||
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
|
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
|
||||||
|
|
||||||
Tooltips with zero-length titles are never displayed.
|
## Overview
|
||||||
|
|
||||||
|
Things to know when using the popover plugin:
|
||||||
|
|
||||||
|
- 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).
|
||||||
|
- Triggering tooltips on hidden elements will not work.
|
||||||
|
- Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element.
|
||||||
|
- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
|
||||||
|
|
||||||
|
## Example: Enable popovers everywhere
|
||||||
|
|
||||||
|
One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute:
|
||||||
|
|
||||||
|
{% highlight js %}
|
||||||
|
$(function () {
|
||||||
|
$('[data-toggle="tooltip"]').tooltip()
|
||||||
|
})
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
Hover over the links below to see tooltips:
|
Hover over the links below to see tooltips:
|
||||||
|
|
||||||
<div class="bs-example tooltip-demo">
|
<div class="bd-example tooltip-demo">
|
||||||
<p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
<p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -20,7 +39,7 @@ Hover over the links below to see tooltips:
|
|||||||
|
|
||||||
Four options are available: top, right, bottom, and left aligned.
|
Four options are available: top, right, bottom, and left aligned.
|
||||||
|
|
||||||
<div class="bs-example bs-example-tooltip">
|
<div class="bd-example bd-example-tooltip">
|
||||||
<div class="tooltip left" role="tooltip">
|
<div class="tooltip left" role="tooltip">
|
||||||
<div class="tooltip-arrow"></div>
|
<div class="tooltip-arrow"></div>
|
||||||
<div class="tooltip-inner">
|
<div class="tooltip-inner">
|
||||||
@ -51,8 +70,8 @@ Four options are available: top, right, bottom, and left aligned.
|
|||||||
|
|
||||||
Hover over the buttons below to see their tooltips.
|
Hover over the buttons below to see their tooltips.
|
||||||
|
|
||||||
<div class="bs-example tooltip-demo">
|
<div class="bd-example tooltip-demo">
|
||||||
<div class="bs-example-tooltips">
|
<div class="bd-example-tooltips">
|
||||||
<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-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</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="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||||
@ -75,29 +94,6 @@ Hover over the buttons below to see their tooltips.
|
|||||||
</button>
|
</button>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
|
||||||
<h4>Opt-in functionality</h4>
|
|
||||||
<p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p>
|
|
||||||
<p>One way to initialize all tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p>
|
|
||||||
{% highlight js %}
|
|
||||||
$(function () {
|
|
||||||
$('[data-toggle="tooltip"]').tooltip()
|
|
||||||
})
|
|
||||||
{% endhighlight %}
|
|
||||||
</div>
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
|
||||||
<h4>Tooltips in button groups and input groups require special setting</h4>
|
|
||||||
<p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
|
|
||||||
</div>
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
|
||||||
<h4>Don't try to show tooltips on hidden elements</h4>
|
|
||||||
<p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bs-callout bs-callout-info">
|
|
||||||
<h4>Tooltips on disabled elements require wrapper elements</h4>
|
|
||||||
<p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the tooltip to that <code><div></code> instead.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
|
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
|
||||||
@ -112,11 +108,6 @@ $('#example').tooltip(options)
|
|||||||
|
|
||||||
The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
|
The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
|
||||||
<h4>Multiple-line links</h4>
|
|
||||||
<p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<!-- HTML to write -->
|
<!-- HTML to write -->
|
||||||
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
|
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
|
||||||
@ -228,10 +219,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
{% callout info %}
|
||||||
<h4>Data attributes for individual tooltips</h4>
|
#### Data attributes for individual tooltips
|
||||||
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
|
|
||||||
</div>
|
Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
### Methods
|
### Methods
|
||||||
|
|
||||||
|
|||||||
@ -29,10 +29,11 @@ Bootstrap includes six predefined button styles, each serving its own semantic p
|
|||||||
<button type="button" class="btn btn-link">Link</button>
|
<button type="button" class="btn btn-link">Link</button>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% callout warning %}
|
||||||
<h4>Conveying meaning to assistive technologies</h4>
|
#### Conveying meaning to assistive technologies
|
||||||
<p>Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
|
|
||||||
</div>
|
Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
## Button tags
|
## Button tags
|
||||||
|
|
||||||
@ -45,15 +46,17 @@ Use the button classes on an `<a>`, `<button>`, or `<input>` element.
|
|||||||
<input class="btn btn-secondary" type="submit" value="Submit">
|
<input class="btn btn-secondary" type="submit" value="Submit">
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% callout warning %}
|
||||||
<h4>Links acting as buttons</h4>
|
#### Links acting as buttons
|
||||||
<p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
If the `<a>` elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate `role="button"`.
|
||||||
<h4>Cross-browser rendering</h4>
|
{% endcallout %}
|
||||||
<p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
|
|
||||||
</div>
|
{% callout warning %}
|
||||||
|
#### Cross-browser rendering
|
||||||
|
|
||||||
|
As a best practice, **we highly recommend using the `<button>` element whenever possible** to ensure matching cross-browser rendering.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
## Sizes
|
## Sizes
|
||||||
|
|
||||||
@ -106,17 +109,20 @@ As `<a>` elements don't support the `disabled` attribute, you must add the `.dis
|
|||||||
<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
|
<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% callout warning %}
|
||||||
<h4>Cross-browser compatibility</h4>
|
#### Cross-browser compatibility
|
||||||
<p>If you add the <code>disabled</code> attribute to a <code><button></code>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
If you add the `disabled` attribute to a `<button>`, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.
|
||||||
<h4>Link functionality caveat</h4>
|
{% endcallout %}
|
||||||
<p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% callout warning %}
|
||||||
<h4>Context-specific usage</h4>
|
#### Link functionality caveat
|
||||||
<p>While button classes can be used on <code><a></code> and <code><button></code> elements, only <code><button></code> elements are supported within our nav and navbar components.</p>
|
|
||||||
</div>
|
This class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11\. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
|
{% callout warning %}
|
||||||
|
#### Context-specific usage
|
||||||
|
|
||||||
|
While button classes can be used on `<a>` and `<button>` elements, only `<button>` elements are supported within our nav and navbar components.
|
||||||
|
{% endcallout %}
|
||||||
|
|||||||
@ -9,6 +9,8 @@ Bootstrap normalizes common HTML5 form elements and adds a number of layout opti
|
|||||||
|
|
||||||
Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are set to `width: 100%;` by default. Wrap labels and controls in `.form-group` for optimum spacing.
|
Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are set to `width: 100%;` by default. Wrap labels and controls in `.form-group` for optimum spacing.
|
||||||
|
|
||||||
|
**Do not mix form groups directly with [input groups](/components/#input-groups).** Instead, nest the input group inside of the form group.
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<form>
|
<form>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@ -33,28 +35,16 @@ Individual form controls automatically receive some global styling. All textual
|
|||||||
</form>
|
</form>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
|
||||||
<h4>Don't mix form groups with input groups</h4>
|
|
||||||
<p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Inline forms
|
## Inline forms
|
||||||
|
|
||||||
Add `.form-inline` to your `<form>` or a parent element for left-aligned and inline-block controls. **This only applies to form controls within viewports that are at least 768px wide.**
|
Add `.form-inline` to your `<form>` or a parent element for left-aligned and inline-block controls. Inputs and selects are set to `width: auto;` in inline forms. Depending on your layout, additional custom widths may be required. As shown below, you should alwys include a `<label>` with each form control.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
**Inline forms only appear inline in viewports that are at least 768px wide.**
|
||||||
<h4>May require custom widths</h4>
|
|
||||||
<p>Inputs and selects have `width: 100%;` applied by default in Bootstrap. Within inline forms, we reset that to `width: auto;` so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
|
|
||||||
</div>
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
|
||||||
<h4>Always add labels</h4>
|
|
||||||
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### Visible labels
|
### Visible labels
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<div class="bs-example" data-example-id="simple-form-inline">
|
<div class="bd-example" data-example-id="simple-form-inline">
|
||||||
<form class="form-inline">
|
<form class="form-inline">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="exampleInputName2">Name</label>
|
<label for="exampleInputName2">Name</label>
|
||||||
@ -145,22 +135,29 @@ Examples of standard form controls supported in an example form layout.
|
|||||||
|
|
||||||
### Inputs
|
### Inputs
|
||||||
|
|
||||||
Most common form control, text-based input fields. Includes support for all HTML5 types: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, and `color`.
|
The most common form control, text-based input fields. Includes support for all HTML5 types:
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
- `text`
|
||||||
<h4>Type declaration required</h4>
|
- `password`
|
||||||
<p>Inputs will only be fully styled if their `type` is properly declared.</p>
|
- `datetime`
|
||||||
</div>
|
- `datetime-local`
|
||||||
|
- `date`
|
||||||
|
- `month`
|
||||||
|
- `time`
|
||||||
|
- `week`
|
||||||
|
- `number`
|
||||||
|
- `email`
|
||||||
|
- `url`
|
||||||
|
- `search`
|
||||||
|
- `tel`
|
||||||
|
- `color`
|
||||||
|
|
||||||
|
Since Bootstrap requires the HTML5 doctype, **all inputs must have a `type` attribute.**
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<input type="text" class="form-control" placeholder="Text input">
|
<input type="text" class="form-control" placeholder="Text input">
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
|
||||||
<h4>Input groups</h4>
|
|
||||||
<p>To add integrated text or buttons before and/or after any text-based `<input>`, <a href="../components/#input-groups">check out the input group component</a>.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### Textarea
|
### Textarea
|
||||||
|
|
||||||
Form control which supports multiple lines of text. Change `rows` attribute as necessary.
|
Form control which supports multiple lines of text. Change `rows` attribute as necessary.
|
||||||
@ -321,19 +318,14 @@ When you need to place plain text next to a form label within a form, use the `.
|
|||||||
|
|
||||||
## Focus state
|
## Focus state
|
||||||
|
|
||||||
We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`.
|
We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`. Shown below is a custom input that only **demonstrates** the `:focus` state on an `<input>` with `.form-control`.
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<form>
|
<form>
|
||||||
<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
|
<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
|
||||||
<h4>Demo `:focus` state</h4>
|
|
||||||
<p>The above example input uses custom styles in our documentation to demonstrate the `:focus` state on a `.form-control`.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Disabled states
|
## Disabled states
|
||||||
|
|
||||||
Add the `disabled` boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a `not-allowed` cursor.
|
Add the `disabled` boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a `not-allowed` cursor.
|
||||||
@ -367,15 +359,17 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
|
|||||||
</form>
|
</form>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% callout warning %}
|
||||||
<h4>Caveat about link functionality of `<a>`</h4>
|
#### Caveat about link functionality of `<a>`
|
||||||
<p>By default, browsers will treat all native form controls (<code><input></code>, <code><select></code> and <code><button></code> elements) inside a <code><fieldset disabled></code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code><a ... class="btn btn-*"></code> elements, these will only be given a style of <code>pointer-events: none</code>. As noted in the section about <a href="#buttons-disabled">disabled state for buttons</a> (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.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
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) (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.
|
||||||
<h4>Cross-browser compatibility</h4>
|
{% endcallout %}
|
||||||
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the <code>disabled</code> attribute on a <code><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
|
|
||||||
</div>
|
{% callout danger %}
|
||||||
|
#### Cross-browser compatibility
|
||||||
|
|
||||||
|
While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the `disabled` attribute on a `<fieldset>`. Use custom JavaScript to disable the fieldset in these browsers.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
## Readonly inputs
|
## Readonly inputs
|
||||||
|
|
||||||
@ -389,11 +383,13 @@ Add the `readonly` boolean attribute on an input to prevent modification of the
|
|||||||
|
|
||||||
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
|
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning" id="callout-form-validation-state-accessibility">
|
{% callout warning %}
|
||||||
<h4>Conveying validation state to assistive technologies and colorblind users</h4>
|
#### Conveying validation state to assistive technologies and colorblind users
|
||||||
<p>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.</p>
|
|
||||||
<p>Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <code><label></code> text itself (as is the case in the following code example), include a <a href="../components/#glyphicons">Glyphicon</a> (with appropriate alternative text using the <code>.sr-only</code> class - see the <a href="../components/#glyphicons-examples">Glyphicon examples</a>), or by providing an additional <a href="#forms-help-text">help text</a> block. Specifically for assistive technologies, invalid form controls can also be assigned an <code>aria-invalid="true"</code> attribute.</p>
|
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.
|
||||||
</div>
|
|
||||||
|
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.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<div class="form-group has-success">
|
<div class="form-group has-success">
|
||||||
@ -436,10 +432,11 @@ Bootstrap includes validation styles for error, warning, and success states on f
|
|||||||
|
|
||||||
You can also add optional feedback icons with the addition of `.has-feedback` and the right icon.
|
You can also add optional feedback icons with the addition of `.has-feedback` and the right icon.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% callout warning %}
|
||||||
<h4>Icons, labels, and input groups</h4>
|
#### Icons, labels, and input groups
|
||||||
<p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the `sr-only` class. If you must do without labels, adjust the `top` value of the feedback icon. For input groups, adjust the `right` value to an appropriate pixel value depending on the width of your addon.</p>
|
|
||||||
</div>
|
Manual positioning of feedback icons is required for inputs without a label and for [input groups](../components#input-groups) with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the `sr-only` class. If you must do without labels, adjust the `top` value of the feedback icon. For input groups, adjust the `right` value to an appropriate pixel value depending on the width of your addon.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<div class="form-group has-success has-feedback">
|
<div class="form-group has-success has-feedback">
|
||||||
|
|||||||
@ -9,7 +9,7 @@ Opt your images into responsive behavior (so they never become larger than their
|
|||||||
|
|
||||||
Images in Bootstrap are responsive by default. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
|
Images in Bootstrap are responsive by default. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<img data-src="holder.js/100%x250" class="img-responsive" alt="Generic responsive image">
|
<img data-src="holder.js/100%x250" class="img-responsive" alt="Generic responsive image">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -17,16 +17,17 @@ Images in Bootstrap are responsive by default. `max-width: 100%;` and `height: a
|
|||||||
<img src="..." class="img-responsive" alt="Responsive image">
|
<img src="..." class="img-responsive" alt="Responsive image">
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% callout warning %}
|
||||||
<h4>SVG images and IE 9-10</h4>
|
#### SVG images and IE 9-10
|
||||||
<p>In Internet Explorer 9-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
|
|
||||||
</div>
|
In Internet Explorer 9-10, SVG images with `.img-responsive` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
## Image shapes
|
## Image shapes
|
||||||
|
|
||||||
Add classes to an `<img>` element to easily style images in any project.
|
Add classes to an `<img>` element to easily style images in any project.
|
||||||
|
|
||||||
<div class="bs-example bs-example-images">
|
<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-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-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">
|
<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">
|
||||||
@ -42,7 +43,7 @@ Add classes to an `<img>` element to easily style images in any project.
|
|||||||
|
|
||||||
Align images with the [helper float classes](/components/helpers) or [text alignment classes](/components/helpers). A simple centering class can also be used for `block` level images.
|
Align images with the [helper float classes](/components/helpers) or [text alignment classes](/components/helpers). A simple centering class can also be used for `block` level images.
|
||||||
|
|
||||||
<div class="bs-example bs-example-images">
|
<div class="bd-example bd-example-images">
|
||||||
<img data-src="holder.js/200x200" class="img-rounded pull-left" alt="A generic square placeholder image with rounded corners">
|
<img data-src="holder.js/200x200" class="img-rounded pull-left" alt="A generic square placeholder image with rounded corners">
|
||||||
<img data-src="holder.js/200x200" class="img-rounded pull-right" alt="A generic square placeholder image with rounded corners">
|
<img data-src="holder.js/200x200" class="img-rounded pull-right" alt="A generic square placeholder image with rounded corners">
|
||||||
</div>
|
</div>
|
||||||
@ -52,7 +53,7 @@ Align images with the [helper float classes](/components/helpers) or [text align
|
|||||||
<img src="..." class="img-rounded pull-right" alt="...">
|
<img src="..." class="img-rounded pull-right" alt="...">
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="bs-example bs-example-images">
|
<div class="bd-example bd-example-images">
|
||||||
<img data-src="holder.js/200x200" class="img-rounded center-block" style="display: block;" alt="A generic square placeholder image with rounded corners">
|
<img data-src="holder.js/200x200" class="img-rounded center-block" style="display: block;" alt="A generic square placeholder image with rounded corners">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -60,7 +61,7 @@ Align images with the [helper float classes](/components/helpers) or [text align
|
|||||||
<img src="..." class="img-rounded center-block" style="display: block;" alt="...">
|
<img src="..." class="img-rounded center-block" style="display: block;" alt="...">
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="bs-example bs-example-images">
|
<div class="bd-example bd-example-images">
|
||||||
<div class="text-center">
|
<div class="text-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="img-rounded" alt="A generic square placeholder image with rounded corners">
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -342,7 +342,7 @@ Use contextual classes to color table rows or individual cells.
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<table class="table">
|
<table class="table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -433,23 +433,27 @@ Use contextual classes to color table rows or individual cells.
|
|||||||
|
|
||||||
Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
|
Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning" id="callout-tables-responsive-overflow">
|
{% callout warning %}
|
||||||
<h4>Vertical clipping/truncation</h4>
|
#### Vertical clipping/truncation
|
||||||
<p>Responsive tables make use of <code>overflow-y: hidden</code>, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.</p>
|
|
||||||
</div>
|
Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
|
{% callout warning %}
|
||||||
|
#### Firefox and fieldsets
|
||||||
|
|
||||||
|
Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we **don't** provide in Bootstrap:
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
|
||||||
<h4>Firefox and fieldsets</h4>
|
|
||||||
<p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
|
|
||||||
{% highlight css %}
|
{% highlight css %}
|
||||||
@-moz-document url-prefix() {
|
@-moz-document url-prefix() {
|
||||||
fieldset { display: table-cell; }
|
fieldset { display: table-cell; }
|
||||||
}
|
}
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
<p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bs-example">
|
For more information, read [this Stack Overflow answer](http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685).
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="table">
|
<table class="table">
|
||||||
<thead>
|
<thead>
|
||||||
|
|||||||
@ -20,7 +20,7 @@ These styles can be found within `scaffolding.less`.
|
|||||||
|
|
||||||
All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
|
All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
|
||||||
|
|
||||||
<div class="bs-example bs-example-type">
|
<div class="bd-example bd-example-type">
|
||||||
<table class="table">
|
<table class="table">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
@ -62,7 +62,7 @@ All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` cla
|
|||||||
|
|
||||||
Create lighter, secondary text in any heading with a generic `<small>` tag or the `.small` class.
|
Create lighter, secondary text in any heading with a generic `<small>` tag or the `.small` class.
|
||||||
|
|
||||||
<div class="bs-example bs-example-type">
|
<div class="bd-example bd-example-type">
|
||||||
<table class="table">
|
<table class="table">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
@ -131,10 +131,7 @@ Styling for common inline HTML5 elements.
|
|||||||
<p><em>This line rendered as italicized text.</em></p>
|
<p><em>This line rendered as italicized text.</em></p>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance while `<i>` is mostly for voice, technical terms, etc.
|
||||||
<h4>Alternate elements</h4>
|
|
||||||
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Alignment classes
|
## Alignment classes
|
||||||
|
|
||||||
|
|||||||
@ -285,12 +285,49 @@ body {
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, button, select, textarea {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-family: inherit;
|
margin-top: 0;
|
||||||
font-size: inherit;
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
cursor: help;
|
||||||
|
border-bottom-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-style: normal;
|
||||||
line-height: inherit;
|
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 {
|
a {
|
||||||
color: #0275d8;
|
color: #0275d8;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -305,44 +342,78 @@ a:focus {
|
|||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
pre {
|
||||||
max-width: 100%;
|
margin-top: 0;
|
||||||
height: auto;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-rounded {
|
|
||||||
border-radius: .3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-thumbnail {
|
|
||||||
padding: .25rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: .25rem;
|
|
||||||
-webkit-transition: all .2s ease-in-out;
|
|
||||||
-o-transition: all .2s ease-in-out;
|
|
||||||
transition: all .2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-circle {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
border: 0;
|
}
|
||||||
border-top: .0625rem solid #eceeef;
|
|
||||||
|
figure {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button, select, textarea {
|
||||||
|
margin: 0;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
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-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
output {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
margin-top: 0;
|
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
@ -392,16 +463,18 @@ h6, .h6 {
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead {
|
.lead {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border: 0;
|
||||||
|
border-top: .0625rem solid #eceeef;
|
||||||
|
}
|
||||||
|
|
||||||
small, .small {
|
small, .small {
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
}
|
}
|
||||||
@ -411,14 +484,6 @@ mark, .mark {
|
|||||||
background-color: #fcf8e3;
|
background-color: #fcf8e3;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul, ol {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: .5;
|
|
||||||
}
|
|
||||||
ul ul, ul ol, ol ul, ol ol {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-unstyled, .list-inline, .nav {
|
.list-unstyled, .list-inline, .nav {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
@ -433,23 +498,6 @@ ul ul, ul ol, ol ul, ol ol {
|
|||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
dl {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt, dd {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dl-horizontal {
|
.dl-horizontal {
|
||||||
margin-right: -1.5rem;
|
margin-right: -1.5rem;
|
||||||
margin-left: -1.5rem;
|
margin-left: -1.5rem;
|
||||||
@ -462,11 +510,6 @@ dd {
|
|||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
abbr[title], abbr[data-original-title] {
|
|
||||||
cursor: help;
|
|
||||||
border-bottom: 1px dotted #818a91;
|
|
||||||
}
|
|
||||||
|
|
||||||
.initialism {
|
.initialism {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@ -474,7 +517,7 @@ abbr[title], abbr[data-original-title] {
|
|||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
padding: .5rem 1rem;
|
padding: .5rem 1rem;
|
||||||
margin: 0 0 1rem;
|
margin-bottom: 1rem;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
border-left: .25rem solid #eceeef;
|
border-left: .25rem solid #eceeef;
|
||||||
}
|
}
|
||||||
@ -505,10 +548,32 @@ blockquote footer:before {
|
|||||||
content: "\00A0 \2014";
|
content: "\00A0 \2014";
|
||||||
}
|
}
|
||||||
|
|
||||||
address {
|
.img-responsive, .carousel-inner > .carousel-item > img, .carousel-inner > .carousel-item > a > img {
|
||||||
margin-bottom: 1;
|
display: block;
|
||||||
font-style: normal;
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-rounded {
|
||||||
|
border-radius: .3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-thumbnail {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
padding: .25rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: .25rem;
|
||||||
|
-webkit-transition: all .2s ease-in-out;
|
||||||
|
-o-transition: all .2s ease-in-out;
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-circle {
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
code, kbd, pre, samp {
|
code, kbd, pre, samp {
|
||||||
@ -1468,21 +1533,6 @@ pre code {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
caption {
|
|
||||||
padding-top: .75rem;
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
color: #818a91;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
@ -1634,33 +1684,8 @@ th {
|
|||||||
border: 1px solid #eceeef;
|
border: 1px solid #eceeef;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: 1;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: inherit;
|
|
||||||
color: #373a3c;
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: inline-block;
|
margin-bottom: .5rem;
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="search"] {
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"], input[type="checkbox"] {
|
input[type="radio"], input[type="checkbox"] {
|
||||||
@ -1669,19 +1694,6 @@ input[type="radio"], input[type="checkbox"] {
|
|||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="file"] {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
select[multiple], select[size] {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
|
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
|
||||||
outline: thin dotted;
|
outline: thin dotted;
|
||||||
outline: 5px auto -webkit-focus-ring-color;
|
outline: 5px auto -webkit-focus-ring-color;
|
||||||
@ -1689,7 +1701,6 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focu
|
|||||||
}
|
}
|
||||||
|
|
||||||
output {
|
output {
|
||||||
display: block;
|
|
||||||
padding-top: 1.5rem;
|
padding-top: 1.5rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
@ -2095,7 +2106,6 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
|
|||||||
.btn {
|
.btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: .5rem .75rem;
|
padding: .5rem .75rem;
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|||||||
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -7,7 +7,7 @@ title: Examples
|
|||||||
|
|
||||||
Examples that focus on implementing uses of built-in components provided by Bootstrap.
|
Examples that focus on implementing uses of built-in components provided by Bootstrap.
|
||||||
|
|
||||||
<div class="row bs-examples">
|
<div class="row bd-examples">
|
||||||
<div class="col-xs-6 col-md-4">
|
<div class="col-xs-6 col-md-4">
|
||||||
<a href="{{ site.baseurl }}examples/starter-template/">
|
<a href="{{ site.baseurl }}examples/starter-template/">
|
||||||
<img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/starter-template.jpg" alt="">
|
<img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/starter-template.jpg" alt="">
|
||||||
@ -44,7 +44,7 @@ Examples that focus on implementing uses of built-in components provided by Boot
|
|||||||
|
|
||||||
Taking the default navbar component and showing how it can be moved, placed, and extended.
|
Taking the default navbar component and showing how it can be moved, placed, and extended.
|
||||||
|
|
||||||
<div class="row bs-examples">
|
<div class="row bd-examples">
|
||||||
<div class="col-xs-6 col-md-4">
|
<div class="col-xs-6 col-md-4">
|
||||||
<a href="{{ site.baseurl }}examples/navbar/">
|
<a href="{{ site.baseurl }}examples/navbar/">
|
||||||
<img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/navbar.jpg" alt="">
|
<img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/navbar.jpg" alt="">
|
||||||
@ -74,7 +74,7 @@ Taking the default navbar component and showing how it can be moved, placed, and
|
|||||||
|
|
||||||
Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.
|
Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.
|
||||||
|
|
||||||
<div class="row bs-examples">
|
<div class="row bd-examples">
|
||||||
<div class="col-xs-6 col-md-4">
|
<div class="col-xs-6 col-md-4">
|
||||||
<a href="{{ site.baseurl }}examples/cover/">
|
<a href="{{ site.baseurl }}examples/cover/">
|
||||||
<img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/cover.jpg" alt="">
|
<img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/cover.jpg" alt="">
|
||||||
@ -143,7 +143,7 @@ Brand new components and templates to help folks quickly get started with Bootst
|
|||||||
|
|
||||||
Examples that focus on future-friendly features or techniques.
|
Examples that focus on future-friendly features or techniques.
|
||||||
|
|
||||||
<div class="row bs-examples">
|
<div class="row bd-examples">
|
||||||
<div class="col-xs-6 col-md-4">
|
<div class="col-xs-6 col-md-4">
|
||||||
<a href="{{ site.baseurl }}examples/offcanvas/">
|
<a href="{{ site.baseurl }}examples/offcanvas/">
|
||||||
<img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/offcanvas.jpg" alt="">
|
<img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/offcanvas.jpg" alt="">
|
||||||
|
|||||||
@ -9,11 +9,13 @@ Bootstrap follows common web standards and—with minimal extra effort—can be
|
|||||||
|
|
||||||
If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links/)). Using the `.sr-only` class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).
|
If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links/)). Using the `.sr-only` class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger" id="callout-skiplinks">
|
{% callout danger %}
|
||||||
<p>Due to long-standing shortcomings/bugs in Chrome (see <a href="https://code.google.com/p/chromium/issues/detail?id=262171" title="Chromium bug tracker - Issue 262171: Focus should cycle from named anchor">issue 262171 in the Chromium bug tracker</a>) and Internet Explorer (see this article on <a href="http://accessibleculture.org/articles/2010/05/in-page-links/">in-page links and focus order</a>), you will need to make sure that the target of your skip link is at least programmatically focusable by adding <code>tabindex="-1"</code>.</p>
|
Due to long-standing shortcomings/bugs in Chrome (see [issue 262171 in the Chromium bug tracker](https://code.google.com/p/chromium/issues/detail?id=262171 "Chromium bug tracker - Issue 262171: Focus should cycle from named anchor")) and Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`.
|
||||||
<p>In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with <code>tabindex="-1"</code> when they are clicked with the mouse) with <code>#content:focus { outline: none; }</code>.</p>
|
|
||||||
<p>Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.</p>
|
In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with `tabindex="-1"` when they are clicked with the mouse) with `#content:focus { outline: none; }`.
|
||||||
</div>
|
|
||||||
|
Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -5,10 +5,11 @@ title: Contents
|
|||||||
|
|
||||||
Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each form's contents and structure below.
|
Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each form's contents and structure below.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning" id="jquery-required">
|
{% callout warning %}
|
||||||
<h4>jQuery required</h4>
|
#### jQuery required
|
||||||
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="../quick-start">starter template</a>. <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
|
|
||||||
</div>
|
Please note that **all JavaScript plugins require jQuery** to be included, as shown in the [starter template](../quick-start). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.current_version }}/bower.json) to see which versions of jQuery are supported.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
### Precompiled Bootstrap
|
### Precompiled Bootstrap
|
||||||
|
|
||||||
|
|||||||
@ -87,10 +87,11 @@ $.fn.tooltip.Constructor.VERSION // => "{{ site.current_version }}"
|
|||||||
|
|
||||||
Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.
|
Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning" id="callout-third-party-libs">
|
{% callout warning %}
|
||||||
<h4>Third-party libraries</h4>
|
#### Third-party libraries
|
||||||
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own.</p>
|
|
||||||
</div>
|
**Bootstrap does not officially support third-party JavaScript libraries** like Prototype or jQuery UI. Despite `.noConflict` and namespaced events, there may be compatibility problems that you need to fix on your own.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
## Transitions
|
## Transitions
|
||||||
|
|
||||||
|
|||||||
@ -3,11 +3,11 @@ layout: home
|
|||||||
title: Bootstrap · The world's most popular mobile-first and responsive front-end framework.
|
title: Bootstrap · The world's most popular mobile-first and responsive front-end framework.
|
||||||
---
|
---
|
||||||
|
|
||||||
<main class="bs-docs-masthead" id="content" role="main" tabindex="-1">
|
<main class="bd-masthead" id="content" role="main" tabindex="-1">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{% include nav-home.html %}
|
{% include nav-home.html %}
|
||||||
|
|
||||||
<span class="bs-docs-booticon outline">B</span>
|
<span class="bd-booticon outline">B</span>
|
||||||
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
|
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
|
||||||
<p class="lead">
|
<p class="lead">
|
||||||
<a href="getting-started#download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>
|
<a href="getting-started#download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>
|
||||||
@ -17,7 +17,7 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<div class="bs-docs-featurette">
|
<div class="bd-featurette">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="bs-docs-featurette-title">Easy to get started.</h2>
|
<h2 class="bs-docs-featurette-title">Easy to get started.</h2>
|
||||||
<p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the <a href="#">Bootstrap CDN</a>.</p>
|
<p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the <a href="#">Bootstrap CDN</a>.</p>
|
||||||
@ -38,9 +38,9 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-featurette">
|
<div class="bd-featurette">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="bs-docs-featurette-title">Designed for everyone, everywhere.</h2>
|
<h2 class="bd-featurette-title">Designed for everyone, everywhere.</h2>
|
||||||
<p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
|
<p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
|
||||||
|
|
||||||
<hr class="half-rule">
|
<hr class="half-rule">
|
||||||
@ -70,14 +70,14 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bs-docs-featurette">
|
<div class="bd-featurette">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="bs-docs-featurette-title">Built with Bootstrap.</h2>
|
<h2 class="bd-featurette-title">Built with Bootstrap.</h2>
|
||||||
<p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p>
|
<p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p>
|
||||||
|
|
||||||
<hr class="half-rule">
|
<hr class="half-rule">
|
||||||
|
|
||||||
<div class="row bs-docs-featured-sites">
|
<div class="row bd-featured-sites">
|
||||||
{% for showcase in site.data.showcase %}
|
{% for showcase in site.data.showcase %}
|
||||||
<div class="col-xs-6 col-sm-3">
|
<div class="col-xs-6 col-sm-3">
|
||||||
<a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}">
|
<a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}">
|
||||||
|
|||||||
@ -6,19 +6,22 @@ title: Buttons
|
|||||||
|
|
||||||
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
|
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
{% callout danger %}
|
||||||
<h4>Cross-browser compatibility</h4>
|
#### Cross-browser compatibility
|
||||||
<p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a>.</p>
|
|
||||||
</div>
|
[Firefox persists form control states (disabledness and checkedness) across page loads](https://github.com/twbs/bootstrap/issues/793). A workaround for this is to use `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
|
|
||||||
## Stateful
|
## Stateful
|
||||||
|
|
||||||
Add `data-loading-text="Loading..."` to use a loading state on a button.
|
Add `data-loading-text="Loading..."` to use a loading state on a button.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
{% callout info %}
|
||||||
<h4>Use whichever state you like!</h4>
|
#### Use whichever state you like!
|
||||||
<p>For the sake of this demonstration, we are using <code>data-loading-text</code> and <code>$().button('loading')</code>, but that's not the only state you can use. <a href="#buttons-methods">See more on this below in the <code>$().button(string)</code> documentation</a>.</p>
|
|
||||||
</div>
|
For the sake of this demonstration, we are using `data-loading-text` and `$().button('loading')`, but that's not the only state you can use. [See more on this below in the `$().button(string)` documentation](#buttons-methods).
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
|
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
|
||||||
@ -43,26 +46,30 @@ Add `data-toggle="button"` to activate toggling on a single button.
|
|||||||
</button>
|
</button>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% callout warning %}
|
||||||
<h4>Pre-toggled buttons need <code>.active</code> and <code>aria-pressed="true"</code></h4>
|
#### Pre-toggled buttons need `.active` and `aria-pressed="true"`
|
||||||
<p>For pre-toggled buttons, you must add the <code>.active</code> class and the <code>aria-pressed="true"</code> attribute to the <code>button</code> yourself.</p>
|
|
||||||
</div>
|
For pre-toggled buttons, you must add the `.active` class and the `aria-pressed="true"` attribute to the `button` yourself.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
## Checkbox and radio
|
## Checkbox and radio
|
||||||
|
|
||||||
Add `data-toggle="buttons"` to a `.btn-group` containing checkbox or radio inputs to enable toggling in their respective styles.
|
Add `data-toggle="buttons"` to a `.btn-group` containing checkbox or radio inputs to enable toggling in their respective styles.
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% callout warning %}
|
||||||
<h4>Preselected options need <code>.active</code></h4>
|
#### Preselected options need `.active`
|
||||||
<p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
|
|
||||||
</div>
|
For preselected options, you must add the `.active` class to the input's `label` yourself.
|
||||||
<div class="bs-callout bs-callout-warning">
|
{% endcallout %}
|
||||||
<h4>Visual checked state only updated on click</h4>
|
|
||||||
<p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code><input type="reset"></code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
|
{% callout warning %}
|
||||||
</div>
|
#### Visual checked state only updated on click
|
||||||
|
|
||||||
|
If the checked state of a checkbox button is updated without firing a `click` event on the button (e.g. via `<input type="reset">` or via setting the `checked` property of the input), you will need to toggle the `.active` class on the input's `label` yourself.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<div class="bs-example">
|
<div class="bd-example">
|
||||||
<div class="btn-group" data-toggle="buttons">
|
<div class="btn-group" data-toggle="buttons">
|
||||||
<label class="btn btn-primary active">
|
<label class="btn btn-primary active">
|
||||||
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
|
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
|
||||||
|
|||||||
@ -7,7 +7,7 @@ title: Tabs
|
|||||||
|
|
||||||
Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.
|
Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.
|
||||||
|
|
||||||
<div class="bs-example bs-example-tabs" role="tabpanel">
|
<div class="bd-example bd-example-tabs" role="tabpanel">
|
||||||
<ul id="myTab" class="nav nav-tabs" role="tablist">
|
<ul id="myTab" class="nav nav-tabs" role="tablist">
|
||||||
<li role="presentation" class="active">
|
<li role="presentation" class="active">
|
||||||
<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
|
<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
|
||||||
@ -42,10 +42,11 @@ Add quick, dynamic tab functionality to transition through panes of local conten
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-info">
|
{% callout info %}
|
||||||
<h4>Extends tabbed navigation</h4>
|
#### Extends tabbed navigation
|
||||||
<p>This plugin extends the <a href="../components/#nav-tabs">tabbed navigation component</a> to add tabbable areas.</p>
|
|
||||||
</div>
|
This plugin extends the [tabbed navigation component](../components/#nav-tabs) to add tabbable areas.
|
||||||
|
{% endcallout %}
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|||||||
@ -8,7 +8,6 @@
|
|||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 0; // For input.btn
|
|
||||||
font-weight: $btn-font-weight;
|
font-weight: $btn-font-weight;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
// Account for jankitude on images
|
// Account for jankitude on images
|
||||||
> img,
|
> img,
|
||||||
> a > img {
|
> a > img {
|
||||||
// @extend .img-responsive;
|
@extend .img-responsive;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,36 +2,21 @@
|
|||||||
// Forms
|
// Forms
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
// legend {
|
||||||
|
// display: block;
|
||||||
|
// width: 100%;
|
||||||
|
// padding: 0;
|
||||||
|
// margin-bottom: $line-height-computed;
|
||||||
|
// font-size: ($font-size-base * 1.5);
|
||||||
|
// line-height: inherit;
|
||||||
|
// color: $legend-color;
|
||||||
|
// border: 0;
|
||||||
|
// border-bottom: 1px solid $legend-border-color;
|
||||||
|
// }
|
||||||
|
|
||||||
// Normalize non-controls
|
// todo: turn this into a class
|
||||||
//
|
|
||||||
// Restyle and baseline non-control form elements.
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
|
|
||||||
// so we reset that to ensure it behaves more like a standard block element.
|
|
||||||
// See https://github.com/twbs/bootstrap/issues/12359.
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: $line-height-computed;
|
|
||||||
font-size: ($font-size-base * 1.5);
|
|
||||||
line-height: inherit;
|
|
||||||
color: $legend-color;
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid $legend-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: inline-block;
|
margin-bottom: .5rem;
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -41,10 +26,10 @@ label {
|
|||||||
// is required to ensure optimum display with or without those classes to better
|
// is required to ensure optimum display with or without those classes to better
|
||||||
// address browser inconsistencies.
|
// address browser inconsistencies.
|
||||||
|
|
||||||
// Override content-box in Normalize (* isn't specific enough)
|
// // Override content-box in Normalize (* isn't specific enough)
|
||||||
input[type="search"] {
|
// input[type="search"] {
|
||||||
box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Position radios and checkboxes better
|
// Position radios and checkboxes better
|
||||||
input[type="radio"],
|
input[type="radio"],
|
||||||
@ -54,22 +39,22 @@ input[type="checkbox"] {
|
|||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set the height of file controls to match text inputs
|
// // Set the height of file controls to match text inputs
|
||||||
input[type="file"] {
|
// input[type="file"] {
|
||||||
display: block;
|
// display: block;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Make range inputs behave like textual form controls
|
// // Make range inputs behave like textual form controls
|
||||||
input[type="range"] {
|
// input[type="range"] {
|
||||||
display: block;
|
// display: block;
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Make multiple select elements height not fixed
|
// // Make multiple select elements height not fixed
|
||||||
select[multiple],
|
// select[multiple],
|
||||||
select[size] {
|
// select[size] {
|
||||||
height: auto;
|
// height: auto;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Focus for file, radio, and checkbox
|
// Focus for file, radio, and checkbox
|
||||||
input[type="file"]:focus,
|
input[type="file"]:focus,
|
||||||
@ -80,7 +65,7 @@ input[type="checkbox"]:focus {
|
|||||||
|
|
||||||
// Adjust output element
|
// Adjust output element
|
||||||
output {
|
output {
|
||||||
display: block;
|
// display: block;
|
||||||
padding-top: ($padding-base-vertical + 1);
|
padding-top: ($padding-base-vertical + 1);
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
line-height: $line-height-base;
|
line-height: $line-height-base;
|
||||||
|
|||||||
28
scss/_images.scss
Normal file
28
scss/_images.scss
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
// Responsive images (ensure images don't scale beyond their parents)
|
||||||
|
.img-responsive {
|
||||||
|
@include img-responsive();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rounded corners
|
||||||
|
.img-rounded {
|
||||||
|
@include border-radius($border-radius-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Image thumbnails
|
||||||
|
.img-thumbnail {
|
||||||
|
padding: $thumbnail-padding;
|
||||||
|
line-height: $line-height-base;
|
||||||
|
background-color: $thumbnail-bg;
|
||||||
|
border: 1px solid $thumbnail-border;
|
||||||
|
border-radius: $thumbnail-border-radius;
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
|
@include box-shadow(0 1px 2px rgba(0,0,0,.075));
|
||||||
|
|
||||||
|
// Keep them at most 100% wide
|
||||||
|
@include img-responsive(inline-block);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Perfect circle
|
||||||
|
.img-circle {
|
||||||
|
border-radius: 50%; // set radius in percents
|
||||||
|
}
|
||||||
284
scss/_reboot.scss
Normal file
284
scss/_reboot.scss
Normal file
@ -0,0 +1,284 @@
|
|||||||
|
// Reboot
|
||||||
|
//
|
||||||
|
// Global resets to common HTML elements and more for easier usage by Bootstrap.
|
||||||
|
// Builds on the resets of Normalize.css.
|
||||||
|
|
||||||
|
|
||||||
|
// Reset the box-sizing
|
||||||
|
//
|
||||||
|
// Change from `box-sizing: content-box` to `border-box` so that when you add
|
||||||
|
// `padding` or `border`s to an element, the overall declared `width` does not
|
||||||
|
// change. For example, `width: 100px;` will always be `100px` despite the
|
||||||
|
// `border: 10px solid red;` and `padding: 20px;`.
|
||||||
|
//
|
||||||
|
// Heads up! This reset may cause conflicts with some third-party widgets. For
|
||||||
|
// recommendations on resolving such conflicts, see
|
||||||
|
// http://getbootstrap.com/getting-started/#third-box-sizing.
|
||||||
|
//
|
||||||
|
// Credit: shttp://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
||||||
|
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Make viewport responsive
|
||||||
|
//
|
||||||
|
// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
|
||||||
|
// some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
|
||||||
|
// Eventually @viewport will replace <meta name="viewport">. It's been manually
|
||||||
|
// prefixed for forward-compatibility.
|
||||||
|
//
|
||||||
|
// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
|
||||||
|
// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
|
||||||
|
// and the fix for that involves a snippet of JavaScript to sniff the user agent
|
||||||
|
// and apply some conditional CSS.
|
||||||
|
//
|
||||||
|
// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
|
||||||
|
|
||||||
|
@-moz-viewport { width: device-width; }
|
||||||
|
@-ms-viewport { width: device-width; }
|
||||||
|
@-o-viewport { width: device-width; }
|
||||||
|
@-webkit-viewport { width: device-width; }
|
||||||
|
@viewport { width: device-width; }
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Reset HTML, body, and more
|
||||||
|
//
|
||||||
|
|
||||||
|
html {
|
||||||
|
// Sets a specific default `font-size` for user with `rem` type scales.
|
||||||
|
font-size: $font-size-root;
|
||||||
|
// Changes the default tap highlight to be completely transparent in iOS.
|
||||||
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
// Make the `body` use the `font-size-root`
|
||||||
|
font-family: $font-family-base;
|
||||||
|
font-size: $font-size-base;
|
||||||
|
line-height: $line-height-base;
|
||||||
|
// Go easy on the eyes and use something other than `#000` for text
|
||||||
|
color: $text-color;
|
||||||
|
// By default, `<body>` has no `background-color` so we set one as a best practice.
|
||||||
|
background-color: $body-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Typography
|
||||||
|
//
|
||||||
|
|
||||||
|
// Remove top margins from headings
|
||||||
|
//
|
||||||
|
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
||||||
|
// margin for easier control within type scales as it avoids margin collapsing.
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset margins on paragraphs
|
||||||
|
//
|
||||||
|
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
||||||
|
// bottom margin to use `rem` units instead of `em`.
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
cursor: help;
|
||||||
|
border-bottom-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
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-left: 0; // Undo browser default
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Links
|
||||||
|
//
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $link-color;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
@include hover-focus {
|
||||||
|
color: $link-hover-color;
|
||||||
|
text-decoration: $link-hover-decoration;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include tab-focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Code
|
||||||
|
//
|
||||||
|
|
||||||
|
pre {
|
||||||
|
// Remove browser default top margin
|
||||||
|
margin-top: 0;
|
||||||
|
// Reset browser default of `1em` to use `rem`s
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Figures
|
||||||
|
//
|
||||||
|
|
||||||
|
figure {
|
||||||
|
// Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
|
||||||
|
// We reset that to create a better flow in-page.
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Images
|
||||||
|
//
|
||||||
|
|
||||||
|
img {
|
||||||
|
// By default, `<img>`s are `inline-block`. This assumes that, and vertically
|
||||||
|
// centers them. This won't apply should you reset them to `block` level.
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// iOS "clickable elements" fix for role="button"
|
||||||
|
//
|
||||||
|
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
|
||||||
|
// for traditionally non-focusable elements with role="button"
|
||||||
|
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||||
|
// Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged
|
||||||
|
|
||||||
|
[role="button"] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Tables
|
||||||
|
//
|
||||||
|
|
||||||
|
table {
|
||||||
|
// Reset for nesting within parents with `background-color`.
|
||||||
|
background-color: $table-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
caption-side: bottom;
|
||||||
|
padding-top: $table-cell-padding;
|
||||||
|
padding-bottom: $table-cell-padding;
|
||||||
|
color: $text-muted;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
// Centered by default, but left-align-ed to match the `td`s below.
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Forms
|
||||||
|
//
|
||||||
|
|
||||||
|
label {
|
||||||
|
// Allow labels can use `margin` for spacing.
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
// Remove all `margin`s so our classes don't have to do it themselves.
|
||||||
|
margin: 0;
|
||||||
|
// Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
|
||||||
|
// properly inherited. However, `line-height` isn't addressed there. Using this
|
||||||
|
// ensures we don't need to unnessarily redeclare the global font stack.
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
// Reset the default outline behavior of fieldsets so they don't affect page layout.
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
|
||||||
|
// so we reset that to ensure it behaves more like a standard block element.
|
||||||
|
// See https://github.com/twbs/bootstrap/issues/12359.
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
// Reset the entire legend element to match the `fieldset`
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: inherit;
|
||||||
|
// border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="search"] {
|
||||||
|
// Under the `content-box` in Normalize as `*` isn't specific enough.
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
// todo: needed?
|
||||||
|
output {
|
||||||
|
display: block;
|
||||||
|
// font-size: $font-size-base;
|
||||||
|
// line-height: $line-height-base;
|
||||||
|
// color: $input-color;
|
||||||
|
}
|
||||||
@ -1,140 +0,0 @@
|
|||||||
//
|
|
||||||
// Scaffolding
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
|
|
||||||
// Reset the box-sizing
|
|
||||||
//
|
|
||||||
// Heads up! This reset may cause conflicts with some third-party widgets.
|
|
||||||
// For recommendations on resolving such conflicts, see
|
|
||||||
// http://getbootstrap.com/getting-started/#third-box-sizing
|
|
||||||
// Credit: Jon Neal & CSS-Tricks
|
|
||||||
// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
|
||||||
html {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
*,
|
|
||||||
*:before,
|
|
||||||
*:after {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Make viewport responsive
|
|
||||||
//
|
|
||||||
// @viewport is supposed to eventually replace <meta name="viewport">. It's manually prefixed for forward-compatibility.
|
|
||||||
//
|
|
||||||
// @viewport is also needed because IE 10+ doesn't honor <meta name="viewport"> in some cases.
|
|
||||||
// (See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/)
|
|
||||||
//
|
|
||||||
// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
|
|
||||||
// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
|
|
||||||
// and https://github.com/twbs/bootstrap/issues/10497)
|
|
||||||
// and the fix for that involves a snippet of JavaScript to sniff the user agent and apply some conditional CSS.
|
|
||||||
// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
|
|
||||||
|
|
||||||
@-moz-viewport { width: device-width; }
|
|
||||||
@-ms-viewport { width: device-width; }
|
|
||||||
@-o-viewport { width: device-width; }
|
|
||||||
@-webkit-viewport { width: device-width; }
|
|
||||||
@viewport { width: device-width; }
|
|
||||||
|
|
||||||
|
|
||||||
// Body reset
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-size: $font-size-root;
|
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: $font-family-base;
|
|
||||||
font-size: $font-size-base;
|
|
||||||
line-height: $line-height-base;
|
|
||||||
color: $text-color;
|
|
||||||
background-color: $body-bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reset fonts for relevant elements
|
|
||||||
input,
|
|
||||||
button,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Links
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $link-color;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
@include hover-focus {
|
|
||||||
color: $link-hover-color;
|
|
||||||
text-decoration: $link-hover-decoration;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
@include tab-focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Images
|
|
||||||
|
|
||||||
img {
|
|
||||||
// Make them responsive with `max-width` and `height`
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
// Match vertical alignment of most other Bootstrapped elements
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Rounded corners
|
|
||||||
.img-rounded {
|
|
||||||
@include border-radius($border-radius-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Image thumbnails
|
|
||||||
.img-thumbnail {
|
|
||||||
padding: $thumbnail-padding;
|
|
||||||
line-height: $line-height-base;
|
|
||||||
background-color: $thumbnail-bg;
|
|
||||||
border: 1px solid $thumbnail-border;
|
|
||||||
border-radius: $thumbnail-border-radius;
|
|
||||||
transition: all .2s ease-in-out;
|
|
||||||
@include box-shadow(0 1px 2px rgba(0,0,0,.075));
|
|
||||||
|
|
||||||
// Keep them at most 100% wide
|
|
||||||
// @include img-responsive(inline-block);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Perfect circle
|
|
||||||
.img-circle {
|
|
||||||
border-radius: 50%; // set radius in percents
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Horizontal rules
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin-top: $spacer;
|
|
||||||
margin-bottom: $spacer;
|
|
||||||
border: 0;
|
|
||||||
border-top: .0625rem solid $hr-border;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// iOS "clickable elements" fix for role="button"
|
|
||||||
//
|
|
||||||
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
|
|
||||||
// for traditionally non-focusable elements with role="button"
|
|
||||||
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
|
||||||
// Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged
|
|
||||||
|
|
||||||
[role="button"] {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
@ -2,20 +2,20 @@
|
|||||||
// Reset tabular elements
|
// Reset tabular elements
|
||||||
//
|
//
|
||||||
|
|
||||||
table {
|
// table {
|
||||||
background-color: $table-bg;
|
// background-color: $table-bg;
|
||||||
}
|
// }
|
||||||
|
|
||||||
caption {
|
// caption {
|
||||||
padding-top: $table-cell-padding;
|
// padding-top: $table-cell-padding;
|
||||||
padding-bottom: $table-cell-padding;
|
// padding-bottom: $table-cell-padding;
|
||||||
color: $text-muted;
|
// color: $text-muted;
|
||||||
text-align: left;
|
// text-align: left;
|
||||||
}
|
// }
|
||||||
|
|
||||||
th {
|
// th {
|
||||||
text-align: left;
|
// text-align: left;
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
|
|||||||
@ -8,7 +8,6 @@
|
|||||||
|
|
||||||
h1, h2, h3, h4, h5, h6,
|
h1, h2, h3, h4, h5, h6,
|
||||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
margin-top: 0;
|
|
||||||
font-family: $headings-font-family;
|
font-family: $headings-font-family;
|
||||||
font-weight: $headings-font-weight;
|
font-weight: $headings-font-weight;
|
||||||
line-height: $headings-line-height;
|
line-height: $headings-line-height;
|
||||||
@ -54,10 +53,10 @@ h6, .h6 { font-size: $font-size-h6; }
|
|||||||
// Body text
|
// Body text
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
p {
|
// p {
|
||||||
margin-top: 0;
|
// margin-top: 0;
|
||||||
margin-bottom: 1rem;
|
// margin-bottom: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.lead {
|
.lead {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
@ -65,6 +64,17 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Horizontal rules
|
||||||
|
// -------------------------
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin-top: $spacer;
|
||||||
|
margin-bottom: $spacer;
|
||||||
|
border: 0;
|
||||||
|
border-top: .0625rem solid $hr-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Emphasis & misc
|
// Emphasis & misc
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
@ -95,16 +105,16 @@ mark,
|
|||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
// Unordered and Ordered lists
|
// Unordered and Ordered lists
|
||||||
ul,
|
// ul,
|
||||||
ol {
|
// ol {
|
||||||
margin-top: 0;
|
// margin-top: 0;
|
||||||
margin-bottom: ($line-height-computed / 2);
|
// margin-bottom: ($line-height-computed / 2);
|
||||||
|
|
||||||
ul,
|
// ul,
|
||||||
ol {
|
// ol {
|
||||||
margin-bottom: 0;
|
// margin-bottom: 0;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// List options
|
// List options
|
||||||
|
|
||||||
@ -127,20 +137,20 @@ ol {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Description Lists
|
// Description Lists
|
||||||
dl {
|
// dl {
|
||||||
margin-top: 0; // Remove browser default
|
// margin-top: 0; // Remove browser default
|
||||||
margin-bottom: $line-height-computed;
|
// margin-bottom: $line-height-computed;
|
||||||
}
|
// }
|
||||||
dt,
|
// dt,
|
||||||
dd {
|
// dd {
|
||||||
line-height: $line-height-base;
|
// line-height: $line-height-base;
|
||||||
}
|
// }
|
||||||
dt {
|
// dt {
|
||||||
font-weight: bold;
|
// font-weight: bold;
|
||||||
}
|
// }
|
||||||
dd {
|
// dd {
|
||||||
margin-left: 0; // Undo browser default
|
// margin-left: 0; // Undo browser default
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Horizontal description lists w/ grid classes
|
// Horizontal description lists w/ grid classes
|
||||||
.dl-horizontal {
|
.dl-horizontal {
|
||||||
@ -153,13 +163,14 @@ dd {
|
|||||||
// Misc
|
// Misc
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
// Abbreviations and acronyms
|
// // Abbreviations and acronyms
|
||||||
abbr[title],
|
// abbr[title],
|
||||||
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
// // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
||||||
abbr[data-original-title] {
|
// abbr[data-original-title] {
|
||||||
cursor: help;
|
// cursor: help;
|
||||||
border-bottom: 1px dotted $abbr-border-color;
|
// border-bottom: 1px dotted $abbr-border-color;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.initialism {
|
.initialism {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@ -168,7 +179,7 @@ abbr[data-original-title] {
|
|||||||
// Blockquotes
|
// Blockquotes
|
||||||
blockquote {
|
blockquote {
|
||||||
padding: ($spacer / 2) $spacer;
|
padding: ($spacer / 2) $spacer;
|
||||||
margin: 0 0 $spacer;
|
margin-bottom: $spacer;
|
||||||
font-size: $blockquote-font-size;
|
font-size: $blockquote-font-size;
|
||||||
border-left: .25rem solid $blockquote-border-color;
|
border-left: .25rem solid $blockquote-border-color;
|
||||||
|
|
||||||
@ -209,9 +220,9 @@ blockquote {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Addresses
|
// // Addresses
|
||||||
address {
|
// address {
|
||||||
margin-bottom: $line-height-computed;
|
// margin-bottom: $line-height-computed;
|
||||||
font-style: normal;
|
// font-style: normal;
|
||||||
line-height: $line-height-base;
|
// line-height: $line-height-base;
|
||||||
}
|
// }
|
||||||
|
|||||||
3
scss/bootstrap.scss
vendored
3
scss/bootstrap.scss
vendored
@ -7,8 +7,9 @@
|
|||||||
@import "print";
|
@import "print";
|
||||||
|
|
||||||
// Core CSS
|
// Core CSS
|
||||||
@import "scaffolding";
|
@import "reboot";
|
||||||
@import "type";
|
@import "type";
|
||||||
|
@import "images";
|
||||||
@import "code";
|
@import "code";
|
||||||
@import "grid";
|
@import "grid";
|
||||||
@import "tables";
|
@import "tables";
|
||||||
|
|||||||
@ -1,3 +1,19 @@
|
|||||||
|
// Image Mixins
|
||||||
|
// - Responsive image
|
||||||
|
// - Retina image
|
||||||
|
|
||||||
|
|
||||||
|
// Responsive image
|
||||||
|
//
|
||||||
|
// Keep images from scaling beyond the width of their parents.
|
||||||
|
|
||||||
|
@mixin img-responsive($display: block) {
|
||||||
|
display: $display;
|
||||||
|
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
||||||
|
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Retina image
|
// Retina image
|
||||||
//
|
//
|
||||||
// Short retina mixin for setting background-image and -size.
|
// Short retina mixin for setting background-image and -size.
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user