이 기사는 주로 부트 스트랩 양식 스타일 사용에 대한 지식을 소개합니다. 아주 좋아요, 함께 살펴 보겠습니다!
형태
<form role = "form"> <div> <label for = "exampleInputeMail1"> 이메일 : </label> <입력 유형 = "이메일"id = "exampleInputeMail1"placeHolder = "이메일 주소를 입력하십시오"> </div> <div> <레이블에 대한 = "examplePassword1 </label> <입력 유형 ="ID = " 비밀번호 "> </div> <labe> <입력 유형 ="Checkbox "> 비밀번호 기억 </label> </div> <버튼 유형 ="제출 "> 이메일을 입력하십시오 </button> </form>
생식 사진 :
클래스 : 양식 제어
1. 너비는 100%, 2가되었습니다. 밝은 회색 (#CCC) 테두리가 설정되어 있습니다.
2. 수평 형태 :
부트 스트랩 프레임 워크의 기본 형식은 수직 디스플레이 스타일이지만 종종 수평 양식 스타일이 필요합니다 (레이블은 왼쪽에 있고 양식 제어가 오른쪽에 있습니다).
<form role = "form"> <div> <label for = "inputeMail3"> email </label> <div> <입력 유형 = "이메일"id = "inputeMail3"placeholder = "이메일 주소를 입력하십시오"> </div> </div> <div> <label for = "inputpassword3"> password </label> <input type = "indputpassword 3" "in in in in in in in in in in in in in in in in in in in in in inter helate" 비밀번호 "> </div> </div> <div> <div> <label> <입력 유형 ="CheckBox "> 비밀번호를 기억하십시오 </label> </div> </div> </div> <div> <div> <버튼 유형 ="제출 "> 이메일 입력 </div> </div> </form>
생식 사진 :
부트 스트랩 프레임 워크에서 수평 형태 효과를 달성하려면 다음 두 조건을 충족해야합니다.
1. 클래스 이름 "Form-Horizontal"은 요소에 사용됩니다.
2. 부트 스트랩 프레임 워크에 맞는 메쉬 시스템.
요소에서 클래스 이름 "form-horizontal"을 사용하면 다음과 같은 기능이 있습니다.
- 양식 제어 패드 및 마진 값을 설정하십시오.
- 그리드 시스템의 "행"과 유사한 "Form-Group"의 표현을 변경하십시오.
3. 수평 형태 :
부트 스트랩 프레임 워크에서 이러한 양식 효과를 구현하는 것은 산들 바람입니다. 클래스 이름 "form-inline"을 요소에 추가하면됩니다.
인라인 형식의 구현 원리는 매우 간단합니다. 한 줄에 양식 컨트롤을 표시하려면 양식 컨트롤을 인라인 블록 요소 (디스플레이 : 인라인 블록)로 설정해야합니다.
<form role = "form"> <div> <label for = "exampleInputeMail2"> email </label> <입력 유형 = "이메일"id = "exampleInputeMail2"placeHolder = "이메일 주소를 입력하십시오"> </div> <div> <레이블에 대한 = "examesInputsword2 </label> <입력 유형 ="placeings " 비밀번호 "> </div> <labe> <입력 유형 ="Checkbox "> 비밀번호 기억 </label> </div> <버튼 유형 ="제출 "> 이메일을 입력하십시오 </button> </form>
생식 사진 :
4. 입력 상자 입력
단일 라인 입력 상자, 공통 텍스트 입력 상자, 즉 입력의 유형 속성 값은 텍스트입니다. 부트 스트랩에서 입력을 사용하는 경우 유형 유형을 추가해야합니다. 유형 유형을 지정하지 않으면 올바른 스타일을 얻지 못합니다.
<양식 역할 = "form"> <div> <입력 유형 = "이메일"자리 표시 자 = "이메일 입력"> </div> <div> <입력 유형 = "텍스트"자리 표시기 = "사용자 이름을 입력하십시오"/> </div> </form>
생식 사진 :
5. 선택 상자를 당기십시오
부트 스트랩 프레임 워크의 드롭 다운 선택 상자는 원래 사용과 일치하며 멀티 라인 선택은 다중 속성의 값을 여러 가지로 설정합니다. 부트 스트랩 프레임 워크는 이러한 요소에 통일 된 스타일을 제공합니다.
<양식 역할 = "form"> <div> <select> <pluxce> 1 </옵션> <옵션> 2 </옵션> <sollite> 3 </옵션> <pluxt> 4 </옵션> <옵션> 5 </옵션> </select> </div> <div> <옵션> 1 </옵션> <옵션> 2 </옵션> 3 <옵션> <옵션> </옵션> </옵션> </옵션> <옵션> <옵션> < </select> </div> </form>
생식 사진 :
6. 텍스트 필드 텍스트 주어
텍스트 필드는 원래 사용 방법과 동일하며, 설정 행은 높이를 정의 할 수 있으며 Cols를 설정하면 너비를 설정할 수 있습니다. 그러나 클래스 이름 "Form-Control"이 Textarea 요소에 추가되면 COLS 속성을 설정할 필요가 없습니다. 부트 스트랩 프레임 워크에서 "폼 제어"스타일 형태 제어는 100% 또는 자동이기 때문입니다.
<양식 역할 = "form"> <div> <TextRea Rows = "3"> </textRea> </div> </form>
생식 사진 :
7. 확인란 확인란 및 단일 선택 버튼 라디오
부트 스트랩 프레임 워크의 확인란 및 라디오는 약간 특별합니다. Bootstrap은 그들을 위해 특별한 치료법을 만들었습니다. 주된 이유는 레이블 레이블과 함께 사용될 때 확인란과 라디오가 약간의 문제가 있기 때문입니다 (가장 큰 두통은 정렬 문제입니다). 부트 스트랩 프레임 워크를 사용하면 개발자는 너무 많이 생각할 필요가 없으며 다음 방법을 따라야합니다.
<양식 역할 = "form"> <h3> case 1 </h3> <div> <label> <input type = "checkbox"value = ""> 비밀번호 기억 </label> </div> <div> <label> <input type = "radio"name = "옵션 라디오"옵션 옵션 value = "love"cheecked> </div> <input type = "radio =" id = "OptionsRadios2"value = "증오"> 싫어 </label> </div> </form>
생식 사진 :
8. 상자와 라디오 버튼을 수평으로 확인하십시오
때로는 레이아웃 목적으로 확인란과 라디오 버튼을 수평으로 배열해야합니다. 부트 스트랩 프레임 워크는 이와 관련하여 다음과 같은 고려 사항을 고려했습니다.
1. 확인란을 가로로 정렬 해야하는 경우 레이블 레이블에 클래스 이름 "Checkbox-Inline"을 추가하면됩니다.
2. 라디오를 가로로 정렬 해야하는 경우 레이블 레이블에 클래스 이름 "Radio-Inline"을 추가하면됩니다.
<양식 역할 = "form"> <div> <label> <입력 유형 = "checkbox"value = "옵션 1"> 게임 </label> <라벨> <입력 유형 = "checkbox"value = "옵션 2"> 사진 </label> <label> <입력 유형 = "checkbox"valep "옵션 ="옵션 "value ="옵션 ""옵션 "" 이름 = "sex"> male </label> <label> <입력 유형 = "radio"value = "옵션 2"name = "sex"> female </label> <label> <입력 유형 = "raide"value = "옵션 3"name = "sex"> 중립 </div> </form>
생식 사진 :
9. 버튼
부트 스트랩 프레임 워크의 버튼이 모두 구현됩니다
<table> <thead> <t> <th> 버튼 </th> <th> class = ""</th> <th> 설명 </th> </tr> </tbody> <td> <td> <button href = "#"> default </button> </td> <td> <code> btn </td> <td> 표준 그레이 버튼 그라디언트 </td> </td> <td> <td> <버튼 href = "#"> 1 차 </td> <td> <code> btn btn-primary </code> </td> <td> 추가 시각적 무게를 제공하고 일련의 단추로 1 차 조치를 식별합니다 </td> <td> href = "#"> info </button> </td> <td> <code> btn btn-info </code> </td> <td> 기본 스타일의 대안으로 사용됩니다 </td> </td> <td> <td> <button href = "#"> 성공 </td> <code> btn> btn. btn-success </code> </td> <td>는 성공적이거나 긍정적 인 행동을 나타냅니다 </td> </tr> <tr> <td> <버튼 href = "#"> 경고 </button> <td> <code> btn btn-warning </code> </td> <td>는주의해야합니다. action </td> </td> <td> <td> <버튼 href = "#"> 위험 </button> </td> <td> <code> btn btn danger </code> </td> <td> 위험하거나 잠재적으로 부정적인 행동을 나타냅니다 </td> </td> <버튼 href = "#"> inverse </button> </td> <td> <code> btn </verse </button> </td> <td> <code> btn btn inverse </code> </td> <td> 대체 어두운 회색 버튼, 시맨틱 동작 또는 사용에 묶여 있지 않아 </td> </tably> </table>
생식 사진 :
10. 양식 제어 크기
앞에서 볼 수있는 양식 컨트롤은 정상 크기입니다. 컨트롤 높이, 선 높이, 패딩 및 글꼴 크기 특성을 설정하여 제어 높이를 설정할 수 있습니다. 그러나 부트 스트랩 프레임 워크는 양식 컨트롤의 높이를 제어하기 위해 두 가지 다른 클래스 이름을 제공합니다. 이 두 클래스 이름은 다음과 같습니다.
1. 입력 -SM : 제어를 정상 크기보다 작게 만듭니다
2. 입력 -LG : 제어를 정상 크기보다 크게 만듭니다
이 두 클래스는 입력, Textarea 및 Select 컨트롤에 적합합니다.
<양식 역할 = "form"> <div> <label> 컨트롤이 커집니다 </label> <입력 유형 = "text"placeholder = "add.input-lg, 컨트롤이 더 커집니다. 제어가 작게됩니다 "> </div> </form>
생식 사진 :
11. 양식 제어 상태 (장애인 상태)
부트 스트랩 프레임 워크에서 양식 제어의 비활성화 상태는 일반 양식 비활성화 상태 구현 방법과 동일하며 해당 양식 컨트롤에 "비활성화 된"속성을 추가합니다. 자세한 내용은 다음 코드를 참조하십시오
단일 양식 태그를 비활성화하고 태그의 속성에 비활성화하기 만하면됩니다.
<양식 역할 = "form"> <div> <div> <입력 id = "disabledInput"type = "text"자리 표시 자 = "양식이 비활성화되었으며 입력 할 수 없으며"disabled> </div> </div> </form>
생식 사진 :
부트 스트랩 프레임 워크에서 필드 셋에 속성이 비활성화 된 경우 전체 도메인이 비활성화됩니다.
<양식 역할 = "form"> <fieldset disabled> <div> <label for = "disabledtextinput"> disabled input box </label> <입력 유형 = "text"id = "disabledtextinput"placeholder = "disabled input"> </div> <divabledect "> <옵션"> <옵션 "> selectable </옵션> </select> </div> <div> <label> <입력 유형 = "Checkbox"> 선택할 수 없습니다 </label> </div> <버튼 유형 = "제출"> 제출 </button> </fieldset> </form>
생식 사진 :
전체 장애인 필드의 경우 범례에 입력 상자가 있으면이 입력 상자를 비활성화 할 수 없습니다.
form role = "form"> <fieldset disabled> <legend> <input type = "text"placeholder = "명백히 내 색상이 회색으로 바뀌지 않았지만 반응하지 않습니까? 믿지 않습니까?"/> </legend> <div> <레이블을 클릭하십시오. 입력 "> </div> <div> <label for ="disabledselect "> 비활성화 드롭 다운 상자> </label> <select id ="disabledselect "> intion> selective </옵션> </select> </div> <div> <라벨> <입력 유형 ="checkbox "> 선택할 수 없음 </label> </div> <"버튼 입력 "> </futton> </futton> </futton>
생식 사진 :
양식 확인 상태
양식을 작성할 때는 양식 검증을해야합니다. 또한 검증 상태 스타일을 제공해야하며 이러한 효과는 부트 스트랩 프레임 워크에도 제공됩니다.
1. Has-Berning : 경고 상태 (노란색)
2.. Has-error : 오류 상태 (빨간색)
3. Has-success : 성공 상태 (녹색)
양식을 확인할 때 다른 상태는 성공 IS 체크 부호 (√), 오류는 크로스 부호 (×) 등과 같은 다른 아이콘을 제공합니다.이 효과는 부트 스트랩 박스에도 제공됩니다. 해당 상태에 아이콘을 표시하려면 양식이 해당 상태에 "Has-Feedback"을 추가하면됩니다. 그러한 이름은 "has-error", "has warning"및 "has-success"와 관련이 있습니다.
<form role = "form"> <div> <label for = "inputsuccess1"> 성공 상태 </label> <input type = "text"id = "inputSuccess1"inputsuccess1 "placeholder ="success "> </div> <div> <label for ="inputwarning1 "> 경고 상태 </label> <input type ="ind = "intputwarning 1"place Holder = 상태 "> </div> <div> <label for ="inputeRror1 "> 오류 상태 </label> <input type ="text "id ="inputerRor1 "placeholder ="error status "> </div> <br> <br> <br> <form 역할 ="form "> <<brive> <br> <br> <form"> <div> <label for = "inputsuccess1"> dabel> < "type ="type " id = "inputsuccess1"placeholder = "success status"> <span> </span> </div> <div> <label for = "inputWarning1"> 경고 상태 </label> <입력 유형 = "text"id = "inputWarning1"placeholder = "경고 상태 <span> </span> </div> <label for ="inputerror1. type = "text"id = "inputError1"자리 표시기 = "오류 상태"> <span> </span> </div> </form>
생식 사진 :
프롬프트 정보를 작성하십시오
일반적으로 양식 검증을 할 때는 다른 신속한 정보를 제공해야합니다. 이 효과는 부트 스트랩 프레임 워크에도 제공됩니다. "헬프 블록"스타일이 사용되며 프롬프트 메시지가 블록에 표시되며 컨트롤 하단에 표시됩니다.
<form role = "form"> <div> <label for = "inputsuccess1"> 성공 상태 </label> <input type = "text"id = "inputSuccess1"inputSuccess1 "placeholder ="success "> <span> 입력 한 정보는 정확합니다 </span> </label </label =" "inputwarning1"> intputwarning 1 "> <inputwarning" "> id = "inputWarning1"placeHolder = "경고 상태"> <span> 올바른 정보를 입력하십시오 </span> <span> </div> <div> <label for = "inputerRor1"> 오류 상태 </label> <입력 유형 = "텍스트"id = "inputError1"placeHolder = "error status"> </form </span> </span> </span> </form이 잘못되었습니다.
생식 사진 :
위는 편집자가 소개 한 부트 스트랩 양식 스타일을 사용하는 것입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!