Skip to content

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

massive rewrite of forms docs and some css

parent 7f3c85ec
Show whitespace changes
Inline Side-by-side
Showing with 258 additions and 164 deletions
dist/css/bootstrap.css
View file @ bf5931b5
......@@ -1657,7 +1657,6 @@ label {
.form-control {
display: block;
width: 100%;
height: 2.625rem;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.5;
......@@ -1670,6 +1669,9 @@ label {
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:not(textarea), .form-control:not(select[size]), .form-control:not(select[multiple]) {
height: 2.625rem;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
......@@ -1698,10 +1700,8 @@ label {
cursor: false;
}
textarea.form-control {
height: auto;
padding-top: .75rem;
padding-bottom: .75rem;
.form-control-file {
display: block;
}
input[type="search"] {
......@@ -1715,12 +1715,11 @@ input[type="search"] {
.radio, .checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
margin-bottom: .75rem;
}
.radio label, .checkbox label {
min-height: 1;
padding-left: 20px;
padding-left: 1.25rem;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
......@@ -1728,18 +1727,18 @@ input[type="search"] {
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
margin-top: .25rem;
margin-left: -1.25rem;
}
.radio + .radio, .checkbox + .checkbox {
margin-top: -5px;
margin-top: -.25rem;
}
.radio-inline, .checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
padding-left: 1.25rem;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
......@@ -1748,7 +1747,7 @@ input[type="search"] {
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
margin-left: .75rem;
}
input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] input[type="radio"], input[type="checkbox"]:disabled, input[type="checkbox"].disabled, fieldset[disabled] input[type="checkbox"] {
......@@ -1947,8 +1946,8 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
margin-top: .25rem;
margin-bottom: .75rem;
color: #747a7f;
}
......
dist/css/bootstrap.css.map
View file @ bf5931b5
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ bf5931b5
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/_data/nav.yml
View file @ bf5931b5
......@@ -76,7 +76,6 @@
- title: User input
- title: Sample output
- title: Tables
- title: Forms
- title: Jumbotron
- title: Page header
- title: Buttons
......@@ -91,13 +90,14 @@
- title: Single toggle
- title: Checkbox and radio
- title: Methods
- title: Button group
- title: Button dropdown
- title: Forms
- title: Custom forms
sections:
- title: Checkboxes and radios
- title: Select menu
- title: File browser
- title: Button group
- title: Button dropdown
- title: Input group
sections:
- title: Basic example
......
docs/assets/css/docs.min.css
View file @ bf5931b5
......@@ -3,4 +3,4 @@
* Copyright 2011-2014 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License. For
* details, see http://creativecommons.org/licenses/by/3.0/.
*/.bd-example:after,.bd-header:after{clear:both}.ge,.sd{font-style:italic}.bd-container{position:relative;max-width:62rem;padding:0 1rem 1rem;margin-right:auto;margin-left:auto}@media (min-width:768px){.bd-container{padding:2rem}}@media (min-width:992px){.bd-container{padding:4rem}}.bd-container>table{display:block;width:100%;max-width:100%;overflow-y:auto;margin-bottom:1rem}.bd-container>table>tbody>tr>td,.bd-container>table>tbody>tr>th,.bd-container>table>tfoot>tr>td,.bd-container>table>tfoot>tr>th,.bd-container>table>thead>tr>td,.bd-container>table>thead>tr>th{padding:.75rem;line-height:1.5;vertical-align:top;border:1px solid #eceeef}.bd-container>table td:first-child>code{white-space:nowrap}.bd-content>h2{margin-top:3rem;font-weight:400}.bd-content>h3{margin-top:1.5rem}.bd-content>ol li,.bd-content>ul li{margin-bottom:.25rem}@media (min-width:34em){.bd-title{font-size:4rem}.bd-title+p{font-size:1.5rem;font-weight:300}}.bd-sidebar{padding:0;margin-bottom:0;background-color:#fafafa}.bd-sidebar .navbar-toggler{position:absolute;top:1.25rem;right:0;z-index:5}.bd-sidebar .navbar-header{float:none;margin-right:-15px}.bd-sidebar .navbar-collapse{padding:0;border:0}@media (min-width:992px){.bd-docs{margin-left:240px}.bd-sidebar{position:fixed;top:0;bottom:0;left:0;width:240px;overflow-y:auto;border-right:1px solid #eee}}.bd-example,.bd-masthead,.bd-search{position:relative}.bd-sidebar .navbar-brand{display:block;float:none;height:auto;padding:1.75rem 1.25rem;font-size:20px;font-weight:500;line-height:1}.bd-sidebar-brand:focus,.bd-sidebar-brand:hover{text-decoration:none}.bd-search{margin-right:1.25rem;margin-bottom:1.5rem;margin-left:1.25rem}.bd-search .form-control{height:2.45rem;padding-top:.4rem;padding-bottom:.4rem}.bd-search-results{top:108%;right:0;display:block;padding:0;overflow:hidden;font-size:.9rem;border:0}.bd-search-results>li>a{padding-left:.75rem;padding-right:.75rem}.bd-search-results>li:first-child{margin-top:.25rem}.bd-search-results>li:last-child{margin-bottom:.25rem}.bd-search-results>.no-results{padding:.75rem 1rem;color:#7a7a7a;text-align:center}.bd-sidenav{display:none}.active>.bd-sidenav,.bd-toc-link{display:block}.bd-toc-link{padding:.25rem 1.25rem;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 1.25rem;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-sidebar .nav .nav{display:none;padding-bottom:.75rem}.bd-booticon,.bd-sidebar .nav>.active>.nav{display:block}.bd-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;font-weight:400;padding-top:.125rem;padding-bottom:.125rem;padding-left:2rem;font-size:80%}.bd-sidebar .nav .nav>.active:focus>a,.bd-sidebar .nav .nav>.active:hover>a,.bd-sidebar .nav .nav>.active>a{font-weight:500}.bd-booticon{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-brand-logos,.bd-callout,.bd-callout code,.bd-team img,.color-swatch{border-radius:.25rem}.carbonad,.carbonad-tag,.carbonad-text{width:auto!important;height:auto!important}.bd-booticon.inverse{color:#563d7c;background-color:#fff}.bd-booticon.outline{background-color:transparent;border:1px solid #cdbfe3}.bd-nav-home{margin-bottom:0;background-color:#563d7c;border-bottom:0}.bd-nav-home .navbar-brand>a{font-weight:500;color:#fff}.bd-nav-home .nav-link{font-weight:500;color:#cdbfe3}.bd-nav-home .nav-link:focus,.bd-nav-home .nav-link:hover{color:#fff;background-color:rgba(0,0,0,.5)}.bd-header{padding-bottom:.5rem;margin-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.25)}.bd-header:after,.bd-header:before{content:" ";display:table}.bd-header .bd-header-mark{float:left;padding-top:.6em;padding-bottom:.6em;font-size:1.25rem;font-weight:500}.bd-header-nav{float:right}.bd-header-nav .nav-link{float:left}.bd-header-nav .nav-link:hover{background-color:transparent}.bd-masthead{padding:2rem 0}.bd-masthead .bd-booticon{margin:0 0 2rem;color:#55595c;border-color:#55595c}.bd-masthead h1{font-weight:300;line-height:1}.bd-masthead .lead{margin-bottom:2rem;font-size:1.25rem}.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:#55595c;border-color:#55595c}.bd-masthead .btn:hover{color:#fff;background-color:#55595c}@media (min-width:480px){.bd-masthead .btn{width:auto}}@media (min-width:768px){.bd-masthead{padding:2rem 0 4rem}.bd-header{margin-bottom:4rem}.bd-masthead h1{font-size:4rem}.bd-masthead .lead{font-size:1.5rem}}@media (min-width:992px){.bd-masthead .lead{width:80%;font-size:2rem}}.bd-featurette{padding-top:3rem;padding-bottom:3rem;font-size:1rem;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bd-featurette+.bd-footer{margin-top:0;border-top:0}.bd-featurette-title{margin-bottom:.5rem;font-size:2rem;font-weight:400;color:#333}.half-rule{width:6rem;margin:2.5rem auto}.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 .lead{max-width:80%;margin-right:auto;margin-left:auto}.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}.carbonad{padding:1.25rem!important;margin:0 -1rem 2rem!important;overflow:hidden;font-size:.8rem!important;line-height:1rem!important;color:#55595c!important;text-align:left;background:#f5f5f5!important;border:0!important}.carbonad-img{margin:0!important}.carbonad-tag,.carbonad-text{display:block!important;float:none!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.anchorjs-link,.bd-brand-item,.bd-example-tooltips,.responsive-utilities td{text-align:center}.carbonad-tag a,.carbonad-text a{color:#55595c!important}.carbonad-tag a:hover,.carbonad-text a:hover{color:#0275d8!important}.carbonad #azcarbon>img{display:none}@media (min-width:34em){.carbonad{width:330px!important;margin:1.5rem auto!important;border-width:1px!important;border-radius:.25rem}.bd-masthead .carbonad{margin:3rem auto 0!important}}@media (min-width:48em){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:62em){.carbonad{float:right;width:330px!important;padding:1rem!important;margin:.5rem 0 1rem 2rem!important}.bd-masthead .carbonad{float:none;margin:0!important}}.bd-footer{padding-top:2rem;margin-top:6rem;font-size:85%;color:#777;border-top:1px solid #e5e5e5}.bd-footer-links{padding-left:0;margin-top:20px;color:#999}.bd-footer-links li{display:inline;padding:0 2px}.bd-footer-links li:first-child{padding-left:0}@media (min-width:768px){.bd-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}.bd-footer p{margin-bottom:0}}.bd-social{margin-bottom:1.5rem;margin-left:-.5rem}.bd-social-buttons{display:inline-block;padding-left:0;margin-bottom:0;list-style:none}.bd-social-buttons li{display:inline-block;padding:.25rem .5rem;line-height:1}.bd-social-buttons .twitter-follow-button{width:225px!important}.bd-social-buttons .twitter-share-button{width:98px!important}.github-btn{overflow:hidden;border:0}.bd-example>.row{margin-bottom:1rem}.bd-example>.row>[class^=col-]{padding-top:.75rem;padding-bottom:.75rem;background-color:rgba(86,61,124,.15);border:1px solid rgba(86,61,124,.2)}.bd-example{padding:1rem;margin:1rem -1rem;border:solid #f7f7f9;border-width:.2rem 0 0}.bd-example:after,.bd-example:before{content:" ";display:table}@media (min-width:34em){.bd-example{margin-left:0;margin-right:0;margin-bottom:-1rem;padding:1.5rem;border-width:.2rem}}.bd-example+p{margin-top:2rem}.bd-example .container{width:auto}.bd-example>.card{float:left;max-width:15rem;margin:.25rem}.bd-example>.alert+.alert,.bd-example>.nav+.nav,.bd-example>.progress+.progress{margin-top:1rem}.bd-example>.dropdown-menu:first-child{position:static;display:block}.bd-example>.table-responsive:last-child>.table,.bd-example>:last-child{margin-bottom:0!important}.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:last-child{margin-bottom:0}.bd-navbar-bottom-example,.bd-navbar-top-example{z-index:1;padding:0;overflow:hidden}.bd-navbar-bottom-example .navbar-header,.bd-navbar-top-example .navbar-header{margin-left:0}.bd-navbar-bottom-example .navbar-fixed-bottom,.bd-navbar-top-example .navbar-fixed-top{position:relative;margin-right:0;margin-left:0}.bd-navbar-top-example{padding-bottom:45px}.bd-navbar-top-example .navbar-fixed-top{top:-1px}.bd-navbar-bottom-example{padding-top:45px}.bd-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bd-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bd-navbar-bottom-example .navbar-fixed-bottom,.bd-navbar-top-example .navbar-fixed-top{position:absolute}}.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,.bd-example>.bg-info,.bd-example>.bg-primary,.bd-example>.bg-success,.bd-example>.bg-warning{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;-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-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:active,.btn-outline:focus,.btn-outline:hover{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:active,.btn-outline-inverse:focus,.btn-outline-inverse:hover{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bd-callout{padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #eee;border-left-width:.25rem}.bd-callout h4{margin-top:0;margin-bottom:.25rem}.bd-callout p:last-child{margin-bottom:0}.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 .team-member{line-height:2rem;color:#555}.bd-team .team-member:hover{color:#333;text-decoration:none}.bd-team .github-btn{float:right;width:180px;height:1.25rem;margin-top:.25rem}.bd-team img{float:left;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}.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{float:left;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:0;right:0;z-index:10;display:block;padding:.25rem .5rem;font-size:75%;color:#818a91;cursor:pointer;background-color:#eceeef;border-radius:0 .2rem}.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}@font-face{font-family:anchorjs-icons;src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6v8yoAAAC8AAAAYGNtYXDL8RqdAAABHAAAADxnYXNwAAAAEAAAAVgAAAAIZ2x5Zkm2oNUAAAFgAAABWGhlYWQAHd4cAAACuAAAADZoaGVhB3sECwAAAvAAAAAkaG10eAYAAEcAAAMUAAAADGxvY2EACgCsAAADIAAAAAhtYXhwAAYAcAAAAygAAAAgbmFtZUQXtNYAAANIAAABOXBvc3QAAwAAAAAEhAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAACDmAAPA/8D/wAPAAEAAAAAAAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACACDmAP//AAAAIOYA////4RoCAAEAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAIARwAHA7kDeQA2AG0AAAEnLgEiBg8BDgEUFh8BHgMXNy4DLwEuATQ2PwE+ATIWHwEeARQGDwEeAxU3PgE0JicBLgMnBx4DHwEeARQGDwEOASImLwEuATQ2PwEuAzUHDgEUFh8BHgEyNj8BPgE0Ji8BA7kEI1ldWiPaIyQkIwQDBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMk/r4DBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMkBCNZXVoj2iMkJCMEA3UEJCMjJNojWV1aIwQDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkj/sYDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkjBCQjIyTaI1ldWiMEAAEAAAABAABR/4xQXw889QALBAAAAAAAzqNM0wAAAADOo0zTAAAAAAO5A3kAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAABHA7kAAQAAAAAAAAAAAAAAAAAAAAMAAAAAAgAAAAQAAEcAAAAAAAoArAABAAAAAwBuAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADAALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATwAAsAAAAABKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDq/zKmNtYXAAAAFoAAAAPAAAADzL8RqdZ2FzcAAAAaQAAAAIAAAACAAAABBnbHlmAAABrAAAAVgAAAFYSbag1WhlYWQAAAMEAAAANgAAADYAHd4caGhlYQAAAzwAAAAkAAAAJAd7BAtobXR4AAADYAAAAAwAAAAMBgAAR2xvY2EAAANsAAAACAAAAAgACgCsbWF4cAAAA3QAAAAgAAAAIAAGAHBuYW1lAAADlAAAATkAAAE5RBe01nBvc3QAAATQAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAg5gADwP/A/8ADwABAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAoAAAABgAEAAEAAgAg5gD//wAAACDmAP///+EaAgABAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAACAEcABwO5A3kANgBtAAABJy4BIgYPAQ4BFBYfAR4DFzcuAy8BLgE0Nj8BPgEyFh8BHgEUBg8BHgMVNz4BNCYnAS4DJwceAx8BHgEUBg8BDgEiJi8BLgE0Nj8BLgM1Bw4BFBYfAR4BMjY/AT4BNCYvAQO5BCNZXVoj2iMkJCMEAwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJP6+AwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJAQjWV1aI9ojJCQjBAN1BCQjIyTaI1ldWiMEAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZI/7GAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZIwQkIyMk2iNZXVojBAABAAAAAQAAUf+MUF8PPPUACwQAAAAAAM6jTNMAAAAAzqNM0wAAAAADuQN5AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAARwO5AAEAAAAAAAAAAAAAAAAAAAADAAAAAAIAAAAEAABHAAAAAAAKAKwAAQAAAAMAbgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAwAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');font-style:normal;font-weight:400}.anchorjs-icon{font-family:anchorjs-icons;font-style:normal;font-variant:normal;font-weight:400;line-height:1;speak:none;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.anchorjs-link{opacity:0;text-decoration:none}.anchorjs-link:focus,:hover>.anchorjs-link{opacity:1;-webkit-transition:color .16s linear;-o-transition:color .16s linear;transition:color .16s linear}.anchorjs-description{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.anchorjs-link{float:left;width:1.2em;height:1em;padding-right:.2em;margin-top:.25em;margin-left:-1.2em;font-size:70%;color:inherit}:hover>.anchorjs-link:hover{color:#0275d8;text-decoration:none}.anchorjs-icon:before{content:'\e600'}@media (max-width:47.9em){.anchorjs-link{display:none}}
\ No newline at end of file
*/.bd-example:after,.bd-header:after{clear:both}.ge,.sd{font-style:italic}.bd-container{position:relative;max-width:62rem;padding:0 1rem 1rem;margin-right:auto;margin-left:auto}@media (min-width:768px){.bd-container{padding:2rem}}@media (min-width:992px){.bd-container{padding:4rem}}.bd-container>table{display:block;width:100%;max-width:100%;overflow-y:auto;margin-bottom:1rem}.bd-container>table>tbody>tr>td,.bd-container>table>tbody>tr>th,.bd-container>table>tfoot>tr>td,.bd-container>table>tfoot>tr>th,.bd-container>table>thead>tr>td,.bd-container>table>thead>tr>th{padding:.75rem;line-height:1.5;vertical-align:top;border:1px solid #eceeef}.bd-container>table td:first-child>code{white-space:nowrap}.bd-content>h2{margin-top:3rem}.bd-content>h3{margin-top:1.5rem}.bd-content>ol li,.bd-content>ul li{margin-bottom:.25rem}@media (min-width:34em){.bd-title{font-size:4rem}.bd-title+p{font-size:1.5rem;font-weight:300}}.bd-sidebar{padding:0;margin-bottom:0;background-color:#fafafa}.bd-sidebar .navbar-toggler{position:absolute;top:1.25rem;right:0;z-index:5}.bd-sidebar .navbar-header{float:none;margin-right:-15px}.bd-sidebar .navbar-collapse{padding:0;border:0}@media (min-width:992px){.bd-docs{margin-left:240px}.bd-sidebar{position:fixed;top:0;bottom:0;left:0;width:240px;overflow-y:auto;border-right:1px solid #eee}}.bd-example,.bd-masthead,.bd-search{position:relative}.bd-sidebar .navbar-brand{display:block;float:none;height:auto;padding:1.75rem 1.25rem;font-size:20px;font-weight:500;line-height:1}.bd-sidebar-brand:focus,.bd-sidebar-brand:hover{text-decoration:none}.bd-search{margin-right:1.25rem;margin-bottom:1.5rem;margin-left:1.25rem}.bd-search .form-control{height:2.45rem;padding-top:.4rem;padding-bottom:.4rem}.bd-search-results{top:108%;right:0;display:block;padding:0;overflow:hidden;font-size:.9rem;border:0}.bd-search-results>li>a{padding-left:.75rem;padding-right:.75rem}.bd-search-results>li:first-child{margin-top:.25rem}.bd-search-results>li:last-child{margin-bottom:.25rem}.bd-search-results>.no-results{padding:.75rem 1rem;color:#7a7a7a;text-align:center}.bd-sidenav{display:none}.active>.bd-sidenav,.bd-toc-link{display:block}.bd-toc-link{padding:.25rem 1.25rem;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 1.25rem;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-sidebar .nav .nav{display:none;padding-bottom:.75rem}.bd-booticon,.bd-sidebar .nav>.active>.nav{display:block}.bd-sidebar .nav .nav>li>a{padding-top:1px;padding-bottom:1px;font-weight:400;padding-top:.125rem;padding-bottom:.125rem;padding-left:2rem;font-size:80%}.bd-sidebar .nav .nav>.active:focus>a,.bd-sidebar .nav .nav>.active:hover>a,.bd-sidebar .nav .nav>.active>a{font-weight:500}.bd-booticon{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-brand-logos,.bd-callout,.bd-callout code,.bd-team img,.color-swatch{border-radius:.25rem}.carbonad,.carbonad-tag,.carbonad-text{width:auto!important;height:auto!important}.bd-booticon.inverse{color:#563d7c;background-color:#fff}.bd-booticon.outline{background-color:transparent;border:1px solid #cdbfe3}.bd-nav-home{margin-bottom:0;background-color:#563d7c;border-bottom:0}.bd-nav-home .navbar-brand>a{font-weight:500;color:#fff}.bd-nav-home .nav-link{font-weight:500;color:#cdbfe3}.bd-nav-home .nav-link:focus,.bd-nav-home .nav-link:hover{color:#fff;background-color:rgba(0,0,0,.5)}.bd-header{padding-bottom:.5rem;margin-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.25)}.bd-header:after,.bd-header:before{content:" ";display:table}.bd-header .bd-header-mark{float:left;padding-top:.6em;padding-bottom:.6em;font-size:1.25rem;font-weight:500}.bd-header-nav{float:right}.bd-header-nav .nav-link{float:left}.bd-header-nav .nav-link:hover{background-color:transparent}.bd-masthead{padding:2rem 0}.bd-masthead .bd-booticon{margin:0 0 2rem;color:#55595c;border-color:#55595c}.bd-masthead h1{font-weight:300;line-height:1}.bd-masthead .lead{margin-bottom:2rem;font-size:1.25rem}.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:#55595c;border-color:#55595c}.bd-masthead .btn:hover{color:#fff;background-color:#55595c}@media (min-width:480px){.bd-masthead .btn{width:auto}}@media (min-width:768px){.bd-masthead{padding:2rem 0 4rem}.bd-header{margin-bottom:4rem}.bd-masthead h1{font-size:4rem}.bd-masthead .lead{font-size:1.5rem}}@media (min-width:992px){.bd-masthead .lead{width:80%;font-size:2rem}}.bd-featurette{padding-top:3rem;padding-bottom:3rem;font-size:1rem;line-height:1.5;color:#555;text-align:center;background-color:#fff;border-bottom:1px solid #e5e5e5}.bd-featurette+.bd-footer{margin-top:0;border-top:0}.bd-featurette-title{margin-bottom:.5rem;font-size:2rem;font-weight:400;color:#333}.half-rule{width:6rem;margin:2.5rem auto}.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 .lead{max-width:80%;margin-right:auto;margin-left:auto}.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}.carbonad{padding:1.25rem!important;margin:0 -1rem 2rem!important;overflow:hidden;font-size:.8rem!important;line-height:1rem!important;color:#55595c!important;text-align:left;background:#f5f5f5!important;border:0!important}.carbonad-img{margin:0!important}.carbonad-tag,.carbonad-text{display:block!important;float:none!important;margin-left:145px!important;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}.carbonad-text{padding-top:0!important}.carbonad-tag{color:inherit!important;text-align:left!important}.anchorjs-link,.bd-brand-item,.bd-example-tooltips,.responsive-utilities td{text-align:center}.carbonad-tag a,.carbonad-text a{color:#55595c!important}.carbonad-tag a:hover,.carbonad-text a:hover{color:#0275d8!important}.carbonad #azcarbon>img{display:none}@media (min-width:34em){.carbonad{width:330px!important;margin:1.5rem auto!important;border-width:1px!important;border-radius:.25rem}.bd-masthead .carbonad{margin:3rem auto 0!important}}@media (min-width:48em){.carbonad{margin-right:0!important;margin-left:0!important}}@media (min-width:62em){.carbonad{float:right;width:330px!important;padding:1rem!important;margin:.5rem 0 1rem 2rem!important}.bd-masthead .carbonad{float:none;margin:0!important}}.bd-footer{padding-top:2rem;margin-top:6rem;font-size:85%;color:#777;border-top:1px solid #e5e5e5}.bd-footer-links{padding-left:0;margin-top:20px;color:#999}.bd-footer-links li{display:inline;padding:0 2px}.bd-footer-links li:first-child{padding-left:0}@media (min-width:768px){.bd-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}.bd-footer p{margin-bottom:0}}.bd-social{margin-bottom:1.5rem;margin-left:-.5rem}.bd-social-buttons{display:inline-block;padding-left:0;margin-bottom:0;list-style:none}.bd-social-buttons li{display:inline-block;padding:.25rem .5rem;line-height:1}.bd-social-buttons .twitter-follow-button{width:225px!important}.bd-social-buttons .twitter-share-button{width:98px!important}.github-btn{overflow:hidden;border:0}.bd-example>.row{margin-bottom:1rem}.bd-example>.row>[class^=col-]{padding-top:.75rem;padding-bottom:.75rem;background-color:rgba(86,61,124,.15);border:1px solid rgba(86,61,124,.2)}.bd-example{padding:1rem;margin:1rem -1rem;border:solid #f7f7f9;border-width:.2rem 0 0}.bd-example:after,.bd-example:before{content:" ";display:table}@media (min-width:34em){.bd-example{margin-left:0;margin-right:0;margin-bottom:-1rem;padding:1.5rem;border-width:.2rem}}.bd-example+p{margin-top:2rem}.bd-example .container{width:auto}.bd-example>.card{float:left;max-width:15rem;margin:.25rem}.bd-example>.alert+.alert,.bd-example>.nav+.nav,.bd-example>.progress+.progress{margin-top:1rem}.bd-example>.dropdown-menu:first-child{position:static;display:block}.bd-example>.table-responsive:last-child>.table,.bd-example>:last-child{margin-bottom:0!important}.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:last-child{margin-bottom:0}.bd-navbar-bottom-example,.bd-navbar-top-example{z-index:1;padding:0;overflow:hidden}.bd-navbar-bottom-example .navbar-header,.bd-navbar-top-example .navbar-header{margin-left:0}.bd-navbar-bottom-example .navbar-fixed-bottom,.bd-navbar-top-example .navbar-fixed-top{position:relative;margin-right:0;margin-left:0}.bd-navbar-top-example{padding-bottom:45px}.bd-navbar-top-example .navbar-fixed-top{top:-1px}.bd-navbar-bottom-example{padding-top:45px}.bd-navbar-bottom-example .navbar-fixed-bottom{bottom:-1px}.bd-navbar-bottom-example .navbar{margin-bottom:0}@media (min-width:768px){.bd-navbar-bottom-example .navbar-fixed-bottom,.bd-navbar-top-example .navbar-fixed-top{position:absolute}}.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,.bd-example>.bg-info,.bd-example>.bg-primary,.bd-example>.bg-success,.bd-example>.bg-warning{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;-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-outline{color:#563d7c;background-color:transparent;border-color:#563d7c}.btn-outline:active,.btn-outline:focus,.btn-outline:hover{color:#fff;background-color:#563d7c;border-color:#563d7c}.btn-outline-inverse{color:#fff;background-color:transparent;border-color:#cdbfe3}.btn-outline-inverse:active,.btn-outline-inverse:focus,.btn-outline-inverse:hover{color:#563d7c;text-shadow:none;background-color:#fff;border-color:#fff}.bd-callout{padding:1.25rem;margin-top:1.25rem;margin-bottom:1.25rem;border:1px solid #eee;border-left-width:.25rem}.bd-callout h4{margin-top:0;margin-bottom:.25rem}.bd-callout p:last-child{margin-bottom:0}.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 .team-member{line-height:2rem;color:#555}.bd-team .team-member:hover{color:#333;text-decoration:none}.bd-team .github-btn{float:right;width:180px;height:1.25rem;margin-top:.25rem}.bd-team img{float:left;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}.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{float:left;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:0;right:0;z-index:10;display:block;padding:.25rem .5rem;font-size:75%;color:#818a91;cursor:pointer;background-color:#eceeef;border-radius:0 .2rem}.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}@font-face{font-family:anchorjs-icons;src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6v8yoAAAC8AAAAYGNtYXDL8RqdAAABHAAAADxnYXNwAAAAEAAAAVgAAAAIZ2x5Zkm2oNUAAAFgAAABWGhlYWQAHd4cAAACuAAAADZoaGVhB3sECwAAAvAAAAAkaG10eAYAAEcAAAMUAAAADGxvY2EACgCsAAADIAAAAAhtYXhwAAYAcAAAAygAAAAgbmFtZUQXtNYAAANIAAABOXBvc3QAAwAAAAAEhAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAACDmAAPA/8D/wAPAAEAAAAAAAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACACDmAP//AAAAIOYA////4RoCAAEAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAIARwAHA7kDeQA2AG0AAAEnLgEiBg8BDgEUFh8BHgMXNy4DLwEuATQ2PwE+ATIWHwEeARQGDwEeAxU3PgE0JicBLgMnBx4DHwEeARQGDwEOASImLwEuATQ2PwEuAzUHDgEUFh8BHgEyNj8BPgE0Ji8BA7kEI1ldWiPaIyQkIwQDBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMk/r4DBgYGBFAEBwYHAwQTExMT2xMwMjETBBMTExNjBwkGA5gkIyMkBCNZXVoj2iMkJCMEA3UEJCMjJNojWV1aIwQDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkj/sYDBgUFA1ACBQUFAwQUMDIxE9oTExMTBBMxMjATYxAhISIRmSNaXVkjBCQjIyTaI1ldWiMEAAEAAAABAABR/4xQXw889QALBAAAAAAAzqNM0wAAAADOo0zTAAAAAAO5A3kAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAABHA7kAAQAAAAAAAAAAAAAAAAAAAAMAAAAAAgAAAAQAAEcAAAAAAAoArAABAAAAAwBuAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADAALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATwAAsAAAAABKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDq/zKmNtYXAAAAFoAAAAPAAAADzL8RqdZ2FzcAAAAaQAAAAIAAAACAAAABBnbHlmAAABrAAAAVgAAAFYSbag1WhlYWQAAAMEAAAANgAAADYAHd4caGhlYQAAAzwAAAAkAAAAJAd7BAtobXR4AAADYAAAAAwAAAAMBgAAR2xvY2EAAANsAAAACAAAAAgACgCsbWF4cAAAA3QAAAAgAAAAIAAGAHBuYW1lAAADlAAAATkAAAE5RBe01nBvc3QAAATQAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAg5gADwP/A/8ADwABAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAoAAAABgAEAAEAAgAg5gD//wAAACDmAP///+EaAgABAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAACAEcABwO5A3kANgBtAAABJy4BIgYPAQ4BFBYfAR4DFzcuAy8BLgE0Nj8BPgEyFh8BHgEUBg8BHgMVNz4BNCYnAS4DJwceAx8BHgEUBg8BDgEiJi8BLgE0Nj8BLgM1Bw4BFBYfAR4BMjY/AT4BNCYvAQO5BCNZXVoj2iMkJCMEAwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJP6+AwYGBgRQBAcGBwMEExMTE9sTMDIxEwQTExMTYwcJBgOYJCMjJAQjWV1aI9ojJCQjBAN1BCQjIyTaI1ldWiMEAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZI/7GAwYFBQNQAgUFBQMEFDAyMRPaExMTEwQTMTIwE2MQISEiEZkjWl1ZIwQkIyMk2iNZXVojBAABAAAAAQAAUf+MUF8PPPUACwQAAAAAAM6jTNMAAAAAzqNM0wAAAAADuQN5AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAARwO5AAEAAAAAAAAAAAAAAAAAAAADAAAAAAIAAAAEAABHAAAAAAAKAKwAAQAAAAMAbgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwBpAGMAbwBtAG8AbwBuAFYAZQByAHMAaQBvAG4AIAAwAC4AMABpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuAFIAZQBnAHUAbABhAHIAaQBjAG8AbQBvAG8AbgBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');font-style:normal;font-weight:400}.anchorjs-icon{font-family:anchorjs-icons;font-style:normal;font-variant:normal;font-weight:400;line-height:1;speak:none;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.anchorjs-link{opacity:0;text-decoration:none}.anchorjs-link:focus,:hover>.anchorjs-link{opacity:1;-webkit-transition:color .16s linear;-o-transition:color .16s linear;transition:color .16s linear}.anchorjs-description{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.anchorjs-link{float:left;width:1.2em;height:1em;padding-right:.2em;margin-top:.25em;margin-left:-1.2em;font-size:70%;color:inherit}:hover>.anchorjs-link:hover{color:#0275d8;text-decoration:none}.anchorjs-icon:before{content:'\e600'}@media (max-width:47.9em){.anchorjs-link{display:none}}
\ No newline at end of file
docs/assets/css/docs.min.css.map
View file @ bf5931b5
This diff was suppressed by a .gitattributes entry.
docs/components/forms.md
View file @ bf5931b5
......@@ -3,28 +3,70 @@ layout: page
title: Forms
---
Bootstrap normalizes common HTML5 form elements and adds a number of layout options for building forms of all sizes.
Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.
## Example form
## Form controls
Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are set to `width: 100%;` by default. Wrap labels and controls in `.form-group` for optimum spacing.
Bootstrap's form controls expand on [our Rebooted form styles](/components/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
**Do not mix form groups directly with [input groups](/components/#input-groups).** Instead, nest the input group inside of the form group.
Remember, since Bootstrap utilizies the HTML5 doctype, **all inputs must have a `type` attribute** for proper rendering.
{% example html %}
<form>
<div class="form-group">
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
</fieldset>
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
</fieldset>
<fieldset class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</fieldset>
<fieldset class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</fieldset>
<fieldset class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</fieldset>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
<div class="checkbox">
<label>
......@@ -35,17 +77,120 @@ Individual form controls automatically receive some global styling. All textual
</form>
{% endexample %}
## Inline forms
Below is a complete list of the specific from controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group.
<table>
<thead>
<tr>
<th>Classes</th>
<th>Used for</th>
<th>Supported variations</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{% markdown %}`.form-group`{% endmarkdown %}
</td>
<td class="text-nowrap">
Any group of form controls
</td>
<td>
{% markdown %}Use with any block-level element like `<fieldset>` or `<div>`{% endmarkdown %}
</td>
</tr>
<tr>
<td rowspan="3">
{% markdown %}`.form-control`{% endmarkdown %}
</td>
<td>
Textual inputs
</td>
<td>
{% markdown %}`text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`{% endmarkdown %}
</td>
</tr>
<tr>
<td>
Select menus
</td>
<td>
{% markdown %}`multiple`, `size`{% endmarkdown %}
</td>
</tr>
<tr>
<td>
Textareas
</td>
<td>
<span class="text-muted">N/A</span>
</td>
</tr>
<tr>
<td class="text-nowrap">
{% markdown %}`.form-control-file`{% endmarkdown %}
</td>
<td>
File inputs
</td>
<td>
{% markdown %}`file`{% endmarkdown %}
</td>
</tr>
<tr>
<td class="text-nowrap">
{% markdown %}
`.radio`<br>
`.radio-inline`<br>
`.checkbox`<br>
`.checkbox-inline`
{% endmarkdown %}
</td>
<td class="text-nowrap">
Checkboxes and radios
</td>
<td>
<span class="text-muted">N/A</span>
</td>
</tr>
</tbody>
</table>
## Form layouts
Since Bootstrap applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
### Form groups
The `.form-group` class is the easiest way to add some structure to forms. It's only purpose is to provide `margin-bottom` around a label and control pairing. As a bonus, since it's a class you can use it with `<fieldset>`s, `<div>`s, or nearly any other element.
Add `.form-inline` to your `<form>` or a parent element for left-aligned and inline-block controls. Inputs and selects are set to `width: auto;` in inline forms. Depending on your layout, additional custom widths may be required. As shown below, you should alwys include a `<label>` with each form control.
{% example html %}
<form>
<fieldset class="form-group">
<label for="formGroupExampleLabel">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleLabel2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</fieldset>
</form>
{% endexample %}
### Inline forms
Use the `.inline-form` class to to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:
**Inline forms only appear inline in viewports that are at least 768px wide.**
- Controls are `display: inline-block` to provide alignment control via `vertical-align` and `margin`.
- Controls receive `width: auto` to override the Bootstrap default `width: 100%`.
- Controls **only appear inline in viewports that are at least 768px wide** to account for narrow viewports on mobile devices.
### Visible labels
Because of this, you may need to manually adddres the width and alignment of individual form controls. Lastly, as shown below, you should always include a `<label>` with each form control.
#### Visible labels
{% example html %}
<div class="bd-example" data-example-id="simple-form-inline">
<form class="form-inline">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
......@@ -55,11 +200,10 @@ Add `.form-inline` to your `<form>` or a parent element for left-aligned and inl
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-primary">Send invitation</button>
</form>
</div>
</form>
{% endexample %}
### Hidden labels
#### Hidden labels
{% example html %}
<form class="form-inline">
......@@ -94,85 +238,44 @@ Add `.form-inline` to your `<form>` or a parent element for left-aligned and inl
</form>
{% endexample %}
## Horizontal forms
### Using the Grid
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form or form control's parent. Doing so changes `.form-group`s to behave as grid rows, so no need for `.row`.
For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins). Add the `.row` class to form groups and use the `.col-*` classes to specify the width of your labels and controls.
{% example html %}
<form class="form-horizontal">
<div class="form-group">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary">Sign in</button>
</div>
</div>
</form>
{% endexample %}
## Supported controls
Examples of standard form controls supported in an example form layout.
### Inputs
The most common form control, text-based input fields. Includes support for all HTML5 types:
- `text`
- `password`
- `datetime`
- `datetime-local`
- `date`
- `month`
- `time`
- `week`
- `number`
- `email`
- `url`
- `search`
- `tel`
- `color`
Since Bootstrap requires the HTML5 doctype, **all inputs must have a `type` attribute.**
{% example html %}
<input type="text" class="form-control" placeholder="Text input">
{% endexample %}
### Textarea
Form control which supports multiple lines of text. Change `rows` attribute as necessary.
{% example html %}
<textarea class="form-control" rows="3"></textarea>
{% endexample %}
### Checkboxes and radios
## Checkboxes and radios
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
A checkbox or radio with the `disabled` attribute will be styled appropriately. To have the `<label>` for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the `.disabled` class to your `.radio`, `.radio-inline`, `.checkbox`, `.checkbox-inline`, or `<fieldset>`.
#### Default (stacked)
### Default (stacked)
{% example html %}
<div class="checkbox">
......@@ -208,7 +311,7 @@ A checkbox or radio with the `disabled` attribute will be styled appropriately.
</div>
{% endexample %}
#### Inline
### Inline
Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.
......@@ -236,7 +339,7 @@ Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes
</label>
{% endexample %}
#### Without labels
### Without labels
Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.**
......@@ -253,34 +356,6 @@ Should you have no text within the `<label>`, the input is positioned as you'd e
</div>
{% endexample %}
### Selects
Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via `border-radius` properties.
Use the default option, or add `multiple` to show multiple options at once.
{% example html %}
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
{% endexample %}
For `<select>` controls with the `multiple` attribute, multiple options are shown by default.
{% example html %}
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
{% endexample %}
## Static controls
When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
......
docs/dist/css/bootstrap.css
View file @ bf5931b5
......@@ -1657,7 +1657,6 @@ label {
.form-control {
display: block;
width: 100%;
height: 2.625rem;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.5;
......@@ -1670,6 +1669,9 @@ label {
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:not(textarea), .form-control:not(select[size]), .form-control:not(select[multiple]) {
height: 2.625rem;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
......@@ -1698,10 +1700,8 @@ label {
cursor: false;
}
textarea.form-control {
height: auto;
padding-top: .75rem;
padding-bottom: .75rem;
.form-control-file {
display: block;
}
input[type="search"] {
......@@ -1715,12 +1715,11 @@ input[type="search"] {
.radio, .checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
margin-bottom: .75rem;
}
.radio label, .checkbox label {
min-height: 1;
padding-left: 20px;
padding-left: 1.25rem;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
......@@ -1728,18 +1727,18 @@ input[type="search"] {
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
margin-top: .25rem;
margin-left: -1.25rem;
}
.radio + .radio, .checkbox + .checkbox {
margin-top: -5px;
margin-top: -.25rem;
}
.radio-inline, .checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
padding-left: 1.25rem;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
......@@ -1748,7 +1747,7 @@ input[type="search"] {
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
margin-left: .75rem;
}
input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] input[type="radio"], input[type="checkbox"]:disabled, input[type="checkbox"].disabled, fieldset[disabled] input[type="checkbox"] {
......@@ -1947,8 +1946,8 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
margin-top: .25rem;
margin-bottom: .75rem;
color: #747a7f;
}
......
docs/dist/css/bootstrap.css.map
View file @ bf5931b5
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ bf5931b5
This source diff could not be displayed because it is too large. You can view the blob instead.
scss/_forms.scss
View file @ bf5931b5
......@@ -100,25 +100,38 @@ label {
.form-control {
display: block;
width: 100%;
height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
// display: inline-block;
// // Make inputs at least the height of their button counterpart (base line-height + padding + border)
// height: $input-height-base;
padding: $padding-base-vertical $padding-base-horizontal;
font-size: $font-size-base;
line-height: $line-height-base;
color: $input-color;
background-color: $input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
background-image: none;
border: 1px solid $input-border;
@include border-radius($input-border-radius); // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius);
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
// Make inputs at least the height of their button counterpart (base line-height + padding + border).
// Only apply the height to textual inputs and some selcts.
&:not(textarea),
&:not(select[size]),
&:not(select[multiple]) {
height: $input-height-base;
}
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus();
// Placeholder
&::placeholder {
color: $input-color-placeholder;
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
// Disabled and read-only inputs
......@@ -130,7 +143,8 @@ label {
&[readonly],
fieldset[disabled] & {
background-color: $input-bg-disabled;
opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
&[disabled],
......@@ -139,13 +153,17 @@ label {
}
}
// Reset height for `textarea`s
textarea.form-control {
height: auto;
padding-top: $padding-base-horizontal;
padding-bottom: $padding-base-horizontal;
}
// // Reset height for `textarea`s
// textarea.form-control {
// height: auto;
// padding-top: $padding-base-horizontal;
// padding-bottom: $padding-base-horizontal;
// }
// Make file inputs better match text inputs by forcing them to new lines.
.form-control-file {
display: block;
}
// Search inputs in iOS
//
......@@ -204,12 +222,13 @@ input[type="search"] {
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
// margin-top: ($spacer * .75);
margin-bottom: ($spacer * .75);
label {
min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text
padding-left: 20px;
// Ensure the input doesn't jump when there is no text
min-height: $line-height-computed;
padding-left: 1.25rem;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
......@@ -220,13 +239,15 @@ input[type="search"] {
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
margin-top: .25rem;
// margin-top: 4px \9;
margin-left: -1.25rem;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
// Move up sibling radios or checkboxes for tighter spacing
margin-top: -.25rem;
}
// Radios and checkboxes on same line
......@@ -234,7 +255,7 @@ input[type="search"] {
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
padding-left: 1.25rem;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
......@@ -243,7 +264,7 @@ input[type="search"] {
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px; // space out consecutive inline controls
margin-left: .75rem;
}
// Apply same disabled cursor tweak as for inputs
......@@ -406,8 +427,8 @@ input[type="checkbox"] {
.help-block {
display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 10px;
margin-top: .25rem;
margin-bottom: .75rem;
color: lighten($text-color, 25%); // lighten the text some for contrast
}
......
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