bootstrap 輔助類使用
顯示和隱藏
<div class="show">show</div>
<div class="hidden">hidden</div>
響應(yīng)式
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 主動觸發(fā)事件
簡單應(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){//當按下回車時主動觸發(fā)button的點擊事件
$('button').trigger('click')//后面跟的是需要觸發(fā)的事件
}
})
</script>
自定義事件
<script>
$('div').on('gr', function(){//事件名可以自定義
alert('show.bs.dropdown');
});
$('div').on('click', function(){//當點擊div時自動觸發(fā)gr事件
$('div').trigger('gr');
})
