Bagaimana cara mengeluarkan gaya lalai dalam senarai bootstrap?

Gaya lalai senarai bootstrap boleh dikeluarkan dengan mengatasi CSS. Gunakan peraturan dan pemilih CSS yang lebih spesifik, ikuti "Prinsip Jarak" dan "Prinsip Berat", mengatasi gaya lalai bootstrap. Untuk mengelakkan konflik gaya, lebih banyak pemilih yang disasarkan boleh digunakan. Sekiranya penindasan tidak berjaya, laraskan berat CSS adat. Pada masa yang sama, perhatikan pengoptimuman prestasi untuk mengelakkan berlebihan! Penting, dan tulis kod CSS ringkas dan cekap.

Gaya lalai senarai bootstrap adalah untuk meletakkannya secara terang -terangan sekumpulan peraturan CSS yang menjengkelkan, menjadikan halaman yang anda bekerja keras untuk mereka bentuk kelihatan seperti templat murah. Dalam artikel ini, mari kita lihat bagaimana untuk membersihkan gaya lalai ini, membolehkan anda bermain dengan bebas dan mencipta gaya unik anda sendiri. Selepas membaca artikel ini, anda bukan sahaja dapat menguasai kemahiran untuk menghapuskan gaya lalai senarai bootstrap, tetapi juga mempunyai pemahaman yang lebih mendalam tentang liputan CSS dan keutamaan gaya, untuk mengelakkan jatuh ke dalam lubang yang sama pada masa akan datang.

Mari kita bincangkan asas -asas terlebih dahulu. Bootstrap menggunakan sejumlah besar kelas CSS untuk menentukan gaya pelbagai komponen, dan senarai tidak terkecuali. Kelas list-unstyled disediakan oleh Bootstrap, yang dengan cepat dapat mengeluarkan peluru sebelum senarai item. Tetapi jika keperluan anda lebih kompleks, contohnya, jika anda ingin menghapuskan sepenuhnya semua jarak lalai, padding, dan lain-lain, list-unstyled nampaknya keluar dari fikiran anda.

Apa yang harus saya buat? Inti adalah liputan CSS. Ingat, CSS mengikuti "prinsip jarak" dan "prinsip berat". Anda hanya perlu menulis peraturan CSS yang lebih spesifik untuk mengatasi gaya lalai Bootstrap.

Mari kita lihat contoh. Katakan anda mempunyai senarai yang tidak teratur, kodnya adalah seperti berikut:

 <code class="html"><ul class="list-group"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul></code>

Bootstrap akan menambah beberapa gaya ke .list-group dan .list-group-item Secara lalai, termasuk margin, mengisi, warna latar, dan lain-lain untuk menghapuskan gaya ini, anda boleh menulis CSS seperti ini:

 <code class="css">.list-group { margin: 0; /* 移除外边距*/ padding: 0; /* 移除内边距*/ list-style: none; /* 移除项目符号*/ } .list-group-item { margin: 0; /* 移除外边距*/ padding: 0; /* 移除内边距*/ background-color: transparent; /* 移除背景色*/ border: none; /* 移除边框*/ }</code>

Kod CSS ini secara langsung mensasarkan kelas. .list-group dan .list-group-item , mengatasi gaya lalai bootstrap. Perhatikan list-style: none; juga boleh dilaksanakan menggunakan kelas list-unstyled , tetapi gaya lain mesti ditimpa secara manual.

Untuk penggunaan yang lebih maju, anda boleh menggunakan pemilih CSS yang lebih spesifik, sebagai contoh, jika senarai anda mempunyai Nama ID atau kelas tertentu, anda boleh menulis seperti ini:

 <code class="css">#my-list .list-group-item { /* 只针对ID 为my-list 的列表项应用样式*/ }</code>

Ini menjadikan CSS anda lebih disasarkan dan mengelakkan konflik gaya yang tidak perlu.

Sudah tentu, anda mungkin menghadapi beberapa masalah semasa proses. Sebagai contoh, anda mungkin mendapati bahawa beberapa gaya mengatasi tidak berjaya, yang kemungkinan besar kerana bootstrap mempunyai berat CSS yang lebih tinggi. Penyelesaiannya adalah untuk meningkatkan berat CSS tersuai anda, sebagai contoh, menambah nama kelas yang lebih spesifik, atau menggunakan pemilih CSS yang lebih spesifik, atau gunakan !important (walaupun saya tidak mengesyorkan menggunakan !important

Akhirnya, mari kita bercakap mengenai pengoptimuman prestasi. Cuba elakkan terlalu banyak !important . Menulis kod CSS ringkas dan cekap dan menggunakan preprocessors CSS seperti SASS atau kurang dapat meningkatkan pemeliharaan dan kebolehbacaan kod anda. Ingat, kod yang jelas adalah kunci kepada pembangunan yang cekap. Jangan menulis kod yang tidak dapat difahami untuk meneruskan apa yang dipanggil "kemahiran". Mudah, langsung dan berkesan adalah cara raja.

Atas ialah kandungan terperinci Bagaimana cara mengeluarkan gaya lalai dalam senarai bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!