<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>第一个Bootstrap网页</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src="js/jquery-1.11.2.min.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
         <h1>你好，bootstrap世界！</h1>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>第一个Bootstrap网页</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src="js/jquery-1.11.2.min.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
         <h1>你好，bootstrap世界！</h1>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>栅格系统</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <style>
            .row{
                margin-bottom: 5px;
            }
            [class*="col-"]{
                /* background-color: darkgray; */
                border: 1px solid red;
                
            }
        </style>
    </head>
    <body>
         <div class="container">
          <div class="row">
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
          </div>
          <div class="row">
            <div class="col-md-8">.col-md-8</div>
            <div class="col-md-4">.col-md-4</div>
          </div>
          <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
          </div>
          <div class="row">
            <div class="col-md-6">.col-md-6</div>
            <div class="col-md-6">.col-md-6</div>
          </div>
         </div>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>栅格系统--列偏移</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <style>
            .row{
                margin-bottom: 5px;
            }
            [class*="col-"]{
                background-color: darkgray;
                border: 1px solid red;
                
            }
        </style>
    </head>
    <body>
         <div class="container">
            <div class="row">
                <div class="col-md-1">1</div>
                <div class="col-md-3 col-md-offset-5">2</div>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-push-8">1</div>
                <div class="col-md-8 div col-md-pull-4">2</div>
            </div>
         </div>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>栅格系统——列嵌套</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            .content{
                border: 2px solid bisque;
                
            }
        </style>
    </head>
    <body>
        <div class="container">
        <div class="jumbotron">
            <h1>Hello, Bootstrap World!</h1>
            <p>栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局</p>
         </div>
         <div class="row">
             <div class="col-sm-6 content">
                 <h3>left</h3>
                 <p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列</p>
                 <p>good</p>
                 
             </div>
             <div class="col-sm-6">
                 <div class="row">
                    <div class="col-sm-6 content">
                        <h3>right-left</h3>
                        <p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列</p>
                        <p>very good!</p>
                                     
                    </div>
                    <div class="col-sm-6 content">
                        <h3>right-right</h3>
                        <p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列</p>
                        <p>very good!</p>
                    </div>    
                </div>
             </div>
         </div>  
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <title>栅格系统——响应式布局</title>
        </style>
    </head>
    <body>
        <div class="container-fluid login">
         <div class="row">
           <div  class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3">
             <form class="form-horizontal loginForm">
                 <h3 class="form-signin-heading">用户登录</h3>
                 <div class="form-group">
                   <label for="email" class="col-sm-2 col-xs-3 control-label">邮箱</label>
                   <div class="col-sm-8 col-xs-8">
                     <input type="text" class="form-control"  name="email" placeholder="请输入邮箱"> 
                     <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                   </div>
        
                 </div>
                 <div class="form-group">
                   <label for="password" class="col-sm-2 col-xs-3 control-label">密码</label>
                   <div class="col-sm-8 col-xs-8">
                     <input type="password" class="form-control" name="password" placeholder="请输入密码">
                      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                   </div>
                 </div>
                 <div class="form-group">
                   <div class="col-sm-offset-2 col-sm-4 col-xs-4 ">
                     <div class="checkbox">
                       <label>
                       <input type="checkbox">记住我
                       </label>
                     </div>
                   </div>
                   <div class="col-sm-4 col-xs-4 control-label" >
                      <a href="resetPwd.html" id="forget">忘记密码？</a>
                   </div>
        
                 </div>
                 <div class="form-group">
                   <div class="col-sm-12 col-lg-12">
                     <button type="button" class="btn btn-primary btn-block" id="submit">登录</button>
                   </div>
                 </div>
             </form>
             </div>
         </div>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        
        <title>栅格系统——综合实例</title>
        <style>
            aside{ border: 1px solid #CCCCCC;}
            aside ul li{ padding: 5px 5px;}
            .content{border: 1px solid #CCCCCC;}
            h5{ font-weight: bold;
                font-size: 15px;}
            footer{ background-color: darkgrey;
                border-bottom-color: #E7E7E7;
                height: 50px;
                border: 1px solid #E7E7E7;
                border-radius: 4px;
                margin-top: 20px;
                padding: 15px 0px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="  col-sm-7">
                    <img src="img/logo.png" class="img-responsive" />
                </div>
                <div class="col-sm-5">
                    <div class="row">
                        <div class="col-sm-12" style="padding-top:20px;">
                            <input type="text" />
                            <button class="btn">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
            <nav class="navbar navbar-default">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#"></a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">主页</a></li>
                    <li ><a href="#">学校概况</a></li>
                    <li ><a href="#">机构设置</a></li>
                    <li ><a href="#">院系设置</a></li>
                    <li ><a href="#">职能部门</a></li>
                    <li ><a href="#">人才培养</a></li>
                    <li ><a href="#">招生就业</a></li>
                    <li ><a href="#">校园文化</a></li>
                </ul>
            </nav>
            <div class="row">
                <div class="col-sm-2" >
                    <aside>
                        <h5>在线服务</h5>
                        <ul >
                            <li><a href="#">人才招聘</a></li>
                            <li><a href="#">心理咨询</a></li>
                            <li><a href="#">招标采购</a></li>
                            <li><a href="#">校历信息</a></li>
                            <li><a href="#">公开校园</a></li>
                            <li><a href="#">地图形象</a></li>
                            <li><a href="#">宣传片</a></li>
                            <li><a href="#">图书馆</a></li>
                            <li><a href="#">云盘</a></li>
                        </ul>
                    </aside>
                </div>
                <div class="col-sm-8 content" >
                    <h4>校内新闻</h4>
                    <section>
                        <h5>【不忘初心 牢记使命】报道之三十四</h5>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;自学校开展“不忘初心、牢记使命”主题教育以来，校党委高度重视、迅速行动，详细制定教育方案，精心策划活动内容，统筹安排工作进度。在校党委的统一部署下，生工学院围绕实验室管理、产学研协同育人、人才培养等师生关心关注问题，以啃“硬骨头”的勇气、拔“铁钉子”的韧劲，以抓实调查研究为载体，以深入检视问题为契机，以狠抓整改落实为驱动，坚持密切联系实际，坚持问题导向，切实把学习教育、调查研究、检视问题、整改落实贯穿主题教育全过程，取得了实实在在的成效。</p>
                    </section>
                    <br /><br /><br /><br /><br /><br /><br />
                </div>
                <div class="col-sm-2" >
                    <aside>
                        <h5>联系我们</h5>
                        <ul >
                            <li><a href="#">书记信箱</a></li>
                            <li><a href="#">校长信箱</a></li>
                            <li><a href="#">官方微信</a></li>
                            <li><a href="#">官方微博</a></li>
                        </ul>
                    </aside>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <footer class="text-center">
                        <p>@2020 艺丹工作室 版权所有 </p>
                    </footer>
                </div>
                
                </div>
            </div>
        </div>
        
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>bootstrap标题</title>
            <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
         <div class="page-header">
             <h1>页面标题实例
                 <small>子标题</small>
             </h1>
             <span class="h1">样式类标题<small>子标题</small></span>
        </div>
        <p>这是一个示例文本。这是一个示例文本。</p>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>bootstrap文本强调</title>
            <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <p>全局文本字号为14px(font-size)，颜色为深灰色（#333）；</p>
        <!--强调内容-->
        <p class="lead">
            .lead类是增大文本字号，加粗文本
        </p>
        <b>加粗b</b> ----------<strong>加粗strong</strong>
        <em>斜体em</em>---------<i>斜体i</i>
        <div class="text-muted">.text-muted：提示，使用浅灰色</div>
        <div class="text-primary">.text-primary：主要，使用蓝色</div>
        <div class="text-success">.text-success：成功，使用浅绿色</div>
        <div class="text-info">.text-info：通知信息，使用浅蓝色</div>
        <div class="text-warning">.text-warning：警告，使用黄色</div>
        <div class="text-danger">.text-danger：危险，使用浅红色</div>
        <abbr title="武汉轻工大学" class="initialism">轻工大</abbr>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>地址与缩略语</title>
            <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <address>
          <strong>武汉轻工大学</strong><br>
            湖北省武汉市常青花园学府南路68号<br>
          <abbr title="phone">P:</abbr> (027) 87654321
        </address><br /><br />
        <address>
          <strong>刘兵</strong><br>
          <a href="mailto:#">lb@whpu.edu.cn</a>
        </address>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>列表综合</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <style>
            body{padding:50px;}
        </style>
    </head>
    <body>
        <h3>基础列表组</h3>
        <ul class="list-group">
            <li class="list-group-item">HTML</li>
            <li class="list-group-item">CSS</li>
            <li class="list-group-item">JavaScript</li>
        </ul>
        <h3>自定义列表组</h3>
        <div class="list-group">
            <a href="##" class="list-group-item">
                <h4 class="list-group-item-heading">Bootstrap</h4>
                <p class="list-group-item-text">
                    深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。</p>
            </a>
            <a href="##" class="list-group-item">
                <h4 class="list-group-item-heading">jQuery</h4>
                <p class="list-group-item-text">jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。</p>
            </a>
        </div>
        
    
        <h3>多彩组合列表组</h3>
        <div class="list-group">
            <a href="##" class="list-group-item active"><span class="badge">5902</span>HTML/a>
            <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>CSS</a>
            <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>JavaScript</a>
            <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>jQuery</a>
            <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Bootstrap</a>
        </div>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap表格</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        
    </head>
    <body>
    <div class="container">
        <table class="table table-bordered table-hover table-condensed">
            <caption>学生信息</caption>
            <thead>
            <tr class="active">
                <th>姓名</th>
                <th>学号</th>
            </tr>
            
            </thead>
            <tbody>
            <tr class="danger">
                <th>张三</th>
                <th>19</th>
            </tr>
            <tr >
                <th>李四</th>
                <th>20</th>
            </tr>
            </tbody>
        </table>
        <div class="table-responsive">
                 <table class="table">
                 <thead style="background-color: #2aabd2">
                 <tr >
                     <th>语言</th>
                     <th>说明</th>
                 </tr>
                 </thead>
                     <tbody>
                     <tr class="text-success">
                         <th>JavaScript</th>
                         <th>控制网页行为</th>
                     </tr>
                     <tr>
                         <th>bootstrap</th>
                         <th>
                             Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
                         </th>
                     </tr>
                     </tbody>
                 </table>
               </div>
        
        
        
        </div>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>bootstrap按钮</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        
    </head>
    <body>
        <p>
            <button type="button" class="btn btn-primary btn-lg active">激活状态原始大按钮）</button>
            <button type="button" class="btn btn-default" disabled="disabled">默认尺寸禁用按钮</button>
            
        </p>
        <p>
            <button type="button" class="btn btn-success btn-sm">成功状态小按钮</button>
            <button type="button" class="btn btn-info btn-xs">（超小尺寸）信息按钮</button>
            <button type="button" class="btn btn-link">链接按钮</button>
        </p>
        <button type="button" class="btn btn-warning btn-lg btn-block">（块级元素）警告按钮</button>
        <button type="button" class="btn btn-danger btn-lg btn-block">（块级元素）危险按钮    </button>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>图片</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <style>
            body{padding:15px;}
        </style>
    </head>
    <body>
    <div class="container">
            <div class=" text-center col-sm-3">
                <img class="img-responsive" src="img/test.png">
                <h3>正常效果</h3>
            </div>
            <div class=" text-center col-sm-3">
                <img class="img-responsive img-rounded " src="img/test.png">
                <h3>圆角效果</h3>
            </div>
            <div class=" text-center col-sm-3">
                <img class="img-responsive img-circle " src="img/test.png">
                <h3>圆形效果</h3>
            </div>
            <div class=" text-center col-sm-3">
                <img class="img-responsive img-thumbnail " src="img/test.png">
                <h3>镶边效果</h3>
            </div>
    </div>
    
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        
    </head>
    <body>
        <div class="container">
            <h1>Hello, world!</h1>
         
            <div class="row">
                <div class="col-md-6"  style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                    enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                    nisi ut aliquip ex ea commodo consequat. 
                    </p>
         
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
                    quae ab illo inventore veritatis et quasi architecto beatae vitae 
                    dicta sunt explicabo. 
                    </p>
                </div>
         
                <div class="col-md-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                    accusantium doloremque laudantium.
                    </p>
         
                    <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
                    consectetur, adipisci velit, sed quia non numquam eius modi 
                    tempora incidunt ut labore et dolore magnam aliquam quaerat 
                    voluptatem. 
                    </p>
                </div>
            </div>
        </div>
<div class="container">
<h1 class="page-header">标题</h1>
<h1>h1.一级标题　margin-top:20px,margin-bootom:10px</h1>
<h2>h2.二级标题　margin-top:20px,margin-bootom:10px</h2>
<h3>h3.三级级标题　margin-top:20px,margin-bootom:10px</h3>
<h4>h4.四级标题　margin-top:10px,margin-bootom:10px</h4>
<h5>h5.一级标题　margin-top:20px,margin-bootom:10px</h5>
<h6>h6.一级标题　margin-top:20px,margin-bootom:10px</h6>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
</div>

    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        
    </head>
    <body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <form action="http://wwww.baidu.com" class="">
    
                <div class="form-group has-feedback">
                    <label for="username">用户名</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                        <input id="username" class="form-control" placeholder="请输入用户名" maxlength="20" type="text">
                    </div>
    
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
    
                <div class="form-group has-feedback">
                    <label for="password">密码</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                        <input id="password" class="form-control" placeholder="请输入密码" maxlength="20" type="password">
                    </div>
    
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
    
                <div class="form-group has-feedback">
                    <label for="passwordConfirm">确认密码</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                        <input id="passwordConfirm" class="form-control" placeholder="请再次输入密码" maxlength="20" type="password">
                    </div>
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
    
    
    
    
                <div class="row">
                    <div class="col-xs-7">
                        <div class="form-group has-feedback">
                            <label for="idcode-btn">验证码</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-qrcode"></span></span>
                                <input id="idcode-btn" class="form-control" placeholder="请输入验证码" maxlength="4" type="text">
                            </div>
                            <span style="color:red;display: none;" class="tips"></span>
                            <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span>
                            <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                        </div>
                    </div>
                    <div class="col-xs-5" style="padding-top: 30px">
                        <div id="idcode" style="background: transparent;"></div>
                    </div>
                </div>
    
                <div class="form-group has-feedback">
                    <label for="phoneNum">手机号码</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>
                        <input id="phoneNum" class="form-control" placeholder="请输入手机号码" maxlength="11" type="text">
                    </div>
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
    
                <div class="row">
                    <div class="col-xs-7">
                        <div class="form-group has-feedback">
                            <label for="idcode-btn">校验码</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-qrcode"></span></span>
                                <input id="idcode-btn" class="form-control" placeholder="请输入校验码" maxlength="6" type="text">
                            </div>
                            <span style="color:red;display: none;" class="tips"></span>
                            <span style="display: none;" class="glyphicon glyphicon-remove form-control-feedback"></span>
                            <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                        </div>
                    </div>
                    <div class="col-xs-4 text-center" style="padding-top: 26px">
                        <button type="button" id="loadingButton" class="btn btn-primary" autocomplete="off">获取短信校验码</button>
                    </div>
                </div>
                <div class="row">
                    <div class=" col-xs-offset-1 col-xs-5">
                        <input class="form-control btn btn-primary" id="submit" value="立&nbsp;&nbsp;即&nbsp;&nbsp;注&nbsp;&nbsp;册" type="submit">
                    </div>
                    <div class="col-xs-5">
                        <input value="重  置" id="reset" class="form-control btn btn-danger" type="reset">
                    </div>

                </div>
                
            </form>
        </div>
    </div>
    
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="./css/bootstrap.min.css"  rel="stylesheet">
        <style>
            .row div{ border: 1px solid gray;}
        </style>
    </head>
    <body>
        <div class="container">
          <ul class="list-group">
              <li class="list-group-item">football</li>
              <li class="list-group-item">
                  <span class="badge list-group-item-warning">20</span>football
              </li>
              <li class="list-group-item list-group-item-danger"><a href="">football</a></li>
              <li class="list-group-item">football</li><br><br><br>
             <table border="1" width="80%" class="table  table-hover">
                 <tr class="table-bordered">
                     <td>1</td>
                     <td>1</td>
                     <td>1</td>
                     <td>1</td>
                 </tr>
                 <tr class="active">
                                      <td>1</td>
                                      <td>1</td>
                                      <td>1</td>
                                      <td>1</td>
                 </tr>
                 <tr class="danger">
                                      <td>1</td>
                                      <td>1</td>
                                      <td>1</td>
                                      <td>1</td>
                 </tr>
                 <tr>
                                      <td>1</td>
                                      <td>1</td>
                                      <td>1</td>
                                      <td>1</td>
                 </tr>
             </table>
          </ul>
        </div>
    </body>
</html>