부트 스트랩은 세 가지 형태 레이아웃을 제공합니다 : 수직 형태, 인라인 형태 및 수평 형태
수직 또는 기본 양식을 작성하십시오.
• parent <form> 요소에 역할 = "form"을 추가하십시오.
• and 태그와 컨트롤을 클래스 .form-group과 함께 <div>에 넣습니다. 이것은 최고의 간격을 얻는 데 필요합니다.
• 모든 텍스트 요소 <input>, <textRea> 및 <elect>에 클래스를 추가하십시오.
인라인 형태 :
인라인 형태의 모든 요소는 왼쪽에 정렬되며 레이블은 나란히 있습니다. 인라인 양식을 만들려면 Class.form-inline을 양식 태그에 추가해야합니다.
수평 형태 : 다른 두 형태와는 달리 수평 양식을 만들려면 다음 단계를 따라야합니다.
• 부모 <양식> 요소에 클래스 .form-horizontal을 추가하십시오.
• 태그와 컨트롤을 클래스 .form-Group과 함께 <div>에 넣습니다.
• 레이블에 클래스를 추가하십시오.
부트 스트랩 형태 레이아웃 스타일은 다음과 같습니다
구현 코드 :
<양식 역할 = "form"> <fieldset> <Legend> 데이터 소스 구성 </rEgend> <div> <레이블 ""ds_host "> hostname </label> <div> <입력 id ="ds_host "type ="text "placeholder ="192.168.1.161 "/> <label for ="ds_name "> <input id = "ds_name"type = "text"placeholder = "msh"/> </div> </div> <div> <label for = "ds_username"> username </label> <div> <입력 id = "ds_username"type = "text"placeholder = "root"/> <label </lade> <inpose " id = "ds_password"type = "password"placeholder = "123456"/> </div> </fieldset> <fieldset> <legend> 선택 관련 테이블 </legend> <div> <label for = "disabledselect"> 테이블 이름 </label> <div> <disabledect "</felse> <옵션> select> select> <fieldset> <egend> 필드 이름 </범례> <div> <label for = "disabledselect"> 테이블 이름 </label> <div> <select id = "disabledselect"> <sollite> 선택 없음 </옵션> <emplion> 선택 없음 </select> </div> </fieldset> </form>
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 멋진 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.