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

Tutorial básico do Bootstrap

Plugin do Bootstrap

Plugin de Bootstrap Collapsible

O plugin de collapse (colapsar) permite que áreas da página se dobram com facilidade. Independentemente de usá-lo para criar navegação dobrável ou painéis de conteúdo, ele permite muitas opções de conteúdo.

Se você desejar referenciar funcionalidades específicas do plugin, você precisará referenciar collapse.js。 Além disso, também é necessário referenciar no seu Bootstrap version Plugin de Transição (Transição)。 Ou, como Visão geral de plugins Bootstrap Como mencionado no capítulo anterior, você pode referenciar bootstrap.js ou a versão comprimida bootstrap.min.js.

Você pode usar o plugin de collapse (colapsar):

  • Crie grupos dobráveis ou painéis de acordeão (accordion)， conforme mostrado a seguir:

    Exemplo online

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo do Bootstrap　-　Painel de acordeão</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　Clique para expandir, clique novamente 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　Clique para expandir, clique novamente 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　Clique para expandir, clique novamente 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>
    Teste e veja ‹/›

    Os resultados são exibidos conforme abaixo:

  • data-toggle="collapse" adiciona ao link do componente que você deseja expandir ou dobrar.

  • href ou data-target O atributo adiciona ao componente pai, cujo valor é o do componente id.

  • data-parent O atributo adiciona o id do painel de acordeão (accordion) ao link do componente que será expandido ou dobrado.

  • Crie um componente dobrável simples sem a marcação accordion， conforme mostrado a seguir:

    Exemplo online

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo do Bootstrap　-　Componente dobrável simples</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 dobrável simples
</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>
    Teste e veja ‹/›

    Os resultados são exibidos conforme abaixo:

    Como você pode ver no exemplo, criamos um componente que pode ser dobrado, diferente do painel de acordeão (accordion), não adicionamos atributos data-parent.

Uso

A tabela a seguir lista as classes usadas pelo plugin de collapse (colapsar) para lidar com a extensão pesada:

ClassDescriçãoExemplo
.collapseOcultar conteúdo.Experimente
.collapse.inMostra de conteúdo.Experimente
.collapsingAdicionado quando o efeito de transição começa e removido quando o efeito de transição é concluído.　

Você pode usar o plugin de dobra (Collapse) de duas maneiras:

  • através do atributo de dadosAdicionar ao elemento data-toggle="collapse" e data-targete automaticamente atribui o controle do elemento dobrável.data-target A propriedade aceita um seletor CSS e aplica o efeito de dobra. Certifique-se de adicionar a classe ao elemento dobrável. .collapse. Se você desejar que ele esteja aberto por padrão, adicione uma classe extra .in.

    Para adicionar gerenciamento de grupo semelhante ao painel de dobra para o controle dobrável, adicione o atributo de dados data-parent="#selector".

  • através do JavaScriptPode ativar o método collapse via JavaScript, conforme mostrado a seguir:

    $('.collapse').collapse()

Opções

Alguns opções são passadas por meio de atributo de dados ou JavaScript. A tabela a seguir lista essas opções:

Nome da opçãoTipo/Valor padrãoNome do atributo de dadosDescrição
parentselector
Valor padrão: false		data-parentSe for fornecido um seletor, todos os elementos dobráveis sob o elemento pai serão fechados ao exibir o item dobrável. Isso é semelhante ao comportamento do painel de dobra tradicional (accordion). - Isso depende do accordion-classe group.
toggleboolean
Valor padrão: true		data-toggleAlternar chamada do elemento dobrável.

Métodos

A seguir estão alguns métodos úteis no plugin de dobra (Collapse):

MétodosDescriçãoExemplo
Opções: .collapse(options)Ativar conteúdo como elemento dobrável. Aceita um objeto options opcional.
$('#identifier').collapse({
　　　　$('function () { $('#collapseFour').collapse({
)
Alternar: .collapse('toggle')Alternar exibição/Ocultar elemento dobrável.
$('#identifier').collapse('toggle')
Mostrar: .collapse('show')Mostrar elemento dobrável.
$('#identifier').collapse('show')
Ocultar: .collapse('hide')Ocultar elemento dobrável.
$('#identifier').collapse('hide')

Exemplo online

O exemplo a seguir demonstra o uso do método:

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo do Bootstrap　-　plugin 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　Clique para expandir, clique novamente 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　Clique para expandir, clique novamente 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　Clique para expandir, clique novamente 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　Clique para expandir, clique novamente para colapsar. Número--partes
				</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>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

A tabela a seguir lista os eventos utilizados no plugin de colapso (Collapse). Esses eventos podem ser usados como ganchos em funções.

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

A tabela a seguir lista os eventos utilizados no plugin de colapso (Collapse). Esses eventos podem ser usados como ganchos em funções.DescriçãoExemplo
show.bs.collapseO evento é acionado após a chamada do método show.
$('#identifier').on('show.bs.collapse', function () {
　　　　//　Execute algumas ações...
)
shown.bs.collapseO evento é acionado quando o elemento de colapso se torna visível para o usuário (aguardando o efeito de transição CSS ser concluído).
$('#identifier').on('shown.bs.collapse', function () {
　　　　//　Execute algumas ações...
)
hide.bs.collapseEste evento é acionado imediatamente quando o método de exemplo hide é chamado.
$('#identifier').on('hide.bs.collapse', function () {
　　　　//　Execute algumas ações...
)
hidden.bs.collapseEste evento é acionado quando o elemento de colapso é ocultado para o usuário (aguardando o efeito de transição CSS ser concluído).
$('#identifier').on('hidden.bs.collapse', function () {
　　　　//　Execute algumas ações...
)

Exemplo online

O exemplo a seguir demonstra o uso dos eventos:

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo do Bootstrap　-　Evento do plugin doCollapse</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">
					Clique em mim para expandir, clique novamente em mim para dobrar.--eventos mostrados
				</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('Ei, quando você expandir, uma mensagem de aviso será exibida');});
	});
</script>　
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Plugin de Carrossel BootstrapPlugin de Botão Bootstrap