1. File kode sumber
_grid.scss: File kelas sistem grid
MIXINS/_GRID.SCSS: Dukung koleksi mixin yang diimplementasikan oleh sistem grid
Mixins/_Grid-framework.scss: Core mixin yang diimplementasikan oleh sistem grid
2. Fungsi yang didukung
1. Sadarilah tata letak dengan persentase
2. Sadarilah penentuan posisi kisi -kisi
3. Menerapkan Nesting of Grids
4. Jika Anda hanya menggunakan sistem grid, Anda hanya dapat menyandikan file bootstrap-grid.scss
Prinsip Implementasi
1. Tata letak berdasarkan persentase , masalah utama adalah bagaimana mendistribusikan lebar secara merata pada perangkat yang berbeda. Bootstrap hanya menggunakan persentase sederhana, dan persentase yang sama digunakan di bawah perangkat ukuran apa pun.
2. POSISI KULIT: Memecahkan kemampuan grid untuk bergerak ke kiri, kanan, dan menggeser beberapa sel ke kanan dengan grid
3. Nesting of Grids: Menerapkan sistem tata letak grid setelah konten jaringan bersarang.
4. Analisis Kode Sumber
1. _Grid.scss: Kelas utama yang dihasilkan oleh sistem grid, mengacu pada variabel dan metode terkait dalam mixins/_grid.scss, mixins/_grid-framework.scss, variabel.scss.
Pertama: Tentukan dua kelas kontainer
A) Wadah: Wadah kisi, yang mendefinisikan lebar berbeda menurut perangkat yang berbeda dan tidak akan mengisi layar penuh;
b) CONFINAER-FLUID: Wadah kisi, layar penuh dengan dukungan apa pun
Baik wadah dan container-fluid menggunakan container (mixins/_grid.scss). Make-Container hanya mengimplementasikan kontrol seperti pemusatan, margin kiri dan kanan, pembersihan pelampung, dll.; Wadah mendefinisikan lebar wadah sesuai dengan perangkat yang berbeda.
Kemudian: Tentukan baris (baris):
Make-Row (mixins/_grids.scss) dipanggil untuk mencapai definisi batas mengambang dan kiri dan kanan. Di 4.0, jika dukungan untuk tata letak fleksibel diaktifkan, tampilan wadah diatur ke Flex dan Flex-Wrap sebagai bungkus, dan mengambang jernih.
Berikutnya: Langsung hubungi Make-Grid-kolom (mixins/_grid-framework.scss) untuk mencapai pendirian sel
a) Make-grid-kolom: Metode masuk untuk pembuatan sel, melewati jumlah total kisi, lebar margin, dan beberapa ukuran yang didukung
b) Make-grid-kolom referensi banyak metode dalam mixins/_grid.scss:
a) Gunakan fungsi peta-key untuk melintasi koleksi kunci peta;
Fungsi @Extend digunakan, digunakan untuk warisan, menerapkan mengambang kiri semua col, dan posisi relatif dari semua col.
@for $ i dari 1 hingga $ kolom {.col-#{$ breakpoint}-#{$ i} {@extend %grid-kolom; // Perluasan adalah warisan, gabungkan ini menjadi koleksi gaya //. col-xs-1, col-xs-2 {positiona: relatif; ....}}}a) Fungsi Make-Col-Span untuk mengimplementasikan perhitungan lebar col
b) Panggil metode Make-Col-Modifier dalam Mixins/_Grid.scss untuk mewujudkan generasi gaya dorong, tarik, dan offset:
Saya. Dorong: Dorong beberapa kisi ke kanan, menggunakan kiri
ii. Tarik: Dorong beberapa kisi ke kiri, menggunakan kanan
aku aku aku. Offset: Ini menggunakan implementasi margin-kiri, mendorongnya ke hak untuk persentase.
@Mixin make-col-offset ($ size, $ kolom: $ grid-kolom) {margin-left: Persentase ($ size / $ columns);}@mixin make-col-push ($ size, $ columns: $ grid-columns) {left: if ($ size> 0, Persentase ($ size / $ columns), auto); {if ($ size> 0, persentase ($ size / $ columns), auto); right: if($size > 0, percentage($size / $columns), auto);}@mixin make-col-pull($size, $columns: $grid-columns) { right: if($size > 0, percentage($size / $columns), auto);}@mixin make-col-modifier($type, $size, $columns) { // Work around the lack of dynamic mixin @include support @if $type == push {@include make-col-push ($ size, $ columns); } @else jika $ type == pull {@include make-col-pull ($ size, $ columns); } @else jika $ type == offset {@include make-col-offset ($ size, $ columns); }}Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.