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

WBOY
풀어 주다: 2016-05-16 15:02:56
원래의
1658명이 탐색했습니다.

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

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. 버튼
코드:

미리보기:

4. 텍스트
.navbar-text에서 텍스트를 래핑할 때 올바른 줄 간격과 색상을 유지하기 위해 일반적으로

태그가 사용됩니다.
코드 조각:


5. 비탐색 링크
표준 탐색 구성 요소 외에 표준 링크를 추가하고 싶을 수도 있습니다. 그런 다음 .navbar-link 클래스를 사용하여 링크에 올바른 기본 색상과 반전 색상을 제공하세요.
코드 조각:

코드 복사 코드는 다음과 같습니다.
입니다.
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
    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 . 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 . 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.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