English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap4 позволяет легко реализовать отображение и скрытие содержимого.
<!DOCTYPE html> <html> <head> <title>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>Простое складывание</h2> <p>При нажатии на кнопку содержимое будет переключаться между отображением и скрытием.</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Простое складывание</button> <div id="demo" class="collapse"> Я молюсь за тебя, приношу тебе жертвы, Мы все имели случайные Erfahrungen в работе и жизни. У нас есть маленькая жизнь, В настоящее время я занимаюсь实习ом, который не подходит мне. </div> </div> </body> </html>Проверьте, посмотрите <‹/›>
Класс .collapse используется для указания элемента складывания (в примере <div>); После нажатия кнопки содержимое будет переключаться между скрытием и отображением.
Для управления скрытием и отображением содержимого необходимо добавить атрибут data-toggle="collapse" к элементам <a> или <button>. Атрибут data-target="#id" соответствует содержимому складывания (<div id="demo">).
Внимание: <a> На элементе вы можете использовать атрибут href вместо data-target Атрибуты:
<!DOCTYPE html> <html> <head> <title>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>Простое складывание</h2> <a href="#demo" class="btn btn-primary" data-toggle="collapse">Простое складывание</a> <div id="demo" class="collapse"> Я молюсь за тебя, приношу тебе жертвы, Мы все имели случайные Erfahrungen в работе и жизни. У нас есть маленькая жизнь, В настоящее время я занимаюсь实习ом, который не подходит мне. </div> </div> </body> </html>Проверьте, посмотрите <‹/›>
По умолчанию содержимое скрыто, вы можете добавить класс .show, чтобы содержимое было отображено по умолчанию:
<!DOCTYPE html> <html> <head> <title>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>Простое складывание</h2> <p>Вы можете добавить класс .show, чтобы содержимое было отображено по умолчанию:</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Простое складывание</button> <div id="demo" class="collapse show"> Я молюсь за тебя, приношу тебе жертвы, Мы все имели случайные Erfahrungen в работе и жизни. У нас есть маленькая жизнь, В настоящее время я занимаюсь实习ом, который не подходит мне. </div> </div> </body> </html>Проверьте, посмотрите <‹/›>
В следующем примере показано, как с помощью расширения компонента карты можно отобразить простую аккордеон.
Внимание: Используйте атрибут data-parent, чтобы убедиться, что все элементы складывания находятся в указанном родительском элементе, что позволяет скрывать другие элементы при отображении одного из них.
<!DOCTYPE html> <html> <head> <title>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>Пример аккордеона</h2> <p><strong>Внимание:</strong> Используйте атрибут <strong>data-parent</strong>, чтобы обеспечить, что все элементы сворачивания находятся в указанном родительском элементе, что позволяет скрывать другие элементы при отображении одного из них.</p> <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseOne"> Выбор один </a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion"> <div class="card-body"> #1 Содержание: Основной курс (oldtoolbag.com) -- Изучите основы, чтобы идти дальше!!! </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> Выбор два </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> #2 Содержание: Основной курс (oldtoolbag.com) -- Изучите основы, чтобы идти дальше!! </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree"> Вариант три </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> #3 Содержание: Основной курс (oldtoolbag.com) -- Изучите основы, чтобы идти дальше!! </div> </div> </div> </div> </div> </body> </html>Проверьте, посмотрите <‹/›>