Верстка сайта на Bootstrap: пример создания шаблона
От автора: я приветствую вас. В прошлых статьях мы рассмотрели подключение и компоненты фреймворка Bootstrap, а также его сетку. Настало время подытожить наши знания и сверстать какой-нибудь простой сайт. Соответственно, сегодня вы увидите, как выглядит на Bootstrap верстка сайта, пусть и схематично, а не из PSD-макета. Но сначала еще раз повторим, чем отличается верстка на бутстрапе от стандартной верстки с помощью CSS.
Верстка с помощью фреймворка: преимущества
Bootstrap, как и любой другой фреймворк, значительно упрощает процесс верстки веб-страниц. Это css и js-фреймворк, то есть в нем есть как готовые стили, так и веб-сценарии. Эти готовые компоненты ускоряют верстку в 3-10 раз, потому что вам достаточно практически прописать нужные классы и data-атрибуты для активации этих стилей и сценариев.
Самое главное преимущество – это, несомненно, заложенная в фреймворк адаптивная сетка. Вы не будете беспокоиться о том, какие размеры задать блокам, как сделать так, чтобы при изменении ширины окна они сжимались или пропадали с экрана. Конечно, для опытного верстальщика все это не кажется проблемами, но вы должны согласиться с тем, что даже если вы знаете, как решить проблему, это не значит, что вы сможете это быстро сделать.
Например, при использовании медиа-запросов может потребоваться учесть кучу нюансов, чтобы ваш сайт не “поплыл”. С помощью бутстрапа же верстка изначально будет очень аккуратной, потому что вы вообще не будете трогать css, а если и будете, то только для изменения внешнего вида элементов, что никак не сломает сайт.
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнееВторое, очень важное преимущество – открытый исходный код Bootstrap. Вы полностью осознаете, насколько это важное преимущество уже после того, как создадите с помощью фреймворка свои первые сайты.
По умолчанию вы скачиваете полную версию фреймворка – файлы bootstrap.css, bootstrap.js, а также иконочный шрифт. Но никто не мешает вам самим выбирать, какие компоненты фреймворка включить в собственную сборку, а какие нет. Вы даже можете отключить вообще все компоненты и оставить, например, только сетку, табы и карусель. И тогда вы значительно уменьшаете размер файлов и подключаете к проекту только что, что будет на нем использоваться.
Это профессиональный подход к использованию bootstrap. На деле большинство css-стилей, описанных в нем, вам просто может не понадобиться. Например, для кнопок, таблиц, картинок и т.д. вы сами можете описать какие-то стили. По сути, по-настоящему ценным в фреймворке Bootstrap является сетка, а также некоторые javascript-компоненты.
Как создать простой схематичный сайт на bootstrap
На деле вы можете создавать шаблоны-схемы буквально за пару минут, когда хорошо потренируетесь работать с фреймворком. Давайте создадим типичный простой двухколоночный макет, в котором будет шапка, блок контента, боковая колонка и футер.
Для начала необходимо определиться с тем, будет ли контейнер сайта иметь фиксированные размеры, либо же будет полностью резиновым. В случае, если обшему контейнеру вы зададите класс container, его максимальная ширина будет ограничена 1170 пикселями. Если же вы укажете container-fluid, ширину сайта ничто не будет ограничивать. Например, на мониторах шириной 1920 пикселей его ширина будет такой же – на все 100% окна.
Соответственно, этот момент вы должны решить для себя еще на этапе дизайна сайта, чтобы понимать, нужна ли хоть какая-то привязка к пикселям или нет.
Отлично, в нашем шаблоне будет три ряда – это шапка, контент + сайдбар и футер. В общем-то, это стандартный вид простых двухколоночных сайтов. Давайте посмотрим на разметку:
<div class = «container-fluid»> <div class = «row»> <div class = «col-md-12»> <h2>Шапка</h2> </div> </div>
<div class = «container-fluid»> <div class = «row»> <div class = «col-md-12»> <h2>Шапка</h2> </div> </div> |
Шапку в принципе даже необязательно помещать в сетку, но для порядка мы все-таки это сделаем. Никаких логотипов и меню мы в нее вставлять не будем, так как у нас чисто схематичный шаблон. Далее идет сайдбар и контент. Соответственно, это новый ряд.
Разместим блок с контентом выше по разметке, чтобы при сворачивании блоков на мобильных устройствах он был выше, чем боковая колонка. Сайдбар разместим сразу за контентом. Возможно, вам и не придется ничего менять, если по дизайну боковая колонка будет справа. Однако иногда ее нужно поставить влево, вот тут и приходят на помощь дополнительные классы push и pull, которые позволяют двигать колонки в ряде вправо-влево, изменяя их положение.
Общая формула для смещения влево сайдбара проста: сдвинуть саму боковую колонку влево на ширину контент, а контент – вправо на ширину сайдбара. Но для начала нужно естественно решить, каковой будет эта ширина. Пусть у нас основной блок будет занимать 75% ширины, а боковая колонка 25%. Тогда нам нужен такой код:
<div class = «col-md-9 col-md-push-3»></div> <div class = «col-md-3 col-md-pull-9»></div>
<div class = «col-md-9 col-md-push-3»></div> <div class = «col-md-3 col-md-pull-9»></div> |
Естественно, вложите это в один ряд.
Создаем сайдбар
В боковой колонке разместим вертикальное меню. Для этого вы можете посмотреть в документации, какие есть классы для стилизации списков. Кликайте на “компоненты” – “группы списков”.
<div class = «col-md-3 col-md-pull-9»> <h3>Сайдбар</h3> <ul> <li>Автосалоны <span>19</span> </li> <li>Автомастерские <span>178</span> </li> <li>Ремонт </li> <li>Объявления </li> </ul> </div>
<div class = «col-md-3 col-md-pull-9»> <h3>Сайдбар</h3> <ul> <li>Автосалоны <span>19</span> </li> <li>Автомастерские <span>178</span> </li> <li>Ремонт </li> <li>Объявления </li> </ul> </div> |
Вот такое получилось меню, со значками:
Конечно, его можно сделать намного красивее, но мы верстаем просто шаблон для примера. Да и меню у меня получилось без ссылок, но все равно не на что ссылаться, так что опустим этот момент.
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнееНа этом с сайдбаром закончим. Конечно, на реальном сайте в нем могло бы быть много чего другого. Например, рекламные баннеры. Сейчас мы будем работать с контентным блоком и там я покажу вам, как работать с изображениями в Bootstrap, так что вы без проблем сможете вставить в боковую колонку баннеры.
Создаем блок контента
Контент, как мы помним, должен в нашем случае стоять выше по разметке, так что следующий код вставляйте над сайдбаром. Оба этих блока помещаются в один ряд. Вот такой код я вставил пока в свой контент:
<div class = «col-md-9 col-md-push-3»> <h3>Content</h3> <div class = «row»> <div class = «col-sm-4»> <div class = «panel»> <h5>Header</h5> <img src = «auto1.jpg» class = «img-responsive»> <p>Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggf fdhfdhfdhfd fdhfdhfdhfdhffd hfdhfdhfdhfd hdfhfdhfdhf hfdhfd fdhfdhfdhdf fdhfdhfdhhfd hfdhd</p> </div> </div>
<div class = «col-md-9 col-md-push-3»> <h3>Content</h3> <div class = «row»> <div class = «col-sm-4»> <div class = «panel»> <h5>Header</h5> <img src = «auto1.jpg» class = «img-responsive»> <p>Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggf fdhfdhfdhfd fdhfdhfdhfdhffd hfdhfdhfdhfd hdfhfdhfdhf hfdhfd fdhfdhfdhdf fdhfdhfdhhfd hfdhd</p> </div> </div> |
Как видите, здесь мы применяем систему вложенной сетки. По задумке в контенте 3 анонса статей должно располагаться в ряд. Чтобы этого легко добиться, мы будем принимать блок col-md-9 col-md-push-3, то есть блок контента, за контейнер для сетки. В таком случае мы создаем в нем ряд, где, в свою очередь, нам вновь становится доступна 12-ти колоночная сетка. Классом col-sm-4 мы даем одному анонсу статьи ширину ровно 33,33%. Таким образом, в одну строку в контенте идеально поместятся 3 анонса. Просто скопируйте и вставьте этот блок еще 2 раза, чтобы проверить, как они отобразятся.
Вот так отображаются наши блоки с анонсами статей:
Идеально ровно. Вообще без каких-либо вопросов. В 3 колонки анонсы будут располагаться на всех устройствах, кроме самых маленьких, где все будет в одну колонку.
Я надеюсь, этот пример вам понятен. Теперь предлагаю разобрать чуть более нестандартный пример. Создадим в контенте еще один ряд. На этот раз задумка такова – отобразить в ряде одну статью и слайдер, между ними сделать небольшой отступ. Допустим, статья будет слева, а слайдер – справа. Между ними небольшой зазор + все это, естественно, должно быть адаптивным.
Код анонса статьи вы можете просто скопировать и вставить в наш новый ряд. Нам остается сделать слайдер. Собственно, я не буду здесь приводить его код, потому что он очень громоздкий. Перейдите на официальный сайт Бутстрапа или на русскоязычную версию, перейдите в раздел Javascript и ищите там Карусель (Carousel).
Просмотрите пример, приведенный в документации. Вы должны в нем разобраться, ничего сложного там нет. По сути, для того, чтобы слайдер начал работать, необходимо всего лишь взять свои изображения и прописать путь к ним в атрибутах src для тегов image.
Дело не в том, как вам сделать сам слайдер – эту информацию можно без проблем найти в документации. А наша задача сейчас – понять, в блок каких размеров нужно обернуть слайдер. У нас в ряде свободно еще 8 ячеек, но поскольку между анонсом статьи и слайдером должен быть небольшой отступ, я оберну слайдер вот в такой блок:
<div class = «col-sm-7 col-sm-offset-1»>
<div class = «col-sm-7 col-sm-offset-1»> |
То есть сам слайдер получает ширину в 7 колонок на больших, средних и маленьких устройствах, а также отступ в одну колонку, тоже на всех этих устройствах. Итог:
Вот теперь у нас в одной строке анонс статьи и слайдер, а ниже еще 3 анонса, и все это располагается в блоке контента.
Так, ну футер я, пожалуй, вообще не буду создавать, потому что вы и сами теперь можете понять, как его создать. По такому же принципу, что и шапку. Эти элементы нас не особо интересуют сегодня, потому что мы работали с боковой колонкой и особенно с основным блоком.
Если вы повторяли все за мной, только изображения использовали свои, то вынуждены будете признать, что у нас получилась достаточно ровная верстка (если не учитывать ужасный внешний вид блоков, но нам некогда сейчас их поправлять). Попытаюсь, “сфотографировать” весь сайт:
Никаких горизонтальных скроллов не образуется, сайт удобно просматривать на любых разрешениях экранов, ничего не сползает, ничего не вываливается и т.д.
Конечно, если бы мы верстали не схематично, а из PSD-макета, то получилось бы намного красивее, но по крайней мере верстка не разваливается и шаблон полностью адаптивен, а потратили мы своего времени на его создание очень мало. Только представьте, сколько бы вам пришлось писать css-кода, чтобы создать стили для слайдера и выровнять в одну строку блоки, расставить отступы и т.д. Конечно, опытный верстальщик все это сделает достаточно быстро, но его даже менее опытный коллега с помощью Bootstrap управится быстрее.
Готовы ли вы?
Что ж, мы рассмотрели, как выглядит верстка на Bootstrap 3. Ну а теперь скажите мне одну простую вещь? Вы хотите изучить фреймворк Bootstrap в следующие 5-10 дней на профессиональном уровне и начать создавать адаптивные шаблоны любого уровня сложности?
Все эти разговоры о Bootstrap, что на нем нельзя создать по-настоящему оригинальный и уникальный дизайн, все это неправда. Почему? Ну а что вам мешает кастомизировать фреймворк, оставив от него только сетку и пару самых полезных компонентов? И вы ничем не будете ограничены в написании стилей для любых элементов на веб-странице, но при этом не будете думать о том, как же заставить все это хорошо отображаться на любых экранах, потому что этот вопрос за вас решает фреймворк.
В общем, приглашаю вас пройти наше первоклассное обучение по фреймворку Bootstrap с нуля. Да-да, даже если из этой статьи вы ничего не поняли. В рунете я не видел других курсов по Bootstrap, даже если они есть, едва ли в них верстается 2 шаблона профессионального уровня + лендинг пейж в качестве бонуса.
Что ж, на этом я оставляю вас в раздумьях и надеюсь, что вы не упустите свой шанс освоить Bootstrap и уже в ближайшее время полностью отбить цену за курс, потому что с этим фреймворком вы сможете делать в 2-3 раза больше сайтов за то же время, а значит, зарабатывать больше денег. Думаю, что такая перспектива вам нравится.
Сегодня же мы сверстали схематичный макет, который, однако по своей структуре был далеко не самым-самым простым. Как видите, Bootstrap серьезно упростил нам задачу. Я прощаюсь с вами и желаю разрабатывать сайты максимально быстро и просто. Ах да, и адаптивно тоже.
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнее
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!
Смотреть6 бесплатных конструкторов сайтов на Bootstrap / Полезное в сети / Постовой
Лично я считаю Bootstrap выдающимся фреймворком. Я использовал его в подавляющем большинстве своих проектов, потому что:
- он стабильный и проверенный временем
- имеет большое сообщество пользователей и множество плагинов от сторонних разработчиков
- содержит LESS файлы для быстрого включения/отключения различных элементов
- имеет мощную систему разметки с плавающей либо фиксированной шириной столбцов
- содержит компоненты и java-скрипты практически для всех задач, с которыми приходится сталкиваться разработчику
- В общем, используя этот фрэймворк, Вы сэкономите уйму времени и сил.
А если, при этом, у Вас нет желания заниматься нудным кодированием, то этот пост как раз для Вас. Потому что далее я познакомлю Вас с некоторыми Bootstrap-конструкторами, которые позволяют создать стильный и современный сайт, не углубляясь в «синтаксические дебри». И самое главное — все эти инструменты совершенно бесплатны.
Mobirise Bootstrap Builder
Основная задача Mobirise — кардинально сократить время разработки сайта, используя технологию drag-and-drop. Просто выбираете из списка нужный блок — меню, заголовки, таблицы, кнопки соцсетей, карты и многое другое — и перетаскиваете их на страницу. Все блоки идеально взаимодействуют между собой, так что в результате Вы получаете профессионально сверстанный сайт. При этом сохраняется возможность доработать любой элемент в соответствии с концепцией и цветовым стилем Вашего сайта.Следуя основной задаче, Mobirise заботится еще и о публикации Вашего сайта. Он позволяет легко разместить сайт как на локальном диске или FTP, так и на популярных хостингах: Amazon S3, Google Drive, Github.
Подведем итог: Mobirise — мощный и дружественный к разработчику конструктор, позволяющий за короткое время создать модный и современный сайт с адаптивным интерфейсом.
Script Den Bootstrap Builder
Script Den Bootstrap Builder очень похож на Mobirise. Имеется набор готовых элементов интерфейса, элементы которого можно перетащить на страницу и получить готовый макет сайта.
Pikock Bootstrap Magic
Pikock не является полноценным конструктором сайтов. Это редактор тем Bootstrap. С его помощью можно изменить цвет или шрифт любого элемента, редактировать значение любой переменной Bootstrap и сохранить сделанные настройки в виде собственной темы.
Layout It
Layout It представляет собой, по существу, инструмент для быстрого прототипирования. Он предоставляет разработчику возможность быстро создать макет и разместить основные элементы при помощи простых операций drag-and-drop. Однако, возможность точных настроек и изменения цветовых схем отсутствует.
Bootply
Bootply это своего рода «песочница» для разработчиков, использующих Bootstrap. Он является не только редактором и конструктором сайтов, но и включает в себя репозиторий кода различных расширений. Предоставляет возможность «набросать» интерфейс, перетащив мышкой стандартные компоненты, а затем доработать код под свои нужды.
Shoelace
На самом деле это не совсем конструктор сайтов, но это инструмент, который стоит упомянуть. Shoelace — это генератор сетки Bootstrap. Он очень прост в использовании и позволяет увидеть, как будет выглядеть конечный результат на экране смартфона, планшета или настольного компьютера.Смотрите также:
Генераторы модульных сеток PSD и CSS
Примеры. Документация · Bootstrap. Версия v4.0.0
Пользовательские компоненты
Новые компоненты и шаблоны для быстрого начала работы с Bootstrap с продемонстрацией лучших практик для добавления в фреймворк.
Альбом
Простой одностраничный шаблон для фотогалереи, портфолио и многого другого.
Прайслист
Пример страницы с ценой, созданной с помощью карт, с пользовательским верхнего и нижнего колонтитула.
Checkout
Пользовательская форма заказа, показывающая компоненты формы и функции проверки.
Продукт
Ориентированная на продукт продвигающая маркетинговая страница с обширной сеткой и изображениями.
Обложка
Одностраничный шаблон для создания простых и красивых домашних страниц.
Слайдер
Навигационная панель, карусель и новые компоненты.
Блог
Двухколоночный макет блога с пользовательской навигацией, заголовком и содержанием.
Прижатый футер
Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое.
Прижатый футер с меню
Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое. Панель навигации в верхней части.
Фреймворк
Примеры, которые направлены на внедрение использования встроенных компонентов, предоставляемых Bootstrap.
Разметка
Несколько примеров макетов сетки с различными уровнями вложенности.
Jumbotron
Макет jumbotron с навигационной панели и базовая система разметки.
Использование компонента navbar по умолчанию и отображение способа его перемещения, размещения и расширения.
Статическое меню
Супер базовый шаблон со статической навигационной панелью и дополнительным контентом.
Фиксированное меню
Супер базовый шаблон с фиксированной верхней навигационной панелью и дополнительным контентом.
Эксперименты
Примеры, которые ориентированы на будущие функции или методы.
Скользящее меню
Превратите расширяемую навигационную панель в скользящем меню.
Сайт на Bootstrap за 45 минут
Создание сайта на Bootstrap за 45 минут ⚡ Обучение основ верстки на Бутстрапе ⚡ Видео уроки верстки на Bootstrap для начинающих на itProger
Как создать сайт на Bootstrap 4? В видео мы с вами создадим полноценный адаптивный сайт на Bootstrap всего за 45 минут. Верстка сайта дело несложное, поэтому вы научитесь делать отличные сайты всего за 45 минут!
Исходный код
Файл index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap сайт</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>
<div>
<div>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span></span>
<span></span>
<span></span>
</button>
<a href="#">PR<i></i>GER</a>
</div>
<div>
<ul>
<li><a href="#">Домой</a></li>
<li><a href="#">Про нас</a></li>
<li><a href="#">Сервсиы</a></li>
<li><a href="#">Работы</a></li>
<li><a href="#"><i aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<h2>Bootstrap is awesome!</h2>
<h3>Сайты на Bootstrap отличные</h3>
</div>
</div>
</div>
</div>
<div>
<div>
<br><br>
<div>
<i></i>
<h5>Дизайн</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div>
<i></i>
<h5>Компьютеры</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div>
<i></i>
<h5>Помощь</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
<br><br>
</div>
<div>
<div>
<div>
<h5>Последние работы</h5>
<br>
<div>
<div>
<a href="#"><img src="img/p01.png" alt=""></a>
</div>
</div>
<div>
<div>
<a href="#"><img src="img/p02.png" alt=""></a>
</div>
</div>
<div>
<div>
<a href="#"><img src="img/p03.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<br><br>
<div>
<h5>Мы создаем сайты</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p><br><br></p>
</div>
<div></div>
<div>
<img src="img/munter.png" alt="">
</div>
</div>
</div>
<div>
<div>
<div>
<h5>Партнеры</h5>
<div>
<img src="img/c01.gif" alt="">
</div>
<div>
<img src="img/c02.gif" alt="">
</div>
<div>
<img src="img/c03.gif" alt="">
</div>
<div>
<img src="img/c04.gif" alt="">
</div>
<div>
<img src="img/c05.gif" alt="">
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<h5>Разарботка сайтов на профессиональном уровне</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<a href="#"><i></i></a>
<a href="#"><i></i></a>
<a href="#"><i></i></a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>Посмотреть остальной код можно после подписки на проект!