Buku pengenalan Bootstrap (5) Bar navigasi, kemahiran navigation_javascript paging

Bar navigasi

Bar navigasi (navbar) dan Buku pengenalan Bootstrap (4) menu, butang dan navigasi diperkenalkan di bahagian sebelumnya. Navigasi (nav) hanyalah satu perkataan yang berbeza, dengan perkataan tambahan "bar". Malah, mereka masih jelas berbeza dalam rangka kerja Bootstrap. Terdapat warna latar belakang dalam bar navigasi (navbar), dan bar navigasi boleh menjadi pautan tulen (serupa dengan navigasi), borang, atau gabungan bentuk dan navigasi. Ia runtuh (dan boleh dibuka dan ditutup) pada peranti mudah alih dan secara beransur-ansur berkembang secara mendatar apabila lebar port pandangan meningkat.

Bar navigasi asas

Sebenarnya, perbezaan dalam penampilan antara bar navigasi dan navigasi tidaklah begitu besar, tetapi dalam penggunaan sebenar, bar navigasi jauh lebih rumit daripada navigasi. Mari kita laksanakan bar navigasi asas.

<div class="navbar navbar-default" role="navigation"><!--role是为了方便屏幕阅读器理解此处内容-->
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">PHP</a></li>
 </ul>
</div>

Kesan yang boleh dicapai adalah seperti berikut:

Skrin lebar:

Skrin sempit:

Apabila membuat bar navigasi asas, perhatikan perkara berikut:

1. Mula-mula, tambahkan nama kelas .navbar-nav
berdasarkan senarai navigasi (

)

2. Tambahkan bekas (div) di luar senarai Jika dibenarkan di sini, adalah disyorkan untuk menggunakan