부트 스트랩은 다음 유형의 형태 레이아웃을 제공합니다.
• 수직 형태 (기본값)-> 이것은 잘 보이지 않으며 모든 모바일 버전이며 PC 버전은 행을 차지하며 잘 보이지 않습니다.
• 인라인 형태-> 이것이 당신이 원하는 것이라고 생각하고, PC 버전은 수평 행에 반응하며, 모바일 버전은 수직 행에 응답합니다.
• 그리드 시스템이있는 수평 형태-> 제어 디스플레이
1. 수직 형태
수직 형태 사용을위한 표준 단계
1. <양식> 요소에 역할 = "form"을 추가하십시오.
2. 태그와 컨트롤을 <div>에 "form-group"으로 배치하여 최고의 간격을 얻으십시오.
3. 모든 텍스트 요소 <input>, <textRea> 및 <elect>에 "Form-Control"스타일을 추가하십시오.
<양식 역할 = "form"> <div> <label for = "name"> name </label> <input type = "text"id = "name"placeholder = "이름을 입력하십시오"이름을 입력하십시오 "> </div> <div> <label for ="name "> age </label> <input type ="id = "name"placeholder = "Age"</div> </compon> </div> </div> </div>
2. 인라인 레이아웃
인라인 레이아웃은 수직 레이아웃과 정확히 동일하지만 <form role = "form">에 class = form-inline을 추가해야합니다.
<양식 역할 = "form">
이러한 인라인 레이아웃을 사용한 후 큰 화면이 수평으로 표시되고 작은 화면이 수직으로 표시됩니다.
작은 화면 :
큰 화면 :
3. 수평 형태
수평 형태는 라벨 태그와 컨트롤 (입력, 버튼) 사이의 레벨을 나타냅니다.
사용 단계는 다음과 같습니다.
• 부모 <양식> 요소에 클래스 .form-horizontal을 추가하십시오.
• 태그와 컨트롤을 클래스 .form-Group과 함께 <div>에 넣습니다.
• 레이블에 클래스를 추가하십시오.
<form role = "form"> <div> <label for = "name"> name </label> <div> <input type = "text"id = "name"placeholder = "이름을 입력하십시오"> </div> </div> <div> <라벨 "이름"> age </label> <div> <ind id = "name" "placeholder ="</div> </form>
Form-Horizontal을 사용한 후에 만 입력 제어를 DIV로 설정하고 DIV는 그리드 시스템을 사용할 수도 있습니다. Form-Horizontal Style은 래스터에서 행처럼 작용하는 .form-group의 동작을 변경합니다.
4. 확인란 및 라디오
이 두 컨트롤은 부트 스트랩에서 특별합니다. 때때로 그들은 수평으로 배열되어야하며 때로는 수직으로 배열되어야합니다.
그것은 또한 형태와 같으며, 또한 감소되어 있습니다.
• 인라인 디스플레이가 필요한 경우 외부 레이어로 둘러싸인 레이블 클래스를 확인란-인라인으로 설정하십시오.
• 기본 수직 디스플레이가 필요한 경우 외부 레이어로 둘러싸인 레이블 클래스를 Heckbox로 설정하십시오.
<양식 역할 = "form"> <!-check-> <div> <label> <입력 유형 = "checkbox"value = ""> banana </div> <label> <input type = "checkbox"value = ""> apple </label> <div> <div> <div> <label> <label ""> watermelon </div> <div> <intut 유형 = "checkbox"value = ""> banana </div> </div> <div> <label> <input type = "checkbox"value = ""> apple </label> </div> <div> <label> <input type = "checkbox"value = ""> watermelon </label> </div> <!-싱글 선택-> div> <intion = "옵션에서" "옵션으로 표시됩니다. 수표> male </label> </div> <div> <label> <입력 유형 = "radio"name = "OptionRadios"value = "옵션 2"Checked> female </label> </div> <div> <label> <입력 유형 = "radio"name = "옵션 라디오"value = "옵션 1"cheecked> male </label> </div> <label> <inputy type = "radio" "raida" value = "옵션 2"checked> female </label> </div> </form>
디스플레이 효과는 다음과 같습니다.
5. 정적 컨트롤
정적 컨트롤은 값을 변경할 수없는 컨트롤을 나타냅니다. 부트 스트랩에서는 수평 형식의 형태 태그 뒤에 일반 텍스트를 배치해야 할 때 <p>에서 클래스 = "form-control-static"을 사용하십시오.
<양식 역할 = "form"> <div> <labe> name </label> <div> <p> liu xuande </p> </div> </div> </form>
디스플레이 효과는 다음과 같습니다.
6. 도움말 텍스트를 양식하십시오
부트 스트랩 양식 HELP TEXT는 일반적으로 입력 프롬프트를 나타냅니다.
<양식 역할 = "form"> <div> <입력 유형 = "text"> <span> 특별 알림이 없으면 입력하지 마십시오. </span> </div> </form>
디스플레이 효과는 다음과 같습니다.
이 외에도 Bootstrap에는 입력 높이를 제어하는 데 사용되는 많은 스타일 열이 있습니다. 입력이 성공적이든 등.이를 확인하고 해당 키워드를 찾아 나중에 기록하십시오.
위는 편집기가 소개 한 부트 스트랩 양식 레이아웃입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!