이 기사는 주로 부트 스트랩 양식을 사용하는 기술을 소개합니다.
1. 부트 스트랩 기본 양식
텍스트 입력 상자, 드롭 다운 선택 상자, 라디오 버튼, 확인 버튼, 텍스트 필드 및 버튼 등의 형태의 공통 요소는 주로 포함됩니다.
먼저 기본 형식을 살펴 보겠습니다.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 기본 양식 </title> <link rel = "stylesheet"href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.csss/boottrap.min.csstrap.min.csstrap.min.cstrap.min. <form role = "form"> <div> <label for = "exampleInputeMail1"> 이메일 : </label> <입력 유형 = "이메일"id = "exampleInputeMail1"placeHolder = "이메일 주소를 입력하십시오"> </div> <div> <레이블에 대한 = "examplePassword1"> </label> <입력 유형 = "id =" "PlaceHolpass11" </div> <div> <labe> <입력 유형 = "Checkbox"> 비밀번호 기억 </label> </div> <버튼 유형 = "제출"> 로그인 </button> </form> </body> </html>
렌더링은 다음과 같습니다.
우리는 다른 클래스 이름을 추가하여 다른 효과를 달성 할 수 있습니다. 특정 양식 규칙은 다음 표에 나와 있습니다.
예를 들어:
<양식 역할 = "form"> ... </form>
2. 부트 스트랩 형태 제어
1) 입력 상자 입력
<양식 역할 = "form"> <div> <!-유형 유형을 추가해야합니다. 유형 유형이 지정되지 않은 경우 올바른 스타일을 얻지 못합니다 -> <input type = "email"placeholder = "이메일 입력"> </div> </form>
2) 선택 상자 선택을 당기십시오
<양식 역할 = "form"> <div> <!-단일 라인 드롭 다운 선택 상자-> <select> <sollite> 1 </옵션> <sollite> 2 </옵션> </select> </div> <div> <!-멀티 라인 선택 상자-> <다중> <pext> 1 </옵션> <pllation> 2 </옵션> </div> </form>
3) 텍스트 필드 TextRea
텍스트 필드는 원래 사용 방법과 동일하며, 설정 행은 높이를 정의 할 수 있으며 Cols를 설정하면 너비를 설정할 수 있습니다. 그러나 클래스 이름 "Form-Control"이 Textarea 요소에 추가되면 COLS 속성을 설정할 필요가 없습니다. 부트 스트랩 프레임 워크에서 "폼 제어"스타일 형태 제어는 100% 또는 자동이기 때문입니다.
<양식 역할 = "form"> <div> <!-rows = "3"높이 3 줄 설정-> <TextArea rows = "3"> </textarea> </div> </form>
4) 확인란
수직 배열 :
<양식 역할 = "form"> <div> <label> <입력 유형 = "checkbox"value = ""> checkbox </label> </div> </form>
수평 배열 :
<양식 역할 = "form"> <div> <label> <입력 유형 = "checkbox"value = "옵션 1"> checkbox1 </label> <label> <입력 유형 = "checkbox"value = "옵션 2"> checkbox2 </div> </form>
5) 단일 선택 버튼 라디오
수직 배열 :
<양식 역할 = "form"> <div> <label> <입력 유형 = "radio"name = "OptionsRadios"id = "옵션 라디오 1"옵션 = "love"checked> a </label> </div> <div> <!-확인란 또는 라디오 여부에 관계없이 레이블로 랩핑됩니다. </div> </form>
수평 배열 :
<양식 역할 = "form"> <div> <label> <입력 유형 = "radio"value = "옵션 1"name = "sex"> a </label> <라벨> <입력 유형 = "radio"value = "name ="sex "> b </label> </div> </form>
참고 : 확인란 및 레이블은 ".checkbox"라는 컨테이너에 배치됩니다. 라디오와 라벨은 ".Radio"라는 용기에 배치됩니다.
3. 부트 스트랩 양식 제어 상태
1) 초점 상태
초점 상태는 입력에 클래스 이름 양식 제어를 추가하여 달성됩니다. 부트 스트랩 프레임 워크에서 양식 컨트롤의 초점 상태는 개요의 기본 스타일을 삭제하고 그림자 효과를 다시 추가합니다.
<!-Form-Horizontal은 수평 형태 효과-> <form 역할 = "form"> <div> <div> <입력 유형 = "text"자리 표시기 = "포커스 상태"> </div> </div> </form>
2) 상태를 비활성화합니다
비활성화 해야하는 양식 컨트롤에 "비활성화"를 추가하기 만하면됩니다.
<입력 유형 = "text"자리 표시 자 = "양식이 비활성화되어 있으며, 입력 할 수 없습니다."비활성화>
3) 확인 상태
양식 확인의 경우 확인 상태 스타일도 제공해야합니다. 이러한 효과는 부트 스트랩에도 제공됩니다.
그것을 사용할 때는 양식 그룹 컨테이너에 해당하는 상태 클래스 이름 만 추가하면됩니다.
<form role = "form"> <div> <label for = "inputWarning1"> 경고 상태 </label> <입력 유형 = "text"id = "inputWarning1"inputWarning1 "placeHolder ="경고 상태 "> </div> <div> <label"inputError1 "> 오류 상태 </label> <input type ="text "id ="ind = "ind ="inputerR1 " for = "inputSuccess1"> 성공 상태 </label> <입력 유형 = "text"id = "inputSuccess1"placeholder = "success"> </div> </form>
렌더링은 다음과 같습니다.
해당 상태에 형식이 아이콘을 표시하려면 해당 상태에 클래스 이름 "Has-Feedback"만 추가하면됩니다 (이 클래스 이름에는 "Has-error", "Has-Warning"및 "Has-Success"가 포함되어야합니다).
4. 부트 스트랩 폼 버튼
1) 맞춤형 스타일 버튼
<버튼 타입 "버튼"> 기본 버튼 </button> <버튼 유형 = "버튼"> 기본 버튼 </button> <버튼 유형 = "버튼"> 메인 버튼> <버튼 타입 = "버튼"> 성공 단추 </button type = "button"> 정보 버튼> <button "> button </button> <button button
렌더링은 다음과 같습니다.
2) 부트 스트랩 버튼은 여러 라벨을 지원하며 다른 레이블로 만든 버튼은 다음과 같습니다.
<버튼 유형 = "버튼"> 버튼 태그 버튼 </button> <입력 유형 = "value ="입력 태그 버튼 "제출 태그 버튼 </span> <div> div 태그 버튼 </div> <a href ="## "> 태그 버튼 </a>
3) 버튼 크기
클래스 이름을 기본 버튼 ".BTN"에 추가하여 버튼의 크기를 제어하십시오.
<버튼 유형 = "버튼"> 일반 버튼 </button> <버튼 유형 = "버튼"> 큰 버튼 </button> <버튼 유형 = "버튼"> 작은 버튼 </button>
4) 블록 버튼 (모바일 터미널에서 더 많이 사용됨)
블록 버튼 : 버튼 너비는 전체 상위 컨테이너 (너비 : 100%)를 채우고 패딩 및 마진 값이 없습니다.
부트 스트랩은 클래스 이름 "btn-block"을 제공합니다. 버튼은이 클래스 이름을 사용하여 블록 버튼을 구현할 수 있습니다 (자세한 내용은 bootstrap.css 파일 라인 2340에서 줄 2353을 참조하십시오).
<버튼 유형 = "버튼"> 큰 버튼 </button> <버튼 타입 = "버튼"> 일반 버튼 </button> <버튼 유형 = "버튼"> 작은 버튼 </button>
렌더링은 다음과 같습니다.
5. 부트 스트랩 폼 버튼 상태
부트 스트랩에서 버튼의 상태 효과는 주로 활성 상태와 비활성 상태의 두 가지 유형으로 나뉩니다.
1) 활성 상태 : 주로 여러 유형의 버튼 서스펜션 상태 (: 호버), 클릭 상태 (: Active) 및 Focus State (: Focus)가 포함됩니다.
2) 상태를 비활성화합니다
버튼을 비활성화하는 두 가지 방법이 있습니다.
방법 1 : 태그에 비활성화 된 속성을 추가합니다
방법 2 : 요소 레이블에 클래스 이름 "disabled"추가
이 둘의 주요 차이점은 다음과 같습니다.
".disabled"스타일은 버튼의 기본 동작을 금지하지 않습니다. 요소 레이블에 "비활성화 된"속성을 추가하는 방법은 요소의 기본 동작을 금지 할 수 있습니다.
6. 판사 이미지
부트 스트랩에서는 이미지 스타일에 대한 다음 스타일이 제공됩니다.
사용 방법 : 다음과 같이 IMG 태그에 해당 클래스 이름을 추가하십시오.
<img src = "http://img.blog.csdn.net/2016072615143225"> <img src = "http://img.blog.csdn.net/20160726151432225"> <img src = "http://img.blog.csdn.net/2016072615143225">
실행 효과는 다음과 같습니다. 오른쪽의 결과 창을보십시오.
7. 부트 스트랩 아이콘
부트 스트랩은 다음과 같이 200 개의 다른 아이콘을 제공합니다.
사용 방법 : 다음과 같이 해당 아이콘 클래스 이름을 태그에 추가하십시오.
<span> </span>
<span> </span>
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
일련의 기사 :
Magical Bootstrap 기본 레이아웃 //www.vevb.com/article/89278.htm에 처음 접촉했습니다.
처음으로 Magical Bootstrap Grid System //www.vevb.com/article/89333.htm에 연락했습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.