bootstrap 图片设计,折叠菜单,选项卡

最新推荐文章于 2023-08-22 22:27:05 发布

qq_26495107

最新推荐文章于 2023-08-22 22:27:05 发布

阅读量628

点赞数

分类专栏： bootstrap表单文章标签： bootstrap 响应式

本文链接：https://blog.csdn.net/qq_26495107/article/details/71108021

版权

bootstrap表单专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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）

<!-- 折叠 菜单 start-->
<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>
<!-- 折叠 菜单 end-->

选项卡
<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>