Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.
Key points for learning:
1. Form
2. Pictures
In this lesson, we mainly learn about Bootstrap forms and image functions, and display various rich effects through built-in CSS definition.
one. Form
Bootstrap provides some rich form styles for developers to use.
1. Basic format
//Implement basic form style<form> <div> <label>Email</label> <input type="email" placeholder="Please enter your email"> </div> <div> <label>Password</label> <input type="password" placeholder="Please enter your password"> </div></form>
Note: The correct style can only be given if the type type of the input box is correctly set. 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 be left aligned and floated, and behave as an inline-block inline block structure<form>
Note: When it is less than 768px, the exclusive style will be restored.
3. Form grouping
//Add fragments before and after <div> <div>￥</div> <input type="text"> <div>.00</div></div>
4. Horizontal arrangement
// Keep the elements in the form horizontally arranged <form><div><label>Email</label><div><input type="email" placeholder="Please enter your email"></div></div></form>
Note: The col-sm raster system is used here, and the following chapters will focus on explaining it, while the control-label represents synchronization with the parent element style.
5. Check boxes and radio boxes
//Set the checkbox, on a line <div><label> <input type="checkbox">Sports</label></div><div><label> <input type="checkbox">Music</label></div> //Set the disabled checkbox <div><label> <input type="checkbox" disabled>Music</label></div> //Set the checkbox displayed inline with a line <label> <input type="checkbox">Sports</label><label> <input type="checkbox" disabled>Music</label> //Set the radio box <div><label> <input type="radio" name="sex" disabled>Male</label></div>
6. Drop-down list
//Set the drop-down list <select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
7. Verify status
//Set to error status <div>
Note: There are other statuses as follows:
Style description has-error error status has-success success status has-warning warning status //label tag synchronization corresponding status <label>Input with success</label>
8. Add extra icons
// Built-in text icon on the right side of the text box <div><label>Email</label><input type="email"><span></span></div>
Note: In addition to glyphicon-ok, there are several tables below:
Style description glyphicon-ok success status glyphicon-warning-sign warning status glyphicon-remove error status
9. Control the size
//From large to small<input type="password"><input type="password"><input type="password">
Note: You can also set the parent elements form-group-lg and form-group-sm to adjust.
two. picture
Bootstrap provides some rich picture styles for developers to use.
1. Image shape
//Three shapes<img src="img/pic.png"><img src="img/pic.png"><img src="img/pic.png"> //Responsive picture<img src="img/pic.png">
The above is the content related to Bootstrap forms and pictures introduced to you by the editor. I hope it will be helpful to everyone!