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/bootstrap/bootstrap-buttons.html
原文上说这是设置块级的原始按钮
type="button"class="btn btn-primary btn-lg btn-block">块级的原始按钮
更多推荐
css注册页面提交按钮怎么实现,css实现登录注册可切换页面与boostrap按钮组
发布评论