집 > 기사 > 웹 프론트엔드 > JS 구성 요소 Bootstrap 탐색 모음 사용 방법 정보

JS 구성 요소 Bootstrap 탐색 모음 사용 방법 정보

不言원래의: 2018-06-25 14:01:171518검색

이 글에서는 주로 JS 컴포넌트 Bootstrap 네비게이션 바의 사용법을 자세히 소개합니다. 관심 있는 친구들은 참고해보세요.

네비게이션 바는 애플리케이션이나 웹사이트에서 네비게이션 헤더 역할을 하는 반응형 메타 컴포넌트입니다.

1. 기본 내비게이션 바

네비게이션 바는 모바일 기기에서 접을 수 있고(열거나 닫을 수 있음) 사용 가능한 뷰포트 너비가 늘어나면 가로 확장 모드가 됩니다.
맞춤형 접기 모드 및 수평 모드 임계값
탐색 모음에 배치한 콘텐츠의 길이에 따라 축소 모드 및 수평 모드로 전환하려면 탐색 모음의 임계값을 조정해야 할 수도 있습니다. @grid-float-breakpoint 변수의 값을 변경하거나 고유한 미디어 쿼리 CSS 코드를 추가하여 요구 사항을 충족할 수 있습니다.
첫 번째 단계:
가장 바깥쪽 컨테이너 탐색 태그에 탐색 모음 스타일 클래스를 추가하여 탐색 모음에 속함을 나타냅니다.

<nav class="navbar navbar-default" role="navigation"> 
</nav>

효과:

두 번째 단계 : 헤더 추가

<nav class="navbar navbar-default" role="navigation"> 
  <p class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
  <span class="sr-only">Toggle navigation</span> 
  <span class="icon-bar"></span> 
  <span class="icon-bar"></span> 
  <span class="icon-bar"></span> 
  </button> 
  <a href="#" class="navbar-brand">品牌</a> 
  </p> 
 </nav>

버튼 라벨에는 세 개의 범위 아이콘이 중첩되어 있습니다. 그런 다음 navbar-toggle 스타일 클래스와 속성 축소(collapse)를 지정하고 클릭하면 대상이 데이터 대상이 됩니다.
창이 어느 정도 줄어들면 오른쪽에 효과가 나타납니다.

3단계: 중첩된 드롭다운 메뉴, 양식 양식, 드롭다운 메뉴.
코드:

<h1 class="page-header">导航条</h1> 
 <nav class="navbar navbar-default" role="navigation"> 
  <p class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
  <span class="sr-only">Toggle navigation</span> 
  <span class="icon-bar"></span> 
  <span class="icon-bar"></span> 
  <span class="icon-bar"></span> 
  </button> 
  <a href="#" class="navbar-brand">品牌</a> 
  </p> 
  <p class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
  <!--嵌套下拉菜单--> 
  <ul class="nav navbar-nav"> 
   <li class="active"><a href="#">Link</a></li> 
   <li><a href="#">Link</a></li> 
   <li><a href="#">Link</a></li> 
   <li class="dropdown"> 
   <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
   下拉<b class="caret"></b> 
   </a> 
   <ul class="dropdown-menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Action</a></li> 
   </ul> 
   </li> 
  </ul> 
   
  <!--嵌套表单--> 
  <form action="" class="navbar-form navbar-left" role="search"> 
   <p class="form-group"> 
   <input type="text" class="form-control" /> 
   </p> 
   <button type="button" class="btn btn-default">Submit</button> 
   
  </form> 
  <!----> 
  </p> 
 </nav>

미리보기:

내비게이션 바의 접근성 향상
접근성을 높이려면 각 내비게이션 바에 role="navigation"을 추가하세요.

2. 양식
양식을 .navbar-form 내에 배치하면 세로 정렬이 잘 되고 더 좁은 뷰포트에 축소된 상태가 표시될 수 있습니다. 정렬 옵션을 사용하여 탐색 모음에 표시되는 위치를 결정합니다.

mixins, .navbar-form 및 .form-inline을 사용하여 많은 코드가 공유됩니다.

Code

<form action="" class="navbar-form navbar-left" role="search"> 
   <p class="form-group"> 
   <input type="text" class="form-control" /> 
   </p> 
   <button type="button" class="btn btn-default">Submit</button> 
   
  </form>

입력 상자에 라벨 추가
입력 상자에 라벨을 추가하지 않으면 스크린 리더에 문제가 발생합니다. 탐색 모음에 있는 양식의 경우 .sr 전용 클래스를 통해 레이블 레이블을 숨길 수 있습니다.

3. Button
Code:

<button type="button" class="btn btn-default navbar-btn">登陆</button>

Preview:

4. Text
.navbar-text에서 텍스트를 줄바꿈할 때 올바른 줄 간격과 색상을 사용하려면 일반적으로 <를 사용하세요. ;p>
코드 조각:

<p class="navbar-text">文本</p>

5. 비탐색 링크
그런 다음 .navbar-link 클래스를 사용하여 링크에 올바른 기본 색상을 지정하고 싶을 수도 있습니다. 역색.
코드 조각:

<p class="navbar-text navbar-right">这个是<a href="#" class="navbar-link">链接</a></p>

6. 구성 요소 정렬
.navbar-left 또는 .navbar-right 도구 클래스를 사용하여 탐색 링크, 양식, 버튼 또는 텍스트를 정렬합니다. 두 클래스 모두 특정 방향으로 CSS 부동 스타일을 사용합니다. 예를 들어 탐색 링크를 정렬하려면 유틸리티 클래스가 적용된 별도의 ff6d136ddc5fdfeffaf53ff6ee95f185

이 클래스는 .pull-left 및 .pull-right의 혼합 버전이지만 미디어 쿼리로 제한되므로 다양한 화면 크기에서 탐색 모음 구성 요소를 더 쉽게 처리할 수 있습니다.

7. 상단에 고정
.navbar-fixed-top을 추가하여 상단에 탐색 표시줄을 고정하세요. 효과가 사라졌습니다.
body 태그에 패딩을 설정해야 합니다.
6c04bd5ca3fcae76e30b72ad730ca86d 위에 패딩을 설정하지 않는 한 이 고정 탐색 모음은 페이지의 다른 콘텐츠를 덮습니다. 자신의 값을 사용하거나 아래 제공된 코드를 사용하십시오. 팁: 탐색 표시줄의 기본 높이는 50px입니다.

body { padding-top: 70px; }

부트스트랩 CSS의 핵심 파일 뒤에 배치되어야 합니다. (커버리지 문제)
8. 하단에 고정
.navbar-fixed-bottom으로 교체하세요.
body 태그에 내부(패딩)을 설정해야 합니다.
6c04bd5ca3fcae76e30b72ad730ca86d 하단에 패딩을 설정하지 않는 한 이 고정 탐색 모음은 페이지의 다른 콘텐츠를 덮습니다. 자신의 값을 사용하거나 아래 제공된 코드를 사용하십시오. 팁: 탐색 표시줄의 기본 높이는 50px입니다.

body { padding-bottom: 70px; }

一定要在加载Bootstrap CSS的核心后使用它。
9、静止在顶部
通过添加.navbar-static-top即可创建一个与页面的导航条。它会随着页面向下滚动而消失。和.navbar-fixed-*类不同的是，你不用给body添加padding。
10、反色的导航条
通过添加.navbar-inverse类可以改变导航条的外观。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

JS 구성 요소 Bootstrap 탐색 모음 사용 방법 정보

관련 기사