Dropdowns Bootstrap

14/9/2019 Dropdowns · Bootstrap
Listas deplegables
Alterna las superposiciones contextuales para mostrar listas de enlaces y
más con el complemento desplegable Bootstrap.
Diversifique sus ingresos

más allá de las compras en
la aplicación con anuncios
de monetización de
anuncios a través de
Carbon
Visión de conjunto
Los menús desplegables son superposiciones contextuales conmutables para mostrar listas de enlaces
y más. Se hacen interactivos con el complemento de JavaScript desplegable Bootstrap incluido. Se
activan al hacer clic, no al desplazarse; Esta es una decisión de diseño intencional .
Los menús desplegables se basan en una biblioteca de terceros, Popper.js , que proporciona un
posicionamiento dinámico y detección de viewport. Asegúrese de incluir popper.min.js antes del
JavaScript de Bootstrap o use bootstrap.bundle.min.js/ bootstrap.bundle.jsque contiene Popper.js.
Popper.js no se usa para colocar menús desplegables en las barras de navegación, ya que no se
requiere un posicionamiento dinámico.
Si está construyendo nuestro JavaScript desde la fuente, lo requiereutil.js .
Accesibilidad
El estándar WAI (Iniciativa de accesibilidad web) ARIA (Aplicaciones de Internet enriquecidas
accesibles) define un role="menu"widget real , pero esto es específico para menús similares a
aplicaciones que desencadenan acciones o funciones. Los (Aplicaciones de Internet enriquecidas
accesibles) menús ARIA (Accessible Rich Internet Applications) solo pueden contener elementos de
menú, elementos de menú de casillas de verificación, elementos de menú de botones de radio,
grupos de botones de radio y submenús.
Los menús desplegables de Bootstrap, por otro lado, están diseñados para ser genéricos y aplicables a
una variedad de situaciones y estructuras de marcado. Por ejemplo, es posible crear menús
desplegables que contengan entradas adicionales y controles de formulario, como campos de
búsqueda o formularios de inicio de sesión. Por esta razón, Bootstrap no espera (ni agrega
automáticamente) ninguno de los atributos roley aria-necesarios para los verdaderos menús ARIA
(Aplicaciones de Internet enriquecidas accesibles) . Los autores deberán incluir estos atributos más
específicos.
Sin embargo, Bootstrap agrega soporte incorporado para la mayoría de las interacciones de menú de
teclado estándar, como la capacidad de moverse a través de .dropdown-itemelementos individuales
usando las teclas del cursor y cerrar el menú con la ESC tecla.
Ejemplos
Envuelva el botón desplegable (su botón o enlace) y el menú desplegable dentro .dropdown, u otro
elemento que declare position: relative;. Se pueden activar menús desplegables <a>o
<button>elementos para adaptarse mejor a sus necesidades potenciales.
Solo botón
Cualquier single .btnse puede convertir en un menú desplegable con algunos cambios de marcado.
Así es como puede ponerlos a trabajar con cualquiera de los <button>elementos:
https://getbootstrap.com/docs/4.3/components/dropdowns/ 1/14
Botón desplegable
Copiar
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Y con <a>elementos:
Enlace desplegable
Copiar
<a class="btn btn-secondary dropdown-toggle" href="#" role="button"
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">

</div>
</div>
La mejor parte es que también puedes hacer esto con cualquier variante de botón:
Primario Secundario Éxito Informacion Advertencia Peligro
Copiar

<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Botón de división
Del mismo modo, cree menús desplegables de botones divididos con prácticamente el mismo
marcado que los botones desplegables de un solo botón, pero con la adición de .dropdown-toggle-
splitun espacio adecuado alrededor del cursor desplegable.
Usamos esta clase adicional para reducir la horizontal paddinga cada lado del cursor en un 25% y
eliminar la margin-leftque se agrega para desplegar botones regularmente. Esos cambios adicionales
mantienen el cursor centrado en el botón de división y proporcionan un área de impacto más
apropiada al lado del botón principal.
Primario Secundario Éxito Informacion Advertencia
Peligro
Copiar

<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
</div>
</div>
Dimensionamiento
Los menús desplegables de botones funcionan con botones de todos los tamaños, incluidos los
botones desplegables predeterminados y divididos.
Botón grande Botón dividido grande
Pequeño botón Pequeño botón dividido
Copiar


