Penjelasan terperinci tentang cara menggunakan kemahiran navigasi bar_javascript komponen JS Bootstrap

Bar navigasi ialah komponen meta responsif yang berfungsi sebagai pengepala navigasi dalam apl atau tapak web anda.

1. Bar navigasi lalai

Bar navigasi boleh dilipat (dan boleh dibuka dan ditutup) pada peranti mudah alih, dan berkembang secara mendatar apabila lebar port pandangan yang tersedia meningkat
Sesuaikan ambang untuk mod lipatan dan mod mendatar
Bergantung pada panjang kandungan yang anda letakkan pada bar navigasi, anda mungkin perlu melaraskan ambang di mana bar navigasi memasuki mod runtuh dan mod mendatar. Anda boleh mencapai keperluan anda dengan menukar nilai pembolehubah @grid-float-breakpoint atau menambah kod CSS pertanyaan media anda sendiri.
Langkah pertama:
Teg navigasi bekas paling luar dan tambahkan kelas gaya bar navigasi untuk menunjukkan bahawa ia tergolong dalam bar navigasi

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

Kesan:

Langkah 2: Tambahkan pengepala

<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>

Terdapat tiga ikon rentang bersarang dalam label butang. Kemudian berikan kelas gaya togol navbar dan keruntuhan atribut (runtuh), dan sasaran ialah sasaran data apabila diklik.
Apabila tetingkap dikurangkan ke tahap tertentu, kesan di sebelah kanan muncul.

Langkah 3: Menu lungsur turun bersarang, borang borang, menu lungsur turun.
Kod:

<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> 

Pratonton:

Tingkatkan kebolehcapaian bar navigasi
Untuk meningkatkan kebolehaksesan, pastikan anda menambah role="navigation" pada setiap bar navigasi.

2
Meletakkan borang dalam bentuk .navbar boleh memberikan penjajaran menegak yang baik dan keadaan runtuh dalam port pandangan yang lebih sempit. Gunakan pilihan penjajaran untuk menentukan tempat ia muncul pada bar navigasi.

Banyak kod dikongsi dengan menggunakan mixin, .navbar-form dan .form-inline.

Kod

<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> 

Tambahkan label pada kotak input

Jika anda tidak menambah label pada medan input, pembaca skrin akan menghadapi masalah. Untuk borang dalam bar navigasi, anda boleh menyembunyikan label label melalui kelas .sr sahaja.

3. Butang
Kod: 85e0963ef6d2711d8eba3da5e45d1b24Log masuk65281c5ac262bf6d81768915a4a77ac0
Pratonton:

4 Apabila membungkus teks dalam .navbar-text, untuk mempunyai jarak dan warna baris yang betul, teg e388a4556c0f65e1904146cc1a846bee
Coretan kod: 5de6cbe700cb789e3d18b8a25d9b5d03text94b3e26ee717c64999d7867364b1b4a3

5. Pautan bukan navigasi
Mungkin anda ingin menambah pautan standard sebagai tambahan kepada komponen navigasi standard Kemudian, gunakan kelas .navbar-link untuk memberikan pautan warna lalai dan warna songsang.
Coretan kod:

Salin kod Kod adalah seperti berikut:8cbca580de02f9a8738c5d3957bfa3f3 Ini ialah1d73e434f191d7e3a9c5be813db37f6aPautan5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3

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 adalah 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.