直接贴代码了
<! Doctype html> <html lang = "en"> <head> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-kompatibel" konten = "IE = edge"> <meta name = "viewport" content = "width = device-width, initial-scale = 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"> </cript> <script src = "http://apps.bdimg.com/libs/bootstrap/3.3.4/js/boottrap.min.min> </boottrap" <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" Placeholder = "手机号/用户名/邮箱"> </input> <span aria-hidden = "true"> </span> </div> </div> <div> <div> <input id = "UserImentifier" placeholder = "登录密码"> </input> <pan aria-hidden = "true"> </span> </Div> </input> <pan aria-hidden = "true"> </span> </Div> value = "Remember-Me" type = "centang kotak"> </input> <span> 自动登录 </span> </label> </div> </div> </div> <ver> <a href = "javascript: void (0);"> </a> </div> <v> <v> <butt> <button> </div> </body> </html>
CSS ：
.navbar {Height: 108px; Latar belakang-repeat: No-Repeat; Kotak-Shadow: 0 0 5px #999; Latar Belakang-Color: #FFF; Border-Bottom: 2px solid #e8e3dd;}. Container {width: 1170px; Padding-Right: 15px; Padding-left: 15px; margin-kanan: otomatis; margin-left: auto;}. navbar-header {float: left;} img {vertikal-align: tengah; Border: 0;}. Login-Background {latar belakang-gambar: url (/images/register-background.jpg); Ukuran latar belakang: 100% otomatis; Padding: 50px 0 15%; Tinggi: 633px;}. Login-panel {latar belakang-warna: #fff; opacity: .95; Border-Radius: 10px; Posisi: kerabat; padding: 0 80px 20px; Lebar: 350px;}. Login-title {Color: #333; Font-Weight: 300px; Ukuran font: 24px; Posisi: Absolute; Atas: 40px; Kiri: 35px;}. Login-Panel ,.Form-group {padding: 50px 0 5px; Tampilan: Tabel; margin-kiri: otomatis; margin-hak: auto;}. Form-group {margin-bottom: 15px; Lebar: 100%; float: kiri; Padding-left: 15px; Padding-Right: 15px;}. Login-Panel .Form-group {padding-top: 45px;}. Input-block {padding: 11px 0;}. HAD-FEEDBACK {Padding-Right: 0; Posisi: Relatif;}. Form-Control {Color: #777; Tinggi: 37px; Perbatasan: 1px Solid #939393; Padding-Right: 42.5px; Tampilan: Blok; Lebar: 100%; padding: 6px 12px; Ukuran font: 14px; Line-Height: 1.42857143; Latar Belakang-Color: #FFF; Border-Radius: 4px;}. Glyphicon {Position: Absolute; TOP: 0; Kanan: 0; z-index: 2; Tampilan: Blok; Lebar: 34px; Tinggi: 34px; Line-Height: 34px; Teks-Align: tengah; pointer-events: none;}. auto-login {padding-left: 0; Padding-Right: 0; Teks-Align: Kiri; font-size: 12px; Warna: #777; Vertikal-Align: tengah; Lebar: 50%; float: left;} label {display: inline-block; Max-Width: 100%;}. Register-Pengguna {Padding-left: 0; Padding-Right: 0; Teks-Align: Benar; Padding-top: 10px; Lebar: 50%; float: left;} a {text-decoration: none;}. row {margin-right: -15px; margin-left: -15px;}. login-tombol {margin-top: 10px; Lebar: 100%; Posisi: kerabat; Min-tinggi: 1px; Padding-Right: 15px; padding-left: 15px;}. btn {latar belakang: #fa0; Warna: #fff; Tampilan: Blok; Lebar: 100%; padding: 10px 16px; font-size: 18px; Line-Height: 1.33333; Border-Radius: 6px; Font-Weight: 400; Teks-Align: tengah; vertikal-align: tengah;}效果图 ：
如果大家还想深入学习 ， 可以点击这里进行学习 ， 再为大家附 3 个精彩的专题 ：
Bootstrap 学习教程
Bootstrap 实战教程
Bootstrap 插件使用教程
以上就是本文的全部内容 ， 希望对大家学习 bootstrap 有所帮助。