<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
...
</div>
</div>
<button class="btn btn-secondary btn-lg" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-
toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
...
</div>
</div>


<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-
Small button
</button>
...
</div>
</div>
<button class="btn btn-secondary btn-sm" type="button">
Small split button
</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-
toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
...
</div>
</div>
Direcciones
Caer hasta
Desencadenar menús desplegables sobre los elementos agregándolos .dropupal elemento padre.
Caer hasta Split dropup
Copiar


<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-
Dropup
</button>

</div>
</div>


<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
</button>
</div>
</div>
Dropright
Active menús desplegables a la derecha de los elementos agregándolos .droprightal elemento
principal.
Dropright Split dropright
Copiar

<div class="btn-group dropright">
Dropright
</button>
</div>
</div>


<div class="btn-group dropright">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
<span class="sr-only">Toggle Dropright</span>
</button>
</div>
</div>
Dropleft
Active menús desplegables a la izquierda de los elementos agregándolos .dropleftal elemento
principal.
Dropleft Gota dividida
Copiar

<div class="btn-group dropleft">
Dropleft
</button>
</div>
</div>


<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-
split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
</div>
</div>
Split dropleft
</button>
</div>
Elementos de menú
Históricamente, el contenido del menú desplegable tenía que ser enlaces, pero ese ya no es el caso
con v4. Ahora puedes usar opcionalmente <button>elementos en tus menús desplegables en lugar de
solo <a>s.
Desplegable
Copiar
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2"
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
También puede crear elementos desplegables no interactivos con .dropdown-item-text. Siéntase libre
de diseñar aún más con CSS personalizado o utilidades de texto.
Texto del elemento desplegable
Acción
Otra acción
Algo más aquí
Copiar
<span class="dropdown-item-text">Dropdown item text</span>
</div>
Activo
Agregar .activea elementos en el menú desplegable para diseñarlos como activos .
Enlace regular Enlace

activo
Otro enlace
Copiar
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Discapacitado
Agregar .disableda elementos en el menú desplegable para diseñarlos como deshabilitados .
Enlace normal Enlace

deshabilitado
Otro enlace
Copiar
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#" tabindex="-1" aria-
disabled="true">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Alineación del menú

Por defecto, un menú desplegable se coloca automáticamente al 100% desde la parte superior y a lo
largo del lado izquierdo de su elemento primario. Agregar .dropdown-menu-righta a .dropdown-
menupara alinear a la derecha el menú desplegable.
¡Aviso! Los menús desplegables se colocan gracias a Popper.js (excepto cuando están
contenidos en una barra de navegación).
Menú alineado a la derecha
Copiar
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
</div>
</div>
Alineación receptiva
Si desea utilizar la alineación receptiva, desactive el posicionamiento dinámico agregando el data-
display="static"atributo y use las clases de variación receptiva.
Para alinear a la derecha el menú desplegable con el punto de interrupción dado o más grande,
agregue .dropdown-menu{-sm|-md|-lg|-xl}-right.
Alineado a la izquierda pero alineado a la derecha cuando la pantalla grande
Copiar
toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-right">
</div>
</div>
Para alinear a la izquierda el menú desplegable con el punto de interrupción dado o más grande,
agregue .dropdown-menu-righty .dropdown-menu{-sm|-md|-lg|-xl}-left.
Alineado a la derecha pero alineado a la izquierda cuando la pantalla grande
Copiar
toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
</div>
</div>
Tenga en cuenta que no necesita agregar un data-display="static"atributo a los botones

desplegables en las barras de navegación, ya que Popper.js no se usa en las barras de navegación.
Contenido del menú
Encabezados
Agregue un encabezado para etiquetar secciones de acciones en cualquier menú desplegable.
Encabezado desplegable
Acción
Otra acción
Copiar
<h6 class="dropdown-header">Dropdown header</h6>
</div>
Divisores
Grupos separados de elementos de menú relacionados con un divisor.
Acción
Otra acción
Algo más aquí
Enlace separado
Copiar
</div>
Texto
Coloque cualquier texto de forma libre dentro de un menú desplegable con texto y use utilidades de
espaciado . Tenga en cuenta que probablemente necesitará estilos de tamaño adicionales para
restringir el ancho del menú.
Algún texto de
ejemplo que fluye
libremente dentro
del menú
desplegable.
Y este es más texto

