부트 스트랩은 세 가지 형태 레이아웃을 제공합니다 : 수직 형태, 인라인 형태 및 수평 형태
수직 또는 기본 양식을 작성하십시오.
• parent <form> 요소에 역할 = "form"을 추가하십시오.
• and 태그와 컨트롤을 클래스 .form-group과 함께 <div>에 넣습니다. 이것은 최고의 간격을 얻는 데 필요합니다.
• 모든 텍스트 요소 <input>, <textRea> 및 <elect>에 클래스를 추가하십시오.
<form role = "form"> <div> <label for = "name"> name </label> <input type = "text"id = "name"placeholder = "이름을 입력하십시오"> </div> <div> < "inputfile"> 파일 입력 </label> <입력 = "id ="inputfile "> <p> 이것은 블록 수준 텍스트의 예입니다. </p> </div> <div> <labe> <입력 유형 = "Checkbox"> 확인하십시오 </label> </div> <버튼 유형 = "제출"> 제출 </button> </form>
인라인 형태 :
인라인 형태의 모든 요소는 왼쪽에 정렬되며 레이블은 나란히 있습니다. 인라인 양식을 만들려면 Class.form-inline을 양식 태그에 추가해야합니다.
<form role = "form"> <div> <label for = "name"> name </label> <input type = "text"id = "name"placeholder = "이름을 입력하십시오"> </div> <div> <label을 입력하십시오. </div> <button type = "제출"> 제출 </button> </form>
디스플레이 효과는 다음과 같습니다.
참고 : 기본적으로 부트 스트랩의 입력, 선택 및 TextArea의 너비는 100%입니다. 인라인 양식을 사용하는 경우 양식 컨트롤에서 너비를 설정해야합니다.
수평 형태 : 다른 두 형태와는 달리 수평 양식을 만들려면 다음 단계를 따라야합니다.
• 부모 <양식> 요소에 클래스 .form-horizontal을 추가하십시오.
• 태그와 컨트롤을 클래스 .form-Group과 함께 <div>에 넣습니다.
• 레이블에 클래스를 추가하십시오.
예를 들어:
<form role = "form"> <div> <label for = "firstName"> name </label> <div> <입력 유형 = "text"id = "wirtName"placeHolder = "이름을 입력하십시오"> </div> </div> <div> <레이블에 대한 = "lastname"> last </label> <div> <input type = "ind ="place ""placehold " </div> <div> <div> <label> <입력 유형 = "Checkbox"> 기억 </label> </div> </div> </div> <div> <버튼 유형 = "제출"> 로그인 </div> </div> </form>
디스플레이 효과는 다음과 같습니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.