直接贴代码了
<! Doctype html> <html lang = "en"> <éad> <éad> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <meta name = "wiewport" contenu = "width = device-width, initial-scale = 1"> <title> href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel = "Stylesheet"> <link href = "qikuai.css" rel = "Stylesheet"> <script 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/bootsstrap.min.js"> </ script> <Nav> <div> <div> <div> <a href = "JavaScript: void (0);"> <img src = "/ images / logo_navbar.png"> </a> </div> </div> </div> </-leader> <v> </v> <v> 登录到起筷 </v> <form> <v> <v> <v> <v> <v> <v> placeholder = "手机号 / 用户名 / 邮箱"> </ entrée> <span aria-hidden = "true"> </span> </ div> </div> <v> <div> <entrée id = "userIdentifier" placeholder = "登录密码"> </put> <span aria-hidden = "true"> </span> </v> </v> <v> <v> <v> <v> Type = "Checkbox"> </ entrée> <span> 自动登录 </span> </b label> </div> </div> </div> <div> <a href = "javascript: void (0);"> 注册新用户 </a> </div> <v> <div> <bouton </div> </ body> </html>
CSS 代码 ：
.navbar {hauteur: 108px; République de fond: sans répétition; Box-shadow: 0 0 5px # 999; Color d'arrière-plan: #FFF; Border-Bottom: 2px solide # e8e3dd;}. conteneur {largeur: 1170px; padding-droite: 15px; Padding-Left: 15px; marge droite: auto; marge-left: auto;}. Navbar-header {float: Left;} img {vertical-align: middle; Border: 0;}. Login-Background {Background-Image: URL (/images/register-background.jpg); taille arrière: 100% automatique; rembourrage: 50px 0 15%; Hauteur: 633px;}. Login-Panel {Background-Color: #FFF; Opacité: .95; Border-Radius: 10px; Position: relative; rembourrage: 0 80px 20px; Largeur: 350px;}. Login-title {Color: # 333; Police-poids: 300px; taille de police: 24px; Position: absolue; en haut: 40px; gauche: 35px;}. Login-Panel, .form-group {padding: 50px 0 5px; Affichage: table; marge-gauche: auto; marge-droite: auto;}. form-group {margin-bottom: 15px; Largeur: 100%; flottant: à gauche; Padding-Left: 15px; Padding-droite: 15px;}. Login-Panel .Form-Groupe {Padding-top: 45px;}. Input-block {padding: 11px 0;}. Has-Feedback {padding-right: 0; Position: relative;}. Form-Control {Color: # 777; hauteur: 37px; Border: 1px solide # 939393; padding-droite: 42.5px; Affichage: bloc; Largeur: 100%; rembourrage: 6px 12px; taille de police: 14px; Heure de ligne: 1.42857143; Color d'arrière-plan: #FFF; Border-Radius: 4px;}. Glyphicon {position: Absolute; en haut: 0; à droite: 0; Z-Index: 2; Affichage: bloc; Largeur: 34px; hauteur: 34px; Heure de ligne: 34px; Texte-aligne: Centre; Pointer-Events: Aucun;}. Auto-Login {Padding-Left: 0; rembourrage à droite: 0; Texte-aligne: gauche; taille de police: 12px; Couleur: # 777; Adigne vertical: milieu; Largeur: 50%; float: gauche;} étiquette {affichage: bloc de ligne; max-largeur: 100%;}. registre-user {padding-left: 0; rembourrage à droite: 0; Texte-aligne: à droite; Tableau de rembourrage: 10px; Largeur: 50%; float: gauche;} a {text-decoration: aucun;}. Row {margin-droite: -15px; margin-left: -15px;}. Login-Button {margin-top: 10px; Largeur: 100%; Position: relative; Min-Height: 1px; padding-droite: 15px; padding-left: 15px;}. btn {background: # fa0; Couleur: #FFF; Affichage: bloc; Largeur: 100%; rembourrage: 10px 16px; taille de police: 18px; hauteur de ligne: 1.33333; Border-Radius: 6px; Police-poids: 400; Texte-aligne: Centre; Vertical-Align: Middle;}：
如果大家还想深入学习 ， 可以点击这里进行学习 ， 再为大家附 3 个精彩的专题:
Bootstrap 学习教程
Bootstrap 实战教程
Bootstrap 插件使用教程
以上就是本文的全部内容 ， 希望对大家学习 bootstrap 有所帮助。