—»     —»   Как расположить контент во вкладках при помощи Twitter Bootstrap
  Раздел: Руководства   Комментариев: 1  

Как расположить контент во вкладках при помощи Twitter Bootstrap



Библиотека Twitter Bootstrap включает в себя набор виджетов и интерфейсов для веб-страниц. Среди этих свойств можно отметить виджет контента, разделенного по вкладкам, который отображается при помощи jQuery и позволяет переключаться между HTML div-элементами на странице. Эти файлы довольно просто использовать, и все, что от вас требуется, это внедрить небольшой javascript-код в страницу.

Хотелось бы продемонстрировать вам, как можно разработать собственную Bootstrap-страницу при помощи этих JS-вкладок. Вы без труда сможете пользоваться интерфейсом, и для работы с кодом также не понадобится специальных навыков. Веб-мастера, которые когда-то уже работали с Bootstrap, будут удивлены столь простым принципом использования. Возможно, на первый взгляд, вся система покажется немного запутанной, но как только вы посвятите немного времени практике, вы поймете, насколько просто здесь все устроено. Взгляните на пример на демо-странице, чтобы понять, над чем мы сегодня будем работать.

Как расположить контент во вкладках при помощи Twitter Bootstrap

Посмотреть демо | Скачать исходный код

Стандартный контент страницы

Есть несколько файлов, которые нам нужно внедрить в страницу с самого начала. На посадочной странице Twitter Bootstrap есть большая кнопка для скачивания, которая позволит вам получить самые актуальные ресурсы с GitHub. Мы предпочитаем использовать всю библиотеку, вместо определенных JS-файлов, потому что так у нас будет доступ ко всему функционалу.

Это означает, что мы не будем ограничены использованием вкладок, но также сможем внедрить и другие компоненты посредством Bootstrap. Кроме оптимизированных CSS/JS-файлов, нам также понадобится копия jQuery, отдельный js-файл для собственного скрипта, а также собственный CSS-файл. Шапка нашего документа выглядит следующим образом:

<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Tabbed Content using Bootstrap</title>
<meta name="author" content="">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" charset="utf-8" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/customtabs.js"></script>
</head>

Все эти файлы размещены локально, поэтому нам не понадобится подключение к интернету при тестировании. Следующий крупный фрагмент HTML-кода включает в себя внедрение навигации со вкладками от bootstrap, а также div-элементы для контента. Все они имеют собственные ID-атрибуты, которые соответствуют значению href у анкоров. Взгляните на код для наших двух первых блоков контента:

<ul class="nav nav-tabs">
<li class="active"><a href="#hello" data-toggle="tab">Hello</a></li>
<li><a href="#empty" data-toggle="tab">Empty</a></li>
<li><a href="#templates" data-toggle="tab">Templates</a></li>
<li><a href="#bluths" data-toggle="tab">Bluths</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="hello">
<h3>Hello my Friend!</h3>
<p>This is what a basic Bootstrap interface can look like. We have setup all the custom HTML based on <a href="http://twitter.github.io/bootstrap/javascript.html#tabs">the JS documentation</a>. Skim the content and you can surely pick up your own methods.</p>
<p class="text-center"><a href="http://twitter.github.io/bootstrap/"><img src="images/bootstrap-homepage.jpg" alt="bootstrap website layout interface"></a></p>
</div>
<!-- @end #hello -->
<div class="tab-pane" id="empty">
<h3>Just gonna be empty...</h3>
<p>Yup. Nothin' here.</p>
</div>
<!-- @end #empty -->

Этот код включает навигационное меню и разделения для контента. Нам нужно воспользоваться ненумерованным списком для стилей вкладок, основанных на базе стандартного CSS в Bootstrap. Здесь можно видеть все необходимое для стилизации и организации ссылок вкладок, поэтому они отлично выглядят с самого начала. Используя атрибут class=”active”, мы можем оформить основную вкладку, которая отображается прямо при событии pageload.

Активный div также будет оформлен классом .active, примененным к основному элементу. Это позволит сделать так, что внутреннее содержимое и вкладка navbar будут отображаться так, будто это элемент, выбранный по умолчанию. Еще один важный атрибут, который здесь следует учитывать, это data-toggle=”tab”, который можно видеть возле каждой анкорной ссылки. Bootstrap должен знать, какие ссылки должны быть отображены как вкладки, и такой подход при помощи HTML5 является самым наипростейшим.

