Категория: HTML5.
Огромное преимущество использования CSS фреймворков заключается в том, что разработчику не нужно думать о разных вопросах компоновки, большинство из кототорых были решены создателями фреймворков. Например: кроссбраузерность, поддержка различных разрешений экрана и так далее. Разработчик должен только указывать, что показывать и когда показывать в зависимости от условий, остальное рамки делают сами. Данный подход может сильно ускорить вёрстку сайта. Еще одно преимущество Bootstrap это его популярность. Это значит, что другому разработчику будет проще поддерживать ваш код.
Недостатком использования фреймворков является тот факт, что страница будет нести в себе всё базу рамок и стилей, даже если вы используете лишь небольшую их часть. Фреймворк является отличным инструментом для прототипирования и создания страниц, а также популярных шаблонов для WordPress лучшие из которых на https://inbenefit.com/. Если у вас есть очень специфический дизайн, то выводить его с помощью рамок может быть сложнее чем нативными средствами
Об использовании Bootstrap
В настоящее время существует несколько способов работы со стилями Bootstrap: с использованием LESS и без использования.
Без использования LESS
Для начинающих, Bootstrap рекомендует следующий подход: вы должны просмотреть скомпилированные файлы Bootstrap и поместить их в свой проект. Затем вам необходимо создать пустой файл CSS и подключить его после bootstrap.css.
После этого, чтобы изменить стили bootstarp по умолчанию, вы должны переопределить их в styles.css.
a { color: #00ff00 }
block { background-color: #dddddd }
Очевидным недостатком такого подхода является то, что вам нужно вручную искать нужные стили, которые вы хотите изменить и это будет не всегда тривиально, так как некоторые параметры применяться ко многим селекторам в модифицированной форме, например с помощью формул. Настройка инструмента может немного вам помочь, он может правильно скомпилировать все ваши изменения, но только один раз. В следующий раз когда вы захотите внести новые параметры, вам нужно будет повторно внести обновлённые значения для всех полей, чтобы снова скомпилировать стили.
С использованием LESS
Этот метод предполагает что все Bootstarpпеременные храниться в файле .less. Разработчик работает с этими переменными и их компиляциями в CSS файлы (вручную или автоматически) по мере необходимости. В HTML мы просто подключаем скомпилированные CSS файлы. Таким образом, это наиболее гибкий вариант.
Есть много способов чтобы скомпилировать lеss файлы, Bootstrap оставляет это на усмотрение разработчика. Сам Bootstrap использует Grunt для компиляции файлов, вы можете использовать WinLess для Windows, SimpLESS для Mac и Koala для Linux. Все эти программы всё тоже самое : они получают папку ввода и следят за изменениями в файлах. Как только вы внесли изменяя в любой файл, программа компилирует в соответствующий файл CSS.
Создание проекта
Прежде всего, давайте создадим простую файловую структуру для нашего проекта.
- Создайте папку с именем проекта например ‘whitesquare-bootstrap’.
- Создайте две папки ‘src’ для исходных файлов и ‘www’ для файлов готового сайта.
- В папке ‘www’ мы создаём пустую папку ‘Images’ и пустой файл: index.html.
- Теперь скачаем Bootstrap и скопируем содержимое архива в папку ‘www’.
- Так как мы решили использовать less в нашем проекте, нам нужно просмотреть исходные файлы Bootstrap и скопировать папку ‘less’ из пакета в папку ‘src’ нашего проекта.
- В папке ‘less’ создадим два пустых файла styles.less и variables.less. Мы будем переопределять стандартные свойства Bootstrap в этих файлах. Такой подход позволил бы быстро обновить Bootstrap
- Настроить компиляцию less файлов для css.
- Как будут размещаться изображения
- Какие компоненты используются
- Каковы основные стили
- Какой макет страницы мы получим в результате
- Для компоновки колонн – системы сетки (строка, столбец)
- Для поиска – инлайнформа (form-inline), grouped controls (input-group), кнопка
- Для навигации – панель навигации (navbar) и самой навигации (nav).
- Для подменю – список групп (list-group).
- Для блока карты – визульная панель (panel).
- Для большого центрального блока – jumbotron.
- Для кадров изображений – thumbnail.
Если вы решили использовать WinLess, то для начала выберете ‘Добавить папку ’ и укажите путь к нашим less файлам:
C:\whitesquare-bootstrap\src\less
Вы увидите список всех файлов в этой папке. Вы можете удалить все галочки, но обратите внимание на последние два файла: ‘styles.less’ и ‘variables.less’. Нажмите на них правой кнопкой мыши и выберите из всплывающего меню ‘Select output file ’ и укажите путь к нашим CSS файлам.
..\..\www\css\styles.css
..\..\www\css\variables.css
После этого в файлах LESS, вы получите свежие перекомпилированы файлы CSS.
Предварительный просмотр
После того как мы создали структуру файлов, давайте рассмотрим структуру нашего шаблона.
Мы должны рассмотреть следующие вещи:
Изображения
На данном этапе нам необходимо подготовить и сохранить только самые распространённые изображения, которые будут на всех страницах и не относятся к содержанию. В нашем случае это: светло-серый фон, фон шапки, изображение карты, два логотипа и социальные иконки. Сохраняем изображение карты:
images/map.png
Сохраняем изображения логотипов:
images/logo.png
images/footer-logo.png Сохраняем фоновые изображения:
/images/bg.png
/images/h1-bg.png Для более быстрой загрузки, иконки социальных сетей храниться в одном файле спрайтов:
/images/social.png
/images/social-small.png
Компоненты
Основное отличие между использованием макета Bootstrap компоновки с использованием нативных средств является то что Bootstrap вводит понятие компонентов. Компоненты представляют собой обычно готовые HTML блоки с помощью предопределённых стилей. Иногда компоненты используют JavaScript, но это бывает редко. Мы можем использовать готовые компоненты Bootstrap, а также переопределять стили компонентов. Вам просто нужно изменить значения переменных Bootstrap для этого. Если вам нужны более гибкие изменения, разработчик всегда может изменить HTMLи CSS самостоятельно. Давайте вернёмся к нашему шаблону, нам понадобятся следующие компоненты.
Основные стили
По умолчанию у нас уже есть большое количество стилей в Bootstrap, нам нужно только переопределить их, если они отличаются от нашего дизайна. Мы можем сделать это в файле ‘src/less/variables.css’.
Прежде всего необходимо добавить переменные, которые не настроены в Bootstrap, нужно это для возможности использовать их в дальнейшем.
У нас есть только определённый шрифт:
@brand-font: 'Oswald',sans-serif;
Теперь давайте переопределим параметры Bootstrap для наших пользовательских настроек:
/* gray background of the page */ @body-bg: #f8f8f8; /* blue background */ @ brand-primary: #29c5e6; /* background of panels */ @panel-bg: #f3f3f3; /* frame color of panels */ @panel-inner-border: #e7e7e7; /* remove rounding in blocks */ @border-radius-base: 0; /* primary buttons have blue background */ @btn-primary-bg: @brand-primary; /* if the screen width is more then 992px, then the container width is 960px */ @container-md: 960px; /* if the screen width is more 1200px, then the container width is 960px again */ @container-lg: @container-md; /* main font is Tahoma */ @font-family-base: Tahoma, sans-serif; /* base font size */ @font-size-base: 12px; /* main color of text */ @text-color: #8f8f8f; /* gray background of text fields */ @input-bg: @panel-bg; /* gray frame of text fields */ @input-border: @panel-inner-border; /* gray color of the text in the fields */ @input-color: #b2b2b2;
После того как мы закончили с переменными, давайте начнём писать наши стили в файл ‘styles.less’. Во первых подключить Bootstrap и наш файл переменных.
@import "bootstrap/bootstrap.less"; @import "variables.less";
Не все стили (которые установлены в Bootstrap по умолчанию ) можно изменить с помощью переменных, мы можем изменить их вручную.
p {
margin: 20px 0;
}
.form-control {
box-shadow: none;
}
.btn {
font-family: @brand-font;
}
Здесь мы удалили тень элементов формы, и указали конкретный шрифт для текста и кнопок. Затем мы описываем фон страницы и верхней полосы.
body {
border-top: 5px solid #7e7e7e;
background-image: url(../images/bg.png);
}
Далее мы не будем упоминать файлы где мы добавим стили. Просто помните что все переменные мы добавляем в файл ‘variables.less’, а все стили пользовательских CSS добавляем в файл ‘styles.less’.
HTML скелет
Макет сайта мы традиционно начинаем с HTMLскелета.
Bootstrap 3 page layout
В этом разделе мы создаём структуру документа HTML5. В ‘title’ мы указываем имя нашей страницы — ‘Bootstrap 3 page layout’. Метатег ‘viewport’ указывает на то что ширина страницы на мобильном устройстве буде равна ширине экрана начального масштаба 100% . Затем мы подключаем таблицу стилей. А для Internet Explorer ниже v.9 мы подключаем скрипты, которые позволяют правильно отображать наш макет.
Макет страницы
Макет страницы состоит из двух частей: основной контейнер для содержания, который расположен по центру экрана и нижнего колонтитула. Первичный контейнер состоит из двух колонок: основное содержание и боковой панели. Над ним находятся заголовок, навигаци.
Давайте добавим следующий код:
Здесь мы встречаем первый компонент Bootstrap– столбцы. Родительский элемент колонок имеет класс row, а классы колонн начинаются с прификса col-, затем – размер (xs, sm, md, lg), а в конце относительная ширина столбца.
У нас есть классы col-md-7и col-md-17 которые указывают, что блоки представляют собой ширину 7 и 17 относительно родительского контейнера. По умолчанию сумма ширин столбцов в Bootstrap 12, но мы увеличили количество, чтобы достичь желаемой гибкости.
Теперь давайте приступим к описанию необходимых нам блоков:
body {
…
.wrapper {
padding: 0 0 50px 0;
}
header {
padding: 20px 0;
}
}
Мы вставляем эту конструкцию в body. Less синтаксис позволяет вложенные правила, которые компилируются в конструкции типа:
body .wrapper {…}
body header {…}
Такой подход позволяет увидеть структуру HTML внутри CSS, и это даёт своего рода ‘scope’ (рамки) правил.
Логотип
Давайте добавим логотип в заголовок:
Дополнительные стили не требуются.
Поиск
Для создания формы поиска нам понадобиться следующие компоненты Bootstrap: встроенная форма, сгруппированным элементам управления и кнопки. В теге заголовка мы создаём встроенную форму, выравнивая её по правому краю. Поле этой формы должно иметь класс form-control и метку.
В форме мы размещаем grouped control компонент. Группировка элементов управления позволяет удалить пространство между текстом и кнопкой, это выглядеть как единый элемент.
Это div с классом input-group и поля, и кнопки компонента находится в блоке с классом input-group-btn.
Поскольку нам не нужно показывать метку для каждого поля, мы прячем его с классом sr-only. Затем мы добавим класс btn-primary для нашей кнопки, это означает что это основная кнопка данной формы.
…
Search
GO
Всё что остаётся установить ширину стилей окна поиска
body {
…
.wrapper {
…
header {
…
.form-search {
width: 200px;
}
}
}
}
Меню
Для отображения меню мы берём компонент ‘navigation bar’ и размещаем компонент ‘navigation’ в нём, который представляет собой список со ссылками. Для навигации мы добавим класс navbar-nav, который применяет специальные стили в панели навигации.
Для того чтобы довести это меню в наш проект, мы устанавливаем следующие значения для переменных:
/* navigation menu height */ @navbar-height: 37px; /* additional paddings */ @nav-link-padding: 10px 30px; /* background for menu items */ @navbar-default-bg: @panel-bg; /* text color in the menu items */ @navbar-default-link-color: #b2b2b2; /* for the mouse hover - the same color */ @navbar-default-link-hover-color: @navbar-default-link-color; /* background of the active menu item */ @navbar-default-link-active-bg: @brand-primary; /* text color of the active menu item */ @navbar-default-link-active-color: #fff;
Кроме регулируемых параметров мы стилизуем тест в верхний регистр и конкретный стиль:
body {
…
.wrapper {
…
.navbar a {
text-transform: uppercase;
font: 14px @brand-font;
}
}
}
Заголовок страницы.
Заголовок страницы помещается в DIVс классом heading.
About us
И применяем следующие стили :
body {
…
.wrapper {
…
.heading {
height: 40px;
background: transparent url(../images/h1-bg.png);
margin: 30px 0;
padding-left: 20px;
h1 {
display: inline-block;
color: #7e7e7e;
font: normal 40px/40px 'Oswald', sans-serif;
background: url(../images/bg.png);
margin: 0;
padding: 0 10px;
text-transform: uppercase;
}
}
}
}
Субменю
При создании подменю мы не будем использовать компонент ‘navigation’ , так как он не очень подходит по стилям, вместо этого мы будем использовать компонент ‘group list’. Каждый элемент этого компонента имеет класс list-group-item. Подменю должно быть помещено в тег aside.
Список ссылок создаём как и в главном меню.
В настройках компонента отметим, что все сгруппированные списки должны показываться с фоном и границей компонента ‘panel.
@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
Затем мы применяем следующие стили:
body {
…
.wrapper {
…
.submenu {
margin-bottom: 30px;
li {
display: list-item;
font: 300 14px @brand-font;
list-style-position: inside;
list-style-type: square;
padding: 10px;
text-transform: uppercase;
&.active {
color: @brand-primary;
}
a {
color: @text-color;
text-decoration: none;
&:hover {
color: @text-color;
}
}
}
}
}
}
Конец первой части!