Bagaimanakah cara saya menggunakan kelas utiliti jarak Bootstrap untuk mengawal margin dan padding dalam reka letak saya?

Memahami Kelas Utiliti Jarak Bootstrap

Bootstrap menyediakan kelas utiliti jarak komprehensif untuk mengawal margin dan padding untuk elemen. Kelas ini memudahkan proses melaraskan ruang putih dalam reka letak anda.

Sintaks

Sintaks untuk menjarakkan kelas utiliti telah berkembang dalam versi Bootstrap yang berbeza.

Bootstrap 4

Jing: m{sisi}-{saiz}
Peladam: p{sisi}-{saiz}

Bootstrap 5

Margin: m{sisi}-{saiz} (guna saya-, ms-, pe -, ps-)
Pelapik: p{sisi}-{saiz}

Contoh

Bootstrap 4:

<div class="m-b-lg">...</div> <!-- margin-bottom-large -->
<div class="p-t-3">...</div> <!-- padding-top-3 -->

Bootstrap 5:

<div class="me-3">...</div> <!-- margin-end-3 -->
<div class="ps-1">...</div> <!-- padding-start-1 -->

Jawa Responsif

Bootstrap 4 melaksanakan kelas utiliti jarak responsif yang bertindak balas kepada titik putus. Sintaksnya ialah:

m{sides}-{breakpoint}-{size}
p{sides}-{breakpoint}-{size}

Contoh:

<div class="mt-md-2">...</div> <!-- margin-top-2 on medium screens or larger -->

Penggunaan dalam React

Untuk menggunakan kelas utiliti jarak dalam React, anda boleh menetapkan atribut className pada elemen. Contohnya:

<code class="javascript">import React, { Component } from 'react';

class Example extends Component {
  render() {
    return (
      <div className="m-b-lg">
        {/* Your content */}
      </div>
    );
  }
}

export default Example;</code>

Nota:

Dalam Bootstrap 4, anda mungkin perlu memasang pemalam untuk mendayakan sokongan untuk menjarakkan kelas utiliti. Rujuk dokumentasi Bootstrap untuk mendapatkan maklumat lanjut.

Atas ialah kandungan terperinci Bagaimanakah cara saya menggunakan kelas utiliti jarak Bootstrap untuk mengawal margin dan padding dalam reka letak saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!