直接贴代码了
<！doctype html> <html lang = "en"> <head> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "viewport" content = "width =" width = link = 1 " href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel = "styleSheet"> <link href = "qikuai.css" rel = "styleSheet"> <スクリプトsrc = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/boottrap/3.3.4/js/boottrap.min.js"> </< <Nav> <div> <div> <div> <a href = "javascript：void（0）;"> <img src = "/mages/logo_navbar.png"> </a> </div> </div> </header> <div> <div> <dividid = div> <> <> <div> <> <> <> <> <> <> <> <> <> <> <> <> < placeholder="手机号/用户名/邮箱"></input> <span aria-hidden="true"></span> </div> </div> <div> <div> <input id="userIdentifier" placeholder="登录密码"></input> <span aria-hidden="true"></span> </div> </div> <div> <div> <div> <label> <input value="remember-me" type = "Checkbox"> </input> <span> </div> </body> </html>
CSS代码：
.navbar {height：108px;バックグラウンドリピート：ノーリピート。 Box-Shadow：0 0 5px＃999;バックグラウンドカラー：#fff; Border-Bottom：2px Solid＃e8e3dd;}。コンテナ{width：1170px;パディング右：15px;パディング左：15px;マージン右：自動;マージン左：auto;}。navbar-header {float：left;} img {vertical-align：middle;境界：0;}。login-background {background-image：url（/images/register-background.jpg）;バックグラウンドサイズ：100％Auto;パディング：50px 0 15％;高さ：633px;}。login-panel {background-color：#fff;不透明：.95;ボーダーラジウス：10px;位置：相対;パディング：0 80px 20px;幅：350px;}。login-title {color：＃333; font-weight：300px;フォントサイズ：24px;位置：絶対;トップ：40px;左：35px;}。login-panel、.form-group {padding：50px 0 5px;表示：テーブル;マージン左：自動;マージン右：auto;}。form-group {margin-bottom：15px;幅：100％;フロート：左;パディング左：15px;パディングライト：15px;}。login-panel .form-group {padding-top：45px;}。入力block {padding：11px 0;}。has-feedback {padding-right：0;位置：相対;}。form-control {color：＃777;高さ：37px;国境：1pxソリッド＃939393;パディング右：42.5px;表示：ブロック;幅：100％;パディング：6px 12px;フォントサイズ：14px;ラインハイト：1.42857143;バックグラウンドカラー：#fff; Border-radius：4px;}。glyphicon {position：absolute;上：0;右：0; z-index：2;表示：ブロック;幅：34px;高さ：34px;ラインハイト：34px;テキストアライグ：センター;ポインターイベント：なし;}。auto-login {padding-left：0;パディング右：0;テキストアライグ：左;フォントサイズ：12px;色：＃777;垂直アライイン：中央;幅：50％;フロート：左;} label {display：inline-block;最大幅：100％;}。レジスタユーザー{パディング左：0;パディング右：0;テキストアライグ：右;パディングトップ：10px;幅：50％; float：left;} a {text-decoration：none;}。row {margin-right：-15px;マージン左：-15px;}。login-button {margin-top：10px;幅：100％;位置：相対; MIN-HEIGHT：1PX;パディング右：15px;パディング左：15px;}。btn {background：＃fa0;色：#fff;表示：ブロック;幅：100％;パディング：10px 16px;フォントサイズ：18px;ラインハイト：1.33333;ボーダーラジウス：6px; font-weight：400;テキストアライグ：センター;垂直アライイン：中間;}效果图：
如果大家还想深入学习、可以点击这里进行学习、再为大家附3个精彩的专题：
ブートストラップ学习教程
ブートストラップ实战教程
ブートストラップ插件使用教程
以上就是本文的全部内容、希望对大家学习ブートストラップ有所帮助。