重新用户注册页面，适配小屏幕

Bootstrap.Admin/Content/css/register.css

@@ -1,4 +1,12 @@
-ol {
+header h2 {
+    text-align: center;
+}
+
+h3 {
+    margin-bottom: 20px;
+}
+
+ol {
     display: block;
     list-style-type: decimal;
     -webkit-margin-before: 1em;
@@ -8,19 +16,36 @@
     -webkit-padding-start: 40px;
 }
 
+.has-error input {
+    background-repeat: no-repeat;
+    background-image: url('../images/error.png');
+    background-position: right 8px center;
+}
+
+.has-success input {
+    background-repeat: no-repeat;
+    background-image: url('../images/success.png');
+    background-position: right 8px center;
+}
+
 .setup-wrapper {
-    width: 750px;
-    padding-top: 30px;
     margin: 0 auto;
 }
 
+form input {
+    padding-right: 30px !important;
+}
+
 .setup-header {
-    padding-bottom: 20px;
+    margin: 0 auto;
-    margin: 0 auto 30px;
-    overflow: hidden;
     text-align: left;
 }
 
+.setup-main, .setup-confirm {
+    float: left;
+    width: 450px;
+}
+
 .setup-confirm {
     display: none;
 }
@@ -29,19 +54,6 @@
         padding: 6px 0;
     }
 
-    .setup-confirm div {
-        padding-top: 30px;
-    }
-
-    .setup-confirm button {
-        margin-top: 30px;
-    }
-
-.setup-main, .setup-confirm {
-    float: left;
-    width: 450px;
-}
-
 .setup-main span {
     top: 0;
 }
@@ -51,8 +63,10 @@
 }
 
 .setup-secondary {
+    display: inline-block;
     float: right;
     width: 250px;
+    margin-top: 70px;
 }
 
 .setup-info-module {
@@ -69,6 +83,10 @@
         overflow: hidden;
         border-bottom: 1px solid #ddd;
         margin-top: 0;
+        background-color: #5cb85c;
+        color: #000;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
     }
 
 .features-list {
@@ -117,13 +135,13 @@
     }
 
     .steps li.current {
-        color: #333;
+        color: #000;
-        background-color: #fff;
+        background-color: #5cb85c;
     }
 
     .steps li {
         display: table-cell;
-        width: 33.3%;
+        width: 50%;
         padding: 10px 15px;
         color: #ccc;
         cursor: default;
@@ -134,3 +152,23 @@
         .steps li .step {
             display: block;
         }
+
+@media (max-width: 767px) {
+    .steps {
+        display: inherit;
+    }
+
+        .steps li {
+            display: inherit;
+            width: inherit;
+        }
+
+    .setup-secondary {
+        display: none;
+    }
+
+    .setup-main, .setup-confirm {
+        float: inherit;
+        width: inherit;
+    }
+}

Bootstrap.Admin/Scripts/register.js

@@ -34,4 +34,10 @@
             $('.setup-confirm').show();
         }
     });
+
+    $('#btnPrev').click(function () {
+        $('.steps li').toggleClass('current');
+        $('.setup-main').show();
+        $('.setup-confirm').hide();
+    });
 });

Bootstrap.Admin/Views/Home/Register.cshtml

@@ -4,15 +4,18 @@
 }
 @section css {
     <link href="~/Content/css/register.css" rel="stylesheet" />
+    <link href="~/Content/css/tipso.css" rel="stylesheet" />
 }
 @section javascript {
     <script src="~/content/js/jquery.validate.js"></script>
     <script src="~/content/js/messages_zh.js"></script>
     <script src="~/content/js/sweetalert.js"></script>
+    <script src="~/Content/js/tipso.js"></script>
     <script src="~/Scripts/register.js"></script>
 }
 <div class="container">
     <div class="setup-wrapper">
+        <header><h2>新用户注册</h2></header>
         <div class="setup-header">
             <ol class="steps">
                 <li class="current">
