Buku pengenalan Bootstrap (4) Menu, butang dan kemahiran navigation_javascript

WBOY
Lepaskan: 2016-05-16 15:14:57
asal
1307 orang telah melayarinya

Apa yang akan kami pelajari seterusnya ialah beberapa komponen yang disediakan oleh Bootstrap Komponen ini sangat mudah digunakan, boleh membantu kami membina tapak web dengan cepat dan mudah, serta boleh mencapai kesan paparan yang baik. Perkara yang paling perlu kita perhatikan ialah: struktur HTML dan kelas serta atribut yang disediakan oleh bootstrap untuk ditambahkan pada struktur.

Fungsi interaktif komponen ini bergantung pada perpustakaan jQuery, jadi jQuery.js juga mesti diperkenalkan, dan ia mesti sebelum Bootstrap.js. Jika ia dilancarkan secara rasmi, hanya gunakan versi mampat seperti berikut:

<script src="../js/jquery-min-1.11.3.js"></script><script src="../js/bootstrap.min.js"></script>
Salin selepas log masuk

Menu

Penggunaan asas

Dalam dokumentasi rasmi, komponen menu lungsur yang kita lihat kelihatan seperti ini:

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> </ul></div>
Salin selepas log masuk

Jadi, atribut manakah yang diperlukan untuk mengawal tingkah laku? Bahagian yang manakah digunakan untuk pengubahsuaian?

Mari kita mudahkan kod ini sendiri:

<div class="dropdown"> <button class="dropdown-toggle"data-toggle="dropdown">下拉菜单</button> <ul class="dropdown-menu" > <li>菜单项1</li> <li>菜单项2</li> </ul></div>
Salin selepas log masuk

Mari kita lihat perbandingan sebelum dan selepas pemudahan:

Apabila menggunakan komponen menu lungsur dalam rangka kerja Bootstrap, adalah sangat penting untuk menggunakan struktur yang betul Jika struktur dan nama kelas tidak digunakan dengan betul, ia akan menjejaskan sama ada komponen itu boleh digunakan secara normal. Selepas pemudahan kami di atas, akhirnya kami dapat melihat bahawa keperluan teras adalah seperti berikut:

Gunakan bekas bernama .dropdown untuk membalut keseluruhan elemen menu drop-down Dalam contoh:

menggunakan butang Dan takrifkan nama kelas .dropdown-toggle dan atribut data-toggle tersuai, dan nilainya mestilah konsisten dengan nama kelas bekas paling luar Contoh ini ialah: data-toggle="dropdown" item menu drop-down menggunakan senarai ul dan mentakrifkan kelas Bernama .dropdown-menu , contoh ini ialah:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan