Chapter 4 BootStrap forms and image_javascript tips-js tutorial

Bootstrap, from Twitter, is currently the most popular front-end framework. This article introduces Bootstrap forms and images. For more information, see Bootstrap. Twitter is the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is concise and flexible, making Web development faster.

Learning points:

1. Form
2. Images

In this lesson, we will mainly learn about the Bootstrap form and image functions, and display various effects through built-in CSS definitions.

I. Forms

Bootstrap provides a variety of form styles for developers.

1. Basic Format

// Implement basic form styles

Note: Only when the type of the input box is set correctly can the correct style be assigned. Supported input box controls include text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

2. inline form

// Let the form align left and float, and show it as inline-block inline block Structure

Note: The col-sm raster system is used here, which will be explained in later sections. The control-label system is used to synchronize with the parent element style.

5. Check box and single answer

// Set the check box in one row
 Sports
 Music
// Set the disabled check box
 Music
// Set the check box for inline row display Sports Music// Set a single region
 Male
 

6. drop-down list

// Set the drop-down list12345 

7. Check status

// Set to error status
 

Note: Other statuses are as follows:

Style description has-error status has-success status has-warning status // The label synchronizes the corresponding statusInput with success 

8. Add additional icons

// The built-in text icon on the right of the text box
Email
 

Note: In addition to glyphicon-OK, there are several tables as follows:

Style description glyphicon-OK success status glyphicon-warning-sign warning status glyphicon-remove error status

9. Size Control

// From large to small 

Note: You can also set the parent elements form-group-lg and form-group-sm to adjust them.

Ii. Images

Bootstrap provides a variety of image styles for developers.

1. Image shape

// Three shapes // response-Type Image

The above is the Bootstrap form and image content that I will introduce to you. I hope it will help you!