Plugin toggles perilaku ini dan mematikan (perubahan nilai
CSS positiondari staticke fixed), tergantung pada scroll position.Dengan Afixs, ketika kita scroll ke atas dan ke bawah halaman, menu selalu terlihat dan terkunci di posisinya.
Cara Membuat menu Affixed Navigasi
Contoh berikut menunjukkan cara membuat menu navigasi tetap horisontal:
Maka hasilnya adalah nav bar diatas akan tetap ditampilkan meskipun kita scroll ke bawah secara terus menerus :
Misalnya Dijelaskan
Tambahkandata-spy="affix"ke elemen Anda ingin tetap.Opsional, tambahkan
data-offset-top|bottomatribut untuk menghitung posisi scroll.Bagaimana itu bekerja
Imbuhan Plugin matikan antara tiga kelas:.affix, .affix-top, dan
.affix-bottom. Setiap kelas mewakili negara tertentu. Anda harus menambahkan properti CSS untuk menangani posisi yang sebenarnya, dengan pengecualian position:fixed
pada .affixkelas.- Plugin menambahkan
.affix-topatau.affix-bottomkelas untuk menunjukkan unsur ini di paling atas posisi paling bawah atau. Positioning dengan CSS tidak diperlukan pada saat ini. - Bergulir melewati elemen ditempel memicu pembubuhan yang sebenarnya - ini adalah di mana plugin menggantikan
.affix-topatau.affix-bottomkelas dengan.affixkelas (setposition:fixed). Pada titik ini, Anda harus menambahkan CSStopataubottomproperti untuk posisi elemen ditempel di halaman. - Jika bagian bawah diimbangi didefinisikan, bergulir melewati itu menggantikan
.affixkelas dengan.affix-bottom. Sejak offset adalah opsional, menetapkan satu mengharuskan Anda untuk mengatur CSS yang sesuai. Dalam hal ini, tambahkanposition:absolutebila perlu.
Pada contoh pertama di atas, plugin Afiks menambahkan
.affixkelas (position: fixed) ke <nav> elemen ketika kita telah menggulir 197 piksel dari atas. Jika Anda membuka contoh, Anda juga akan melihat bahwa kita menambahkan CSS topproperti dengan nilai 0 ke .affixkelas. Hal
ini untuk memastikan bahwa navbar tetap di bagian atas halaman di semua
waktu, ketika kita telah menggulir 197 piksel dari atas.Grid System
Sistem grid bootstrap memungkinkan hingga 12 kolom di halaman. Sistem grid bootstrap adalah responsif, dan kolom akan menata kembali tergantung pada ukuran layar: Pada layar besar mungkin terlihat lebih baik dengan konten terorganisir dalam tiga kolom, tetapi pada layar kecil akan lebih baik jika item konten yang ditumpuk di atas satu sama lain.
Grid Kelas
Sistem Bootstrap jaringan memiliki empat kelas:- xs (untuk ponsel)
- sm (untuk tablet)
- md (untuk desktop)
- lg (untuk desktop yang lebih besar)
Aturan Sistem Grid
Beberapa Bootstrap aturan sistem grid:- Baris harus ditempatkan dalam
.container(fixed-width) atau.container-fluid(full-width) untuk keselarasan dan padding - Gunakan baris untuk membuat grup horizontal kolom
- Konten harus ditempatkan dalam kolom, dan hanya kolom mungkin anak-anak langsung dari baris
- Kelas yang telah ditetapkan seperti
.rowdan.col-sm-4tersedia untuk cepat membuat layout jaringan - Kolom membuat talang (kesenjangan antara konten kolom) melalui padding. Padding yang disajikan di baris untuk kolom pertama dan terakhir melalui marjin negatif pada
.rows - kolom Grid dibuat dengan menentukan jumlah 12 kolom yang tersedia yang ingin span. Misalnya, tiga kolom yang sama akan menggunakan tiga
.col-sm-4
Struktur dasar dari Bootstrap Grid
<div class="container">
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
Jadi, untuk membuat tata letak yang Anda inginkan, membuat sebuah wadah ( <div
class="container">). Selanjutnya, buat berturut-turut ( <div
class="row">). Kemudian, tambahkan jumlah yang diinginkan dari kolom (tag dengan tepat
.col-*-*kelas). Perhatikan bahwa angka-angka dalam .col-*-*harus selalu menambahkan hingga 12 untuk setiap baris.
Tutorial kali ini sampai disini saja.
Thankyou for reading.
Semoga bermanfaat dan God Bless you :)
No comments:
Post a Comment