Bootstrap learning notes (Forms) and bootstrap learning notes

Bootstrap learning notes (Forms) and bootstrap learning notes

1. Basic Form: for basic forms, Bootstrap does not design too many customization effects for them, but only customizes fieldset, legend, and label labels in the form.

fieldset {min-width: 0;padding: 0;margin: 0;border: 0;}legend {display: block;width: 100%;padding: 0;margin-bottom: 20px;font-size: 21px;line-height: inherit;color: #333;border: 0;border-bottom: 1px solid #e5e5e5;}label {display: inline-block;margin-bottom: 5px;font-weight: bold;}

Source code

2. horizontal form class name "form-horizontal"

.form-horizontal .control-label,.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline {padding-top: 7px;margin-top: 0;margin-bottom: 0;}.form-horizontal .radio,.form-horizontal .checkbox {min-height: 27px;}.form-horizontal .form-group {margin-right: -15px;margin-left: -15px;}.form-horizontal .form-control-static {padding-top: 7px;}@media (min-width: 768px) {.form-horizontal .control-label {text-align: right;  }}.form-horizontal .has-feedback .form-control-feedback {top: 0;right: 15px;}

Source code

3. inline form class name "form-inline"

<Form class = "form-inline" role = "form"> <div class = "form-group"> <label class = "sr-only" for = "exampleInputEmail2"> email </label> <input type = "email" class = "form-control" id = "exampleInputEmail2" placeholder = "Enter your email address"> </div> <div class = "form-group"> <label class = "sr-only" for = "exampleInputPassword2"> password </label> <input type = "password" class = "form -control "id =" exampleInputPassword2 "placeholder =" Enter your email password "> </div> <div class =" checkbox "> <label> <input type =" checkbox ""> Remember password </label> </div> <button type =" submit "class =" btnbtn-default "> enter email address </button> </form> <--. sr-only: used by persons with disabilities --> <--. sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin:-1px; overflow: hidden; clip: rect (0, 0, 0, 0, 0); border: 0;} -->

Example

Form Control

1. input box input: In order to ensure that the style of the control is not incorrect in various form styles, you need to add the class name "form-control". All the form Controls below can be added.

<! Doctype html> Example
Type: text button checkbox date datetime-local img file hidden month number password radio range reset search submit tel time url week hidden
2. select in the drop-down box: select multiple rows to set the value of the multiple attribute to multiple.
<Form> <div class = "form-group"> <select multiple class = "form-control"> // if it is a drop-down box, do not add multiple <option> to play football </ option> <option> swimming </option> <option> jogging </option> <option> dancing </option> </select> </div> </form>
Example
3. inline form class name "form-inline"
<Form class = "form-inline" role = "form"> <div class = "form-group"> <label class = "sr-only" for = "exampleInputEmail2"> email </label> <input type = "email" class = "form-control" id = "exampleInputEmail2" placeholder = "Enter your email address"> </div> <div class = "form-group"> <label class = "sr-only" for = "exampleInputPassword2"> password </label> <input type = "password" class = "form -control "id =" exampleInputPassword2 "placeholder =" Enter your email password "> </div> <div class =" checkbox "> <label> <input type =" checkbox ""> Remember password </label> </div> <button type =" submit "class =" btnbtn-default "> enter email address </button> </form> <--. sr-only: used by persons with disabilities --> <--. sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin:-1px; overflow: hidden; clip: rect (0, 0, 0, 0, 0); border: 0;} -->
Example
Ea: if the class name "form-control" is added, you do not need to set the cols attribute.

<form role="form">  <div class="form-group">    <textarea class="form-control" rows="3"></textarea>  </div></form>
Example
4. Check box checkbox and single-choice button radio: horizontal arrangement plus class name "checkbox-inline" | class name "radio-inline"
<form role="form">  <div class="form-group">    <textarea class="form-control" rows="3"></textarea>  </div></form>
Example
4. Check box checkbox and single-choice button radio: horizontal arrangement plus class name "checkbox-inline" | class name "radio-inline"
<! Doctype html> Example
.radio,.checkbox {display: block;min-height: 20px;padding-left: 20px;margin-top: 10px;margin-bottom: 10px;}.radio label,.checkbox label {display: inline;font-weight: normal;cursor: pointer;}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"] {float: left;margin-left: -20px;}.radio + .radio,.checkbox + .checkbox {margin-top: -5px;}
Source code
.radio-inline,.checkbox-inline {display: inline-block;padding-left: 20px;margin-bottom: 0;font-weight: normal;vertical-align: middle;cursor: pointer;}.radio-inline + .radio-inline,.checkbox-inline + .checkbox-inline {margin-top: 0;margin-left: 10px;}
Horizontal arrangement source code
5. Control size: Class Name input-sm: make the control smaller than normal size; Class Name input-lg: make the control larger than normal size; width with Bootstrap Grid System
.input-sm {height: 30px;padding: 5px 10px;font-size: 12px;line-height: 1.5;border-radius: 3px;}select.input-sm {height: 30px;line-height: 30px;}textarea.input-sm,select[multiple].input-sm {height: auto;}.input-lg {height: 46px;padding: 10px 16px;font-size: 18px;line-height: 1.33;border-radius: 6px;}select.input-lg {height: 46px;line-height: 46px;}textarea.input-lg,select[multiple].input-lg {height: auto;}
Source code
6. form control status (Focus status): class name form-control
.form-control:focus {border-color: #66afe9;outline: 0;  -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
Source code
7. form control status (disabled): Do not forget to add form-control ① Add "disabled" to the form control to be disabled; ② fieldset sets the disabled attribute, the entire domain will be disabled.
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {cursor: not-allowed;background-color: #eee;opacity: 1;}
Source code
8. form control status (Verification status): 1 ,. has-warning: warning status (yellow) 2 ,. has-error: error status (red) 3 ,. has-success: Successful (green)
: Required class name: has-feedback + <span class = "glyphicon-remove form-control-feedback"> </span>
 
9. Form prompt: "help-block"
.help-block {display: block;margin-top: 5px;margin-bottom: 10px;color: #737373;}
Source code
Button
We recommend that you use a button or a label to create a button.
1. Basic button: Class Name "btn"
.btn {display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: normal;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;cursor: pointer;  -webkit-user-select: none;     -moz-user-select: none;      -ms-user-select: none;user-select: none;background-image: none;border: 1px solid transparent;border-radius: 4px;}
Source code
2. default button: Class Name "btn" + class name "btn-default"
.btn-default {color: #333;background-color: #fff;border-color: #ccc;}
Source code 3. Custom style:
4. Button size:. btn-lg: large button. btn-sm: small button. btn-cs: Ultra-small button
.btn-lg,.btn-group-lg> .btn {padding: 10px 16px;font-size: 18px;line-height: 1.33;border-radius: 6px;}.btn-sm,.btn-group-sm> .btn {padding: 5px 10px;font-size: 12px;line-height: 1.5;border-radius: 3px;}.btn-xs,.btn-group-xs> .btn {padding: 1px 5px;font-size: 12px;line-height: 1.5;border-radius: 3px;}
Source code
5. block button: Class Name "btn-block"
6. disabled: Use the disabled class or the disabled attribute.
Image1. img-responsive: responsive image, mainly for responsive design 2. img-rounded: rounded image 3. img-circle: Circular Image 4. img-thumbnail: thumbnail image
img {vertical-align: middle;}.img-responsive,.thumbnail>img,.thumbnail a >img,.carousel-inner > .item >img,.carousel-inner > .item > a >img {display: block;max-width: 100%;height: auto;}.img-rounded {border-radius: 6px;}.img-thumbnail {display: inline-block;max-width: 100%;height: auto;padding: 4px;line-height: 1.42857143;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;  -webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}.img-circle {border-radius: 50%;}
Source code
Icon
Http://getbootstrap.com/components/#glyphicons: view all icons

@ Font-face {font-family: 'glyphicons Halflings '; src: url (' ../fonts/glyphicons-halflings-regular.eot '); src: url (' ../fonts/glyphicons-halflings-regular.eot? # Iefix') format ('embedded-opentype '), url ('.. /fonts/glyphicons-halflings-regular.woff ') format ('woff'), url ('.. /fonts/glyphicons-halflings-regular.ttf ') format ('truetype'), url ('.. /fonts/glyphicons-halflings-regular.svg # glyphicons_halflingsregular ') format ('svg');} <! -- Use -->. glyphicon {position: relative; top: 1px; display: inline-block; font-family: 'glyphicons Halflings '; font-style: normal; font-weight: normal; line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale ;}. glyphicon-asterisk: before {content: "\ 2a ";}