Приветствую всех читателей текущей статьи. Сегодня мы разберем с вами очень полезный инструмент под названием Bootstrap Collapse. Если вы усвоите материал данной публикации, то с легкостью сможете реализовывать сложные конструкции блоков с раскрывающимися панелями и выводом дополнительной информации для пользователей.
Я расскажу, с помощью каких элементов можно создать подобные объекты, перечислю различные типы скрывающихся блоков и конечно же прикреплю примеры. Поехали!
Создание стандартного механизма Collapsible
Для начала вы должны понимать, что Bootstrap Collapse необходим для создания скрывающегося/раскрывающегося блока с большим количеством текста. Такой прием удобен при отображении текстового контента на смартфонах или других устройствах с небольшим разрешением экрана, для структурированной и компактной презентации информации по пунктам, главам и т.д.
Для того чтобы создать подобный элемент, в коде необходимо:
- Объявить триггер для кнопки или ссылки и указать в нем такие атрибуты, как:
- Создать слой с описанным выше идентификатором и классом .collapse.
data-toggle со значением “collapse”, который позволит показывать и скрывать информацию;
data-target с идентификатором, который будет присвоен создаваемому collapse-элементу для его связи с триггером. При использовании ссылки вместо кнопки данный атрибут можно опустить, а вместо него идентификатор прописать в href.
Для закрепления материала ознакомьтесь с ниже прикрепленным примером.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style="color:red;">Сегодня в ТРЦ "*****" проводится акция, по которой вы можете выиграть плазму!</h2>
<button type="button" class="btn-lg btn-danger" data-toggle="collapse" data-target="#demo">Подробнее</button>
<div id="demo" class="collapse">
Для участия Вам необходимо выполнить несколько условий...
</div>
</div>
</body>
</html> |
Своеобразная реализация списка
Как вы заметили, все делается достаточно просто. Поэтому усложним немного задачу и теперь попробуем создать разворачивающийся/сворачивающийся список или как еще про него говорят “раскладной”.
Для этого необходимо создать несколько вложенных слоев. Я перечислил их по порядку, начиная с верхнего:- .panel-group — определяет блок, в котором будет создаваться группа объектов раскладного перечня;
- .panel — создает саму оболочку вокруг всех пунктов и объединяет их в один элемент управления;
- .panel-heading — в нем располагается основная информация панели;
- А теперь на одном уровне нужно определить наименование самого списка, обрамив его в класс .panel-title. Здесь вы инициализируете триггер. А после стоит определить сами раскрывающиеся пункты, указав в блоке нужный идентификатор и классы .collapse и .panel-collapse.
- .panel-footer. “Подвал” можно создавать по желанию.
Ну а теперь перейдем к примеру.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel-group ">
<div class="panel panel-default ">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#MyColl">Бургеры</a>
</h4>
</div>
<div id="MyColl" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item list-group-item-success">Чизбургер</li>
<li class="list-group-item list-group-item-success">Гамбургер</li>
<li class="list-group-item list-group-item-success">Королевский</li>
</ul>
<div class="panel-footer">Приготовление длится около 10-15 минут. Приятного аппетита!</div>
</div>
</div>
</div>
</div>
</body>
</html> |
А вы знаете как создать аккордеон?
Ну а теперь я хочу рассказать вам о так называемом “Accordion”. Это очень полезная штука, которую можно часто встретить на информационных сайтах, чатах, обучающих сервисах и т.д.
Что же это такое? Представьте, что на странице вашего веб-сайта находятся вопросы по какой-либо теме для проверки знаний читателей. После прочтения каждого из вопросов они обдумывают ответ, а далее сверяют его с правильным, который предлагается на сервисе.
Для этого необходимо реализовать технологию, в которой изначально верные ответы будут скрыты. Вот такой механизм как раз и реализует Accordion.
Он основывается на предыдущем примере, однако в некоторых местах дополняется новыми атрибутами и блоками.
Для начала в верхнем слое стоит добавить id-шник с параметром “accordion”. А после в триггере прописать атрибут data-parent с названным значением идентификатора. Данный параметр гарантирует, что при открытии одного из объектов все остальные сворачиваемые элементы будут закрываться.
Вот как будет выглядеть код программы для трех таких объектов:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<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="#collapse1">Что нужно сделать при таких обстоятельствах?</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">При указанных обстоятельствах необходимо выпольтить следующее...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Какой параметр стоит указать при...?</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">При ... стои указать вот такой параметр.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">ДЛя реализации ... стоит использовать...?</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">В указанном случае это лучший вариант.</div>
</div>
</div>
</div>
</div>
</body>
</html> |
На этом я заканчиваю свою статью. Если вам понравился и был полезен изложенный материал, то подписывайтесь на обновления моего блога и читайте другие публикации. Буду благодарен, если вы поделитесь ссылкой на блог с друзьями. Пока-пока!
С уважением, Роман Чуешов
