Llevo un mes aprendiendo Desarrollo Web. Por lo que he leído, data-bs-toggle es el nombre más nuevo para Bootstrap 5.
¿Cuál es la diferencia entre los atributos Data-Toggle y Data-BS-Toggle de Bootstrap?
Mi código es simple. En la cabeza, he incluido CSS, jQuery y JavaScript Bundle con Popper. En el cuerpo, tengo dos enlaces con un popover. En el script, inicio popover.
Al cambiar data-toggle a data-bs-toggle mi popover no funcionaría.
data-bs-content por otro lado, no funcionaría si lo cambio a data-content
¿Por qué pasó esto?
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <!-- JavaScript Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> </head> <body> <a href="#" title="Header" data-bs-toggle="popover" data-placement="top" data-bs-content="Content">Click</a> <a href="#" title="Header" data-toggle="popover" data-placement="top" data-bs-content="Content">Click</a> </body> <script> $(function () { $('[data-toggle="popover"]').popover() console.log('activated') }) </script> </html>Debe decidir qué cambio de datos iniciar.
Si usa $('[data-toggle="popover"]').popover() inicia popover que ha especificado la alternancia de datos
Si usa $('[data-bs-toggle="popover"]').popover() inicia popover que ha especificado data-bs-toggle
Apéguese a una versión: alternar datos o alternar datos-bs
Recomiendo usar data-bs-toggle. Si va a copiar el código de los documentos, recuerde que DOC describe Bootstrap 4. Entonces, si está usando Bootstrap 5, algunas utilidades no funcionarán con la alternancia de datos.