直接贴代码了
<! docType html> <html lang = "en"> <head> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catsible"content = "ie get"> <meta name = "viewport"contment = "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/bootsprap/3.3.3.4/js/js/bootstrap.min.js"</hed>] <header> <avi> <div> <div> <div> <a href = "javaScript : void (0);"> <img src = "/images/logo_navbar.png"> </a> </div> </div> </div> </div> <comp> <폼> id = "userIndifier"placeholder = "手机号 手机号/用户名/邮箱"> </input> <span aria-hidden = "true"> </span> </div> </div> <div> <div> <입력 id = "userIdentifier"placeholder = "登录密码 </div> <aria-hidden ="true "> <label> <입력 값 = "기억력"유형 = "Checkbox"> </input> <span> </span> </div> </div> </div> <div> <a href = "javaScript : void (0);"> </a> </div> <div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
CSS ： ：
.navbar {높이 : 108px; 배경 반복 : 비 반복; Box-Shadow : 0 0 5PX #999; 배경색 : #fff; Border-Bottom : 2px solid #e8e3dd;}. 컨테이너 {너비 : 1170px; 패딩-오른쪽 : 15px; 왼쪽 패딩 : 15px; 마진 오른쪽 : 자동; 마진-왼쪽 : 자동;}. Navbar-Header {float : left;} img {수직-알림 : 중간; 국경 : 0;}. Login-Background {Background-Image : url (/images/register-background.jpg); 배경 크기 : 100% 자동; 패딩 : 50px 0 15%; 높이 : 633px;}. Login-Panel {Background-Color : #fff; 불투명도 : .95; Border-Radius : 10px; 위치 : 상대; 패딩 : 0 80px 20px; 너비 : 350px;}. 로그인 타이틀 {색상 : #333; 글꼴 중량 : 300px; 글꼴 크기 : 24px; 위치 : 절대; 상단 : 40px; 왼쪽 : 35px;}. Login-Panel, .form-Group {패딩 : 50px 0 5px; 디스플레이 : 테이블; 마진 좌파 : 자동; 마진 오른쪽 : 자동;}. Form-Group {마진-바닥 : 15px; 너비 : 100%; 플로트 : 왼쪽; 왼쪽 패딩 : 15px; Padding-Right : 15px;}. Login-Panel .form-Group {Padding-Top : 45px;}. 입력-블록 {패딩 : 11px 0;}. Has-feedback {Padding-right : 0; 위치 : 상대;}. 양식-제어 {색상 : #777; 높이 : 37px; 국경 : 1px Solid #939393; 패딩-오른쪽 : 42.5px; 디스플레이 : 블록; 너비 : 100%; 패딩 : 6px 12px; 글꼴 크기 : 14px; 라인 높이 : 1.42857143; 배경색 : #fff; Border-Radius : 4px;}. Glyphicon {위치 : 절대; 상단 : 0; 오른쪽 : 0; z- 인덱스 : 2; 디스플레이 : 블록; 너비 : 34px; 높이 : 34px; 라인 높이 : 34px; 텍스트 정렬 : 센터; 포인터-이벤트 : 없음;}. 자동 로핀 {Padding-left : 0; 패딩-오른쪽 : 0; 텍스트 정렬 : 왼쪽; 글꼴 크기 : 12px; 색상 : #777; 수직 정상 : 중간; 너비 : 50%; float : left;} label {display : 인라인-블록; MAX-Width : 100%;}. Register-User {Padding-left : 0; 패딩-오른쪽 : 0; 텍스트 정렬 : 맞습니다. 패딩 탑 : 10px; 너비 : 50%; float : left;} a {text-decoration : none;}. row {margin-right : -15px; 마진-왼쪽 : -15px;}. 로그인-버튼 {마진-탑 : 10px; 너비 : 100%; 위치 : 상대; Min-Height : 1px; 패딩-오른쪽 : 15px; 왼쪽 패딩 : 15px;}. btn {배경 : #fa0; 색상 : #fff; 디스플레이 : 블록; 너비 : 100%; 패딩 : 10px 16px; 글꼴 크기 : 18px; 라인 높이 : 1.33333; Border-Radius : 6px; 글꼴 중량 : 400; 텍스트 정렬 : 센터; 수직 정상 : 중간;}效果图 ：
"
부트 스트랩 学习教程
부트 스트랩 实战教程
부트 스트랩 插件使用教程
以上就是本文的全部内容, 希望对大家学习 부트 스트랩 有所帮助。