English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de Bootstrap

Plugin de Bootstrap

Plugin de desplegable (Collapse) de Bootstrap

El plugin de desplegable (Collapse) permite que las áreas de la página se plieguen fácilmente. Ya sea que lo use para crear navegación plegable o paneles de contenido, permite muchas opciones de contenido.

Si desea referenciar únicamente las funciones de este plugin,则需要引用 collapse.jstambién, debe referenciar en su versión de Bootstrap Plugin de transición (Transition)o, como Resumen de plugins de Bootstrap como se mencionó en el capítulo anterior, puede referenciar bootstrap.js o la versión comprimida bootstrap.min.js.

Puede usar el plugin de desplegable (Collapse):

  • Crear grupos plegables o paneles desplegables (accordion)como se muestra a continuación:

    Ejemplo en línea

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title> Ejemplo de Bootstrap　-　Panel desplegable</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseOne">
					href="#collapseFour">　1　Haga clic aquí para expandir, haga clic aquí nuevamente para colapsar. Número
				</a>
			</h4>
		</div>
		hide método-<div id="collapseOne" class="panel
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher　
				vice lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　success">
					href="#collapseFour">　2　Haga clic aquí para expandir, haga clic aquí nuevamente para colapsar. Número
				</a>
			</h4>
		</div>
		show método-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher　
				vice lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　<div id="collapseTwo" class="panel
					href="#collapseFour">　3　Haga clic aquí para expandir, haga clic aquí nuevamente para colapsar. Número
				</a>
			</h4>
		</div>
		toggle método-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher　
				vice lomo.
			</div>
		</div>
	</div>
</div>
</body>
</html>
    Prueba aquí ‹/›

    Los resultados se muestran a continuación:

  • data-toggle="collapse" se agrega a los enlaces del componente que desea expandir o plegar.

  • href o data-target Atributo que se agrega al componente padre, su valor es el del componente id.

  • data-parent Atributo que agrega el id del panel desplegable (accordion) a los enlaces del componente que se expande o plega.

  • Crear un componente plegable simple sin etiqueta de accordioncomo se muestra a continuación:

    Ejemplo en línea

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title> Ejemplo de Bootstrap　-　Componente plegable simple</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="collapse"　
		data-target="#demo">
	Componente plegable simple
</button>
<div id="demo" class="collapse in">
	Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
	cred nesciunt sapiente ea proident. Ad vegan excepteur butcher　
	vice lomo.
</div>
</body>
</html>
    Prueba aquí ‹/›

    Los resultados se muestran a continuación:

    Como puede ver en el ejemplo, creamos un componente plegable, a diferencia del panel desplegable (accordion), no hemos agregado atributos data-parent.

Uso

La siguiente tabla enumera las clases utilizadas por el plugin de desplegable (Collapse) para manejar desplazamientos pesados:

ClassDescripciónEjemplo
.collapseOcultar contenido.Pruebe aquí
.collapse.inMostrar contenido.Pruebe aquí
.collapsingSe agrega cuando comienza el efecto de transición y se elimina cuando se completa.　

Se puede usar el complemento desplegable (Collapse) de las siguientes dos formas:

  • A través de atributo de datosAgregar a los elementos data-toggle="collapse" y data-targety, asigna automáticamente el control de los elementos desplegables.data-target La propiedad acepta un selector CSS y aplica el efecto de despliegue. Asegúrese de agregar la clase a los elementos desplegables .collapse. Si desea que esté abierto por defecto, agregue una clase adicional .in.

    Para agregar gestión de agrupación similar al panel desplegable a los controles desplegables, agregue el atributo de datos data-parent="#selector".

  • A través de JavaScriptSe puede activar el método collapse mediante JavaScript, como se muestra a continuación:

    $('.collapse').collapse()

Opciones

Algunas opciones se pasan a través de atributo de datos o JavaScript. A continuación, se muestra una tabla con estas opciones:

Nombre de opciónTipo/Valor predeterminadoNombre de atributo de datosDescripción
parentselector
Valor predeterminado: false		data-parentSi se proporciona un selector, cuando se muestra el elemento desplegable, todos los elementos desplegables bajo el elemento padre se cerrarán. Esto es similar al comportamiento del panel desplegable tradicional (accordion). - Esto depende de accordion-clase group.
toggleboolean
Valor predeterminado: true		data-toggleCambiar llamada a elemento desplegable.

Métodos

