부트 스트랩 양식
이 장에서는 부트 스트랩을 사용하여 양식을 만드는 방법을 배울 것입니다. 몇 가지 간단한 HTML 태그 및 확장 클래스 부트 스트랩 형태의 다양한 스타일을 만들 수 있습니다.
부트 스트랩 양식 레이아웃 다음과 같은 유형을 제공합니다 :
수직 또는 기본적인 형태
양식의 기본 구조는 개별 양식 컨트롤이 자동으로 일부 글로벌 스타일을받을으로 부트 스트랩이 제공됩니다. 다음은 기본적인 형태를 만들 수있는 단계는 다음과 같습니다
- 부모 <형태> 요소에역할 = "양식"을추가 할 수있습니다.
- 의 <DIV>에서와클래스.form-그룹의 라벨 및 제어합니다. 이것은 최선의 피치를 획득 할 필요가있다.
- 모든 텍스트 요소는 <입력>, <텍스트 영역을>,및 클래스.form 제어를 추가 <선택>.
예
<양식 역할 = "양식">
<사업부 클래스 = "폼 그룹">
<라벨 = "이름"에 대한> 이름 </ 라벨>
<입력 유형 = "텍스트" 클래스 = "폼 컨트롤" ID = "이름" 자리 = "이름을 입력하세요">
</ DIV>
<사업부 클래스 = "폼 그룹">
<라벨 = "inputfile의"파일> 입력 </ 라벨>에 대한
<입력 = "파일"를 입력 ID = "inputfile의">
<P 클래스 = "도움이 블록은"> 다음은 블록 레벨 도움말 텍스트 인스턴스입니다. </ P>
</ DIV>
<사업부 클래스 = "체크 박스">
<레이블>
<입력 = "체크 박스"를 입력> 체크하시기 바랍니다 </ 라벨>
</ DIV>
<버튼 = "제출"을 입력 클래스 = "btn을 BTN-기본" > 제출 </ 버튼>
</ FORM>
결과는 다음과 같다 :
인라인 양식
당신이 모든 요소가 인라인 것을 양식을 작성해야하는 경우, 왼쪽 정렬 레이블이 나란히이의 <양식> 태그에클래스.form 인라인을 추가합니다.
예
<양식 클래스 = "양식 인라인" 역할 = "양식">
<사업부 클래스 = "폼 그룹">
<라벨 클래스 = "SR 전용" = "이름"에 대한> 이름 </ 라벨>
<입력 유형 = "텍스트" 클래스 = "폼 컨트롤" ID = "이름" 자리 = "이름을 입력하세요">
</ DIV>
<사업부 클래스 = "폼 그룹">
<라벨 클래스 = "SR 전용" = "inputfile의"파일> 입력 </ 라벨>에 대한
<입력 = "파일"를 입력 ID = "inputfile의">
</ DIV>
<사업부 클래스 = "체크 박스">
<레이블>
<입력 = "체크 박스"를 입력> 체크하시기 바랍니다 </ 라벨>
</ DIV>
<버튼 = "제출"을 입력 클래스 = "btn을 BTN-기본" > 제출 </ 버튼>
</ FORM>
결과는 다음과 같다 :
- 기본적으로 폭의 입력을 선택하고, 텍스트 영역을 100 % 부트 스트랩. 인라인 양식을 사용하면 양식 컨트롤의 폭을 설정해야합니다.
- 사용클래스.SR 전용, 당신은 인라인 양식 태그를 숨길 수 있습니다.
레벨 양식
상이한 레벨과 형태의 수뿐만 아니라 다른 형태를 표시하지만 다른 형태의 형식이 제시되어있다. 형태의 수평 레이아웃을 만들려면 몇 가지 단계를 수행하십시오 :
- <양식> 요소는부모 클래스.form 수평에 추가됩니다.
- 의 <DIV>에서와클래스.form-그룹의 라벨 및 제어합니다.
- 레이블클래스.control 레이블을 추가합니다.
예
<양식 클래스 = "폼 수평" 역할 = "양식">
<사업부 클래스 = "폼 그룹">
<라벨 = "FIRSTNAME"에 대한 클래스 = "COL-SM-2 제어 라벨"> 이름 </ 라벨>
<사업부 클래스 = "COL-SM-10 ">
<입력 유형 = "텍스트" 클래스 = "폼 컨트롤" ID = "FIRSTNAME" 자리 = "이름을 입력하세요">
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹">
<라벨 = "LASTNAME"에 대한 클래스 = "COL-SM-2 제어 라벨"> 이름 </ 라벨>
<사업부 클래스 = "COL-SM-10 ">
<입력 유형 = "텍스트" 클래스 = "폼 컨트롤" ID = "LASTNAME" 자리 = "이름을 입력하세요">
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹">
<사업부 클래스 = "COL-SM은 오프셋 -2 COL-SM-10">
<사업부 클래스 = "체크 박스">
<레이블>
<입력 = "체크 박스"> 내 </ 라벨을 기억>을 입력
</ DIV>
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹">
<사업부 클래스 = "COL-SM은 오프셋 -2 COL-SM-10">
<버튼 = "제출"을 입력 클래스 = "btn을 BTN-기본" > 로그인 </ 버튼>
</ DIV>
</ DIV>
</ FORM>
결과는 다음과 같다 :
가장 흔한 형태 컨트롤, 주로입력, 텍스트 영역, 체크 박스, 라디오, 선택을위한부트스트랩을 지원합니다.
입력 박스 (입력)
가장 일반적인 형태의 텍스트 필드는 입력 박스에 입력된다. 사용자는 내부에 필요한 양식 데이터의 대부분을 입력 할 수 있습니다.텍스트, 암호, 날짜, 날짜 :부트스트랩을 포함한기본 HTML5의 모든 유형에 대한 입력 지원 제공 - 현지, 일, 월, 시간, 주, 번호, 이메일, URL, 검색, 전화 및색상을.완성형을위한입력을허용하도록 적절한유형 선언이필요하다.
예
<양식 역할 = "양식">
<사업부 클래스 = "폼 그룹">
<라벨 = "이름"에 대한> 태그 </ 라벨>
<입력 유형 = "텍스트" 클래스 = "폼 컨트롤" 자리 = "텍스트 입력">
</ DIV>
</ FORM>
결과는 다음과 같다 :
상자 (텍스트 영역)
당신은 멀티 라인 입력을해야 할 때 텍스트 상자의 텍스트 영역을 사용할 수 있습니다. 당신은행 속성을변경할 수 있습니다, 필요한 경우 (적은 수의 행 = 작은 상자, 라인 = 더 큰 상자).
예
<양식 역할 = "양식">
<사업부 클래스 = "폼 그룹">
<라벨 = "이름"에 대한> 텍스트 상자 </ 라벨>
<텍스트 영역 클래스 = "폼 컨트롤" 행 = "3"> </ 텍스트 영역>
</ DIV>
</ FORM>
결과는 다음과 같다 :
확인란 (체크 박스), 라디오 버튼 (라디오)
체크 박스, 라디오 버튼은 사용자가 미리 설정 옵션의 범위에서 선택할 수 있도록하는 데 사용됩니다.
- 폼을 만들 때 목록에서 여러 옵션을 선택할 수있는 사용자를 원하는 경우,체크 박스를 사용하십시오.당신은 사용자가 옵션을 선택할 수 제한하면,라디오를 사용합니다.
- 체크 박스와 라디오 버튼의시리즈는.checkbox 인라인 또는.radio 인라인 클래스를 사용하여같은 줄에 자신의 표시를 제어 할 수 있습니다.
다음의 예는 두 가지 유형 (기본 인라인)를 보여줍니다
예
<라벨 = "이름"에 대한> 기본 체크 박스와 라디오 버튼의 인스턴스 </ 라벨>
<사업부 클래스 = "체크 박스">
<레이블>
<입력 유형 = "체크 박스" 값 = ""> 옵션 1 </ 라벨>
</ DIV>
<사업부 클래스 = "체크 박스">
<레이블>
<입력 유형 = "체크 박스" 값 = ""> 옵션 2 </ 라벨>
</ DIV>
<사업부 클래스 = "라디오">
<레이블>
<입력 유형 = "라디오" 이름 = "optionsRadios" ID = "optionsRadios1" 값 = "옵션 1" 선택> 옵션 1 </ 라벨>
</ DIV>
<사업부 클래스 = "라디오">
<레이블>
<입력 유형 = "라디오" 이름 = "optionsRadios" ID = "optionsRadios2" 값 = "옵션 2"> 옵션 2 -이 옵션을 선택 취소합니다 선택 1 </ 라벨>
</ DIV>
<라벨 = "이름"> 인스턴스 인라인 체크 박스, 라디오 버튼에 대한 </ 라벨>
<DIV>
<라벨 클래스 = "확인란 인라인">
<입력 유형 = "체크 박스" ID = "inlineCheckbox1" 값 = "옵션 1"> 옵션 1 </ 라벨>
<라벨 클래스 = "확인란 인라인">
<입력 유형 = "체크 박스" ID = "inlineCheckbox2" 값 = "옵션 2"> 옵션 2 </ 라벨>
<라벨 클래스 = "확인란 인라인">
<입력 유형 = "체크 박스" ID = "inlineCheckbox3" 값 = "옵션 3"> 옵션 3 </ 라벨>
<라벨 클래스 = "확인란 인라인">
<입력 유형 = "라디오" 이름 = "optionsRadiosinline" ID = "optionsRadios3" 값 = "옵션 1" 선택> 옵션 1 </ 라벨>
<라벨 클래스 = "확인란 인라인">
<입력 유형 = "라디오" 이름 = "optionsRadiosinline" ID = "optionsRadios4" 값 = "옵션 2"> 옵션 2 </ 라벨>
</ DIV>
결과는 다음과 같다 :
선택 상자 (선택)
당신은 사용자가 몇 가지 옵션을 선택할 수 있지만, 기본적으로 옵션을 선택할 수 있습니다 싶을 때, 선택 상자를 사용합니다.
- 사용 <선택> 등의 상태 나 숫자 등의 옵션 선택 목록을 잘 알고있는 사람 보통 사람들의 목록을 표시합니다.
- 여러 = "복수"를 사용하여사용자가 여러 옵션을 선택할 수 있습니다.
다음의 예를 보여줍니다 두 가지 유형 (선택 및 다중) :
예
<양식 역할 = "양식">
<사업부 클래스 = "폼 그룹">
<라벨 = "이름"> 선택 목록 </ 라벨>에 대한
<선택 클래스 = "양식 제어">
<옵션> 1 </ 옵션>
<옵션> 2 </ 옵션>
<옵션> 3 </ 옵션>
<옵션> 4 </ 옵션>
<옵션> 5 </ 옵션>
</ 선택>
<라벨 = "이름"> 여러 선택 </ 라벨>에 대한 목록을 선택합니다
<선택 배수 클래스 = "양식 제어">
<옵션> 1 </ 옵션>
<옵션> 2 </ 옵션>
<옵션> 3 </ 옵션>
<옵션> 4 </ 옵션>
<옵션> 5 </ 옵션>
</ 선택>
</ DIV>
</ FORM>
결과는 다음과 같다 :
당신은 수평 형태의 태그에 일반 텍스트 형태를 배치해야하는경우, 클래스.form 제어 정전기 <P>에에서 사용하십시오.
예
<양식 클래스 = "폼 수평" 역할 = "양식">
<사업부 클래스 = "폼 그룹">
<라벨 클래스 = "COL-SM-2 제어 라벨"> 이메일 </ 라벨>
<사업부 클래스 = "COL-SM-10 ">
<P 클래스 = "폼 제어 정적 ">
[email protected] </ P>
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹">
<라벨 = "inputPassword"에 대한 클래스 = "COL-SM-2 제어 라벨">
비밀번호 </ 라벨>
<사업부 클래스 = "COL-SM-10 ">
<입력 = "암호"를 입력 클래스 = "폼 컨트롤" ID = "inputPassword" 자리 = "비밀번호를 입력 해주세요">
</ DIV>
</ DIV>
</ FORM> 결과는 다음과 같다 :
또한 스테이트 초점(즉, 사용자는 입력을 누르거나 입력 포커스 탭 키를 사용하여), 부트 스트랩은 또한 입력 상자는 스타일을 지정 해제 및 형태 검증 클래스를 제공한다.
입력 상자에 초점
입력 박스입력을 수신했을때 윤곽 입력란이제거되며, 집중및상자 그림자의 적용.
입력 상자에 입력을 해제
당신이 입력 상자 입력을 사용하지 않으려면, 단순히 입력 상자를 해제 할뿐만 아니라,장애인속성을 추가 할뿐만 아니라, 입력 상자의 스타일을 변경하고 마우스 포인터가 요소 스타일에 마우스 포인터를 가리킬 때.
장애인 필드 설정 FIELDSET
의 <FIELDSET> <FIELDSET> 내부의 모든 컨트롤을 사용하지 않도록하는 장애인 속성을 추가 할 수 있습니다.
확인 상태
부트 스트랩은 오류, 경고 및 스타일 검증 성공 메시지가 포함되어 있습니다. 전용 부모 요소는 단순히 적절한클래스 (.has 경보, .has-추가 오류또는 .has-성공)의상태를 확인하기 위해 사용될 수있다.
다음 예는 모든 제어 상태를 보여줍니다
예
<양식 클래스 = "폼 수평" 역할 = "양식">
<사업부 클래스 = "폼 그룹">
<라벨 클래스 = "COL-SM-2 제어 라벨"> 초점 </ 라벨>
<사업부 클래스 = "COL-SM-10 ">
<입력 클래스 = "폼 컨트롤" ID = "focusedInput" 유형 = "텍스트" = 값> "입력 상자가 ... 포커스를 취득하는 방법"
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹">
<라벨 = "inputPassword"에 대한 클래스 = "COL-SM-2 제어 라벨"> 안 </ 라벨>
<사업부 클래스 = "COL-SM-10 ">
<입력 클래스 = "폼 컨트롤" ID = "disabledInput" 유형 = "텍스트" 자리 = "입력 상자의 수입 금지 ..." 비활성화>
</ DIV>
</ DIV>
<FIELDSET 비활성화>
<사업부 클래스 = "폼 그룹">
<라벨 = "disabledTextInput"에 대한 클래스 = "COL-SM-2 제어 라벨"> 비활성화 입력 (FIELDSET 사용 안 함) </ 라벨>
<사업부 클래스 = "COL-SM-10 ">
<입력 유형 = "텍스트" ID = "disabledTextInput" 클래스 = "폼 컨트롤" 자리 = "수입 금지">
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹">
<라벨 = "disabledSelect"에 대한 클래스 = "COL-SM-2 제어 라벨"> 사용 안 함 선택 메뉴 (FIELDSET 사용 안 함) </ 라벨>
<사업부 클래스 = "COL-SM-10 ">
<선택 ID = "disabledSelect" 클래스 = "양식 제어">
<옵션> 사용 안 함 선택 </ 옵션>
</ 선택>
</ DIV>
</ DIV>
</ FIELDSET>
<사업부 클래스 = "폼 그룹 HAS- 성공">
<라벨 클래스 = "COL-SM-2 제어 라벨" = "inputSuccess"> 입력 성공 </ 라벨>에 대한
<사업부 클래스 = "COL-SM-10 ">
<입력 유형 = "텍스트" 클래스 = "폼 컨트롤" ID = "inputSuccess">
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹 HAS-의 경고">
<라벨 클래스 = "COL-SM-2 제어 라벨" = "inputWarning"에 대한> 경고 입력 </ 라벨>
<사업부 클래스 = "COL-SM-10 ">
<입력 유형 = "텍스트" 클래스 = "폼 컨트롤" ID = "inputWarning">
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹 HAS- 오류">
<라벨 클래스 = "COL-SM-2 제어 라벨" = "inputError"> 오타 </ 라벨>에 대한
<사업부 클래스 = "COL-SM-10 ">
<입력 유형 = "텍스트" 클래스 = "폼 컨트롤" ID = "inputError">
</ DIV>
</ DIV>
</ FORM>
결과는 다음과 같다 :
당신은 폼의 높이와 폭을 설정 .input - LG 전자와.COL-LG- *각클래스를사용할 수 있습니다. 다음의 예는이 점을 보여
예
<양식 역할 = "양식">
<사업부 클래스 = "폼 그룹">
<입력 클래스 = "양식 제어 입력 - LG 전자" 유형 = "텍스트" 자리 = ".input-LG">
</ DIV>
<사업부 클래스 = "폼 그룹">
<입력 클래스 = "폼 컨트롤" 유형 = "텍스트" 자리 = "기본 입력">
</ DIV>
<사업부 클래스 = "폼 그룹">
<입력 클래스 = "양식 제어 입력 - SM" 유형 = "텍스트" 자리 = ".input-SM">
</ DIV>
<사업부 클래스 = "폼 그룹"> </ DIV>
<사업부 클래스 = "폼 그룹">
<선택 클래스 = "양식 제어 입력 - LG 전자">
<옵션 값 = ""> .input-LG </ 옵션>
</ 선택>
</ DIV>
<사업부 클래스 = "폼 그룹">
<선택 클래스 = "양식 제어">
<옵션 값 = ""> 기본 선택 </ 옵션>
</ 선택>
</ DIV>
<사업부 클래스 = "폼 그룹">
<선택 클래스 = "입력 - 양식 제어 SM">
<옵션 값 = ""> .input-SM </ 옵션>
</ 선택>
</ DIV>
<사업부 클래스 = "행">
<사업부 클래스 = "COL-LG-2 ">
<입력 유형 = "텍스트" 클래스 = "폼 컨트롤" 자리 = ".COL-LG-2 ">
</ DIV>
<사업부 클래스 = "COL-LG-3 ">
<입력 유형 = "텍스트" 클래스 = "폼 컨트롤" 자리 = ".COL-LG-3 ">
</ DIV>
<사업부 클래스 = "COL-LG-4 ">
<입력 유형 = "텍스트" 클래스 = "폼 컨트롤" 자리 = ".COL-LG-4 ">
</ DIV>
</ DIV>
</ FORM>
결과는 다음과 같다 :
부트 스트랩 양식 제어는 블록 레벨 도움말 텍스트 입력 상자에 입력을 할 수 있습니다..help 블록 사용후 <입력>에서, 콘텐츠의 일부의 전체 폭을 추가하기위해.다음의 예는이 점을 보여
예
<양식 역할 = "양식">
<SPAN> 예를 들어 도움말 텍스트 </ SPAN>
<입력 클래스 = "폼 컨트롤" 유형 = "텍스트" 자리 = "">
<스팬 클래스 = "도움말 블록"> 긴 도움말 텍스트 블록은 하나 이상의 행은 다음 행으로 확장 될 필요가있다. 이 예에서 두 줄의 전체 텍스트를 도와드립니다. </ SPAN>
</ FORM>
결과는 다음과 같다 :
