Библиотека Twitter Bootstrap включает в себя набор виджетов и интерфейсов для веб-страниц. Среди этих свойств можно отметить виджет контента, разделенного по вкладкам, который отображается при помощи jQuery и позволяет переключаться между HTML div-элементами на странице. Эти файлы довольно просто использовать, и все, что от вас требуется, это внедрить небольшой javascript-код в страницу.
Хотелось бы продемонстрировать вам, как можно разработать собственную Bootstrap-страницу при помощи этих JS-вкладок. Вы без труда сможете пользоваться интерфейсом, и для работы с кодом также не понадобится специальных навыков. Веб-мастера, которые когда-то уже работали с 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.
Мне кажется, что Bootstrap представляет собой превосходный метод быстро и просто организовать собственный веб-сайт. Платформа представлена со множеством CSS-сбросов и стандартных стилей, а также заранее подготовленных javascript-компонентов. Тем не менее, Bootstrap вряд ли станет решением для всех проектов, поэтому учитывайте эту платформу только для некоторых типов собственных сайтов. Скачивайте копию нашего демо и, пожалуйста, расскажите нам, что вы думаете по поводу него в комментариях?
