bootstrap之登录窗口居中布局

港控/mmm° 2022-04-10 14:42 561阅读 0赞
效果图

在这里插入图片描述

代码示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. <meta http-equiv="X-UA-Compatible" content="IE=9" />
  5. <head>
  6.     <meta charset="utf-8">
  7.     <title>login</title>
  8.     <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  9.     <style>
  10.         .row-center{ 
  11.             text-align:center;
  12.             margin-top: 120px;
  13.         }
  14.         .col-center { 
  15.             display:inline-block;
  16.             float:none;
  17.             text-align:left;
  18.         }
  19.     </style>
  20. </head>
  21. <body  >
  22. <div class="container">
  23.     <div  class="row row-center" >
  24.         <div  class="col-center">
  25.             <div id="loginui" style="background-color: darkseagreen; padding: 28px;border-radius: 8px;border-color: #00a3ff;border-width: 2px ">
  26.                 <div style="height: 80px;">
  27.                     <h3 style="text-align: center;color: darkolivegreen; font-size: 35px;">登录中心</h3>
  28.                 </div>
  29.                 <div  class="form-group">
  30.                     <input name="username" class="form-control uname" id="s_ic_no" placeholder="请输入您的用户名">
  31.                 </div>
  33.                 <div style="padding: 1px" class="form-group">
  34.                     <input name="password" type="password" class="form-control pword m-b" id="password" placeholder="请输入您的密码">
  35.                 </div>
  36.                 <div class="submit">
  37.                     <button style="border-radius:8px; background-color: #00A3FF" onclick="login()" class="btn btn-lg btn-login btn-block">登录</button>
  38.                 </div>
  39.             </div>
  40.         </div>
  41.     </div>
  42. </div>
  44. </body>
  45. </html>

发表评论

表情：
评论列表 （有 0 条评论，561人围观）

还没有评论，来说两句吧...

相关阅读

    相关 bootStrap3 垂直居中

    近期使用ng重构公司的后台管理系统，类似modal这样的组件，再也不用像以前那样先创建再append(而是由状态驱动)；为图方便使用bootstrap的样式和angular-u

    忘是亡心i忘是亡心i/ 0 赞/ 140 阅读

    相关 bootstrap之网格布局

    一. 实现原理 　　网格布局是通过容器的大小，平均分为12份(可以修改),再调整内外边距,和表格布局有点类似但是也存在区别。 　　实现步骤如下: 　　(1) 数据行.ro

    矫情吗；*矫情吗；*/ 0 赞/ 395 阅读