Bootstrap-одна из самых популярных фронтальных каркасов. Используя начальную загрузку в вашем проекте, вы можете быстро реализовать адаптивные веб -страницы.
Если вы попытаетесь использовать каменную кладку и компонент TAB одного из многих компонентов JavaScript, предоставленных Bootstrap, вы найдете много раздражающего поведения.
Я столкнулся с этой статьей, и эта статья посвящена тому, что это за вопрос и как вы хотите ее решить.
Вкладки Bootstrap's
Компонент вкладки Bootstrap включает в себя две ключевые точки: элемент навигации вкладок и некоторые панели контента. Когда страница загружается, первая панель применяет. Active Class. Сделайте эту панель видимой по умолчанию. Этот класс переключает видимость панели, используя JavaScript и запускает события через навигацию вкладок: если эта панель теперь имеет.
Если у вас есть какой -то веб -контент, который лучше в отдельных блоках, а не переполненным в одном месте, этот тип компонента вкладки может пригодиться.
Почему Марони?
В некоторых случаях содержание на каждой панели подходит для отображения в сфере адаптивной сетки. Например, ряд товаров, услуг и элементов папок - это типы контента, которые могут отображаться в формате сетки.
Однако, если сетки сетки не находятся на одной высоте, то произойдет что -то вроде того, что вы можете видеть ниже.
Две линии растянуты на каком -то большом расстоянии, что делает макет уродливой.
Это время для масонства, чтобы решить проблему. Добавьте несколько функций кладки в этот грязный макет, и затем ваш макет динамически адаптируется к фактической области экрана, устраняя пустые расстояния всех поврежденных макетов.
Настройка демо -страницы
Создание образца страницы, чтобы показать, как интегрировать вкладки Bootstrap's и кладку, не так просто, как ожидалось.
Демонстрационный случай в этой статье основан на начальном шаблоне, доступном на веб -сайте Bootstrap
Каждый проект сетки на панели TAB создан с использованием системы сетки Bootstrap и компонентов миниатюры. Вот фрагмент кода, чтобы объяснить его структуру:
<div> <div> <img src = "http://lorempixel.com/200/200/abstract"> <div> <h3> Thumbnail label </h3> <p> ... </p> <p> <a href = "#" Роль = "Кнопка"> Кнопка </a> <a href = "#" ROLE = "Кнопка"> Кнопка </a> </p> </div> </div> <!-Повторите еще два раза ...->
Приведенный выше код создает сетку с тремя столбцами на большом экране и двумя столбцами на маленьком экране. Если вам нужно рассмотреть систему Bootstrap's Grid, понимание Syed Fazle Rahman System Bootstrap является хорошей статьей.
Компоненты вкладок на странице примеров имеют следующую структуру HTML:
<div rol = "tabpanel"> <!-Tabs Nav-> <ul rol = "tableist"> <li role = "presentation"> <a href = "#panel-1" Aria-controls = "panel-1" ROLE = "Tab" Data-toggle = "Tab"> Панель 1 </a> </li> <li role = "> <a href ="##panel-2-a panetr-2 ROLE = "Tab" Data-toggle = "Tab"> Панель 2 </a> </li> <li role = "Presentation"> <a href = "#panel-3" Aria-controls = "panel-3" role = "tab" data-toggle = "tab"> панель 3 </a> </li> <li role = "> <a href ="#panel-4 "ar-control" = panel-control "ar-panets" href = ". rol = "tab" data-toggle = "tab"> панель 4 </a> </li> </ul> <!-панели вкладок-> <div> <div rol = "tabpanel" id = "panel-1"> <div> <div> <!- -> </div> <div> <!-Миниатюра идет сюда-> </div> ... </div> <!-Конец масонства-container-> </div> <!-End Panel-1-> <div role = "tabpanel" id = "Панель-2"> <!-То же, что и в The Panel-1-> </div> <!-End Panel-2-> </div> <! Табпанель ->
Вот несколько заметок о приведенном выше фрагменте кода:
Комментарии HTML указывают на ключевые компоненты вкладки: NAV отмечает раздел навигации вкладки, а панели NAV отмечают панель содержимого.
Ссылки на вкладки подключены к панели содержимого с тем же значением соответствующего атрибута ID через их атрибут HREF. Например, ссылка с href = "#panel-1" открывает панель содержимого с id = panel-1.
Каждый якорный тег в разделе «Навигация» содержит Data-toggle = "Tab". Этот тег позволяет компоненту вкладки работать, не написав никакого дополнительного JavaScript.
Целевой элемент Masonry должен иметь класс .masonry-Container, который подходит для элементов Div обертки, содержащих все элементы сетки, а также необходимо применять к классу .item для каждого элемента отдельной сети.
Чтобы увидеть полную мощность библиотеки кладки, убедитесь, что предметы сетки имеют разные высоты. Например, удаление изображения одного проекта, сокращения абзацев другого проекта и т. Д.
Для получения полного кода, пожалуйста, проверьте код для примера в Codepen.
Добавление библиотеки каменной кладки
Вы можете скачать masonry.pkgd.min.js, нажав кнопку «Скачать» на официальном сайте Masonry.
Чтобы избежать проблем с макетом, автор библиотеки рекомендует использовать кладку с плагином, загруженным изображениями.
Масонство не требует jQuery. Но поскольку компонент Javascript от Bootstrap уже использует jQuery, инициализируя каменную кладку, я сделаю свою собственную жизнь лучше.
Это фрагмент кода, который нам нужно для инициализации кладки с помощью jQuery и загруженных изображений.
var $ container = $ ('. Masonry-Container'); $ container.imagesloaded (function () {$ container.masonry ({columnwidth: '.item', itemselector: '.item'});});Приведенный выше код хранит Div, который завершает все элементы сетки в переменную, называемую $ incecuter.
Далее, масонство инициализирует его с двумя рекомендуемыми вариантами в $ necuter. Параметр «Включитель» указывает ширину столбца горизонтальной сетки. Здесь ширина одного элемента сетки устанавливается с помощью имени класса одного элемента сетки. Опция Itemeselector указывает, какой дочерний элемент используется в качестве элемента проекта. Здесь он также установлен как единая сетка.
Теперь пришло время проверить код.
Уп! Что не так с скрытой панелью?
На веб -странице, которая не использует вкладку Bootstrap, приведенный выше код похож на Magic. Однако в этом случае вы скоро найдете интересное поведение.
Во -первых, это выглядит хорошо, потому что сетка внутри панели вкладок, отображаемой по умолчанию, отображается правильно:
Однако, если вы нажмете на ссылку навигации вкладок, чтобы отобразить содержимое скрытой панели, произойдет следующее:
Глядя на исходный код, каменная кладка запускается, как и ожидалось, но положение каждого предмета не рассчитывается правильно: предметы сетки сложены вместе, как колода карт.
Это еще не все. Изменение размера окна браузера позволит этим элементам сетки правильно позиционировать себя.
Давайте решим эту ошибку макета
Поскольку эта неожиданная ошибка макета становится более очевидной после нажатия на навигационную ссылку на вкладку, давайте более внимательно посмотрим события, запускаемые вкладкой Bootstrap.
Список событий очень короткий. следующее.
show.bs.tab запускает страницу вкладок, но перед отображением новой вкладки отображается страница
shod.bs.tab запускает страницу вкладок для отображения после отображения страницы вкладки
Hide.bs.tab триггеры, когда будет отображаться новая вкладка (так что предыдущая отображаемая вкладка будет скрыта)
hidden.bs.tab запускается после отображения новой вкладки (поэтому скрыта предыдущая отображаемая вкладка)
Поскольку макет сетки испорчен после отображения вкладок, мы перейдем к событию Show.bs.tab. Мы размещаем здесь код ниже нашего исходного кода:
$ ('a [data-toggle = tab]'). Каждый (function () {var $ this = $ (this); $ this.on ('show.bs.tab', function () {$ container.imagesloaded (function () {$ container.masonry ({colubswidth: '.item', itemselector: '.item'});Что происходит в приведенном выше коде:
Функция jQuery. Когда это событие запускается, соответствующая панель становится видимой, а каменная кладка повторно инициализирует все изображения после загрузки.
Давайте протестируем код
Если вы продолжаете следить за статьей, запустите образец страницы непосредственно в своем браузере или попробуйте пример CodePen ниже, чтобы увидеть результаты.
Вы также можете взглянуть на полную страницу, чтобы проверить эффект отзывчивого макета.
Нажмите на навигационную ссылку вкладки и обратите внимание на то, как элементы сетки равномерно в каждой панели поместятся на каждой панели. Изменение размера браузера приведет к правильному изменению проекта сетки и будет иметь хороший эффект анимации.
Вот и все, задача завершена!
в заключение
В этом посте я показал, как интегрировать вкладки Bootstrap's и библиотеки Javascript.
Оба сценария просты в использовании и очень мощные. Однако, собрав их обоих, вы столкнетесь с некоторыми уязвимостью макета, которые влияют на скрытые вкладки. Как показано выше, хитрость заключается в том, чтобы повторно инициализировать библиотеку кладки после того, как каждая панель становится видимой.