Adakah terdapat lapisan pop timbul dalam bootstrap?-Soal Jawab bahagian hadapan-php.cn

Adakah terdapat lapisan pop timbul dalam bootstrap?

WBOY

Lepaskan： 2022-06-16 15:57:00

asal

1886 orang telah melayarinya

Terdapat lapisan pop timbul dalam bootstrap; anda boleh menggunakan pemalam Popover untuk melaksanakan lapisan pop timbul Pemalam boleh menjana kandungan dan teg yang ditentukan mengikut keperluan, letakkan kandungan yang dijana dalam kotak pop timbul yang dicetuskan oleh elemen yang ditentukan, dan dayakan kotak timbul Sintaks ialah "elemen object.popover(options)".

Adakah terdapat lapisan pop timbul dalam bootstrap?

Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 5, komputer DELL G3

Adakah terdapat lapisan pop timbul dalam bootstrap

Popover adalah serupa dengan petua alat dan memberikan paparan yang diperluaskan. Untuk mengaktifkan popover, pengguna hanya menuding pada elemen. Kandungan kotak pop timbul boleh diisi sepenuhnya menggunakan API Data Bootstrap. Kaedah ini bergantung pada petua alat.

Jika anda ingin merujuk kefungsian pemalam ini secara berasingan, maka anda perlu merujuk popover.js, yang bergantung pada pemalam Tooltip. Sebagai alternatif, seperti yang dinyatakan dalam bab Gambaran Keseluruhan Plugin Bootstrap, anda boleh merujuk bootstrap.js atau versi mini bootstrap.min.js.

Penggunaan

Pemalam Popover menjana kandungan dan markup mengikut keperluan Secara lalai, popover diletakkan di belakang elemen pencetusnya. Anda boleh menambah popover dalam dua cara:

Melalui atribut data: Untuk menambah popover, cuma tambah data-toggle="popover" pada teg sauh/butang Itu sahaja. Tajuk sauh ialah teks popover. Secara lalai, pemalam meletakkan popover di bahagian atas.

<a href="#" data-toggle="popover" title="Example popover">
    请悬停在我的上面
</a>

Salin selepas log masuk

Melalui JavaScript: Dayakan popover melalui JavaScript:

$(&#39;#identifier&#39;).popover(options)

Salin selepas log masuk

Pemalam popover bukan seperti menu lungsur dan pemalam lain yang dibincangkan sebelum ini pemalam CSS. Untuk menggunakan pemalam, anda mesti mengaktifkannya menggunakan jquery (baca javascript). Gunakan skrip berikut untuk mendayakan semua popover pada halaman:

$(function () { $("[data-toggle=&#39;popover&#39;]").popover(); });

Salin selepas log masuk

Contohnya adalah seperti berikut:

<body>
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title"  
data-container="body" data-toggle="popover" data-placement="left" 
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title"  
data-container="body" data-toggle="popover" data-placement="top" 
data-content="顶部的 Popover 中的一些内容">
顶部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title"  
data-container="body" data-toggle="popover" data-placement="bottom" 
data-content="底部的 Popover 中的一些内容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title"  
data-container="body" data-toggle="popover" data-placement="right" 
data-content="右侧的 Popover 中的一些内容">
右侧的 Popover
</button>
</div>
<script>
$(function () { 
$("[data-toggle=&#39;popover&#39;]").popover();
});
</script>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

Adakah terdapat lapisan pop timbul dalam bootstrap?

Pengesyoran berkaitan: tutorial bootstrap

Atas ialah kandungan terperinci Adakah terdapat lapisan pop timbul dalam bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!