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

Tutorial di base di Bootstrap

Plugin di Bootstrap

Plugin di ripiegamento (Collapse) di Bootstrap

Il plugin di ripiegamento (Collapse) può piegare facilmente le aree della pagina. Indipendentemente da cosa lo usi per creare la navigazione ripiegabile o il pannello di contenuto, ti permette molte opzioni di contenuto.

Se desideri citare singolarmente le funzionalità di questo plugin, allora devi citare collapse.jsè necessario anche citare nel tuo Bootstrap versione Plugin di transizione (Transition)oppure, come Panoramica delle estensioni di Bootstrap come menzionato in un capitolo, puoi citare bootstrap.js o la versione compressa bootstrap.min.js.

Puoi utilizzare l'estensione di ripiegamento (Collapse):

  • Crea gruppi ripiegabili o pannelli di ripiegamento (accordion)come mostrato di seguito:

    Esempio online

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Esempio - Pannello di ripiegamento</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">
					Clicca su di me per espandere, clicca nuovamente su di me per ripiegare. Parte 1
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse in">
			<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"　
				　　　href="#collapseTwo">
					Clicca su di me per espandere, clicca nuovamente su di me per ripiegare. Parte 2
				</a>
			</h4>
		</div>
		<div id="collapseTwo" 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 class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseThree">
					Clicca su di me per espandere, clicca nuovamente su di me per ripiegare. Parte 3
				</a>
			</h4>
		</div>
		<div id="collapseThree" 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>
</body>
</html>
    Prova a vedere ‹/›

    I risultati sono mostrati di seguito:

  • data-toggle="collapse" Aggiungi un collegamento al componente che desideri espandere o ripiegare.

  • href o data-target L'attributo viene aggiunto al componente genitore, il cui valore è l'id del componente id.

  • data-parent L'attributo aggiunge l'id del pannello a schede (accordion) al link del componente da aprire o chiudere.

  • Crea un componente pieghevole semplice senza etichetta accordioncome mostrato di seguito:

    Esempio online

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - Componente pieghevole semplice</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 pieghevole semplice
</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>
    Prova a vedere ‹/›

    I risultati sono mostrati di seguito:

    Come puoi vedere nell'esempio, abbiamo creato un componente pieghevole, diverso dal pannello a schede (accordion), non abbiamo aggiunto l'attributo data-parent.

Uso

La seguente tabella elenca le classi utilizzate dal plugin di pieghevole (Collapse) per gestire le estensioni pesanti:

ClasseDescrizioneEsempio
.collapseNasconde il contenuto.Prova a
.collapse.inMostra il contenuto.Prova a
.collapsingAggiunto quando inizia l'effetto di transizione e rimosso quando termina.　

Puoi utilizzare il plugin di pieghevole (Collapse) in due modi:

  • Tramite l'attributo datiAggiungi al elemento data-toggle="collapse" e data-targete assegna automaticamente il controllo agli elementi pieghevoli.data-target L'attributo accetta un selettore CSS e applica l'effetto pieghevole. Assicurati di aggiungere la classe ai elementi pieghevoli .collapse. Se desideri che sia aperto di default, aggiungi una classe aggiuntiva .in.

    Per aggiungere una gestione di gruppo simile a quella delle schede pieghevoli ai controlli pieghevoli, aggiungi l'attributo dati data-parent="#selettore".

  • Tramite JavaScriptPuoi attivare il metodo collapse tramite JavaScript, come mostrato di seguito:

    $('.collapse').collapse()

Opzioni

Alcune opzioni sono trasmesse tramite l'attributo dati o JavaScript. La seguente tabella elenca queste opzioni:

Nome opzioneTipo/predefinitoNome attributo datiDescrizione
genitoreselettore
Valore predefinito: false		data-parentSe è fornito un selettore, tutti gli elementi pieghevoli sotto l'elemento genitore verranno chiusi quando l'elemento pieghevole viene visualizzato. Questo comportamento è simile a quello del pannello pieghevole tradizionale (accordion) - dipende dalla classe accordion-group.
toggleboolean
Valore predefinito: true		data-toggleChiamata di commutazione per l'elemento pieghevole.

