Adakah bootstrap adaptif?

Bootstrap adalah adaptif; tidak kira betapa besarnya skrin, cuba untuk tidak membalut garisan dan hanya menskalakan secara mendatar melalui sistem pagar yang menentukan saiz bekas ia kepada 12 bahagian yang sama, dan bahagikan pelayar kepada baris dan lajur untuk mencapai penyesuaian.

Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 5, komputer DELL G3

Adakah bootstrap adaptif?

Sistem pagar dibuat dengan mentakrifkan saiz bekas dan membahagikannya kepada 12 bahagian yang sama, melalui satu siri baris dan lajur, dan digabungkan dengan pertanyaan media untuk mencipta sistem grid responsif yang berkuasa. Asas fungsi penyesuaian Boosttrap ialah mod "pagar", yang membahagikan penyemak imbas kepada baris dan lajur: sejumlah 12 lajur, bilangan baris disesuaikan dan setiap elemen dipaparkan mengikut elemen yang anda ingin paparkan. Saiz ialah bilangan lajur yang diperlukan Jika ia melebihi julat, ia akan menukar baris secara automatik. Saiz setiap lajur secara automatik diagihkan sama rata oleh Boostrap berdasarkan saiz pelayar semasa.

Cara ia berfungsi:

Baris data (baris) mesti terkandung dalam .bekas (lebar tetap) atau .bendalir bekas (lebar 100%). Untuk memberikan penjajaran dan padding yang sesuai.

Buat satu set lajur dalam arah mendatar melalui baris Apabila skrin atau saiz port pandangan meningkat, sistem akan membahagikannya secara automatik kepada sehingga 12 lajur. .

Buat jurang antara lajur dengan menetapkan atribut padding pada lajur (baris). Tetapkan jidar negatif dengan .baris untuk mengimbangi padding yang ditetapkan oleh elemen .container (pengenalan ialah lajur (lajur) yang terkandung dalam baris (baris) mengimbangi padding, yang merupakan sebab penonjolan ke luar dalam contoh berikut) .

Jika terdapat lebih daripada 12 lajur, lajur tambahan akan diletakkan dalam baris baharu

Fungsi penyesuaian Boostrap

Malah, selepas memahami mod pagar, fungsi penyesuaian adalah mudah Terdapat banyak mengikut saiz penyemak imbas, Boosttrap mempunyai empat nama kelas pagar untuk digunakan adalah sama dengan panggilan gaya pemilih nama kelas gaya Css:

xs: col-xs-1 ~ col- xs-12, berbilang lajur sentiasa dalam satu baris.

sm: col-sm-1 ~ col-sm-12, berbilang lajur hanya boleh berada dalam satu baris apabila lebar piksel penyemak imbas lebih besar daripada atau sama dengan 768px.

md: col-md-1 ~ col-md-12, berbilang lajur hanya boleh berada dalam satu baris apabila lebar piksel penyemak imbas lebih besar daripada atau sama dengan 992px.

lg: col-lg-1 ~ col-lg-12, berbilang lajur hanya boleh berada dalam satu baris apabila lebar piksel penyemak imbas lebih besar daripada atau sama dengan 1200px.

Saya menyiarkan sekeping kod pseudo:

Ini bermakna apabila lebar penyemak imbas adalah antara 768-992, ia akan dipaparkan dalam 4:4:4 mod apabila lebar penyemak imbas lebih daripada 992, ia akan dipaparkan dalam mod 1:1:10.

Sudah tentu, anda juga boleh menggunakan keempat-empatnya, dan subbahagian perlu berhati-hati, dalam apa jua keadaan, Boostrap akan memperuntukkan lebar lajur secara automatik mengikut lebar penyemak imbas agar sepadan dengan mod pembentangan yang anda inginkan.

<div class="row">
   <div class="col-sm-4  col-md-1"></div>
   <div class="col-sm-4  col-md-1"></div>
    <div class="col-sm-4  col-md-10"></div>
</div>

Cadangan berkaitan:

tutorial bootstrap

Atas ialah kandungan terperinci Adakah bootstrap adaptif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!