Satu siri kaedah perkongsian untuk menggunakan kemahiran bar_javascript navigasi Bootstrap

Artikel ini mengandungi penggunaan asas bar navigasi Bootstrap untuk rujukan anda Kandungan khusus adalah seperti berikut

1. Gaya navigasi asas Bootstrap
Membuat bar navigasi dalam rangka kerja Bootstrap. terutamanya melalui gaya .nav”. Gaya lalai ".nav" tidak menyediakan gaya navigasi lalai dan gaya lain mesti dilampirkan agar berkesan, seperti "nav-tabs", "nav-pills" dan seumpamanya. Sebagai contoh, terdapat contoh bar navigasi tab dalam editor kod di sebelah kanan Kaedah pelaksanaan adalah untuk menambah gaya kelas .nav dan nav-tabs pada tag ul

HomeCSS3SassjQueryResponsive

2. Bar navigasi asas Bootstrap
Apabila membuat bar navigasi asas, terdapat langkah-langkah berikut:

Langkah 1 : Mula-mula Buat senarai navigasi (

• ) dan tambahkan nama kelas "navbar-nav"

Langkah 2 : Tambah bekas (p) di luar senarai dan gunakan nama kelas "navbar" dan "navbar-default"

Fungsi utama gaya ".navbar" adalah untuk menetapkan kesan seperti kiri dan kanan pelapik dan sudut bulat, tetapi ia dan gaya berkaitan Warna tidak ditetapkan dalam apa jua cara

网站首页系列教程名师介绍成功案例关于我们

3. Tambah tajuk ke bar navigasi Bootstrap
Semasa membuat halaman web, selalunya terdapat tajuk di hadapan menu (saiz teks lebih besar sedikit daripada teks lain, sebenarnya, rangka kerja Bootstrap juga telah mempertimbangkan aspek ini untuk semua orang). , melalui "navbar-header" dan "navbar-brand" untuk dicapai.

　　 导航条
 　网站首页系列教程名师介绍成功案例关于我们

4. Bootstrap bar navigasi menu sekunder
Menambah menu kedua pada bar navigasi juga Sangat. mudah

　　 导航条
 　网站首页系列教程
  CSS3JavaScriptPHP名师介绍成功案例关于我们

5. borang. "navbar-form" disediakan dalam rangka kerja Bootstrap. Letakkan borang dengan nama kelas bentuk navbar. navbar-left" membenarkan borang terapung ke kiri untuk penjajaran yang lebih baik. Dalam rangka kerja Bootstrap, gaya "navbar-right" juga disediakan untuk menjajarkan elemen ke kanan bar navigasi.

　　 Bootstrap
 　网站首页系列教程
  CSS3JavaScriptPHP名师介绍成功案例关于我们搜索

6 Butang, teks dan pautan dalam bar navigasi Bootstrap

Selain menggunakan elemen dan bar navigasi dalam jenama-navbar dalam bar navigasi rangka kerja Bootstrap Selain bentuk ul dan navbar, elemen lain juga boleh digunakan Rangka kerja ini menyediakan tiga gaya lain: 1). >2). Bar navigasi Teks dalam teks bar navigasi
3). dan perlu digabungkan dengan jenama navbar dan navbar- digunakan bersama, dan terdapat had tertentu pada nombor Secara amnya, tidak akan ada masalah jika anda menggunakan satu atau dua, tetapi akan ada masalah jika anda menggunakan lebih daripada dua. 🎜>

7 Bar navigasi tetap Bootstrap

Dalam satu daripada banyak kes, pereka bentuk mahu bar navigasi dibetulkan di bahagian atas atau bawah penyemak imbas bar navigasi tetap digunakan dalam Ia lebih biasa dalam pembangunan mudah alih Rangka kerja Bootstrap menyediakan dua cara untuk membetulkan bar navigasi:
.navbar-fixed-top: Bar navigasi ditetapkan di bahagian atas tetingkap penyemak imbas <🎜. >.navbar-fixed-bottom: Bar navigasi Dibetulkan di bahagian bawah tetingkap penyemak imbas

　　 Bootstrap
 　Navbar TextNavbar TextNavbar Text　　 Bootstrap
 　Navbar Text
  Navbar Text
  Navbar Text

8. Bootstrap paging navigasi
Navigasi halaman dengan nombor halaman, Mungkin jenis navigasi halaman yang paling biasa, terutamanya apabila halaman senarai mempunyai banyak kandungan, ia akan menyediakan pengguna dengan navigasi halaman Biasanya ramai pelajar suka menggunakan p>a dan p>span struktur untuk membuat navigasi paging dengan nombor halaman Walau bagaimanapun, dalam rangka kerja Bootstrap, struktur seperti ul>li>a digunakan dan kaedah penomboran ditambahkan pada teg ul juga boleh menetapkan saiz butang paging melalui beberapa situasi yang berbeza
1). Jadikan navigasi paging lebih besar melalui "pagination-lg"; 🎜>

　…我是内容　…

Selain navigasi paging dengan nombor halaman, rangka kerja Bootstrap juga menyediakan navigasi paging seperti ini sering dilihat pada beberapa tapak web mudah, seperti sebagai blog peribadi, laman web majalah, dsb. Navigasi halaman jenis ini tidak melihat nombor halaman tertentu, tetapi hanya menyediakan butang "halaman sebelumnya" dan "halaman seterusnya".

Dalam penggunaan sebenar, navigasi halaman membalik halaman adalah serupa dengan navigasi halaman dengan nombor halaman Kelas pager ditambahkan pada teg ul.

Secara lalai, navigasi membelok halaman dipaparkan di tengah, tetapi kadangkala kita memerlukan satu di sebelah kiri dan satu di sebelah kanan. Rangka kerja Bootstrap menyediakan dua gaya

sebelumnya: Biarkan butang "Sebelumnya" berada di sebelah kiri

«12345»

seterusnya: Biarkan butang "Seterusnya" berada di sebelah kanan

Di atas adalah siri perkongsian cara menggunakan kemahiran navigasi Bootstrap bar_javascript Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php.cn)!

………