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');
})
