直接贴代码了
<!doctype html> <html lang =“ en”> <head> <head> <head> <meta charset =“ utf-8”> <meta http-equiv =“ x-ua-compatible” x-ua-compatible“ content =“ ie = geded” ie =“ ie =” ie = <meta name =“ viewport” href =“ http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css” rel =“ stylesheet”> <link href =“ qikuai.css” src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head></head><body> <header> <nav> <div> <div> <div> <a href="javascript:void(0);"> <img src="/images/logo_navbar.png"> </a> </div> </div> </div> </header> <div> <div> <div>登录到起筷</div> <form> <div> <div> <div> <input id="userIdentifier"占位符=“手机号/用户名/邮箱”> </input> <span aria-hidded =“ true”> </span> </div> </div> </div> </div> <div> <div> <div> <input ID =“ userIdentifier” listerifier“ lostholder =”> </input> </input> <span aria-hiddend = <span aria-hiddide = <span aria-hiddend = value="remember-me" type="checkbox"></input> <span>自动登录</span> </label> </div> </div> </div> <div> <a href="javascript:void(0);">注册新用户</a> </div> <div> <div> <button>登 录</button> </div> </div> </div> </form> </div> </div> </body> </html>
CSS代码:
.navbar {高度:108px;背景重复:无重复;盒子阴影:0 0 5PX#999;背景色:#FFF;边界底:2px实心#e8e3dd;}。容器{width:1170px;垫右:15px;左填充:15px;边缘权利:自动;边距 - 左:auto;}。navbar-header {float:left;} img {vertical-align:中间;边框:0;}。登录 - 贝克格林{background-image:url(/images/register-background.jpg);背景大小:100%自动;填充:50px 0 15%;高度:633px;}。login-panel {background-color:#fff;不透明:.95;边界拉迪乌斯:10px;位置:相对;填充:0 80px 20px;宽度:350px;}。登录标题{颜色:#333;字体重量:300px;字体大小:24px;位置:绝对;顶部:40px;左:35px;}。登录面板,.form-group {padding:50px 0 5px;显示:表;左翼:自动;边缘右:自动;}。form-group {margin-bottom:15px;宽度:100%;浮子:左;左填充:15px; padding-right:15px;}。登录面板.form-group {padding-top:45px;}。input-block {padding:11px 0;}。位置:相对;}。形式控制{颜色:#777;身高:37px;边界:1PX实心#939393;填充右:42.5px;显示:块;宽度:100%;填充:6px 12px;字体大小:14px;线高:1.42857143;背景色:#FFF; Border-Radius:4px;}。字形{位置:绝对;顶部:0;右:0; z索引:2;显示:块;宽度:34px;身高:34px;线高:34px;文字平衡:中心;指针候选:无;}。auto-login {padding-left:0;右右:0;文本平衡:左;字体大小:12px;颜色:#777;垂直分组:中间;宽度:50%; float:左;} label {display:inline-block;最大宽度:100%;}。寄存器 - 用户{padding-left:0;右右:0;文本合格:对;填充:10px;宽度:50%; float:left;} a {text-decoration:none;}。左键:-15px;}。宽度:100%;位置:相对;最小值:1px;垫右:15px; padding-left:15px;}。btn {背景:#fa0;颜色:#fff;显示:块;宽度:100%;填充:10px 16px;字体大小:18px;线高:1.33333;边界拉迪乌斯:6px;字体重量:400;文字平衡:中心;垂直空置:中间;}效果图:
如果大家还想深入学习,可以点击这里进行学习,再为大家附,再为大家附3::
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容,希望对大家学习bootstrap有所帮助。