Bagaimana untuk Menggunakan Gaya Bootstrap pada Elemen Tertentu tanpa Pemilih Induk Manual?

Menggunakan Gaya CSS pada Elemen Tertentu

Dalam peralihan daripada reka letak berasaskan jadual kepada CSS, anda mungkin menghadapi keperluan untuk menggunakan gaya CSS hanya kepada bahagian tertentu halaman web. Ini boleh dicapai dengan merangkum elemen yang dikehendaki dalam kelas yang ditetapkan. Sebagai contoh, anda boleh membungkus borang dalam div dengan kelas "bootstrap" seperti ini:

<div>

Walau bagaimanapun, anda mahu borang lain pada halaman mengekalkan gaya semasanya. Adakah terdapat cara yang lebih mudah untuk mencapai ini tanpa menambah pemilih induk secara manual pada setiap peraturan CSS Bootstrap?

Penyelesaian

Untuk Bootstrap 3, menggunakan LESS memudahkan proses:

1. Muat turun kod sumber Bootstrap dan buat fail style.less sebagai berikut:

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-less.less";
}

2. Kompilasi fail KURANG. Anda boleh menggunakan alatan baris perintah seperti Node.js dengan Less.js atau meneroka pengkompil GUI. Sebagai alternatif, pasang LESS dengan npm dan susun fail seperti berikut:

npm install -g less
lessc style.less style.css

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan Gaya Bootstrap pada Elemen Tertentu tanpa Pemilih Induk Manual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!