Plugin Navigasi Tambahan (Affix) memungkinkan <viv> untuk disematkan di suatu tempat di halaman. Anda juga dapat beralih antara menyalakan atau mematikan menggunakan plugin. Contoh umum adalah ikon sosial. Mereka akan mulai di suatu tempat, tetapi ketika halaman mengklik pada tanda, <div> akan mengunci di suatu tempat dan tidak akan menggulir bersama dengan sisa halaman.
Jika Anda ingin merujuk fungsionalitas plugin secara terpisah, maka Anda perlu merujuk afx.js.
1. Penggunaan
Plug-in Navigasi Tambahan (Affix) dapat digunakan melalui properti data atau melalui JavaScript.
1. Melalui Atribut Data: Jika Anda perlu menambahkan perilaku navigasi tambahan (imbuhan) ke elemen, Anda hanya perlu menambahkan data-spy = "imbuhan" ke elemen yang perlu Anda dengarkan. Gunakan offset untuk menentukan kapan penguncian dan pergerakan elemen.
2. Melalui JavaScript: Anda dapat secara manual menambahkan navigasi tambahan ke suatu elemen melalui JavaScript (imbuhan)
2. Posisikan melalui CSS
Dalam kedua cara di atas untuk menggunakan plug-in imbuhan, Anda harus menemukan konten melalui CSS. Plug-in Navigasi Tambahan (Affix) beralih antara tiga kelas, yang masing-masing menyajikan keadaan tertentu: .Affix, .Affix-Top, dan .Affix-Bottom. Harap ikuti langkah -langkah di bawah ini untuk mengatur CSS Anda sendiri untuk ketiga negara bagian ini (tidak mengandalkan plugin ini).
1. Di awal, plugin menambahkan .Affix-top untuk menunjukkan elemen pada posisi paling atas. Tidak diperlukan penentuan posisi CSS saat ini.
2. Saat menggulir elemen dengan navigasi tambahan (imbuhan) ditambahkan, navigasi tambahan aktual (imbuhan) harus dipicu. Saat ini, .Affix akan menggantikan .Affix-Top, dan mengatur posisi: diperbaiki; (Disediakan oleh kode CSS Bootstrap).
3. Jika offset bawah didefinisikan, ketika gulungan mencapai posisi ini, ganti .Affix dengan .Affix-Bottom. Karena offset adalah opsional, jika offset diatur, CSS yang sesuai harus diatur pada saat yang sama. Dalam hal ini, tambahkan posisi: absolut; jika perlu.
3. Opsi
Ada beberapa opsi yang melewati properti data atau javascript. Tabel berikut mencantumkan opsi ini:
Iv. Contoh
Navigasi tambahan berarti menempelkannya di suatu tempat di layar untuk mewujudkan fungsi jangkar.
1. Contoh Dasar
<body data-spy="scroll" data-target="#myScrollspy"> <div> <div style="height:150px"> <h1>Bootstrap Affix</h1> </div> <div> <div id="myScrollspy"> <ul data-spy="affix"data-offset-top="150"> <li> <a href="#section-1">Part 1</a> </li> <li> <a href = "#bagian-2"> Bagian 2 </a> </li> <li> <a href = "#bagian-3"> Bagian 3 </a> </li> <li> <a href = "#divet-4"> Bagian 4 </a> </li> <li> <li> <a href = "divion> </a" </a> </li> <li> <li> <a href = "#Bagian-4"> Bagian 4 "</a> </li> <li> <Li> <a href =" <H2 ID = "Bagian-1"> Bagian 1 </h2> <p> ... </p> <h2 id = "bagian-2"> Bagian 2 </h2> <p> ... </p> <h2 id = "Bagian-3"> Bagian 3 </h2> <p> ... </p> <h2 id = "Bagian-4"> Bagian 4 "<p> <p> <p> <h2 id =" Bagian-4 "> Bagian 4 </H2> <p> <p> <p> 4 </h2> <p> ... </p> </div> </div> </div>
2. Bagian CSS dari navigasi
UL.NAV-Pills {width: 200px;} ul.nav-pills.affix {top: 30px;} // javascript alih-alih data-spy = "affix" data-offset-top = "125" $ ('#myaffix'). Affix ({offset: {top: 150}}))Kami menggunakan Top secara default, dan tentu saja kami juga dapat menggunakan Bottom secara default. Metode penentuan posisi ini diposisikan langsung melalui CSS.
// Atur ke Bottomul.nav-tabs.affix-Bottom {Bottom: 30px;} // Set ke Bottom $ ('#myaffix'). Affix ({offset: {Bottom: 150}}))Affix berisi beberapa acara, sebagai berikut:
// lainnya serupa $ ('#myaffix'). On ('affixed-top.bs.affix', function () {alert ('Trigger!');});Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.