트위터의 부트 스트랩은 현재 가장 인기있는 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다. 단순하고 유연하여 웹 개발을 더 빨리 만듭니다.
학습의 핵심 사항 :
1. 양식
2. 사진
이 레슨에서는 주로 부트 스트랩 양식 및 이미지 기능에 대해 배우고 내장 CSS 정의를 통해 다양한 풍부한 효과를 표시합니다.
하나. 형태
Bootstrap은 개발자가 사용할 수있는 풍부한 양식 스타일을 제공합니다.
1. 기본 형식
// 기본 양식 스타일 구현 <FORM> <DIV> <LABEL> 이메일 </label> <입력 유형 = "이메일"자리 표시기 = "이메일을 입력하십시오"> </div> <div> <label> 비밀번호 </label> input type = "placeHolder ="placeholder = "please please"> </div> </form>
참고 : 올바른 스타일은 입력 상자의 유형 유형이 올바르게 설정된 경우에만 제공 될 수 있습니다. 지원되는 입력 상자 컨트롤에는 텍스트, 비밀번호, DateTime, DateTime-Local, 날짜, 월, 시간, 주, 번호, 이메일, URL, 검색, 전화 및 색상이 포함됩니다.
2. 인라인 형태
// 양식을 정렬하고 떠 다니게하고 인라인 블록 인라인 블록 구조 <FORM>으로 작동합니다.
참고 : 768px 미만인 경우 독점 스타일이 복원됩니다.
3. 양식 그룹화
// <div> <div> ￥ </div> <input type = "text"> <div> .00 </div> </div> 전과 후 조각 추가
4. 수평 배열
// 요소를 수평으로 배열 한 <Form> <div> <label> email </label> <div> <입력 유형 = "이메일"자리 표시 자 = "이메일을 입력하십시오"> </div> </div> </form>
참고 : COL-SM 래스터 시스템은 여기에서 사용되며 다음 장은이를 설명하는 데 중점을 두는 반면, 제어 라벨은 상위 요소 스타일과 동기화를 나타냅니다.
5. 상자와 라디오 상자를 확인하십시오
// 체크 박스를 라인에 설정 <div> <label> <입력 유형 = "Checkbox"> sports "> sports"> sports </label> </div> <div> <label> input type = "checkbox"> music </label> </div> // 장애인 체크 박스 설정 <div> <label> <input type = "checkbox"disabled> music </div> <라벨> <라벨> <inposited the line> 유형 = "Checkbox"> Sports "> Sports </label> <label> <입력 유형 ="Checkbox "Disabled> Music </label> // 라디오 상자 설정 <Div> <label> <입력 유형 ="Radio "Name ="Sex "Disabled> Male </label> </div>
6. 드롭 다운 목록
// 드롭 다운 목록을 설정 <select> <옵션> 1 </옵션> <pluxt> 2 </옵션> <pluxt> 3 </옵션> <pluxt> 4 </옵션> <pluxt> 5 </옵션> </select>
7. 상태를 확인하십시오
// 오류 상태로 설정 <Div>
참고 : 다음과 같은 다른 상태가 있습니다.
스타일 설명 has-error 오류 상태 a-success success success warning 경고 상태 // 레이블 태그 동기화 해당 상태 <라벨> 성공을 가진 입력 </label>
8. 추가 아이콘을 추가하십시오
// 텍스트 오른쪽에 내장 된 텍스트 아이콘 <div> <label> 이메일 </label> <입력 유형 = "이메일"> <span "> </span> </div>
참고 : Glyphicon-OK 외에도 아래에 몇 가지 테이블이 있습니다.
스타일 설명 Glyphicon-OK 성공
9 크기를 제어하십시오
// 큰에서 작은 <입력 유형 = "비밀번호"> <입력 유형 = "암호"> <input type = "password">
참고 : 부모 요소 Form-Group-LG 및 Form-Group-SM을 조정하도록 설정할 수도 있습니다.
둘. 그림
Bootstrap은 개발자가 사용할 수있는 풍부한 사진 스타일을 제공합니다.
1. 이미지 모양
// 세 가지 모양 <img src = "img/pic.png"> <img src = "img/pic.png"> <img src = "img/pic.png"> // 반응 형 사진 <img src = "img/pic.png">
위의 것은 부트 스트랩 양식 및 편집자가 소개 한 사진과 관련된 내용입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!