<!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>
        <div class="container">
        <form role="form">
           <fieldset>
             <legend>用户登录</legend>
             <div class="form-group">
                <label>登录账户</label>
                <input type="email" class="form-control" placeholder="请输入你的用户名或Email">
             </div>
             <div class="form-group">
                 <label>密码</label>
                 <input type="text" class="form-control" placeholder="请输入你的密码">
             </div>
             <div class="checkbox">
                <label><input type="checkbox">记住密码</label>
             </div>
             <button type="submit" class="btn btn-default">登录</button>
          </fieldset>
      </form>
        </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>
        <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
        <form class="form-inline">
            <div class="form-group">
                <label class="sr-only">名称</label>
                <input style="width:200px" class="form-control" type="text" placeholder="请输入用户名" />
            </div>
            <div class="form-group">
                 <label class="sr-only">密码</label>
                <input class="form-control" type="password" placeholder="请输入密码" />
            </div>
            <div class="checkbox">
                <label>
                  <input type="checkbox"> 记住密码
                </label>
            </div>
            <button type="button" class="btn btn-default">提交</button>
        </form>
          </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>
        <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-10">
                   <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址"/>
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                   <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"/>记住密码
                    </label>
               </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">进入邮箱</button>
                    </div>
                </div>
        </form>
        </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=""  >
    
                <div class="form-group has-feedback">
                    <label for="username">用户名</label>
                    <div class="input-group has-error">
                        <input id="username" class="form-control" placeholder="请输入用户名" maxlength="20" type="text">
                        <span  class=" glyphicon glyphicon-remove form-control-feedback"></span>
                    </div>
                    <span style="color:red;">用户名不存在 </span>
                </div>
    
                <div class="form-group has-feedback">
                    <label for="password">密码</label>
                    <div class="input-group has-feedback">
                        <input id="password" class="form-control" placeholder="请输入密码" maxlength="20" type="password">
                        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                     </div>
                     <span style="color:red;">密码不能为空 </span>
                </div>
    
                <div class="form-group has-feedback">
                    <label for="passwordConfirm">确认密码</label>
                    <div class="input-group has-success">
                        <input id="passwordConfirm" class="form-control" placeholder="请再次输入密码" maxlength="20" type="password">
                        <span  class="glyphicon glyphicon-circle-arrow-right form-control-feedback"></span>
                    </div>
                    <span style="color:red;">密码与确认密码不一致 </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 has-warning">
                                <input id="idcode-btn" class="form-control" placeholder="请输入验证码" maxlength="4" type="text">
                                <span  class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
                             </div>
                        </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">
                        <input id="phoneNum" class="form-control" placeholder="请输入手机号码" maxlength="11" type="text">
                        <span  class="glyphicon glyphicon-remove-circle form-control-feedback"></span>
                     </div>
                </div>
    
                <div class="row">
                    <div class="col-xs-7">
                        <div class="form-group has-feedback">
                            <label for="idcode-btn">校验码</label>
                            <div class="input-group">
                                <input id="idcode-btn" class="form-control" placeholder="请输入校验码" maxlength="6" type="text">
                                <span  class="glyphicon glyphicon-floppy-remove form-control-feedback"></span>
                             </div>
                        </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">
        <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>
      <div class="container">
        <div class="input-group">
          <span class="input-group-addon" id="basic-addon1">@</span>
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        </div>
        <br>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
          <span class="input-group-addon" id="basic-addon2">@example.com</span>
        </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>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        </head>
    <body>
      <div class="container">
        <div class="input-group input-group-lg">
          <span class="input-group-addon" id="basic-addon1">@</span>
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        </div>
        <div class="input-group input-group-sm">
          <span class="input-group-addon" id="basic-addon1">@</span>
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        </div>
        <div class="input-group">
          <span class="input-group-addon" id="basic-addon1">@</span>
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        </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>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery-1.11.2.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
      <div class="container" style="padding: 30px 100px 10px;">
        <div class="input-group">
          <span class="input-group-addon">
            <input type="checkbox" aria-label="...">
          </span>
          <input type="text" class="form-control" aria-label="...">
        </div>
        <br>
        <div class="input-group">
          <span class="input-group-addon">
            <input type="radio" aria-label="...">
          </span>
          <input type="text" class="form-control" aria-label="...">
        </div>
        <br>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search for...">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">搜索</button>
          </span>
        </div>
        <br>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search for...">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>
        </div>
        <br>
        <div class="input-group">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default 
               dropdown-toggle" data-toggle="dropdown">下拉菜单
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
             <li><a href="#">功能</a></li>
             <li><a href="#">另一个功能</a></li>
             <li><a href="#">其他</a></li>
             <li class="divider"></li>
             <li><a href="#">分离的链接</a></li>
            </ul>
           </div>
           <input type="text" class="form-control">
          </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>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery-1.11.2.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
      <div class="container-fluid" >
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid"> 
            <div class="navbar-header">
                <a class="navbar-brand" href="#">武汉轻工大学</a>
            </div>
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
              <li><a href="#">机构设置</a></li>
              <li><a href="#">学科建设</a></li>
              <li><a href="#">人才培养</a></li>  
              <li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" >友情链接<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="mailto:lb@whpu.edu.cn">联系我</a></li>
                      <li class="divider"></li>
                      <li><a href="https://www.baidu.com" target="_blank">百度搜索</a></li>
                    </ul>
                  </li>
              </li>
            </ul>
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">提交</button>
            </form>
            <ul class="nav navbar-nav navbar-right"> 
                <li>
                    <a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a>
                </li> 
                <li>
                    <a href="#">
                        <span class="glyphicon glyphicon-log-in"></span> 登录
                    </a>
                </li> 
            </ul> 
        </div>
      </nav>
      
    </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">
        <script src="js/jquery-1.11.2.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            $(function(){
                $(".nav-tabs li").click(function(){
                    $(".nav-tabs li").removeClass("active");
                    $(this).addClass("active");
                });
            })
        </script>
    </head>
    <body>
      <div class="container" style="padding: 30px 100px 10px;">
        <nav>
            <ul class="nav nav-tabs">
                <li class="active"><a href="##">Home</a></li>
                <li><a href="##">CSS3</a></li>
                <li><a href="##">Sass</a></li>
                <li><a href="##">jQuery</a></li>
                <li><a href="##">Responsive</a></li>
            </ul><br><br>
            <ul class="nav nav-pills">
                <li class="active"><a href="##">Home</a></li>
                <li><a href="##">CSS3</a></li>
                <li><a href="##">Sass</a></li>
                <li><a href="##">jQuery</a></li>
                <li class="disabled"><a href="##">Responsive</a></li>
            </ul>
        </nav>
      </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>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery-1.11.2.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        
    </head>
    <body>
      
      <nav class="nav navbar-inverse navbar-fixed-top">
          <div class="container">
              <div class="navbar-header">
                  <!--在移动端的时候导航条折叠起来，三横的样式出现，点击该样式可以显示或隐藏导航条上的内容-->
                  <button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a href="#" class="navbar-brand">武汉轻工大学</a>
              </div>
              <div id="menu" class="collapse navbar-collapse">
                  <ul class="nav navbar-nav">
                      <li class="active"><a href="#">学校概况</a></li>
                      <li><a href="#">组织机构</a></li>
                      <!--下拉菜单功能的实现-->
                      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
                          联系我们<span class="caret"></span></a>
                      <ul class="dropdown-menu">
                          <li><a href="#">邮件</a></li>
                          <li><a href="#">电话</a></li>
                      </ul>
                      </li>
                  </ul>
              </div>
          </div>
      </nav>
    </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">
        <script src="js/jquery-1.11.2.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        
    </head>
    <body>
     <div class="container">
       <ul class="breadcrumb">
         <li><a href="#">Home</a></li>
         <li><a href="#">2020</a></li>
         <li class="active">四月</li>
       </ul>
     </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>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery-1.11.2.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        
    </head>
 <body>
  <div class="container">
  <div class="row">
    <div class="col-md-2">
        <ul class="pager">
            <li class="previous disabled"><a href="#">&larr; 第一页</a></li>
            
        </ul>
    </div>
    <div class="col-md-6 ">
        <ul class="pagination pagination-lg">
            <li><a href="#">&laquo;上一页</a></li>
            <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
            <li class="disabled"><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;下一页</a></li>
        </ul>
    </div>
    <div class="col-md-2">
        <ul class="pager">
            <li class="previous"><a href="#">最后一页 &rarr;</a></li>
        </ul>
    </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>
        <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <span class="label label-default">默认标签</span>
        <span class="label label-primary">主要标签</span>
        <span class="label label-success">成功标签</span>
        <span class="label label-info">信息标签</span>
        <span class="label label-warning">警告标签</span>
        <span class="label label-danger">危险标签</span>
        <h4>胶囊式导航中的激活状态</h4>
        <ul class="nav nav-pills">
           <li class="active"><a href="#">首页 <span class="badge badge-warning">42</span></a></li>
           <li><a href="#">简介</a></li>
           <li><a href="#">消息 <span class="badge">3</span></a></li>
        </ul>
        <br>
        <h4>列表导航中的激活状态</h4>
        <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
           <li class="active">
              <a href="#">
                 <span class="badge pull-right">42</span>
                 首页
              </a>
           </li>
           <li><a href="#">简介</a></li>
           <li>
              <a href="#">
                 <span class="badge pull-right">3</span>
                 消息
              </a>
           </li>
        </ul>
    </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>
            .jumbotron{ background: darksalmon;}
        </style>
    </head>
    <body>
    <div class="jumbotron">
        <div class="container">
            <h3>
                <div class="page-header">
                    <h1>组件
                        <small>样式类</small>
                    </h1>
                </div>
                
            </h3>    
            <p>无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。</p>
            <p>
    <a href="#" class="btn btn-default">快速进入</a>
    </p>                
        </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>
     
            <ul class="thumbnails">
                <li class="span3">
                  <a href="#" class="thumbnail">
                    <img src="img/logo.png"   alt="缩略图">
                  </a>
                </li>
                ...
              </ul>
        </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="progress progress-striped active">
        <div class="progress-bar progress-bar-success" role="progressbar"
             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
             style="width: 40%;">
            <span class="sr-only">40% 完成</span>
        </div>
    </div>
    <div class="alert alert-warning alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <strong>警告!</strong>当前完成了40%，
      <a href="#" class="alert-link">取消</a>
    </div>
    </div>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>面板</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        
    </head>
    <body>
    <div class="container">
        <div class="panel panel-success">
            <div class="panel-heading">2019年人才工作会</div>
            <div class="panel-body">
                <p>在总结讲话中进一步强调，各单位各部门要突出重点、统筹规划，要狠抓人才目标任务及各项人才政策措施的落实，以更高的政治站位，更远的战略眼光，更宽的全局胸襟，更实的工作作风，全面加强人才工作，为学校加快建设特色鲜明的高水平大学提供坚实的人才基础和强有力的人才保障。
                </p>
            </div>
            招聘人员：
            <ul class="list-group">
                <li class="list-group-item">教师</li>
                <li class="list-group-item">辅导员</li>
                <li class="list-group-item">实验员</li>
                
            </ul>
        </div>
    </div>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
 <body>
    <div class="navbar navbar-inverse ">
      <div class="navbar-inner navbar-header">
        <div class="container">
        <div class="row">
        <div class="col-md-12">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#m">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand navbar-right" href="#">Bootstrap</a>
          <div class="navbar-collapse collapse" id="m">
            <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="#">基本CSS样式</a></li>
              <li><a href="#">组件</a></li>
              <li><a href="#">JavaScript插件</a></li>
              <li><a href="#">定制</a></li>
              <li><a href="#">网站实例</a></li>
            </ul>
          </div>
          </div>
        </div>
      </div>
    </div>
</div>
<div class="jumbotron masthead " style="background-color: blueviolet;">
  <div class="container" >
  <div class="row">
  <div class="col-md-12 "></div>
    <h1 class="text-center">Bootstrap</h1>
    <p class="text-center">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
    <div class="text-center">
      <a href="#" class="btn btn-primary btn-large" >下载Bootstrap</a></div>
    </p>
    <ul class="masthead-links list-inline text-center">
      <li class="list-unstyled "><a href="#" >GitHub project</a></li>
      <li class="list-unstyled"><a href="#" >案例</a></li>
      <li class="list-unstyled"><a href="#" >扩展</a></li>
      <li class="list-unstyled ">Version 2.3.2</li>
    </ul>
  </div>
</div>
</div>
 
  <div class="container">
    <div class="row">
    <ul>
        <li class="list-unstyled  text-center"><a href="#" target="_blank">Bootstrap v3 中文文档</a></li>
    </ul>
  </div>
</div>
 
<div class="container" style="margin-top: 50px">
  <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>
 </div>
  </body>
</html>