mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev
This commit is contained in:
Mark Otto
commit
7e07d5bf2e
@ -57,7 +57,7 @@ bootstrap/
|
||||
└── bootstrap.min.js
|
||||
```
|
||||
|
||||
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
|
||||
We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/web/tools/chrome-devtools/debug/readability/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
|
||||
|
||||
|
||||
## Bugs and feature requests
|
||||
|
||||
2
dist/css/bootstrap-grid.min.css
vendored
2
dist/css/bootstrap-grid.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap-grid.min.css.map
vendored
2
dist/css/bootstrap-grid.min.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap-reboot.min.css
vendored
2
dist/css/bootstrap-reboot.min.css
vendored
@ -1 +1 @@
|
||||
dl,h1,h2,h3,h4,h5,h6,ol,p,pre,ul{margin-top:0}address,dl,ol,p,pre,ul{margin-bottom:1rem}caption,th{text-align:left}button,hr,input{overflow:visible}pre,textarea{overflow:auto}dd,h1,h2,h3,h4,h5,h6,label,legend{margin-bottom:.5rem}address,legend{line-height:inherit}progress,sub,sup{vertical-align:baseline}label,output{display:inline-block}html{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}@-ms-viewport{width:device-width}body{margin:0;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#292b2c;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}abbr[data-original-title],abbr[title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0}address{font-style:normal}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-left:0}blockquote,figure{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0}sub{bottom:-.25em}sup{top:-.5em}a{color:#0275d8;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#014c8c;text-decoration:underline}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#636c72;caption-side:bottom}button:focus{outline:dotted 1px;outline:-webkit-focus-ring-color auto 5px}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=radio]:disabled,input[type=checkbox]:disabled{cursor:not-allowed}input[type=datetime-local],input[type=month],input[type=date],input[type=time]{-webkit-appearance:listbox}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;font-size:1.5rem;color:inherit;white-space:normal}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}summary{display:list-item}template{display:none}[hidden]{display:none!important}/*# sourceMappingURL=bootstrap-reboot.min.css.map */
|
||||
html{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}@-ms-viewport{width:device-width}body{margin:0;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#292b2c;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0275d8;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#014c8c;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#636c72;text-align:left;caption-side:bottom}th{text-align:left}label{display:inline-block;margin-bottom:.5rem}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}/*# sourceMappingURL=bootstrap-reboot.min.css.map */
|
||||
2
dist/css/bootstrap-reboot.min.css.map
vendored
2
dist/css/bootstrap-reboot.min.css.map
vendored
@ -1 +1 @@
|
||||
{"version":3,"sources":["../../scss/_reboot.scss","../../scss/_variables.scss","bootstrap-reboot.css","../../scss/mixins/_hover.scss"],"names":[],"mappings":"AA0HA,GAnCA,GAAI,GAAI,GAAI,GAAI,GAAI,GAmCpB,GA1BA,EAoIA,IA1GA,GA4GE,WAAA,EAlHF,QAMA,GAAA,GA1BA,EAoIA,IA1GA,GA8GE,cAAA,KA6DF,QAQA,GAEE,WAAA,KAkCF,OAzQA,GAyQA,MAEE,SAAA,QA/GF,IAoKA,SACE,SAAA,KA7PF,GArDA,GAAI,GAAI,GAAI,GAAI,GAAI,GAgOpB,MAsGA,OAKE,cAAA,MA9SF,QAySA,OAOE,YAAA,QAKF,SAlQA,IAAA,IAmQE,eAAA,SAnHF,MA4JA,OACE,QAAA,aAhcF,KACE,mBAAA,WAAA,WAAA,WACA,YAAA,WACA,YAAA,KACA,qBAAA,KACA,yBAAA,KACA,mBAAA,UACA,4BAAA,YAGF,EAAA,QAAA,SAGE,mBAAA,QAAA,WAAA,QAKA,cAAgB,MAAA,aASlB,KACE,OAAA,EACA,YAAA,cAAA,UAAA,mBAAA,WAAA,OCkM4H,iBDlM5H,MAAA,WACA,UAAA,KACA,YAAA,IACA,YAAA,IACA,MAAA,QACA,iBAAA,KExBF,sBFiCE,QAAA,YASF,GACE,mBAAA,YAAA,WAAA,YACA,OAAA,EAkCF,0BAAA,YAEE,gBAAA,UACA,gBAAA,UAAA,OACA,OAAA,KACA,cAAA,EAGF,QAEE,WAAA,OAWF,MAAA,MAAA,MAAA,MAIE,cAAA,EAGF,GACE,YAAA,IAGF,GAEE,YAAA,EAGF,WAiGA,OAhGE,OAAA,EAAA,EAAA,KAGF,IACE,WAAA,OAGF,EAAA,OAEE,YAAA,OAGF,MACE,UAAA,IAQF,IAAA,IAEE,SAAA,SACA,UAAA,IACA,YAAA,EAIF,IAAM,OAAA,OACN,IAAM,IAAA,MAON,EACE,MAAA,QACA,gBAAA,KACA,iBAAA,YACA,6BAAA,QGjLE,QHoLA,MAAA,QACA,gBAAA,UAUJ,8BGrLI,oCAAA,oCHsLF,MAAA,QACA,gBAAA,KAFF,oCAUI,QAAA,EASJ,KAAA,IAAA,IAAA,KAIE,YAAA,UAAA,UACA,UAAA,IA2BF,IACE,eAAA,OACA,aAAA,KAGF,eACE,SAAA,OAcF,cAAA,EAAA,KAAA,OAAA,MAAA,MAAA,OAAA,QAAA,SASE,iBAAA,aAAA,aAAA,aAQF,MACE,gBAAA,SAGF,QACE,YAAA,OACA,eAAA,OACA,MAAA,QAEA,aAAA,OAuBF,aACE,QAAA,OAAA,IACA,QAAA,yBAAA,KAAA,IAGF,OAAA,MAAA,SAAA,OAAA,SAKE,OAAA,EACA,YAAA,QACA,UAAA,QACA,YAAA,QAQF,OAAA,OAEE,eAAA,KAMF,aAAA,cAAA,OAAA,mBAIE,mBAAA,OAIF,gCAAA,+BAAA,gCAAA,yBAIE,QAAA,EACA,aAAA,KAGF,kBAAA,qBAEE,mBAAA,WAAA,WAAA,WACA,QAAA,EAHF,2BAAA,8BASI,OAAA,YAKJ,2BAAA,kBAAA,iBAAA,iBASE,mBAAA,QAGF,SAGE,OAAA,SAGF,SAME,UAAA,EAEA,QAAA,EACA,OAAA,EACA,OAAA,EAKF,OACE,QAAA,MACA,MAAA,KACA,UAAA,KACA,QAAA,EAEA,UAAA,OAEA,MAAA,QACA,YAAA,OEjIF,yCAAA,yCF2IE,OAAA,KEtIF,cF8IE,eAAA,KACA,mBAAA,KE1IF,4CAAA,yCFmJE,mBAAA,KAQF,6BACE,KAAA,QACA,mBAAA,OAWF,QACE,QAAA,UAGF,SACE,QAAA,KEvJF,SF6JE,QAAA"}
|
||||
{"version":3,"sources":["../../scss/_reboot.scss","dist/css/bootstrap-reboot.css","bootstrap-reboot.css","../../scss/mixins/_hover.scss"],"names":[],"mappings":"AAoBA,KACE,mBAAA,WAAA,WAAA,WACA,YAAA,WACA,YAAA,KACA,qBAAA,KACA,yBAAA,KACA,mBAAA,UACA,4BAAA,YAGF,ECjBA,QADA,SDqBE,mBAAA,QAAA,WAAA,QAKA,cAAgB,MAAA,aASlB,KACE,OAAA,EACA,YAAA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,KAAA,CAAA,WACA,UAAA,KACA,YAAA,IACA,YAAA,IACA,MAAA,QACA,iBAAA,KExBF,sBFiCE,QAAA,YASF,GACE,mBAAA,YAAA,WAAA,YACA,OAAA,EACA,SAAA,QAYF,GAAA,GAAA,GAAA,GAAA,GAAA,GACE,WAAA,EACA,cAAA,MAOF,EACE,WAAA,EACA,cAAA,KC5CF,0BDsDA,YAEE,gBAAA,UACA,gBAAA,UAAA,OACA,OAAA,KACA,cAAA,EAGF,QACE,cAAA,KACA,WAAA,OACA,YAAA,QClDF,GDqDA,GCtDA,GDyDE,WAAA,EACA,cAAA,KAGF,MCrDA,MACA,MAFA,MD0DE,cAAA,EAGF,GACE,YAAA,IAGF,GACE,cAAA,MACA,YAAA,EAGF,WACE,OAAA,EAAA,EAAA,KAGF,IACE,WAAA,OAGF,ECtDA,ODwDE,YAAA,OAGF,MACE,UAAA,IAQF,IC3DA,ID6DE,SAAA,SACA,UAAA,IACA,YAAA,EACA,eAAA,SAGF,IAAM,OAAA,OACN,IAAM,IAAA,MAON,EACE,MAAA,QACA,gBAAA,KACA,iBAAA,YACA,6BAAA,QGjLE,QHoLA,MAAA,QACA,gBAAA,UAUJ,8BACE,MAAA,QACA,gBAAA,KGvLE,oCAAA,oCH0LA,MAAA,QACA,gBAAA,KANJ,oCAUI,QAAA,EC7DJ,KACA,IDqEA,ICpEA,KDwEE,YAAA,SAAA,CAAA,UACA,UAAA,IAGF,IAEE,WAAA,EAEA,cAAA,KAEA,SAAA,KAQF,OAEE,OAAA,EAAA,EAAA,KAQF,IACE,eAAA,OACA,aAAA,KAGF,eACE,SAAA,OC/EF,cD6FA,EC/FA,KACA,OAEA,MACA,MACA,OACA,QACA,SDiGE,iBAAA,aAAA,aAAA,aAQF,MACE,gBAAA,SAGF,QACE,YAAA,OACA,eAAA,OACA,MAAA,QACA,WAAA,KACA,aAAA,OAGF,GAEE,WAAA,KAQF,MAEE,QAAA,aACA,cAAA,MAOF,aACE,QAAA,IAAA,OACA,QAAA,IAAA,KAAA,yBC3GF,OD8GA,MC5GA,SADA,OAEA,SDgHE,OAAA,EACA,YAAA,QACA,UAAA,QACA,YAAA,QAGF,OC9GA,MDgHE,SAAA,QAGF,OC9GA,ODgHE,eAAA,KC1GF,aACA,cD+GA,OCjHA,mBDqHE,mBAAA,OC9GF,gCACA,+BACA,gCDgHA,yBAIE,QAAA,EACA,aAAA,KC/GF,qBDkHA,kBAEE,mBAAA,WAAA,WAAA,WACA,QAAA,EC9GF,8BD2GA,2BASI,OAAA,YAKJ,iBCnHA,2BACA,kBAFA,iBD6HE,mBAAA,QAGF,SACE,SAAA,KAEA,OAAA,SAGF,SAME,UAAA,EAEA,QAAA,EACA,OAAA,EACA,OAAA,EAKF,OACE,QAAA,MACA,MAAA,KACA,UAAA,KACA,QAAA,EACA,cAAA,MACA,UAAA,OACA,YAAA,QACA,MAAA,QACA,YAAA,OAGF,SACE,eAAA,SErIF,yCDMA,yCDqIE,OAAA,KEtIF,cF8IE,eAAA,KACA,mBAAA,KE1IF,4CDMA,yCD6IE,mBAAA,KAQF,6BACE,KAAA,QACA,mBAAA,OAOF,OACE,QAAA,aAGF,QACE,QAAA,UAGF,SACE,QAAA,KEvJF,SF6JE,QAAA"}
|
||||
@ -3602,8 +3602,9 @@ tbody.collapse.show {
|
||||
background-size: 8px 10px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0.25rem;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.custom-select:focus {
|
||||
|
||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css.map
vendored
2
dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
4
dist/js/bootstrap.min.js
vendored
4
dist/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -15,7 +15,7 @@
|
||||
- title: Overview
|
||||
- title: Grid
|
||||
- title: Media object
|
||||
- title: Responsive utilities
|
||||
- title: Utilities for layout
|
||||
|
||||
- title: Content
|
||||
pages:
|
||||
@ -56,10 +56,9 @@
|
||||
- title: Clearfix
|
||||
- title: Close icon
|
||||
- title: Colors
|
||||
- title: Display
|
||||
- title: Flexbox
|
||||
- title: Display property
|
||||
- title: Image replacement
|
||||
- title: Invisible content
|
||||
- title: Position
|
||||
- title: Responsive helpers
|
||||
- title: Screenreaders
|
||||
@ -67,6 +66,7 @@
|
||||
- title: Spacing
|
||||
- title: Typography
|
||||
- title: Vertical align
|
||||
- title: Visibility
|
||||
|
||||
- title: Extend
|
||||
pages:
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
- name: Chinese
|
||||
code: zh
|
||||
description: Bootstrap 中文文档
|
||||
url: http://v4.bootcss.com/
|
||||
url: https://v4.bootcss.com/
|
||||
|
||||
- name: Chinese
|
||||
code: zh
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<form class="bd-search hidden-sm-down">
|
||||
<form class="bd-search d-none d-sm-block">
|
||||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
|
||||
<div class="dropdown-menu bd-search-results" id="search-results"></div>
|
||||
</form>
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</nav>
|
||||
{% endcomment %}
|
||||
|
||||
<div class="d-flex justify-content-between hidden-lg-up">
|
||||
<div class="d-flex justify-content-between d-lg-none">
|
||||
<a class="navbar-brand" href="{{ site.baseurl }}/">
|
||||
Bootstrap
|
||||
</a>
|
||||
|
||||
2
docs/assets/css/docs.min.css
vendored
2
docs/assets/css/docs.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
13
docs/assets/js/docs.min.js
vendored
13
docs/assets/js/docs.min.js
vendored
File diff suppressed because one or more lines are too long
@ -9,7 +9,7 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
margin-bottom: 1rem;
|
||||
overflow-y: auto;
|
||||
|
||||
// Cells
|
||||
|
||||
@ -10,86 +10,8 @@
|
||||
}
|
||||
|
||||
// Utility classes table
|
||||
.bd-table th small,
|
||||
.responsive-utilities th small {
|
||||
.bd-table th small {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
}
|
||||
.responsive-utilities tbody th {
|
||||
font-weight: normal;
|
||||
}
|
||||
.responsive-utilities td {
|
||||
text-align: center;
|
||||
}
|
||||
.responsive-utilities .is-visible {
|
||||
color: #468847;
|
||||
background-color: #dff0d8 !important;
|
||||
}
|
||||
.responsive-utilities .is-hidden {
|
||||
color: #ccc;
|
||||
background-color: #f9f9f9 !important;
|
||||
}
|
||||
|
||||
// Responsive tests
|
||||
.responsive-utilities-test {
|
||||
margin-top: .25rem;
|
||||
}
|
||||
.responsive-utilities-test .col-6 {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.responsive-utilities-test span {
|
||||
display: block;
|
||||
padding: 1rem .5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.visible-on,
|
||||
.hidden-on {
|
||||
.col-6 {
|
||||
> .not-visible {
|
||||
color: #999;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
.visible-on,
|
||||
.hidden-on {
|
||||
.col-6 {
|
||||
.visible {
|
||||
color: #468847;
|
||||
background-color: #dff0d8;
|
||||
border: 1px solid #d6e9c6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-only(xs) {
|
||||
.hidden-xs-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-only(sm) {
|
||||
.hidden-sm-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-only(md) {
|
||||
.hidden-md-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-only(lg) {
|
||||
.hidden-lg-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-only(xl) {
|
||||
.hidden-xl-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Badges
|
||||
description: Documentation and examples for badges, our small count and labelling component.
|
||||
description: Documentation and examples for badges, our small count and labeling component.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ You can use a link with the `href` attribute, or a button with the `data-target`
|
||||
|
||||
## Accordion example
|
||||
|
||||
Using the [card]({{ site.baseurl }}/components/card) component, you can extend the default collapse behavior to create an accordion.
|
||||
Using the [card]({{ site.baseurl }}/components/card/) component, you can extend the default collapse behavior to create an accordion.
|
||||
|
||||
{% example html %}
|
||||
<div id="accordion" role="tablist">
|
||||
|
||||
@ -20,7 +20,7 @@ Before getting started with Bootstrap's modal component, be sure to read the fol
|
||||
- Clicking on the modal "backdrop" will automatically close the modal.
|
||||
- Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences.
|
||||
- Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element.
|
||||
- One again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
|
||||
- Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
|
||||
- Lastly, the `autofocus` HTML attribute has no effect in modals. Here's how you can achieve the same effect with custom JavaScript.
|
||||
|
||||
Keep reading for demos and usage guidelines.
|
||||
@ -347,7 +347,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
|
||||
|
||||
### Varying modal content
|
||||
|
||||
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](https://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked.
|
||||
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) (possibly [via jQuery](https://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked.
|
||||
|
||||
Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`.
|
||||
|
||||
|
||||
@ -311,7 +311,7 @@ The `<abbr>` element receives basic styling to make it stand out amongst paragra
|
||||
|
||||
## HTML5 `[hidden]` attribute
|
||||
|
||||
HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem.
|
||||
HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem.
|
||||
|
||||
{% highlight html %}
|
||||
<input type="text" hidden>
|
||||
|
||||
2
docs/dist/css/bootstrap-grid.min.css
vendored
2
docs/dist/css/bootstrap-grid.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap-grid.min.css.map
vendored
2
docs/dist/css/bootstrap-grid.min.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap-reboot.min.css
vendored
2
docs/dist/css/bootstrap-reboot.min.css
vendored
@ -1 +1 @@
|
||||
dl,h1,h2,h3,h4,h5,h6,ol,p,pre,ul{margin-top:0}address,dl,ol,p,pre,ul{margin-bottom:1rem}caption,th{text-align:left}button,hr,input{overflow:visible}pre,textarea{overflow:auto}dd,h1,h2,h3,h4,h5,h6,label,legend{margin-bottom:.5rem}address,legend{line-height:inherit}progress,sub,sup{vertical-align:baseline}label,output{display:inline-block}html{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}@-ms-viewport{width:device-width}body{margin:0;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#292b2c;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}abbr[data-original-title],abbr[title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0}address{font-style:normal}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-left:0}blockquote,figure{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0}sub{bottom:-.25em}sup{top:-.5em}a{color:#0275d8;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#014c8c;text-decoration:underline}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#636c72;caption-side:bottom}button:focus{outline:dotted 1px;outline:-webkit-focus-ring-color auto 5px}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=radio]:disabled,input[type=checkbox]:disabled{cursor:not-allowed}input[type=datetime-local],input[type=month],input[type=date],input[type=time]{-webkit-appearance:listbox}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;font-size:1.5rem;color:inherit;white-space:normal}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}summary{display:list-item}template{display:none}[hidden]{display:none!important}/*# sourceMappingURL=bootstrap-reboot.min.css.map */
|
||||
html{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}@-ms-viewport{width:device-width}body{margin:0;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#292b2c;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0275d8;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#014c8c;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#636c72;text-align:left;caption-side:bottom}th{text-align:left}label{display:inline-block;margin-bottom:.5rem}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}/*# sourceMappingURL=bootstrap-reboot.min.css.map */
|
||||
2
docs/dist/css/bootstrap-reboot.min.css.map
vendored
2
docs/dist/css/bootstrap-reboot.min.css.map
vendored
@ -1 +1 @@
|
||||
{"version":3,"sources":["../../scss/_reboot.scss","../../scss/_variables.scss","bootstrap-reboot.css","../../scss/mixins/_hover.scss"],"names":[],"mappings":"AA0HA,GAnCA,GAAI,GAAI,GAAI,GAAI,GAAI,GAmCpB,GA1BA,EAoIA,IA1GA,GA4GE,WAAA,EAlHF,QAMA,GAAA,GA1BA,EAoIA,IA1GA,GA8GE,cAAA,KA6DF,QAQA,GAEE,WAAA,KAkCF,OAzQA,GAyQA,MAEE,SAAA,QA/GF,IAoKA,SACE,SAAA,KA7PF,GArDA,GAAI,GAAI,GAAI,GAAI,GAAI,GAgOpB,MAsGA,OAKE,cAAA,MA9SF,QAySA,OAOE,YAAA,QAKF,SAlQA,IAAA,IAmQE,eAAA,SAnHF,MA4JA,OACE,QAAA,aAhcF,KACE,mBAAA,WAAA,WAAA,WACA,YAAA,WACA,YAAA,KACA,qBAAA,KACA,yBAAA,KACA,mBAAA,UACA,4BAAA,YAGF,EAAA,QAAA,SAGE,mBAAA,QAAA,WAAA,QAKA,cAAgB,MAAA,aASlB,KACE,OAAA,EACA,YAAA,cAAA,UAAA,mBAAA,WAAA,OCkM4H,iBDlM5H,MAAA,WACA,UAAA,KACA,YAAA,IACA,YAAA,IACA,MAAA,QACA,iBAAA,KExBF,sBFiCE,QAAA,YASF,GACE,mBAAA,YAAA,WAAA,YACA,OAAA,EAkCF,0BAAA,YAEE,gBAAA,UACA,gBAAA,UAAA,OACA,OAAA,KACA,cAAA,EAGF,QAEE,WAAA,OAWF,MAAA,MAAA,MAAA,MAIE,cAAA,EAGF,GACE,YAAA,IAGF,GAEE,YAAA,EAGF,WAiGA,OAhGE,OAAA,EAAA,EAAA,KAGF,IACE,WAAA,OAGF,EAAA,OAEE,YAAA,OAGF,MACE,UAAA,IAQF,IAAA,IAEE,SAAA,SACA,UAAA,IACA,YAAA,EAIF,IAAM,OAAA,OACN,IAAM,IAAA,MAON,EACE,MAAA,QACA,gBAAA,KACA,iBAAA,YACA,6BAAA,QGjLE,QHoLA,MAAA,QACA,gBAAA,UAUJ,8BGrLI,oCAAA,oCHsLF,MAAA,QACA,gBAAA,KAFF,oCAUI,QAAA,EASJ,KAAA,IAAA,IAAA,KAIE,YAAA,UAAA,UACA,UAAA,IA2BF,IACE,eAAA,OACA,aAAA,KAGF,eACE,SAAA,OAcF,cAAA,EAAA,KAAA,OAAA,MAAA,MAAA,OAAA,QAAA,SASE,iBAAA,aAAA,aAAA,aAQF,MACE,gBAAA,SAGF,QACE,YAAA,OACA,eAAA,OACA,MAAA,QAEA,aAAA,OAuBF,aACE,QAAA,OAAA,IACA,QAAA,yBAAA,KAAA,IAGF,OAAA,MAAA,SAAA,OAAA,SAKE,OAAA,EACA,YAAA,QACA,UAAA,QACA,YAAA,QAQF,OAAA,OAEE,eAAA,KAMF,aAAA,cAAA,OAAA,mBAIE,mBAAA,OAIF,gCAAA,+BAAA,gCAAA,yBAIE,QAAA,EACA,aAAA,KAGF,kBAAA,qBAEE,mBAAA,WAAA,WAAA,WACA,QAAA,EAHF,2BAAA,8BASI,OAAA,YAKJ,2BAAA,kBAAA,iBAAA,iBASE,mBAAA,QAGF,SAGE,OAAA,SAGF,SAME,UAAA,EAEA,QAAA,EACA,OAAA,EACA,OAAA,EAKF,OACE,QAAA,MACA,MAAA,KACA,UAAA,KACA,QAAA,EAEA,UAAA,OAEA,MAAA,QACA,YAAA,OEjIF,yCAAA,yCF2IE,OAAA,KEtIF,cF8IE,eAAA,KACA,mBAAA,KE1IF,4CAAA,yCFmJE,mBAAA,KAQF,6BACE,KAAA,QACA,mBAAA,OAWF,QACE,QAAA,UAGF,SACE,QAAA,KEvJF,SF6JE,QAAA"}
|
||||
{"version":3,"sources":["../../scss/_reboot.scss","dist/css/bootstrap-reboot.css","bootstrap-reboot.css","../../scss/mixins/_hover.scss"],"names":[],"mappings":"AAoBA,KACE,mBAAA,WAAA,WAAA,WACA,YAAA,WACA,YAAA,KACA,qBAAA,KACA,yBAAA,KACA,mBAAA,UACA,4BAAA,YAGF,ECjBA,QADA,SDqBE,mBAAA,QAAA,WAAA,QAKA,cAAgB,MAAA,aASlB,KACE,OAAA,EACA,YAAA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,KAAA,CAAA,WACA,UAAA,KACA,YAAA,IACA,YAAA,IACA,MAAA,QACA,iBAAA,KExBF,sBFiCE,QAAA,YASF,GACE,mBAAA,YAAA,WAAA,YACA,OAAA,EACA,SAAA,QAYF,GAAA,GAAA,GAAA,GAAA,GAAA,GACE,WAAA,EACA,cAAA,MAOF,EACE,WAAA,EACA,cAAA,KC5CF,0BDsDA,YAEE,gBAAA,UACA,gBAAA,UAAA,OACA,OAAA,KACA,cAAA,EAGF,QACE,cAAA,KACA,WAAA,OACA,YAAA,QClDF,GDqDA,GCtDA,GDyDE,WAAA,EACA,cAAA,KAGF,MCrDA,MACA,MAFA,MD0DE,cAAA,EAGF,GACE,YAAA,IAGF,GACE,cAAA,MACA,YAAA,EAGF,WACE,OAAA,EAAA,EAAA,KAGF,IACE,WAAA,OAGF,ECtDA,ODwDE,YAAA,OAGF,MACE,UAAA,IAQF,IC3DA,ID6DE,SAAA,SACA,UAAA,IACA,YAAA,EACA,eAAA,SAGF,IAAM,OAAA,OACN,IAAM,IAAA,MAON,EACE,MAAA,QACA,gBAAA,KACA,iBAAA,YACA,6BAAA,QGjLE,QHoLA,MAAA,QACA,gBAAA,UAUJ,8BACE,MAAA,QACA,gBAAA,KGvLE,oCAAA,oCH0LA,MAAA,QACA,gBAAA,KANJ,oCAUI,QAAA,EC7DJ,KACA,IDqEA,ICpEA,KDwEE,YAAA,SAAA,CAAA,UACA,UAAA,IAGF,IAEE,WAAA,EAEA,cAAA,KAEA,SAAA,KAQF,OAEE,OAAA,EAAA,EAAA,KAQF,IACE,eAAA,OACA,aAAA,KAGF,eACE,SAAA,OC/EF,cD6FA,EC/FA,KACA,OAEA,MACA,MACA,OACA,QACA,SDiGE,iBAAA,aAAA,aAAA,aAQF,MACE,gBAAA,SAGF,QACE,YAAA,OACA,eAAA,OACA,MAAA,QACA,WAAA,KACA,aAAA,OAGF,GAEE,WAAA,KAQF,MAEE,QAAA,aACA,cAAA,MAOF,aACE,QAAA,IAAA,OACA,QAAA,IAAA,KAAA,yBC3GF,OD8GA,MC5GA,SADA,OAEA,SDgHE,OAAA,EACA,YAAA,QACA,UAAA,QACA,YAAA,QAGF,OC9GA,MDgHE,SAAA,QAGF,OC9GA,ODgHE,eAAA,KC1GF,aACA,cD+GA,OCjHA,mBDqHE,mBAAA,OC9GF,gCACA,+BACA,gCDgHA,yBAIE,QAAA,EACA,aAAA,KC/GF,qBDkHA,kBAEE,mBAAA,WAAA,WAAA,WACA,QAAA,EC9GF,8BD2GA,2BASI,OAAA,YAKJ,iBCnHA,2BACA,kBAFA,iBD6HE,mBAAA,QAGF,SACE,SAAA,KAEA,OAAA,SAGF,SAME,UAAA,EAEA,QAAA,EACA,OAAA,EACA,OAAA,EAKF,OACE,QAAA,MACA,MAAA,KACA,UAAA,KACA,QAAA,EACA,cAAA,MACA,UAAA,OACA,YAAA,QACA,MAAA,QACA,YAAA,OAGF,SACE,eAAA,SErIF,yCDMA,yCDqIE,OAAA,KEtIF,cF8IE,eAAA,KACA,mBAAA,KE1IF,4CDMA,yCD6IE,mBAAA,KAQF,6BACE,KAAA,QACA,mBAAA,OAOF,OACE,QAAA,aAGF,QACE,QAAA,UAGF,SACE,QAAA,KEvJF,SF6JE,QAAA"}
|
||||
@ -3602,8 +3602,9 @@ tbody.collapse.show {
|
||||
background-size: 8px 10px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0.25rem;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.custom-select:focus {
|
||||
|
||||
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css.map
vendored
2
docs/dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
4
docs/dist/js/bootstrap.min.js
vendored
4
docs/dist/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -18,7 +18,7 @@
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
|
||||
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<button class="navbar-toggler navbar-toggler-right d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Dashboard</a>
|
||||
@ -47,7 +47,7 @@
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
|
||||
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-faded sidebar">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
|
||||
|
||||
@ -143,7 +143,7 @@
|
||||
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
|
||||
|
||||
<!-- Add the extra clearfix for only the required viewport -->
|
||||
<div class="clearfix hidden-sm-up"></div>
|
||||
<div class="clearfix d-sm-none"></div>
|
||||
|
||||
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
|
||||
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
<div class="row row-offcanvas row-offcanvas-right">
|
||||
|
||||
<div class="col-12 col-md-9">
|
||||
<p class="float-right hidden-md-up">
|
||||
<p class="float-right d-md-none">
|
||||
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
|
||||
</p>
|
||||
<div class="jumbotron">
|
||||
|
||||
@ -38,7 +38,7 @@ Pull in Bootstrap's **source files** into nearly any project with some of the mo
|
||||
|
||||
### npm
|
||||
|
||||
Install Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.org/package/bootstrap):
|
||||
Install Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.com/package/bootstrap):
|
||||
|
||||
{% highlight bash %}
|
||||
npm install bootstrap@{{ site.current_version }}
|
||||
|
||||
@ -31,7 +31,7 @@ You can find and customize these variables for key global options in our `_varia
|
||||
|
||||
| Variable | Values | Description |
|
||||
| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value for our spacer utilities. |
|
||||
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities](/utilities/spacing/). |
|
||||
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
|
||||
| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. |
|
||||
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
|
||||
|
||||
@ -471,7 +471,7 @@ If more than 12 columns are placed within a single row, each group of extra colu
|
||||
|
||||
### Column resets
|
||||
|
||||
With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our [responsive utility classes]({{ site.baseurl }}/layout/responsive-utilities/).
|
||||
With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a `.clearfix` and our [responsive display utilities]({{ site.baseurl }}/utilities/display/).
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
@ -480,7 +480,7 @@ With the handful of grid tiers available, you're bound to run into issues where,
|
||||
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
|
||||
|
||||
<!-- Add the extra clearfix for only the required viewport -->
|
||||
<div class="clearfix hidden-sm-up"></div>
|
||||
<div class="clearfix d-none d-sm-block"></div>
|
||||
|
||||
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
|
||||
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
|
||||
@ -585,7 +585,7 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
|
||||
|
||||
## Sass mixins
|
||||
|
||||
When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our [predefined grid classes](#predefined-classes) use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
|
||||
When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
|
||||
|
||||
### Variables
|
||||
|
||||
|
||||
@ -1,243 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Responsive utilities
|
||||
description: Use responsive display utility classes for showing and hiding content by device, via media query.
|
||||
group: layout
|
||||
---
|
||||
|
||||
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
|
||||
|
||||
Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Available classes
|
||||
|
||||
* The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider. For example, `.hidden-md-up` hides an element on medium, large, and extra-large viewports.
|
||||
* The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller. For example, `.hidden-md-down` hides an element on extra-small, small, and medium viewports.
|
||||
* There are no explicit "visible"/"show" responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size.
|
||||
* You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless.
|
||||
* These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.
|
||||
|
||||
<table class="table table-bordered table-striped responsive-utilities table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>
|
||||
Extra small devices
|
||||
<small>Portrait phones (<576px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Small devices
|
||||
<small>Landscape phones (≥576px - <768px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Medium devices
|
||||
<small>Tablets (≥768px - <992px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Large devices
|
||||
<small>Desktops (≥992px - <1200px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Extra large devices
|
||||
<small>Desktops (≥1200px)</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xs-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-sm-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-md-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-lg-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xl-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xs-up</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-sm-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-md-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-lg-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xl-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Print classes
|
||||
|
||||
Similar to the regular responsive classes, use these for toggling content for print.
|
||||
|
||||
<table class="table table-bordered table-striped responsive-utilities table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Browser</th>
|
||||
<th>Print</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>.visible-print-block</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible<br>(as <code>display: block</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.visible-print-inline</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible<br>(as <code>display: inline</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.visible-print-inline-block</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible<br>(as <code>display: inline-block</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.hidden-print</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Test cases
|
||||
|
||||
Resize your browser or load on different devices to test the responsive utility classes.
|
||||
|
||||
Green checkmarks indicate the element **is visible** in your current viewport.
|
||||
|
||||
<div class="row responsive-utilities-test visible-on">
|
||||
<div class="col-6 col-sm-3">
|
||||
<span class="hidden-sm-up visible">✔ Visible on extra small</span>
|
||||
<span class="hidden-xs-down not-visible">Extra small</span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<span class="hidden-md-up visible">✔ Visible on small or narrower</span>
|
||||
<span class="hidden-sm-down not-visible">Small or narrower</span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<span class="hidden-lg-up visible">✔ Visible on medium or narrower</span>
|
||||
<span class="hidden-md-down not-visible">Medium or narrower</span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<span class="hidden-xl-up visible">✔ Visible on large or narrower</span>
|
||||
<span class="hidden-lg-down not-visible">Large or narrower</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row responsive-utilities-test visible-on">
|
||||
<div class="col-6 col-sm-3">
|
||||
<span class="hidden-xs-down visible">✔ Visible on small or wider</span>
|
||||
<span class="hidden-sm-up not-visible">Small or wider</span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<span class="hidden-sm-down visible">✔ Visible on medium or wider</span>
|
||||
<span class="hidden-md-up not-visible">Medium or wider</span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<span class="hidden-md-down visible">✔ Visible on large or wider</span>
|
||||
<span class="hidden-lg-up not-visible">Large or wider</span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3">
|
||||
<span class="hidden-lg-down visible">✔ Visible on extra large</span>
|
||||
<span class="hidden-xl-up not-visible">Extra large</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row responsive-utilities-test visible-on">
|
||||
<div class="col-6 col-sm-4">
|
||||
<span class="hidden-sm-up visible">✔ Your viewport is exactly extra small</span>
|
||||
<span class="hidden-xs-down not-visible">Your viewport is NOT exactly extra small</span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
<span class="hidden-xs-down hidden-md-up visible">✔ Your viewport is exactly small</span>
|
||||
<span class="hidden-sm-only not-visible">Your viewport is NOT exactly small</span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
<span class="hidden-sm-down hidden-lg-up visible">✔ Your viewport is exactly medium</span>
|
||||
<span class="hidden-md-only not-visible">Your viewport is NOT exactly medium</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row responsive-utilities-test visible-on">
|
||||
<div class="col-6 col-sm-4">
|
||||
<span class="hidden-md-down hidden-xl-up visible">✔ Your viewport is exactly large</span>
|
||||
<span class="hidden-lg-only not-visible">Your viewport is NOT exactly large</span>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
<span class="hidden-lg-down visible">✔ Your viewport is exactly extra large</span>
|
||||
<span class="hidden-xl-only not-visible">Your viewport is NOT exactly extra large</span>
|
||||
</div>
|
||||
</div>
|
||||
31
docs/layout/utilities-for-layout.md
Normal file
31
docs/layout/utilities-for-layout.md
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Utilities for layout
|
||||
description: Use any of our dozens of responsive utility classes for showing, hiding, aligning, and spacing content.
|
||||
group: layout
|
||||
---
|
||||
|
||||
For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content. Below is a primer on what's included in Bootstrap and how these utilities can help you with layout.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Changing `display`
|
||||
|
||||
Use our `display` utilities for responsively toggling common values of the `display` property. Mix it with our grid system, content, or components to show or hide them across specific viewports.
|
||||
|
||||
## Flexbox options
|
||||
|
||||
Bootstrap 4 is built with flexbox, but not every element's `display` has been changed to `display: flex` as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of [our components](/components/) are built with flexbox enabled.
|
||||
|
||||
Should you need to add `display: flex` to an element, do so with `.d-flex` or one of the responsive variants (e.g., `.d-sm-flex`). You'll need this class or `display` value to allow the use of our extra [flexbox utilities](/utilities/flexbox/) for sizing, alignment, spacing, and more.
|
||||
|
||||
## Margin and padding
|
||||
|
||||
Use the `margin` and `padding` [spacing utilities](/utilities/spacing/) to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities, based on a `1rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.mr-3` for `margin-right: 1rem`), or pick responsive variants to target specific viewports (e.g., `.mr-md-3` for `margin-right: 1rem` starting at the `md` breakpoint).
|
||||
|
||||
## Toggle `visibility`
|
||||
|
||||
When toggling `display` isn't needed, you can toggle the `visibility` of an element with our [visibility utilities](/utilities/visibility/). Invisible elements will still affect the layout of the page, but are visually hidden from visitors.
|
||||
@ -243,17 +243,19 @@ Our documentation received an upgrade across the board as well. Here's the low d
|
||||
|
||||
All `@screen-` variables have been removed in v4.0.0. Use the `media-breakpoint-up()`, `media-breakpoint-down()`, or `media-breakpoint-only()` Sass mixins or the `$grid-breakpoints` Sass map instead.
|
||||
|
||||
The responsive utility classes have also been overhauled.
|
||||
Our responsive utility classes have largely been removed in favor of explicit `display` utilities.
|
||||
|
||||
- The `.hidden` and `.show` classes have been removed because they conflicted with jQuery's `$(...).hide()` and `$(...).show()` methods. Instead, try toggling the `[hidden]` attribute, use inline styles like `style="display: none;"` and `style="display: block;"`, or toggle the `.invisible` class.
|
||||
- The old classes (`.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` `.visible-xs-block` `.visible-xs-inline` `.visible-xs-inline-block` `.visible-sm-block` `.visible-sm-inline` `.visible-sm-inline-block` `.visible-md-block` `.visible-md-inline` `.visible-md-inline-block` `.visible-lg-block` `.visible-lg-inline` `.visible-lg-inline-block`) are gone.
|
||||
- They have been replaced by `.hidden-xs-up` `.hidden-xs-down` `.hidden-sm-up` `.hidden-sm-down` `.hidden-md-up` `.hidden-md-down` `.hidden-lg-up` `.hidden-lg-down`.
|
||||
- The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or larger (e.g. `.hidden-md-up` hides an element on medium, large, and extra-large devices).
|
||||
- The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller (e.g. `.hidden-md-down` hides an element on extra-small, small, and medium devices).
|
||||
- The `.hidden` and `.show` classes have been removed because they conflicted with jQuery's `$(...).hide()` and `$(...).show()` methods. Instead, try toggling the `[hidden]` attribute or use inline styles like `style="display: none;"` and `style="display: block;"`.
|
||||
- All `.hidden-` classes have been removed, save for the print utilities which have been renamed.
|
||||
- Removed from v3: `.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` `.visible-xs-block` `.visible-xs-inline` `.visible-xs-inline-block` `.visible-sm-block` `.visible-sm-inline` `.visible-sm-inline-block` `.visible-md-block` `.visible-md-inline` `.visible-md-inline-block` `.visible-lg-block` `.visible-lg-inline` `.visible-lg-inline-block`
|
||||
- Removed from v4 alphas: `.hidden-xs-up` `.hidden-xs-down` `.hidden-sm-up` `.hidden-sm-down` `.hidden-md-up` `.hidden-md-down` `.hidden-lg-up` `.hidden-lg-down`
|
||||
- Print utilities no longer start with `.hidden-` or `.visible-`, but with `.d-print-`.
|
||||
- Old names: `.visible-print-block`, `.visible-print-inline`, `.visible-print-inline-block`, `.hidden-print`
|
||||
- New classes: `.d-print-block`, `.d-print-inline`, `.d-print-inline-block`, `.d-print-none`
|
||||
|
||||
Rather than using explicit `.visible-*` classes, you make an element visible by simply not hiding it at that screen size. You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes (e.g. `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large devices).
|
||||
Rather than using explicit `.visible-*` classes, you make an element visible by simply not hiding it at that screen size. You can combine one `.d-*-none` class with one `.d-*-block` class to show an element only on a given interval of screen sizes (e.g. `.d-none.d-md-block.d-lg-none` shows the element only on medium and large devices).
|
||||
|
||||
Note that the changes to the grid breakpoints in v4 means that you'll need to go one breakpoint larger to achieve the same results (e.g. `.hidden-md` is more similar to `.hidden-lg-down` than to `.hidden-md-down`). The new responsive utility classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.
|
||||
Note that the changes to the grid breakpoints in v4 means that you'll need to go one breakpoint larger to achieve the same results. The new responsive utility classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.
|
||||
|
||||
## Misc notes to prioritize
|
||||
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Display property
|
||||
group: utilities
|
||||
---
|
||||
|
||||
Use `.d-block`, `.d-inline`, or `.d-inline-block` to simply set an element's [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) to `block`, `inline`, or `inline-block` (respectively).
|
||||
|
||||
To make an element `display: none`, use our [responsive utilities]({{ site.baseurl }}/layout/responsive-utilities/) instead.
|
||||
|
||||
{% example html %}
|
||||
<div class="d-inline bg-success">Inline</div>
|
||||
<div class="d-inline bg-success">Inline</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<span class="d-block bg-primary">Block</span>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="d-inline-block bg-warning">
|
||||
<h3>inline-block</h3>
|
||||
Boot that strap!
|
||||
</div>
|
||||
<div class="d-inline-block bg-warning">
|
||||
<h3>inline-block</h3>
|
||||
Strap that boot!
|
||||
</div>
|
||||
{% endexample %}
|
||||
64
docs/utilities/display.md
Normal file
64
docs/utilities/display.md
Normal file
@ -0,0 +1,64 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Display property
|
||||
group: utilities
|
||||
---
|
||||
|
||||
Quickly and responsively toggle the `display` value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling `display` when printing.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Common `display` values
|
||||
|
||||
The [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) accepts a handful of values and we support many of them with utility classes. We purposefully don't provide every value as a utility, so here's what we support:
|
||||
|
||||
- `.d-none`
|
||||
- `.d-inline`
|
||||
- `.d-inline-block`
|
||||
- `.d-block`
|
||||
- `.d-table`
|
||||
- `.d-table-cell`
|
||||
- `.d-flex`
|
||||
- `.d-inline-flex`
|
||||
|
||||
Put them to use by applying any of the classes to an element of your choice. For example, here's how you could use the inline, block, or inline-block utilities (the same applies to the other classes).
|
||||
|
||||
{% example html %}
|
||||
<div class="d-inline bg-success">d-inline</div>
|
||||
<div class="d-inline bg-success">d-inline</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<span class="d-block bg-primary">d-block</span>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="d-inline-block bg-warning">d-inline-block</div>
|
||||
<div class="d-inline-block bg-warning">d-inline-block</div>
|
||||
{% endexample %}
|
||||
|
||||
Responsive variations also exist for every single utility mentioned above.
|
||||
|
||||
{% for bp in site.data.breakpoints %}
|
||||
- `.d{{ bp.abbr }}-none`
|
||||
- `.d{{ bp.abbr }}-inline`
|
||||
- `.d{{ bp.abbr }}-inline-block`
|
||||
- `.d{{ bp.abbr }}-block`
|
||||
- `.d{{ bp.abbr }}-table`
|
||||
- `.d{{ bp.abbr }}-table-cell`
|
||||
- `.d{{ bp.abbr }}-flex`
|
||||
- `.d{{ bp.abbr }}-inline-flex`{% endfor %}
|
||||
|
||||
## Display in print
|
||||
|
||||
Change the `display` value of elements when printing with our print display utilities.
|
||||
|
||||
| Class | Print style |
|
||||
| --- | --- |
|
||||
| `.d-print-block` | Applies `display: block` to the element when printing |
|
||||
| `.d-print-inline` | Applies `display: inline` to the element when printing |
|
||||
| `.d-print-inline-block` | Applies `display: inline-block` to the element when printing |
|
||||
| `.d-print-none` | Applies `display: none` to the element when printing |
|
||||
@ -1,23 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Invisible content
|
||||
group: utilities
|
||||
---
|
||||
|
||||
The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
|
||||
|
||||
{% highlight html %}
|
||||
<div class="invisible">...</div>
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight scss %}
|
||||
// Class
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Usage as a mixin
|
||||
.element {
|
||||
@include invisible;
|
||||
}
|
||||
{% endhighlight %}
|
||||
@ -14,7 +14,7 @@ Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` e
|
||||
|
||||
{% example html %}
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
|
||||
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
@ -35,11 +35,11 @@ Where *sides* is one of:
|
||||
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 * .25` or `$spacer-y * .25`
|
||||
* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * .5` or `$spacer-y * .5`
|
||||
* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y`
|
||||
* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
|
||||
* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3`
|
||||
* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer * .25`
|
||||
* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer * .5`
|
||||
* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer`
|
||||
* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5`
|
||||
* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3`
|
||||
|
||||
(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
|
||||
|
||||
@ -53,16 +53,16 @@ Here are some representative examples of these classes:
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: ($spacer-x * .25) !important;
|
||||
margin-left: ($spacer * .25) !important;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: ($spacer-x * .5) !important;
|
||||
padding-right: ($spacer-x * .5) !important;
|
||||
padding-left: ($spacer * .5) !important;
|
||||
padding-right: ($spacer * .5) !important;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: $spacer-y $spacer-x !important;
|
||||
padding: $spacer !important;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
32
docs/utilities/visibility.md
Normal file
32
docs/utilities/visibility.md
Normal file
@ -0,0 +1,32 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Visibility
|
||||
group: utilities
|
||||
---
|
||||
|
||||
Set the `visibility` of elements with our visibility utilities. These do not modify the `display` value at all and are helpful for hiding content from most users, but still keeping them for screen readers.
|
||||
|
||||
Apply `.visible` or `.invisible` as needed.
|
||||
|
||||
{% highlight html %}
|
||||
<div class="visible">...</div>
|
||||
<div class="invisible">...</div>
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight scss %}
|
||||
// Class
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Usage as a mixin
|
||||
.element {
|
||||
@include invisible(visible);
|
||||
}
|
||||
.element {
|
||||
@include invisible(hidden);
|
||||
}
|
||||
{% endhighlight %}
|
||||
@ -1,6 +1,6 @@
|
||||
.breadcrumb {
|
||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||
margin-bottom: $spacer-y;
|
||||
margin-bottom: 1rem;
|
||||
list-style: none;
|
||||
background-color: $breadcrumb-bg;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
@ -135,7 +135,7 @@
|
||||
.custom-select {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
$select-border-width: ($border-width * 2);
|
||||
$select-border-width: ($custom-select-border-width * 2);
|
||||
height: calc(#{$input-height} + #{$select-border-width});
|
||||
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
|
||||
line-height: $custom-select-line-height;
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
}
|
||||
|
||||
.figure-img {
|
||||
margin-bottom: ($spacer-y / 2);
|
||||
margin-bottom: ($spacer / 2);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
@ -2,22 +2,6 @@
|
||||
//
|
||||
// Used in conjunction with global variables to enable certain theme features.
|
||||
|
||||
@mixin box-shadow($shadow...) {
|
||||
@if $enable-shadows {
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition($transition...) {
|
||||
@if $enable-transitions {
|
||||
@if length($transition) == 0 {
|
||||
transition: $transition-base;
|
||||
} @else {
|
||||
transition: $transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Utilities
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/hover";
|
||||
@ -47,7 +31,9 @@
|
||||
// // Skins
|
||||
@import "mixins/background-variant";
|
||||
@import "mixins/border-radius";
|
||||
@import "mixins/box-shadow";
|
||||
@import "mixins/gradients";
|
||||
@import "mixins/transition";
|
||||
|
||||
// // Layout
|
||||
@import "mixins/clearfix";
|
||||
|
||||
@ -55,9 +55,9 @@
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
color: $nav-tabs-active-link-hover-color;
|
||||
background-color: $nav-tabs-active-link-hover-bg;
|
||||
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-bg;
|
||||
color: $nav-tabs-active-link-color;
|
||||
background-color: $nav-tabs-active-link-bg;
|
||||
border-color: $nav-tabs-active-link-border-color $nav-tabs-active-link-border-color $nav-tabs-active-link-bg;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
|
||||
@ -51,8 +51,8 @@ h6, .h6 { font-size: $font-size-h6; }
|
||||
//
|
||||
|
||||
hr {
|
||||
margin-top: $spacer-y;
|
||||
margin-bottom: $spacer-y;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 0;
|
||||
border-top: $hr-border-width solid $hr-border-color;
|
||||
}
|
||||
|
||||
@ -138,36 +138,15 @@ $enable-print-styles: true !default;
|
||||
// variables. Mostly focused on spacing.
|
||||
// You can add more entries to the $spacers map, should you need more variation.
|
||||
|
||||
$spacer: 1rem !default;
|
||||
$spacer-x: $spacer !default;
|
||||
$spacer-y: $spacer !default;
|
||||
$spacer: 1rem !default;
|
||||
$spacers: (
|
||||
0: (
|
||||
x: 0,
|
||||
y: 0
|
||||
),
|
||||
1: (
|
||||
x: ($spacer-x * .25),
|
||||
y: ($spacer-y * .25)
|
||||
),
|
||||
2: (
|
||||
x: ($spacer-x * .5),
|
||||
y: ($spacer-y * .5)
|
||||
),
|
||||
3: (
|
||||
x: $spacer-x,
|
||||
y: $spacer-y
|
||||
),
|
||||
4: (
|
||||
x: ($spacer-x * 1.5),
|
||||
y: ($spacer-y * 1.5)
|
||||
),
|
||||
5: (
|
||||
x: ($spacer-x * 3),
|
||||
y: ($spacer-y * 3)
|
||||
)
|
||||
0: 0,
|
||||
1: ($spacer * .25),
|
||||
2: ($spacer * .5),
|
||||
3: $spacer,
|
||||
4: ($spacer * 1.5),
|
||||
5: ($spacer * 3)
|
||||
) !default;
|
||||
$border-width: 1px !default;
|
||||
|
||||
// This variable affects the `.h-*` and `.w-*` classes.
|
||||
$sizes: (
|
||||
@ -237,6 +216,30 @@ $grid-gutter-widths: (
|
||||
xl: $grid-gutter-width-base
|
||||
) !default;
|
||||
|
||||
|
||||
// Components
|
||||
//
|
||||
// Define common padding and border radius sizes and more.
|
||||
|
||||
$line-height-lg: (4 / 3) !default;
|
||||
$line-height-sm: 1.5 !default;
|
||||
|
||||
$border-width: 1px !default;
|
||||
|
||||
$border-radius: .25rem !default;
|
||||
$border-radius-lg: .3rem !default;
|
||||
$border-radius-sm: .2rem !default;
|
||||
|
||||
$component-active-color: $white !default;
|
||||
$component-active-bg: $brand-primary !default;
|
||||
|
||||
$caret-width: .3em !default;
|
||||
|
||||
$transition-base: all .2s ease-in-out !default;
|
||||
$transition-fade: opacity .15s linear !default;
|
||||
$transition-collapse: height .35s ease !default;
|
||||
|
||||
|
||||
// Fonts
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
@ -305,27 +308,6 @@ $nested-kbd-font-weight: $font-weight-bold !default;
|
||||
$list-inline-padding: 5px !default;
|
||||
|
||||
|
||||
// Components
|
||||
//
|
||||
// Define common padding and border radius sizes and more.
|
||||
|
||||
$line-height-lg: (4 / 3) !default;
|
||||
$line-height-sm: 1.5 !default;
|
||||
|
||||
$border-radius: .25rem !default;
|
||||
$border-radius-lg: .3rem !default;
|
||||
$border-radius-sm: .2rem !default;
|
||||
|
||||
$component-active-color: $white !default;
|
||||
$component-active-bg: $brand-primary !default;
|
||||
|
||||
$caret-width: .3em !default;
|
||||
|
||||
$transition-base: all .2s ease-in-out !default;
|
||||
$transition-fade: opacity .15s linear !default;
|
||||
$transition-collapse: height .35s ease !default;
|
||||
|
||||
|
||||
// Tables
|
||||
//
|
||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||
@ -450,7 +432,7 @@ $form-check-input-margin-x: .25rem !default;
|
||||
|
||||
$form-check-inline-margin-x: .75rem !default;
|
||||
|
||||
$form-group-margin-bottom: $spacer-y !default;
|
||||
$form-group-margin-bottom: 1rem !default;
|
||||
|
||||
$input-group-addon-bg: $gray-lighter !default;
|
||||
$input-group-addon-border-color: $input-border-color !default;
|
||||
@ -581,8 +563,8 @@ $dropdown-header-color: $gray-light !default;
|
||||
|
||||
$zindex-dropdown-backdrop: 990 !default;
|
||||
$zindex-dropdown: 1000 !default;
|
||||
$zindex-sticky: 1020 !default;
|
||||
$zindex-fixed: 1030 !default;
|
||||
$zindex-sticky: 1030 !default;
|
||||
$zindex-modal-backdrop: 1040 !default;
|
||||
$zindex-modal: 1050 !default;
|
||||
$zindex-popover: 1060 !default;
|
||||
@ -621,9 +603,9 @@ $nav-tabs-border-color: #ddd !default;
|
||||
$nav-tabs-border-width: $border-width !default;
|
||||
$nav-tabs-border-radius: $border-radius !default;
|
||||
$nav-tabs-link-hover-border-color: $gray-lighter !default;
|
||||
$nav-tabs-active-link-hover-color: $gray !default;
|
||||
$nav-tabs-active-link-hover-bg: $body-bg !default;
|
||||
$nav-tabs-active-link-hover-border-color: #ddd !default;
|
||||
$nav-tabs-active-link-color: $gray !default;
|
||||
$nav-tabs-active-link-bg: $body-bg !default;
|
||||
$nav-tabs-active-link-border-color: #ddd !default;
|
||||
|
||||
$nav-pills-border-radius: $border-radius !default;
|
||||
$nav-pills-active-link-color: $component-active-color !default;
|
||||
@ -804,7 +786,7 @@ $modal-transition: transform .3s ease-out !default;
|
||||
|
||||
$alert-padding-x: 1.25rem !default;
|
||||
$alert-padding-y: .75rem !default;
|
||||
$alert-margin-bottom: $spacer-y !default;
|
||||
$alert-margin-bottom: 1rem !default;
|
||||
$alert-border-radius: $border-radius !default;
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
$alert-border-width: $border-width !default;
|
||||
|
||||
5
scss/mixins/_box-shadow.scss
Normal file
5
scss/mixins/_box-shadow.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@mixin box-shadow($shadow...) {
|
||||
@if $enable-shadows {
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
@mixin nav-divider($color: #e5e5e5) {
|
||||
height: 1px;
|
||||
margin: ($spacer-y / 2) 0;
|
||||
margin: ($spacer / 2) 0;
|
||||
overflow: hidden;
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
9
scss/mixins/_transition.scss
Normal file
9
scss/mixins/_transition.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@mixin transition($transition...) {
|
||||
@if $enable-transitions {
|
||||
@if length($transition) == 0 {
|
||||
transition: $transition-base;
|
||||
} @else {
|
||||
transition: $transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
// Visibility
|
||||
|
||||
@mixin invisible {
|
||||
visibility: hidden !important;
|
||||
@mixin invisible($visibility) {
|
||||
visibility: $visibility !important;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
//
|
||||
// Display utilities
|
||||
// Utilities for common `display` values
|
||||
//
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@ -16,3 +16,38 @@
|
||||
.d#{$infix}-inline-flex { display: inline-flex !important; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Utilities for toggling `display` in print
|
||||
//
|
||||
|
||||
.d-print-block {
|
||||
display: none !important;
|
||||
|
||||
@media print {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.d-print-inline {
|
||||
display: none !important;
|
||||
|
||||
@media print {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
|
||||
.d-print-inline-block {
|
||||
display: none !important;
|
||||
|
||||
@media print {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.d-print-none {
|
||||
@media print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,22 +5,20 @@
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
@each $size, $lengths in $spacers {
|
||||
$length-x: map-get($lengths, x);
|
||||
$length-y: map-get($lengths, y);
|
||||
@each $size, $length in $spacers {
|
||||
|
||||
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length-y $length-x !important; }
|
||||
.#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length-y !important; }
|
||||
.#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length-x !important; }
|
||||
.#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; }
|
||||
.#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length-x !important; }
|
||||
.#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
|
||||
.#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length !important; }
|
||||
.#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length !important; }
|
||||
.#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length !important; }
|
||||
.#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length !important; }
|
||||
.#{$abbrev}x#{$infix}-#{$size} {
|
||||
#{$prop}-right: $length-x !important;
|
||||
#{$prop}-left: $length-x !important;
|
||||
#{$prop}-right: $length !important;
|
||||
#{$prop}-left: $length !important;
|
||||
}
|
||||
.#{$abbrev}y#{$infix}-#{$size} {
|
||||
#{$prop}-top: $length-y !important;
|
||||
#{$prop}-bottom: $length-y !important;
|
||||
#{$prop}-top: $length !important;
|
||||
#{$prop}-bottom: $length !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,54 +2,10 @@
|
||||
// Visibility utilities
|
||||
//
|
||||
|
||||
.visible {
|
||||
@include invisible(visible);
|
||||
}
|
||||
|
||||
.invisible {
|
||||
@include invisible();
|
||||
}
|
||||
|
||||
// Responsive visibility utilities
|
||||
|
||||
@each $bp in map-keys($grid-breakpoints) {
|
||||
.hidden-#{$bp}-up {
|
||||
@include media-breakpoint-up($bp) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.hidden-#{$bp}-down {
|
||||
@include media-breakpoint-down($bp) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Print utilities
|
||||
//
|
||||
// Media queries are placed on the inside to be mixin-friendly.
|
||||
|
||||
.visible-print-block {
|
||||
display: none !important;
|
||||
|
||||
@media print {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
.visible-print-inline {
|
||||
display: none !important;
|
||||
|
||||
@media print {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
.visible-print-inline-block {
|
||||
display: none !important;
|
||||
|
||||
@media print {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-print {
|
||||
@media print {
|
||||
display: none !important;
|
||||
}
|
||||
@include invisible(hidden);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user