Переходим к стилизации

Нам не обязательно знать все о стилях. Bootstrap представлен с огромной коллекцией сбросов и стандартных дизайнов шаблона. Следовательно, весь контент, разделенный по вкладкам будет выглядеть превосходно, если следовать инструкциям, представленным на сайте. Но нам следует взглянуть на то, что находится в style.css.

html { height: 102%; /* always keep a scrollbar */ }

body { padding-top: 45px; padding-bottom: 65px; background: #d1d6d9; }

.container { background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 8px 12px; }

ul.nav { margin-bottom: 0 !important; }

При переключении между вкладками, будут случаи, когда строка прокрутки будет пропадать ввиду того, что в некоторых вкладках будет представлено меньше контента. Это приводит к небольшому смещению всего сайта. Намеренно использовав 102% для HTML-элемента, мы можем сделать так, чтобы строка прокрутки отображалась всегда, помогая избежать этого неприятного поведения рендеринга.

Также следует отметить, что стандартный контейнер Bootstrap – это всего лишь внешний элемент для центрирования тела документа. Мы добавили белый фон и закругленные углы для более опрятного эффекта. Само навигационное меню представлено с большим полем в самом низу. Это вынуждает смещать весь контент вниз, что выглядит довольно странно. Все что мы сделали здесь, это применили отметку !important, которая принудительно сохраняет нижнее поле с нулевым значением. Все это незначительные фиксы, которые, тем не менее, важны для любого веб-сайта на Bootstrap.

Активируем вкладки

Если вы дошли до этого пункта, то вам наверняка понравилось это руководство. Осталось не так много до того момента, когда все заработает. Все, что нам нужно сделать, это запустить небольшую jQuery-функцию. Все это приведено в основной документации к Bootstrap, но мы надеемся, что вы все очень быстро схватите.

$(function{
$('#myTab a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
});

Определение всех анкорных ссылок в списке #myTab принуждает jQuery улавливать все клики по вкладке. Сначала мы не даем стандартному значению href загрузить в URL новый хэш, а затем запускаем .tab(СshowТ), что представляет собой внутреннюю функцию. Здесь будет использоваться js-скрипт из Bootstrap для переключения между вкладками, а также будет происходить перемещение классов .active на соответствующие элементы.

Вы можете поместить этот javascript в самый низ вашего HTML-кода, чтобы сохранить HTTP-запросы. Мы думаем, что у вас будут и другие js-коды, которые нужно будет использовать на сайте, и возможно, лучше будет хранить их все в одном и том же файле. Но данное руководство является отличной демонстрацией того, насколько просто работать с Twitter Bootstrap.

Как расположить контент во вкладках при помощи Twitter Bootstrap

Подытожим

Нам кажется, что Bootstrap представляет собой превосходный метод быстро и просто организовать собственный веб-сайт. Платформа представлена со множеством CSS-сбросов и стандартных стилей, а также заранее подготовленных javascript-компонентов. Тем не менее, Bootstrap вряд ли станет решением для всех проектов, поэтому учитывайте эту платформу только для некоторых типов собственных сайтов. Скачивайте копию нашего демо и, пожалуйста, расскажите нам, что вы думаете по поводу него в комментариях?
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Twitter Bootstrap
Опубликовал Design FactoRy   Прочитано (раз): 8708   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 8 октября 2015 @ 09:09
Написал: Иван — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Такой вопрос, решил с помощью вкладок организовать так сказать просмотр видео, но столкнулся с проблемой, при открытии одной вкладки и просмотра видео на ней, если видео не остановить, то оно будет проигрывать до конца, в то же время можно переключиться на контент другой вкладки и там смотреть видео. В итоге видео в каждой вкладке будет накладываться друг на друга и будет полный хаос. Есть ли возможность как то организовать процесс перехода с одной вкладки на другую, чтобы при этом в неактивной вкладке видео останавливалось. Ну вы поняли вопрос я думаю, жду ответа
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930