Содержание:
Создание сайта визитки (Часть 1)
На этом уроке мы рассмотрим процесс создания сайта, состоящего из одной страницы, на HTML 5 с применением классов и компонентов Bootstrap 3.
Создание сайта визитки
Сайт визитка – это простой сайт, который состоит из небольшого количества страниц, и содержащий основную информацию о фирме, компании, предприятии или частном лице. Стоимость сайта визитки зависит от дизайна и количества страниц, и составляет от 4000 рублей. А стоят ли несколько страниц таких денег? Нет! С помощью этого урока вы научитесь, как разработать свой сайт с использованием технологии Twitter Bootstrap 3 и поместить его в интернете.
Создание файла HTML и подключение к нему стилей и скриптов Bootstrap 3
Перед тем, как приступить к созданию сайта давайте рассмотрим что же нам дает платформа Bootstrap 3. Во первых она предлагает поддержку различных браузеров, что уже хорошо. Во вторых адаптивный дизайн, т.е. наш сайт будет отлично выглядеть на устройствах с различными диагоналями экранов. В третьих высокая скорость разработки, т.е. нет необходимости тратить много часов на разработку различных элементов веб-страниц. В итоге получается, что разработчик лишь применяет готовые компоненты, классы и скрипты Bootstrap, а остальное делает уже сама платформа.
В качестве примера рассмотрим процесс создания сайта фирмы Business, которая будет содержать информацию о компании, услугах, портфолио, а также контактную информацию.
Создание сайта начнём со скачивания архива, который состоит из файлов платформы Bootstrap 3 и иконок Font Awesome.
После скачивания и распаковки архива, создаём HTML файл с именем index.html, к которому подключим стили и скрипты платформы Bootstrap 3 и стили для использования иконок Font Awesome.
Содержимое файла index.html с пояснениями (<!--...--!>)
<!DOCTYPE html> <html lang="ru"> <head> <!-- Кодировка документа --> <meta charset="utf-8"> <!-- Заголовок страницы --> <title>Маркетинг в социальных сетях для бизнеса | Bussines.ru</title> <!-- Подключения таблицы стилей Bootstrap 3 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- Подключение темы со стилями Bootstrap 3 --> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <!-- Подключение таблицы стилей иконок Awesome --> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> <!-- Подключение таблицы стилей, в которой будем прописывать свои стили --> <link rel="stylesheet" type="text/css" href="css/style.css"> <!-- Подключение библиотеки jQuery для работы скриптов Bootstrap 3 --> <script src="js/jquery-1.11.1.min.js"></script> <!-- Подключение скриптов Bootstrap 3 --> <script src="js/bootstrap.min.js"></script> </head> <body> <!-- Основное содержимое страницы --> </body> </html>
Создание макета
На изображении показано, что веб-страница состоит из 2 основных частей: основного контейнера (container) и подвала (footer). Основной контейнер (container) выровнен в горизонтальном направлении по центру и содержит следующие части: шапку страницы (header); горизонтальное навигационное меню (nav); нижнюю часть шапки (header-bottom); блок об услугах компании (main), состоящий из 3 колонок; блок об основных методах (method) применяемых в компании; блок, содержащий портфолио (work) компании.
<body>
<!-- Основной контейнер -->
<div class="container">
<!-- "Шапка" сайта -->
<header></header>
<!-- Навигационное меню -->
<nav></nav>
<!-- Нижняя часть "шапки" сайта -->
<div id="header-bottom"></div>
<!-- Блок об услугах компании -->
<div id="main">
<!-- Ряд, состоящий из 3 блоков -->
<div class="row">
<!-- 1 блок, состоящий из 4 колонок Bootstrap -->
<div class="col-md-4"></div>
<!-- 2 блок, состоящий из 4 колонок Bootstrap -->
<div class="col-md-4"></div>
<!-- 3 блок, состоящий из 4 колонок Bootstrap -->
<div class="col-md-4"></div>
</div>
</div>
<!-- Блок, содержащий информацию об основных методах компании -->
<div id="method">
<div class="row"></div>
</div>
<!-- Блок, содержащий портфолио компании -->
<div id="work">
<div class="row"></div>
</div>
</div>
<!-- Подвал сайта -->
<footer></footer>
</body>
подскажите .
присутствуют знающие люди по bootstrap, у которых можно получить помощи по вопросикам ?Александр, с Вашей помощью сделал свой первый сайт, разместил на хосте. Спасибо Вам огромное!
Есть правда небольшой нюанс, я так и не понял почему у меня на мобильном телефоне отображается сайт как обычная ПК версия (без меню «гамбургер»), хотя разрешение по ширине меньше 500px, а на ПК, при уменьшении ширины до 700 и ниже включается мобильная версия? Хотелось бы адаптивность сайта довести до ума.
Более подробно про viewport и как он работает можно почитать здесь.
И еще момент заметил — поставил кнопку «Возврат вверх» если прокрутка свыше 1000px, она по умолчанию красного цвета, по нажатию становится серой, при повторной прокрутке и появлении кнопки цвет она обратно на красный не меняет.
Модальное окно при открытии добавляет к CSS-свойство overflow со значением hidden. Это действие убирает прокрутку у и размер области становится больше на ширину этой прокрутки. А поскольку кнопка привязана к правой границе, то она смещается на эту величину. Здесь самый простой вариант – это убирать эту кнопку вверх при открытии модального окна, а при закрытии – возвращать всё обратно.
Если цвет не меняется у кнопки вверх, то значит, что курсор находится над ней.
Очень классный и полезный ресурс.
Подскажите, в этом уроке itchief.ru/bootstrap/adaptive-layout вы использовали:
header, main и footer, а уже в каждом из них был container.
Почему в этом уроке уже в container содержаться header, main и остальные div, и footer отдельно?
Отвечу на Ваш вопрос очень просто. Всё связано с тем, что статьи писались в разное время. Но Вы всё равно можете выбрать любой способ, т.к. разметка в том и в этом случае является правильной.
Способ создания макета, описанной в статье «Адаптивно-фиксированный макет сайта» является просто более гибкой и семантически правильной для поисковых роботов.
Т.е. вы можете без труда, например, сделать шапку на всю ширину, просто изменив класс container на container-fluid. С разметкой, представленной на этом уроке так просто сделать это не получиться. Кроме этого такую разметку ещё и проще поддерживать, т.к. она разбита на секции (шапка, основное содержимое, футер).
Если Вы сомневаетесь, как более правильно выполнить разметку, то остановитесь на варианте, представленном в статье «Адаптивно-фиксированный макет сайта».
Сейчас объясню, как это сделать очень подробно:
Макет на сайте состоит из 2 блоков div.
Первый блок (основной) имеет ширину, равную 8 колонкам Twitter Bootstrap 3 на устройствах md и lg.
Второй блок (сайдбар) имеет ширину, равную 4 колонкам Twitter Boottsrap 3 на устройствах md и lg.
К сайдбару добавим дополнительный класс sidebar. Данный класс мы будем использовать для добавления стилей CSS к блоку div.
Разметка страницы:
Стили лучше всего писать во внешнем CSS файле, если у Вас его нет, то создайте и подключите его к сайту.
Содержание файла CSS:
.sidebar {
border-left: 1px solid #efefef;
}