Mengapa Bootstrap 3 Bertukar kepada `bersaiz kotak: kotak sempadan`?

Merungkai Tukar kepada Kotak Sempadan dalam Bootstrap 3

Bootstrap 3 memperkenalkan perubahan ketara dengan kemasukan saiz kotak: kotak sempadan untuk semua elemen. Sisihan daripada nilai kotak kandungan lalai ini telah mencetuskan persoalan tentang rasionalnya.

Dalam proses pemindahan daripada Bootstrap 2.3.2 kepada 3.0.0, pembangun memerhatikan perbezaan dimensi yang ketara yang dikaitkan dengan perubahan ini. Peraturan CSS berikut dalam bootstrap.css menunjuk kepada inti pengubahsuaian ini:

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Kesan Kotak Sempadan pada Dimensi

Di bawah model kotak kandungan tradisional, lebar dan ketinggian elemen hanya mengambil kira kandungannya, tidak termasuk pelapik dan sempadan. Ini akan mengakibatkan isu apabila cuba mengira jumlah lebar atau ketinggian, kerana ia akan melangkaui nilai yang diisytiharkan.

Sebaliknya, kotak sempadan termasuk kedua-dua pelapik dan jidar dalam pengiraan lebar dan tinggi. Model yang dipermudahkan ini memastikan saiz kotak akhir yang diberikan sejajar dengan lebar dan ketinggian yang ditentukan, tanpa mengira saiz padding atau jidar.

Peranan Kotak Sempadan dalam Sistem Grid Bootstrap

Sementara pindah ke kotak sempadan menjejaskan semua elemen, ia amat memberi kesan dalam sistem grid bendalir Bootstrap 3. Dalam grid bendalir, lajur ditakrifkan sebagai peratusan daripada jumlah lebar bekas, membolehkannya menskala secara responsif.

Di bawah model kotak kandungan, mengira saiz lajur memerlukan pemfaktoran dalam longkang lebar tetap di kedua-dua sisi . Kerumitan ini dihapuskan dengan kotak sempadan. Lebar lajur yang diisytiharkan kini termasuk kedua-dua sempadan dan pelapiknya, menyediakan cara saiz yang konsisten dan intuitif.

Penerimaan dan Faedah Industri

Selain faedahnya kepada sistem grid Bootstrap, penggunaan saiz kotak: kotak sempadan mendapat penerimaan meluas dalam pembangunan web. Ia menggalakkan tingkah laku yang konsisten merentas penyemak imbas dan menyediakan pendekatan intuitif untuk reka letak dan saiz.

Nota keluaran untuk Bootstrap 3 dengan jelas menyatakan niat di sebalik perubahan ini: "Model kotak yang lebih baik secara lalai. Semua dalam Bootstrap mendapat saiz kotak : kotak sempadan, menjadikan pilihan saiz yang lebih mudah dan sistem grid yang dipertingkatkan."

Tambahan Sumber:

• [Sokongan Penyemak Imbas untuk Border-Box](http://css-tricks.com/box-sizing/)
• [Manfaat Border-Box](http ://www.paulirish.com/2012/box-sizing-border-box-ftw/)

Atas ialah kandungan terperinci Mengapa Bootstrap 3 Bertukar kepada `bersaiz kotak: kotak sempadan`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!