Bootstrap模仿起筷首页效果

Bootstrap模仿起筷首页效果

直接贴代码了

自动登录

注册新用户

登 录

css代码：

.navbar{

height: 108px;

background-repeat: no-repeat;

box-shadow: 0 0 5px #999;

background-color: #fff;

border-bottom: 2px solid #e8e3dd;

}

.container{

width: 1170px;

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

.navbar-header{

float: left;

}

img{

vertical-align: middle;

border: 0;

}

.login-background{

background-image: url(/images/register-background.jpg);

background-size: 100% auto;

padding: 50px 0 15%;

height: 633px;

}

.login-panel{

background-color: #fff;

opacity: .95;

border-radius: 10px;

position: relative;

padding: 0 80px 20px;

width: 350px;

}

.login-title{

color: #333;

font-weight: 300px;

font-size: 24px;

position: absolute;

top: 40px;

left: 35px;

}

.login-panel,.form-group{

padding: 50px 0 5px;

display: table;

margin-left: auto;

margin-right: auto;

}

.form-group{

margin-bottom: 15px;

width: 100%;

float: left;

padding-left: 15px;

padding-right: 15px;

}

.login-panel .form-group{

padding-top: 45px;

}

.input-block{

padding: 11px 0;

}

.has-feedback{

padding-right: 0;

position: relative;

}

.form-control{

color: #777;

height: 37px;

border: 1px solid #939393;

padding-right: 42.5px;

display: block;

width: 100%;

padding: 6px 12px;

font-size: 14px;

line-height: 1.42857143;

background-color: #fff;

border-radius: 4px;

}

.glyphicon{

position: absolute;

top: 0;

right: 0;

z-index: 2;

display: block;

width: 34px;

height: 34px;

line-height: 34px;

text-align: center;

pointer-events:none;

}

.auto-login{

padding-left: 0;

padding-right: 0;

text-align: left;

font-size: 12px;

color: #777;

vertical-align: middle;

width: 50%;

float: left;

}

label{

display: inline-block;

max-width: 100%;

}

.register-user{

padding-left: 0;

padding-right: 0;

text-align: right;

padding-top: 10px;

width: 50%;

float: left;

}

a{

text-decoration: none;

}

.row{

margin-right: -15px;

margin-left: -15px;

}

.login-button{

margin-top: 10http://px;

width: 100%;

position: relative;

min-height: 1px;

padding-right: 15px;

padding-left: 15px;

}

.btn{

background: #fa0;

color: #fff;

display: block;

width: 100%;

padding: 10px 16px;

font-size: 18px;

line-height: 1.33333;

border-radius: 6px;

font-weight: 400;

text-align: center;

vertical-align: middle;

}

效果图：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家学习Bootstrap有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。