우선, 모든 친구들에게 그들의 지원에 감사하고 싶습니다. Bootstrap에 대한 연구 요약을 계속 업데이트 할 것입니다. 글쓰기에 문제가 있다면 저를 바로 잡으십시오. 이전 기사와 관련하여 고정 레이아웃 및 스트리밍 레이아웃이 매우 중요합니다. 당신이 그것에 대해 명확하지 않다면, 당신은 내가 쓴 내용을 살펴볼 수 있습니다 : 부트 스트랩 연구 노트 : CSS 스타일 디자인 (1)
이번에는 부트 스트랩의 스타일과 이러한 클래스 사용 방법, 클래스 간의 차이점 및 관련 클래스의 차이점에 대한 구체적이고 주요 클래스를 살펴 보겠습니다.
1. 양식
1. 형식 제어 클래스 : <input> <select> <textRea>이 클래스를 포함하는 태그의 너비는 너비가됩니다.
<form role = "form"> <!-모든 입력, TextArea, 폼 제어 클래스 세트가있는 선택 요소는 너비로 기본적으로 기본적으로 표시됩니다 : 100%-> <div>-일반적으로 말하면, 레이블과 우주 랩핑은 폼 그룹 <label </label "> </label> <input type ="id = ind = "infputemail"infutemail "hollepemail"hollepemail "houndepemail"houndinputemail "houndinputemail"houndinputemail "houndinputemail"houndinputemail "에 사용됩니다. <label for = "exampleInputeMail"> 이메일 이름 </label> <textArea> 11111 </textarea> </div> <div> <label for = "select"> select "> select"> </label> <select> <pluxce> 111 </옵션> <plured> 222 </옵션> </select> </div> </form>
위의 코드에 따르면, 우리는 그것을 하나씩 볼 수 있습니다. 양식 인라인 클래스 추가 (한 줄에 제어를 넣음) | 형식-호화 클래스 (레이블은 왼쪽에 있고 컨트롤이 오른쪽에 있음) 라벨의 도움을 사용합니다.
<!-Form-inline 클래스는 수평 적으로 존재합니다-> <form>-초대적으로 확인-인라인, 무선 인라인 등이 있습니다. <div> <label for = "examesInputamount"> aMber </label> <div>-입력 그룹 <div>@</div>-adput </div> </div> </div> </div> </div> <ind = "indup"heappleAnt "" <div>@</div> </div> </div> <버튼 유형 = "제출"> 검색 </button> </form>
효과는 다음과 같습니다.
추가하지 않으면 버튼이 다음 줄로 압박됩니다. 더 이상 사진이 여기에 게시되지 않으며 코드를 붙여 넣고 직접 테스트 할 수 있습니다.
<!-끔찍한 양식 컨트롤 라벨 : 텍스트가 올바른 정렬 상태입니다-> <form> <div> <레이블에 대한 = "입력에 메일"> 이메일 : </label> <div> <입력 유형 = "encome"id = "inputemail"placeholder = "email"> </div> </div> <div> <inputpassword "> </label> </label> <inputpassword". id = "inputpassword"자리 표시 자 = "비밀번호"> </div> </div> </div> </form>
효과는 다음과 같습니다.
( 참고 : 여기의 입력 텍스트 상자는 5/6을 설명해야합니다. 너비를 20%로 사용자 정의했습니다)
여기서는 형태의 고등성과 관련하여 Bootstrap의 그리드 시스템과 함께 수행해야합니다.
<form> 요소에서 클래스 이름 "Form-Horizontal"을 사용하면 다음 기능이 있습니다.
1 : 양식 컨트롤의 패딩 및 마진 값을 설정하십시오. 위의 코드는 디버그 콘솔 인 Padding-Left : 50px에서 볼 수 있습니다.
2 : 그리드 시스템의 "행"과 유사한 "Form-Group"의 표현을 변경하십시오.
2. 레이블의 기능
<label for = "hello1"> hello </label> <input type = "text"id = "hello"> <br> --- 파란색 후광이 생성됩니다. 컨트롤에 마우스가 배치 된 경우에만 파란색 후광이 있습니다.
위의 코드를 기준으로 : 레이블의 for 속성은 컨트롤의 ID에 해당해야합니다. 기능 : 마우스가 레이블에 놓일 때 해당 컨트롤이 파란색 후광을 생성해야합니다.
3. 역할의 역할
양식이나 일부 컨트롤을 작성할 때 역할을 추가 해야하는 이유가 이상하다고 생각하십니까?
기능 : 화면 읽기 소프트웨어를 인식 할 수 있는지 확인하십시오. 스크린 레딩 소프트웨어는 정신적으로 지체 된 사람들이 인터넷에 액세스하는 데 도움이되는 소프트웨어입니다. 그것은 목소리의 형태로 정신적으로 지체 된 사람들에게 그림, 텍스트 등을 전달합니다. 따라서 화면 읽기 소프트웨어를 인식 할 수 있도록하기 위해 일반적으로 작성 해야하는 특수 기능이있는 시맨틱 태그 나 태그가 없습니다. 예를 들어:
<a href = "#"#"role ="button "> link </a> <!-링크 A가 버튼으로 사용되어 다른 페이지 나 현재 페이지의 나머지 부분에 연결하는 대신 현재 페이지의 특정 기능을 트리거하는 데 사용되는 경우"Button "-> 원래 A는 여기서 버튼으로 사용됩니다. 화면 읽기 소프트웨어는이를 인식 할 수 없으므로 역할 = "버튼"을 추가하여 화면 읽기 소프트웨어에 버튼 버튼임을 알리십시오.
4. 라벨, Aria-Label, aria-labeled의 차이점은 무엇입니까?
<div> <입력 유형 = "text"id = "idcard"aria-label = "id card"> <p> 예제 블록 레벨 </p>-help-block : expromp </div> <div> <label for = "idcard"> id card </label> <ind ind = "idcard"> <p> 예제 블록 수준
효과는 다음과 같습니다.
전자는 "ID 카드"라는 단어가 없으며, 둘 다 화면 읽기 소프트웨어의 편의를위한 것입니다. Aria-Label이 숨겨져있는 것입니다.
Aria-labelled를 사용하는 방법을 살펴 보겠습니다. 일반적으로 레이블 텍스트가 특정 요소에 이미 존재하는 경우 ARIA-LABELLED를 사용하며 그 값은 모든 읽기 요소의 ID입니다. 다음 서브를 살펴 보겠습니다.
<div> <button type = "button"id = "dropdownMenu1"data-toggle = "dropdown"> 다음 옵션을 선택합니다. <Span> </span> </button> <ul 역할 = "menu"aria-labelledby = "dropdownmenu1"> <li 역할 = "프리젠 테이션"> roble = "menuitem"tabindex = ""href = "#"> ">"> ">"> ">">. 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 22222 </a> <li role = "presentation"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 22222 </a> <li roal = "a role ="a man guit " href = "#"> 33333 </a> </li> </ul> </div>
현재 UL에는 Li가 포함되어 있으며 버튼에 제어되므로 현재 Aria-Labelledby를 사용하는 것이 더 적절합니다. 간단히 말해서, 세 가지 사이의 사용 범위는 다르며 기본 기능은 동일합니다. 스크린 읽기 소프트웨어의 편의를위한 편의성. 숨겨진 수업과 관련하여 SR 전용 클래스를 언급해야합니다. 봅시다.
<label for = "inputeMail"> 이메일 : </label>
<label for = "inputeMail"> 이메일 : </label>
이 시점의 효과는 다음과 같습니다. 위의 텍스트는 숨겨져 있으며이 차이 만 변경되지 않습니다.
5. 장애인 수업
형식에서는이 수업에주의를 기울여야합니다. 여기에서 비교해 봅시다.
<!-FieldSet, 기능을 포함하여 양식을 소개합니다. 블록에 양식을 포함합니다-> <form role = "form"> <fieldset disabled> <div> <label for = "disabledtextinput"> disabled input box </label> <입력 유형 = "text"id = "disabledtextinput"placeholder = "disabled"> <divel for = "disabledlet"> <id = "disabledect"> intion> 선택 할 수없는 비활성화 </옵션> </select> </div> <div> <label> input type = "checkbox"> disable을 선택할 수 없습니다 </label> </div> <버튼 유형 = "제출"> 제출 </button> </fieldset> </form>
FileSet에 비활성화 된 클래스를 추가하면 장애가있는 양식은 버튼 선택 입력 등에 대해서만 비활성화되며 다른 항목 범례 속성에 대해서는 작동하지 않습니다. 이에 비해 전설 속성을 추가하십시오
<!-길이가 추가 된 속성-> <form "> <form"> <fieldset disabled> <legend> <input type = "text"placeHolder = "색상이 회색으로 나오지만, 비활성화되지 않지만"> </legend>-입력 상자에 마우스를 배치 할 수 있습니다. 위장기 = "disabled"> </div> <div> <label for = "disabledSelect"> disabledect 드롭 다운 상자 </label> <select id = "disabledselect"> <select "> </옵션> </div> <div> <라벨> <입력 유형 ="checkbox "> </label> </div> <버튼 유형을 제출하십시오"> bulture "> <!-비활성화 된 양식은 버튼 선택 입력 등에 대해서만 비활성화되며 다른 항목 범례에 대해서는 작동하지 않습니다->
6.Data-Toggle Data-Target Data-Spy 속성
HTML5를 사용하면 개발자가 태그에 속성을 자유롭게 추가 할 수 있으며이 사용자 지정 속성은 일반적으로 "데이터"로 시작합니다.
데이터 토글 : 데이터 상호 작용을 나타냅니다. 위 열의 버튼을 클릭하여 드롭 다운 메뉴로 전환하십시오.
Data-Spy는 다음을 나타냅니다 : 모니터링
데이터 트레이트 : 대상.
여기에는 JS의 이벤트가 포함되며 자세히 설명하지 않습니다. 부트 스트랩에서 JS 학습을 입력하면 이러한 문제를 살펴 보겠습니다. 그 형태에는 여전히 많은 것들이 있으며, 거의 많은 요약이 있습니다. 추가 사항도 있습니다. 아래에 메시지를 남겨주세요.
2. 버튼 클래스
이것은 어렵지 않습니다. 속성 클래스를 기억하십시오. 이해하기 쉽습니다.
<a href = "#"robol = "button"> link </a> <버튼 유형 = "제출"disabled = "disabled"> default </button> <버튼 유형 = "제출"> 기본 </button> <button type = "제출"> 성공 </button> <button type = "제출"> info </button> ---btn- 블록 : 부모 요소의 100%로 스트레칭 "> </inpute <input"> 값 = "입력"> <입력 유형 = "버튼"value = "제출">
효과는 다음과 같습니다.
3. 그림 카테고리
<!-중앙 중앙 블록 : 중앙 중앙에 img 라운드를 표시 할 내용 : 둥근 모서리가 포함되어 있습니다. IMG-Circle : Ring IMG-Thumbnail : 그림에 외부 테두리를 추가합니다->.
<img src = "111.png">
<img src = "111.png">
<img src = "111.png">
효과는 다음과 같습니다.
요약하면, 나는 개인적으로 형태의 역할이 여전히 매우 중요하다고 생각합니다. 여기에서 다른 기본 범주를 설명하는 것이 더 쉽습니다. 다음 기사는 CSS 구성 요소의 학습으로 전송됩니다 : 부트 스트랩 학습 노트 CSS 구성 요소 (3)
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.