집 > 기사 > 웹 프론트엔드 > Bootstrap에서 form과 navbar를 사용하는 방법에 대한 분석

Bootstrap에서 form과 navbar를 사용하는 방법에 대한 분석

不言원래의: 2018-06-25 10:55:092153검색

이 글은 주로 Bootstrap에서 form과 navbar를 어떻게 사용하는지 자세히 설명하고 있습니다. 관심있는 친구들은 참고하시면 됩니다.

1. Form(Form)

소스코드 파일:
_form.scss
mixins/ _form.scss

1. 계층 구조에 따라: form-group -> form-control/input-group/form-static-control -> 다양한 태그
2. 입력 그룹/양식 정적 제어는 블록과 인라인 블록의 두 가지 표시 모드로 나뉩니다. 테이블 셀은 입력 그룹 수준을 구현하는 데 사용됩니다.

.input-group {
  display: inline-table;
  vertical-align: middle;
  .input-group-addon,
  .input-group-btn,
  .form-control {
  width: auto;
  }
}

3. 입력 그룹 애드온: 웹 페이지 텍스트 아이콘이 클래스에 삽입되면 1픽셀씩 잘못 정렬됩니다.

해결책: glyphicon은 다른 스타일과 함께 사용할 수 없습니다. 함께 사용하되 내부적으로 사용하십시오. glyphicon의 상단은 1픽셀로 설정되어 있기 때문입니다:

.glyphicon {
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: &#39;Glyphicons Halflings&#39;;
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

2. 탐색 모음(navbar)

소스 코드 파일:
_navbar.scss

1. 헤드, 기타 영역 및 탐색 모음 위치 지정과 같은 주로 분할된 내부 영역
2. 대신 navbar-collapse 클래스인 폴더 구현(4.0에서 제거됨) 축소이며 버튼에 숨겨진 레이어가 나타납니다.
2.1. Navbar-collapse: 중단점보다 크면 강제로 표시됩니다(기본적으로 축소는 숨겨져 있으므로)
3. 브랜드, 양식, 토글러
4. Navbar-toggler(4.0에서 제거됨): 화면이 중단점 값(768)보다 작을 때 표시하도록 설정합니다. 4.0에서는 이 버튼을 직접 표시하는 데 사용됩니다. 제한. navbar-toggle 애플리케이션은 축소와 함께 사용해야 합니다.
5. Navbar-static-top: zIndex를 추가하고 둥근 모서리, 테두리 너비 및 기타 콘텐츠를 제거합니다.
6. Navbar-고정 상단/하단: 플로팅 효과로 위아래에 배치됩니다.
7. Navbar-브랜드: 브랜드, 웹페이지 이름, 회사 로고 및 기타 콘텐츠를 넣을 수 있습니다.
8. 축소용 클릭한 그림은 중단점보다 작을 때 표시되고 이 값보다 크면 숨겨집니다(그리고 토글 표시는 오른쪽에 떠 있고 상대 위치 지정 요소로 사용됩니다):

.navbar-toggle {
 position: relative;
 float: right;
 margin-right: $navbar-padding-horizontal;
 padding: 9px 10px;
 @include navbar-vertical-align(34px);
 background-color: transparent;
 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
 border: 1px solid transparent;
 border-radius: $border-radius-base;

 // We remove the `outline` here, but later compensate by attaching `:hover`
 // styles to `:focus`.
 &:focus {
 outline: 0;
 }

 // Bars
 .icon-bar {
 display: block;
 width: 22px;
 height: 2px;
 border-radius: 1px;
 }
 .icon-bar + .icon-bar {
 margin-top: 4px;
 }

 @media (min-width: $grid-float-breakpoint) {
 display: none;
 }
}

9.Navbar-nav: 원본 nav를 기반으로 일부 호환성 설정이 이루어졌습니다. 주요 설정은 breakpoint-max 아래의 스타일 조정, 또는 기본 배경색, 그림자 제거입니다.
10. Navbar-form: 주로 모든 양식을 조정합니다. 인라인 요소의 경우
11, Navbar-text, navbar-btn: 모두 기본값을 기반으로 호환되는 설정이 있습니다.
12 Navbar는 기본 및 역방향의 두 가지 테마를 제공합니다. 해당 스타일 호환성 처리
13. 내비게이션 바 자체에는 스타일이 많지 않으며, 주로 토글과 브랜드 두 가지 테마와 드롭다운, 축소, 양식의 조합을 제공합니다. 탐색.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

Bootstrap에서 form과 navbar를 사용하는 방법에 대한 분석

관련 기사