English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap4 può implementare facilmente la visualizzazione e la nascita del contenuto.
<!DOCTYPE html> <html> <head> <title>Bootstrap Esempio</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Pieghevole semplice</h2> <p>Cliccando sul pulsante, il contenuto passerà da visibile a nascosto e viceversa.</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Pieghevole semplice</button> <div id="demo" class="collapse"> Pregherei per te, ti dedicherò, Abbiamo tutte esperienze casuali nel lavoro e nella vita. Abbiamo una piccola vita, Sto facendo un tirocinio che non mi si addice. </div> </div> </body> </html>Prova a vedere ‹/›
La classe .collapse viene usata per specificare un elemento pieghevole (ad esempio <div>); Cliccando sul pulsante, il contenuto passerà da nascosto a visibile e viceversa.
Per controllare la visualizzazione e la nascita del contenuto, aggiungi l'attributo data-toggle="collapse" agli elementi <a> o <button>. L'attributo data-target="#id" corrisponde al contenuto pieghevole (ad esempio <div id="demo">).
Attenzione: <a> Puoi usare l'attributo href sull'elemento per sostituire data-target Proprietà:
<!DOCTYPE html> <html> <head> <title>Bootstrap Esempio</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Pieghevole semplice</h2> <a href="#demo" class="btn btn-primary" data-toggle="collapse">Pieghevole semplice</a> <div id="demo" class="collapse"> Pregherei per te, ti dedicherò, Abbiamo tutte esperienze casuali nel lavoro e nella vita. Abbiamo una piccola vita, Sto facendo un tirocinio che non mi si addice. </div> </div> </body> </html>Prova a vedere ‹/›
Per impostazione predefinita, il contenuto del pieghevole è nascosto, puoi aggiungere la classe .show per visualizzare il contenuto di default:
<!DOCTYPE html> <html> <head> <title>Bootstrap Esempio</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Pieghevole semplice</h2> <p>Puoi aggiungere la classe .show per visualizzare il contenuto di default:</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Pieghevole semplice</button> <div id="demo" class="collapse show"> Pregherei per te, ti dedicherò, Abbiamo tutte esperienze casuali nel lavoro e nella vita. Abbiamo una piccola vita, Sto facendo un tirocinio che non mi si addice. </div> </div> </body> </html>Prova a vedere ‹/›
Questo esempio mostra un semplice accordione esteso del componente delle schede.
Attenzione: Usa l'attributo data-parent per assicurare che tutti gli elementi di pieghevole siano sotto l'elemento genitore specificato, in modo che possano essere nascosti o visualizzati in base alla selezione.
<!DOCTYPE html> <html> <head> <title>Bootstrap Esempio</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Esempio di accordione</h2> <p><strong>Attenzione:</strong> Utilizza l'attributo <strong>data-parent</strong> per assicurarti che tutti gli elementi di pieghevole siano sotto l'elemento genitore specificato, in modo che quando un'opzione di pieghevole è visibile, le altre siano nascoste.</p> <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> Opzione uno </a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> #1 Contenuto: Manuale di base (oldtoolbag.com) -- Impara le basi per andare più lontano!! </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> Opzione due </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> #2 Contenuto: Tutorial di base (oldtoolbag.com) -- Impara bene la base per andare più lontano！！！ </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> Opzione tre </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> #3 Contenuto: Tutorial di base (oldtoolbag.com) -- Impara bene la base per andare più lontano！！！ </div> </div> </div> </div> </div> </body> </html>Prova a vedere ‹/›