zoukankan      html  css  js  c++  java
  • bootstrap-面板、modal

    面板:

    <!--
        panel                      面板
        panel-heading            面板头部
        panel-title                面板标题样式
        panel-body                面板内容
    -->
    <div class="container">
        <div class="row">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">W3cSchool</h3>
                </div> 
                <div class="panel-body">
                    javajavajavajavajavajava
                    javajavajavajavajavajava
                </div>
    
                <!-- 面板和列表组结合  -->
                <ul class="list-group">
                    <li class="list-group-item" >html</li>
                    <li class="list-group-item" >css</li>
                    <li class="list-group-item" >java</li>
                </ul>
            </div>
        </div>
    </div>

    效果图:

    modal:

    <body>
    <div class="container">
        <div class="row">
            <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">弹出</button>
        </div>
    </div>
    <div class="modal fade" id="mymodal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    修改人员信息
                </div>    
                <div class="modal-body">
                    <p>javajavajavajavajavajava</p>
                    <p>javajavajavajavajavajava</p>
                </div>    
                <div class="modal-footer">
                    <button class="btn btn-primary">确定</button>
                    <button class="btn btn-danger" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="jquery/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
    </body>

    效果:

    折叠的面板:

    <!-- 简单的带折叠的面板-->
    <div class="panel-group" id="panel_group">
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-target="#collapse1" data-parent="#panel_group">
                <h4 class="panel-title">清洁套装</h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">
                    aaaa
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-target="#collapse2" data-parent="#panel_group">
                <h4 class="panel-title">卡壳被子</h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                    bbbbb
                </div>
            </div>
        </div>
    </div>
  • 相关阅读:
    js中的this
    js中的call和apply
    自定义ListView无法响应点击事件
    Listview滑动超出显示区域时getChildAt(arg2)异常错误
    cocos2d-x在eclipse上搭建开发环境
    阿里云服务器CentOS 5.7(64位)安装配置LAMP服务器(Apache+PHP5+MySQL)
    如何在eclipse模拟器上运行下载好的apk程序
    百度RSS整理
    vtigercrm学习(二)
    Android桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果
  • 原文地址:https://www.cnblogs.com/tenWood/p/6139781.html
Copyright © 2011-2022 走看看