First of all, I would like to thank all my friends for their support. I will continue to update my study summary on bootstrap. If there is something wrong with the writing, please correct me. Regarding the previous article, fixed layout and streaming layout are very important. If you are not clear about it, you can take a look at what I wrote: Bootstrap study notes: css style design (1)
This time, let’s take a look at some specific and key classes about styles in bootstrap and how to use these classes, the differences between classes, and some related classes involved, which are explained when listing them.
1. Form
1.form-control class: The width of the <input><select><textarea> tags containing this class will become width:100%, and in the form, the control is usually included in the form-group with the label tag.
<form role="form"> <!-- All input, textarea, select elements with form-control class set will be defaulted to width:100% --> <div> --form-group: Generally speaking, labels and space wrapping are used in form-group <label for="exampleInputEmail">Email address</label> <input type="email" id="exampleInputEmail" placeholder="input"> </div> <div> <label for="exampleInputEmail">Email name</label> <textarea>11111</textarea> </div> <div> <label for="select">select form</label> <select> <option>111</option> <option>222</option> </select> </div></form>
According to the above code, we can look at it one by one. Add form-inline class (put the control in one line) | form-horizontal class (the label is on the left and the control is on the right), which uses the help of the label.
<!-- form-inline class makes the form horizontally present --><form> --Secondly there are check-inline, radio-inline, etc. <div> <label for="exampleInputAmount">Amount</label> <div> --input-group: input group <div>@</div> --addon: refers to the added text or button <input type="text" id="exampleInputAmount" placeholder="Amount"> <div>@</div> </div> </div> <button type="submit">search</button></form>
The effects are as follows:
If not added, the button will be squeezed to the next line. No more pictures are posted here, you can paste code and test it yourself.
<!--Horily arranged form control-label: means that the text is right-aligned--><form > <div> <label for="inputEmail">Email:</label> <div> <input type="email" id="inputEmail" placeholder="email"> </div> </div> <div> <label for="inputPassword">Password:</label> <div> <input type="password" id="inputPassword" placeholder="password"> </div> </div> </div> </form>
The effects are as follows:
( Note: The input text box here should account for 5/6, I customized its width to 20%)
Here, regarding form-horizontal, it should be carried out in conjunction with bootstrap's grid system.
Using the class name "form-horizontal" on the <form> element has the following functions:
1: Set the padding and margin values of the form control. The above code can be seen in the debug console, padding-left:50px.
2: Change the expression of "form-group", similar to the "row" of the grid system.
2. The function of label
<label for="hello1">hello</label><input type="text" id="hello"><br> ---The blue halo is generated<label for="1111">hello</label><input type="text" id="jiang"><br> ---The id does not correspond to it, there is no response. Only when the mouse is placed on the control will there be a blue halo
Based on the above code, see: the for attribute in label should correspond to the id in the control. Function: Ensure that when the mouse is placed on the label, the corresponding control will produce a blue halo.
3. Role's role
Do you find it strange why you need to add role when writing forms or some controls?
Function: Ensure that the screen reading software can be recognized. Screen reading software is a software that helps mentally retarded people access the Internet. It conveys pictures, text, etc. to mentally retarded people in the form of voice. Therefore, in order to ensure that screen reading software can be recognized, there are usually no semantic tags or tags with special functions that must be written on it. for example:
<a href="#" role="button">link</a><!-- If link a is used as a button and is used to trigger certain functions on the current page, rather than connecting to other pages or the rest of the current page, be sure to set role="button" --> Originally, the a tag represents a link, but it is used here as a button. The screen reading software cannot recognize it, so role="button" needs to be added to let the screen reading software know that this is a button button.
4. What is the difference between label, aria-label, aria-labeled?
<div> <input type="text" id="idCard" aria-label="ID card"> <p>Example block-level </p> --help-block: text used to prompt explanation</div> <div> <label for="idCard">ID card</label> <input type="text" id="idCard" > <p>Example block-level </p> </div>
The effects are as follows:
The former does not have the word "id card" visual, both of which are for the convenience of screen reading software to identify. It's just that aria-label is hidden.
Let’s take a look at how to use aria-labelled. Usually, when the label text already exists in a certain element, use aria-labelled, and its value is the id of all read elements. Let’s take a look at the following subs:
<div> <button type="button" id="dropdownMenu1" data-toggle="dropdown"> Select the following options <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">1111</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">22222</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">22222</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">33333</a> </li> </ul> </div>
At this time, the ul contains li and is controlled in the button, so it is more appropriate to use aria-labelledby at this time. Simply put, the scope of use between the three is different, and the basic functions are the same, all for the convenience of recognition of screen reading software. When it comes to hidden classes, we need to mention the sr-only class. Let's take a look.
<label for="inputEmail">Email:</label>
<label for="inputEmail">Email:</label>
The effect at this time is: the text above is hidden, and only this difference will remain unchanged.
5. Disabled class
In the form, you need to pay attention to this class, let’s compare it here.
<!-- Introduce a form with fieldset, function: include the form in a block --><form role="form"> <fieldset disabled> <div> <label for="disabledTextInput">Disabled input box</label> <input type="text" id="disabledTextInput" placeholder="disabled"> </div> <div> <label for="disabledSelect">Disabled drop-down box</label> <select id="disabledSelect"> <option>Disable unselectable</option> </select> </div> <div> <label> <input type="checkbox"> Disable Cannot Select</label> </div> <button type="submit">Submit</button> </fieldset></form>
If you add a disabled class to the fileset, the disabled form will only be disabled for button select input, etc., and will not work for other items legend attributes. In comparison, add legend attribute
<!-- Added lengthed property--><form role="form"> <fieldset disabled> <legend><input type="text" placeholder="color becomes grayed out, but not disabled" ></legend>--Here the mouse can be placed in the input box<div> <label for="disabledTextInput">Disabled input box</label> <input type="text" id="disabledTextInput" placeholder="disabled"> </div> <div> <label for="disabledSelect">Disabled drop-down box</label> <select id="disabledSelect"> <option>Not selectable</option> </select> </div> <div> <label> <input type="checkbox"> Unable to select</label> </div> <button type="submit">Submit</button> </fieldset></form> <!-- Disabled forms are only disabled for button select input, etc., and do not work for other items legend-->
6.data-toggle data-target data-spy attribute
html5 allows developers to freely add attributes to their tags, and this custom attribute generally starts with "data-".
data-toggle: indicates data interaction. Click button in the above column to switch to the drop-down menu.
data-spy indicates: monitoring
data-traget: target.
This involves events in JS, and I won’t explain them in detail. I will take a look at these issues when I enter the js learning in bootstrap. There are still many things involved in the form, and there are almost so many summaries. There are also additions. Please leave me a message below.
2. Button class
This is not difficult, just remember the attribute class, it is easy to understand.
<a href="#" role="button">link</a><button type="submit" disabled="disabled">default</button><button type="submit">primary</button><button type="submit">success</button><button type="submit">info</button> --btn-block: stretch it to 100% of the parent element<button type="submit">warning</button><input type="button" value="Input"><input type="button" value="submit">
The effects are as follows:
3. Picture category
<!-- center the picture center-block: center the content to display img-rounded: with rounded corners img-circle: ring img-thumbnail: add an outer border to the picture -->
<img src="111.png">
<img src="111.png">
<img src="111.png">
The effects are as follows:
To sum up, I personally feel that the role of forms is still very important. It is easier to explain some other basic categories here. The next article will be transferred to the learning of css component: Bootstrap learning notes CSS component (3)
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.