直接贴代码了
<！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有所帮助。