class="img-responsive"
class="img-circle "
class="img-thumbnail" class="thumbnail"
col-lg一般用于大屏设备(min-width:1200px)
col-md一般用于中屏设备(min-width:992px)
col-sm 平板 一般用于小屏设备(min-width:768px)
col-xs 手机 用于超小型设备(max-width:768px)
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<a href="#shouqi" data-toggle="collapse">点我可收起</a>
</div>
<div class="panel-collapse collapse in" id="shouqi">
<div class="panel-body">
wwwwwwwwwwwwwwwwwww
aaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#shouqi").collapse("hide");
$("#shouqi").on("show.bs.collapse",function(){
alert('即将显示');
})
$("#shouqi").on("shown.bs.collapse",function(){
alert("已经显示");
})
})
</script>
选项卡
<div class="zhedie-panel">
<ul class="nav nav-pills">
<li class="active"><a href="#cseka" >色卡</a></li>
<li><a href="#cchanpin">产品</a></li>
<li><a href="#cchangjing">场景</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id='cseka'>色卡</div>
<div class="tab-pane" id='cchanpin'>产品</div>
<div class="tab-pane" id='cchangjing'>场景</div>
</div>
</div>
<script>
$(".nav-pills a").click(function(){
$(this).tab('show');
})
</script>