bootstrap 輔助類使用

顯示和隱藏

<div class="show">show</div>
<div class="hidden">hidden</div>

響應(yīng)式

 visible-*-*//滿足條件時(shí)顯示
    - lg md sm xs
    - block inline inline-block
注意： lg,md,sm,xs表明必須滿足屏幕大小才顯示,
      比如說(shuō)md代表的是大于992 小于1200 ;超過(guò)1200 或 小于992都不會(huì)顯示
hidden-*//滿足條件時(shí)隱藏

快速浮動(dòng)

<div class="pull-left">左邊</div>
<div class="pull-right">右邊</div>

trigger 主動(dòng)觸發(fā)事件

簡(jiǎn)單應(yīng)用

<ul class="list-group"></ul>
        <div class="container-fluid">
            <div class="row">
                <div class="col col-md-6">
                    <input type="text" class="form-control">
                </div>
                <div class="col col-md-6">
                    <button class="btn btn-default">提交</button>
                </div>
            </div>
            
            
        </div>
        <script src="../jquery-2.2.3.js"></script>
        <script src='../bootstrap-3.3.0/dist/js/bootstrap.js'></script>
    <!--    <script>
            $('div').on('click',function(){
                alert(11111)
            })
            $('div').trigger('click');
        </script>    -->
        <script>
            $('button').on('click',function(){
                var val=$('input').val();
                $('ul').append('<li class="list-group-item">'+val+'</li>')
                $('input').val('');
            })
            $('input').on('keydown',function(e){
                if(e.keyCode==13){//當(dāng)按下回車(chē)時(shí)主動(dòng)觸發(fā)button的點(diǎn)擊事件
                    $('button').trigger('click')//后面跟的是需要觸發(fā)的事件
                }
            })
        </script>

自定義事件

<script>
$('div').on('gr', function(){//事件名可以自定義
    alert('show.bs.dropdown');
});

$('div').on('click', function(){//當(dāng)點(diǎn)擊div時(shí)自動(dòng)觸發(fā)gr事件
    $('div').trigger('gr');
})