直接贴代码了
<!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个精彩的专题:
ブートストラップ学习教程
ブートストラップ实战教程
ブートストラップ插件使用教程
以上就是本文的全部内容、希望对大家学习ブートストラップ有所帮助。