Bootstrap Learning Notes 3:bootstrap common components

1. Icons:

    
 

 

 
2. Button:

    
 

 

 

 

 
3, Button size: 

 
    
 

 
4. Display the icon in the button: 

 
    
 

 

 

 
5. Drop-down menu: 
<div class= "dropdown" >
        <button class= "btn btn-primary dropdown-toggle" type= "button" id= "DropdownMenu1" Data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "true" >
            <span id= "Dropdown-title" > Menu one </ span>
            <span class= "caret" ></span>
        </button>
        <ul class= "Dropdown-menu" aria-labelledby= "dropdownMenu1" >
            <li><a href= "#" class= "Dropdown-item" > Menu one </a></li >
            <li><a href= "#" class= "Dropdown-item" > Menu two </a></li>
            <li><a href= "#" class= "Dropdown-item" > Menu three </a></li>
        </ul>
    </div>
 

Interaction: Listen for each menu click event, click on the title to display the current menu
        $ ('. Dropdown-item '). Click (function () {
            $ (' #dropdown-title '). Text ($ (this). text ());
        });
 

 

 

 
6. Input box: 

 
    
 

 

 

 
7. Navigation bar: 
     

 

 
8. Form: 
    
 

 

 

 
9. Warning Box: 
    
 

 

 

 
10. Progress bar: 
    
 

 

 
11. Align RightIn general, we use float:right to achieve the right floating function, but the right side of this involves the removal of floating, adjust the right margin, margin, and so on, in bootstrap of course to use his method, Just add a class:pull-right to fix it:

 
<span style= "font-size:30px;" >item1</span>
<div class= "Pull-right" >item2</div>
 

This first line is to be on a horizontal line with the second row, so the first line cannot be used for  
12, the Use of tabtab can be conveniently in a page to switch the contents of the Display, Bootstrap tab use is very simple:
    <ul id= "Mytab" class= "Nav nav-tabs" >
        <li role= "presentation" class= "active" ><a href= "#tab1" data-toggle= "tab" >tab1</a></li>
        <li role= "presentation" ><a href= "#tab2" data-toggle= " Tab ">tab2</a></li>
        <li role=" presentation "><a href=" #tab3 "data-toggle=" tab ">TAB3 </a></li>
    </ul>
    <span> This is the Baby Admin page </span>
    <div id= "Mytabcontent" class= "Tab-content" >
        <div id= "tab1" class= "Tab-pane active" >
            <p> this is tab1</p>
        </div >
        <div id= "tab2" class= "Tab-pane" >
            <p> this is tab2</p>
        </div>
        <div ID = "Tab3" class= "Tab-pane" >
            <p> this is tab3</p>
        </div>
    </div>
 

In JS can easily capture tab switch, and make corresponding changes, such as when the second page is loading some data, then I wait until the second page to switch to load:
        $ (' a[data-toggle= ' tab "]). On (' Shown.bs.tab ', function (e) {
            var activetab = $ (e.target). text ();
            alert (activetab);
        });
 

 
13, Bootstrap-tableA plug-in project that can request JSON data and generate tables via AJAX address: https://github.com/wenzhixin/bootstrap-table

 

 

 
14. Notification message Component 
<1> Download Address:Https://github.com/CodeSeven/toastr
<2> Documentation:Http://www.ithao123.cn/content-2414918.html
<3> Introduction:Find the Build folder in the downloaded file, and introduce the toastr.min.js and toastr.css inside.
<4> use:This message is displayed by default in the upper-right corner of the browser, which we can change to the top center display in the initialization:
        Toastr.options.positionClass = ' toast-top-center ';//Display location
 

The settings for the location display have the following options:
Toast-top-right
toast-botton-right
toash-bottom-left
toast-top-left
toast-top-full-width This is at the top of the page, with the width covered across the screen
toast-bottom-full-width
toast-top-center top Middle
toast-bottom-center
 

And then the call is done when we need to show it:
Toastr.success (' Submit data success ');
Toastr.error (' error ');
Toastr.warning (' Only select one row for editing ');
Toastr.info (' info ');
 

 

 
15. Ajax Requests 

Button:
                <button class= "btn btn-link" >
                    Change Password
                </button>
 

Js:
    $ ('. Btn '). On (' click ', Function ()} {
        $.post (' xxx ')
            . Done (function (result) {
                var json = ajaxresultshow ( result);
                if (Json.result_code = = 0)
                    $ (' #pwdId '). Text (json.data1);
            })
            . Fail (function () {
            })
            . Always (function () {
            });
    });
 
16, Bootstrap-switch(1) This component does not belong to bootstrap, he needs to introduce Bootstrap-switch.min.js and BOOTSTRAP-SWITCH.MIN.CSS separately; (2) Download address: http://www.bootcss.com/p/ bootstrap-switch/(3) How to: Add a frame:
<link href= "Bootstrap.css" rel= "stylesheet" >
<link href= "bootstrap-switch.css" rel= "stylesheet" >
<script src= "jquery.js" ></script>
<script src= "Bootstrap-switch.js" ></script>
To add a component in HTML:
    <input type= "checkbox" Name= "My-checkbox" checked>
Initialize in JS:
        $ ("[name= ' My-checkbox ']"). Bootstrapswitch ();
The state can be set directly in the initialization:

 
    $ ("#isOpenCheckbox"). Bootstrapswitch (' state ', false);
Toggle Status:

 
    $ (' #isOpenCheckbox '). Bootstrapswitch (' togglestate ');
To listen for switchover events:
   $ (' #isOpenCheckbox '). On (' Switchchange.bootstrapswitch ', function (event,state) {
            alert (state);//true | | false
        });
 

 

 

 

 

 

 

 

 

 

 

 

This article references: http://www.cnblogs.com/fnng/p/4446047.html here to express my thanks.