12.21bootstrap 辅助类使用

bootstrap 辅助类使用

显示和隐藏

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

响应式

 visible-*-*//满足条件时显示
    - lg md sm xs
    - block inline inline-block
注意： lg,md,sm,xs表明必须满足屏幕大小才显示,
      比如说md代表的是大于992 小于1200 ;超过1200 或 小于992都不会显示
hidden-*//满足条件时隐藏

快速浮动

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

trigger 主动触发事件

简单应用

<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){//当按下回车时主动触发button的点击事件
                    $('button').trigger('click')//后面跟的是需要触发的事件
                }
            })
        </script>

自定义事件

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

$('div').on('click', function(){//当点击div时自动触发gr事件
    $('div').trigger('gr');
})