zoukankan      html  css  js  c++  java

  • Bootstrap基础7（标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果）

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
            <title>标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果</title>
            <link rel="stylesheet" href="css/bootstrap.css">
            <script src="js/jquery-3.2.1.js"> </script>
            <script src="js/bootstrap.js"></script>
            <script src="js/holder.js"></script>
            <script>
              $(function(){
                p=0;//初始值
                v=5;//每秒加5%
            progressing=setInterval(function(){
                p+=v;//动态增量
                if(p>=100){
                    clearInterval(progressing);
                }
                 $("#progressing").html(p+"%").css({"width":p+"%"});
                },100)
    //        (function () {
    //              var p=10;//初始值
    //              var v=5;//每秒加5%
    //              progressing1=setInterval(function(){
    //                  p+=v;//动态增量
    //                  if(p>=100){
    //                      clearInterval(progressing1);
    //                  }
    //                  $("#progressing1").html(p+"%").css({"width":p+"%"});
    //              },100)
    //          })();
    //          progressing2=setInterval(function(){
    //              p=20;
    //              v=5;
    //              p+=v;//动态增量
    //              if(p>=100){
    //                  clearInterval(progressing2);
    //              }
    //              $("#progressing2").html(p+"%").css({"width":p+"%"});
    //          },100)
              })

            </script>
        </head>
    <body>
    <div class="container">
        <h1 class="page-header">标签、徽章、大屏展播、页面标题、缩略图、进度条、媒体对象、面板、折叠效果</h1>
        </br>
        <h2 class="page-header">标签</h2>
        <h1>守望先锋<span class="label label-success">我是标签</span></h1>
        <hr/>
        <h2 class="page-header">徽章</h2>
        <a href="#">消息<span class="badge">99</span></a><!--徽章-->
        <hr/>
        <ul class="list-group"><!--徽章-列表组-->
            <li class="list-group-item">关注度<span class="badge">20</span></li>
            <li class="list-group-item">关注度<span class="badge">39</span></li>
            <li class="list-group-item">关注度<span class="badge">69</span></li>
            <li class="list-group-item">关注度<span class="badge">99</span></li>
        </ul>
        <hr/>
        <h1>大屏展播</h1>  <!--大屏展播-->
        <div class="jumbotron">
           <p>守望先锋</p>
            <p>虚幻争霸</p>
            <button class="btn btn-primary btn-lg">开始游戏</button>
        </div>
        <hr/>
        <h2 class="page-header">缩略图</h2>
        <!--缩略图示例-->
        <div class="row">
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="img/1.png" alt="">
                    <div class="caption">
                        <p>超级玛丽</p>
                        <button class="btn btn-primary btn-lg">开始游戏</button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="img/2.png" alt="">
                        <div class="caption">
                            <p>超级玛丽</p>
                            <button class="btn btn-primary btn-lg">开始游戏</button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="img/3.png" alt="">
                            <div class="caption">
                                <p>超级玛丽</p>
                                <button class="btn btn-primary btn-lg">开始游戏</button>
                            </div>
                        </div>
                    </div>
                    </br>
        <!--缩略图占位-->
        <h2 class="page-header">缩略图占位</h2>
        <div class="row">
            <div class="col-md-3">
                <img src="holder.js/200x200?random=yes">
            </div>
            <div class="col-md-3">
                <img src="holder.js/200x200?random=yes">
            </div>
            <div class="col-md-3">
                <img src="holder.js/200x200?random=yes">
            </div>
            <div class="col-md-3">
                <img src="holder.js/200x200?random=yes">
            </div>
        </div>
        </br>
        <h2 class="page-header">警告框</h2>
        <!--警告框-->
        <div class="alert alert-success">
            <button class="close" data-dismiss="alert">&timesd;</button>
        </div>

        <!--进度条-->
        <h2 class="page-header">进度条</h2>
        <div class="progress">
            <div class="progress-bar progress-bar-success"style=" 50%"></div>
             <p>50%</p>
        </div>
        <!--进度条的条纹样式-->
        <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped" style=" 70%"></div>
            <p>50%</p>
        </div>
        <!--进度条的条纹堆叠样式-->
        <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped" style=" 20%"></div>
            <div class="progress-bar progress-bar-success progress-bar-striped" style=" 30%"></div>
            <div class="progress-bar progress-bar-danger progress-bar-striped" style=" 50%"></div>
        </div>
        <!--动态进度条-->
        <div class="progress">
            <div id="progressing" class="progress-bar progress-bar-info progress-bar-striped" style=" 0%"></div>
        </div>
       <div class="progress">
            <div id="progressing1" class="progress-bar progress-bar-danger progress-bar-striped" style=" 10%"></div>
       </div>
        <div class="progress">
            <div id="progressing2" class="progress-bar progress-bar-success progress-bar-striped" style=" 20%"></div>
        </div>
           <br/>
        <h2 class="page-header">媒体对象</h2>
      <!--媒体对象-->            
        <div class="media">
            <div class="media-left">
                <a href=""><img src="holder.js/64x64?random=yes" alt="" class="media-object img-circle" /></a>
            </div>
            <div class="media-body">
                <h3 class="media-heading">媒体头部</h3>
                <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
            </div>
    </div>
            <div class="media">
                <div class="media-left">                     <!--media-object -->
                    <a href=""><img src="holder.js/64x64?random=yes" alt="" class="media-object img-circle" /></a>
                </div>
                <div class="media-body">
                    <h3 class="media-heading">媒体头部</h3>
                    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                </div>
            </div>
            <div class="media">
                <div class="media-left">
                    <a href=""><img src="holder.js/64x64?random=yes" alt="" class="media-object img-circle" /></a>
                </div>
                <div class="media-body">
                    <h3 class="media-heading">媒体头部</h3>
                    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
                </div>
            </div>

                    <br/>
          <h2 class="page-header">面板</h2>
           <!--面板-->
        <div class="panel panel-primary">
            <div class="panel-heading">
                Potomac Computer Systems公司。
            </div>
            <div class="panel-body">
                Potomac Computer Systems公司成立，发行ZZT。1992年更名为Epic Mega Games，发行共享游戏，包括《Epic弹球》（Epic Pinball）, 《丛林的吉尔》（Jill of the Jungle ）和《肯的迷宫》（Ken's Labyrinth）。1994年开发游戏《爵士兔》（Jazz Jackrabbit），是首部同时运行于Mac和微软Windows操作系统的游戏之一。
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-condensed">
                 <tr class="success">
                     <th>虚幻争霸</th>
                     <th>守望先锋</th>
                     <th>枪火游侠</th>
                     <th>英雄联盟</th>
                     <th>神之浩劫</th>
                 </tr>
                    <tr class="info">
                        <th>腾讯代理</th>
                        <th>网易代理</th>
                        <th>腾讯代理</th>
                        <th>腾讯代理</th>
                        <th>腾讯代理</th>
                    </tr>
                    <tr class="active">
                        <th>上市：2017年</th>
                        <th>上市：2016年</th>
                        <th>上市：2017年</th>
                        <th>上市：2011年</th>
                        <th>上市：2015年</th>
                    </tr>
                    <tr class="warning">
                        <th>游戏类型：MOBA+FPS</th>
                        <th>游戏类型：FPS</th>
                        <th>游戏类型：FPS</th>
                        <th>游戏类型：MOBA</th>
                        <th>游戏类型：MOBA+FPS</th>
                    </tr>
                    <tr class="danger">
                        <th>制作商：Epic Games</th>
                        <th>制作商：暴雪</th>
                        <th>制作商：Hi-Rez</th>
                        <th>制作商：拳头</th>
                        <th>制作商：Hi-Rez</th>
                    </tr>

                </table>
            </div>
            <div class="panel-footer">腾讯游戏独家代理</div>   <!-- panel-footer 面板脚注 不会继承情景效果的颜色-->
        </div>

          <!--折叠效果-->
         <h2 class="page-header">折叠效果1</h2>
         <button class="btn btn-success collapsed btn-lg"data-toggle="collapse" data-target="#coo">点我</button>
         <div id="coo">
             <p id="well">我是折叠的内容</p>
         </div>
                    <br/>
          <!--折叠效果2-->
          <h2 class="page-header">折叠效果2</h2>
           <div class="panel-group" id="myparent">
           <div class="panel panel-success">
               <div class="panel-heading">    <!--简单的表述，就是你在我不在，点击第某个出现，点击第另一个，第某个隐藏-->
                   <h4 class="panel-title">   <!--data-parent属性把折叠面板的 id 添加到要展开或折叠的组件的链接或按钮上，可以绑定传递多个-->
                       <a href="javascript:;" data-toggle="collapse" data-target="#tab" data-parent="#myparent">腾讯游戏</a>
                   </h4>
                   </div>
               <div class="collapse panel-collapse"id="tab">
               <div class="panel-body">
                   <ul>
                       <li><a href="#">隐藏的栏目</a></li>
                       <li><a href="#">隐藏的栏目</a></li>
                       <li><a href="#">隐藏的栏目</a></li>
                       <li><a href="#">隐藏的栏目</a></li>
                   </ul>
               </div>
               </div>
           </div>
           <div class="panel panel-success">
                   <div class="panel-heading">
                       <h4 class="panel-title">
                           <a href="javascript:;" data-toggle="collapse" data-target="#tab3" data-parent="#myparent">畅游在线</a>
                       </h4>
                   </div>
                   <div class="collapse panel-collapse"id="tab3">
                       <div class="panel-body">
                           <ul>
                               <li><a href="#">隐藏的栏目</a></li>
                               <li><a href="#">隐藏的栏目</a></li>
                               <li><a href="#">隐藏的栏目</a></li>
                               <li><a href="#">隐藏的栏目</a></li>
                           </ul>
                       </div>
                   </div>



               </div>
           <div class="panel panel-info">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a href="javascript:;" data-toggle="collapse" data-target="#tab2" data-parent="#myparent">网易游戏</a>
                            </h4>
                        </div>
                        <div class="collapse panel-collapse"id="tab2">
                            <div class="panel-body">
                                <ul>
                                    <li><a href="#">隐藏的栏目</a></li>
                                    <li><a href="#">隐藏的栏目</a></li>
                                    <li><a href="#">隐藏的栏目</a></li>
                                    <li><a href="#">隐藏的栏目</a></li>
                                </ul>
                            </div>
                        </div>
           </div>
    </body>
    </html>
  • 相关阅读:
    Calibrating & Undistorting with OpenCV in C++ (Oh yeah)
    opencv中标定函数calibrateCamera
    3D 障碍物感知
    在ubuntu18.04一键安装opencv3.4.1的脚本
    How to run yolov5 model using TensorRT.
    花费 3 天时间整理的代码规范示例代码，你确定不进来看看吗？
    企业级自定义表单引擎解决方案（六）--工作流挂接表单
    企业级自定义表单引擎解决方案（五）--自定义表单典型业务案例
    企业级自定义表单引擎解决方案（四）--实体对象模型实现
    企业级自定义表单引擎解决方案（三）--实体对象模型设计
  • 原文地址：https://www.cnblogs.com/YoogaChan/p/6892082.html
Copyright © 2011-2022 走看看