Rumah > hujung hadapan web > tutorial css > Bagaimana Saya Boleh Mengatasi Penggayaan Kelas `.sidebar` Twitter Bootstrap?

Bagaimana Saya Boleh Mengatasi Penggayaan Kelas `.sidebar` Twitter Bootstrap?

Barbara Streisand
Lepaskan: 2024-11-28 08:59:12
asal
922 orang telah melayarinya

How Can I Override Twitter Bootstrap's `.sidebar` Class Styling?

Mengatasi Penggayaan Bootstrap Twitter

Dalam pembangunan web, menggunakan rangka kerja seperti Twitter Bootstrap boleh memberikan asas yang kukuh. Walau bagaimanapun, sementara Bootstrap menawarkan set gaya yang teguh, kadangkala mungkin diperlukan untuk menyesuaikan atau menulis ganti aspek tertentu reka bentuk.

Satu senario sedemikian melibatkan menukar gelagat terapung kiri lalai kelas .bar sisi dalam Rangka kerja Bootstrap. Untuk mencapai matlamat ini, anda mempunyai beberapa pilihan:

Mengubah suai Fail CSS Bootstrap

Anda boleh membuka fail CSS Bootstrap asal (biasanya bootstrap.css) dan cari apungan: meninggalkan harta untuk kelas .bar sisi. Cuma tukar nilai ke kanan. Walau bagaimanapun, perlu diingat bahawa pengubahsuaian ini mungkin ditimpa semasa kemas kini Bootstrap akan datang.

Gunakan Prapemproses CSS (cth., SASS)

Jika anda menggunakan prapemproses CSS seperti Sass, anda boleh membuat helaian gaya baharu (site-specific.scss) dan menulis peraturan tersuai. Contohnya:

.sidebar {
  float: right;
}
Salin selepas log masuk
Salin selepas log masuk

Timpa CSS dengan Lembaran Gaya Tersuai

Sebagai alternatif, anda boleh membuat lembaran gaya tersuai (cth., khusus tapak.css) dan masukkannya selepas helaian gaya Bootstrap dalam HTML anda bahagian:

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />
Salin selepas log masuk

Dalam fail site-specific.css, anda boleh mengatasi sifat .sidebar float:

.sidebar {
  float: right;
}
Salin selepas log masuk
Salin selepas log masuk

Dengan memuatkan lembaran gaya tersuai anda selepas Bootstrap, anda boleh mengambil keutamaan dan tukar penggayaan lalai.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mengatasi Penggayaan Kelas `.sidebar` Twitter Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan