css实现登录注册可切换页面与boostrap按钮组

                                    

1、设置login_box

.login-box {
  width: 420px;
  height: 408px;
  padding: 20px;
  background-color: #fff;
}

2、设置login-tabs，底部设置灰色边框

.login-box .login-tabs {
  font-family: tahoma, arial, 'Hiragino Sans GB', '\5FAE\8F6F\96C5\9ED1', sans-serif;
  margin-bottom: 15px;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid #d9d9d9;
}

2_1、logintabs要清除浮动，因为他里面的li元素都是向左浮动

.login-box .login-tabs:before,
.login-box .login-tabs:after {
  content: " ";
  display: table;
}
.login-box .login-tabs:after {
  clear: both;
}

2_2、a元素底部设置同样的灰色边框

.login-box .login-tabs li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}
.login-box .login-tabs li a {
  font-size: 16px;
  display: block;
  margin-bottom: -2px;
  padding: 10px 35px;
  border-bottom: 2px solid #d9d9d9;
}

2-3、被点击的a元素动态添加active样式，该样式使底部边框变为红色

.login-box .login-tabs li a:hover,
.login-box .login-tabs li a:focus {
  text-decoration: none;
}
.login-box .login-tabs li.active a,
.login-box .login-tabs li.active a:hover,
.login-box .login-tabs li.active a:focus {
  color: #ff6a00;
  border-bottom-color: #ff6a00;
}

3、接下来是设置提示信息login-notice

.login-box .login-panel {
  font-size: 12px;
  margin: 0 38px;
}
.login-box .login-panel .login-notice {
  min-height: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.login-box .login-panel .login-notice .notice-cont {
  line-height: 18px;
  padding: 3px 12px;
  color: #7e7e80;
  border: 1px solid #feb98a;
  background-color: #fbf0e8;
}
.login-box .login-panel .login-notice .notice-cont .ico {
  margin-top: -2px;
  margin-right: 5px;

一个输入框的设置在花礼网上居然如此复杂

								用户名
								

									

									

                            	
								
							

								密码
								

									

									

								
							

相关样式：

.login-box .login-panel .input-group-addon {
  padding: 10px;
  border: 1px solid #d2d2d2;
  border-right: 0;
  border-radius: 0;
  background-color: #eee;
}

sr-only样式

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

ico样式

.ico {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
}

登录按钮的设置居然用了4个类

登　录

登录中...

相关样式：

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #4d4d4d;
  text-decoration: none;
}
.btn:active,
.btn.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-primary {
  color: #ffffff;
  background-color: #ff6a00;
  border-color: #ff6a00;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active {
  color: #ffffff;
  border-color: #f56600;
  background-color: #f56600;}

上面设置了那么多.btn-primary我也不知道为什么

正常划过一个登录按钮的效果是这样，颜色较深：

没划过就略浅

如果去掉第二部分的

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active

划过效果如下：

.btn-lg,
.btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

.btn-block {
  display: block;
  width: 100%;
}
.btn-block + .btn-block {
  margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

以下样式可用于, , 或 元素上：

类	描述	实例
.btn	为按钮添加基本样式	尝试一下
.btn-default	默认/标准按钮	尝试一下
.btn-primary	原始按钮样式（未被操作）	尝试一下
.btn-success	表示成功的动作	尝试一下
.btn-info	该样式可用于要弹出信息的按钮	尝试一下
.btn-warning	表示需要谨慎操作的按钮	尝试一下
.btn-danger	表示一个危险动作的按钮操作	尝试一下
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)	尝试一下
.btn-lg	制作一个大按钮	尝试一下
.btn-sm	制作一个小按钮	尝试一下
.btn-xs	制作一个超小按钮	尝试一下
.btn-block	块级按钮(拉伸至父元素100%的宽度)	尝试一下
.active	按钮被点击	尝试一下
.disabled	禁用按钮

原文链接：Bootstrap 按钮 | 菜鸟教程

http://www.runoob.com/bootstrap/bootstrap-buttons.html

原文上说这是设置块级的原始按钮

  type="button" class="btn btn-primary btn-lg btn-block">
      块级的原始按钮