Skip to content

B
bootstrap
Commit 5fc4b353 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge pull request #17168 from kkirsche/patch-19 

v4 - Rename .img-responsive class to .img-fluid
parents 0c0f675b 54fba7cb
Show whitespace changes
Inline Side-by-side
Showing with 30 additions and 30 deletions
docs/assets/css/docs.min.css
View file @ 5fc4b353
...@@ -3,5 +3,5 @@ ...@@ -3,5 +3,5 @@
* Copyright 2011-2015 Twitter, Inc. * Copyright 2011-2015 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For * Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see http://creativecommons.org/licenses/by/3.0/. * details, see http://creativecommons.org/licenses/by/3.0/.
*/.bd-masthead,.bd-pageheader .container{position:relative}.ge,.sd{font-style:italic}.bd-booticon{display:block;width:9rem;height:9rem;font-size:6.5rem;line-height:9rem;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bd-booticon.inverse{color:#563d7c;background-color:#fff}.bd-booticon.outline{background-color:transparent;border:1px solid #cdbfe3}.bd-navbar{font-size:87.5%}.bd-navbar .navbar-nav .nav-link{color:#8e869d}.bd-navbar .navbar-nav .nav-link.active,.bd-navbar .navbar-nav .nav-link:focus,.bd-navbar .navbar-nav .nav-link:hover{color:#373a3c;background-color:transparent}.bd-navbar .navbar-nav .nav-link.active{font-weight:500}.bd-navbar .dropdown-menu{font-size:inherit}@media (max-width:47.9em){.bd-navbar .nav-link{float:none}.bd-navbar .nav-link+.nav-link{margin-left:0}}.bd-masthead{padding:3rem .9375rem 2rem;color:#cdbfe3;text-align:center;background:-webkit-linear-gradient(315deg,#271b38,#563d7c,#7952b3);background:-o-linear-gradient(315deg,#271b38,#563d7c,#7952b3);background:linear-gradient(135deg,#271b38,#563d7c,#7952b3)}.bd-masthead .bd-booticon{margin:0 auto 2rem;color:#cdbfe3;border-color:#cdbfe3}.bd-masthead h1{font-weight:300;line-height:1}.bd-masthead .lead{margin-left:auto;margin-right:auto;margin-bottom:2rem;font-size:1.25rem;color:#fff}.bd-masthead .version{margin-top:-1rem;margin-bottom:2rem}.bd-masthead .btn{width:100%;padding:1rem 2rem;font-size:1.25rem;font-weight:500;color:#ffe484;border-color:#ffe484}.bd-masthead .btn:hover{color:#2a2730;background-color:#ffe484;border-color:#ffe484}.bd-masthead .carbonad{margin-bottom:-2rem!important}@media (min-width:34em){.bd-masthead{padding-top:8rem;padding-bottom:2rem}.bd-masthead .btn{width:auto}.bd-masthead .carbonad{margin-bottom:0!important}}@media (min-width:48em){.bd-masthead{padding-bottom:4rem}.bd-masthead .bd-header{margin-bottom:4rem}.bd-masthead h1{font-size:4rem}.bd-masthead .lead{font-size:1.5rem}.bd-masthead .carbonad{margin-top:3rem!important}}@media (min-width:62em){.bd-masthead .lead{width:85%;font-size:2rem}}.bd-featurette{padding-top:3rem;padding-bottom:3rem;font-size:1rem;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-top:1px solid #eee}.bd-featurette .highlight{text-align:left}.bd-featurette .lead{margin-right:auto;margin-bottom:2rem;margin-left:auto;font-size:1rem;text-align:center}@media (min-width:34em){.bd-featurette{text-align:left}}@media (min-width:48em){.bd-featurette .col-sm-6:first-child{padding-right:2.8125rem}.bd-featurette .col-sm-6:last-child{padding-left:2.8125rem}}.bd-featurette-title{margin-bottom:.5rem;font-size:2rem;font-weight:400;color:#333;text-align:center}.half-rule{width:6rem;margin:2.5rem auto}.carbonad,.carbonad-tag,.carbonad-text{width:auto!important;height:auto!important;font-family:inherit!important}@media (min-width:34em){.half-rule{margin-right:0;margin-left:0}}.bd-featurette h4{margin-top:1rem;margin-bottom:.5rem;font-weight:400;color:#333}.bd-featurette-img{display:block;margin-bottom:1.25rem;color:#333}.bd-featurette-img:hover{color:#0275d8;text-decoration:none}.bd-featurette-img img{display:block;margin-bottom:1rem}@media (min-width:480px){.bd-featurette .img-responsive{margin-top:2rem}}@media (min-width:768px){.bd-featurette{padding-top:6rem;padding-bottom:6rem}.bd-featurette-title{font-size:2.5rem}.bd-featurette-title+.lead{font-size:1.5rem}.bd-featurette .lead{max-width:80%}.bd-featurette .img-responsive{margin-top:0}}.bd-featured-sites{margin-right:-1px;margin-left:-1px}.bd-featured-sites .col-xs-6{padding:1px}.bd-featured-sites .img-responsive{margin-top:0}@media (min-width:768px){.bd-featured-sites .col-sm-3:first-child img{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.bd-featured-sites .col-sm-3:last-child img{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}}.carbonad{padding:1.25rem!important;margin:2rem -1.875rem -2rem!important;overflow:hidden;font-size:.8rem!important;line-height:1rem!important;color:#cdbfe3!important;text-align:left;background:#3e2c5a!important;border:0!important}.carbonad-img{margin:0!important}.carbonad-tag,.carbonad-text{display:block!important;float:none!important;margin-left:145px!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-tag a,.carbonad-text a{color:#cdbfe3!important}.carbonad-tag a:hover,.carbonad-text a:hover{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:34em){.carbonad{width:330px!important;padding:1rem!important;margin-right:auto!important;margin-left:auto!important;border-radius:.25rem}}.bd-content>table{display:block;width:100%;max-width:100%;overflow-y:auto;margin-bottom:1rem}.bd-content>table>tbody>tr>td,.bd-content>table>tbody>tr>th,.bd-content>table>tfoot>tr>td,.bd-content>table>tfoot>tr>th,.bd-content>table>thead>tr>td,.bd-content>table>thead>tr>th{padding:.75rem;line-height:1.5;vertical-align:top;border:1px solid #eceeef}.bd-content>table>tbody>tr>td>p:last-child,.bd-content>table>tbody>tr>th>p:last-child,.bd-content>table>tfoot>tr>td>p:last-child,.bd-content>table>tfoot>tr>th>p:last-child,.bd-content>table>thead>tr>td>p:last-child,.bd-content>table>thead>tr>th>p:last-child{margin-bottom:0}#markdown-toc ul,.bd-content>ol li,.bd-content>ul li{margin-bottom:.25rem}.bd-content>table td:first-child>code{white-space:nowrap}.bd-content>h2:not(:first-child){margin-top:3rem}.bd-content>h3{margin-top:1.5rem}@media (min-width:34em){.bd-title{font-size:3rem}.bd-title+p{font-size:1.25rem;font-weight:300}}#markdown-toc>li:first-child{display:none}#markdown-toc ul{padding-left:2rem;margin-top:.25rem}.bd-pageheader{padding:2rem .9375rem;margin-bottom:1.5rem;color:#cdbfe3;text-align:center;background-color:#563d7c}.bd-pageheader h1{font-size:3rem;font-weight:400;color:#fff}.bd-pageheader p{margin-bottom:0;font-size:1.25rem;font-weight:300}@media (min-width:34em){.bd-pageheader{padding-top:4rem;padding-bottom:4rem;margin-bottom:3rem;text-align:left}.bd-pageheader .carbonad{margin:2rem 0 0!important}}@media (min-width:62em){.bd-pageheader h1,.bd-pageheader p{margin-right:380px}.bd-pageheader .carbonad{position:absolute;top:0;right:.75rem;margin:0!important}}@media (min-width:48em){.bd-pageheader h1{font-size:4rem}.bd-pageheader p{font-size:1.5rem}.bd-sidebar{padding-left:1rem}}.bd-search{position:relative;margin-bottom:1.5rem}.bd-search .form-control{height:2.45rem;padding-top:.4rem;padding-bottom:.4rem;background-color:#fafafa}.bd-search .form-control:focus{background-color:#fff}.bd-search-results{right:0;display:block;padding:0;overflow:hidden;font-size:.9rem}.bd-search-results:empty,.bd-sidenav{display:none}.bd-search-results .dropdown-item{padding-left:.75rem;padding-right:.75rem}.bd-search-results .dropdown-item:first-child{margin-top:.25rem}.bd-search-results .dropdown-item:last-child{margin-bottom:.25rem}.bd-search-results .no-results{padding:.75rem 1rem;color:#7a7a7a;text-align:center}.active>.bd-sidenav,.bd-toc-link{display:block}.bd-toc-link{padding:.25rem .75rem;color:#55595c}.bd-toc-link:focus,.bd-toc-link:hover{color:#0275d8;text-decoration:none}.active>.bd-toc-link{font-weight:500;color:#373a3c}.bd-toc-item.active{margin-top:1rem;margin-bottom:1rem}.bd-toc-item:first-child{margin-top:0}.bd-toc-item:last-child{margin-bottom:2rem}.bd-sidebar .nav>li>a{display:block;padding:.25rem .75rem;font-size:90%;color:#99979c}.bd-sidebar .nav>li>a:focus,.bd-sidebar .nav>li>a:hover{color:#0275d8;text-decoration:none;background-color:transparent}.bd-sidebar .nav>.active:focus>a,.bd-sidebar .nav>.active:hover>a,.bd-sidebar .nav>.active>a{font-weight:500;color:#373a3c;background-color:transparent}.bd-footer{padding:4rem 0;margin-top:4rem;font-size:85%;background-color:#f7f7f7;text-align:center}.bd-footer a{font-weight:500;color:#55595c}.bd-footer a:hover{color:#0275d8}.bd-footer p{margin-bottom:0}.bd-example-row .row,.bd-footer-links{margin-bottom:1rem}@media (min-width:34em){.bd-footer{text-align:left}}.bd-brand-item,.bd-example-tooltips,.responsive-utilities td{text-align:center}.bd-footer-links{padding-left:0}.bd-footer-links li{display:inline-block}.bd-footer-links li+li{margin-left:1rem}.bd-example-row .row>[class^=col-]{padding-top:.75rem;padding-bottom:.75rem;background-color:rgba(86,61,124,.15);border:1px solid rgba(86,61,124,.2)}.bd-example-container{min-width:16rem;max-width:25rem;margin-left:auto;margin-right:auto}.bd-example-container-header{height:3rem;margin-bottom:.5rem;background-color:#daeeff;border-radius:.25rem}.bd-example-container-sidebar{float:right;width:4rem;height:8rem;background-color:#fae3c4;border-radius:.25rem}.bd-example-container-body{height:8rem;margin-right:4.5rem;background-color:#957bbe;border-radius:.25rem}.bd-example-container-fluid{max-width:none}.bd-example{position:relative;padding:1rem;margin:1rem -1rem;border:solid #f7f7f9;border-width:.2rem 0 0}.bd-example::after{content:"";display:table;clear:both}@media (min-width:34em){.bd-example{margin-left:0;margin-right:0;margin-bottom:0;padding:1.5rem;border-width:.2rem}}.bd-example+.highlight,.bd-example+.zero-clipboard+.highlight{margin-top:0}.bd-example+p{margin-top:2rem}.bd-example .container{width:auto}.bd-example>.form-control+.form-control{margin-top:.5rem}.bd-example>.card{max-width:20rem}.bd-example>.alert+.alert,.bd-example>.nav+.nav,.bd-example>.navbar+.navbar,.bd-example>.progress+.btn,.bd-example>.progress+.progress{margin-top:1rem}.bd-example>.dropdown-menu:first-child{position:static;display:block}.bd-example>.close{float:none}.bd-example-type .table .type-info{color:#999;vertical-align:middle}.bd-example-type .table td{padding:1rem 0;border-color:#eee}.bd-example-type .table tr:first-child td{border-top:0}.bd-example-type h1,.bd-example-type h2,.bd-example-type h3,.bd-example-type h4,.bd-example-type h5,.bd-example-type h6{margin:0}.bd-example-bg-classes p{padding:1rem}.bd-example>img+img{margin-left:.5rem}.bd-example>.btn-group{margin-top:.25rem;margin-bottom:.25rem}.bd-example-control-sizing input[type=text]+input[type=text],.bd-example-control-sizing select,.bd-example>.btn-toolbar+.btn-toolbar{margin-top:.5rem}.bd-example-form .input-group{margin-bottom:.5rem}.bd-example>textarea.form-control{resize:vertical}.bd-example>.list-group{max-width:400px}.bd-example .navbar-fixed-top{position:static;margin:-1rem -1rem 1rem}.bd-example .navbar-fixed-bottom{position:static;margin:1rem -1rem -1rem}@media (min-width:34em){.bd-example .navbar-fixed-top{margin:-1.5rem -1.5rem 1rem}.bd-example .navbar-fixed-bottom{margin:1rem -1.5rem -1.5rem}}.bd-example .pagination{margin-top:.5rem;margin-bottom:.5rem}.bd-example>.pager{margin-top:0}.bd-example-modal{background-color:#f5f5f5}.bd-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bd-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bd-example>.dropdown>.dropdown-toggle{float:left}.bd-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:.25rem;clear:left}.bd-example-tabs .nav-tabs{margin-bottom:1rem}.bd-example-tooltips>.btn{margin-top:.25rem;margin-bottom:.25rem}.bd-example-popover{padding-bottom:1.5rem;background-color:#f9f9f9}.bd-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:1.25rem}.bd-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.scrollspy-example{position:relative;height:200px;margin-top:.5rem;overflow:auto}.bd-example>.center-block:not(img){max-width:200px;padding:.5rem;background-color:#eee}.bd-example>.bg-danger:not(.navbar),.bd-example>.bg-info:not(.navbar),.bd-example>.bg-primary:not(.navbar),.bd-example>.bg-success:not(.navbar),.bd-example>.bg-warning:not(.navbar){padding:.5rem;margin-top:.5rem;margin-bottom:.5rem}.highlight{padding:1rem;margin:1rem -1rem;background-color:#f7f7f9}@media (min-width:34em){.highlight{padding:1.5rem;margin-right:0;margin-left:0}}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#373a3c}#focusedInput{border-color:#66afe9;outline:0;outline:dotted thin\9;-webkit-box-shadow:0 0 .5rem rgba(102,175,233,.6);box-shadow:0 0 .5rem rgba(102,175,233,.6)}.table-responsive .highlight pre{white-space:normal}.bd-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:.25rem}.responsive-utilities-test .col-xs-6{margin-bottom:.5rem}.responsive-utilities-test span{display:block;padding:1rem .5rem;font-size:1rem;font-weight:700;line-height:1.1;text-align:center;border-radius:.25rem}.hidden-on .col-xs-6>.not-visible,.visible-on .col-xs-6>.not-visible{color:#999;border:1px solid #ddd}.hidden-on .col-xs-6 .visible,.visible-on .col-xs-6 .visible{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}@media (max-width:33.9em){.hidden-xs-only{display:none!important}}@media (min-width:34em) and (max-width:47.9em){.hidden-sm-only{display:none!important}}@media (min-width:48em) and (max-width:61.9em){.hidden-md-only{display:none!important}}@media (min-width:62em) and (max-width:74.9em){.hidden-lg-only{display:none!important}}@media (min-width:75em){.hidden-xl-only{display:none!important}}.btn-bs{font-weight:500;color:#7952b3;border-color:#7952b3}.btn-bs:active,.btn-bs:focus,.btn-bs:hover{color:#fff;background-color:#7952b3;border-color:#7952b3}.bd-callout{padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #eee;border-left-width:.25rem;border-radius:.25rem}.bd-callout h4{margin-top:0;margin-bottom:.25rem}.bd-callout p:last-child{margin-bottom:0}.bd-callout code{border-radius:.25rem}.bd-callout+.bd-callout{margin-top:-.25rem}.bd-callout-info{border-left-color:#5bc0de}.bd-callout-info h4{color:#5bc0de}.bd-callout-warning{border-left-color:#f0ad4e}.bd-callout-warning h4{color:#f0ad4e}.bd-callout-danger{border-left-color:#d9534f}.bd-callout-danger h4{color:#d9534f}.bd-examples .img-thumbnail{margin-bottom:.75rem}.bd-examples h4{margin-bottom:.25rem}.bd-examples p{margin-bottom:1.25rem}@media (max-width:480px){.bd-examples{margin-right:-.75rem;margin-left:-.75rem}.bd-examples>[class^=col-]{padding-right:.75rem;padding-left:.75rem}}.bd-team{margin-bottom:1.5rem}.bd-team .team-member{line-height:2rem;color:#555}.bd-team .team-member:hover{color:#333;text-decoration:none}.bd-team .github-btn{border:none;float:right;width:180px;height:1.25rem;margin-top:.25rem}.bd-team img,.color-swatch{float:left;border-radius:.25rem}.bd-team img{width:2rem;margin-right:.5rem}.bd-browser-bugs td p{margin-bottom:0}.bd-browser-bugs th:first-child{width:18%}.bd-brand-logos{display:table;width:100%;margin-bottom:1rem;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:.25rem}.bd-brand-logos .inverse,.color-swatches .bd-purple{background-color:#563d7c}.bd-brand-item{padding:4rem 0}.bd-brand-item+.bd-brand-item{border-top:1px solid #fff}.bd-brand-logos .inverse{color:#fff}.bd-brand-item h1,.bd-brand-item h3{margin-top:0;margin-bottom:0}.bd-brand-item .bd-booticon{margin-right:auto;margin-left:auto}@media (min-width:768px){.bd-brand-item{display:table-cell;width:1%}.bd-brand-item+.bd-brand-item{border-top:0;border-left:1px solid #fff}.bd-brand-item h1{font-size:4rem}}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{width:4rem;height:4rem;margin-right:.25rem;margin-left:.25rem}.color-swatches .bd-purple-light{background-color:#cdbfe3}.color-swatches .bd-purple-lighter{background-color:#e5e1ea}.color-swatches .bd-gray{background-color:#f9f9f9}.zero-clipboard{position:relative;display:none;float:right}.btn-clipboard{position:absolute;top:.5rem;right:.5rem;z-index:10;display:block;padding:.25rem .5rem;font-size:75%;color:#818a91;cursor:pointer;background-color:transparent;border-radius:.25rem}.btn-clipboard-hover{color:#fff;background-color:#027de7}@media (min-width:768px){.color-swatch{width:6rem;height:6rem}.zero-clipboard{display:block}}.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1,.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc,.kd,.kn,.kp,.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}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf,.mh,.mi,.mo{color:#F60}.s2,.sb,.sc,.sd,.se,.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc,.vg,.vi{color:#033}.il{color:#F60}.css .nt+.nt,.css .o,.css .o+.nt{color:#999}.anchorjs-link{color:inherit}@media (max-width:480px){.anchorjs-link{display:none}}:hover>.anchorjs-link{opacity:.75;-webkit-transition:color .16s linear;-o-transition:color .16s linear;transition:color .16s linear}.anchorjs-link:focus,:hover>.anchorjs-link:hover{text-decoration:none;opacity:1} */.bd-masthead,.bd-pageheader .container{position:relative}.ge,.sd{font-style:italic}.bd-booticon{display:block;width:9rem;height:9rem;font-size:6.5rem;line-height:9rem;color:#fff;text-align:center;cursor:default;background-color:#563d7c;border-radius:15%}.bd-booticon.inverse{color:#563d7c;background-color:#fff}.bd-booticon.outline{background-color:transparent;border:1px solid #cdbfe3}.bd-navbar{font-size:87.5%}.bd-navbar .navbar-nav .nav-link{color:#8e869d}.bd-navbar .navbar-nav .nav-link.active,.bd-navbar .navbar-nav .nav-link:focus,.bd-navbar .navbar-nav .nav-link:hover{color:#373a3c;background-color:transparent}.bd-navbar .navbar-nav .nav-link.active{font-weight:500}.bd-navbar .dropdown-menu{font-size:inherit}@media (max-width:47.9em){.bd-navbar .nav-link{float:none}.bd-navbar .nav-link+.nav-link{margin-left:0}}.bd-masthead{padding:3rem .9375rem 2rem;color:#cdbfe3;text-align:center;background:-webkit-linear-gradient(315deg,#271b38,#563d7c,#7952b3);background:-o-linear-gradient(315deg,#271b38,#563d7c,#7952b3);background:linear-gradient(135deg,#271b38,#563d7c,#7952b3)}.bd-masthead .bd-booticon{margin:0 auto 2rem;color:#cdbfe3;border-color:#cdbfe3}.bd-masthead h1{font-weight:300;line-height:1}.bd-masthead .lead{margin-left:auto;margin-right:auto;margin-bottom:2rem;font-size:1.25rem;color:#fff}.bd-masthead .version{margin-top:-1rem;margin-bottom:2rem}.bd-masthead .btn{width:100%;padding:1rem 2rem;font-size:1.25rem;font-weight:500;color:#ffe484;border-color:#ffe484}.bd-masthead .btn:hover{color:#2a2730;background-color:#ffe484;border-color:#ffe484}.bd-masthead .carbonad{margin-bottom:-2rem!important}@media (min-width:34em){.bd-masthead{padding-top:8rem;padding-bottom:2rem}.bd-masthead .btn{width:auto}.bd-masthead .carbonad{margin-bottom:0!important}}@media (min-width:48em){.bd-masthead{padding-bottom:4rem}.bd-masthead .bd-header{margin-bottom:4rem}.bd-masthead h1{font-size:4rem}.bd-masthead .lead{font-size:1.5rem}.bd-masthead .carbonad{margin-top:3rem!important}}@media (min-width:62em){.bd-masthead .lead{width:85%;font-size:2rem}}.bd-featurette{padding-top:3rem;padding-bottom:3rem;font-size:1rem;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-top:1px solid #eee}.bd-featurette .highlight{text-align:left}.bd-featurette .lead{margin-right:auto;margin-bottom:2rem;margin-left:auto;font-size:1rem;text-align:center}@media (min-width:34em){.bd-featurette{text-align:left}}@media (min-width:48em){.bd-featurette .col-sm-6:first-child{padding-right:2.8125rem}.bd-featurette .col-sm-6:last-child{padding-left:2.8125rem}}.bd-featurette-title{margin-bottom:.5rem;font-size:2rem;font-weight:400;color:#333;text-align:center}.half-rule{width:6rem;margin:2.5rem auto}.carbonad,.carbonad-tag,.carbonad-text{width:auto!important;height:auto!important;font-family:inherit!important}@media (min-width:34em){.half-rule{margin-right:0;margin-left:0}}.bd-featurette h4{margin-top:1rem;margin-bottom:.5rem;font-weight:400;color:#333}.bd-featurette-img{display:block;margin-bottom:1.25rem;color:#333}.bd-featurette-img:hover{color:#0275d8;text-decoration:none}.bd-featurette-img img{display:block;margin-bottom:1rem}@media (min-width:480px){.bd-featurette .img-fluid{margin-top:2rem}}@media (min-width:768px){.bd-featurette{padding-top:6rem;padding-bottom:6rem}.bd-featurette-title{font-size:2.5rem}.bd-featurette-title+.lead{font-size:1.5rem}.bd-featurette .lead{max-width:80%}.bd-featurette .img-fluid{margin-top:0}}.bd-featured-sites{margin-right:-1px;margin-left:-1px}.bd-featured-sites .col-xs-6{padding:1px}.bd-featured-sites .img-fluid{margin-top:0}@media (min-width:768px){.bd-featured-sites .col-sm-3:first-child img{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.bd-featured-sites .col-sm-3:last-child img{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}}.carbonad{padding:1.25rem!important;margin:2rem -1.875rem -2rem!important;overflow:hidden;font-size:.8rem!important;line-height:1rem!important;color:#cdbfe3!important;text-align:left;background:#3e2c5a!important;border:0!important}.carbonad-img{margin:0!important}.carbonad-tag,.carbonad-text{display:block!important;float:none!important;margin-left:145px!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.carbonad-tag a,.carbonad-text a{color:#cdbfe3!important}.carbonad-tag a:hover,.carbonad-text a:hover{color:#fff!important}.carbonad #azcarbon>img{display:none}@media (min-width:34em){.carbonad{width:330px!important;padding:1rem!important;margin-right:auto!important;margin-left:auto!important;border-radius:.25rem}}.bd-content>table{display:block;width:100%;max-width:100%;overflow-y:auto;margin-bottom:1rem}.bd-content>table>tbody>tr>td,.bd-content>table>tbody>tr>th,.bd-content>table>tfoot>tr>td,.bd-content>table>tfoot>tr>th,.bd-content>table>thead>tr>td,.bd-content>table>thead>tr>th{padding:.75rem;line-height:1.5;vertical-align:top;border:1px solid #eceeef}.bd-content>table>tbody>tr>td>p:last-child,.bd-content>table>tbody>tr>th>p:last-child,.bd-content>table>tfoot>tr>td>p:last-child,.bd-content>table>tfoot>tr>th>p:last-child,.bd-content>table>thead>tr>td>p:last-child,.bd-content>table>thead>tr>th>p:last-child{margin-bottom:0}#markdown-toc ul,.bd-content>ol li,.bd-content>ul li{margin-bottom:.25rem}.bd-content>table td:first-child>code{white-space:nowrap}.bd-content>h2:not(:first-child){margin-top:3rem}.bd-content>h3{margin-top:1.5rem}@media (min-width:34em){.bd-title{font-size:3rem}.bd-title+p{font-size:1.25rem;font-weight:300}}#markdown-toc>li:first-child{display:none}#markdown-toc ul{padding-left:2rem;margin-top:.25rem}.bd-pageheader{padding:2rem .9375rem;margin-bottom:1.5rem;color:#cdbfe3;text-align:center;background-color:#563d7c}.bd-pageheader h1{font-size:3rem;font-weight:400;color:#fff}.bd-pageheader p{margin-bottom:0;font-size:1.25rem;font-weight:300}@media (min-width:34em){.bd-pageheader{padding-top:4rem;padding-bottom:4rem;margin-bottom:3rem;text-align:left}.bd-pageheader .carbonad{margin:2rem 0 0!important}}@media (min-width:62em){.bd-pageheader h1,.bd-pageheader p{margin-right:380px}.bd-pageheader .carbonad{position:absolute;top:0;right:.75rem;margin:0!important}}@media (min-width:48em){.bd-pageheader h1{font-size:4rem}.bd-pageheader p{font-size:1.5rem}.bd-sidebar{padding-left:1rem}}.bd-search{position:relative;margin-bottom:1.5rem}.bd-search .form-control{height:2.45rem;padding-top:.4rem;padding-bottom:.4rem;background-color:#fafafa}.bd-search .form-control:focus{background-color:#fff}.bd-search-results{right:0;display:block;padding:0;overflow:hidden;font-size:.9rem}.bd-search-results:empty,.bd-sidenav{display:none}.bd-search-results .dropdown-item{padding-left:.75rem;padding-right:.75rem}.bd-search-results .dropdown-item:first-child{margin-top:.25rem}.bd-search-results .dropdown-item:last-child{margin-bottom:.25rem}.bd-search-results .no-results{padding:.75rem 1rem;color:#7a7a7a;text-align:center}.active>.bd-sidenav,.bd-toc-link{display:block}.bd-toc-link{padding:.25rem .75rem;color:#55595c}.bd-toc-link:focus,.bd-toc-link:hover{color:#0275d8;text-decoration:none}.active>.bd-toc-link{font-weight:500;color:#373a3c}.bd-toc-item.active{margin-top:1rem;margin-bottom:1rem}.bd-toc-item:first-child{margin-top:0}.bd-toc-item:last-child{margin-bottom:2rem}.bd-sidebar .nav>li>a{display:block;padding:.25rem .75rem;font-size:90%;color:#99979c}.bd-sidebar .nav>li>a:focus,.bd-sidebar .nav>li>a:hover{color:#0275d8;text-decoration:none;background-color:transparent}.bd-sidebar .nav>.active:focus>a,.bd-sidebar .nav>.active:hover>a,.bd-sidebar .nav>.active>a{font-weight:500;color:#373a3c;background-color:transparent}.bd-footer{padding:4rem 0;margin-top:4rem;font-size:85%;background-color:#f7f7f7;text-align:center}.bd-footer a{font-weight:500;color:#55595c}.bd-footer a:hover{color:#0275d8}.bd-footer p{margin-bottom:0}.bd-example-row .row,.bd-footer-links{margin-bottom:1rem}@media (min-width:34em){.bd-footer{text-align:left}}.bd-brand-item,.bd-example-tooltips,.responsive-utilities td{text-align:center}.bd-footer-links{padding-left:0}.bd-footer-links li{display:inline-block}.bd-footer-links li+li{margin-left:1rem}.bd-example-row .row>[class^=col-]{padding-top:.75rem;padding-bottom:.75rem;background-color:rgba(86,61,124,.15);border:1px solid rgba(86,61,124,.2)}.bd-example-container{min-width:16rem;max-width:25rem;margin-left:auto;margin-right:auto}.bd-example-container-header{height:3rem;margin-bottom:.5rem;background-color:#daeeff;border-radius:.25rem}.bd-example-container-sidebar{float:right;width:4rem;height:8rem;background-color:#fae3c4;border-radius:.25rem}.bd-example-container-body{height:8rem;margin-right:4.5rem;background-color:#957bbe;border-radius:.25rem}.bd-example-container-fluid{max-width:none}.bd-example{position:relative;padding:1rem;margin:1rem -1rem;border:solid #f7f7f9;border-width:.2rem 0 0}.bd-example::after{content:"";display:table;clear:both}@media (min-width:34em){.bd-example{margin-left:0;margin-right:0;margin-bottom:0;padding:1.5rem;border-width:.2rem}}.bd-example+.highlight,.bd-example+.zero-clipboard+.highlight{margin-top:0}.bd-example+p{margin-top:2rem}.bd-example .container{width:auto}.bd-example>.form-control+.form-control{margin-top:.5rem}.bd-example>.card{max-width:20rem}.bd-example>.alert+.alert,.bd-example>.nav+.nav,.bd-example>.navbar+.navbar,.bd-example>.progress+.btn,.bd-example>.progress+.progress{margin-top:1rem}.bd-example>.dropdown-menu:first-child{position:static;display:block}.bd-example>.close{float:none}.bd-example-type .table .type-info{color:#999;vertical-align:middle}.bd-example-type .table td{padding:1rem 0;border-color:#eee}.bd-example-type .table tr:first-child td{border-top:0}.bd-example-type h1,.bd-example-type h2,.bd-example-type h3,.bd-example-type h4,.bd-example-type h5,.bd-example-type h6{margin:0}.bd-example-bg-classes p{padding:1rem}.bd-example>img+img{margin-left:.5rem}.bd-example>.btn-group{margin-top:.25rem;margin-bottom:.25rem}.bd-example-control-sizing input[type=text]+input[type=text],.bd-example-control-sizing select,.bd-example>.btn-toolbar+.btn-toolbar{margin-top:.5rem}.bd-example-form .input-group{margin-bottom:.5rem}.bd-example>textarea.form-control{resize:vertical}.bd-example>.list-group{max-width:400px}.bd-example .navbar-fixed-top{position:static;margin:-1rem -1rem 1rem}.bd-example .navbar-fixed-bottom{position:static;margin:1rem -1rem -1rem}@media (min-width:34em){.bd-example .navbar-fixed-top{margin:-1.5rem -1.5rem 1rem}.bd-example .navbar-fixed-bottom{margin:1rem -1.5rem -1.5rem}}.bd-example .pagination{margin-top:.5rem;margin-bottom:.5rem}.bd-example>.pager{margin-top:0}.bd-example-modal{background-color:#f5f5f5}.bd-example-modal .modal{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:1;display:block}.bd-example-modal .modal-dialog{left:auto;margin-right:auto;margin-left:auto}.bd-example>.dropdown>.dropdown-toggle{float:left}.bd-example>.dropdown>.dropdown-menu{position:static;display:block;margin-bottom:.25rem;clear:left}.bd-example-tabs .nav-tabs{margin-bottom:1rem}.bd-example-tooltips>.btn{margin-top:.25rem;margin-bottom:.25rem}.bd-example-popover{padding-bottom:1.5rem;background-color:#f9f9f9}.bd-example-popover .popover{position:relative;display:block;float:left;width:260px;margin:1.25rem}.bd-example-tooltip .tooltip{position:relative;display:inline-block;margin:10px 20px;opacity:1}.scrollspy-example{position:relative;height:200px;margin-top:.5rem;overflow:auto}.bd-example>.center-block:not(img){max-width:200px;padding:.5rem;background-color:#eee}.bd-example>.bg-danger:not(.navbar),.bd-example>.bg-info:not(.navbar),.bd-example>.bg-primary:not(.navbar),.bd-example>.bg-success:not(.navbar),.bd-example>.bg-warning:not(.navbar){padding:.5rem;margin-top:.5rem;margin-bottom:.5rem}.highlight{padding:1rem;margin:1rem -1rem;background-color:#f7f7f9}@media (min-width:34em){.highlight{padding:1.5rem;margin-right:0;margin-left:0}}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit;color:#373a3c}#focusedInput{border-color:#66afe9;outline:0;outline:dotted thin\9;-webkit-box-shadow:0 0 .5rem rgba(102,175,233,.6);box-shadow:0 0 .5rem rgba(102,175,233,.6)}.table-responsive .highlight pre{white-space:normal}.bd-table th small,.responsive-utilities th small{display:block;font-weight:400;color:#999}.responsive-utilities tbody th{font-weight:400}.responsive-utilities td.is-visible{color:#468847;background-color:#dff0d8!important}.responsive-utilities td.is-hidden{color:#ccc;background-color:#f9f9f9!important}.responsive-utilities-test{margin-top:.25rem}.responsive-utilities-test .col-xs-6{margin-bottom:.5rem}.responsive-utilities-test span{display:block;padding:1rem .5rem;font-size:1rem;font-weight:700;line-height:1.1;text-align:center;border-radius:.25rem}.hidden-on .col-xs-6>.not-visible,.visible-on .col-xs-6>.not-visible{color:#999;border:1px solid #ddd}.hidden-on .col-xs-6 .visible,.visible-on .col-xs-6 .visible{color:#468847;background-color:#dff0d8;border:1px solid #d6e9c6}@media (max-width:33.9em){.hidden-xs-only{display:none!important}}@media (min-width:34em) and (max-width:47.9em){.hidden-sm-only{display:none!important}}@media (min-width:48em) and (max-width:61.9em){.hidden-md-only{display:none!important}}@media (min-width:62em) and (max-width:74.9em){.hidden-lg-only{display:none!important}}@media (min-width:75em){.hidden-xl-only{display:none!important}}.btn-bs{font-weight:500;color:#7952b3;border-color:#7952b3}.btn-bs:active,.btn-bs:focus,.btn-bs:hover{color:#fff;background-color:#7952b3;border-color:#7952b3}.bd-callout{padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #eee;border-left-width:.25rem;border-radius:.25rem}.bd-callout h4{margin-top:0;margin-bottom:.25rem}.bd-callout p:last-child{margin-bottom:0}.bd-callout code{border-radius:.25rem}.bd-callout+.bd-callout{margin-top:-.25rem}.bd-callout-info{border-left-color:#5bc0de}.bd-callout-info h4{color:#5bc0de}.bd-callout-warning{border-left-color:#f0ad4e}.bd-callout-warning h4{color:#f0ad4e}.bd-callout-danger{border-left-color:#d9534f}.bd-callout-danger h4{color:#d9534f}.bd-examples .img-thumbnail{margin-bottom:.75rem}.bd-examples h4{margin-bottom:.25rem}.bd-examples p{margin-bottom:1.25rem}@media (max-width:480px){.bd-examples{margin-right:-.75rem;margin-left:-.75rem}.bd-examples>[class^=col-]{padding-right:.75rem;padding-left:.75rem}}.bd-team{margin-bottom:1.5rem}.bd-team .team-member{line-height:2rem;color:#555}.bd-team .team-member:hover{color:#333;text-decoration:none}.bd-team .github-btn{border:none;float:right;width:180px;height:1.25rem;margin-top:.25rem}.bd-team img,.color-swatch{float:left;border-radius:.25rem}.bd-team img{width:2rem;margin-right:.5rem}.bd-browser-bugs td p{margin-bottom:0}.bd-browser-bugs th:first-child{width:18%}.bd-brand-logos{display:table;width:100%;margin-bottom:1rem;overflow:hidden;color:#563d7c;background-color:#f9f9f9;border-radius:.25rem}.bd-brand-logos .inverse,.color-swatches .bd-purple{background-color:#563d7c}.bd-brand-item{padding:4rem 0}.bd-brand-item+.bd-brand-item{border-top:1px solid #fff}.bd-brand-logos .inverse{color:#fff}.bd-brand-item h1,.bd-brand-item h3{margin-top:0;margin-bottom:0}.bd-brand-item .bd-booticon{margin-right:auto;margin-left:auto}@media (min-width:768px){.bd-brand-item{display:table-cell;width:1%}.bd-brand-item+.bd-brand-item{border-top:0;border-left:1px solid #fff}.bd-brand-item h1{font-size:4rem}}.color-swatches{margin:0 -5px;overflow:hidden}.color-swatch{width:4rem;height:4rem;margin-right:.25rem;margin-left:.25rem}.color-swatches .bd-purple-light{background-color:#cdbfe3}.color-swatches .bd-purple-lighter{background-color:#e5e1ea}.color-swatches .bd-gray{background-color:#f9f9f9}.zero-clipboard{position:relative;display:none;float:right}.btn-clipboard{position:absolute;top:.5rem;right:.5rem;z-index:10;display:block;padding:.25rem .5rem;font-size:75%;color:#818a91;cursor:pointer;background-color:transparent;border-radius:.25rem}.btn-clipboard-hover{color:#fff;background-color:#027de7}@media (min-width:768px){.color-swatch{width:6rem;height:6rem}.zero-clipboard{display:block}}.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1,.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc,.kd,.kn,.kp,.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}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf,.mh,.mi,.mo{color:#F60}.s2,.sb,.sc,.sd,.se,.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc,.vg,.vi{color:#033}.il{color:#F60}.css .nt+.nt,.css .o,.css .o+.nt{color:#999}.anchorjs-link{color:inherit}@media (max-width:480px){.anchorjs-link{display:none}}:hover>.anchorjs-link{opacity:.75;-webkit-transition:color .16s linear;-o-transition:color .16s linear;transition:color .16s linear}.anchorjs-link:focus,:hover>.anchorjs-link:hover{text-decoration:none;opacity:1}
/*# sourceMappingURL=docs.min.css.map */ /*# sourceMappingURL=docs.min.css.map */
docs/assets/scss/_featured-sites.scss
View file @ 5fc4b353
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
.bd-featured-sites .col-xs-6 { .bd-featured-sites .col-xs-6 {
padding: 1px; padding: 1px;
} }
.bd-featured-sites .img-responsive { .bd-featured-sites .img-fluid {
margin-top: 0; margin-top: 0;
} }
......
docs/assets/scss/_featurettes.scss
View file @ 5fc4b353
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
} }
@media (min-width: 480px) { @media (min-width: 480px) {
.bd-featurette .img-responsive { .bd-featurette .img-fluid {
margin-top: 2rem; margin-top: 2rem;
} }
} }
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
.bd-featurette .lead { .bd-featurette .lead {
max-width: 80%; max-width: 80%;
} }
.bd-featurette .img-responsive { .bd-featurette .img-fluid {
margin-top: 0; margin-top: 0;
} }
} }
docs/content/images.md
View file @ 5fc4b353
...@@ -13,20 +13,20 @@ Opt your images into responsive behavior (so they never become larger than their ...@@ -13,20 +13,20 @@ Opt your images into responsive behavior (so they never become larger than their
## Responsive images ## Responsive images
Images in Bootstrap are made responsive with `.img-responsive`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element. Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
<div class="bd-example"> <div class="bd-example">
<img data-src="holder.js/100%x250" class="img-responsive" alt="Generic responsive image"> <img data-src="holder.js/100%x250" class="img-fluid" alt="Generic responsive image">
</div> </div>
{% highlight html %} {% highlight html %}
<img src="..." class="img-responsive" alt="Responsive image"> <img src="..." class="img-fluid" alt="Responsive image">
{% endhighlight %} {% endhighlight %}
{% callout warning %} {% callout warning %}
#### SVG images and IE 9-10 #### SVG images and IE 9-10
In Internet Explorer 9-10, SVG images with `.img-responsive` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats. 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 %} {% endcallout %}
## Image shapes ## Image shapes
......
docs/dist/css/bootstrap.css
View file @ 5fc4b353
...@@ -649,7 +649,7 @@ mark, ...@@ -649,7 +649,7 @@ mark,
color: #818a91; color: #818a91;
} }
.img-responsive, .figure > img, .carousel-inner > .carousel-item > img, .img-fluid, .figure > img, .carousel-inner > .carousel-item > img,
.carousel-inner > .carousel-item > a > img { .carousel-inner > .carousel-item > a > img {
display: block; display: block;
max-width: 100%; max-width: 100%;
......
docs/dist/css/bootstrap.min.css
View file @ 5fc4b353
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/examples/carousel/index.html
View file @ 5fc4b353
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div> </div>
</div> </div>
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<div class="col-md-5 col-md-pull-7"> <div class="col-md-5 col-md-pull-7">
<img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div> </div>
</div> </div>
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image"> <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div> </div>
</div> </div>
......
docs/examples/dashboard/index.html
View file @ 5fc4b353
...@@ -71,22 +71,22 @@ ...@@ -71,22 +71,22 @@
<div class="row placeholders"> <div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder"> <div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4> <h4>Label</h4>
<span class="text-muted">Something else</span> <span class="text-muted">Something else</span>
</div> </div>
<div class="col-xs-6 col-sm-3 placeholder"> <div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4> <h4>Label</h4>
<span class="text-muted">Something else</span> <span class="text-muted">Something else</span>
</div> </div>
<div class="col-xs-6 col-sm-3 placeholder"> <div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4> <h4>Label</h4>
<span class="text-muted">Something else</span> <span class="text-muted">Something else</span>
</div> </div>
<div class="col-xs-6 col-sm-3 placeholder"> <div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4> <h4>Label</h4>
<span class="text-muted">Something else</span> <span class="text-muted">Something else</span>
</div> </div>
......
docs/index.html
View file @ 5fc4b353
...@@ -55,17 +55,17 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f ...@@ -55,17 +55,17 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<div class="row"> <div class="row">
<div class="col-sm-4 m-b-lg"> <div class="col-sm-4 m-b-lg">
<img src="assets/img/sass.png" alt="Sass support" class="img-responsive"> <img src="assets/img/sass.png" alt="Sass support" class="img-fluid">
<h4>Preprocessor</h4> <h4>Preprocessor</h4>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="http://sass-lang.com/">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p> <p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="http://sass-lang.com/">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
</div> </div>
<div class="col-sm-4 m-b-lg"> <div class="col-sm-4 m-b-lg">
<img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive"> <img src="assets/img/devices.png" alt="Responsive across devices" class="img-fluid">
<h4>One framework, every device.</h4> <h4>One framework, every device.</h4>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p> <p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div> </div>
<div class="col-sm-4 m-b-lg"> <div class="col-sm-4 m-b-lg">
<img src="assets/img/components.png" alt="Components" class="img-responsive"> <img src="assets/img/components.png" alt="Components" class="img-fluid">
<h4>Full of features</h4> <h4>Full of features</h4>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p> <p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div> </div>
...@@ -89,7 +89,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f ...@@ -89,7 +89,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<a href="{{ site.themes }}" class="btn btn-bs btn-outline">Browse themes</a> <a href="{{ site.themes }}" class="btn btn-bs btn-outline">Browse themes</a>
</p> </p>
<img class="img-responsive center-block" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388"> <img class="img-fluid center-block" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
</div> </div>
</div> </div>
...@@ -102,7 +102,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f ...@@ -102,7 +102,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
{% for showcase in site.data.showcase %} {% for showcase in site.data.showcase %}
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}"> <a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}">
<img src="{{ site.baseurl }}/assets/img/expo-{{ showcase.img }}.jpg" alt="{{ showcase.name }}" class="img-responsive"> <img src="{{ site.baseurl }}/assets/img/expo-{{ showcase.img }}.jpg" alt="{{ showcase.name }}" class="img-fluid">
</a> </a>
</div> </div>
{% endfor %} {% endfor %}
......
scss/_carousel.scss
View file @ 5fc4b353
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
// Account for jankitude on images // Account for jankitude on images
> img, > img,
> a > img { > a > img {
@extend .img-responsive; @extend .img-fluid;
line-height: 1; line-height: 1;
} }
......
scss/_images.scss
View file @ 5fc4b353
// Responsive images (ensure images don't scale beyond their parents) // Responsive images (ensure images don't scale beyond their parents)
.img-responsive { .img-fluid {
@include img-responsive(); @include img-fluid();
} }
// Rounded corners // Rounded corners
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
@include box-shadow(0 1px 2px rgba(0,0,0,.075)); @include box-shadow(0 1px 2px rgba(0,0,0,.075));
// Keep them at most 100% wide // Keep them at most 100% wide
@include img-responsive(inline-block); @include img-fluid(inline-block);
} }
// Perfect circle // Perfect circle
......
scss/_type.scss
View file @ 5fc4b353
...@@ -175,7 +175,7 @@ mark, ...@@ -175,7 +175,7 @@ mark,
display: inline-block; display: inline-block;
> img { > img {
@extend .img-responsive; @extend .img-fluid;
margin-bottom: ($spacer-y / 2); margin-bottom: ($spacer-y / 2);
line-height: 1; line-height: 1;
} }
......
scss/mixins/_image.scss
View file @ 5fc4b353
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
// //
// Keep images from scaling beyond the width of their parents. // Keep images from scaling beyond the width of their parents.
@mixin img-responsive($display: block) { @mixin img-fluid($display: block) {
display: $display; display: $display;
max-width: 100%; // Part 1: Set a maximum relative to the parent max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment