直接贴代码了
<! doctype html> <html lang = "en"> <head> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua content =" edge = edge "> 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/bootstrap/3 <AV> <div> <div> <div> <a href = "javascript: void (0);"> <img src = "/images/logo_navbar.png"> </a> </div> </div> </div> placeHolder = "手机号/用户名/邮箱"> </input> <span aria-hidden = "true"> </span> </div> </div> <div> <div> <อินพุต id = "ผู้ใช้" ผู้ใช้ "อินพุต> </div> </div> < type = "ช่องทำเครื่องหมาย"> </input> <span> 自动登录 </span> </label> </div> </div> </div> <div> <a href = "JavaScript: โมฆะ (0);"> 注册新用户 </a> </vid> <div> </div> </body> </html>
CSS 代码：
.navbar {ความสูง: 108px; พื้นหลังซ้ำ: ไม่ทำซ้ำ; Box-Shadow: 0 0 5px #999; พื้นหลังสี: #FFF; ขอบด้านล่าง: 2px Solid #E8E3DD;}. คอนเทนเนอร์ {Width: 1170px; Padding-Right: 15px; Padding-Left: 15px; มาร์จิ้น-ขวา: อัตโนมัติ; ขอบซ้าย: auto;}. navbar-header {float: left;} img {แนวตั้ง-แนว: กลาง; ชายแดน: 0;}. เข้าสู่ระบบพื้นดิน {background-image: url (/iMages/register-background.jpg); ขนาดพื้นหลัง: อัตโนมัติ 100%; Padding: 50px 0 15%; ความสูง: 633px;}. ล็อกอิน-พาเนล {พื้นหลังสี: #FFF; ความทึบ: .95; แนวชายแดน: 10px; ตำแหน่ง: ญาติ; Padding: 0 80px 20px; ความกว้าง: 350px;}. ล็อกอิน -title {color: #333; Font-Weight: 300px; ขนาดตัวอักษร: 24px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 40px; ซ้าย: 35px;}. ล็อกอิน-พาเนล, .form-group {padding: 50px 0 5px; แสดง: ตาราง; ขอบซ้าย: อัตโนมัติ; มาร์จิ้น-ขวา: auto;}. ฟอร์ม-กลุ่ม {มาร์จิ้น-ด้านล่าง: 15px; ความกว้าง: 100%; ลอย: ซ้าย; Padding-Left: 15px; Padding-Right: 15px;}. Login-Panel .Form-Group {padding-top: 45px;}. อินพุต-บล็อก {padding: 11px 0;}. มีการป้อนกลับ {padding-right: 0; ตำแหน่ง: ญาติ;}. การควบคุมแบบฟอร์ม {สี: #777; ความสูง: 37px; ชายแดน: 1px Solid #939393; Padding-Right: 42.5px; แสดง: บล็อก; ความกว้าง: 100%; Padding: 6px 12px; ขนาดตัวอักษร: 14px; ความสูงของสาย: 1.42857143; พื้นหลังสี: #FFF; แนวชายแดน: 4px;}. ไกลฟิคอน {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ขวา: 0; z-index: 2; แสดง: บล็อก; ความกว้าง: 34px; ความสูง: 34px; ความสูงของสาย: 34px; TEXT-ALIGN: CENTER; Eventer-events: none;}. auto-login {padding-left: 0; Padding-Right: 0; TEXT-ALIGN: ซ้าย; ขนาดตัวอักษร: 12px; สี: #777; แนวตั้ง-แนว: กลาง; ความกว้าง: 50%; ลอย: ซ้าย;} ฉลาก {display: inline-block; Max-Width: 100%;}. register-user {padding-left: 0; Padding-Right: 0; TEXT-ALIGING: ถูกต้อง; Padding-Top: 10px; ความกว้าง: 50%; Float: ซ้าย;} a {text-decoration: none;}. แถว {margin-right: -15px; ขอบซ้าย: -15px;}. ล็อกอินปุ่ม {ระยะขอบด้านบน: 10px; ความกว้าง: 100%; ตำแหน่ง: ญาติ; ต่ำสุด: 1px; Padding-Right: 15px; Padding-left: 15px;}. btn {พื้นหลัง: #fa0; สี: #FFF; แสดง: บล็อก; ความกว้าง: 100%; Padding: 10px 16px; ขนาดตัวอักษร: 18px; ความสูงของสาย: 1.33333; แนวชายแดน: 6px; Font-Weight: 400; TEXT-ALIGN: CENTER; แนวตั้ง-แนว: กลาง;}效果图：
如果大家还想深入学习， 可以点击这里进行学习， 再为大家附 3 个精彩的专题：
bootstrap 学习教程
bootstrap 实战教程
bootstrap 插件使用教程
以上就是本文的全部内容， 希望对大家学习 bootstrap 有所帮助。