mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-23 01:57:06 +03:00
BS4 docs sync
This commit is contained in:
Kevin Ross
parent
d1c372246e
commit
7bbc8547f4
|
|
@ -59,7 +59,7 @@ eos
|
|||
end
|
||||
|
||||
def remove_holderjs(code)
|
||||
code = code.gsub(/data-src="holder.js.+?"/, 'src="..."')
|
||||
code = code.gsub(/"holder.js.+?"/, '"..."')
|
||||
end
|
||||
|
||||
def render_rouge(code)
|
||||
|
|
|
|||
4
docs/assets/js/vendor/anchor.min.js
vendored
4
docs/assets/js/vendor/anchor.min.js
vendored
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* AnchorJS - v2.0.0 - 2015-10-31
|
||||
* AnchorJS - v1.2.1 - 2015-07-02
|
||||
* https://github.com/bryanbraun/anchorjs
|
||||
* Copyright (c) 2015 Bryan Braun; Licensed MIT
|
||||
*/
|
||||
function AnchorJS(A){"use strict";function t(A){o.options.icon=o.options.hasOwnProperty("icon")?A.icon:"",o.options.visible=o.options.hasOwnProperty("visible")?A.visible:"hover",o.options.placement=o.options.hasOwnProperty("placement")?A.placement:"right",o.options.class=o.options.hasOwnProperty("class")?A.class:"",o.options.truncate=o.options.hasOwnProperty("truncate")?Math.floor(A.truncate):64}function e(){if(null===document.head.querySelector("style.anchorjs")){var A,t=document.createElement("style"),e=" .anchorjs-link { opacity: 0; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }",o=" *:hover > .anchorjs-link, .anchorjs-link:focus { opacity: 1; }",n=' @font-face { font-family: "anchorjs-icons"; font-style: normal; font-weight: normal; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBTUAAAC8AAAAYGNtYXAWi9QdAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zgq29TcAAAF4AAABNGhlYWQEZM3pAAACrAAAADZoaGVhBhUDxgAAAuQAAAAkaG10eASAADEAAAMIAAAAFGxvY2EAKACuAAADHAAAAAxtYXhwAAgAVwAAAygAAAAgbmFtZQ5yJ3cAAANIAAAB2nBvc3QAAwAAAAAFJAAAACAAAwJAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpywPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6cv//f//AAAAAAAg6cv//f//AAH/4xY5AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACADEARAJTAsAAKwBUAAABIiYnJjQ/AT4BMzIWFxYUDwEGIicmND8BNjQnLgEjIgYPAQYUFxYUBw4BIwciJicmND8BNjIXFhQPAQYUFx4BMzI2PwE2NCcmNDc2MhcWFA8BDgEjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAEAAAABAACiToc1Xw889QALBAAAAAAA0XnFFgAAAADRecUWAAAAAAJTAsAAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAAlMAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAACAAAAAoAAMQAAAAAACgAUAB4AmgABAAAABQBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIABwCfAAEAAAAAAAMADgBLAAEAAAAAAAQADgC0AAEAAAAAAAUACwAqAAEAAAAAAAYADgB1AAEAAAAAAAoAGgDeAAMAAQQJAAEAHAAOAAMAAQQJAAIADgCmAAMAAQQJAAMAHABZAAMAAQQJAAQAHADCAAMAAQQJAAUAFgA1AAMAAQQJAAYAHACDAAMAAQQJAAoANAD4YW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype"); }',i=" [data-anchorjs-icon]::after { content: attr(data-anchorjs-icon); }";t.className="anchorjs",t.appendChild(document.createTextNode("")),A=document.head.querySelector('[rel="stylesheet"], style'),void 0===A?document.head.appendChild(t):document.head.insertBefore(t,A),t.sheet.insertRule(e,t.sheet.cssRules.length),t.sheet.insertRule(o,t.sheet.cssRules.length),t.sheet.insertRule(i,t.sheet.cssRules.length),t.sheet.insertRule(n,t.sheet.cssRules.length)}}var o=this;this.options=A||{},t(A),this.add=function(A){var o,n,i,s,a,r,l,c,h,g,B,u;if(t(this.options),A){if("string"!=typeof A)throw new Error("The selector provided to AnchorJS was invalid.")}else A="h1, h2, h3, h4, h5, h6";if(o=document.querySelectorAll(A),0===o.length)return!1;for(e(),n=document.querySelectorAll("[id]"),i=[].map.call(n,function(A){return A.id}),a=0;a<o.length;a++){if(o[a].hasAttribute("id"))s=o[a].getAttribute("id");else{r=o[a].textContent,l=this.urlify(r),g=l,h=0;do void 0!==c&&(g=l+"-"+h),c=i.indexOf(g),h+=1;while(-1!==c);c=void 0,i.push(g),o[a].setAttribute("id",g),s=g}B=s.replace(/-/g," "),u=document.createElement("a"),u.className="anchorjs-link "+this.options.class,u.href="#"+s,u.setAttribute("aria-label","Anchor link for: "+B),u.setAttribute("data-anchorjs-icon",this.options.icon),"always"===this.options.visible&&(u.style.opacity="1"),""===this.options.icon&&(u.style.fontFamily="anchorjs-icons",u.style.fontStyle="normal",u.style.fontVariant="normal",u.style.fontWeight="normal",u.style.lineHeight=1,"left"===this.options.placement&&(u.style.lineHeight="inherit")),"left"===this.options.placement?(u.style.position="absolute",u.style.marginLeft="-1em",u.style.paddingRight="0.5em",o[a].insertBefore(u,o[a].firstChild)):(u.style.paddingLeft="0.375em",o[a].appendChild(u))}return this},this.remove=function(A){for(var t,e=document.querySelectorAll(A),o=0;o<e.length;o++)t=e[o].querySelector(".anchorjs-link"),t&&e[o].removeChild(t);return this},this.urlify=function(A){var e,o=/[& +$,:;=?@"#{}|^~[`%!'\]\.\/\(\)\*\\]/g;return t(this.options),e=A.replace(/\'/gi,"").replace(o,"-").replace(/-{2,}/g,"-").substring(0,this.options.truncate).replace(/^-+|-+$/gm,"").toLowerCase()}}var anchors=new AnchorJS;
|
||||
function AnchorJS(A){"use strict";this.options=A||{},this._applyRemainingDefaultOptions=function(A){this.options.icon=this.options.hasOwnProperty("icon")?A.icon:"",this.options.visible=this.options.hasOwnProperty("visible")?A.visible:"hover",this.options.placement=this.options.hasOwnProperty("placement")?A.placement:"right",this.options.class=this.options.hasOwnProperty("class")?A.class:""},this._applyRemainingDefaultOptions(A),this.add=function(A){var e,t,o,n,i,s,a,l,r,h,c,g;if(this._applyRemainingDefaultOptions(this.options),A){if("string"!=typeof A)throw new Error("The selector provided to AnchorJS was invalid.")}else A="h1, h2, h3, h4, h5, h6";if(e=document.querySelectorAll(A),0===e.length)return!1;for(this._addBaselineStyles(),t=document.querySelectorAll("[id]"),o=[].map.call(t,function(A){return A.id}),i=0;i<e.length;i++){if(e[i].hasAttribute("id"))n=e[i].getAttribute("id");else{s=e[i].textContent,a=s.replace(/[^\w\s-]/gi,"").replace(/\s+/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase(),h=a,r=0;do void 0!==l&&(h=a+"-"+r),l=o.indexOf(h),r+=1;while(-1!==l);l=void 0,o.push(h),e[i].setAttribute("id",h),n=h}c=n.replace(/-/g," "),g=document.createElement("a"),g.className="anchorjs-link "+this.options.class,g.href="#"+n,g.setAttribute("aria-label","Anchor link for: "+c),g.setAttribute("data-anchorjs-icon",this.options.icon),"always"===this.options.visible&&(g.style.opacity="1"),""===this.options.icon&&(g.style.fontFamily="anchorjs-icons",g.style.fontStyle="normal",g.style.fontVariant="normal",g.style.fontWeight="normal",g.style.lineHeight=1),"left"===this.options.placement?(g.style.position="absolute",g.style.marginLeft="-1em",g.style.paddingRight="0.5em",e[i].insertBefore(g,e[i].firstChild)):(g.style.paddingLeft="0.375em",e[i].appendChild(g))}return this},this.remove=function(A){for(var e,t=document.querySelectorAll(A),o=0;o<t.length;o++)e=t[o].querySelector(".anchorjs-link"),e&&t[o].removeChild(e);return this},this._addBaselineStyles=function(){if(null===document.head.querySelector("style.anchorjs")){var A,e=document.createElement("style"),t=" .anchorjs-link { opacity: 0; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }",o=" *:hover > .anchorjs-link, .anchorjs-link:focus { opacity: 1; }",n=' @font-face { font-family: "anchorjs-icons"; font-style: normal; font-weight: normal; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBTUAAAC8AAAAYGNtYXAWi9QdAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zgq29TcAAAF4AAABNGhlYWQEZM3pAAACrAAAADZoaGVhBhUDxgAAAuQAAAAkaG10eASAADEAAAMIAAAAFGxvY2EAKACuAAADHAAAAAxtYXhwAAgAVwAAAygAAAAgbmFtZQ5yJ3cAAANIAAAB2nBvc3QAAwAAAAAFJAAAACAAAwJAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpywPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6cv//f//AAAAAAAg6cv//f//AAH/4xY5AAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACADEARAJTAsAAKwBUAAABIiYnJjQ/AT4BMzIWFxYUDwEGIicmND8BNjQnLgEjIgYPAQYUFxYUBw4BIwciJicmND8BNjIXFhQPAQYUFx4BMzI2PwE2NCcmNDc2MhcWFA8BDgEjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAEAAAABAACiToc1Xw889QALBAAAAAAA0XnFFgAAAADRecUWAAAAAAJTAsAAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAAlMAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAACAAAAAoAAMQAAAAAACgAUAB4AmgABAAAABQBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIABwCfAAEAAAAAAAMADgBLAAEAAAAAAAQADgC0AAEAAAAAAAUACwAqAAEAAAAAAAYADgB1AAEAAAAAAAoAGgDeAAMAAQQJAAEAHAAOAAMAAQQJAAIADgCmAAMAAQQJAAMAHABZAAMAAQQJAAQAHADCAAMAAQQJAAUAFgA1AAMAAQQJAAYAHACDAAMAAQQJAAoANAD4YW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByYW5jaG9yanMtaWNvbnMAYQBuAGMAaABvAHIAagBzAC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("truetype"); }',i=" [data-anchorjs-icon]::after { content: attr(data-anchorjs-icon); }";e.className="anchorjs",e.appendChild(document.createTextNode("")),A=document.head.querySelector('[rel="stylesheet"], style'),void 0===A?document.head.appendChild(e):document.head.insertBefore(e,A),e.sheet.insertRule(t,e.sheet.cssRules.length),e.sheet.insertRule(o,e.sheet.cssRules.length),e.sheet.insertRule(i,e.sheet.cssRules.length),e.sheet.insertRule(n,e.sheet.cssRules.length)}}}var anchors=new AnchorJS;
|
||||
|
|
|
|||
6
docs/assets/js/vendor/clipboard.min.js
vendored
6
docs/assets/js/vendor/clipboard.min.js
vendored
File diff suppressed because one or more lines are too long
1
docs/assets/js/vendor/jekyll-search.js
vendored
Normal file
1
docs/assets/js/vendor/jekyll-search.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -10,12 +10,12 @@
|
|||
padding: 1.25rem !important;
|
||||
margin: 2rem ($grid-gutter-width * -1) -2rem !important;
|
||||
overflow: hidden; // clearfix
|
||||
font-family: inherit !important;
|
||||
font-size: .8rem !important;
|
||||
font-family: inherit !important;
|
||||
line-height: 1rem !important;
|
||||
color: $bd-purple-light !important;
|
||||
text-align: left;
|
||||
background: darken($bd-purple, 10%) !important;
|
||||
background-color: darken($bd-purple, 10%) !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
|
|
@ -51,6 +51,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.carbonad #azcarbon > img {
|
||||
display: none; // hide what I assume are tracking images
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.carbonad {
|
||||
width: 330px !important;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
|
||||
*:hover > .anchorjs-link {
|
||||
opacity: .75;
|
||||
-webkit-transition: color .16s linear;
|
||||
-o-transition: color .16s linear;
|
||||
transition: color .16s linear;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,10 +8,6 @@
|
|||
position: relative;
|
||||
display: none;
|
||||
float: right;
|
||||
|
||||
+ .highlight {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-clipboard {
|
||||
|
|
@ -26,12 +22,12 @@
|
|||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.btn-clipboard-hover {
|
||||
color: #fff;
|
||||
background-color: #027de7;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-clipboard {
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@
|
|||
.bd-example-container {
|
||||
min-width: 16rem;
|
||||
max-width: 25rem;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.bd-example-container-header {
|
||||
|
|
@ -69,10 +69,10 @@
|
|||
@include clearfix();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: 1.5rem;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
padding: 1.5rem;
|
||||
border-width: .2rem;
|
||||
}
|
||||
|
||||
|
|
@ -205,6 +205,11 @@
|
|||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Pager
|
||||
.bd-example > .pager {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Example modals
|
||||
.bd-example-modal {
|
||||
background-color: #f5f5f5;
|
||||
|
|
@ -263,10 +268,6 @@
|
|||
}
|
||||
|
||||
// Tooltips
|
||||
.tooltip-demo a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bd-example-tooltip-static .tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
|
@ -311,7 +312,7 @@
|
|||
|
||||
.highlight {
|
||||
padding: 1rem;
|
||||
margin: 1rem (-$grid-gutter-width / 2);
|
||||
margin: 1rem -1rem;
|
||||
background-color: #f7f7f9;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
|
|
@ -331,3 +332,15 @@
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
// scss-lint:disable IdSelector
|
||||
|
||||
//
|
||||
// Automatically style Markdown-based tables like a Bootstrap `.table`.
|
||||
//
|
||||
|
|
@ -11,8 +9,8 @@
|
|||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
overflow-y: auto;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
// Cells
|
||||
> thead,
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
padding: 4rem 0;
|
||||
margin-top: 4rem;
|
||||
font-size: 85%;
|
||||
text-align: center;
|
||||
background-color: #f7f7f7;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@
|
|||
padding: 3rem ($grid-gutter-width / 2) 2rem;
|
||||
color: $bd-purple-light;
|
||||
text-align: center;
|
||||
background-image: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
|
||||
background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(darken($bd-purple, 20%))}', endColorstr='#{ie-hex-str(lighten(saturate($bd-purple, 5%), 15%))}', gradientType='1'); /* For IE9 */
|
||||
|
||||
.bd-booticon {
|
||||
margin: 0 auto 2rem;
|
||||
|
|
@ -19,9 +21,9 @@
|
|||
}
|
||||
|
||||
.lead {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 2rem;
|
||||
margin-left: auto;
|
||||
font-size: 1.25rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
&.active {
|
||||
color: darken($gray-dark, 25%);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@
|
|||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding-right: .75rem;
|
||||
padding-left: .75rem;
|
||||
padding-right: .75rem;
|
||||
|
||||
&:first-child { margin-top: .25rem; }
|
||||
&:last-child { margin-bottom: .25rem; }
|
||||
|
|
@ -49,7 +49,6 @@
|
|||
padding: .75rem 1rem;
|
||||
color: #7a7a7a;
|
||||
text-align: center;
|
||||
white-space: normal; // Undo .dropdown-item defaults
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
// scss-lint:disable IdSelector
|
||||
|
||||
#skippy {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
|
|
|
|||
|
|
@ -1,65 +1,65 @@
|
|||
// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
.hll { background-color: #ffc; }
|
||||
.hll { background-color: #ffffcc }
|
||||
.c { color: #999; }
|
||||
.err { color: #a00; background-color: #faa; }
|
||||
.k { color: #069; }
|
||||
.o { color: #555; }
|
||||
.err { color: #AA0000; background-color: #FFAAAA }
|
||||
.k { color: #006699; }
|
||||
.o { color: #555555 }
|
||||
.cm { color: #999; }
|
||||
.cp { color: #099; }
|
||||
.cp { color: #009999 }
|
||||
.c1 { color: #999; }
|
||||
.cs { color: #999; }
|
||||
.gd { background-color: #fcc; border: 1px solid #c00; }
|
||||
.ge { font-style: italic; }
|
||||
.gr { color: #f00; }
|
||||
.gh { color: #030; }
|
||||
.gi { background-color: #cfc; border: 1px solid #0c0; }
|
||||
.go { color: #aaa; }
|
||||
.gp { color: #009; }
|
||||
.gu { color: #030; }
|
||||
.gt { color: #9c6; }
|
||||
.kc { color: #069; }
|
||||
.kd { color: #069; }
|
||||
.kn { color: #069; }
|
||||
.kp { color: #069; }
|
||||
.kr { color: #069; }
|
||||
.kt { color: #078; }
|
||||
.m { color: #f60; }
|
||||
.s { color: #d44950; }
|
||||
.na { color: #4f9fcf; }
|
||||
.nb { color: #366; }
|
||||
.nc { color: #0a8; }
|
||||
.no { color: #360; }
|
||||
.nd { color: #99f; }
|
||||
.ni { color: #999; }
|
||||
.ne { color: #c00; }
|
||||
.nf { color: #c0f; }
|
||||
.nl { color: #99f; }
|
||||
.nn { color: #0cf; }
|
||||
.gd { background-color: #FFCCCC; border: 1px solid #CC0000 }
|
||||
.ge { font-style: italic }
|
||||
.gr { color: #FF0000 }
|
||||
.gh { color: #003300; }
|
||||
.gi { background-color: #CCFFCC; border: 1px solid #00CC00 }
|
||||
.go { color: #AAAAAA }
|
||||
.gp { color: #000099; }
|
||||
.gu { color: #003300; }
|
||||
.gt { color: #99CC66 }
|
||||
.kc { color: #006699; }
|
||||
.kd { color: #006699; }
|
||||
.kn { color: #006699; }
|
||||
.kp { color: #006699 }
|
||||
.kr { color: #006699; }
|
||||
.kt { color: #007788; }
|
||||
.m { color: #FF6600 }
|
||||
.s { color: #d44950 }
|
||||
.na { color: #4f9fcf }
|
||||
.nb { color: #336666 }
|
||||
.nc { color: #00AA88; }
|
||||
.no { color: #336600 }
|
||||
.nd { color: #9999FF }
|
||||
.ni { color: #999999; }
|
||||
.ne { color: #CC0000; }
|
||||
.nf { color: #CC00FF }
|
||||
.nl { color: #9999FF }
|
||||
.nn { color: #00CCFF; }
|
||||
.nt { color: #2f6f9f; }
|
||||
.nv { color: #033; }
|
||||
.ow { color: #000; }
|
||||
.w { color: #bbb; }
|
||||
.mf { color: #f60; }
|
||||
.mh { color: #f60; }
|
||||
.mi { color: #f60; }
|
||||
.mo { color: #f60; }
|
||||
.sb { color: #c30; }
|
||||
.sc { color: #c30; }
|
||||
.sd { font-style: italic; color: #c30; }
|
||||
.s2 { color: #c30; }
|
||||
.se { color: #c30; }
|
||||
.sh { color: #c30; }
|
||||
.si { color: #a00; }
|
||||
.sx { color: #c30; }
|
||||
.sr { color: #3aa; }
|
||||
.s1 { color: #c30; }
|
||||
.ss { color: #fc3; }
|
||||
.bp { color: #366; }
|
||||
.vc { color: #033; }
|
||||
.vg { color: #033; }
|
||||
.vi { color: #033; }
|
||||
.il { color: #f60; }
|
||||
.nv { color: #003333 }
|
||||
.ow { color: #000000; }
|
||||
.w { color: #bbbbbb }
|
||||
.mf { color: #FF6600 }
|
||||
.mh { color: #FF6600 }
|
||||
.mi { color: #FF6600 }
|
||||
.mo { color: #FF6600 }
|
||||
.sb { color: #CC3300 }
|
||||
.sc { color: #CC3300 }
|
||||
.sd { color: #CC3300; font-style: italic }
|
||||
.s2 { color: #CC3300 }
|
||||
.se { color: #CC3300; }
|
||||
.sh { color: #CC3300 }
|
||||
.si { color: #AA0000 }
|
||||
.sx { color: #CC3300 }
|
||||
.sr { color: #33AAAA }
|
||||
.s1 { color: #CC3300 }
|
||||
.ss { color: #FFCC33 }
|
||||
.bp { color: #336666 }
|
||||
.vc { color: #003333 }
|
||||
.vg { color: #003333 }
|
||||
.vi { color: #003333 }
|
||||
.il { color: #FF6600 }
|
||||
|
||||
.css .o,
|
||||
.css .o + .nt,
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@
|
|||
}
|
||||
|
||||
.github-btn {
|
||||
border: none;
|
||||
float: right;
|
||||
width: 180px;
|
||||
height: 1.25rem;
|
||||
margin-top: .25rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -15,30 +15,21 @@ See the <a href="/material-design/buttons">Material Design</a> section for more
|
|||
|
||||
|
||||
|
||||
Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
|
||||
Indicate the current page's location within a navigational hierarchy.
|
||||
|
||||
Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
|
||||
|
||||
{% example html %}
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item active">Home</li>
|
||||
<li class="active">Home</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active">Library</li>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li class="active">Library</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active">Data</li>
|
||||
<ol class="breadcrumb" style="margin-bottom: 5px;">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Library</a></li>
|
||||
<li class="active">Data</li>
|
||||
</ol>
|
||||
{% endexample %}
|
||||
|
||||
Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup.
|
||||
|
||||
{% example html %}
|
||||
<nav class="breadcrumb">
|
||||
<a class="breadcrumb-item" href="#">Home</a>
|
||||
<a class="breadcrumb-item" href="#">Library</a>
|
||||
<a class="breadcrumb-item" href="#">Data</a>
|
||||
<span class="breadcrumb-item active">Bootstrap</span>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,6 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
|
|||
<button class="btn btn-primary" type="submit">Button</button>
|
||||
<input class="btn btn-primary" type="button" value="Input">
|
||||
<input class="btn btn-primary" type="submit" value="Submit">
|
||||
<input class="btn btn-primary" type="reset" value="Reset">
|
||||
{% endexample %}
|
||||
|
||||
## Outline buttons
|
||||
|
|
@ -75,12 +74,12 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
|
|||
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-*-outline` ones to remove all background images and colors on any button.
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success">Success</button>
|
||||
<button type="button" class="btn btn-outline-info">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||||
<button type="button" class="btn btn-primary-outline">Primary</button>
|
||||
<button type="button" class="btn btn-secondary-outline">Secondary</button>
|
||||
<button type="button" class="btn btn-success-outline">Success</button>
|
||||
<button type="button" class="btn btn-info-outline">Info</button>
|
||||
<button type="button" class="btn btn-warning-outline">Warning</button>
|
||||
<button type="button" class="btn btn-danger-outline">Danger</button>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
|
|
@ -110,8 +109,8 @@ Create block level buttons—those that span the full width of a parent—by add
|
|||
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
|
||||
|
||||
{% example html %}
|
||||
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
|
||||
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>
|
||||
{% endexample %}
|
||||
|
||||
## Disabled state
|
||||
|
|
@ -127,17 +126,17 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any `<b
|
|||
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
|
||||
{% endexample %}
|
||||
|
||||
As `<a>` elements don't support the `disabled` attribute, you must add the `.disabled` class to fake it. In addition, include the `aria-disabled="true"` attribute, to indicate the state of the element to assistive technologies.
|
||||
As `<a>` elements don't support the `disabled` attribute, you must add the `.disabled` class to fake it.
|
||||
|
||||
{% example html %}
|
||||
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
|
||||
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
|
||||
{% endexample %}
|
||||
|
||||
{% callout warning %}
|
||||
#### Link functionality caveat
|
||||
|
||||
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. 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, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
|
||||
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 %}
|
||||
|
||||
## Button plugin
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ Cards require a small amount of markup and classes to provide you with as much c
|
|||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
|
@ -62,16 +62,6 @@ Cards support a wide variety of content, including images, text, list groups, li
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
|
||||
|
|
@ -151,13 +141,13 @@ You can quickly change the text alignment of any card—in its entirety or speci
|
|||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
|
||||
<div class="card card-block text-xs-center">
|
||||
<div class="card card-block text-center">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
|
||||
<div class="card card-block text-xs-right">
|
||||
<div class="card card-block text-right">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
|
|
@ -207,7 +197,7 @@ Add an optional header and/or footer within a card.
|
|||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card text-xs-center">
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
|
|
@ -271,7 +261,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
|
|||
<div class="card-block">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
|
@ -281,7 +271,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
|
|||
Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.**
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-inverse card-primary text-xs-center">
|
||||
<div class="card card-inverse card-primary text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -289,7 +279,7 @@ Cards include their own variant classes for quickly changing the `background-col
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-success text-xs-center">
|
||||
<div class="card card-inverse card-success text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -297,7 +287,7 @@ Cards include their own variant classes for quickly changing the `background-col
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-info text-xs-center">
|
||||
<div class="card card-inverse card-info text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -305,7 +295,7 @@ Cards include their own variant classes for quickly changing the `background-col
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-warning text-xs-center">
|
||||
<div class="card card-inverse card-warning text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -313,62 +303,7 @@ Cards include their own variant classes for quickly changing the `background-col
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-inverse card-danger text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-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>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Outline variants
|
||||
|
||||
In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-outline-primary text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-secondary text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-success text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-info text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-warning text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-danger text-xs-center">
|
||||
<div class="card card-inverse card-danger text-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
|
|
@ -485,7 +420,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
|
|||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-block card-inverse card-primary text-xs-center">
|
||||
<div class="card card-block card-inverse card-primary text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
|
||||
<footer>
|
||||
|
|
@ -495,7 +430,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
|
|||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card card-block text-xs-center">
|
||||
<div class="card card-block text-center">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
|
|
@ -503,7 +438,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
|
|||
<div class="card">
|
||||
<img class="card-img" data-src="holder.js/100px260/" alt="Card image">
|
||||
</div>
|
||||
<div class="card card-block text-xs-right">
|
||||
<div class="card card-block text-right">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
|
|||
<form>
|
||||
<fieldset class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||||
<small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
|
||||
<small class="text-muted">We'll never share your email with anyone else.</small>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label for="exampleInputPassword1">Password</label>
|
||||
|
|
@ -65,8 +65,8 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
|
|||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label for="exampleInputFile">File input</label>
|
||||
<input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
|
||||
<small id="fileHelp" class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
|
||||
<input type="file" class="form-control-file" id="exampleInputFile">
|
||||
<small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
|
||||
</fieldset>
|
||||
<div class="radio">
|
||||
<label>
|
||||
|
|
@ -95,7 +95,7 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
|
|||
</form>
|
||||
{% endexample %}
|
||||
|
||||
Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group.
|
||||
Below is a complete list of the specific from controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group.
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
|
|
@ -125,7 +125,7 @@ Below is a complete list of the specific form controls supported by Bootstrap an
|
|||
Textual inputs
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}`text`, `password`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`{% endmarkdown %}
|
||||
{% markdown %}`text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -174,91 +174,6 @@ Below is a complete list of the specific form controls supported by Bootstrap an
|
|||
</tbody>
|
||||
</table>
|
||||
|
||||
### Textual inputs
|
||||
|
||||
Here are examples of `.form-control` applied to each textual HTML5 `<input>` `type`.
|
||||
|
||||
{% example html %}
|
||||
<div class="form-group row">
|
||||
<label for="example-text-input" class="col-xs-2 form-control-label">Text</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-search-input" class="col-xs-2 form-control-label">Search</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-email-input" class="col-xs-2 form-control-label">Email</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-url-input" class="col-xs-2 form-control-label">URL</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-tel-input" class="col-xs-2 form-control-label">Telephone</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-password-input" class="col-xs-2 form-control-label">Password</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="password" value="hunter2" id="example-password-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-number-input" class="col-xs-2 form-control-label">Number</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="number" value="42" id="example-number-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-datetime-local-input" class="col-xs-2 form-control-label">Date and time</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-date-input" class="col-xs-2 form-control-label">Date</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="date" value="2011-08-19" id="example-date-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-month-input" class="col-xs-2 form-control-label">Month</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="month" value="2011-08" id="example-month-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-week-input" class="col-xs-2 form-control-label">Week</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="week" value="2011-W33" id="example-week-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-time-input" class="col-xs-2 form-control-label">Time</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="time" value="13:45:00" id="example-time-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="example-color-input" class="col-xs-2 form-control-label">Color</label>
|
||||
<div class="col-xs-10">
|
||||
<input class="form-control" type="color" value="#563d7c" id="example-color-input">
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Form layouts
|
||||
|
||||
Since Bootstrap applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
|
||||
|
|
@ -613,33 +528,19 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
|
|||
|
||||
No official help text classes exist in Bootstrap 4 (previously we had `.help-block` in v3), but thanks to our utility classes like `.text-muted`, you can create much more flexible help text as you need it.
|
||||
|
||||
{% callout warning %}
|
||||
#### Associating help text with form controls
|
||||
|
||||
Help text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.
|
||||
{% endcallout %}
|
||||
|
||||
Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else).
|
||||
|
||||
{% example html %}
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<label for="inputPassword4">Password</label>
|
||||
<input type="password" id="inputPassword4" class="form-control" aria-describedby="passwordHelpInline">
|
||||
<small id="passwordHelpInline" class="text-muted">
|
||||
Must be 8-20 characters long.
|
||||
<small class="text-muted">
|
||||
Some inline text with a small tag looks like this.
|
||||
</small>
|
||||
</div>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
Block help text—for below inputs or for longer lines of help text—can be easily achieved with a `<p>`.
|
||||
|
||||
{% example html %}
|
||||
<label for="inputPassword5">Password</label>
|
||||
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
|
||||
<p id="passwordHelpBlock" class="text-muted">
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters or emoji.
|
||||
<p class="text-muted">
|
||||
A block of help text that breaks onto a new line and may extend beyond one line.
|
||||
</p>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -693,7 +594,7 @@ Ensure that an alternative indication of state is also provided. For instance, y
|
|||
|
||||
## Custom forms
|
||||
|
||||
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements for any default form control.
|
||||
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements any default form control.
|
||||
|
||||
### Checkboxes and radios
|
||||
|
||||
|
|
@ -703,29 +604,29 @@ Each checkbox and radio is wrapped in a `<label>` for three reasons:
|
|||
- It provides a helpful and semantic wrapper to help us replace the default `<input>`s.
|
||||
- It triggers the state of the `<input>` automatically, meaning no JavaScript is required.
|
||||
|
||||
We hide the default `<input>` with `opacity` and use the `.custom-control-indicator` to build a new custom form indicator in its place. Unfortunately we can't build a custom one from just the `<input>` because CSS's `content` doesn't work on that element.
|
||||
We hide the default `<input>` with `opacity` and use the `.c-indicator` to build a new custom form control. We can't build a custom one from just the `<input>` because CSS's `content` doesn't work on that element.
|
||||
|
||||
We use the sibling selector (`~`) for all our `<input>` states—like `:checked`—to properly style our custom form indicator. When combined with the `.custom-control-description` class, we can also style the text for each item based on the `<input>`'s state.
|
||||
With the sibling selector (`~`), we use the `:checked` state to trigger a makeshift checked state on the custom control.
|
||||
|
||||
In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](https://useiconic.com/open). This provides us the best control for styling and positioning across browsers and devices.
|
||||
|
||||
#### Checkboxes
|
||||
|
||||
{% example html %}
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Check this custom checkbox</span>
|
||||
<label class="c-input c-checkbox">
|
||||
<input type="checkbox">
|
||||
<span class="c-indicator"></span>
|
||||
Check this custom checkbox
|
||||
</label>
|
||||
{% endexample %}
|
||||
|
||||
Custom checkboxes can also utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
|
||||
|
||||
<div class="bd-example bd-example-indeterminate">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Check this custom checkbox</span>
|
||||
<label class="c-input c-checkbox">
|
||||
<input type="checkbox">
|
||||
<span class="c-indicator"></span>
|
||||
Check this custom checkbox
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -738,62 +639,43 @@ $('.your-checkbox').prop('indeterminate', true)
|
|||
#### Radios
|
||||
|
||||
{% example html %}
|
||||
<label class="custom-control custom-radio">
|
||||
<input id="radio1" name="radio" type="radio" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Toggle this custom radio</span>
|
||||
<label class="c-input c-radio">
|
||||
<input id="radio1" name="radio" type="radio">
|
||||
<span class="c-indicator"></span>
|
||||
Toggle this custom radio
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input id="radio2" name="radio" type="radio" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Or toggle this other custom radio</span>
|
||||
<label class="c-input c-radio">
|
||||
<input id="radio2" name="radio" type="radio">
|
||||
<span class="c-indicator"></span>
|
||||
Or toggle this other custom radio
|
||||
</label>
|
||||
{% endexample %}
|
||||
|
||||
#### Disabled
|
||||
|
||||
Custom checkboxes and radios can also be disabled. Add the `disabled` boolean attribute to the `<input>` and the custom indicator and label description will be automatically styled.
|
||||
|
||||
{% example html %}
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" disabled>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Check this custom checkbox</span>
|
||||
</label>
|
||||
|
||||
<label class="custom-control custom-radio">
|
||||
<input id="radio3" name="radioDisabled" type="radio" class="custom-control-input" disabled>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Toggle this custom radio</span>
|
||||
</label>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
#### Stacked
|
||||
|
||||
Custom checkboxes and radios are inline to start. Add a parent with class `.custom-controls-stacked` to ensure each form control is on separate lines.
|
||||
Custom checkboxes and radios are inline to start. Add a parent with class `.c-inputs-stacked` to ensure each form control is on separate lines.
|
||||
|
||||
{% example html %}
|
||||
<div class="custom-controls-stacked">
|
||||
<label class="custom-control custom-radio">
|
||||
<input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Toggle this custom radio</span>
|
||||
<div class="c-inputs-stacked">
|
||||
<label class="c-input c-radio">
|
||||
<input id="radioStacked1" name="radio-stacked" type="radio">
|
||||
<span class="c-indicator"></span>
|
||||
Toggle this custom radio
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Or toggle this other custom radio</span>
|
||||
<label class="c-input c-radio">
|
||||
<input id="radioStacked2" name="radio-stacked" type="radio">
|
||||
<span class="c-indicator"></span>
|
||||
Or toggle this other custom radio
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Select menu
|
||||
|
||||
Custom `<select>` menus need only a custom class, `.custom-select` to trigger the custom styles.
|
||||
Custom `<select>` menus need only a custom class, `.c-select` to trigger the custom styles.
|
||||
|
||||
{% example html %}
|
||||
<select class="custom-select">
|
||||
<select class="c-select">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
|
|
@ -805,16 +687,14 @@ Custom selects degrade nicely in IE9, receiving only a handful of overrides to r
|
|||
|
||||
### File browser
|
||||
|
||||
The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
|
||||
|
||||
{% example html %}
|
||||
<label class="custom-file">
|
||||
<input type="file" id="file" class="custom-file-input">
|
||||
<span class="custom-file-control"></span>
|
||||
<label class="file">
|
||||
<input type="file" id="file">
|
||||
<span class="file-custom"></span>
|
||||
</label>
|
||||
{% endexample %}
|
||||
|
||||
Here's how it works:
|
||||
The file input is the most gnarly of the bunch. Here's how it works:
|
||||
|
||||
- We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser.
|
||||
- We hide the default file `<input>` via `opacity`.
|
||||
|
|
@ -823,3 +703,5 @@ Here's how it works:
|
|||
- We declare a `height` on the `<input>` for proper spacing for surrounding content.
|
||||
|
||||
In other words, it's an entirely custom element, all generated via CSS.
|
||||
|
||||
**Heads up!** The custom file input is currently unable to update the *Choose file...* text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas.
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ Place one add-on or button on either side of an input. You may also place one on
|
|||
<br>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
|
||||
<span class="input-group-addon" id="basic-addon2">@example.com</span>
|
||||
<span class="input-group-addon" id="basic-addon2">.00</span>
|
||||
</div>
|
||||
<br>
|
||||
<label for="basic-url">Your vanity URL</label>
|
||||
|
|
@ -119,20 +119,6 @@ Buttons in input groups are a bit different and require one extra level of nesti
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-lg-offset-3 col-lg-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-secondary" type="button">Hate it</button>
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Product name">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-secondary" type="button">Love it</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Buttons with dropdowns
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
|
|||
<div class="jumbotron">
|
||||
<h1 class="display-3">Hello, world!</h1>
|
||||
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
||||
<hr class="m-y-2">
|
||||
<hr class="m-y-md">
|
||||
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
||||
<p class="lead">
|
||||
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ List groups are a flexible and powerful component for displaying not only simple
|
|||
{:toc}
|
||||
|
||||
## Basic example
|
||||
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
|
||||
<p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
|
||||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
|
|
@ -42,15 +42,15 @@ Add labels to any list group item to show unread counts, activity, etc.
|
|||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<span class="label label-default label-pill pull-xs-right">14</span>
|
||||
<span class="label label-default label-pill pull-right">14</span>
|
||||
Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="label label-default label-pill pull-xs-right">2</span>
|
||||
<span class="label label-default label-pill pull-right">2</span>
|
||||
Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="label label-default label-pill pull-xs-right">1</span>
|
||||
<span class="label label-default label-pill pull-right">1</span>
|
||||
Morbi leo risus
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -107,6 +107,12 @@ Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
|
|||
Use contextual classes to style list items, default or linked. Also includes `.active` state.
|
||||
|
||||
{% example html %}
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
|
||||
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
|
||||
</ul>
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
|
||||
|
|
|
|||
|
|
@ -262,7 +262,7 @@ Modals have two optional sizes, available via modifier classes to be placed on a
|
|||
For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.
|
||||
|
||||
{% highlight html %}
|
||||
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
|
||||
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
|
||||
...
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ Here's what you need to know before getting started with the navbar:
|
|||
|
||||
- Navbars require a wrapping `.navbar` and a [color scheme](#color-schemes).
|
||||
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
|
||||
- Use `.pull-*-left` and `.pull-*-right` to quickly align sub-components.
|
||||
- Use `.pull-left` and `.pull-right` to quickly align sub-components.
|
||||
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
|
||||
|
||||
## Supported content
|
||||
|
|
@ -37,7 +37,8 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc
|
|||
|
||||
- `.navbar-brand` for your company, product, or project name
|
||||
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
|
||||
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsing-content) behaviors.
|
||||
- `.navbar-form` for vertically centering default-sized inputs and buttons.
|
||||
- `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors.
|
||||
|
||||
Here's an example of all the sub-components included in a default, light navbar:
|
||||
|
||||
|
|
@ -58,65 +59,13 @@ Here's an example of all the sub-components included in a default, light navbar:
|
|||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
<form class="form-inline navbar-form pull-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
<button class="btn btn-success-outline" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
### Brand
|
||||
|
||||
The `.navbar-brand` can be applied to most elements, but an anchor works best.
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<h1 class="navbar-brand">Navbar</h1>
|
||||
</nav>
|
||||
|
||||
{% endexample %}
|
||||
|
||||
### Nav
|
||||
|
||||
Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`.
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<div class="nav navbar-nav">
|
||||
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-item nav-link" href="#">Features</a>
|
||||
<a class="nav-item nav-link" href="#">Pricing</a>
|
||||
<a class="nav-item nav-link" href="#">About</a>
|
||||
</div>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## Color schemes
|
||||
|
||||
Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.
|
||||
|
|
@ -140,9 +89,9 @@ Here are some examples to show what we mean.
|
|||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
<form class="form-inline navbar-form pull-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-info" type="submit">Search</button>
|
||||
<button class="btn btn-info-outline" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
<nav class="navbar navbar-dark bg-primary">
|
||||
|
|
@ -161,9 +110,9 @@ Here are some examples to show what we mean.
|
|||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
<form class="form-inline navbar-form pull-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-secondary" type="submit">Search</button>
|
||||
<button class="btn btn-secondary-outline" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
|
||||
|
|
@ -182,9 +131,9 @@ Here are some examples to show what we mean.
|
|||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
<form class="form-inline navbar-form pull-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-primary" type="submit">Search</button>
|
||||
<button class="btn btn-primary-outline" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -205,7 +154,7 @@ Here are some examples to show what we mean.
|
|||
|
||||
## Containers
|
||||
|
||||
Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of a [fixed or static top navbar](#placement).
|
||||
Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of the navbar.
|
||||
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
|
|
@ -251,16 +200,16 @@ Navbars can be statically placed (their default behavior), static without rounde
|
|||
Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
☰
|
||||
</button>
|
||||
<div class="collapse" id="exCollapsingNavbar">
|
||||
<div class="bg-inverse p-a-1">
|
||||
<div class="bg-inverse p-a">
|
||||
<h4>Collapsed content</h4>
|
||||
<span class="text-muted">Toggleable via the navbar brand.</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
|
||||
☰
|
||||
</button>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -268,7 +217,7 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
|
|||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
|
||||
☰
|
||||
</button>
|
||||
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
|
||||
|
|
|
|||
|
|
@ -28,18 +28,18 @@ If you are using navs to provide a navigation bar, be sure to add a `role="navig
|
|||
|
||||
## Base nav
|
||||
|
||||
Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this by specifying additional styles. Includes styles for the disabled state, but **not the active state**.
|
||||
Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but **not the active state**.
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
|
|
@ -47,49 +47,17 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
|
|||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element. The change in nav item display below **is intentional** as `<li>`s have a different default `display` than regular `<a>` elements.
|
||||
Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element.
|
||||
|
||||
{% example html %}
|
||||
<nav class="nav">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
## Inline
|
||||
|
||||
Space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
|
||||
|
||||
{% example html %}
|
||||
<nav class="nav nav-inline">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
The same works for a navigation built with lists.
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav nav-inline">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
## Tabs
|
||||
|
||||
Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior).
|
||||
|
|
@ -103,7 +71,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
|
|||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
|
|
@ -124,7 +92,7 @@ Take that same HTML, but use `.nav-pills` instead:
|
|||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
|
|
@ -132,9 +100,9 @@ Take that same HTML, but use `.nav-pills` instead:
|
|||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
### Stacked pills
|
||||
## Stacked pills
|
||||
|
||||
Add `.nav-stacked` to the `.nav.nav-pills` to stack them vertically. Each `.nav-link` becomes block-level, allowing for larger hit areas via mouse or tap.
|
||||
Just add `.nav-stacked` to the `.nav.nav-pills`.
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
|
|
@ -145,7 +113,7 @@ Add `.nav-stacked` to the `.nav.nav-pills` to stack them vertically. Each `.nav-
|
|||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
|
|
@ -153,17 +121,6 @@ Add `.nav-stacked` to the `.nav.nav-pills` to stack them vertically. Each `.nav-
|
|||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
As always, stacked pills are possible without `<ul>`s.
|
||||
|
||||
{% example html %}
|
||||
<nav class="nav nav-pills nav-stacked">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
## Using dropdowns
|
||||
|
||||
Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/components/dropdowns/#usage).
|
||||
|
|
@ -186,7 +143,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
|||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
|
|
@ -212,7 +169,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
|||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
|
|
@ -359,14 +316,6 @@ Activates a tab element and content container. Tab should have either a `data-ta
|
|||
</script>
|
||||
{% endhighlight %}
|
||||
|
||||
#### .tab('show')
|
||||
|
||||
Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs).
|
||||
|
||||
{% highlight js %}
|
||||
$('#someTab').tab('show')
|
||||
{% endhighlight %}
|
||||
|
||||
### Events
|
||||
|
||||
When showing a new tab, the events fire in the following order:
|
||||
|
|
|
|||
|
|
@ -15,33 +15,33 @@ See the <a href="/material-design/buttons">Material Design</a> section for more
|
|||
|
||||
|
||||
|
||||
Provide pagination links for your site or app with the multi-page pagination component.
|
||||
Provide pagination links for your site or app with the multi-page pagination component, or the simpler [pager alternative](#pager).
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Overview
|
||||
## Default pagination
|
||||
|
||||
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<li>
|
||||
<a href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li>
|
||||
<a href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
|
|
@ -50,34 +50,28 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
|
|||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
## Disabled and active states
|
||||
### Disabled and active states
|
||||
|
||||
Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page.
|
||||
|
||||
{% callout warning %}
|
||||
#### Link functionality caveat
|
||||
|
||||
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. 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, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
|
||||
{% endcallout %}
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1" aria-label="Previous">
|
||||
<li class="disabled">
|
||||
<a href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
|
||||
<li class="active">
|
||||
<a href="#">1 <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">4</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li>
|
||||
<a href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
|
|
@ -86,41 +80,41 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
|
|||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.
|
||||
You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality while retaining intended styles.
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<span class="page-link" aria-label="Previous">
|
||||
<li class="disabled">
|
||||
<span aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="page-item active"><span class="page-link">1 <span class="sr-only">(current)</span></span></li>
|
||||
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
## Sizing
|
||||
### Sizing
|
||||
|
||||
Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination pagination-lg">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<li>
|
||||
<a href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li>
|
||||
<a href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
|
|
@ -132,17 +126,17 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
|||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination pagination-sm">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<li>
|
||||
<a href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li>
|
||||
<a href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
|
|
@ -150,3 +144,47 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
|||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
## Pager
|
||||
|
||||
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
|
||||
|
||||
### Default example
|
||||
|
||||
By default, the pager centers links.
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pager">
|
||||
<li><a href="#">Previous</a></li>
|
||||
<li><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
### Aligned links
|
||||
|
||||
Alternatively, you can align each link to the sides:
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pager">
|
||||
<li class="pager-prev"><a href="#">Older</a></li>
|
||||
<li class="pager-next"><a href="#">Newer</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Optional disabled state
|
||||
|
||||
Pager links also use the `.disabled` class.
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pager">
|
||||
<li class="pager-prev disabled"><a href="#">Older</a></li>
|
||||
<li class="pager-next"><a href="#">Newer</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ Uses a gradient to create a striped effect.
|
|||
|
||||
The striped gradient can also be animated. Add `.progress-animated` to `.progress` to animate the stripes right to left via CSS3 animations.
|
||||
|
||||
**Animated progress bars do not work in IE9 and Opera 12** – as they don't support CSS3 animations – **nor in IE10+ and Microsoft Edge** – as they currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx).
|
||||
**Animated progress bars do not work in IE9 and Opera 12** as they don't support CSS3 animations.
|
||||
|
||||
<div class="bd-example">
|
||||
<progress class="progress progress-striped" value="25" max="100">25%</progress>
|
||||
|
|
|
|||
|
|
@ -128,12 +128,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).
|
||||
|
||||
{% callout warning %}
|
||||
#### Making tooltips work for keyboard and assistive technology users
|
||||
|
||||
You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation.
|
||||
{% endcallout %}
|
||||
|
||||
{% highlight html %}
|
||||
<!-- HTML to write -->
|
||||
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
|
||||
|
|
|
|||
|
|
@ -26,52 +26,78 @@ Bootstrap includes dozens of utilities—classes with a single purpose. They're
|
|||
|
||||
Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.
|
||||
|
||||
The classes are named using the format: `{property}-{sides}-{size}`
|
||||
|
||||
Where *property* is one of:
|
||||
|
||||
* `m` - for classes that set `margin`
|
||||
* `p` - for classes that set `padding`
|
||||
|
||||
Where *sides* is one of:
|
||||
|
||||
* `t` - for classes that set `margin-top` or `padding-top`
|
||||
* `b` - for classes that set `margin-bottom` or `padding-bottom`
|
||||
* `l` - for classes that set `margin-left` or `padding-left`
|
||||
* `r` - for classes that set `margin-right` or `padding-right`
|
||||
* `x` - for classes that set both `*-left` and `*-right`
|
||||
* `y` - for classes that set both `*-top` and `*-bottom`
|
||||
* `a` - for classes that set a `margin` or `padding` on all 4 sides of the element
|
||||
|
||||
Where *size* is one of:
|
||||
|
||||
* `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
|
||||
* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y`
|
||||
* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
|
||||
* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3`
|
||||
|
||||
Here are some representative examples of these classes:
|
||||
### Margin
|
||||
|
||||
{% highlight scss %}
|
||||
.m-t-0 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.m-a-0 { margin: 0 !important; }
|
||||
.m-t-0 { margin-top: 0 !important; }
|
||||
.m-r-0 { margin-right: 0 !important; }
|
||||
.m-b-0 { margin-bottom: 0 !important; }
|
||||
.m-l-0 { margin-left: 0 !important; }
|
||||
.m-x-0 { margin-right: 0 !important; margin-left: 0 !important; }
|
||||
.m-y-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
|
||||
|
||||
.m-l-1 {
|
||||
margin-left: $spacer-x !important;
|
||||
}
|
||||
.m-a { margin: $spacer !important; }
|
||||
.m-t { margin-top: $spacer-y !important; }
|
||||
.m-r { margin-right: $spacer-x !important; }
|
||||
.m-b { margin-bottom: $spacer-y !important; }
|
||||
.m-l { margin-left: $spacer-x !important; }
|
||||
.m-x { margin-right: $spacer-x !important; margin-left: $spacer-x !important; }
|
||||
.m-y { margin-top: $spacer-y !important; margin-bottom: $spacer-y !important; }
|
||||
.m-x-auto { margin-right: auto !important; margin-left: auto !important; }
|
||||
|
||||
.p-x-2 {
|
||||
padding-left: ($spacer-x * 1.5) !important;
|
||||
padding-right: ($spacer-x * 1.5) !important;
|
||||
}
|
||||
.m-a-md { margin: ($spacer * 1.5) !important; }
|
||||
.m-t-md { margin-top: ($spacer-y * 1.5) !important; }
|
||||
.m-r-md { margin-right: ($spacer-y * 1.5) !important; }
|
||||
.m-b-md { margin-bottom: ($spacer-y * 1.5) !important; }
|
||||
.m-l-md { margin-left: ($spacer-y * 1.5) !important; }
|
||||
.m-x-md { margin-right: ($spacer-x * 1.5) !important; margin-left: ($spacer-x * 1.5) !important; }
|
||||
.m-y-md { margin-top: ($spacer-y * 1.5) !important; margin-bottom: ($spacer-y * 1.5) !important; }
|
||||
|
||||
.p-a-3 {
|
||||
padding: ($spacer-y * 3) ($spacer-x * 3) !important;
|
||||
}
|
||||
.m-a-lg { margin: ($spacer * 3) !important; }
|
||||
.m-t-lg { margin-top: ($spacer-y * 3) !important; }
|
||||
.m-r-lg { margin-right: ($spacer-y * 3) !important; }
|
||||
.m-b-lg { margin-bottom: ($spacer-y * 3) !important; }
|
||||
.m-l-lg { margin-left: ($spacer-y * 3) !important; }
|
||||
.m-x-lg { margin-right: ($spacer-x * 3) !important; margin-left: ($spacer-x * 3) !important; }
|
||||
.m-y-lg { margin-top: ($spacer-y * 3) !important; margin-bottom: ($spacer-y * 3) !important; }
|
||||
{% endhighlight %}
|
||||
|
||||
Additionally, Bootstrap also includes an `.m-x-auto` class which sets the horizontal margins to `auto`.
|
||||
### Padding
|
||||
|
||||
{% highlight scss %}
|
||||
.p-a-0 { padding: 0 !important; }
|
||||
.p-t-0 { padding-top: 0 !important; }
|
||||
.p-r-0 { padding-right: 0 !important; }
|
||||
.p-b-0 { padding-bottom: 0 !important; }
|
||||
.p-l-0 { padding-left: 0 !important; }
|
||||
.p-x-0 { padding-left: 0 !important; padding-right: 0 !important; }
|
||||
.p-y-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
|
||||
|
||||
.p-a { padding: $spacer !important; }
|
||||
.p-t { padding-top: $spacer-y !important; }
|
||||
.p-r { padding-right: $spacer-x !important; }
|
||||
.p-b { padding-bottom: $spacer-y !important; }
|
||||
.p-l { padding-left: $spacer-x !important; }
|
||||
.p-x { padding-right: $spacer-x !important; padding-left: $spacer-x !important; }
|
||||
.p-y { padding-top: $spacer-y !important; padding-bottom: $spacer-y !important; }
|
||||
|
||||
.p-a-md { padding: ($spacer * 1.5) !important; }
|
||||
.p-t-md { padding-top: ($spacer-y * 1.5) !important; }
|
||||
.p-r-md { padding-right: ($spacer-y * 1.5) !important; }
|
||||
.p-b-md { padding-bottom: ($spacer-y * 1.5) !important; }
|
||||
.p-l-md { padding-left: ($spacer-y * 1.5) !important; }
|
||||
.p-x-md { padding-right: ($spacer-x * 1.5) !important; padding-left: ($spacer-x * 1.5) !important; }
|
||||
.p-y-md { padding-top: ($spacer-y * 1.5) !important; padding-bottom: ($spacer-y * 1.5) !important; }
|
||||
|
||||
.p-a-lg { padding: ($spacer * 3) !important; }
|
||||
.p-t-lg { padding-top: ($spacer-y * 3) !important; }
|
||||
.p-r-lg { padding-right: ($spacer-y * 3) !important; }
|
||||
.p-b-lg { padding-bottom: ($spacer-y * 3) !important; }
|
||||
.p-l-lg { padding-left: ($spacer-y * 3) !important; }
|
||||
.p-x-lg { padding-right: ($spacer-x * 3) !important; padding-left: ($spacer-x * 3) !important; }
|
||||
.p-y-lg { padding-top: ($spacer-y * 3) !important; padding-bottom: ($spacer-y * 3) !important; }
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
## Text alignment
|
||||
|
|
@ -79,23 +105,13 @@ Additionally, Bootstrap also includes an `.m-x-auto` class which sets the horizo
|
|||
Easily realign text to components with text alignment classes.
|
||||
|
||||
{% example html %}
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
<p class="text-justify">Justified text.</p>
|
||||
<p class="text-nowrap">No wrap text.</p>
|
||||
{% endexample %}
|
||||
|
||||
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
|
||||
|
||||
{% example html %}
|
||||
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
|
||||
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
|
||||
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
|
||||
|
||||
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
|
||||
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
|
||||
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
|
||||
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
|
||||
{% endexample %}
|
||||
|
||||
## Text transform
|
||||
|
||||
Transform text in components with text capitalization classes.
|
||||
|
|
@ -106,18 +122,6 @@ Transform text in components with text capitalization classes.
|
|||
<p class="text-capitalize">CapiTaliZed text.</p>
|
||||
{% endexample %}
|
||||
|
||||
Note how `text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected.
|
||||
|
||||
## Font weight and italics
|
||||
|
||||
Quickly change the weight (boldness) of text or italicize text.
|
||||
|
||||
{% example html %}
|
||||
<p class="font-weight-bold">Bold text.</p>
|
||||
<p class="font-weight-normal">Normal weight text.</p>
|
||||
<p class="font-italic">Italic text.</p>
|
||||
{% endexample %}
|
||||
|
||||
## Contextual colors and backgrounds
|
||||
|
||||
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
|
||||
|
|
@ -175,25 +179,25 @@ Use a generic close icon for dismissing content like modals and alerts. **Be sur
|
|||
</button>
|
||||
{% endexample %}
|
||||
|
||||
## Responsive floats
|
||||
## Floats
|
||||
|
||||
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.
|
||||
|
||||
Two similar non-responsive mixins (`pull-left` and `pull-right`) are also available.
|
||||
Float an element to the left or right with a class. `!important` is included to avoid specificity issues. Classes can also be used as mixins.
|
||||
|
||||
{% example html %}
|
||||
<div class="pull-xs-left">Float left on all viewport sizes</div><br>
|
||||
<div class="pull-xs-right">Float right on all viewport sizes</div><br>
|
||||
<div class="pull-xs-none">Don't float on all viewport sizes</div><br>
|
||||
|
||||
<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div><br>
|
||||
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div><br>
|
||||
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div><br>
|
||||
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
|
||||
<div class="pull-left">Float left</div>
|
||||
<div class="pull-right">Float right</div>
|
||||
{% endexample %}
|
||||
|
||||
{% highlight scss %}
|
||||
// Related simple non-responsive mixins
|
||||
// Classes
|
||||
.pull-left {
|
||||
float: left !important;
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
// Usage as mixins
|
||||
.element {
|
||||
@include pull-left;
|
||||
}
|
||||
|
|
@ -265,7 +269,7 @@ The `.invisible` class can be used to toggle only the visibility of an element,
|
|||
|
||||
// Usage as a mixin
|
||||
.element {
|
||||
@include invisible;
|
||||
.invisible();
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
|
|
@ -335,9 +339,4 @@ Aspect ratios can be customized with modifier classes.
|
|||
<div class="embed-responsive embed-responsive-4by3">
|
||||
<iframe class="embed-responsive-item" src="..."></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 1:1 aspect ratio -->
|
||||
<div class="embed-responsive embed-responsive-1by1">
|
||||
<iframe class="embed-responsive-item" src="..."></iframe>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -24,20 +24,18 @@ Styles for inline code snippets and longer, multiline blocks of code.
|
|||
|
||||
## Inline code
|
||||
|
||||
Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets.
|
||||
Wrap inline snippets of code with `code`. Be sure to escape HTML angle brackets.
|
||||
|
||||
{% example html %}
|
||||
For example, <code><section></code> should be wrapped as inline.
|
||||
{% endexample %}
|
||||
|
||||
## Code blocks
|
||||
## Preformatted text
|
||||
|
||||
Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the `.pre-scrollable` class, which will set a max-height of 350px and provide a y-axis scrollbar.
|
||||
Or, code blocks. Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the `.pre-scrollable` class, which will set a max-height of 350px and provide a y-axis scrollbar.
|
||||
|
||||
{% example html %}
|
||||
<pre><code><p>Sample text here...</p>
|
||||
<p>And another line of sample text here...</p>
|
||||
</code></pre>
|
||||
<pre><p>Sample text here...</p></pre>
|
||||
{% endexample %}
|
||||
|
||||
## Variables
|
||||
|
|
@ -59,7 +57,7 @@ To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
|||
|
||||
## Sample output
|
||||
|
||||
For indicating sample output from a program use the `<samp>` tag.
|
||||
For indicating blocks sample output from a program use the `<samp>` tag.
|
||||
|
||||
{% example html %}
|
||||
<samp>This text is meant to be treated as sample output from a computer program.</samp>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,6 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
|
|||
{% example html %}
|
||||
<figure class="figure">
|
||||
<img data-src="holder.js/400x300" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
|
||||
<figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
|
||||
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
|
||||
</figure>
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
|
|||
{% callout warning %}
|
||||
#### SVG images and IE 9-10
|
||||
|
||||
In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
|
||||
In Internet Explorer 9-10, SVG images with `.img-fluid` 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
|
||||
|
|
@ -58,34 +58,34 @@ Add classes to an `<img>` element to easily style images in any project.
|
|||
|
||||
## Aligning images
|
||||
|
||||
Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). A simple centering class can also be used for `block` level images.
|
||||
Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). A simple centering class can also be used for `block` level images.
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
<img data-src="holder.js/200x200" class="img-rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
|
||||
<img data-src="holder.js/200x200" class="img-rounded pull-xs-right" alt="A generic square placeholder image with rounded corners">
|
||||
<img data-src="holder.js/200x200" class="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">
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<img src="..." class="img-rounded pull-xs-left" alt="...">
|
||||
<img src="..." class="img-rounded pull-xs-right" alt="...">
|
||||
<img src="..." class="img-rounded pull-left" alt="...">
|
||||
<img src="..." class="img-rounded pull-right" alt="...">
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
<img data-src="holder.js/200x200" class="img-rounded center-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>
|
||||
|
||||
{% highlight html %}
|
||||
<img src="..." class="img-rounded center-block" alt="...">
|
||||
<img src="..." class="img-rounded center-block" style="display: block;" alt="...">
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bd-example bd-example-images">
|
||||
<div class="text-xs-center">
|
||||
<div class="text-center">
|
||||
<img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="text-xs-center">
|
||||
<div class="text-center">
|
||||
<img src="..." class="img-rounded" alt="...">
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -236,7 +236,7 @@ These changes, and more, are demonstrated below.
|
|||
|
||||
<p>
|
||||
<label for="time">Example temporal</label>
|
||||
<input type="datetime-local" id="time">
|
||||
<input type="datetime" id="time">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -158,22 +158,22 @@ Add `.initialism` to an abbreviation for a slightly smaller font-size.
|
|||
|
||||
## Blockquotes
|
||||
|
||||
For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.
|
||||
For quoting blocks of content from another source within your document. Wrap `<blockquote>` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a `<p>`.
|
||||
|
||||
{% example html %}
|
||||
<blockquote class="blockquote">
|
||||
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
{% endexample %}
|
||||
|
||||
### Naming a source
|
||||
|
||||
Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`.
|
||||
Add a `<footer>` for identifying the source. Wrap the name of the source work in `<cite>`.
|
||||
|
||||
{% example html %}
|
||||
<blockquote class="blockquote">
|
||||
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
<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>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -183,8 +183,8 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content.
|
|||
|
||||
{% example html %}
|
||||
<blockquote class="blockquote blockquote-reverse">
|
||||
<p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
<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>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -216,22 +216,22 @@ Remove the default `list-style` and left margin on list items (immediate childre
|
|||
|
||||
### Inline
|
||||
|
||||
Place all list items on a single line with `display: inline-block;` and some basic margin between.
|
||||
Place all list items on a single line with `display: inline-block;` and some light padding.
|
||||
|
||||
{% example html %}
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item">Lorem ipsum</li>
|
||||
<li class="list-inline-item">Phasellus iaculis</li>
|
||||
<li class="list-inline-item">Nulla volutpat</li>
|
||||
<li>Lorem ipsum</li>
|
||||
<li>Phasellus iaculis</li>
|
||||
<li>Nulla volutpat</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
### Description list alignment
|
||||
### Horizontal description
|
||||
|
||||
Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
|
||||
|
||||
{% example html %}
|
||||
<dl class="row">
|
||||
<dl class="dl-horizontal">
|
||||
<dt class="col-sm-3">Description lists</dt>
|
||||
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
|
||||
|
||||
|
|
@ -244,14 +244,6 @@ Align terms and descriptions horizontally by using our grid system's predefined
|
|||
|
||||
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
||||
|
||||
<dt class="col-sm-3">Nesting</dt>
|
||||
<dd class="col-sm-9">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-3">Nested definition list</dt>
|
||||
<dd class="col-sm-9">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
{% endexample %}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,13 +24,11 @@ Bootstrap supports a wide variety of modern browsers and devices, and some older
|
|||
|
||||
## Supported browsers
|
||||
|
||||
Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 9-11 / Microsoft Edge**.
|
||||
|
||||
Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.
|
||||
Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 9-11 / Microsoft Edge**. More specific support information is provided below.
|
||||
|
||||
### Mobile devices
|
||||
|
||||
Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
|
||||
Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
|
|
@ -39,9 +37,9 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor
|
|||
<td></td>
|
||||
<th>Chrome</th>
|
||||
<th>Firefox</th>
|
||||
<th>Opera</th>
|
||||
<th>Safari</th>
|
||||
<th>Android Browser & WebView</th>
|
||||
<th>Microsoft Edge</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -49,25 +47,17 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor
|
|||
<th scope="row">Android</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-danger">Not supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-success">Android v5.0+ supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">iOS</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-danger">Not supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Windows 10 Mobile</th>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -119,34 +109,42 @@ Unofficially, Bootstrap should look and behave well enough in Chromium and Chrom
|
|||
|
||||
For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs]({{ site.baseurl }}/browser-bugs/).
|
||||
|
||||
## Internet Explorer 9 & 10
|
||||
## Internet Explorer 9
|
||||
|
||||
Internet Explorer 9 & 10 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported.
|
||||
Internet Explorer 9 is also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Feature</th>
|
||||
<th scope="col">Internet Explorer 9</th>
|
||||
<th scope="col">Internet Explorer 10</th>
|
||||
<th scope="col">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"><code>border-radius</code></a></th>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow"><code>box-shadow</code></a></th>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform"><code>transform</code></a></th>
|
||||
<td class="text-success">Supported, with <code>-ms</code> prefix</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition"><code>transition</code></a></th>
|
||||
<td class="text-danger">Not supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder"><code>placeholder</code></a></th>
|
||||
<td class="text-danger">Not supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a></th>
|
||||
<td class="text-danger">Not supported</td>
|
||||
<td class="text-warning">Partially supported, with <code>-ms</code> prefix<br><a href="http://caniuse.com/#feat=flexbox">See <em>Can I use</em> for details</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -231,7 +229,7 @@ Even in some modern browsers, printing can be quirky.
|
|||
|
||||
In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. [See #12078 for some details.](https://github.com/twbs/bootstrap/issues/12078) Suggested workarounds:
|
||||
|
||||
Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:
|
||||
Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:</p>
|
||||
|
||||
{% highlight css %}
|
||||
@media print {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user