A continuación, se muestran algunos métodos útiles del complemento desplegable (Collapse):

MétodosDescripciónEjemplo
Opciones: .collapse(opciones)Activar contenido como elemento desplegable. Acepta un objeto opciones opcional.
$('#identifier').collapse({
　　　　$('function () { $('#collapseFour').collapse({
)
Cambiar: .collapse('toggle')Cambiar visualización/Ocultar elemento desplegable.
$('#identifier').collapse('toggle')
Mostrar: .collapse('show')Mostrar elemento desplegable.
$('#identifier').collapse('show')
Ocultar: .collapse('hide')Ocultar elemento desplegable.
$('#identifier').collapse('hide')

Ejemplo en línea

El siguiente ejemplo muestra el uso del método:

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title> Ejemplo de Bootstrap　-　desplegable (Collapse) método</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseOne">
					href="#collapseFour">　1　Haga clic aquí para expandir, haga clic aquí nuevamente para colapsar. Número--href="#collapseOne">
				</a>
			</h4>
		</div>
		hide método-<div id="collapseOne" class="panel
			<div class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			</div>
		</div>
	</div>
	<div class="panel panel-collapse collapse in">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　success">
					href="#collapseFour">　2　Haga clic aquí para expandir, haga clic aquí nuevamente para colapsar. Número--href="#collapseTwo">
				</a>
			</h4>
		</div>
		show método-collapse collapse">
			<div class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			</div>
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　<div id="collapseTwo" class="panel
					href="#collapseFour">　3　Haga clic aquí para expandir, haga clic aquí nuevamente para colapsar. Número--href="#collapseThree">
				</a>
			</h4>
		</div>
		toggle método-collapse collapse">
			<div class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			</div>
		</div>
	</div>
	<div class="panel panel-<div id="collapseThree" class="panel
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　warning">
					href="#collapseFour">　4　Haga clic aquí para expandir, haga clic aquí nuevamente para colapsar. Número--Parte
				</a>
			</h4>
		</div>
		options método-collapse collapse">
			<div class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	lomo.
		$('function () { $('#collapseFour').collapse({
	toggle: false
	});
	$('function () { $('#collapseTwo').collapse('show')});
	$('function () { $('#collapseThree').collapse('toggle')});
</script>　　
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

La siguiente tabla enumera los eventos utilizados en el plugin de colapsable (Collapse). Estos eventos pueden ser utilizados como ganchos en las funciones.

$(function () { $('#collapseOne').collapse('hide')});

La siguiente tabla enumera los eventos utilizados en el plugin de colapsable (Collapse). Estos eventos pueden ser utilizados como ganchos en las funciones.DescripciónEjemplo
show.bs.collapseEste evento se desencadena después de llamar al método show.
$('#identifier').on('show.bs.collapse', function () {
　　　　//　Ejecutar algunas acciones...
)
shown.bs.collapseEste evento se desencadena cuando el elemento colapsable es visible para el usuario (esperará que finalice el efecto de transición CSS).
$('#identifier').on('shown.bs.collapse', function () {
　　　　//　Ejecutar algunas acciones...
)
hide.bs.collapseEste evento se dispara inmediatamente cuando se llama al método de ejemplo hide.
$('#identifier').on('hide.bs.collapse', function () {
　　　　//　Ejecutar algunas acciones...
)
hidden.bs.collapseEste evento se dispara cuando el elemento plegable se oculta para el usuario (esperará que finalice el efecto de transición CSS).
$('#identifier').on('hidden.bs.collapse', function () {
　　　　//　Ejecutar algunas acciones...
)

Ejemplo en línea

El siguiente ejemplo muestra el uso de eventos:

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title> Ejemplo de Bootstrap　-　evento de plugin de plegado</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
	<div class="panel panel-info">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseexample">
					Haga clic aquí para expandir, haga clic aquí nuevamente para plegar.--evento mostrado
				</a>
			</h4>
		</div>
		<div id="collapseexample" class="panel-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				cred nesciunt sapiente ea proident.　
				Ad vegan excepteur butcher vice lomo.
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function () {　
		$('#collapseexample').on('show.bs.collapse', function () {
			alert('¡Hey, se mostrará esta advertencia cuando se expanda');});
	});
</script>　
</body>
</html>
Prueba aquí ‹/›

Los resultados se muestran a continuación:

Complemento de carrusel de BootstrapComplemento de botón de Bootstrap