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: Log masuk
Pratonton:

4 Apabila membungkus teks dalam .navbar-text, untuk mempunyai jarak dan warna baris yang betul, teg

Coretan kod:

text

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:

Ini ialahPautan

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