@@ -26,49 +29,64 @@
         <form autocomplete="off" id="signup-form" method="post">
             <div class="setup-main">
                 <div class="setup-form-container">
-                    <h2 class="setup-form-title mb-3">
+                    <h3 class="setup-form-title mb-3">
                         创建您的账号
-                    </h2>
+                    </h3>
+                    <div class="form-group">
                         <label for="userName">登陆账号：</label>
                         <div class="input-group">
                             <span class="input-group-addon">@@</span>
-                        <input type="text" id="userName" name="userName" class="form-control" placeholder="登陆账号" value="" autofocus />
+                            <input type="text" id="userName" name="userName" class="form-control" placeholder="登陆账号" value="" autofocus maxlength="50" />
                         </div>
+                    </div>
+                    <div class="form-group">
                         <label for="displayName">显示名称：</label>
                         <div class="input-group">
                             <span class="glyphicon glyphicon-user input-group-addon"></span>
-                        <input type="text" id="displayName" name="displayName" class="form-control" value="" placeholder="显示名称" />
+                            <input type="text" id="displayName" name="displayName" class="form-control" value="" placeholder="显示名称" maxlength="50" />
                         </div>
+                    </div>
+                    <div class="form-group">
                         <label for="password">密码：</label>
                         <div class="input-group">
                             <span class="glyphicon glyphicon-lock input-group-addon"></span>
-                        <input type="password" id="password" name="password" class="form-control" value="" placeholder="密码" />
+                            <input type="password" id="password" name="password" class="form-control" value="" placeholder="密码" maxlength="50" />
                         </div>
+                    </div>
+                    <div class="form-group">
                         <label for="assurePassword">确认密码：</label>
                         <div class="input-group">
                             <span class="glyphicon glyphicon-lock input-group-addon"></span>
-                        <input type="password" id="assurePassword" name="assurePassword" class="form-control" value="" placeholder="确认密码" />
+                            <input type="password" id="assurePassword" name="assurePassword" class="form-control" value="" placeholder="确认密码" maxlength="50" />
                         </div>
+                    </div>
+                    <div class="form-group">
                         <label for="description">申请理由：</label>
                         <div class="input-group">
                             <span class="glyphicon glyphicon-certificate input-group-addon"></span>
-                        <textarea id="description" name="description" class="form-control"  placeholder="申请理由" ></textarea>
+                            <textarea id="description" name="description" class="form-control" placeholder="申请理由" rows="6" maxlength="500"></textarea>
                         </div>
-                    <button id="btnAccount" class="btn btn-primary" type="button">继续</button>
+                    </div>
+                    <div class="form-group">
+                        <button id="btnAccount" class="btn btn-primary pull-right" type="button">继续</button>
                     </div> <!-- /.setup-form-container -->
                 </div>
+            </div>
             <div class="setup-confirm">
-                <h4>您注册的信息如下：</h4>
+                <h3>您注册的信息如下：</h3>
-                <div>
+                <div class="form-group">
-                    <label>登陆账号：</label><span id="loginID"></span>
+                    <label>登陆账号：</label><span id="loginID" class="form-control-static"></span>
                 </div>
-                <div>
+                <div class="form-group">
-                    <label>显示名称：</label><span id="loginName"></span>
+                    <label>显示名称：</label><span id="loginName" class="form-control-static"></span>
                 </div>
-                <div>
+                <div class="form-group">
-                    <label>申请理由：</label><span id="loginDesc"></span>
+                    <label>申请理由：</label><span id="loginDesc" class="form-control-static"></span>
+                </div>
+                <div class="form-group">
+                    <button id="btnPrev" class="btn btn-default" type="button">上一步</button>
+                    <button id="btnSubmit" class="btn btn-primary pull-right" type="submit">确认并提交</button>
                 </div>
-                <button id="btnSubmit" class="btn btn-primary" type="submit">确认并提交</button>
             </div>
         </form>
         <div class="setup-secondary">