Сегодня мы рассмотрим: Настоящие ценители музыки знают, что для качественного...
Здравствуйте, уважаемые читатели блога сайт. Это первая статья в рамках новой рубрики «Bootstrap». ? Это популярный фреймворк, который позволяет быстро и качественно создавать статичные веб-сайты и веб-приложения. По сути, это бесплатный набор инструментов, позволяющий использовать Html, CSS и JavaScript «крупными мазками».
При этом можно работать с обычным статическим Html с помощью возможностей Бутстрипа, а можно попробовать, например, создать с помощью него уникальный шаблон для своего сайта, работающего на CMS (чуть позже мы поговорим про создание шаблонов для Joomla 3 на основе Bootstrap). При этом каких-то особых знаний Html и CSS от вас не потребуется.
Особенности Bootstrap 3 и что такое отзывчивый дизайн?Сейчас вам предлагают скачать Bootstrap 3 , который имеет ряд отличий от предыдущих версий:
В Бутстрапе 3 имеется только одна сеточная система — отзывчивая (раньше было две: отзывчивая и адаптивная. Но ее функционал был существенно расширен за счет большего числа сеток разного размера.
Дело в том, что времена, когда пользователи заходили на сайты исключительно со стационарных компьютеров и ноутбуков, канули в лету. Сейчас, в зависимости от тематики, трафик с мобильных устройств может составлять от единиц до десятков процентов от общего числа. Не считаться с удобством этих посетителей уже невозможно.
Сейчас не достаточно просто иметь сайт, который будет отлично смотреться и функционировать только на больших экранах. Нужно, чтобы он не терял своих качеств и на экранах различных планшетов и смартфонов. Создавать для этих целей отдельный сайт для мобильных дивайсов не будет лучшей идеей (сложность синхронизации информации, сложность узнавания и т.п.).
Шагом в верном направлении стала концепция отзывчивого дизайна , когда сайт сам умеет должным образом подстраиваться (отзываться) под размер экрана пользователя. Делается это путем подргрузки разных стилей оформления CSS при просмотре сайта на экранах разных устройств. Например, в случае монитора будут подгружаться стили реализующие три колонки, в случае планшета — с двумя колонками, а при заходе пользователя со смартфона тот же самый сайт будет ему подаваться в виде одноколоночного макета.
(используя Bootstrap или его конкурентов)? Когда как. Все зависит от того, какую именно проблему вы собираетесь решить. В принципе, вопрос дизайна клиентской части сайта можно решить несколькими способами:
Ну, а третьим вариантом, являющимся компромиссом между описанными выше, станет отзывчивый фреймворк (в частности Бутстрап ). Дело в том, что при его использовании часть работы уже будет сделана за вас. Вам не нужно будет думать о некоторых отдельных аспектах дизайна. Там уже будет иметься достаточно гибкая сетка для разметки страниц (используется LESS CSS — динамический язык стилей).
Внешний вид Bootstrap вы сможете настроить на свой вкус. Это неправда, когда говорят, что сайты, сделанные на этом фреймворке, выгладят одинаково. Все зависит от вас самих — возможностей по приданию индивидуальности море, но многие просто с этим не заморачиваются.
При использовании отзывчивого дизайна стилевой код, правда, будет серьезно больше и сложнее, чем без него, ибо приходится предусматривать много различных ситуаций с разным стилевым оформлением. Кроме этого вам, но зато потом вы сможете быстро сделать то, что вам нужно (в том числе и поставить этот процесс на поток). Как говорилось в известном мультфильме: лучше час потерять, а потом за пять минут долететь (ноги, лапы, хвост). При этом проект получится высокого качества.
Этот фреймворк позволяет простым добавление классов (читайте про ) к элементам Html кода применять к ним очень эффектное оформление . Например, вот так будет выглядеть ваша класса «table table-hover»:
Стили для этого класса прописывать не нужно, ибо они уже прописаны в файлах стилей самого Бутстрапа. Очень удобно и быстро. А так, например, можно в два счета создавать кнопки из обычных или при помощи тегов button, добавляя к ним нужные классы:
Так же можно с помощью классов очень легко создавать на основе тегов Html списков различные меню (элементы навигации), выпадающие списки, пагинацию (нумерацию страниц), всплывающие окна, а так же подсказки и многое другое, что вы можете на этой странице официального сайта:
Ну, и, кончено же, верстка страниц сайта с различным количество колонок с помощью этого фреймворка осуществляется буквально играючи — опять же, обычным добавлением контейнеров нужных классов.
Скачиваем Бутстрап и изучаем его файловую структуруИтак, скачать фреймворк Bootstrap 3 можно будет на официальном сайте — GetBootstrap.com (есть и неофициальное русское зеркало mybootstrap.ru , где можно найти подробное введение в работу с этим фреймворком).
Сразу оговорюсь, что на вкладке «Customize» (в русской версии это «Изменить и скачать») вы можете выбрать, какие именно компоненты и jQuery плагины вам нужны, а также поменять переменные, отвечающие за цвета, шрифты, формы и т.п. вещи. Потом все это можно сохранить и скачать Bootstrap с помощью расположенной внизу кнопки.
Однако, лучшим вариантом, на мой взгляд, будет разобраться в работе этого фреймворка и менять какие-то параметры по ходу работы. Тем более, что мы начинаем изучение с чистого листа, а значит нам понадобится все, что в Бутстрипе есть. Поэтому просто переходим на страницу загрузки стандартного пакета (вкладка «Getting started») и нажимаем на кнопку:
После распаковки архива вы обнаружите в нем три папки: css, fonts и js. И это все, что вам нужно для работы с этим фреймворком. Хотя нет, еще вам понадобится (лично я использую Нотепад++, но у него достаточно много достойных конкурентов, не говоря уже об ).
Давайте посмотрим, . Сейчас там шесть файлов, хотя еще совсем недавно было четыре. На самом деле, это два набора по три файла в каждом. Например, файл bootstrap.css и bootstrap.min.css содержат один и тот же CSS код, но отличаются тем, что код в файле bootstrap.css легко читаем, ибо отформатирован соответствующим образом:
А код в файле bootstrap.min.css сжат для уменьшения размера файла (из него удалены все пробелы и переносы строк — читайте про ) и он представляет из себя одну огромную строку, читать которую весьма затруднительно.
Таким образом файл bootstrap.min.css становится на четверть легче файла bootstrap.css без потери функционала. Ну, а файл bootstrap.css.map появился в дистрибутиве Bootstrap 3 совсем недавно. Насколько мне позволяет понять его назначение мой куцый мозг — он позволяет в инструментах для разработчиков (например, встроенных в браузеры Хром или Файерфокс) работать со сжатым CSS кодом так, как будто бы он не был сжат. В общем мутная вещь, которую я пока еще не постиг.
Тоже самое можно сказать и про файлы. Во второй версии Бутстрипа их не было. Дело в том, что Bootstrap 3 идет с так называемым «плоским дизайном» (никаких градиентов, теней и т.п.). Поэтому сюда добавили собственную тему в качестве дополнительных таблиц стилей, которую можно будет подключить отдельно и добавить дополнительных элементов на свой сайт.
находится четыре файла со шрифтами. Это один и тот же шрифт, просто он представлен в четырех разных форматах. Эти шрифты поддерживают доступные нам глиф-иконки (серии иконок, которые можно использовать в дизайне). Как я уже упоминал выше, у них можно менять размер (или цвета), поскольку они представляют из себя векторную графику. Подробнее о глиф иконках еще поговорим.
находятся два джава-скрипт файла bootstrap.js и bootstrap.min.js, которые отличаются только тем, что из последнего удалены все пробелы и переносы строк, из-за чего его код стал практически не читаемый с точки зрения человека, но ничуть не потерял с точки зрения браузера (машины). Ну и, естественно, стал легче. Кроме этого файлика нам при работе с Бутстрапом, скорее всего, придется использовать еще несколько js файликов, но об этом позже.
Подключаем CSS и JS файлы Бутстрапа к Html файлуВот мы и обозрели все файлы, идущие в комплекте с этим фреймворком. Теперь можно начинать его использовать для создания первой Html странички, чтобы понять всю прелесть данного процесса. Давайте для примера возьмем обычный пустой веб-документ с базовой разметкой (так называемую «рыбу»).
Заголовок страницы
Надеюсь, с этой структурой вы уже сталкивались и понимаете, что помогает браузеру понять, как интерпретировать записанный ниже код, а теги head и body формируют, соответственно, служебную «голову» (то, что не выводится на вебстранице) и «тело» (то, что непосредственно будет отображаться на странице).
Просто скопируйте в новый файлик, созданный в вашем Html редакторе, следующий код, и сохраните полученный результат в папку с Bootstrap 3 с расширение Html и названием index.html . Т.е. он должен лежать на том же уровне, что и папки css, fonts и js:
Теперь в «рыбу» под названием index.html добавьте следующий мета-тег (между тегами head, например, в районе meta charset):
Мета-тег viewport обычно всегда включают при работе с отзывчивым дизайном. Зачем он нужен? Чтобы правильно масштабировать экран. В этом случае не важно будет, с какого именно устройства на ваш сайт зашел пользователь (с большим экраном или маленьким) — вебстраница будет менять размер в зависимости от девайса.
Подключаем таблицу стилей из папки BootstrapПосле этого нужно будет из арсенала Bootstrap с помощью тега с указанием в ней до файла (у него размер меньше).
Кроме имеющегося в дистрибутиве Бутстрапа файлика стилей мы создадим еще один с нашими собственными стилями, подключение которого можно будет сразу же и прописать в «шапке» index.html.
Ну и, собственно, стоит создать пустой файлик manual.css и скопировать его в папку CSS нашего фреймворка.
В результате примерно так:
Заголовок страницы
Подключаем библиотеку jQueryТеперь можно приступать к подключению к нашему вебдокументу джава-скрипт файлов. Они нам нужны, чтобы файл index.html работал с Bootstrap 3. Одним из этих файлов будет js из самого фреймворка, а другим — библиотека jQuery . Давайте начнем с нее. В своем роде это тоже фреймворк, который используют повсеместно (в CMS, фреймворках отзывчивого дизайна и многих сайтах интернета).
Подключить библиотеку jQuery к нашему Html документу можно двумя способами — либо загрузить библиотеку к себе и сослаться на нее, либо использовать сеть доставки библиотеки jQuery (CDN). В первом случае вы получаете гарантию, что пока ваш сайт работает данная библиотека всегда будет подгружена (вы не зависите от внешних источников, которые теоретически могут стать на время недоступными).
Преимущество же подключения jQuery через сеть CDN состоит в том, что у пользователя в кеше браузера уже может храниться файл этой библиотеки. Т.к. jQuery весит очень даже прилично, то это позволит вашему проекту открываться значительно быстрее в браузерах таких пользователей. Сеть доставки библиотеки редко бывает в оффлайне, поэтому вероятность возникновения неприятностей из-за использования способа подключения через CDN крайне низка.
Как все это реализовать на практике? Перейдите на официальную страницу библиотеки jQuery — jquery.com . Итак, если вы хотите скачать эту библиотеку, то кликните по большой кнопке в правой части экрана.
У jQuery есть две версии — 1.x и 2.x. Исходя из поддерживаемых браузеров сейчас, наверное, лучше все же использовать первую версию (она поддерживает IE 8, который все еще довольно часто встречается на компьютерах пользователей сети).
Код вызова джава-скрипт файлов принято вставлять между тегами head. Но это не совсем правильно. Лучше вызов скриптов делать перед закрывающим тегом body . Почему? Дело в том, что, например, вызов файлов стилевой разметки необходимо сделать еще до или одновременно с загрузкой контента, чтобы он правильно отображался. А вот JS файлы отвечают за функциональность страницы, а не за ее внешний вид. Значит до полной загрузки документа этот функционал нам не понадобится, поэтому и нет никакой необходимости пихать вызов джава-скрипт файлов между тегами Head.
Если же вызов JS все-таки вставить в «голову», то придется ждать полной их загрузки, чтобы увидеть страницу. Сложится ощущение медленной загрузки сайта, а это серьезно снижает привлекательность его у посетителей. А вот если вызов jQuery вставить в самом низу документа (перед закрывающим тегом Body), то вся остальная информация загрузится до этой библиотеки. Сложится ощущение более быстрого и отзывчивого сайта.
Универсальный код вызова jQuery (без загрузки этой библиотеки к себе на сервер) с использованием описанной выше сети доставки библиотеки jQuery (CDN) будет выглядеть так:
Чтобы отличать этот код от остального кода, который будет жить внутри тегов Body, можете добавить директиву с поясняющей надписью. Например, так:
Подключаем JS файл Бутстрапа и файл respond.js
Ну, а также нам нужно будет (лучше тот, в котором код сжат с целью уменьшения размера, т.е. со словом min в названии). Будет это дело выглядеть так:
Наверное, понятно, что если вы захотите библиотеку jQuery загружать со своего сервера, то ее нужно будет скачать, поместить в папку JS и прописать для нее точно такой же код вызова, что и для bootstrap.min.js. Но все же советую брать ее из CDN, как было показано чуть выше.
Учтите, что код вызова bootstrap.min.js нужно будет ставить после вызова jQuery, ибо он зависит от этой библиотеки и она обязательно должна загружаться раньше его.
Так, еще нам осталось подключить respond.js . Что это такое? Это скрипт, разработанный для того, чтобы помочь старым версиям Интернет Эксплорера понять Html 5 и решить другие проблемы совместимости с этим «странным» браузером. Скачать этот файлик можно — там опять же есть сжатая и обычная (читаемая глазами) версии.
Просто кликните по respond.min.js и в открывшемся окне скопируйте его код. Сделать это, правда, не так-то просто, ибо он представляет из себя одну длиннющую строку. На мой взгляд, проще будет нажать на кнопку «Raw». В этом случае откроется страница только с кодом файла respond.min.js, который легко можно будет выделить и скопировать, нажав Ctrl+A на клавиатуре:
Помещенный в буфер обмена код нужно вставить в новый файл вашего Html редактора (у меня это Нотепад с двумя плюсиками) и сохранить с названием respond.min.js в папку JS из состава Bootstrap 3.
В файле index.html подключение respond.min.js будет выглядеть как обычно:
Но есть нюанс. Этот код нужно будет, ибо так советуют его разработчики. В противном случае, в некоторых старых версиях Эксплорера, до момента загрузки respond.min.js, пользователи могут на секунду увидеть не стилизованный контент (просто неотформатированный и неразмеченный текст). Вот чтобы этого избежать и ставят подгрузку respond.min.js раньше загрузки вебстраницы.
В результате итоговый файл index.html в папке Bootstrap 3 будет выглядеть примерно так:
Заголовок страницы
Теперь у нас есть все для построения сайта на Бутстрап. У нас есть все нужные джава-скрипты и стили, которые мы подключили. Можно приступать к построению сайта.
Продолжение следует >>> (Вы можете подписаться на рассылку , чтобы его не пропустить)
А вот и продолжение вышло: (но вы все равно подписывайтесь — будет еще много интересного и полезного).
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на ");">
Вам может быть интересно
На этом уроке Вы научитесь подключать платформу Twitter Bootstrap 3 к сайту, а также узнаете, из каких файлов она состоит.
Формы распространения платформы Twitter BootstrapДля изучения платформы Twitter Bootstrap необходимо иметь:
Скомпилированная и минимизированная версия платформы Twitter Bootstrap 3 - это основная форма поставки этой платформы, которую выбирают большинство веб-разработчиков. Данная форма поставки отличается простотой её подключения к вашему сайту, так как она содержит предварительно подготовленные и минимизированные файлы CSS и JavaScript, а также иконки в формате шрифта.
Версия платформы с исходными кодами включает в себя, кроме предварительно откомпилированных файлов CSS и JavaScript, ещё исходные коды этой платформы (файлы Less и JavaScript), документацию на английском языке, различные примеры, информацию о лицензии и многое другое.
На этом уроке мы рассмотрим подключение предварительно скомпилированной и минимизированной версии, которую можно скачать по ссылке приведённой выше. В этой форме поставке платформы Twitter Bootstrap 3 для нас имеют наибольший интерес именно минимизированные (сжатые) версии скомпилированных файлов, так как они имеют меньший размер и, следовательно, увеличивают скорость загрузки веб-страниц сайта.
Но перед тем как перейти к подключению платформы Twitter Bootstrap к веб-странице необходимо рассмотреть её структуру на файловом уровне.
Файловая структура платформы Bootstrap 3После загрузки, предварительно скомпилированной и минимизированной версии Bootstrap 3 на компьютер, ее необходимо распаковать с помощью любого архиватора в каталог вашего веб-проекта.
Если эту папку рассмотреть, то мы увидим, что платформа Twitter Bootstrap состоит из 3 каталогов ("CSS", "FONTS" и "JS") и файлов.
Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
Файлы платформы представлены в 2 видах:
- 1 вид - это предварительно скомпилированные файлы CSS и JavaScript (bootstrap.css , bootstrap-theme.css , bootstrap.js)
- 2 вид - это предварительно скомпилированные и минимизированные (сжатые) файлы CSS и JavaScript (bootstrap.min.css , bootstrap-theme.min.css , bootstrap.min.js)
2 вид файлов более предпочтительно использовать для сайта, так как они содержат точно такой же код, как и файлы 1 вида, но в сжатом состоянии. Следовательно, сайты, которые используют 2 вид файлов платформы Twitter Bootstrap 3, загружаются быстрее.
Кроме этих файлов, в данную поставку входят ещё 4 файла шрифта "Glyphicons" (glyphicons-halflings-regular.eot , glyphicons-halflings-regular.svg , glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.woff), которые отличаются друг от друга только форматом, в котором хранится данный шрифт. Шрифт "Glyphicons" состоит из 200 иконок из набора "Glyphicon Halflings".
Внимание: для работы скриптов платформы Twitter Bootstrap 3 (bootstrap.js и bootstrap.min.js) необходимо иметь подключенную последнюю версию библиотеки jQuery.
Создание веб-страницы на HTML 5 и подключения к ней платформы Twitter Bootstrap 3Итак, мы рассмотрели структуру и назначение файлов платформы Twitter Bootstrap 3. Теперь пришло время подключить данную платформу с помощью скомпилированных и минимизированных файлов к веб-странице. Рассмотрим этот процесс пошагово. В результате наших действий мы хотим получить веб-страницу на HTML 5, к которой подключена платформа Twitter Bootstrap 3. Для демонстрации того что платформа работает, создадим в данной веб-странице кнопку, при нажатии на которую будет показываться всплывающая панель с сообщением.
Шаг 1. Создание HTML страницы
Откройте ваш любимый редактор кода и создайте файл с именем index и расширением html . Наберите или вставьте в текстовый редактор, следующий код:
DOCTYPE html > Basic Bootstrap Template Нажмите на кнопку
Шаг 2. Подключение платформы Bootstrap 3 к веб-странице
Чтобы подключить платформу Twitter Bootstrap 3 к веб-странице необходимо выполнить следующее:
Примечание: файлы JavaScript лучше всего подключать перед закрывающим тегом body (т.е. перед ), так как это повысит скорость загрузки основного контента веб-страницы.
DOCTYPE html > Basic Bootstrap Template Нажмите на кнопку $ (function () { $ ("" ).popover() })Шаг 3. Сохранение веб-страницы и проверка работы компонента Bootstrap
После создания веб-страницы, к которой подключена платформа Twitter Bootstrap 3, её необходимо сохранить в файл с расширением html (Например: "index.html"). После этого созданную веб-страницу необходимо открыть в веб-браузере и проверить работу компонента Bootstrap "Popovers".
Примечание: При сохранении файла веб-страницы в текстовом редакторе обратите внимание на его расширение, которое должно быть "html". Так как некоторые текстовые редакторы, такие например как блокнот, автоматически сохраняют файлы с расширением "txt".
Файловая структура проекта, в основу которого положена платформа Twitter Bootstrap 3:
Демонстрация работы компонента Bootstrap "Popovers":
Нажмите на кнопку
Преимущество использования CSS фреймворков заключается в том, что верстальщику не нужно думать о многих нюансах верстки, которые за него уже продумали создатели фреймворков. К таким нюансам относятся кроссбраузерность, поддержка различных разрешений экранов и многое другое. Верстальщик лишь указывает, что, как и когда нужно показать, остальное фреймворк делает сам. Данный подход может сильно ускорить вёрстку сайта. К преимуществам Bootstrap относится и его популярность. Это означает, что другому верстальщику будет проще поддерживать ваш код.
Недостатком использования фреймворков является тот факт, что странице придется целиком «нести» за собой лишние стили фреймворка, даже если она использует лишь их малую часть. Фреймворк является отличным инструментом для прототипирования и создания страниц, для которых дизайн вторичен, например страницы администрирования. Если же у вас есть очень специфический дизайн, то сверстать его с помощью фреймворка может оказаться сложнее, чем нативными средствами. Тем не менее, и это возможно.
Об использовании Bootstrap В настоящее время есть несколько способов работы со стилями Bootstrap.Без использования LESS Для новичков сам Bootstrap рекомендует следующий подход: нужно скачать с сайта скомпилированный Bootstrap и положить его в свой проект, ничего не изменяя. Затем нужно создать свой пустой CSS файл и подключить его после bootstrap.css.
После этого, для того чтобы изменить стили Bootstrap вам нужно перебить их в своем styles.css примерно в таком виде:
A { color: #beceda; }
Очевидным минусом данного подхода является то, что вам придется вручную искать нужные стили, которые требуется перебить и не всегда это будет тривиально, т.к. некоторые параметры Bootstrap применяются ко многим селекторам в изменённом виде, например через формулы. Небольшую помощь здесь может оказать инструмент Customize , он поможет скомпилировать правильно ваши изменения, но только один раз. Если в будущем вы захотите изменить какой-то параметр, то придется заново вбивать изменненные значения для всех полей, чтобы скомпилировать свои стили.
Существует большое количество способов скомпилировать LESS файлы и Bootstrap оставляет это на усмотрение разработчика. Сам Bootstrap использует для компиляции Grunt , вы можете предпочесть плагин для продуктов JetBrains, а мы, поскольку статья ориентирована на новичков, посмотрим в сторону более простых решений. Такими решениями являются программы WinLess для Windows, SimpLESS для Mac или Koala для Linux. Все эти программы делают примерно одно и то же: получают на вход папку с LESS файлами и слушают изменения в них. Как только вы вносите изменения в любой файл – тут же он компилируется в указанный CSS файл. Таким образом вам нет необходимости запускать компиляцию руками после каждого изменения. Вы изменяете LESS файл, сохраняете его и тут же видите изменения на сайте в уже скомпилированном, сжатом виде.
Создание проекта Первым шагом давайте создадим простую структуру файлов для нашего проекта.
Предварительный осмотр
После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:- Как будут нарезаться изображения?
- Какие будут использоваться компоненты?
- Какими будут основные стили?
- Какой макет страницы у нас получится?
Сохраняем изображение карты:
Сохраним логотипы следующим образом:
Images/logo.png
images/footer-logo.png
Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png
Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Более подробно про склейку изображений описано в первой части. В итоге получится два файла:
/images/social.png
/images/social-small.png
Если окинуть взглядом наш шаблон, то можно увидеть, что нам понадобятся следующие компоненты:
В первую очередь нужно добавить переменные, которых нет в настройках Bootstrap для того, чтобы можно было их использовать в дальнейшем. У нас это только специфический шрифт дизайна.
@brand-font: "Oswald",sans-serif;
Если вы хотите использовать шаблон для русских сайтов, то шрифт Oswald можно попробовать заменить на наиболее близкий Cuprum, который поддерживает кириллицу.
А теперь заменим настройки Bootstrap на свои:
После того, как мы закончили с переменными, давайте начнем прописывать стили нашего дизайна в файле 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.
Whitesquare
В этом блоке создается HTML5 структура документа. В title указываем название нашей страницы – Whitesquare. Метатегом viewport указываем, что ширина страницы на мобильных устройствах будет равна ширине экрана и начальный масштаб будет 100%. Затем подключается файл стилей. И для версий Internet Explorer меньше девятой подключаем скрипты, позволяющие правильно отображать нашу верстку.
Давайте добавим в body следующий код:
Здесь нам встречается первый компонент Bootstrap – колонки . Родительскому элементу колонок задается класс «row», а классы колонок начинаются с префикса «col-», затем идет размер экрана (xs, sm, md, lg), а заканчиваются относительной шириной колонки.
Колонке можно задавать одновременно различные классы со значениями для экранов, например class=«col-xs-12 col-md-8». Эти классы просто задают ширину колонке в процентах для определенного размера экрана. Если колонке не задан класс определенного экрана, то применится класс для минимально определенного экрана, а если и он не указан – то никакая ширина не применится и блок займет максимально возможную ширину.
У нас классы «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 и дает некую «область видимости» правилам.
Вставляем логотип в тег header:
![](https://qpprosto.ru/wp-content/uploads/2019/" alt=)
Дополнительных стилей не требуется.
ПоискДля того чтобы создать поиск, нам понадобятся следующие компоненты Bootstrap: инлайновая форма , сгруппированные контролы и кнопка .
В теге header создаем инлайновую форму, выровненную по правому краю. Поля такой формы обязательно должны иметь класс «form-control» и label.
В форму мы помещаем компонент «сгруппированные контролы». Группировка контролов позволяет убрать отступ между вводом текста и кнопкой и как бы слить их в единый элемент.
Он представляет из себя div с классом «input-group» и полями, а кнопка такого компонента помещается в блок с классом «input-group-btn».
Поскольку нам не нужно показывать label для поля поиска - скроем его классом «sr-only». Это нужно для специальных устройств чтения с экрана.
Кнопке добавляется класс «btn-primary», означающий, что это первичная кнопка данной формы.
…
Search
GO
Всё, что нам осталось - это задать в стилях ширину форме поиска.
Body { … .wrapper { … header { … .form-search { width: 200px; } } } }
МенюДля отображения меню возьмем компонент «навигационная панель » и поместим в него компонент «навигация », которая представляет из себя список со ссылками. Для навигации добавляется класс «navbar-nav», который применяет специальные стили навигации внутри навигационной панели.
Для того, чтобы привести это меню к нашему дизайну зададим следующие значения переменным:
/*высота навигационного меню*/
@navbar-height: 37px;
/*задаем побольше горизонтальный отступ*/
@nav-link-padding: 10px 30px;
/*фон для пунктов меню*/
@navbar-default-bg: @panel-bg;
/*цвет текста в пунктах меню*/
@navbar-default-link-color: #b2b2b2;
/*и при наведении мышки – такой же*/
@navbar-default-link-hover-color: @navbar-default-link-color;
/*фон активного пункта меню – наш специфический голубой цвет*/
@navbar-default-link-active-bg: @brand-primary;
/*цвет текста активного пункта меню*/
@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;
}
}
}
}
Здесь мы рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.
При создании подменю, мы не будем использовать компонент «навигация», так как по стилям он нам не очень подходит, гораздо больше нам подойдет компонент «группированный список ». Каждый элемент такого компонента имеет класс «list-group-item».
Подменю нужно разместить в теге aside. Список ссылок создаем аналогично главному меню.
В настройках компонента укажем, что все группированные списки нужно показывать с фоном и рамкой компонента «панель»:
@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;
}
}
}
}
}
}
Сначала возвращаем элементам списка стандартные стили, так как Bootstrap их перебил на свои. Добавляем отступ снизу. Для подменю применяется более тонкий шрифт и квадратные маркеры. А для ссылок задаем цвета, верхний регистр и убираем подчеркивание. Амперсанд в коде «&.active» по синтаксису LESS во время компиляции заменится на родительский селектор: «.submenu li.active».
Для его отображения нам подойдет компонент «панель », а точнее его вариация «основная панель» (panel-primary) для раскраски заголовка. Этот компонент содержит блок заголовка (panel-heading) и блок содержания панели (panel-body). Изображению карты добавляем класс «img-responsive», который позволит картинке уменьшаться при маленькой ширине экрана.
…
Our offices
В переменных Bootstrap мы уже задали цвет для фона панели (panel-bg), а теперь укажем, что «primary» панель будет иметь серую рамку дефолтной панели, а не голубую, как задано по умолчанию:
@panel-primary-border: @panel-inner-border;
Теперь в стилях сайта нужно изменить стандартные настройки панелей, которые не изменяются через переменные:
Panel {
box-shadow: none;
.panel-heading {
font: 14px @brand-font;
text-transform: uppercase;
padding: 10px;
}
.panel-body {
padding: 10px;
}
}
Здесь мы убрали тень у панелей, поставили свои отступы и задали свой шрифт заголовка.
Этот элемент страницы больше всего похож на компонент Jumbotron . Добавим его в колонку контента:
“Quisque in enim velit, at dignissim est. nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.”
John Doe, Lorem IpsumЧерез переменные для компонента jumbotron зададим белый цвет текста и брэндовый голубой фон:
@jumbotron-bg: @brand-primary;
@jumbotron-color: #fff;
И опишем наши стили:
Body {
…
.wrapper {
…
.jumbotron {
border-radius: 0;
padding: 0;
margin: 0;
blockquote {
border-left: none;
p {
font: 300 italic 33px @brand-font;
text-transform: uppercase;
margin-bottom: 0;
}
small {
text-align: right;
color: #1D8EA6;
font: 300 20px @brand-font;
&:before {
content: "";
}
}
}
}
}
}
В них мы убираем скругление углов, отступы компонента и декорации цитаты, заданные Bootstrap по умолчанию. Также добавим стили наших шрифтов.
Lorem ipsum dolor sit amet…
Donec vel nisl nibh…
Donec vel nisl nibh…
Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью двух колонок:
Класс «thumbnail» превращает изображения в компонент «миниатюра ». Он сделает за нас всю работу по стилизации изображений. Единственное, что нам осталось - это установить свой отступ и цвет рамки в переменных для этого компонента:
@thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;
Блок «Our team»
При верстке этого блока добавим сначала заголовок:
Our team
со стилем:
Body {
…
.wrapper {
…
h2 {
background: none repeat scroll 0 0 #29C5E6;
color: #fff;
font: 300 30px @brand-font;
padding: 0 10px;
text-transform: uppercase;
}
}
}
А затем добавим блок с классом «team», который состоит из двух строк, содержащих карточки сотрудников. Каждая карточка – это колонка. Карточка имеет ширину равную четырем колонкам нашей сетки. Все карточки кроме первой в строке имеют отступ слева, который создается классом «col-md-offset-1». Содержимое карточки состоит из изображения и описания (.caption)
John Doe
Saundra Pittsley
team leader
…
Ericka Nobriga
art director
Cody Rousselle
senior ui designer
…После создания разметки зададим этим элементам следующие стили:
Body {
…
.wrapper {
…
.team {
.row {
margin-top: 20px;
.col {
white-space: nowrap;
.thumbnail {
margin-bottom: 5px;
}
}
.col-md-offset-1 {
margin-left: 3.7%;
}
.caption {
h3 {
font: 300 16px @brand-font;
margin: 0;
}
p {
font: 300 14px @brand-font;
color: @brand-primary;
margin: 0;
}
}
}
}
}
}
Помимо отступов и стилей шрифтов, которые тут задаются, мы изменили класс «col-md-offset-1». Ему пришлось задать отступ 3.7%, т.к. стандартный отступ был слишком большой.
Для начала создадим контейнер футера с этим блоками:
И применим к нему оформление:
Footer {
background: #7e7e7e;
color: #dbdbdb;
font-size: 11px;
.container {
height: 110px;
padding: 10px 0;
}
}
Тег footer задает серую область по всей ширине экрана, а контейнер внутри него отображает область по центру на больших экранах и задает высоту и отступ футера. Для выравнивания блоков внутри футера мы используем колонки.
Twitter feed 23 oct
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
Стили:
Body {
…
footer {
…
.container {
…
h3 {
border-bottom: 1px solid #919191;
color: #ffffff;
font-size: 14px;
line-height: 21px;
font-family: @brand-font;
margin: 0 0 10px;
text-transform: uppercase;
}
p {
margin: 5px 0;
}
.twitter {
p {
padding-right: 15px;
}
time a {
color: #b4aeae;
text-decoration: underline;
}
}
}
}
}
Для всех заголовков футера задаем шрифты и отступы, а также делаем подчеркивание через нижнюю рамку. Для параграфов указываем отступ. Ссылке, отображающую дату, задаем цвет и подчеркивание.
Sitemap
Home
About
Services
Partners
Support
Contact
Ссылкам задаем цвет, шрифт и отступ между ними.
Body { … footer { … .container { … a { color: #dbdbdb; } .sitemap a { display: block; font-size: 12px; margin-bottom: 5px; } } } }
Социальные ссылки
Вставляем набор ссылок в блок с классом «social».
Social networks
И стилизуем их:
Body {
…
footer {
…
.container {
…
.social {
.social-icon {
width: 30px;
height: 30px;
background: url(../images/social.png) no-repeat;
display: inline-block;
margin-right: 10px;
}
.social-icon-small {
width: 16px;
height: 16px;
background: url(../images/social-small.png) no-repeat;
display: inline-block;
margin: 5px 6px 0 0;
}
.twitter { background-position: 0 0; }
.facebook { background-position: -30px 0; }
.google-plus { background-position: -60px 0; }
.vimeo { background-position: 0 0; }
.youtube { background-position: -16px 0; }
.flickr { background-position: -32px 0; }
.instagram { background-position: -48px 0; }
.rss { background-position: -64px 0; }
}
}
}
}
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классам отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью CSS сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.
Copyright 2012 Whitesquare. A pcklab creation
Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:
Body { … .footer { … .container { … .footer-logo { float: right; margin-top: 20px; font-size: 10px; text-align: right; a { text-decoration: underline; } } } } }
На этом вёрстка закончена. Готовый проект можно скачать
Ребята, я считаю, что Bootstrap — очень классная вещь. Почему так, я попытаюсь объяснить в этой статье. Что ж, поехали Я сразу извиняюсь за то, что почти вся первая половина статьи написана без картинок, там только теория, объяснение работы сетки. Но это очень важно! Кому из вас надо, тот возьмет в себя в руки, прочитает, и, я надеюсь, поймет. Вторая половина статья уже воспринимается попроще, там больше примеров со скриншотами.
Bootstrap — что это?Итак, начинаем с важного вопроса. Бутстрап — это css и js-фреймворк, по сути, по сути, набор файлов с готовым написанным кодом. Цель разработчиков практически любого фреймворка — упростить разработку сайта себе и другим, кому будет доступен инструмент. В случае с Bootstrap он полностью бесплатен, так что вы можете использовать его любым образом, редактировать исходный код и как угодно переделывать фреймворк под себя. Это отлично.
Установка BootstrapЕсли вам нужно просто подключить файлы фреймворка к html-документу (например, для практики), просто скачайте фреймворк с официального сайта getbootstrap.com , скопируйте его файлы в проект и подключите те, которые вам нужны. Сделаю краткий обзор этих файлов:
Это стандартный набор фреймворка. На самом деле вы легко можете его кастомизировать и изменять под себя. Например, вообще не использовать скрипты или подключить одну только сетку. В общем, об этом мы также поговорим.
Русская документация BootstrapЗайдя на getbootstrap вы наверняка заметили, что тут все на английском. Нам же пригодилась бы русская справка по фреймворку. Найти ее легко. Для этого перейдите с главной страницы в раздел Getting Started . Листайте в самый низ, там будет ссылка на переводы. Ищите там русский и кликайте по нему. Все, теперь вы на русскоязычной версии сайта. Правда, тут переведено не все, но где-то 70-80% точно, так что все разберетесь.
Сетка БутстрапаКак ни крути, а главным элементом Bootstrap является адаптивная сетка. В общем-то, без нее фреймворк утратил бы практически всю свою ценность, потому именно благодаря сетке можно быстро создавать адаптивные шаблоны. При этом вы можете быть вообще не знакомы с медиа-запросами, они вам и не нужны, потому что фреймворк берет на себя реализацию адаптивности, нужно лишь задать блокам правильные классы.
Что это за классы? Отправляемся к документации, она нам сильно поможет. Зайдите в раздел CSS — Grid System . Общие правила работы с сеткой просты, сейчас перечислю их.
Как работать с сеткой?Представьте себе ее, как html-таблицу. Если вы когда-нибудь писали html-код для таблиц, то знаете, что все содержимое помещается в тег table , один ряд помещается в тег tr , а уже в него помещаются ячейки — td .
Так вот, в сетке все аналогично. Класс container служит общим контейнером для сетки. Есть 2 варианта сетки бутстрапа — полностью резиновая и имеющая все-таки конечную максимальную ширину. Так вот, при задании общему блоку класса container сайт будет иметь максимальную ширину в 1170 пикселей. Больше он расширяться не будет. Естественно, содержимое будет отцентрировано.
Если же задать класс container-fluid , то сетка будет полностью резиновой, то есть не будет ограничений по размеру. Например, если человек откроект сайт на мониторе шириной 1920 пикселей, он увидит его на всю ширину.
Соответственно, первым делом при разработке сайта вы должны определиться, каким будет шаблон — полностью резиновым, или его ширину все-таки нужно ограничивать.
Отлично, в блоке container следует размещать ряд сетки. В него нужно поместить все блоки, которые стоят в одной строке. То есть если мы возьмем самый типичный шаблон: шапка, основная часть, колонка справа и футер, то тут 3 колонки. В первой будет только шапка, во второй — контент и боковая колонка, а в последней — футер. Разметка для такого сайта будет примерно такой:
Шапка Контент... и боковая колонка Футер
Но пока это неправильная разметка, потому что не хватает... чего? Правильно, ячеек! В случае с Bootstrap их еще называют колонками. Сетка бутстрапа состоит из 12 колонок. Ее можно внедрить в любой блок любой ширины, хоть 1200 пикселей, хоть 100. Все это потому, что ширина колонок задана не в пикселях, а в процентах.
Как же работает эта самая 12-ти колоночная система?Итак, мы подошли к самому важному вопросу, связанному с фреймворком. Поверьте, если вы поймете это, все остальное это уже ерунда. Главное понять, как работает сетка, и путь к быстрой адаптивной верстке будет для вас открыт.
Для этого пролистайте документацию чуть ниже, там вы найдете таблицу, в которой содержатся важные свойства сетки.
К слову, сами колонки помечаются в Bootstrap классом col- , но это составной класс, поэтому просто col- никогда не пишут. В Bootstrap есть 4 специальных класса, которые предназначены для управления размерами блоков на разной ширине, вот они:
Вот такие 4 класса, ну а для управления размерами элементов используются числа от 1 до 12, потому что, как помните, колонок в сетке именно 12.
Шапка Контент Боковая колонка Футер
Разобраться в ней достаточно просто. Первым делом создаем шапку, ее вообще можно не помещать в сетку, так как она в любом случае будет занимать 100% ширины (обычно). Но мы все-таки поместим. Что это за класс col-md-12 ? Как я вам уже говорил, просто col- никто не пишет, этим классом мы, по сути, сообщаем браузеру:
Это ячейка | колонка
На средних устройствах (класс md) ее ширина должна составлять 12 колонок из 12, то есть 100% от ширины ряда (row).
Ну а что с шириной на других устройствах? На large (lg) экранах она тоже будет 100%, потому что значения для больших экранов наследуются, а для меньших нет. Все просто: если вы бы написали col-xs-4 , то ширина колонки была бы 33% на всех устройствах, а если col-lg-4 , то только на больших. Вот такая особенность, запомните ее.
Ну а если на меньшие экраны значение ширины не сохраняется, то что происходит? Оно сбрасывается. Вот как это происходит:
col-sm-4 — на маленьких экранах блок будет занимать 33% ширины, таким же он будет на экранах md и lg, но на xs, то есть самых маленьких, ширина сброситься до 100%. Итак, запомните еще 1 простое правило: Если для меньших экранов ничего не задано, то на них блок будет отображаться на 100% ширины.
Контент Боковая колонка
По сути, мы указываем браузеру:
Пусть блок контента будет на ширину 8 из 12-ти колонок и такая ситуация будет на маленьких, средних и больших экранах (достаточно указать для маленьких, для больших экранов, как вы помните, значение наследуется). А вот на самых маленьких экранах блок будет заниматься 100%. Это правильно, обычно на мобильных устройствах сайты идут именно в 1 колонку.
Пусть боковая колонка будет шириной в одну треть ширины ряда на все тех же маленьких, средних и больших экранах.Ну а на самых маленьких, как вы уже поняли, ее ширина также сбрасывается до 100%. Вот так все просто.
Ну а с футером и разбираться нечего. Что ж, базовые принципы работы сетки мы разобрали, но нужно еще посмотреть как работает…
Вложенная сетка BootstrapДело в том, что сейчас с вами мы разбили шаблон лишь на основные блоки, но ведь у них внутри тоже может быть разделение на колонки. Например, в контенте могут выводиться товары в несколько колонок. Как быть? Очень просто — мы создаем внутри точно такую же сетку. Она будет вложенной, но тоже содержит в себе 12 колонок. Если все это обобщить, то вот к какому заключению приходим:
Внутри любого блока может быть неограниченное количество сеток. Например, в блоке с товарами сетка для разделения товаров, в самом блоке с одним товаром можно создать еще одну сетку, например, для разделения цены, информации о наличии и доп. информации.
Сейчас мы с вами попробуем сделать еще одну сетку внутри блока с контентом, чтобы расположить в 3 колонки товары. Итак, берем блок, в котором у нас контент:
Контент
И пишем в него:
Каталог товаров:
Название товара
Описание товара
Как видите, мы создали внутри контента новую сетку — вложили внутрь ряд, а в ряду уже будут 3 блока с товарами. Просто скопируйте блок col-sm-4 с карточкой товара и вставьте его еще 2 раза, получится вот что (картинку товара можно взять любую, я взял велик):
Упустил еще один важный момент, чтобы картинки адаптировались под блоки, в которых находятся, каждой из них нужно задать класс img-responsive . Я если вы, как и я, считаете, что это делать неудобно, то просто напишите в собственном style.css так:
Img{ max-width: 100%; height: auto; display: block; }
Все, сохраните этот код и подключите свой css-файл к проекту. Теперь картинки будут по умолчанию адаптивными.
Ну что, вполне ровненько получилось? Да, а без бутстрапа вам пришлось бы мучиться дольше. Единственное, при создании сетки внутри любого блока уже не нужно создавать в нем блок с классом container . Почему в этом нет необходимости? Да потому что тот блок, в котором создается сетка, и служит контейнером.
Таким образом, вы можете создать сколько угодно колонок в любом блоке и сделать шаблон любой сложности. И все это намного быстрее, чем без Bootstrap, потому что весь css вам придется писать с нуля.
Responsive-утилитыЭто еще одна замечательная возможность бутстрапа. Заключается она в том, что вы можете скрывать или делать видимыми любые блоки на нужной вам ширине. Например, полностью скрыть боковую колонку на узких экранах, добавить какие-то новые элементы на мобильных устройствах, добавить колонку на широких экранах и т.д.
Вариантов применения очень много, но я вам не сказал о самом главном, как использовать эти утилиты? Для этого всего лишь добавьте классы нужному блоку. Если его нужно скрыть, достаточно указать такой класс:
Футер
Что в данном случае сделает класс hidden-xs ? Он скроет футер на экстра-маленьких устройствах. На всех остальных блок будет виден.
Если же вам нужно наоборот показать его только на самых маленьких экранах, нужно использовать класс visible-xs-block . В таком случае блок будет скрыт на всех экранах, кроме самых узких. Итак, классы адаптивных утилит прописываются так:
Ну и парочку примеров, чтобы было понятно:
Вот так вот все работает. Именно так и никак иначе. Надеюсь, вы это поняли. Давайте закрепим на практике. У нас есть тестовый шаблон, хоть и очень примитивный.
Задача: сделать так, чтобы на маленьких экранах исчезала боковая колонка, а на самых маленьких еще и один товар. И чтобы на xs-устройствах товары были уже в 2 колонки, а не в 3.
Попробуйте сделать это самостоятельно, редактируя лишь html-код. Что же нужно сделать? Сначала разберемся с колонкой, чтобы скрыть ее на sm-экранах, всего лишь нужно добавить ей класс hidden-sm .
Отлично, теперь третьему товару нужно добавить класс hidden-xs , и он исчезнет на самых маленьких экранах. Ну а классы оставшихся двух товаров будут таковыми:
То есть на средних устройствах блок будет занимать 4 колонки из 12, что можно перевести в 33,33% ширины, а на экстра-маленьких — 50%. И поскольку один блок с товаром исчезнет на этой ширине, оба блока с товарами аккуратно расположатся в 1 ряд, вот так:
Отлично! Поняв это вы уже сможете манипулировать блоками на веб-странице практически так, как угодно вам. Попробуйте сами себе придумать задачи и реализовать их.
Сдвинь меня полностьюДальше я покажу еще 1 очень хороший прием — возможность сдвигать блок вправо или влево. Допустим у нас не 3 товара в ряду, а 1. И он занимает далеко не всю ширину. А ваша задача — выровнять его по центру. Это легко сделать, если держать в уме, что вы работаете с 12-ти колоночной системой.
Оставим один блок с товаром:
Достаточно произвести простые расчеты, чтобы понять, насколько нужно сдвинуть блок, чтобы отцентрировать его. Его нужно сдвинуть на 4 колонки влево на средних и больших экранах, и на 3 колонки на маленьких. Вот так это выглядит:
Класс col-md-offset-4 говорит: на средних и больших экранах сдвинь блок влево на 33% ширины родительского контейнера (1/3 отступ слева, 1/3 ширина блока, ⅓ отступ справа, получается центровка).
Класс col-xs-offset-6: на экстра-маленьких и маленьких экранах сдвинь влево на 25% (¼ отступ слева, ½ ширина блока, ¼ отступ справа).
Надеюсь, суть вы поняли, и в случае необходимости примените эти классы.
Компоненты Bootstrap и примеры их использованияЯ поздравляю вас. Только что мы прошли самую важную тему, связанную с фреймворком. Именно сетка и работа с ней важны. Работа с компонентами уже заключается в том, что вы просто идете в документацию, копируете там код нужного компонента и, если необходимо, изменяете под себя. Но я все же приведу дальше несколько примеров того, как использовать компоненты.
Быстрые флоаты и отмена обтеканияКлассы pull-left и pull-right позволяют быстро сделать любой блок плавающим, отправив его влево или вправо. Не забывайте при этом про отмену обтекания. Для этого вы можете использовать класс clearfix .
Bootstrap: Горизонтальное адаптивное (мобильное) менюСледующие компоненты мы добавим прямо в шаблон, поэтому, если есть желание работать с кодом, а не просто читать, выполняйте все действия за мной.
Собственно, на Bootstrap очень легко можно сделать не просто адаптивное меню, а так называемое мобильное, которое полностью сворачивается на маленьких экранах и прячется под одну кнопку. Такой прием можно наблюдать во многих адаптивных шаблонах и реализовать его на самом деле очень легко. Код примера мобильного меню есть в документации, я возьму его оттуда и немного переделаю.
Итак, первым делом я удалю блок с шапкой, потому что наше меню, по сути, и будет шапкой в случае с моим шаблоном. Код меню нужно разместить перед всем содержимым сайта, даже перед блоком container . Почему? Да вы сейчас сами увидите, что сетка уже встроена в панель навигации. Итак, вот код:
Кнопка переключения Логотип/название
Искать
То, что кода много, этому не пугайтесь. Вот так теперь выглядит сайт:
Но если меню у вас будет занимать не всю ширину экрана, есть смысл его отцентрировать. Для этого следует после следует создать дополнительный блок-обертку для меню, который разместить после блока с классом container-fluid . Не забудьте закрыть этот блок. Я дал ему класс navbar-wrap . Вот такие стили для него:
То есть можно просто ограничить ширину и отцентрировать. Либо изначально замените container-fluid на container .
Как видите, в меню мы добавили логотип, два простых пункта, выпадающий пункт, форму поиска. То есть получилось много элементов. Вы можете легко кастомизировать меню под себя, добавив ему свои классы. Но сейчас моя цель просто показать вам этот компонент.
Вот так меню будет выглядеть на устройствах с шириной экрана менее 768 пикселей:
Как видите, меню свернулось. Оно раскрывается при клике по кнопке в правом верхнем углу. На экране остался только логотип.
Выпадающее менюЗаодно из примера выше вы сможете понять, как делается в Bootstrap выпадающий пункт меню, выдернем этот код для более детального рассмотрения:
Итак, контейнером для выпадающего пункта служит обычный пункт списка с классом dropdown . Внутри него лежит основная ссылка, клик по которой раскрывает выпадающее меню. Очень важно прописать ей data-атрибут , который вы видите в коде, без него ничего не будет работать. Также вы должны убедиться, что файл bootstrap.js подключен к веб-страницам.
Спан с классом caret — это не что иное, как стрелочка, благодаря которой можно понять, что пункт выпадающий, ну а ниже формируется само меню с помощью стандартного маркированного списка. Вот так, все достаточно просто, вы можете применять этот код для реализации выпадающих пунктов.
Добавляем с помощью Bootstrap хлебные крошки (навигационная цепочка)Во многих магазинах можно встретить так называемый блок хлебных крошек, в котором содержится полный путь к текущей странице. С помощью фреймворка такое тоже легко сделать, смотрите код:
По сути, достаточно нумерованному списку указать класс breadcrumb , а в него вписать обычные пункты списка. Кстати, выровняю по центру заголовки второго уровня в шаблоне (это нужно прописать в css):
H2{ text-align: center; }
Если вы хотите как-то изменить внешний вид хлебных крошек, достаточно обратится в css к селектору.breadcrumb . Например, так можно убрать фоновый цвет:
Breadcrumb{ background: transparent; }
Вот так сейчас выглядит сайт:
По умолчанию таблица будет растянута на все окно, поэтому оборачивайте ее в блок с ограниченной шириной, чтобы ограничить размеры. По умолчанию она выглядит ужасно, но если добавить тегу table класс table , все будет уже гораздо приятнее:
