1. 양식
소스 코드 파일 :
_form.scss
Mixins/_form.scss
1. 계층에 따라 : Form-Group-> Form-Control/Input-Group/Form-Static-Control-> 다양한 태그
2. 양식 그룹/양식-제어/입력 그룹/Form-Static-Control과 같은 컨테이너는 블록 및 인라인 블록의 두 가지 디스플레이 방법으로 나뉩니다. 테이블 셀은 입력 그룹 레벨을 달성하는 데 사용됩니다.
.Input-Group {디스플레이 : 인라인 테이블; 수직 정상 : 중간; .Input-group-addon, .input-group-btn, .form-control {너비 : 자동; }}3. Input-Group-Addon : 클래스가 웹 페이지 텍스트 아이콘을 삽입하면 이전 픽셀을 잘못 정렬합니다.
솔루션 : Glyphicon은 다른 스타일과 함께 사용할 수 없지만 Glyphicon은 상단에 1 픽셀 설정이 있기 때문에 내부적으로 사용됩니다.
.Glyphicon {위치 : 상대; 상단 : 1px; 디스플레이 : 인라인 블록; Font-Family : 'Glyphicons Halflings'; 글꼴 스타일 : 정상; 글꼴 중량 : 정상; 선-높이 : 1; -webkit-font-smoothing : antialiased; -Moz-OSX-Font-Smoothing : Grayscale;}2. 내비게이션 바 (Navbar)
소스 코드 파일 :
_navbar.scss
1. 주로 머리, 기타 영역과 같은 내부 영역을 나눕니다. 및 포지셔닝 내비게이션 바 위치
2. 폴더 구현 (4.0에서 제거됨), 즉 붕괴 대신 Navbar-Collapse 클래스 및 버튼에 숨겨진 레이어가 나타납니다.
2.1. Navbar-Collapse : 중단 점보다 큰 경우 표시됩니다 (기본적으로 붕괴가 숨겨져 있기 때문에)
3. 컨텐츠는 NAV, 브랜드, 양식, 토글을 지원합니다
4. Navbar-Toggler (4.0 제거) : 화면이 중단 점 값 (768)보다 작을 때 표시되도록 설정하고 4.0에서 붕괴를 사용 하여이 버튼을 직접 표시하는 데 사용됩니다. 화면 크기에는 제한이 없습니다. Navbar-Toggle의 적용은 붕괴와 함께 사용해야합니다.
5. Navbar-Static-Top : Zindex를 추가하고 둥근 모서리, 테두리 너비 및 기타 내용을 제거합니다.
6. Navbar-Fixed-Top/Bottom : 플로팅 효과가있는 위와 아래에 모두 배치되어 있습니다.
7. Navbar-Brand : 브랜드, 웹 페이지 이름, 회사 로고 및 기타 컨텐츠를 넣을 수 있습니다.
8. Navbar-Toggle : 수축에 사용되는 클릭 그림은 중단 점보다 적을 때 표시 될 것입니다.이 값보다 큰 경우 숨겨져 있습니다 (및 토글 디스플레이는 오른쪽으로 떠 다니며 상대 위치 요소로 사용됩니다).
.navbar-toggle {위치 : 상대; 플로트 : 오른쪽; 마진 오른쪽 : $ Navbar-Padding-Horizontal; 패딩 : 9px 10px; @include Navbar-Vertical-Align (34px); 배경색 : 투명; 배경 이미지 : 없음; // 비정상적인 Firefox-on-Android 기본 스타일을 재설정합니다. https://github.com/necolas/normalize.css/issues/214 테두리를 참조하십시오 : 1px 고체 투명; Border-Radius : $ Border-Radius-Base; // 우리는 여기에서`otline '을 제거하지만 나중에`: hover` // 스타일을`: focus`에 첨부하여 보상합니다. & : 초점 {개요 : 0; } // bars .icon-bar {display : block; 너비 : 22px; 높이 : 2px; Border-Radius : 1px; } .ICON-BAR + .ICON-BAR {margin-top : 4px; } @Media (min-width : $ Grid-Float-Breakpoint) {디스플레이 : 없음; }}9. Navbar-Nav : 원래 NAV는 호환 가능한 설정을 만들었습니다. Breakpoint-Max에서 스타일을 조정하고 Breakpointg의 스타일을 조정하거나 기본 배경색, 그림자 등을 제거해야합니다.
10. Navbar-Form : 주로 모든 양식을 인라인 요소로 조정합니다.
11. Navbar-Text 및 Navbar-BTN : 기본값을 기준으로 적절한 호환성 설정을 만들었습니다.
12. Navbar는 기본과 역의 두 가지 테마를 제공합니다. 각 테마에는 해당 구성 요소에 대한 해당 스타일 호환 처리가 있습니다.
13. 내비게이션 바 자체에는 스타일이 많지 않습니다. 토글과 브랜드, 주로 두 가지 테마를 제공하는 두 가지 내용과 드롭 다운, 붕괴, 양식 및 Nav의 네 가지 구성 요소 조합을 제공합니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 멋진 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서
이 일련의 튜토리얼은 다음과 같이 컴파일되었습니다. Bootstrap Basic Tutorials 특별 주제, Click to Learn에 오신 것을 환영합니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.