bootstrap3 彈出框水平、垂直居中
阿新 • • 發佈：2018-09-05
oot class 居中 meta title cti rap lock ice
<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 核心 CSS 文件 --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style> /*web background*/ .container{ display:table; height:100%; } .row{ display: table-cell; vertical-align: middle; } /* centered columns styles */ .row-centered { text-align:center; } .col-centered { display:inline-block; float:none; text-align:left; margin-right:-4px; } </style> </head> <body> <div class="container"> <div class="row row-centered"> <div class="well col-md-6 col-centered"> <h2>歡迎登錄</h2> <form:form action="/login" method="post" role="form"> <div class="input-group input-group-md"> <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span> <input type="text" class="form-control" id="userid" name="userid" placeholder="請輸入用戶ID"/> </div> <div class="input-group input-group-md"> <span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span> <input type="password" class="form-control" id="password" name="password" placeholder="請輸入密碼"/> </div> <br/> <button type="submit" class="btn btn-success btn-block">登錄</button> </form:form> </div> </div> </div> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html> 作者：神奕 鏈接：https://www.jianshu.com/p/f246563700fd 來源：簡書 簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並註明出處。
bootstrap3 彈出框水平、垂直居中