JS 구성 요소 Bootstrap 탐색 모음_javascript 기술 사용 방법에 대한 자세한 설명

탐색 모음은 앱이나 웹사이트에서 탐색 헤더 역할을 하는 반응형 메타 구성요소입니다.

1. 기본 탐색바

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

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

효과:

2단계: 헤더 추가

<nav class="navbar navbar-default" role="navigation"> 
   <div 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> 
   </div> 
  </nav>

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

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

<h1 class="page-header">导航条</h1> 
  <nav class="navbar navbar-default" role="navigation"> 
   <div 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> 
   </div> 
   <div 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"> 
     <div class="form-group"> 
     <input type="text" class="form-control" /> 
     </div> 
     <button type="button" class="btn btn-default">Submit</button> 
     
    </form> 
    <!----> 
   </div> 
  </nav> 

미리보기:

내비게이션 바 접근성 향상
접근성을 높이려면 각 탐색 모음에 role="navigation"을 추가해야 합니다.

2. 양식
.navbar-form 내에 양식을 배치하면 더 좁은 뷰포트에서 좋은 수직 정렬과 접힌 상태를 제공할 수 있습니다. 정렬 옵션을 사용하여 탐색 모음에 표시되는 위치를 결정합니다.

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

코드

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

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

3. 버튼
코드:
85e0963ef6d2711d8eba3da5e45d1b24로그인65281c5ac262bf6d81768915a4a77ac0
미리보기:

4. 텍스트
.navbar-text에서 텍스트를 래핑할 때 올바른 줄 간격과 색상을 유지하기 위해 일반적으로 e388a4556c0f65e1904146cc1a846bee 태그가 사용됩니다.
코드 조각:
5de6cbe700cb789e3d18b8a25d9b5d03텍스트94b3e26ee717c64999d7867364b1b4a3
5. 비탐색 링크
표준 탐색 구성 요소 외에 표준 링크를 추가하고 싶을 수도 있습니다. 그런 다음 .navbar-link 클래스를 사용하여 링크에 올바른 기본 색상과 반전 색상을 제공하세요.
코드 조각:

코드 복사 코드는 다음과 같습니다.

8cbca580de02f9a8738c5d3957bfa3f3 이것은< ;a href="#" class="navbar-link">링크5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3

입니다.
6. Penjajaran komponen
Gunakan kelas alat .navbar-left atau .navbar-right untuk menjajarkan pautan navigasi, borang, butang atau teks. Kedua-dua kelas menggunakan gaya apungan CSS dalam arah tertentu. Contohnya, untuk menjajarkan pautan navigasi, letakkannya dalam ff6d136ddc5fdfeffaf53ff6ee95f185 berasingan yang mempunyai kelas utiliti yang digunakan padanya.

Kelas ini ialah versi campuran .pull-left dan .pull-right, tetapi ia terhad kepada pertanyaan media, yang menjadikannya lebih mudah untuk mengendalikan komponen bar navigasi pada pelbagai saiz skrin.

7. Ditetapkan di bahagian atas
Tambahkan .navbar-fixed-top untuk membetulkan bar navigasi di bahagian atas. Kesannya hilang.
Perlu set padding untuk body tag
Bar navigasi tetap ini akan meliputi kandungan lain pada halaman, melainkan anda menetapkan pelapik di atas 3c30aa6c4c72dd8ead30672a51b803a7. Gunakan nilai anda sendiri, atau gunakan kod yang diberikan di bawah. Petua: Ketinggian lalai bar navigasi ialah 50px.

badan { padding-top: 70px; Ia mesti diletakkan selepas fail teras Bootstrap CSS. (Isu liputan)

8. Tetap di bahagian bawah Gunakan .navbar-fixed-bottom sebaliknya.
Kena set inner (padding) untuk body tag
Bar navigasi tetap ini akan meliputi kandungan lain pada halaman, melainkan anda menetapkan padding di bahagian bawah 6c04bd5ca3fcae76e30b72ad730ca86d. Gunakan nilai anda sendiri, atau gunakan kod yang diberikan di bawah. Petua: Ketinggian lalai bar navigasi ialah 50px.

badan { pelapik-bawah: 70px; Pastikan anda menggunakannya selepas memuatkan teras Bootstrap CSS.

9. Masih di atas
Buat bar navigasi dengan halaman dengan menambahkan .navbar-static-top. Ia hilang semasa anda menatal ke bawah halaman. Tidak seperti kelas .navbar-fixed-*, anda tidak perlu menambah padding pada badan.
10. Bar navigasi terbalik
Kemunculan bar navigasi boleh ditukar dengan menambah kelas .navbar-inverse.
Di atas ialah pengenalan terperinci tentang cara menggunakan bar navigasi Bootstrap, saya harap ia akan membantu pembelajaran semua orang.