de ejemplo.
Copiar
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">

<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
Formas
Coloque un formulario dentro de un menú desplegable, o conviértalo en un menú desplegable, y use
las utilidades de margen o relleno para darle el espacio negativo que necesita.
Dirección de correo electrónico
email@example.com
Contraseña
Password
Recuérdame
Registrarse
¿Nuevo por aquí? Registrarse
¿Olvidaste tu contraseña?
Copiar
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1"
placeholder="email@example.com">
</div>
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1"
placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
Dirección de correo electrónico
email@example.com
Contraseña
Password
Recuérdame
Registrarse
Copiar
<form class="dropdown-menu p-4">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2"
placeholder="email@example.com">
</div>
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2"
placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Opciones desplegables
Use data-offseto data-referencepara cambiar la ubicación del menú desplegable.
Compensar Referencia
Copiar
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle"
id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false" data-offset="10,20">
Offset
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
</div>
</div>
<button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-
split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false" data-reference="parent">
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
</div>
</div>
</div>
Uso
Mediante atributos de datos o JavaScript, el complemento desplegable alterna el contenido oculto
(menús desplegables) al alternar la .showclase en el elemento de la lista principal. Se data-
toggle="dropdown"utiliza el atributo para cerrar los menús desplegables a nivel de aplicación, por lo
que es una buena idea usarlo siempre.
En dispositivos táctiles, al abrir un menú desplegable se agregan controladores vacíos ( $.noop)

mouseovera los <body>elementos secundarios inmediatos del elemento. Este truco ciertamente
feo es necesario para evitar una peculiaridad en la delegación de eventos de iOS , que de lo
contrario evitaría que un toque en cualquier lugar fuera del menú desplegable active el código
que cierra el menú desplegable. Una vez que se cierra el menú desplegable, mouseoverse
eliminan estos controladores vacíos adicionales .
Vía atributos de datos

Agregar data-toggle="dropdown"a un enlace o botón para alternar un menú desplegable.
Search... Copiar
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
Empezando Dropdown trigger
Diseño </button>
<div class="dropdown-menu" aria-labelledby="dLabel">
Contenido ...
</div>
Componentes </div>
Alertas
Distintivo
Migaja de pan Vía JavaScript

Botones Llame a los menús desplegables a través de JavaScript:
Grupo de botones
p
Copiar
Tarjeta $('.dropdown-toggle').dropdown()
Carrusel
Colapso
Listas deplegables data-toggle="dropdown" todavía requerido

Formas Independientemente de si llama a su menú desplegable a través de JavaScript o en su lugar usa
Grupo de entrada la API de datos, data-toggle="dropdown"siempre se requiere que esté presente en el elemento
Jumbotron desencadenante del menú desplegable.
Lista de grupo
Objeto multimedia
Opciones
Modal
Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos,
Navs
agregue el nombre de la opción a data-, como en data-offset="".
Barra de navegación
Paginación Nombre Tipo Defecto Descripción

Popovers
Progreso compensar numero | 00 Desplazamiento del menú desplegable en relación

cadena | con su objetivo.
Scrollspy
función
Hiladores Cuando se utiliza una función para determinar el
Tostadas desplazamiento, se llama con un objeto que contiene
Información sobre herramientas los datos del desplazamiento como primer
argumento. La función debe devolver un objeto con
Utilidades la misma estructura. El nodo DOM del elemento
desencadenante se pasa como segundo argumento.
Ampliar
Migración Para obtener más información, consulte los
documentos de desplazamiento de Popper.js .
Acerca de
dar la booleano cierto Permita que Flipdown se voltee en caso de una

vuelta superposición en el elemento de referencia. Para
obtener más información, consulte los documentos
de flip de Popper.js .
límite cadena | 'scrollParent' Límite de restricción de desbordamiento del menú

elemento desplegable. Acepta los valores de 'viewport',
'window', 'scrollParent', o una referencia de
HTMLElement (JavaScript solamente). Para obtener
más información, consulte los documentos
preventOverflow de Popper.js .
referencia cadena | 'palanca' Elemento de referencia del menú desplegable.

elemento Acepta los valores de 'toggle', 'parent'o una
referencia HTMLElement. Para obtener más
información, consulte los documentos
ReferenceObject de Popper.js .
monitor cuerda 'dinámica' Por defecto, usamos Popper.js para el