Metodi

Di seguito sono riportati alcuni metodi utili del plugin pieghevole (Collapse):

MetodiDescrizioneEsempio
Opzioni: .collapse(options)Attiva il contenuto come elemento pieghevole. Accetta un oggetto opzionale di opzioni.
$('#identifier').collapse({
　　　　toggle: false
})
Toggle: .collapse('toggle')Commuta la visualizzazione/nascita dell'elemento pieghevole.
$('#identifier').collapse('toggle')
Show: .collapse('show')Mostra l'elemento pieghevole.
$('#identifier').collapse('show')
Hide: .collapse('hide')Nascondi l'elemento pieghevole.
$('#identifier').collapse('hide')

Esempio online

Di seguito sono riportati degli esempi che illustrano l'uso dei metodi:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Example Bootstrap - Metodi del plugin di pieghevole (Collapse)</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">
					Clicca su di me per espandere, clicca nuovamente su di me per ripiegare. Parte 1 -- metodo hide
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse in">
			<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-success">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseTwo">
					Clicca su di me per espandere, clicca nuovamente su di me per ripiegare. Parte 2 -- metodo show
				</a>
			</h4>
		</div>
		<div id="collapseTwo" 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 class="panel panel-info">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseThree">
					Clicca su di me per espandere, clicca nuovamente su di me per ripiegare. Parte 3 -- metodo toggle
				</a>
			</h4>
		</div>
		<div id="collapseThree" 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 class="panel panel-warning">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseFour">
					Clicca per espandere, clicca di nuovo per ripiegare. Parte 4 - metodo options
				</a>
			</h4>
		</div>
		<div id="collapseFour" 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 () { $('#collapseFour').collapse({
		toggle: false
	});}
	$('function () { $('#collapseTwo').collapse('show');});
	$('function () { $('#collapseThree').collapse('toggle');});
	$(function () { $('#collapseOne').collapse('hide');});
</script>　　
</body>
</html>
Prova a vedere ‹/›

I risultati sono mostrati di seguito:

Evento

La tabella seguente elenca gli eventi utilizzati dall'estensione di pieghevole (Collapse). Questi eventi possono essere utilizzati come hook nelle funzioni.

EventoDescrizioneEsempio
show.bs.collapseL'evento viene scatenato dopo aver chiamato il metodo show.
$('#identifier').on('show.bs.collapse', function () {
　　　　// Esegui alcune azioni...
})
shown.bs.collapseL'evento viene scatenato quando l'elemento di pieghevole diventa visibile all'utente (in attesa dell'effetto di transizione CSS).
$('#identifier').on('shown.bs.collapse', function () {
　　　　// Esegui alcune azioni...
})
hide.bs.collapseL'evento viene scatenato immediatamente quando viene chiamato il metodo di esempio hide.
$('#identifier').on('hide.bs.collapse', function () {
　　　　// Esegui alcune azioni...
})
hidden.bs.collapseQuando l'elemento di pieghevole è nascosto all'utente viene scatenato questo evento (in attesa dell'effetto di transizione CSS).
$('#identifier').on('hidden.bs.collapse', function () {
　　　　// Esegui alcune azioni...
})

Esempio online

Il seguente esempio dimostra l'uso degli eventi:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Plugin di Collapsibile (Collapse) Eventi</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">
					Clicca su di me per espandere, clicca nuovamente su di me per ripiegare. -- evento 'shown'
				</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('Ehi, una timesharing avviserà questo avviso quando si espande');});
	});
</script>　
</body>
</html>
Prova a vedere ‹/›

I risultati sono mostrati di seguito:

Plugin di Carrousel BootstrapPlugin di Pulsante Bootstrap