Категория: HTML5.
Если вы до сих пор не использовали Bootstrap, или более того даже не слышали о нём, я бы порекомендовал повнимательнее присмотреться к этой базе. Дело в том что Bootstrap это действительно отличный выбор для тех кто ценит удобство и скорость разработки веб-сайтов. В этой статье я расскажу вам как создать адаптивный шаблон с Bootstrap 3, который будет включать в себя такие элементы как два навигационных меню, слайдер, промо-блок, различные элементы форм, нижний колонтитул. Ещё один важный момент, мы не будем использовать какие либо изображения, таким образом наш результат нацелен на скорость работы.
DEMO
Что означает «отзывчивость» в дизайне сайта?
Отзывчивый подход в веб-дизайне, это подход направленный на разработке сайтов для обеспечения оптимального просмотра, чтения, навигации с минимальным изменением размера, панорамирования и прокрутки в широком спектре устройств, от мобильных устройств до настольных компьютерных мониторов.
Сайт разработанный с использованием адаптивного веб-дизайна, адаптирует макет для корректного просмотра с помощью подвижной по пропорциям сетки, гибким изображениям, медиа-запросам CSS3.
Концепция подвижной сетки макета призывает элементы страницы к калибровки в относительных единицах как проценты, а не в абсолютных величинах, таких как пиксели или точки.
Гибкие изображения также измеряются в относительных единицах, чтобы предотвратить их отображения, вне содержащих их элементах.
Медиа-запросы позволяют на странице использовать разные правила стилей CSS, основываясь на характеристиках устройства.
Шаг-1 HTML
Прежде чем начать экспериментировать с Bootstarp Framework? Необходимо создать базовую модель HTML.
Адаптивный дизайн сайта с использованием BootStrap
В заголовке добавлены все необходимые Мета-теги и включены стили CSS, в конце перед закрывающим тегом body подключаются библиотеки jQuery, это ускоряет загрузку страницы.
Топ меню навигации.
Это меню находиться в самом верху, это фиксированная панель навигации.
Далее разметка.
Спойлер — Топ меню навигации
Toggle navigation
Bootstrap website
Слайдер.
Сразу после верхнего меню расположен слайдер, это обычно стандартное его расположение в веб-дизайне и содержит привычные элементы, это переключатели между слайдами, кнопки вперед-назад и сами слайды.
Lorem ipsum — 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.
Sed sed volutpat neque. Nulla posuere.
Button 1
Lorem ipsum — 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.
Sed sed volutpat neque. Nulla posuere.
Button 2
Lorem ipsum — 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.
Sed sed volutpat neque. Nulla posuere.
Button 3
Модальное окно.
Модальные являются довольно важной частью пользовательского интерфейса, поэтому мы создадим одно модальное окно:
×
Share it
Share it box content
Второе меню навигации.
Наконец мы подходим к главному — основной контейнер, который состоит из второго меню навигации, футера и блоков дополнительного контента. Второе меню не фиксированное, оно тоже на основе UL-LI, а самый правый элемент открывает модальное окно.
Спойлер — Второе меню навигации
Toggle navigation
Bootstrap website
Две колонки с блоками.
Это довольно большой раздел, но всё достаточно просто ведь блоки повторяются. Просто обращайте внимание на комментарии в коде.
Спойлер — Две колонки с блоками
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.
Sign up today
Panel 1 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.
Continue »
Panel 2 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.
Continue »
Panel 3 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.
Continue »
Panel 4 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.
Continue »
Link
Link
Link
Link
Link
Form elements
Email address
Type
1
2
3
4
5
30% Complete
Submit
Panel 6 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.
Continue »
В начале весь макет разделён на две колонки, далее первый столбец делиться ещё на две колонки. В перовой колонки есть элемент ‘jumbotron’ который вы можете использовать чтобы потренироваться и внедрить ваши настройки блока. Как я заметил раньше, все блоки похожи, вот стандартная разметка блока.
Panel 1 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.
Continue »
Что бы изменить внешний вид блока, вы можете менять название класса: panel-primary, panel-success, panel-info, panel-warning or panel-danger.
Нижний колонтитул.
Есть только один необъяснимый элемент – Нижний колонтитул
© Copyright 2015
Footer
Шаг-2 CSS
По большому счёту всё что мы создали, не требует специальных стилей. Большинство возможных элементов уже определенны в начальной загрузки стилевого файла. Однако есть только один элемент которому надо определить параметры, это слайдер.
.carousel {
height: 300px;
margin-bottom: 50px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
background-color: rgba(0, 0, 0, 0.8);
height: 300px;
}
На этом начальное знакомство BootStrap можно завершить, как вы видели нам нужно только подготовить необходимую разметку, всё остальное framework сделал сам! Замечательно, не правда ли!
В заключении:
В интерент магазине «ТВ-Снаб», вы можете приобрести качественные сетевые фильтры, удлинители, тройники для розеток, от ведущих производителей по доступным ценам.