[Bootstrap basic learning] 02 Bootstarp layout component application example, bootstrapbootstarp

[Bootstrap basic learning] 02 Bootstarp layout component application example, bootstrapbootstarp

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>

-- To be continued