English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap4 O fechamento pode implementar facilmente a exibição e ocultação do conteúdo.
<!DOCTYPE html> <html> <head> <title>Exemplo Bootstrap</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>Fechamento simples</h2> <p>Clicar no botão fará com que o conteúdo alternne entre exibir e ocultar.</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Dobramento simples</button> <div id="demo" class="collapse"> Eu rezarei por você, dedico-me a você, Temos todos nós tido experiências acidentais no trabalho e na vida. Temos uma pequena vida, Estou fazendo um estágio que não é adequado para mim. </div> </div> </body> </html>Teste e Veja ‹/›
.collapse classe é usada para especificar um elemento de fechamento (por exemplo, <div>); Após clicar no botão, haverá alternância entre ocultar e exibir.
Para controlar a ocultação e exibição do conteúdo, é necessário adicionar data em <a> ou <button> elementos.-propriedade toggle="collapse". data-target="#id" propriedade é correspondente ao conteúdo do fechamento (<div id="demo">).
Atenção: <a> No elemento, você pode usar a propriedade href para substituir data-target Atributos:
<!DOCTYPE html> <html> <head> <title>Exemplo Bootstrap</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>Fechamento simples</h2> <a href="#demo" class="btn btn-primary" data-toggle="collapse">Fechamento simples</a> <div id="demo" class="collapse"> Eu rezarei por você, dedico-me a você, Temos todos nós tido experiências acidentais no trabalho e na vida. Temos uma pequena vida, Estou fazendo um estágio que não é adequado para mim. </div> </div> </body> </html>Teste e Veja ‹/›
Por padrão, o conteúdo do fechamento está oculto, você pode adicionar a classe .show para exibir o conteúdo por padrão:
<!DOCTYPE html> <html> <head> <title>Exemplo Bootstrap</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>Fechamento simples</h2> <p>Você pode adicionar a classe .show para exibir o conteúdo por padrão:/p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Dobramento simples</button> <div id="demo" class="collapse show"> Eu rezarei por você, dedico-me a você, Temos todos nós tido experiências acidentais no trabalho e na vida. Temos uma pequena vida, Estou fazendo um estágio que não é adequado para mim. </div> </div> </body> </html>Teste e Veja ‹/›
O exemplo a seguir mostra um acordeão simples através da extensão do componente de cartão.
Atenção: Usar data-A propriedade parent para garantir que todos os elementos de dobramento estejam no elemento pai especificado, permitindo que uma opção de dobramento seja exibida enquanto as outras são ocultadas.
<!DOCTYPE html> <html> <head> <title>Exemplo Bootstrap</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>Exemplo de acordeão</h2> <p><strong>Atenção:</strong>Usar <strong>data-parent</strong>Para garantir que todos os elementos de dobramento estejam no elemento pai especificado, o que permite que uma opção de dobramento seja exibida enquanto as outras são ocultadas.</p> <div id="accordion"> <div class="card"> <div class="card-header> <a class="card"-link" data-toggle="collapse" href="#collapseOne"> Opção um </a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body> #1 Conteúdo: Tutoriais Básicos(oldtoolbag.com) -- Aprenda os fundamentos, para ir mais longe!! </div> </div> </div> <div class="card"> <div class="card-header> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> Opção Dois </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body> #2 Conteúdo: Tutoriais Básicos(oldtoolbag.com) -- Aprenda os fundamentos, para ir mais longe!! </div> </div> </div> <div class="card"> <div class="card-header> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> Opção Três </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body> #3 Conteúdo: Tutoriais Básicos(oldtoolbag.com) -- Aprenda os fundamentos, para ir mais longe!! </div> </div> </div> </div> </div> </body> </html>Teste e Veja ‹/›