Bagaimana Saya Boleh Sesuaikan Warna Petua Alat Bootstrap?

Menyesuaikan Warna Petua Alat Bootstrap

Secara lalai, petua alat dalam Bootstrap datang dalam satu warna. Walau bagaimanapun, anda mungkin menghadapi situasi yang anda inginkan variasi warna berbilang. Berikut ialah panduan komprehensif untuk mencapai penyesuaian ini:

Menggunakan CSS

Untuk mengubah warna petua alat, tambahkan kelas tersuai pada elemen yang mencetuskan petua alat:

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

Dalam CSS, tentukan gaya untuk tersuai kelas:

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

Ini akan menukar warna petua alat kepada merah untuk elemen dengan kelas petua alat merah.

Menyasarkan Peletakan Petua Alat Khusus

Jika anda memerlukan penyesuaian warna berdasarkan peletakan petua alat, pertimbangkan perkara berikut:

Untuk Bootstrap Versi Sebelum 4

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

Ini menyasarkan petua alat yang diletakkan di atas dan menggunakan warna merah pada anak panah petua alat.

Untuk Bootstrap 4 dan Ke Atas

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00;
}

Kod ini menentukan warna untuk petua alat yang diletakkan di bahagian bawah. Anda boleh mengubah suai peletakan dalam atribut x-placement untuk menyasarkan peletakan lain.

Sumber Tambahan dan Demo

Untuk mencuba kaedah di atas, lawati ini jsFiddle:
[pautan biola]

Dengan mengikuti langkah ini, anda boleh membuat tersuai warna petua alat untuk memenuhi keperluan reka bentuk anda.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Sesuaikan Warna Petua Alat Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!