Grid Bootstrap: Menguasai sifat Flexbox yang paling berguna

Artikel ini meneroka sistem grid Bootstrap, yang dibina di atas Flexbox, untuk membuat susun atur responsif. Kami akan merangkumi kelas utama dan konsep Flexbox untuk membina reka bentuk yang cekap dan mudah disesuaikan.

Konsep Utama:

bootstrap 4 memanfaatkan flexbox untuk gridnya, memudahkan penciptaan susun atur untuk pelbagai saiz skrin.
Kelas teras:
• , .container, dan .row membentuk asas grid responsif. .col-*-*
Flexbox, disepadukan dengan bootstrap, mudah mewujudkan lajur yang sama tinggi atau sama lebar, menghapuskan keperluan untuk hacks CSS.
Kelas Utiliti Flex Bootstrap (mis.,
• , .d-flex, .flex-row) Menyediakan kawalan berbutir ke atas bekas flex dan tingkah laku item. .flex-column

Memahami Flexbox:

Flexbox (Flexible Box) adalah sistem susun atur CSS moden yang sesuai untuk saiz skrin dinamik. Bekas Flex menyesuaikan saiz anaknya agar sesuai dengan pandangan yang berbeza. Bootstrap memudahkan penggunaan Flexbox dengan kelas pembalut.

sistem grid bootstrap:

sistem grid adalah penting untuk susun atur kompleks. Grid Bootstrap mempunyai titik break

untuk skrin tambahan dan menggunakan Flexbox dan bukannya terapung. xl

Kelas grid utama:

• : pembalut luar; Gunakan .container untuk lebar tetap, .container untuk lebar penuh. .container-fluid
• : bekas logik untuk lajur. .row
• : mentakrifkan lebar lajur (mis., .col-*-* untuk skrin sederhana, lebar 6-kolumn). Gunakan titik putus terkecil yang diperlukan; .col-md-6 terpakai untuk .col-sm-6, sm, md, dan lg breakpoints. xl

bootstrap grid dengan flexbox vs. floats:

Flexbox memudahkan tugas seperti membuat lajur ketinggian yang sama, sebelum ini memerlukan hacks CSS (seperti Floats dan ClearFix). Grid berasaskan Flexbox Bootstrap 4 menghasilkan lajur yang lebih realistik, seperti meja dengan ketinggian yang sama dalam satu baris. Lajur lebar yang sama dicapai dengan hanya menggunakan kelas

tanpa menentukan lebar; Ruang yang ada dibahagikan secara automatik. .col-*

Contoh: Lajur lebar sama

<code class="language-html"><div class="row">
  <div class="col-sm" style="min-height:200px;">.col</div>
  <div class="col-sm">.col</div>
  <div class="col-sm">.col</div>
  <div class="col-sm">.col</div>
</div></code>

Ini mewujudkan empat lajur lebar 25% dari titik putus kecil ke atas.

flexbox dan margin auto:

Menggabungkan Flexbox dengan margin auto membolehkan kedudukan maju. .mr-auto (margin-kanan: auto) menolak elemen ke kanan, manakala .ml-auto (margin-kiri: auto) menolaknya ke kiri. Penjajaran menegak yang sama dicapai menggunakan .mb-auto dan .mt-auto dengan flex-direction: column dan sesuai align-items kelas.

Konsep Flexbox Essential untuk Bootstrap Flex Utilities:

• Flex Containers: Dibuat menggunakan (atau display: flex dalam bootstrap). .d-flex
• item flex: Kanak -kanak langsung dari bekas flex.
• : flex-direction Mengawal arah item (, row, row-reverse, column). Bootstrap menggunakan kelas seperti column-reverse dan .flex-row. .flex-column
• : order Kawalan pesanan item (Bootstrap menggunakan kelas). order-*
• : justify-content menyelaraskan item pada paksi utama (Bootstrap menggunakan kelas). justify-content-*
• : align-items menyelaraskan item pada paksi silang (Bootstrap menggunakan kelas). align-items-*

Kesimpulan:

Grid berasaskan Flexbox Bootstrap menawarkan pendekatan yang kuat dan fleksibel untuk reka bentuk susun atur responsif. Menguasai konsep Flexbox meningkatkan keupayaan anda untuk menggunakan kelas utiliti Bootstrap dengan berkesan. Penjelajahan lanjut dokumentasi dan amalan Bootstrap akan menguatkan pemahaman anda.

Atas ialah kandungan terperinci Grid Bootstrap: Menguasai sifat Flexbox yang paling berguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!