수입 : <를 링크 REL = " 이 스타일 " href를 = " 부트 스트랩-3.3.7 / CSS / bootstrap.css에 " > 이동기 우선 : 적절한 도면 줌 터치 필요한 보장하기 <HEAD>를 뷰포트 간의 메타 데이터를 추가 태그입니다. <메타 NAME = " 뷰포트 " 함량 = " 폭 = 폭있어서, 초기 스케일 = 1 " > 일반적인 스타일 클래스 1 용기 (1) . 컨테이너 (2) 컨테이너 - 오일 2 . 격자 시스템 광고는 최대 12로 분할된다 CAN 얼마나 많은 열의를 차지 설정 탭 1 . 2. COL-XX - ** 나타냅니다 XX : 프리젠 테이션 스타일에 적합한 화면 크기 - XS 전화 - SM 태블릿 - MD 데스크탑 모니터 - LG 대형 스크린 ** : 얼마나 많은 계정을 나타냅니다 - :. 1 ~ 12 인 범위 3. COL을 오프셋 - XX - ** : 빈 여러 왼쪽에! (4) 다음의 열 (12 개 부분으로 나뉘어 기록 라인) 중첩 지지체 (5). 열을 정렬한다. 1. 푸시 - COL-XX * -> 우측 푸쉬 - 2. COL-XX-풀업 * > 좌측 손잡이 6.clearfix :이 속성과 다른 높이 동일한 회선 레이블이 레이블 높이 각각의 라벨도가 높은 대상이 될 수있는 경우 (3 개) . 레이아웃 스타일 4 . 형태 5. 형태 6 . 버튼 7 . 이미지 8 개 . 보조 클래스 1 텍스트 색상 이 . 배경 색상 3 빠른 부동 4 지우기 플로트 #을 - 로그인 인증 간단한 예를 들어 <! DOCTYPE의 HTML을> <HTML LANG = " EN " > <head> <메타 HTTP-당량 = " 콘텐츠 유형 " 캐릭터 세트 = " UTF-. 8 "> <메타 HTTP-당량 = " X-UA 호환 " 함량 = " IE = 가장자리 " > <메타 NAME = " 뷰포트 " 함량 = " 폭 = 기기 폭 초기 스케일 = 1 " > <링크 REL = " 스타일 시트 " HREF = " 부트 스트랩-3.3.7 / CSS / bootstrap.css " > <제목> 제목 </ 제목> <스타일> 신체 { 배경 색 : #의 dddddd; } . 여백 - 상단 : 50 픽셀; } </ 스타일> </ head> <body> <div 클래스 = " 용기 " > <DIV 클래스 = " 행 " > <DIV 클래스 = " COL-MD-4 COL-MD-오프셋 4 로그인 박스 " > <form> <H2 클래스 = " 텍스트 중심 " >请登录</ H2> <div 클래스 = " <라벨 용 = " exampleInputEmail1 "用户名</ 라벨>> <input 타입 = " 이메일 " 클래스 = " 폼 제어 " ID = " exampleInputEmail1 " 자리 = " 이메일 " > <SPAN> </ SPAN> </ div> <DIV 클래스 = " 폼 그룹 " > <라벨 에 대한 = "exampleInputPassword1 " > 비밀번호 </ 라벨> <input 타입 = " 패스워드 " 클래스 = " 폼 제어 " ID = " exampleInputPassword1 " 자리 = " 비밀 " > <SPAN> </ SPAN> </ div> <div 클래스 = " 체크 박스 " > <라벨> <input 타입 = " 체크 박스 " > 记住我 </ 라벨> </ DIV> <버튼형 = " 버튼" 클래스 = " btn을 BTN 기본 " ID = " B1 " >提交</ 버튼> </ FORM> </ DIV> </ DIV> </ DIV> <script src에 = " ../JQtest/jquery-3.4. 1.min.js " > </ script> <script> $ ( " #의 B1 " ) .click (함수 () { $ ( " 입력 :하지 ([TYPE = '체크 박스']) " ) .each (함수 ( ) { 경우 ($ (이) .val ().길이 === 0) { var 키워드 =. $합니다 (이) .prev () 텍스트 (); $합니다 (이) 다음 내용 () 텍스트 (키워드. + " 비어 있지 않음 " ) .. $합니다 (이) .parent () addClass ( " 이 오류 " ) ; } }); }); // 입력 상자에 경고 색을 체결하지 않는 경우, 포커스를 취득 ($ " 입력 :하지 ([유형 = '확인란']) " ) .focus (함수 () { $를합니다 (이 .) 다음 내용 () 문자 ( '' ) . $ (이 본) .parent () removeClass ( " 보유 오류 " ) }); </ script> </ body> </ HTML>