Application Example of the Bootstarp layout component and bootstarp example

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.