텍스트 입력 상자, 드롭 다운 선택 상자, 라디오 박스, 확인란, 텍스트 필드, 버튼 등의 형태의 공통 요소는 다음과 같습니다. 다음은 다음과 같습니다.
덜 : 형태
Sass : _forms.scss
부트 스트랩은 양식의 필드셋, 범례 및 레이블 태그 만 사용자 정의합니다.
fieldset {min-width : 0; 패딩 : 0; 마진 : 0; 경계 : 0;} 범례 {display : block; 너비 : 100%; 패딩 : 0; 마진-바닥 : 20px; font-size : 21px; 라인 높이 : 상속; #333; 테두리 : 0; 경계 : 1px 고체 #e5e5; 인라인-블록; 마진-바닥 : 5px; 글꼴 중량 : Bold;}이러한 요소 외에도 입력, 선택, TextArea 및 기타 요소도 있습니다. 부트 스트랩 프레임 워크에서 클래스 이름을 사용자 정의하여 효과가 달성됩니다.
1. 너비는 100%가됩니다.
2. 밝은 회색 (#CCC) 테두리를 설정하십시오
3. 4px가있는 둥근 모서리
4. 그림자 효과를 설정하면 요소가 초점을 맞추면 그림자와 테두리 효과가 변경됩니다.
5. Palceholder의 색상을 #999로 설정하십시오
인라인 형태
입력하기 전에 레이블 태그를 추가하려면 입력 라인 브레이크가 표시됩니다. 이러한 레이블 태그를 추가해야하고 입력 라인 브레이크를 원하지 않으면 컨테이너에 레이블 태그를 넣어야합니다.
<div> <label> 이메일 주소 </label> </div> <div> <입력 유형 = "이메일"자리 표시 자 = "이메일 번호를 입력하십시오"> </div>
효과는 다음과 같습니다.
양식 결합 효과를 얻으려면 양식 요소에 클래스 이름을 추가하십시오. 구현 원칙은 다음과 같습니다.
양식 컨트롤을 인라인 블록 요소 (디스플레이 : 인라인 블록)로 설정하여 양식 제어를 한 줄에 표시하도록합니다.
예:
<form> <div> <label> 이메일 </label> <입력 유형 = "이메일"자리 표시기 = "이메일 번호를 입력하십시오"> </div> <div> <labe> 비밀번호 </label> <입력 유형 = "암호"자리 표시기 = "please an inppact"</div> <div> <div> </div> <버튼을 입력하십시오.
효과는 다음과 같습니다.
코드에 라벨 태그가 명확하게 표시되어 있으며 컨테이너에 배치되지 않으며 입력이 포장되지 않습니다. 더 이상한 점은 레이블 태그의 내용이 표시되지 않는다는 것입니다! 실제로 신중하게 보면 레이블 태그가 클래스 이름을 추가했습니다. 이는 레이블을 숨 깁니다. 소스 코드를 살펴 보겠습니다.
.SR 전용 {위치 : 절대; 너비 : 1px; 높이 : 1px; 패딩 : 0; 마진 : -1px; 오버플로 : 숨겨진; 클립 : rect (0, 0, 0, 0); 테두리 : 0;}레이블 태그가 추가되었고 .sr 전용 클래스 이름이 추가되어 레이블을 숨기려면 불필요하지 않습니까? ? ? 그러나 이것은 바로 부트 스트랩 프레임 워크의 장점 중 하나입니다. 입력 컨트롤을 위해 레이블이 설정되지 않은 경우 화면 리더가 올바르게 인식되지 않으며 장애인에 대한 특정 고려 사항도 있습니다.
수평 형태
부트 스트랩에서 수평 형태 효과를 구현하려면 다음 두 가지 조건이 필요합니다.
1. 양식 요소의 클래스 이름을 사용하십시오
2. 부트 스트랩 프레임 워크가있는 그리드 시스템 (세부 사항 : 부트 스트랩 그리드 시스템의 자세한 설명)
Class Name.form-Horizontal in Form 요소를 사용합니다. 주로 다음 기능이 있습니다.
1. 양식 컨트롤의 패딩 및 마진 값 설정
2. 그리드 시스템의 행과 유사한.
CSS 소스 코드 :
.form-horizontal .control-label, .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {padding-top : 7px; margin-top : 0; margin-bottom : 0;}. {min-height : 27px;}. Form-Horizontal .form-group {마진-오른쪽 : -15px; 마진-왼쪽 : -15px;}. form-horizontal .form-control-static {padding-top : 7px;}@media (min-width : 768px) {.cormhorizontal .control-lint. 오른쪽;}}. form-horizontal .Has-peedback .form-control-feedback {top : 0; 오른쪽 : 15px;}예:
<form> <div> <label> 이메일 </label> <div> <입력 유형 = "이메일"자리 표시 자 = "이메일을 입력하십시오"> </div> <div> <label> 암호 </label> <div> <입력 유형 = "암호"자리 표시기 = "placeholder = <input type ="input type = "확인"을 기억하십시오. 비밀번호 </label> </div> </div> <div> <div> <버튼> 이메일을 입력하십시오 </button> </div> </form>
효과는 다음과 같습니다.
단일 라인 입력 상자
부트 스트랩에서 입력을 사용하는 경우 유형 유형을 추가해야합니다. 유형 유형을 지정하지 않으면 부트 스트랩 프레임 워크가 입력 형식을 통해 스타일을 정의하기 때문에 올바른 스타일을 얻지 못할 것입니다. [type = "?"]] : 텍스트 유형, 입력에 해당하는 [type = "text"].
컨트롤을 다양한 양식 스타일로 잘 보이려면 클래스 이름을 추가해야합니다.
<양식 역할 = "form"> <div> <입력 유형 = "이메일"자리 표시 자 = "이메일 입력"> </div> </form>
선택 상자를 뽑습니다
멀티 라인 선택은 다중 속성의 값을 다중으로 설정합니다.
<양식 역할 = "form"> <div> <select> <pluxt> 1 </옵션> <옵션> 2 </옵션> <pluxt> 3 </옵션> <sollite> 4 </옵션> <옵션> 5 </옵션> </select> </div> <div> <select 배수> <pluxt> 1 </옵션> <pluxt> 2 </옵션> <pluxt> 3 </옵션> <pluxt> 4 </옵션> <pluxt> 5 </옵션> </select> </div> </form>
텍스트 필드 TextRea
텍스트 필드는 원래 사용 방법과 동일합니다. 행을 설정하면 높이가 정의 될 수 있으며, Cols는 폭을 정의 할 수 있습니다. 클래스 이름 .form-control이 Textarea 요소에 추가되면 Bootstrap 프레임 워크의 .form-control 스타일 대상의 공간 너비가 100% 또는 자동이기 때문에 cols 속성을 설정할 필요가 없습니다.
<양식 역할 = "form"> <div> <TextRea Rows = "3"> </textRea> </div> </form>
확인란 및 라디오 박스 라디오
레이블 태그 (예 : 정렬 문제)와 함께 확인란 및 라디오에 약간의 문제가 있습니다.
<form><div><label><input type="checkbox"> Remember the password</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios1" checked> Like</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios2">Don't 좋아요 </label> </div> </form>
1. 확인란이든 라디오이든 레이블로 싸여 있습니다.
2. 확인란 및 라벨 태그는 .checkbox라는 컨테이너에 배치됩니다.
3. 라디오와 레이블은 .radio라는 컨테이너에 배치됩니다. 부트 스트랩은 주로 .checkbox 및 .radio 스타일을 사용하여 확인란, 라디오 버튼 및 레이블의 정렬을 처리합니다.
.Radio, .checkbox {display : block; min-height : 20px; Padding-left : 20px; margin-top : margin-top : 10px; margin-bottom : 10px;}. Radio Label, .Checkbox 레이블 {디스플레이 : Inline; font-weight : normal; cursor : pointer;}. 입력 [type = "checkbox"] ,. checkbox-inline 입력 [type = "checkbox"] {float : left; margin-left : -20px;}. Radio + .radio, .checkbox + .checkbox {margin-top : -5px;}상자와 라디오 버튼을 수평으로 확인하십시오
1. 확인란을 가로로 정렬 해야하는 경우 레이블 레이블에 클래스 이름 만 추가하면됩니다.
2. 라디오가 수평 배열이 필요한 경우 레이블 레이블에 클래스 이름을 추가하십시오.
CSS 소스 코드는 다음과 같습니다.
.Radio-inline, .checkbox-inline {디스플레이 : 인라인-블록; 패딩-왼쪽 : 20px; 마진-바닥 : 0; Font-weight : 정상; 수직-균형 : 중간; 커서 : 포인터;}. Radio-inline, .checkboxinline + .checkbox-inline {margin-top : 0; type = "radio"name = "sex"value = "option1"> male </label> <label> <label> <input type = "radio"name = "sex"value = "옵션 2"> female </label> <label> <input type = "name"value = "옵션 3"> 중립 </label> </div>양식 제어 상태
1. 초점 상태 :
초점 상태는 의사 클래스 : Focus를 통해 구현됩니다. 부트 스트랩 양식 컨트롤의 초점 상태는 윤곽의 기본 스타일을 삭제하고 그림자 효과를 다시 추가합니다. 다음은입니다
CSS 소스 코드 :
.form-Control : Focus {Border-Color : #66afe9; 개요 : 0; -webkit-box-shadow : inset 0 1px 1pxrgba (0,0,0, .075), 0 0 8px rgba (102, 175, 233, .6); Box-Shadow : 0,05), 0,0,05). RGBA (102, 175, 233, .6);}소스 코드에서 볼 수 있듯이 컨트롤이 포커스 상태에서 위의 스타일 효과를 갖도록하려면 Control.form-Control에 클래스 이름을 추가해야합니다.
<form> <div> <div> <입력 유형 = "Text"자리 표시기 = "초점이 아닌 효과가 아님"> </div> <div> <입력 유형 = "텍스트"자리 표시기 = "초점의 효과"> </div> </div> </form>
초점에 파일, 라디오 및 확인란 컨트롤의 효과는 일반 입력 컨트롤의 효과와도 다릅니다. 다음은 소스 코드입니다
입력 [type = "file"] : focus, input [type = "radio"] : Focus, Input [type = "checkbox"] : Focus {개요 : 얇은 점; 개요 : 5px 자동 -webkit-focus-ring-color; 개요 : -2px;}2. 상태 비활성화 :
해당 양식 컨트롤에 비활성화 된 속성을 추가하면 다음은 CSS 소스 코드입니다.
.form-control [disabled] ,. form-control [readonly], fieldset [disabled] .form-control {cursor : not-allowed; back 입력 [type = "radio"] [disabled], 입력 [type = "checkbox"] [disabled] ,. radio [disabled] ,. radio-inline [disabled] ,. checkbox [disabled] ,. checkbox-inline [disabled], fieldset [disabled] 입력 [type = "radio"], fieldset [disabled]], fieldset [feldset ", feldset [feldset]]. .Radio, FieldSet [Disabled] .Radio-inline, fieldset [disabled] .checkbox, fieldset [disabled] .checkbox-inline {cursor : not-allowed;}.예:
<입력 유형 = "텍스트"자리 표시 자 = "양식 비활성화"비활성화>
Fieldset이 장애인 속성을 설정하면 전체 도메인이 비활성화됩니다.
예:
<양식 역할 = "form"> <fieldset disabled> <div> <label> 입력 상자가 비활성화되어 있습니다 </label> <입력 유형 = "text"자리 표시기 = "입력 비활성화"> </div> <div> <label> 드롭 다운 상자는 다음과 같습니다. disabled </label> <select> <solfit> 1 </select> <sollite> 2 </옵션> <pllay> 3 </옵션> <pext> 4 </옵션> </select> </div> <div> <label> <input type = "checkbox"> 옵션 상자가 비활성화되어 있습니다
효과는 다음과 같습니다.
3. 확인 상태
부트 스트랩은 다음과 같은 효과를 제공합니다.
1. 경고 상태 노란색
2. HAS-ORROR : 오류 상태 빨간색
3. Has-success : 성공 상태 녹색
그것을 사용할 때는 상태 클래스 이름을 양식 그룹 컨테이너에 추가하십시오. 효과는 세 상태에서 동일하지만 색상은 다릅니다.
예:
<form> <div> <label> 성공 상태 </label> <입력 유형 = "텍스트"자리 표시기 = "성공 상태"> </div> <div> <라벨> 오류 상태 </label> <입력 유형 = "text"placeholder = "오류 상태"> </div> <div> <label> 경고 상태 </label> <입력 유형 = "text"placeHolder = "placeHolder ="경고 상태 "> </div> </div> </div>
효과는 다음과 같습니다.
때때로, 다른 상태는 양식을 검증 할 때 다른 아이콘을 제공합니다. 해당 상태에 아이콘을 표시하려면 해당 상태에 클래스 이름을 추가하면됩니다. .haserror, .has-success, .has-warning과 함께 사용해야합니다.
부트 스트랩의 작은 아이콘은 모두 @font-face를 사용하여 만들어집니다. 좋다:
<span class =”Glyphicon-warning Form-Control-Feedback”> </span>
예:
<form> <div> <label> 성공 상태 </label> <입력 유형 = "텍스트"자리 표시기 = "성공 상태"> </div> <label> 오류 상태 </label> input type = "text"placeholder = "error status"> <span> </div> <라벨 상태 </label> <input type = "텍스트" "hollder"경고 상태 "> <span> </span> </div> </form>
효과는 다음과 같습니다.
프롬프트 정보를 작성하십시오
일반적으로 양식 검증을 할 때는 다른 프롬프트 정보가 필요합니다. 부트 스트랩 프레임 워크에서 .help-block을 사용하여 블록에 프롬프트 정보를 표시하고 컨트롤 하단에 표시하십시오.
CSS 소스 코드는 다음과 같습니다.
.help-block {display : block; margin-top : 5px; margin-bottom : 10px; color : #737373;}예:
<form> <div> <label> 성공적인 상태 </label> <입력 유형 = "텍스트"자리 표시기 = "성공적인 상태"> <span> 입력 정보가 정확합니다 </span> </span> </div> <div> <label> 오류 상태 </label> <입력 유형 = "text"placeholder = "error status"> <span> 입력 정보가 틀립니다. 상태 </label> <입력 유형 = "텍스트"자리 표시 자 = "경고 상태"> <pan> 올바른 정보를 입력하십시오 </span> <span> </span> </div> </form>
효과는 다음과 같습니다.
Bootstrap.css에 자신의 코드를 추가하지 않으려면 설계에 필요한 경우 Bootstrap의 그리드 시스템을 사용할 수 있습니다.
<양식 역할 = "form"> <div> <label for = "inputsuccess1"> 성공 상태 </label> <div> <div> <입력 유형 = "텍스트"id = "inputsuccess1"placeholder = "success status"> </div> <span> 입력 한 정보는 정확합니다 </span> </div> </form>
위는 편집자가 소개 한 부트 스트랩 양식 구성 요소의 관련 내용입니다. 나는 그것이 당신에게 도움이되기를 바랍니다!