直接貼代碼了
<！ 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有所幫助。