Bootstrap layout component Application examples explain _javascript skills

This article introduces the application practice of bootstrap layout component, and shares it for everyone's reference, the specific contents are as follows

Examples of application of font icons

<button type= "button" class= "Btn Btn-default" >
 <span class= "Glyphicon glyphicon-sort-by-attributes" ></span>
</button>

Drop-down Menu Example

<div class= "dropdown" >
 <button type= "button" class= "btn dropdown-toggle" id= "dropdownMenu1 
 " data-toggle= "dropdown" >
 theme
 <span class= "caret" ></span>
 </button>
 <ul class= "Dropdown-menu" role= "menu" aria-labelledby= "dropdownMenu1" >
 <li role= "Presentation" Dropdown-header "> dropdown menu title </li>
 <li role=" Presentation "> <a role=" MenuItem "
 tabindex="-1 " href= "#" > Options 1</a>
 </li>
 <li role= "Presentation" >
 <a role= "MenuItem" tabindex= "-1" href= "#" > Options 2</a>
 </li>
 <li role= "Presentation" > 
 <a role= " MenuItem "tabindex="-1 "href=" # "> Options 3</a>
 </li> <li role=" presentation "class=" divider "
 ></li><!--Split Line-->
 <li role= "Presentation" > <a role= "MenuItem" tabindex= "
 -1" href= "#" > Separate links </a>
 </li>
 </ul>
</div>

Buttons toolbar and button group

<div class= "Btn-toolbar" role= "toolbar" ><!--used to nest btn-group--> <div class= "Btn-group btn-group-lg" > <!--BTN-GROUP-LG is used to control the size of the button group, bt-group-vertical is a vertical button group, Bt-group can be nested bt-group--> <button type= "button" class = "Btn Btn-default" >button 1</button> <button type= "button" class= "btn Btn-default" >button 2</button  > <button type= "button" class= "btn btn-default" >button 3</button> </div> <div class= "Btn-group Btn-group-sm "> <button type=" button "class=" btn btn-default ">button 4</button> <button-type=" button "Class=" btn btn-default ">button 5</button> <button type=" button "class=" btn Btn-default ">Button 6</ button> </div> <div class= "Btn-group btn-group-xs" > <button type= "button" class= "Btn Btn-default" ; Button 7</button> <button type= button "class=" btn btn-default ">button 8</button> <button type=" Button "class=" btn Btn-default ">button 9</Button> </div> </div> 

Button drop down menu

 <div class= "Btn-group" ><!--Add Class. Dropup can become button pull menu--> <button type=
 "button" class= btn Btn-default Dropdown-toggle " 
 data-toggle=" dropdown > <!--plus class. Btn-xs things like that. Change button size-->
 default <span class= "Caret" ></span>
 </button>
 <ul class= "Dropdown-menu" role= "menu" >
 <li><a href= " # "> Function </a></li>
 <li><a href=" # "> Another feature </a></li>
 <li><a href= "#" > Other </a></li>
 <li class= "divider" ></li><!--split line-->
 <li> <a href= "#" > Separate links </a></li>
 </ul>
 </div>

Group of input boxes in a form

<form class= "Bs-example bs-example-form" role= "form" >
 <div class= "Input-group input-group-lg" ><! --INPUT-GROUP-LG Resize the input box group size-->
 <input type= "text" class= "Form-control" > <span class= "
 Input-group-addon ">.00</span>
 </div>
 <br>
 <div class=" Input-group ">
 <span class= "Input-group-addon" >
 <input type= checkbox ><!--check box and radio box can be applied to the input box group-->
 </ span>
 <input type= "text" class= "Form-control" >
 </div>
 <br>
 <div class = "Input-group" >
 <input type= "text" class= "Form-control" >
 <span class= "INPUT-GROUP-BTN" > <!--buttons can also be applied to the input box group note that the class here becomes input-group-btn and can even be added to the front button pull-down menu-->
 <button class= "btn btn-default" type= " Button ">
 go!
 </button>
 </span>
 </div>
 </form>

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is about the bootstrap Layout component application part of the content, I hope to help you learn, continue to pay attention to.