posicionamiento dinámico. Deshabilita esto con
static.
Tenga en cuenta que cuando boundaryse establece en cualquier valor que no sea 'scrollParent', el
estilo position: staticse aplica al .dropdowncontenedor.
Métodos
Método Descripción
$().dropdown('toggle') Alterna el menú desplegable de una determinada barra de

navegación o navegación con pestañas.
Método Descripción
$().dropdown('show') Muestra el menú desplegable de una determinada barra de

navegación o navegación con pestañas.
$().dropdown('hide') Oculta el menú desplegable de una determinada barra de navegación

o navegación con pestañas.
$().dropdown('update') Actualiza la posición del menú desplegable de un elemento.
$().dropdown('dispose') Destruye el menú desplegable de un elemento.
Eventos
Todos los eventos desplegables se activan en el .dropdown-menuelemento primario del 's y tienen una
relatedTargetpropiedad, cuyo valor es el elemento de anclaje de alternancia. hide.bs.dropdowny los
hidden.bs.dropdowneventos tienen una clickEventpropiedad (solo cuando el tipo de evento original
es click) que contiene un Objeto de evento para el evento de clic.
Evento Descripción
show.bs.dropdown Este evento se dispara inmediatamente cuando se llama al método show

instance.
shown.bs.dropdown Este evento se activa cuando el menú desplegable se ha hecho visible para
el usuario (esperará a que finalicen las transiciones CSS).
hide.bs.dropdown Este evento se dispara inmediatamente cuando se llama al método de

instancia de hide.
hidden.bs.dropdown Este evento se activa cuando el menú desplegable ha terminado de

ocultarse al usuario (esperará a que se completen las transiciones CSS).
Copiar
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})

Dropdowns Bootstrap

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Dropdowns Bootstrap

Hochgeladen von

Copyright:

Verfügbare Formate

14/9/2019 Dropdowns · Bootstrap

Diversifique sus ingresos

Si está construyendo nuestro JavaScript desde la fuente, lo requiereutil.js .

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">

Primario Secundario Éxito Informacion Advertencia Peligro

Primario Secundario Éxito Informacion Advertencia

Botón grande Botón dividido grande

Pequeño botón Pequeño botón dividido

Caer hasta Split dropup

Dropright Split dropright

Dropleft Gota dividida

Texto del elemento desplegable

Enlace regular Enlace

Enlace normal Enlace

Alineación del menú

Menú alineado a la derecha

Alineado a la izquierda pero alineado a la derecha cuando la pantalla grande

Alineado a la derecha pero alineado a la izquierda cuando la pantalla grande

Tenga en cuenta que no necesita agregar un data-display="static"atributo a los botones

Contenido del menú

Algo más aquí

Y este es más texto

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">

Dirección de correo electrónico

¿Nuevo por aquí? Registrarse

Dirección de correo electrónico

En dispositivos táctiles, al abrir un menú desplegable se agregan controladores vacíos ( $.noop)

Vía atributos de datos

Migaja de pan Vía JavaScript

Listas deplegables data-toggle="dropdown" todavía requerido

Paginación Nombre Tipo Defecto Descripción

Progreso compensar numero | 00 Desplazamiento del menú desplegable en relación

dar la booleano cierto Permita que Flipdown se voltee en caso de una

límite cadena | 'scrollParent' Límite de restricción de desbordamiento del menú

referencia cadena | 'palanca' Elemento de referencia del menú desplegable.

monitor cuerda 'dinámica' Por defecto, usamos Popper.js para el

$().dropdown('toggle') Alterna el menú desplegable de una determinada barra de

$().dropdown('show') Muestra el menú desplegable de una determinada barra de

$().dropdown('hide') Oculta el menú desplegable de una determinada barra de navegación

$().dropdown('update') Actualiza la posición del menú desplegable de un elemento.

$().dropdown('dispose') Destruye el menú desplegable de un elemento.

show.bs.dropdown Este evento se dispara inmediatamente cuando se llama al método show

hide.bs.dropdown Este evento se dispara inmediatamente cuando se llama al método de

hidden.bs.dropdown Este evento se activa cuando el menú desplegable ha terminado de

Das könnte Ihnen auch gefallen