Application Example of the Bootstarp layout component and bootstarp example

Application Example of the Bootstarp layout component and bootstarp example

This article introduces the application practices of the Bootstarp layout component for your reference. The details are as follows:

Application Example 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"> topic <span class = "caret"> </span> </button> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1"> <li role =" presentation "class =" dropdown-header "> drop-down menu title </li> <li role =" presentation "> <a role =" menuitem "tabindex ="-1 "href = "#"> Option 1 </a> </li> <li role = "presentation"> <a role = "Menuitem" tabindex = "-1" href = "#"> Option 2 </a> </li> <li role = "presentation"> <a role = "menuitem "tabindex ="-1 "href =" # "> Option 3 </a> </li> <li role =" presentation "class =" divider "> </li> <! -- Split line --> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> separated Links </a> </ li> </ul> </div>

Button toolbar and button group

<Div class = "btn-toolbar" role = "toolbar"> <! -- Used to nest btn-group --> <div class = "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 also be nested with bt-group --> <button type = "button" class = "btn-default"> Button 1 </button> <button type = "button" class = "btn-default"> Button 2 </button> <button type = "button" class = "btn-default"> Button 3 </button> </div> <div class = "btn-group-sm"> <button type = "button" class = "btn-default"> Button 4 </button> <button type = "button" class = "btn-default"> Button 5 </button> <button type = "button" class = "btn-default"> Button 6 </ button> </div> <div class = "btn-group-xs"> <button type = "button" class = "btn-default"> Button 7 </button> <button type = "button" class = "btn-default"> Button 8 </button> <button type = "button" class = "btn-default"> Button 9 </button> </div>

Button drop-down menu

<Div class = "btn-group"> <! -- Add class. dropup can be changed to a button to pull the menu --> <button type = "button" class = "btn-default dropdown-toggle" data-toggle = "dropdown"> <! -- Add class. btn-xs and other things change the button size --> default <span class = "caret"> </span> </button> <ul class = "dropdown-menu" role =" menu "> <li> <a href =" # "> function </a> </li> <a href =" # "> another function </a> </li> <a href = "#"> others </a> </li> <li class = "divider"> </li> <! -- Split line --> <li> <a href = "#"> separated link </a> </li> </ul> </div>

Input box group in the form

<Form class = "bs-example-form" role = "form"> <div class = "input-group-lg"> <! -- Input-group-lg adjust the size of the input box group --> <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 boxes and single quotes 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"> <! -- The button can also be applied to the input box group. Note that the class here is changed to input-group-btn, you can even add the preceding button drop-down menu --> <button class = "btn-default" type = "button"> Go! </Button> </span> </div> </form>

The above is part of the application of the Bootstarp layout component. I hope it will help you learn and continue to pay attention to it.

Articles you may be interested in:

• Learning the Bootstrap component drop-down menu
• JS component Bootstrap implementation pop-up box and prompt box effect code
• JS component Bootstrap Table row dragging implementation code
• JS component Bootstrap Table multi-row drag effect implementation code
• Detailed description of JS table component artifact bootstrap table (Basic Edition)
• Simple jqTree encapsulation of Bootstrap tree components
• JS component Form verification artifact BootstrapValidator
• Competition between bootstrap multiselect and JS Components
• JS component Bootstrap Select2 usage
• Two very good Bootstrap Icon selection components