CSS style design of bootstrap learning Notes (2) _javascript tips

First of all, I am very grateful to all my friends for their support, about Bootstrap learning summary, I will continue to update, if there are written wrong places, trouble you to correct me out ha. On the previous article, fixed layout and streaming layout is critical, if not too clear to see what I wrote: Bootstrap learning notes CSS style design (1)

This time we'll look at some of the specific key classes in the bootstrap and how to use them, the difference between classes and classes, and some related classes, for example.

First, the form

1.form-control class: The <input><select><textarea> label width that contains this class will become width:100%, In a form, it is usually included with the label label in the Form-group.

<form role= "Form" >
 <!--all input,textarea,select with Form-control classes set, the elements will default to width:100%-->
 < Div class= "Form-group" >--form-group: Generally speaking labels and space parcels are used in Form-group <label for=
 "Exampleinputemail" >email address</label>
 <input type= "email" class= "Form-control" id= "exampleinputemail" placeholder= "input" >
 </div>


 <div class= "Form-group" >
 <label for= "Exampleinputemail" >email name</ label>
 <textarea class= "Form-control" >11111</textarea>
 </div>


 <div class= " Form-group ">
 <label for=" select ">select form</label> <select class=
 " Form-control ">
 <option>111</option>
 <option>222</option>
 </select>
 </ Div>
</form>

According to the above code to extend a different class, we line of view.  Add a Form-inline class to the form (put the control on one line) | The Form-horizontal class (the label is left, the control is on the right), and the latter is tagged.

<!--Form-inline class renders the form horizontally-->
<form class= "Form-inline" >--second, Check-inline,radio-inline etc
 < Div class= "Form-group" >
 <label class= "src-only" for= "Exampleinputamount" >Amount</label>
 <div class= "Input-group" >--input-group: Input group
 <div class= "Input-group-addon" >@</div>--addon: Refers to the added text or button
 <input type= "text" class= "Form-control" id= "Exampleinputamount" placeholder= "Amount" >
 < Div class= "Input-group-addon" >@</div>
 </div>
 </div>
 <button type= "Submit" class= "Btn btn-primary" >search</button>

</form>

The effect is as follows:

If not, the button will be squeezed to the next line. This no longer maps, you can paste code test.

<!--horizontal form Control-label: Indicates text is aligned-->
<form class= "Form-horizontal" >
 <div class= " Form-group ">
 <label for=" Inputemail "class=" col-sm-2 control-label ">Email:</label>
 <div class= "col-sm-10" >
 <input type= "email" class= "Form-control" id= "Inputemail" placeholder= "email" >
 </div>
 </div>
 <div class= "Form-group" >
 <label for= "Inputpassword" class= " Col-sm-2 Control-label ">Password:</label>
 <div class=" col-sm-10 ">
 <input type=" Password "class=" Form-control "id=" Inputpassword "placeholder=" password ">
 </div>
 </div>
</form>

The effect is as follows:

