형태
기본 형태
입력, TextArea 및 양식에서 선택의 경우 일반적으로 요소의 기본 너비를 100%로 설정하는 클래스 "Form-Control"을 추가합니다 (아래 언급 된 인라인 양식과 같은 절대가 아님). 그리고 각 요소 (입력 할 레이블 및 요소 포함)는 "Form-Group"과 함께 추가됩니다. 스타일이 하나뿐입니다. 마진 바닥 : 15px.
<form action = ""> <div> <label for = ""> username : </label> <input type = "text"/> </div> <div> <label for = ""> 비밀번호 : </label> <입력 유형 = "password"/> </div> </form>
인라인 형태
"Form-inline"을 가장 바깥 요소 (Form-Group의 부모 요소)에 추가함으로써. 모든 형태의 요소가 한 줄에 충분한 폭을 표시 함을 나타냅니다 (충분한 너비). ".form-inline .form-Group"은 인라인 블록으로 표시됩니다. ".form-inline .form-control"의 너비는 자동입니다. 이것은 한 줄로 표시되도록합니다.
<form action = ""> <div> <label for = ""> username : </label> <input type = "text"/> </div> <div> <label for = ""> 비밀번호 : </label> <입력 유형 = "password"/> </div> </form>
수평 형태
정상 및 인라인 형태와 달리. 한 줄에 레이블 및 입력 양식 요소를 표시하려면 "Form-Horizontal"을 사용해야합니다. 이러한 종류의 조인트 "Form-Group"은 그리드 시스템의 "행"과 동일합니다. 따라서 서브 클래스에는 "col-md-*"가 있고 레이블의 "Control-Label"-". Form-Horizontal. control-label"은 올바른 정렬 텍스트의 효과가 있습니다. 이것을 추가하지 않으면 레이블과 입력이 호환되지 않는 것처럼 보입니다.
<form action = ""> <div> <label for = ""> username : </label> <div> <input type = "text"/> </div> </div> <div> <label for = ""> password : </label> <div> <입력 유형 = "password"/> </div> </div> </form>
형태 크기
입력 크기를 제어하는 것은 "입력 -SM"및 "입력 LG"로 입력 입력 상자를 정상보다 작거나 크게 보이게합니다. 이에 해당하는 것은 레이블의 텍스트 크기입니다. 부모 "Form-Group"에 동시에 "Form-Group-SM"및 "Form-Group-LG"를 추가해야합니다. 위의 데모의 비밀번호 입력 상자에서와 같이.
입력 상자
HTML5에서 입력 박스 태그의 유형은 더 많은 유형을 지원합니다. 텍스트, 비밀번호, 데이터 타임, Datatime-Local, Date, Month, Time, Week, Number, 이메일, URL, 검색, 전화 및 색상이 있습니다. 올바른 스타일은 특정 유형에 할당 된 라벨에만 표시 될 수 있습니다. 일부 요소는 휴대 전화에만 영향을 줄 수 있습니다.
드롭 다운 박스 선택
입력 상자와 유사합니다. 입력을 선택하여 "Form-Control"클래스를 추가했습니다.
<form action = ""> <div> <label for = "" "> 선택 : </label> <div> <select name =" "id =" "> <옵션 값 =" "> html </옵션> <옵션 값 =" "> css </옵션> <옵션 값 =" "> javascript </옵션> <옵션 value =" "> java <옵션 = 옵션 = 옵션 </옵션> < value = ""> nodejs </옵션> </select> </div> </form>
col-md-pull-*는 왼쪽 오프셋입니다.
텍스트 필드
위와 비슷합니다.
<form action = ""> <div> <label for = ""> textRea : </label> <div> <textRea name = ""id = ""rows = "3"> hello </textRea> </div> </div> </form>
다중 및 라디오 박스
라디오 및 확인란 요소를 한 줄로 표시하고 레이블과 정렬하기 위해. 부트 스트랩은 두 가지 옵션을 제공합니다. 하나:
<div> <label for = ""> <입력 유형 = "radio"name = "sex"/> male <input type = "radio"name = "sex"/> female <input type = "radio"name = "sex"/> confidential </label> <레이블에 대한 label "> <"checkbox "/> html <입력 유형 ="checks box <input <input 유형 = "CheckBox"/> JavaScript </labaL> </div>
라벨 자체는 인라인 블록입니다. 그러나 .radio, .checkbox 자체가 차단됩니다.
따라서 여러 라디오 나 확인란을 하나의 레이블로 감싸서 전문가가 아닌 것으로 보입니다 (haha). 또한 많은 사람들도 매우보기 흉한 것입니다. 두 번째 글쓰기 방법은 여기에 있습니다.
<div> <label for = ""> <input type = "radio"name = "sex"/> male </label> <label for = ""> <입력 유형 = "radio"name "name"name = "sex"/> </label> <label for = ""> <입력 유형 = "radio"name = "sex"/> confidential </label> <br /> <label "> <input"/> html. for = ""> <input type = "checkbox"/> css </label> <label for = ""> <input type = "checkbox"/> javaScript </labaScript> </div>
양식 검증
HAS-SUCCESS : 성공, 녹색.
경고, 노란색.
has-error : 오류, 빨간색.
해당 스타일을 "Form-Group"에 추가하십시오. 더 나은 검증을 위해 "Has-feedback"을 계속 추가 할 수 있습니다. 그런 다음 입력 후 요소 레벨에 "Form-Control-Feedback"을 추가하십시오 ( "Form-Control"). 의미론은 명확하고 명확합니다. 코드는 다음과 같습니다.
<form action = ""> <div> <label for = ""> username : </label> <div> <input type = "text"/> <span> </span> </div> </div> <div> <label for = ""> </label> <div> <입력 유형 = "text"/> <span> </div> <div> <div> <label for = "> 이메일. </label> <div> <입력 유형 = "text"/> <span> </span> </span> </form>
단추
멀티 버튼 및 버튼 스타일
부트 스트랩에는 다양한 버튼 스타일이 있습니다. 버튼, a, 입력, 스팬, div 등은 "btn btn 스타일"이있는 한 버튼이 될 수 있습니다. 그러나 더 나은 호환성과 가독성을 위해서는 이러한 방식으로 사용하지 않는 것이 가장 좋습니다. 버튼 태그를 사용하십시오.
<버튼> 버튼 </button> <버튼> 버튼 </button> <butty> 버튼 </button> </button> 버튼 </button> </button> <버튼> 버튼 </button> <!-btn- 블록은 버튼을 독점적으로 만듭니다 행-> <버튼> 버튼 </button> <버튼> 버튼 </button> <버튼> 버튼 </button> <버튼> 버튼 </button> </button> </button> <버튼> 버튼 </button> </button> 버튼 </button> </button> <버튼> 버튼 </button> <버튼> 버튼 </button>
버튼 크기
위에서 언급했듯이 "btn-xs", "btn-sm", "btn-lg"를 사용하여 버튼 크기를 설정하십시오.
버튼 상태
위에서 언급했듯이 효과적인 것은 "활성"및 "초점"입니다.
그림
IMG- 응답 : 반응 형 사진, 주로 반응 형 디자인을 목표로합니다.
IMG 라운드 : 둥근 모서리.
IMG-Circle : 라운드.
IMG-Thumbnail : 외부 층에 추가 된 테두리로 표시되는 썸네일.
상
BootStart에는 많은 작은 아이콘이 내장되어 있습니다. 사용 방법은 다음과 같습니다. 실제로, 그것은 위의 "양식-제어 피드백"에 사용되었습니다. 그 중 "Glyphicon"은 필수입니다.
<span> </span>
입력 상자 그룹
입력 상자 그룹은 "입력 그룹"입니다. "입력 그룹 -addon"또는 "입력 그룹 BTN"을 사용하려면 접미사 (예 : 전자 메일 접미사) 및 접두사 (Money Symbols ￥, $ 등)를 추가해야합니다. 단순하고 명확한 의미론. 다음과 같이 :
<!-email-box-> <div> <입력 유형 = "text"/> <span>@gmail.com</span></div><! ---currency->> <<div> <span>$</span> input type = "text"> <span> .00 </span> </div> <!-단일 선택 --> <div> 유형 = "텍스트"/> </div> <!-객관식-> <div> <span> <입력 유형 = "checkbox"/> </span> <입력 유형 = "text"/> </div> <!-taobao input box 그룹-> <div> <div> <버튼 데이터-토글 = "드롭 다운"> href = "javaScript : void (0)"> baby </a> </li> <li> <a href = "javaScript : void (0)"> shop </a> </li> </ul> </div> <입력 유형 = "text"/<span> </button> </div>
요약
"Form-Horizontal"및 "Form-Inline"은 양식 그룹의 가장 바깥 쪽 레이블입니다.
양식 그룹은 "Form-Group"을 부모 요소로 간주합니다. 비슷한 것은 "입력 그룹"과 "버튼 그룹"이며 향후에 사용할 수 있습니다. 그들은 모두 크기가 될 수 있습니다.
"Form-Group-LG", "Input-LG", "Input-Group-LG", "BTN-LG"등
검증 스타일에는 "has-error", "has-success", "has warning"이 있습니다. "Has-feedback"을 동일한 요소에 추가 할 수 있습니다. 검증을보다 완전하게하기 위해.
버튼과 크기를위한 많은 스타일이 있습니다.
그림을위한 4 가지 일반적인 스타일.
BootStarp에는 많은 아이콘이 내장되어 있습니다.
입력 상자 그룹은 "입력 그룹"으로 시작하며 자식 요소에는 "입력 그룹-아드 든", "입력 그룹 BTN"등이 포함됩니다.
위의 것은 편집자가 당신에게 소개 한 Bootstrap의 전체 양식 모음입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!