Bootstrap brinda la opción de agregar un menú desplegable a nuestros sitios web. El ícono predeterminado en el botón desplegable es el logotipo de ‘flecha continua hacia abajo’. Aunque cumple su propósito, la mayoría de los sitios web modernos utilizan Bootstrap. Por lo tanto, el ícono puede parecer muy genérico para el visitante.
Programa:
html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap dorpdown</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<style>
.container{
margin:20px;
}
h2{
color:green;
}
</style>
</head>
<body>
<div class="container">
<h2>GeeksforGeeks</h2>
<p>A Computer Science Portal for Geeks</p>
<div class="dropdown">
<button type="button"
class="btn btn-success dropdown-toggle"
data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option A</a>
<a class="dropdown-item" href="#">Option B</a>
<a class="dropdown-item" href="#">Option C</a>
<a class="dropdown-item" href="#">Option D</a>
</div>
</div>
</div>
</body>
</html>
Producción:
Sin embargo, es posible cambiar el icono predeterminado de Bootstrap por el icono de su elección. También puede hacer que ese ícono se pueda alternar, los pasos a continuación procederán a la solución.
- Paso 1: Vaya a un sitio web de iconos externo como Font Awesome. Incruste su enlace CDN dentro de la etiqueta <head> de la página web.
<enlace rel=”hoja de estilo” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
- Paso 2: Cambie el CSS del menú desplegable a mostrar: ninguno . Esto hará desaparecer el logotipo desplegable sólido del botón. Sin embargo, también se debe agregar ‘!importante’ para ver los cambios en la página web.
.dropdown-toggle::after {
display: none !important;
}
- Paso 3: después de aplicar el CSS, copie el código de inserción del icono que desea mostrar en la página web desde el sitio web del icono externo y péguelo dentro de la etiqueta del botón. Como en este ejemplo, estamos usando el ícono del signo ‘más’.
- Paso 4: el nuevo ícono comenzará a mostrarse en la página web.
Nota: El ícono desplegable del código del programa debajo también se puede alternar agregando una sola línea de código jQuery con la función de un clic en el ícono.
Programa: este ejemplo cambia el ícono predeterminado del ícono desplegable de Bootstrap.
html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap dorpdown</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<style>
.container{
margin:20px;
}
h2{
color:green;
}
.dropdown-toggle::after {
display: none !important;
}
.fa {
margin:2px;
color:white;
}
</style>
</head>
<body>
<div class="container">
<h2>GeeksforGeeks</h2>
<p>A Computer Science Portal for Geeks</p>
<div class="dropdown">
<!-- Dropdown button -->
<button type="button"
class="btn btn-success dropdown-toggle"
data-toggle="dropdown">
Dropdown
<a href="javascript:void(0);"
class="icon"
onclick="geeksforgeeks()">
<!-- Changing the default icon with toggle-->
<i onclick="myFunction(this)"
class="fa fa-plus-circle"></i>
</a>
</button>
<!-- Dropdown options -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option A</a>
<a class="dropdown-item" href="#">Option B</a>
<a class="dropdown-item" href="#">Option C</a>
<a class="dropdown-item" href="#">Option D</a>
</div>
</div>
</div>
<script>
// Function to toggle the plus menu into minus
function myFunction(x) {
x.classList.toggle("fa-minus-circle");
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sanchit496 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA