Основы Bootstrap - Часть 2

Оригинал: Bootstrap Starter Template - Part 2
Автор: Bootstrap Tutor
Дата публикации: декабрь 2013 г.
Перевод: Семененко В.
Дата перевода: август 2013 г.

В предыдущих статьях рассказывалось, как выполнить основные настройки фреймворка Twitter Bootstrap для создания web-страницы. Для этой цели мы воспользовались шаблоном для Bootstrap под названием BootStrap starter template, устройство которого начали разбирать. Мы узнали, из чего состоит заголовок этого HTML-документа. В данной статье мы продолжим изучение шаблона и рассмотрим устройство тела документа body, а также узнаем, как подключать скрипты javascript, без которых фреймворк Twitter Bootstrap не будет работать полноценно.

Тело документа body

Тело HTML-документа body содержит внутри себя контент, который отображается в окне браузера. Если взглянуть на исходный код документа, который мы разрабатывали в предыдущих уроках, то можно заметить, что там содержится только слово Hello World. В этом уроке мы придадим нашей странице более профессиональный вид, добавив в нее навигационную панель с помощью класса navbar.

Более подробную информацию о классе navbar можно почитать здесь. Я же приведу код, который наиболее часто используется при создании навигационной панели на web-странице:

Обратите внимание на классы brand и nav, которые применены к ненумерованному списку ul внутри навигационной панели - блока с классом navbar. Ссылка с классом brand служит в шаблоне для размещения в ней логотипа сайта. В нашем случае мы изменим значение этой ссылки с "Title" на "My Site". Значения трех остальных ссылок изменим со старого: "Home" - "Link" - "Link" на "Home" - "About" - "Contact". Сейчас страниц, на которые ведут эти ссылки, не существует. Но не волнуйтесь, мы добавим их позже.

Также изменим фоновый цвет блока с классом navbar так, чтобы он выглядел темнее. Для этого добавим к этому классу, помимо класса navbar, еще один - navbar-inverse. Также, сделаем навигационную панель фиксированной - чтобы она располагалась всегда сверху страницы. Для этого к блоку с классами navbar и navbar-inverse добавим еще один, третий класс - navbar-fixed-top. В результате всех этих изменений код навигационной панели будет выглядеть следующим образом:

Делаем навигационную панель адаптивной

Для того чтобы сделать навигационную панель адаптивной и способной сворачиваться в кнопку при уменьшении окна браузера по ширине, необходимо обернуть всю панель в коде еще в один блок с двумя классами - nav-collapse и collapse. Вверху кода с панелью добавим код кнопки, которая будет появляться при уменьшении окна и в которую будет "превращаться" сама навигационная панель. Для этого создадим ссылку, которую с помощью класса btn преобразуем в кнопку и "навесим" на нее нашу панель с помощью класса btn-navbar. Помимо этого, привяжем к ней действия для javascript'а, добавив data-toggle="collapse" data-target=".nav-collapse".

Теперь при просмотре страницы с навигационной панелью в окне браузера на мониторе будет такая картина:

Навигационная панель Bootstrap

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

Адаптивный вид панели навигации>

Подключаем Javascript

Последней частью нашего урока будет подключение Javascript'а. Добавление строк с кодом выполняется в самом конце документа, сразу перед тегом </body> для того, чтобы страница загружалась быстрее. Для того чтобы скрипты заработали, необходимо изменить путь к ним со стандартного "../assets/" на "/".

Окончательно исправленный нами код будет выглядеть следующим образом:

Загляните на досуге

Счетчики

Рейтинг@Mail.ru

LiveInternet

Rambler's Top100