Bootstrap은 세 가지 형태의 레이아웃, 즉 수직 형태, 인라인 형태 및 수평 형태를 제공합니다. 하나씩 소개하겠습니다. 관심있는 친구들이 함께 배울 것입니다.
수직 또는 기본 양식을 작성하십시오.
• 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>
인라인 형태 :
인라인 형태의 모든 요소는 왼쪽에 정렬되며 레이블은 나란히 있습니다. 인라인 양식을 만들려면 양식 태그에 클래스를 추가해야합니다.
.form-inline
<form role = "form"> <div> <label for = "name"> name </label> <input type = "text"id = "name"placeholder = "이름을 입력하십시오"> </div> <div> <label을 입력하십시오. Check </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 = "ind ="firstName "placeHolder ="이름을 입력하십시오 "> </div> </div> <div> <레이블에 대한 ="lastname "> last </label> <div> <intput type ="ind = "place holn" 이름 "> </div> </div> <div> <label> <입력 유형 ="Checkbox "> 기억 </label> </div> </div> <div> <버튼 유형 ="제출 "> 로그인 </div> </div> </form>
위는 편집기가 소개 한 일곱 번째 부트 스트랩 양식 레이아웃 예제 코드 세부 설명 (세 가지 양식 레이아웃)에 대한 완전한 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!