美孚英語登入頁面bootstrap
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <!--設定瀏覽器以最新核心渲染頁面--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!--引入框架的css樣式庫--> <link rel="stylesheet" href="css/bootstrap.css"/> <style> body{ background-color: rgba(0,0,0,.5); } .container{ margin:50px auto; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; } .container h4{ padding: 10px 15px; border-bottom: 1px solid #ccc; } .container form{ padding: 10px 15px; border-bottom: 1px solid #ccc; margin-bottom: 30px; } .container label{ font-weight: normal; }
.container .form-group{ margin-bottom: 30px; } @media screen and (min-width: 768px) { .container{ width: 300px; } }
@media screen and (max-width: 767px) { .container{ margin: 50px 15px; } } </style> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h4>歡迎登入 <small>SIGN IN</small> <button class="close">×</button> </h4> <form action="#"> <div class="form-group"> <input type="text" class="form-control" placeholder="手機/郵箱/使用者名稱" /> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="密碼" /> </div> <div class="form-group"> <input type="checkbox" id="autoLogin"/><label for="autoLogin">下次自動登入</label> </div> <p class="text-center"> <button class="btn btn-danger btn-block">登入</button> </p> </form> </div> <!--5.引入jQuery庫--> <script src="js/jquery-1.10.2.min.js"></script> <!--6.引入bootstrap外掛--> <script src="js/bootstrap.min.js"></script> </body> </html>