12-07

1:

<!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.0">     <title>Document</title>     <link rel="stylesheet" href="./css/normalize.css">     <link rel="stylesheet" href="./css/bootstrap.min.css"> </head>
<body>     <form action="#" method="get" class="form-horizontal">         <div class="form-group">             <label for="name" class="col-md-2 control-label">账号</label>             <div class="col-md-10">                 <input type="text" id="name" name="name" placeholder="请输入账号" class="form-control">             </div>         </div>
        <div class="form-group">             <label for="pwd" class="col-md-2 control-label">密码</label>             <div class="col-md-10">                 <input type="password" id="pwd" name="pwd" placeholder="请输入密码" class="form-control">             </div>         </div>
        <div class="form-group">             <div class="col-md-offset-2 col-md-10">                 <input type="reset" value="重置" class="btn btn-default">                 <input type="submit" value="登录" class="btn btn-primary">             </div>         </div>     </form> </body>
</html>

2:

<!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.0">     <title>Document</title>     <link rel="stylesheet" href="./css/normalize.css">     <link rel="stylesheet" href="./css/bootstrap.min.css"> </head>
<body>     <nav class="navbar navbar-default navbar-fixed-top">         <div class="container-fluid">             <!-- Brand and toggle get grouped for better mobile display -->             <div class="navbar-header">                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"                     data-target="#bs-example-navbar-collapse-1" aria-expanded="false">                     <span class="sr-only">Toggle navigation</span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                 </button>                 <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-fire text-danger"></span></a>             </div>
            <!-- Collect the nav links, forms, and other content for toggling -->             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">                 <ul class="nav navbar-nav">                     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>                     <li><a href="#">Link</a></li>                     <li class="dropdown">                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"                             aria-expanded="false">Dropdown <span class="caret"></span></a>                         <ul class="dropdown-menu">                             <li><a href="#">Action</a></li>                             <li><a href="#">Another action</a></li>                             <li><a href="#">Something else here</a></li>                             <li role="separator" class="divider"></li>                             <li><a href="#">Separated link</a></li>                             <li role="separator" class="divider"></li>                             <li><a href="#">One more separated link</a></li>                         </ul>                     </li>                 </ul>                 <form class="navbar-form navbar-left">                     <div class="form-group">                         <input type="text" class="form-control" placeholder="Search">                     </div>                     <button type="submit" class="btn btn-default">Submit</button>                 </form>                 <ul class="nav navbar-nav navbar-right">                     <li><a href="#">Link</a></li>                     <li class="dropdown">                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"                             aria-expanded="false">Dropdown <span class="caret"></span></a>                         <ul class="dropdown-menu">                             <li><a href="#">Action</a></li>                             <li><a href="#">Another action</a></li>                             <li><a href="#">Something else here</a></li>                             <li role="separator" class="divider"></li>                             <li><a href="#">Separated link</a></li>                         </ul>                     </li>                 </ul>             </div><!-- /.navbar-collapse -->         </div><!-- /.container-fluid -->     </nav>
    <div class="content" style="margin: 51px; height: 800px;">         777777777     </div> </body> <script src="./js/jquery.min.js"></script> <script src="./js/bootstrap.min.js"></script>
</html>

3:

<!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.0">     <title>Document</title>     <link rel="stylesheet" href="./css/normalize.css">     <link rel="stylesheet" href="./css/bootstrap.min.css"> </head> <body>     <div class="progress">         <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">           <span class="sr-only">40% Complete (success)</span>           40%         </div>       </div>       <div class="progress">         <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">           <span class="sr-only">20% Complete</span>           20%         </div>       </div>       <div class="progress">         <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">           <span class="sr-only">60% Complete (warning)</span>           60%         </div>       </div>       <div class="progress">         <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">           <span class="sr-only">80% Complete (danger)</span>           80%         </div>       </div> </body> </html>
上一篇:03 Docker镜像详解


下一篇:Docker 安装部署RabbitMQ