In this lesson, we mainly learn about Bootstrap form and image functions, which can display various rich effects through built-in CSS definitions.
one. form
Bootstrap provides some rich form styles for developers to use.
1. Basic format
// implement the basic form style
<form>
<divclass="form-group"> <label> Email </label>
<inputtype="email" class="form-control" placeholder=" Please enter your email ">
</div>
<divclass="form-group"> <label>密码</label>
<inputtype="password" class="form-control" placeholder=" Please enter your password ">
</div>
</form>
Note: Only when the type of the input box is set correctly can it be given the correct style. Supported input box controls include: text , password , datetime , datetime-local , date , month , time , week , number , email , url , search , tel and color .
2. Inline Forms
// Let the form be left-aligned and float, and behave as an inline-block inline-block structure
<formclass="form-inline">
Note: When less than 768px , the exclusive style will be restored
3. Form combination
// add fragment before and after
<divclass="input-group">
<div class="input-group-addon">￥</div> <inputtype="text" class="form-control"> <div class="input-group-addon">.00</div>
</div>
4. Arrange horizontally
// Keep the elements in the form aligned horizontally
<formclass="form-horizontal"> <div class="form-group">
<label class="col-sm-2 control-label">电子邮件</label> <divclass="col-sm-10">
<input type="email"class="form-control" placeholder=" Please enter your email ">
</div>
</div>
</form>
Note: The col-sm grid system is used here , which will be explained in the following chapters, and the control-label means that it is synchronized with the style of the parent element.
5. Checkboxes and radio buttons
// Set the checkbox, in one line
<divclass="checkbox">
<label>
<inputtype="checkbox">体育 </label>
</div>
<divclass="checkbox">
<label>
<inputtype="checkbox">音乐 </label>
</div>
// Set the disabled checkbox
<divclass="checkbox disabled">
<label>
<input type="checkbox"disabled>音乐 </label>
</div>
// Set the checkbox displayed on the inline line
<labelclass="checkbox-inline"> <input type="checkbox">体育
</label>
<label class="checkbox-inlinedisabled"> <input type="checkbox" disabled>音乐
</label>
// set the radio button
<div class="radiodisabled"> <label>
<input type="radio"name="sex" disabled>男 </label>
</div>
6. Drop-down list
// set the dropdown list
<selectclass="form-control"> <option>1</option><option>2</option> <option>3</option> <option>4</option><option>5</option>
</select>
7. Check Status
// set to error state
<divclass="form-group has-error">
Note: There are other states as follows
style |
illustrate |
|
|
has-error |
error state |
|
|
has-success |
success status |
|
|
has-warning |
warning status |
|
|
//label label synchronization corresponding state
<labelclass="control-label">Input with success</label>
8. Add extra icons // built-in text icon on the right side of the text box
<divclass="form-group has-feedback"> <label> Email </label>
<inputtype="email" class="form-control">
<span class="glyphicon glyphicon-okform-control-feedback"></span> </div>
Note: In addition to glyphicon-ok , there are several tables as follows:
style |
illustrate |
glyphicon-ok success status
glyphicon-warning-sign warning status
glyphicon-remove error status
9. Control Size // Large to Small
<input type="password"class="form-control input-lg"> <input type="password"class="form-control">
<input type="password"class="form-control input-sm"> Note: You can also set parent elements form-group-lg and form-group-sm to adjust.
two. picture
Bootstrap provides some rich image styles for developers to use. 1. Picture shape // three shapes
<img src="img/pic.png"alt="图片"class="img-rounded"> <img src="img/pic.png"alt="图片"class="img-circle"> <img src="img/pic.png" alt="图片" class="img-thumbnail">
// responsive image
<imgsrc="img/pic.png" alt="图片"class="img-responsive">