Apakah itu penyesuaian bootstrap

Dalam bootstrap, adaptif merujuk kepada membahagikan peranti kepada empat jenis: skrin ultra-kecil, skrin sederhana, skrin sederhana dan skrin besar mengikut saiz skrin Halaman web akan dibahagikan kepada 12 lajur mengikut skrin peranti yang berbeza , bahagikan penyemak imbas kepada baris dan lajur untuk mencapai penyesuaian diri tidak kira betapa besarnya skrin, penyesuaian diri akan cuba untuk tidak membalut garisan, tetapi hanya skala mendatar.

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

Apakah itu penyesuaian bootstrap

Bootstrap adaptif:

Bootstrap membahagikan peranti kepada empat jenis: skrin ultra-kecil, skrin kecil, skrin sederhana dan skrin besar mengikut saiz skrin dan membahagikan skrin kepada 12 lajur

Lebar skrin yang sepadan ialah:

• Skrin ultra-kecil (telefon mudah alih): 0-768px kelas tetapan sepadan=col-xs-number

• Skrin kecil (Tablet): 768-992px kelas tetapan sepadan=col-sm-number

• Skrin sederhana (komputer): 992-1200px kelas tetapan sepadan =col-md-number

• Skrin besar (komputer): 1200px- kelas tetapan yang sepadan=col-lg-number

Dalam pelayar chrome, anda akan menemui skrin dalam tetingkap elemen Apabila lebarnya kurang daripada 768,

hanya com-xs-12 berkuat kuasa.

Adaptif: Halaman web menyesuaikan diri dengan peranti yang berbeza, menggunakan rangka kerja bootstrap

Prinsip: Ia adalah pertanyaan media (peranti/pelayar) @media sahaja untuk menanyakan lebar peranti

Bootstrap adalah penyesuaian; saiz , bahagikan pelayar kepada baris dan lajur untuk mencapai penyesuaian.

Contoh adalah seperti berikut:

@media only screen and (min-width:0px) and (max-width:480px){
body{
background-color:red;
}
}
@media only screen and (min-width:481px) and (max-width:720px){
body{
background-color:green;
}
}
@media only screen and (min-width:721px){
body{
background-color:blue;
}
}

Cadangan berkaitan: tutorial bootstrap

Atas ialah kandungan terperinci Apakah itu penyesuaian bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!