Buku pengenalan Bootstrap (5) Bar navigasi, kemahiran navigation

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>

Salin selepas log masuk

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

dan menggunakan nama kelas .navbar dan .navbar-default

3. Fungsi utama kelas navbar adalah untuk menetapkan kesan seperti padding kiri dan kanan serta bucu bulat Gunakan .navbar-default untuk mengawal warna bar navigasi, seperti .navbar-inverse.

Dengan tajuk, menu kedua

Dalam pengeluaran halaman web, anda biasanya boleh melihat tajuk di hadapan menu (saiz teks lebih besar sedikit daripada teks lain, malah rangka kerja Bootstrap juga telah mengambil kira perkara ini untuk semua orang, melalui .navbar-). pengepala Dan .navbar-jenama untuk dicapai, seperti:

<div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
</div>

Salin selepas log masuk

Sudah tentu ia juga boleh digunakan untuk membuat logo, seperti yang diterangkan di laman web rasmi Cina, yang tidak akan diterangkan secara terperinci di sini.

Tidak perlu diperkatakan lagi tentang menu sekunder Ia telah diterangkan secara terperinci dalam blog sebelum ini, anda boleh membaca blog saya sebelum ini dan kesan yang boleh dicapai: (perhatikan bahawa bar navigasi songsang navbar digunakan di sini)

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li class="dropdown" >
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">JavaScript
 <span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">jQuery</a></li>
 <li><a href="#">Vue</a></li>
 <li><a href="#">NodeJS</a></li>
 </ul>
 </li>
 <li ><a href="#">PHP</a></li>
 </ul>
</div>

Salin selepas log masuk

Kesannya adalah seperti berikut:

Dengan borang

Kami sering melihat borang carian dalam bar navigasi, seperti Zhihu, Sina Weibo, dll. Sudah tentu, rangka kerja Bootstrap tidak boleh kekurangan perkara sedemikian. Cara penggunaannya juga sangat mudah:

Borang .navbar disediakan dalam rangka kerja Bootstrap. Letakkan borang dengan nama kelas .navbar-form dalam bekas .navbar kemudian tambahkan .navbar-left untuk membuat borang terapung ke kiri untuk penjajaran yang lebih baik.

Dalam Bootstrap, gaya .navbar-right turut disediakan untuk menjajarkan elemen di sebelah kanan bar navigasi.

Salin kod ini ke dalam kod dan lihat kesannya:

<form action="##" class="navbar-form navbar-left" rol="search">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
</form>

Salin selepas log masuk

Butang, teks dan pautan

Selain beberapa gaya di atas, rangka kerja bootstrap menyediakan tiga gaya lain:

1. Butang navbar-btn dalam bar navigasi menjadikan butang bukan dalam secara menegak dalam bar navigasi

2. Teks bar navigasi teks dalam bar navigasi biasanya menggunakan elemen

3. Pautan biasa dalam pautan bar navigasi bar navigasi, pautan bukan navigasi, tambah kelas ini untuk mempunyai tetapan warna lalai dan warna songsang yang betul

Walau bagaimanapun, ketiga-tiga gaya ini tertakluk kepada sekatan tertentu apabila digunakan dalam rangka kerja dan perlu digunakan bersama dengan jenama navbar dan navbar-nav. Terdapat juga had tertentu pada kuantiti Secara amnya, tidak akan ada masalah jika anda menggunakan satu atau dua, tetapi akan ada masalah jika anda menggunakan lebih daripada dua.

Bar navigasi tetap Kadangkala, kami mahu bar navigasi dibetulkan di bahagian atas atau bawah penyemak imbas Bootstrap dengan mudah memberikan kami dua kelas untuk mencapai gaya sedemikian:

.navbar-fixed-top: Bar navigasi ditetapkan di bahagian atas tetingkap penyemak imbas

.navbar-fixed-bottom: Bar navigasi ditetapkan di bahagian bawah tetingkap penyemak imbas

Kaedah penggunaan adalah sangat mudah Anda hanya perlu menambahkan nama kelas yang sepadan pada bekas paling luar (navbar) bar navigasi.

这个固定的导航条会遮住页面上的其它内容，除非你给元素底部设置了 padding 。提示：导航条的默认高度是 50px。如： body { padding-bottom: 70px; } ，当然你也可以使用你自己的值。

响应式导航条

在上面的例子中，导航条就仅仅能大屏幕下有一个不错的效果，在屏幕变小的情况下，还直接把所有的导航项直接展现出来就不适合了。为了有一个更好的显示效果，响应式的导航条设计也就随之而来。我们先来看看效果，再一步一步分析它！

窄屏时，点击右边的按钮图标可展开，效果与上面的展开效果除了 active 状态不再溢出容器外，其他基本相同。实现代码如下：

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
 <a href="#" class="navbar-brand">WEB开发</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
 <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>
</div>

Salin selepas log masuk

分析：

和普通导航条一样，最外层使用

Label berkaitan：

bootstrap导航条 bootstrap分页导航 bootstrap入门书籍

sumber：php.cn

Artikel sebelumnya：Pisahkan setiap tiga digit amaun dengan koma di bawah kemahiran js_javascript Artikel seterusnya：js pelaksanaan mudah wilayah, bandar dan daerah tiga peringkat kesan kaitan examples_javascript kemahiran

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang