


Sistem grid dalam rangka kerja bootstrap membahagikan bekas kepada 12 bahagian yang sama Apabila menggunakannya, anda boleh menyusun semula kod sumber LESS/SASS mengikut situasi sebenar untuk mengubah suai nilai 12. Cara sistem grid rangka kerja bootstrap berfungsi:
1. Baris data (.row) mesti terkandung dalam bekas (.container) supaya dapat diberikan penjajaran dan padding yang sesuai
<div class="container"> <div class="row"></div> </div>
2. Lajur (.column) boleh ditambahkan pada baris (.row), tetapi jumlah bilangan lajur tidak boleh melebihi jumlah bilangan lajur yang dibahagikan sama rata (seperti: 12)
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div> </div> </div>
3. Kandungan khusus hendaklah diletakkan dalam bekas lajur (.column) dan hanya lajur (.column) boleh digunakan sebagai elemen anak langsung bagi bekas baris (.row)
4. Cipta jarak antara lajur dengan menetapkan padding, dan kemudian imbangi kesan padding dengan menetapkan margin negatif untuk lajur pertama dan timbunan terakhir
Dengan kesan responsif dalam sistem grid bootstrap, ia didatangkan dengan empat jenis penyemak imbas, (skrin kecil tambahan, skrin kecil, skrin sederhana dan skrin besar) dan titik putusnya ialah 768px, 992px, 1220px
Bekas (.container) mempunyai lebar yang berbeza untuk resolusi penyemak imbas yang berbeza: automatik, 760px, 970px, 1170px
;
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; @media (min-width: 768px) { .container { width: 750px; } @media (min-width: 992px) { .container { width: 970px; } @media (min-width: 1200px) { .container { width: 1170px; }
Bekas baris (.row) membahagikan baris bekas kepada 12 bahagian yang sama, iaitu lajur. Setiap lajur mempunyai padding-left:15px dan padding-right:15px ini juga menyebabkan padding-left lajur pertama dan padding-right lajur terakhir menduduki 30px lebar tengah
;
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }
Bekas baris (.row) mentakrifkan nilai margin-kiri dan margin-kanan -15px, yang digunakan untuk mengimbangi padding kiri lajur pertama dan padding kanan lajur terakhir, supaya lajur pertama dan lajur terakhir adalah sejajar dengan bekas (.bekas) Tiada ruang antaranya
.row { margin-right: -15px; margin-left: -15px; }
Penggunaan asas
Memandangkan rangka kerja bootstrap menggunakan gaya grid yang berbeza untuk saiz skrin yang berbeza, perkara berikut mengambil skrin sederhana (970px) sebagai contoh.
1. Gabungan lajur
Gabungan lajur adalah untuk menukar nombor untuk menggabungkan lajur (jumlah bilangan lajur tidak boleh melebihi 12), yang agak serupa dengan atribut colspan jadual kaedah gabungan lajur hanya melibatkan dua ciri: terapung dalam peratusan lebar
<div class="container"> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-8">col-md-8</div> </div> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-3">col-md-3</div> <div class="col-md-6">col-md-6</div> <div class="col-md-3">col-md-3</div> </div> </div>
Kesannya adalah seperti berikut:
Pastikan semua lajur terapung ke kiri
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; }
Tentukan lebar setiap gabungan lajur
.col-md-12 { width: 100%; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; }
Lajur Offset
Kadangkala, kami tidak mahu dua lajur bersebelahan dirapatkan, tetapi kami tidak mahu menggunakan margin atau cara teknikal lain Ini boleh dicapai dengan menggunakan mengimbangi lajur (offset). Untuk menggunakan ofset lajur, cuma tambahkan nama kelas .col-md-offset-* (asterik mewakili bilangan gabungan lajur yang akan diimbangi) pada elemen lajur dan lajur dengan nama kelas ini akan diimbangi, seperti: dalam elemen lajur Tambah .col-md-offset-4 untuk menunjukkan bahawa lajur diimbangi ke kanan dengan lebar 4 lajur
<div class="container"> <div class="row"> <div class="col-md-4">1111</div> <div class="col-md-4 col-md-offset-2">111</div> <div class="col-md-2">333</div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4">列偏移</div> <div class="col-md-2">col-md-2</div> <div class="col-md-2">col-md-2</div> </div> </div>
Kesannya adalah seperti berikut:
Prinsip pelaksanaan:
Menggunakan satu perdua belas margin-kiri, terdapat seberapa banyak margin-kiri berbanding dengan offset
.col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0; }
Perlu diambil perhatian bahawa apabila menggunakan col-md-offset-* untuk mengimbangi kanan lajur, pastikan jumlah bilangan lajur dan lajur mengimbangi tidak melebihi 12, jika tidak lajur akan dipaparkan dengan garis putus
Isih lajur
Isih lajur adalah untuk menukar arah lajur dan menetapkan jarak terapung. Dalam sistem grid bootstrap ia dilakukan dengan menambah nama kelas. col-md-push-* dan col-md-pull-*
<div class="container"> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-8">col-md-8</div> </div> </div>
Kesannya adalah seperti berikut:
col-md-4 berada di sebelah kiri dan col-md-8 di sebelah kanan Jika anda ingin menukar kedudukan, anda perlu mengalihkan col-md-4 ke kanan sebanyak 8 lajur, iaitu tambah. nama kelas.col-md -push-8 Pada masa yang sama, anda perlu mengalihkan col-md-8 4 lajur ke kiri, iaitu menambah nama kelas.col-md-pull-4
Bootstrap hanya mencapai kesan kedudukan dengan menetapkan kiri dan kanan.
.col-md-pull-12 { right: 100%; } .col-md-pull-11 { right: 91.66666667%; } .col-md-pull-10 { right: 83.33333333%; } .col-md-pull-9 { right: 75%; } .col-md-pull-8 { right: 66.66666667%; } .col-md-pull-7 { right: 58.33333333%; } .col-md-pull-6 { right: 50%; } .col-md-pull-5 { right: 41.66666667%; } .col-md-pull-4 { right: 33.33333333%; } .col-md-pull-3 { right: 25%; } .col-md-pull-2 { right: 16.66666667%; } .col-md-pull-1 { right: 8.33333333%; } .col-md-pull-0 { right: 0; } .col-md-push-12 { left: 100%; } .col-md-push-11 { left: 91.66666667%; } .col-md-push-10 { left: 83.33333333%; } .col-md-push-9 { left: 75%; } .col-md-push-8 { left: 66.66666667%; } .col-md-push-7 { left: 58.33333333%; } .col-md-push-6 { left: 50%; } .col-md-push-5 { left: 41.66666667%; } .col-md-push-4 { left: 33.33333333%; } .col-md-push-3 { left: 25%; } .col-md-push-2 { left: 16.66666667%; } .col-md-push-1 { left: 8.33333333%; } .col-md-push-0 { left: 0; }
Bersarang lajur
Penyarang lajur boleh menambah atau membuat bekas baris (baris) dalam lajur, dan kemudian masukkan lajur dalam bekas baris ini Apabila lebar bekas baris (baris) dalam bekas lajur ialah 100%, ia adalah arus Lebar lajur luar
<div class="container"> <div class="row"> <div class="col-md-8">
我在里面嵌套了一个网格
<div class="row"> <div class="col-md-6">col-md-6</div> <div class="col-md-6">col-md-6</div> </div> </div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-8">
我在里面嵌套了一个网格
<div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> </div> </div> </div>
以上内容是小编给大家介绍的Bootstrap网格系统,希望对大家有所帮助!

Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

Tutorial ini menunjukkan kepada anda bagaimana untuk mengintegrasikan API carian Google tersuai ke dalam blog atau laman web anda, menawarkan pengalaman carian yang lebih halus daripada fungsi carian tema WordPress standard. Ia menghairankan mudah! Anda akan dapat menyekat carian ke y

Siri artikel ini ditulis semula pada pertengahan 2017 dengan maklumat terkini dan contoh segar. Dalam contoh JSON ini, kita akan melihat bagaimana kita dapat menyimpan nilai mudah dalam fail menggunakan format JSON. Menggunakan notasi pasangan nilai utama, kami boleh menyimpan apa-apa jenis

Tingkatkan Penyampaian Kod Anda: 10 Penyeret Sintaks untuk Pemaju Coretan kod perkongsian di laman web atau blog anda adalah amalan biasa bagi pemaju. Memilih penyapu sintaks yang betul dapat meningkatkan daya tarikan dan daya tarikan visual dengan ketara. T

Jadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada kumpulan teknologi longgar yang digunakan untuk membuat kandungan web yang dinamik dan interaktif. Istilah Ajax, yang asalnya dicipta oleh Jesse J

Leverage JQuery untuk Layouts Laman Web yang mudah: 8 Plugin Essential JQuery memudahkan susun atur laman web dengan ketara. Artikel ini menyoroti lapan plugin jQuery yang kuat yang menyelaraskan proses, terutamanya berguna untuk penciptaan laman web manual

Artikel ini membentangkan pemilihan lebih daripada 10 tutorial mengenai rangka kerja javascript dan jquery model-view-controller (MVC), sesuai untuk meningkatkan kemahiran pembangunan web anda pada tahun baru. Tutorial ini merangkumi pelbagai topik, dari Foundatio

Mata teras Ini dalam JavaScript biasanya merujuk kepada objek yang "memiliki" kaedah, tetapi ia bergantung kepada bagaimana fungsi dipanggil. Apabila tidak ada objek semasa, ini merujuk kepada objek global. Dalam penyemak imbas web, ia diwakili oleh tetingkap. Apabila memanggil fungsi, ini mengekalkan objek global; tetapi apabila memanggil pembina objek atau mana -mana kaedahnya, ini merujuk kepada contoh objek. Anda boleh mengubah konteks ini menggunakan kaedah seperti panggilan (), memohon (), dan mengikat (). Kaedah ini memanggil fungsi menggunakan nilai dan parameter yang diberikan. JavaScript adalah bahasa pengaturcaraan yang sangat baik. Beberapa tahun yang lalu, ayat ini


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Dreamweaver CS6
Alat pembangunan web visual

SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