( Note: The input text box here should be 5/6, I've customized it to 20%)

Here about Form-horizontal, to cooperate with the bootstrap grid system.

The use of the class name "Form-horizontal" on <form> elements mainly has the following functions:
1: Set the padding and margin values for the form control. The above code can be seen in the debug console for padding-left:50px.
2: Change the expression of "Form-group", similar to the "row" of grid system.

The role of 2.label

<label for= "Hello1" >hello</label><input type= "text" id= "Hello" ><br> 

 ---produce blue glow
<label for= "1111" >hello</label><input type= "text" id= "jiang" ><br> 

---ID does not correspond, no response, Blue Glow Only when the mouse is placed on the control

In combination with the above code, the for attribute in the 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.

The role of 3.role

Is it strange why you add role when you write a form or some control?

Function: To ensure that the reading screen software can be recognized. Read screen software that is to help people with intellectual disabilities on the Internet, the picture, text and so on in the form of voice to the mentally handicapped, so in order to ensure that the reading screen software can be identified, usually no semantic tags, or special features of the label to write it. Like what:

<a class= "btn Btn-default" href= "#" role= "button" >link</a>
<!--If link A is used as a button and is used for the current page to trigger certain features,

Instead of connecting to other pages or the rest of the current page, be sure to set the role= "button"-->
originally a tag is a link, but here as a button to use, read-screen software is not recognized,

so need to add role= "button", Let the read-screen software know that this is a button.

4.label,aria-label,aria-labelled the difference?

 <div class= "Form-group" >
 
 <input type= "text" id= "Idcard" aria-label= "id" >
 <p class= " Help-block ">example block-level </p>--help-block: Text to prompt interpretation
 </div> <div class=
 " Form-group ">
 <label for=" Idcard "> Identity card </label>
 <input type=" text "id=" Idcard ">
 <p class= "Help-block" >example block-level </p>
 </div>

The effect is as follows:

The former does not appear in the visual "identity card" words, both are to facilitate the reading screen software identified. It's just that Aria-label is hidden.

Let's look at how aria-labelled is used, usually when the label text already exists in an element, use aria-labelled, its value is the ID of all read elements, and look at the following children:

<div class= "dropdown" > 
 <button type= "button" class= "btn dropdown-toggle" id= "dropdownMenu1" Data-toggle = "dropdown" > 

 Select the following options 
 <span class= "caret" 
 ></span> 
 </button> <ul class= " Dropdown-menu "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= "#" >33333</a> 
 </li> 
 </ul> 
< /div> 

At this time the UL contains Li, and is controlled in the button, so at this time with aria-labelledby more appropriate. In short, the three, only the scope of use is not the same, the basic functions are the same, are to facilitate the identification of screen-reading software. When it comes to hidden classes, mention the Sr-only class. Let's take a look.

<label for= "Inputemail" class= "col-sm-2 control-label sr-only" >Email:</label>
<label for= "Inputemail" class= "col-sm-2 Control-label" >Email:</label>
At this point the effect is: The above text is hidden, only this difference, other basic functions unchanged.

5.disabled class

In the form, this class should be noted, and here we compare.

<!--introduce fieldset forms to include forms in a block-->
<form role= "form" >
 <fieldset disabled> <div
 class= "Form-group" >
 <label for= "disabledtextinput" > Disabled input box </label>
 <input type= "text" ID = "Disabledtextinput" class= "Form-control" placeholder= "no input" >
 </div>
 <div class= "Form-group" >
 <label for= "disabledselect" > Disable dropdown box </label>
 <select id= "Disabledselect" Form-control ">
 <option> Disable not selectable </option>
 </select>
 </div>
 <div class= "checkbox" >
 <label>
 <input type= "checkbox" > Disable cannot select
 </label>
 </ div>
 <button type= "Submit" class= "BTN btn-primary" > Submit </button>
 </fieldset>
</form> 

If you add disabled classes to Fileset, disabled forms are disabled only for button select input, but not for other items legend properties. In contrast, add the Legend property

 <!--plus lenged attribute--> <form role= "form" > <fieldset disabled> <lege Nd><input type= "text" class= "Form-control" placeholder= "color dimmed, but not disabled" ></legend>--here the mouse can be placed in the input box <div class= "Form-group" > <label for= "disabledtextinput" > Disabled input box </label> <input type= "text" id= " Disabledtextinput "class=" Form-control "placeholder=" no input "> </div> <div class=" Form-group "> <label For= "Disabledselect" > Disabled drop-down box </label> <select id= "Disabledselect" class= "Form-control" > <option > Not selectable </option> </select> </div> <div class= "checkbox" > <label> <input type= "ch Eckbox "> cannot select </label> </div> <button type=" Submit "class=" BTN btn-primary "> Submit </button> &L T;/fieldset> </form> <!--disabled forms that are disabled only for button select input, but not for other items legend--> 

6.data-toggle Data-target Data-spy Properties

HTML5 allows developers to freely add attributes to their tags, which generally begin with "data-".

Data-toggle: Data interaction, Liezi Click button above, you can switch to the Pull-down menu.

Data-spy says: monitoring

Data-traget: Target.

This involves JS in the event, no longer detailed, wait until into the bootstrap in the JS study to look at these problems. The form involves a lot of things, summed up almost so much, there are additional, trouble everyone in the following message to me.

Two, Button class

This is no difficulty, remember attribute class on the line, very good understanding.

<a class= "btn Btn-default" href= "#" role= "button" >link</a>
<button class= "btn btn-default btn-lg" Type= "Submit" disabled= "disabled" >default</button> <button class= "btn btn-primary" type= "
submit" >primary</button>
<button class= "btn btn-success" type= "Submit" >success</button>
<button class= "btn btn-info btn-block" type= "Submit" >info</button>--btn-block: Stretch it to the parent element's 100%
< Button class= "btn btn-warning" type= "Submit" >warning</button>
<input class= "btn Btn-danger Active" Type= "button" value= "Input" >
<input class= "btn btn-link" type= "button" value= "Submit" >

The effect is as follows:

Third, the picture class

<!--Center the picture center-block: Center The content img-rounded: with rounded corners img-circle: Ring img-thumbnail: Add an outline to the picture-->



The effect is as follows:

Summing up a sentence, personal feeling, the role of the form is still very important, other basic classes, here no longer explained, are relatively easy. The next one will be transferred to CSS components: Bootstrap CSS Components for learning notes (3)

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.