Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menukar Warna Petua Alat Bootstrap?

Bagaimanakah Saya Boleh Menukar Warna Petua Alat Bootstrap?

Linda Hamilton
Lepaskan: 2024-12-18 04:31:14
asal
755 orang telah melayarinya

How Can I Change the Color of Bootstrap Tooltips?

Cara Menukar Warna Petua Alat Bootstrap

Menukar warna petua alat dalam Bootstrap membolehkan anda menyesuaikan penampilannya agar sepadan dengan reka bentuk tapak web anda. Ini boleh dicapai dengan menambahkan gaya CSS tersuai.

Untuk menukar warna petua alat, mulakan dengan memberikan kelas unik kepada elemen yang anda gunakan petua alat. Contohnya:

<a href="#" data-toggle="tooltip" data-placement="bottom"
   title="" data-original-title="Tooltip on bottom"
   class="red-tooltip">Tooltip on bottom</a>
Salin selepas log masuk

Seterusnya, tambahkan peraturan CSS berikut:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {
  background-color: #f00;
}
Salin selepas log masuk

Ini akan menukar anak panah petua alat dan latar belakang dalam kepada merah. Anda boleh menggantikan #f00 dengan mana-mana kod warna yang diingini untuk menyesuaikan warna petua alat.

Dalam Bootstrap 4, anda mungkin perlu menyasarkan anak panah peletakan bawah secara khusus untuk mengalih keluar warna hitam lalai:

.red-tooltip + .tooltip.top > .tooltip-arrow {
  background-color: #f00;
}
Salin selepas log masuk

Selain itu, untuk Bootstrap 4, gunakan CSS berikut untuk petua alat:

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00; /* Red */
}
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Petua Alat 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