Стартовый шаблон для верстки на bootstrap 3. Создаем контактную форму с использованием Bootstrap, PHP и AJAX. Какие плюсы использования Bootstrap

Приветствую всех гостей моего блога и гиков веб-разработки. Сегодняшняя публикация будет посвящена ознакомлению с таким востребованным фреймворком, как Bootstrap. Прочитав текущую статью, вы узнаете, для чего он был создан, как работать с bootstrap и как его устанавливать, какие инструменты предоставляет данный фреймворк и где его чаще всего применяют. Ну а теперь вперед разбирать новый материал!

Что же представляет из себя Bootstrap?

Bootstrap – это фреймворк, разработанный специально для верстки фронтенда (внешнего интерфейса) веб-сервисов и приложений.

Он включает в себя стандартные шаблоны, состоящие для типографии, кнопок, форм, различных меню, в том числе и выпадающих меню, таблиц, модальных окон, навигации, слайдеров (обычных и в виде карусели) и других инструментов, и также всевозможные плагины на .

Наиболее популярные среди них – это Tooltip, который отвечает за всплывающие окна, Dropdown — отвечающий за выпадающие списки, Carousel, организовывающий прокручиваемый слайдер, и еще некоторые.

С полным списком существующих плагинов, шаблонов и компонентов можно ознакомиться на официальном сайте http://getbootstrap.com/getting-started/ . Также с его помощью начиная со второй версии можно создавать отзывчивую верстку.

Несколько слов об истории

Считаю, что вам нужно знать немного истории создания описываемого инструмента, чтобы понимать, что к чему.

Bootstrap был создан Марком Отто и Джейкобом Торнтоном специально для социальной сети Twitter. Он выступал в качестве внутренней библиотеки. Именно поэтому иногда можно встретить название Twitter Bootstrap.

Изначально библиотека называлась Twitter Blueprint. Однако к тому моменту, как продукт был выпущен в широкие массы (а это случилось 19 августа 2011 года), его наименование было изменено на Bootstrap. На сегодняшний день существует четыре версии фреймворка.

Наиболее заметной и востребованной на данный момент является Bootstrap 3 . В нем впервые была использована концепция mobile first . Помимо этого, было внедрено множество поправок и улучшений.

Какие плюсы использования Bootstrap?

На самом деле, как и во всех технологиях, использование Бутстрапа ведет за собой как положительные аспекты, так и отрицательные. Поэтому никогда не пользуйтесь данным фреймворком бездумно. В одной из статей я подробно описывал преимущества и недостатки работы с Бутстрапом.

А сейчас я хочу обратить все ваше внимание на удобные готовые решения, которые предоставляет Bootstrap, и их положительные стороны.

Итак, при подключении описываемого фреймворка вам предоставляется возможность использовать такие готовые элементы, как:

• Всевозможные компоненты, в которые входят: панели навигации, выпадающие списки, кнопки, индикаторы процесса, разбиения на страницы и другие;
• JavaScript-плагины, среди которых есть переходы, модальные и выпадающие элементы, всплывающие блоки и подсказки, сворачивание, реализация вкладок, слайдеры и другие;
• Шаблоны сеток, в том числе и плавающих;
• Макеты;
• И конечно же реализация отзывчивого дизайна.

Стоит отдельное внимание уделить сеткам или как о них еще говорят верстке макетов. Сейчас будет небольшой спойлер, уж простите меня, ведь я решил посвятить данной теме отдельную статью, но ничего не поделать!

Благодаря данному инструменту Bootstrap очень часто используется для написания сайтов. Потому что это действительно грамотный и мощный механизм для блочной верстки. Создателями фреймворка было предусмотрено максимальное количество колонок – 12. Этого более чем достаточно для установки «каркаса» .

Помимо этого, в некоторых ситуациях использование Бутстрапа не только упрощает код, а и значительно экономит ваше время. При этом не стоит опасаться, что какие-то элементы не будут работать в проблемных браузерах (да-да, я намекаю на IE), потому что Bootstrap полностью совместим со .

Как подключить фреймворк?

Существует несколько вариантов подключения данного инструмента. Пожалуй, начну с установки загрузочного файла.

Итак, на официальном сайте по ссылке , можно скачать текущие версии Bootstrap-а. Все очень просто. Просто выбираете подходящий для вас установочный пакет и нажимаете на кнопку «Download». На этом же сайте вы можете скачать альфа-версию Bootstrap 4.

Второй способ – это конечно же использование CDN. Так, чтобы подключить последние версии фреймворка, вам необходимо вставить вот такую ссылку:

Если вам нужно подключить уменьшенную версию JavaScript, то коперните вот эту строчку:

Ну а темы подключаются следующим образом:

На русифицированном веб-сайте можно посмотреть обучающее видео по подключению данного фреймворка (http://mybootstrap.ru/video-obuchenie-twitter-bootstrap/ ).

Вот и все, друзья, пришло время прощаться. Не забывайте делиться интересными публикациями с коллегами, а также подписываться на обновления моего блога. Пока-пока!

Здравствуйте, уважаемые читатели блога сайт. В первой части статьи по мы познакомились с возможностями этого фреймворка, узнали о том, что такое отзывчивый дизайн и почему он так важен в нашу эпоху повального роста популярности различных мобильных гаджетов. Там мы также во всех подробностях рассмотрели вопросы подключения Бутстрапа к Html странице (подключение файлов стилей, скриптов и библиотеки jQuery).

Сегодняшняя статья посвящена сеточной системе, используемой в Bootstrap 3. Вы узнаете, какие размеры сеток можно применять, как они себя будут вести на устройствах с разным размером экрана и как самим создавать ряды и ячейки на основе одной или нескольких сеток. Все это будет рассказано на примерах, что, надеюсь, улучшит восприятие.

Как работает сеточная система в Bootstrap 3

Bootstrap 3 идет в комплекте с двенадцатиколоночной сеточной системой , которая рассчитана в основном на мобильные устройства. Т.е. она разработана с прицелом в первую очередь именно на маленькие дисплеи, в уже во вторую — на широкие экраны. В новой версии этого фреймворка есть четыре размера сетки. Всю эту информацию можно подробно изучить на официальном сайте GetBootstrap.com , перейдя на вкладку «CSS» из верхнего меню и выбрав пункт «Grid system» в правом.

Там вы получите полное объяснение принципов работы системы, относящихся к ней медиа запросов и т.п. Тот ряд Html элементов (например, анонсы статей на главной странице), который вы захотите позиционировать в сетке, нужно будет окружить контейнером (например, заключить в теги Div) и прописать для него класс.row (выглядеть открывающий тег в этом случае будет как ).

Ну, а сами элементы внутри ряда вы сможете распределить по одной или сразу по нескольким типам сеток с помощью прописывания атрибута class со значением, например, .col-xs-цифра (в этом случае используется только сверхмалая сетка).

Для примера, если вам нужно получить в результате три равные по размеру колонки, то нужно разделить 12 (размерность сетки в Bootstrap 3) на 3 (требуемое число колонок). Значит для каждого Html элемента внутри ряда (это опять же могут быть контейнеры Div) нужно будет прописать одинаковые классы — . Если нужны колонки не равной ширины, то нужно будет просто соблюсти условие, при котором цифры после col-xs- во всех трех классах в сумме должны составлять 12 (например, 2-4-6). Но прежде давайте рассмотрим, что такое «xs» в этой записи и что это значит?

Чуть ниже в области «Grid options» вы найдет объяснение упомянутых выше четырех размеров сетки современного Бутстрапа.

Сначала идет очень маленькая сетка (в столбце «Extra small devices»), разработанная для мобильных устройств, размер экрана, которых по ширине меньше 768 пикселей (про читайте по приведенной ссылке). Она всегда будет горизонтальной при любом размере экрана, а что это такое, я попробую пояснить чуть ниже. Обратите внимание, что префикс класса для этого типа сетки будет как раз col-xs , как в рассмотренном чуть выше примере.

Если размер экрана устройства лежит в пределах от 768 до 992 пикселей (сейчас это чаще всего планшеты), то для них подойдет сетка Бутстрапа, предназначенная для маленьких девайсов. Называется она малой, а для ее задания используются префиксы класса col-sm .

Для устройств размером экрана больше 992, но меньше 1200 (в основном это мониторы десктопных компьютеров или ноутбуков), имеется сетка для средних девайсов. Называется она средней, и префикс класса у нее col-md .

Ну и для мониторов с размером по ширине свыше 1200 пикселей имеется самая большая сетка с префиксом класса col-lg .

Последние три сетки будут горизонтальными лишь при размерах экрана по ширине больше точки, при которой наступает «коллапс» (слом). Например, для большой сетки на экранах размером меньше 1200 пикселей она перестанет быть горизонтальной и превратится в вертикальную. На странице официального сайта GetBootstrap.com , которую мы сейчас рассматриваем, приведены примеры и пояснения по этому поводу. Однако, на мой взгляд, там все несколько путано и сложно.

Пример работы сеточной системы Bootstrap 3 при разной ширине экрана

Попробую пояснить все это на готовом примере. Вам нужно будет лишь скопировать файлик setka.html (для этого и выберите из контекстного меню пункт «Сохранить по ссылке как...»). Если этот файлик вы напрямую откроете в браузере (кликнув по приведенной ссылке левой кнопкой мыши), то ничего не получится, ибо не подключится фреймворк Бутстрап.

Скачанный файлик setka.html поместите в папку Bootstrap, о которой мы говорили в . Он должен находиться на том же уровне, что и созданный нами ранее файл index.html.

Теперь откройте этот файлик setka.html в любом удобном для вас браузере и произведите ряд экспериментов с размером окна вашего обозревателя, чтобы увидеть работу Bootstrap 3 в действии и понять работу сеточной системы. Каких именно? Сейчас объясню.

У меня разрешение экрана монитора по ширине составляет 1280 пикселей, что больше точки слома в 1200 пикселей, заданной для большой сетки. Что мы видим в результате? Примерно такую картину:

Здесь приведены пять примеров макета сайта, построенных на разных типах сеток:

Первый ряд описан с помощью использования всех четырех сеточных систем, имеющихся на данный момент в Бутстрапе. В зависимости от разрешения экрана устройства, на котором просматривается макет, там будет отображаться название сетки, которая используется в каждой из ячеек (сейчас над первым рядом написано, что используется крупная сетка, а в ячейках «cl-lg» — префикс класса большой сетки). При уменьшении ширины экрана эти надписи будут меняться.

В остальных, расположенных ниже, рядах используется только по одной системе размеров сетки — очень маленькая, маленькая, средняя и большая (именно в такой последовательности).

Таким образом мы сможете пронаблюдать и сравнить, как эти сетки из арсенала Bootstrap 3 работают вместе и как работают по отдельности (при использовании только одного типа). Т.к. мой браузер при снятии предыдущего скриншота был развернут на весь экран (по ширине больший, чем 1200 пикселей), то все эти пять примеров макета сайта развернуты по горизонтали (колонки расположены рядом друг с другом по ширине экрана).

Теперь давайте чуток сузим размер окна браузера, чтобы по, и пронаблюдаем произошедший слом (коллапс).

Текст над верхним рядом и префиксы класса в его ячейках поменялись (для этого использовались классы видимости, о которых еще будем говорить). Теперь уже используется средняя сетка, которая по-прежнему отображается по горизонтали. В это же время самый нижний ряд (который иллюстрирует применение только крупной сетки ) сложился вертикально, т.е. соседние блоки отображаются теперь не друг рядом с другом по ширине, а друг под другом (по высоте).

Получается, что крупная сетка в отсутствии какого-либо внешнего влияния ведет себя именно таким образом — складывается по вертикали на всех устройствах, размер экрана которых по ширине меньше 1200 пикселей. При этом все остальные, используемые в примере сетки, отображаются горизонтально. В первом ряду используется комбинация сеток, поэтому сейчас он контролируется средней сеточной системой (крупная система уже эффекта не имеет).

Давайте еще раз уменьшим размер окна браузера по ширине так, чтобы оно стало. Произойдет очередной слом:

Теперь (исходя из размера экрана) мы работаем с маленькой сеткой. Соответственно, уже не только крупная, но и средняя сетка тоже сложилась вертикально. Ну, а в первом ряду, где используется комбинация сеток, сейчас все контролируется малой сеточной системой Бутстрапа. При этом, в файле setka.html меняется еще и распределение колонок в этом первом ряду, что вовсе не обязательно, но так вполне можно делать для удовлетворения каких-то своих нужд в плане верстки (причем на «раз-два», вообще без проблем).

Продолжаем уменьшать ширину окна браузера до значений. Происходит очередной слом:

В результате, уже не только крупная и средние сетки идут по странице вертикально, но к ним еще присоединилась и малая. Единственной горизонтальной осталась очень маленькая сетка , которая остается таковой (как мы смогли только что убедиться) при любых обстоятельствах. Даже если заузить страницу до сверхмалой ширины, сверхмалая сетка не превратится в вертикальную (даже когда контент не будет помещаться в ячейках).

Этот пример (файлик setka.html) сделан именно. Про то, как там все устроены, мы еще будем подробно говорить. Но пока я хочу обратить ваше внимание лишь на некоторые нюансы, которые вы сможете заметить в исходном коде файла setka.html.

Пояснения к исходному коду нашего примера

Вверху с помощью добавлены стили для визуального оформления макетов (отступы, цвета сеток и т.п.), которые особой смысловой нагрузки не несут. Если прокрутите исходный код вниз, то заметите такой вот блок:

lg Используется крупная сетка для экранов по ширине больше 1200px. md Используется средняя сетка для экранов меньше 1200, но больше 992px. sm Используется малая сетка для экранов меньше 992, но больше 768px. xs Используется сверхмалая сетка для размеров экрана меньше 768px, которая всегда остается горизонтальной.

Здесь четыре контейнера, для которых назначены разные классы (читайте про ). Они позволяют отображать конкретный контент в зависимости от медиазапросов, соответствующих различным размерам сетки. Как это работает? Все четыре заголовка загружаются в браузер (если посмотреть исходный код), но только один заголовок отображается в зависимости от текущего разрешения экрана или размера окна браузера.

.col-lg-4 .col-md-1 .col-sm-5 .col-xs-5 .col-lg-4 .col-md-5 .col-sm-1 .col-xs-6 .col-lg-4 .col-md-6 .col-sm-6 .col-xs-1

Это мастер-сетка , где скомбинированы все четыре сеточные системы (вы это можете видеть по атрибутам ячеек подобным class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , в которых перечислены префиксы классов всех четырех сеток). Сам ряд, как уже упоминалось выше, задается с помощью помещения всех составляющих его элементов в контейнер с классом class="row" (в нашем примере это контейнер на основе div).

Обратите внимание, что мастер-сетка у нас состоит из трех ячеек (колонок) и если вы сложите все цифры, которые приписаны для каждой из колонок, например, для префиксов сверхмалой сетки Бутстрапа (col-xs), то получите в сумме 12. То же самое будет справедливо и для цифр, стоящих после префиксов всех остальных систем. Оно и понятно, ибо этот фреймворк, как уже говорилось выше, имеет 12 колоночную структуру, т.е. по горизонтали все доступное для макета пространство разделено на двенадцать равных по ширине колонок (невидимых на сайте — они подобны клеточкам в школьных тетрадях).

Ну и с помощью цифр после префиксов классов вы просто задаете пропорции для каждой из ячеек (реальных колонок) своего макета. Т.е. пропорции могут быть например, такими:

Вообще, можно использовать как одну, так и две, три или все четыре сеточные системы в одном макете (строке). Все это зависит от ваших предпочтений в дизайне и того, что вы пытаетесь добиться от свой вебстраницы (как это должно все выглядеть при разных расширениях экрана). На официальном сайте приведен пример:

Создание рядов (строк) и ячеек с помощью классов Бутстрапа

Давайте теперь для наилучшего понимания создадим Html страницу, чем-то напоминающую реальную вебстраницу (с хедером, текстовым и графическим содержимым, а также футером) и разметим ее с помощью сеточной системы Bootstrap 3.

Точнее, создам заготовку я сам, а вам лишь предложу по аналогии с предыдущим примером скачать файлик sait.html (для этого и выберите из контекстного меню пункт «Сохранить как...»), чтобы уже потом вместе дописывать к этой «рыбе» нужные классы бутстрапа. Его также нужно будет поместить в папку Bootstrap на тот же уровень, что и созданный нами в первой статье файлик index.html (и setka.html, с которым мы работали чуть выше).

Если вы посмотрите исходный код файла sait.html, то увидите, что в нем уже подключен Бутстрап и jquery, а также добавлен контент для имитации внешнего вида среднестатистической вебстраницы. Да, еще папочка с используемыми на этой странице изображениями вам понадобится. Скачать ее можно отсюда — img.zip . Просто распакуйте архив и поместите папку img (проверьте, чтобы внутри нее лежали файлы изображений, а не еще одна папка img) в папку Bootstrap на один уровень с файлом sait.html. Структура получится такая:

Теперь, (из папки Bootstrap) в браузере, вы увидите ту вебстраницу, которую я использовал в качестве примера. Бросается в глаза то, что все блоки на странице расположены друг под другом, а это сильно мешает правильному визуальному восприятию информации. Было бы логично разместить их в колонки и чтобы при уменьшение размера экрана «дизайн отзывался» на это, изменяя число колонок для создания удобства просмотра на устройствах с разной шириной видимой области.

В исходном Html коде файла sait.html я использовал , чтобы показать границы предполагаемых мною рядов (строк), для которых мы будем настраивать отображение колонок с использование каких-то сеточных систем Бутстрапа. Рядов всего четыре (они пронумерованы на приведенном скриншоте) — хедер (шапка с названием сайта и логотипом), заголовок и описание страницы, содержательная часть (основной контент, состоящий из анонсов четырех статей) и футер.

Теперь нам нужно будет добавить в файл sait.html разметку Бутстрапа, которая. Для создания рядов, как вы помните, достаточно будет заключить все его содержимое в контейнер (чаще всего это теги Div, хотя могут быть и другие) и прописать в нем класс class="row" . Для первого ряда это будет выглядеть так:

сайт

То же самое нужно проделать и для всех остальных рядов (строк) — поставить открывающий тег в начале будущего ряда и тег — в его конце. Показывать весь код файла sait.html с внесенными изменения не буду, ибо он слишком объемный.

Использование разных сеток для создания колонок с контентом при разной ширине экрана

Теперь давайте займемся формированием ячеек в тех строках (рядах), где это имеет смысл делать. Вполне логичным будет разместить анонсы статей (из третьего ряда) в четыре колонки, а при уменьшении ширины экрана пусть эти четыре колонки преобразуются в две. Как это сделать? Давайте посмотрим.

Итак, в Bootstrap 3 имеет место быть 12-ти колоночная сетка, о которой мы говорили выше. Раз мы задумали сделать четыре колонки с анонсами, то было бы логичным сделать их равными по ширине, а значит каждая из колонок будет шириной в три клетки (ячейки) нашей невидимой сеточной системы (вне зависимости от того, какую по размеру сетку мы выберем — сверхмалую, малую, среднюю или большую).

Какую сетку выбрать для работы? Давайте возьмем для начала среднюю, как компромиссный вариант. В этом случае в контейнеры всех четырех ячеек нужно будет добавить класс «col-md-3» — . Покажу на примере кода одной ячейки, чтобы не загромождать статью:

После сохранения произведенных изменений вы увидите, что наша вебстраница приобрела уже гораздо более юзабельный вид:

Правда, при уменьшении окна браузера до ширины меньшей точки слома (в случае используемой нами средней сетки это будет 992 пикселя), все анонсы опять выстроятся в столбик, что не есть хорошо, ибо юзабилити в этом случае снижается (разрешение в почти 1000 пикселей позволяет более плотно располагать информацию). Для исправления этой ситуации можно добавить еще одну сетку из арсенала Бутстрапа для тех же самых ячеек с анонсами. Как это сделать? Давайте посмотрим.

Давайте с помощью префиксов «col-xs-6» к названию класса в каждую ячейку с анонсом (в результате получится составной класс class="col-md-3 col-sm-6"). Выглядеть это будет так (на примере одной ячейки):

Google AdWords - создание групп

Текст анонса.

Как видите, мы здесь нарушили недавно озвученное правило, что числа после префиксов одной сетки во всех ячейках в сумме должны давать 12. У нас же получилось 24 (четыре раза по шесть). Но сделали мы это специально, чтобы добиться желаемого результата — получить вместо четырех две колонки при проходе точки срыва для средней сеточной системы Bootstrap (это 992 пиксела). Т.е. ячейки расположатся в двух строках по две штуки в каждой:

Т.к. мы выбрали сверхмалую сеточную систему, то при дальнейшем уменьшении ширины окна браузера вертикального расположения блоков с анонсами друг под другом (размещения в одну колонку) не произойдет, ибо эта система всегда остается горизонтальной.

Если же вы хотите, чтобы четыре колонки при уменьшении ширины экрана превращались в две, а потом уже в одну колонку, то следует использовать вместо «col-xs-6» малую сеточную систему с помощью «col-sm-6» :

Яндекс Директ - основы создания кампании

Тогда, при уменьшении ширины окна браузера ниже 768 пикселей, вы увидите слом, при котором две колонки с анонсами преобразуются в одну. Просто поэкспериментируйте и почувствуйте разницу.

Настраиваем шапку вебстраницы с помощью Bootstrap 3

Давайте еще поэкспериментируем и попробуем, в котором имеется по сути две потенциальные ячейки — название сайта с описанием, а также логотип. Собственно, их и будем позиционировать. Давайте используем на этот раз большую сетку с помощью «col-lg-6» , чтобы получились две равные колонки.

сайт

Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Правда при использовании большой сетки слом происходит на довольно-таки больших разрешениях экрана (окна браузера, в нашем случае, ибо мы там имитируем устройства с различной шириной экрана). После чего ячейки складывают по вертикали. Чтобы этого избежать, мы добавим еще одну сетку Bootstrap 3 для первого ряда . Думаю, что подойдет малая сеточная система (префикс класса col-sm). Тогда код будет выглядеть примерно так:

сайт

Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Однако, я не стал делать для малой сетки ячейки с названием сайта и логотипом одинаковыми, ибо логотип существенно Уже (в смысле, узкий) названия с описанием. При меньшей ширине экрана выделять им равные ячейки было бы не логично. Поэтому я и сделал первую колонку с названием и описанием сайта при активации малой сеточной системы Бутстрапа в два раза больше колонки с логотипом.

В итоге, при уменьшении окна браузера, эти ячейки будут сближаться вплоть до момента слома для малой сеточной системы Бутстрапа, который наступит при ширине менее 768 пикселей, и тогда обе ячейки расположатся друг под другом.

Наверное, вы заметили, что текст страницы врезается в левый край экрана, что вызывает . Можно добавить для исправления данной ситуации в тег body, что позволит. А можно все решить стандартными средствами Bootstrap 3.

Для этого нужно будет все содержимое вебстраницы (все, что заключено в тегах Body) обернуть в контейнер Div с одноименным классом — . Т.е. ставите этот тег сразу после открывающего тега Body, а закрываете его перед вызовом скриптов, которые расположены непосредственно перед закрывающим тегом Body. После этого текст уже не будет упираться в окно браузера.

Также вы можете видеть, что картинки анонсов наезжают друг на друга при уменьшении ширины экрана. Дело в том, что они пока еще «неотзывчивые», но мы их сделаем таковыми в следующих статьях этой рубрики. А также мы продолжим разбирать работу с сеточной системой Bootstrap 3, научимся оформлять кнопки, таблицы, Html формы, создавать выпадающие меню, навигацию и многое другое. Поэтому не переключайтесь и следите за новыми публикациями.

Продолжение следует >>> (Вы можете подписаться на рассылку , чтобы его не пропустить)

А вот и продолжение вышло: (но вы все равно подписывайтесь — будет еще много интересного и полезного).

Статья, в которой рассмотрим сайты, предлагающие веб-дизайнерам, разработчикам или просто любителям бесплатные шаблоны (templates) и темы (themes) для Bootstrap.

Сайты, на которых можно бесплатно скачать Bootstrap шаблоны

Данный сайт содержит бесплатные темы и шаблоны Bootstrap как для личного так и для коммерческого использования. Все шаблоны разложены по категориям "лендинг страницы", "одностраничные сайты", "блоги", "портфолио" и т.д.

На данном сайте доступны для просмотра и скачивания бесплатные адаптивные шаблоны Bootstrap. Страница этого ресурса состоит из двух разделов. В первом разделе (вверху страницы) распологаются платные шаблоны, а во втором разделе (внизу страницы) - бесплатные.

Сайт Bootswatch содержит бесплатные темы для Bootstrap, которые отличаются от оригинальной только тем, что они выполнены в другой цветовой палитре. Кроме этого данные темы очень просты в установке, достаточно скачать CSS файл и заменить им оригинальный файл Bootstrap.

На этом сайте представлены бесплатные и платные темы. Правда выбор бесплатных тем, да и платных не так велик. Но, зато на PrepBootstrap содержится для фреймворка Bootstrap очень большое число HTML виджетов и компонентов (более 100).

Данный сетевой ресурс содержит неплохие темы для Bootstrap. Среди них встречаются как бесплатные, так и платные темы. Отличительной характеристикой данного ресурса является то, что каждая тема представлена в виде статьи, к которой можно оставить комментарии.

Сайт, на котором представлено очень большой выбор тем для Twitter Bootstrap. Для удобства поиска все темы сгруппированы в категории подобно тому, как это сделано на сайте Start Bootstrap.

Сайт Free CSS содержит большое количество тем, включая темы для платформы Twitter Bootstrap. Каждую из тем можно вживую посмотреть с помощью кнопки "Live Demo" и при желании скачать.

На этом сайте представлены бесплатные HTML5 шаблоны, построенные на основе фреймворка Bootstrap. Все шаблоны являются адаптивными. Увидеть как будет выглядеть тот или иной шаблон на различных устройствах можно с помощью соответствующих кнопок в режиме живого просмотра.

На сайте WebThemez доступны для скачивания более 200 бесплатных шаблонов для Bootstrap. К каждому шаблону приложено описание и его ключевые особенности.

Доброго времени суток, дорогие подписчики, а также гости данного блога. В одной из прошлых статей я подробно рассказывал о том, как организовывается Bootstrap разметка при помощи сеток . Сегодня же я объясню, как правильно рассчитывать размеры колонок для страниц сайтов, покажу, где можно найти готовые макеты веб-сервисов, а также сверстать шаблон самому.

Отдельное внимание я хочу уделить рассмотрению преимуществ верстки с помощью фреймворка для девайсов с разными размерами экрана. Ну и конечно же не оставлю вас без примера программного кода. Поехали!

Освежим память

Для разбора дальнейшего материала стоит вспомнить, что в Bootstrap 3 Grid System делится на 12 колонок . Если вы хотите увидеть на своих веб-страницах аккуратно выполненный и не поплывший дизайн, то придерживайтесь главного правила: сумма всех колонок в одной строке должна ровняться четко 12. Ни больше, ни меньше.

Для реализации описываемого механизма можно воспользоваться двумя встроенными классами, которые определяют вид разметки макета. К ним относится .container и .container-fluid . Второй класс определяет так называемые плавающие сетки.

Часто слышу вопросы: «А как легко запомнить раз и навсегда разницу между этими двумя контейнерами?». Дорогие читатели, на самом деле все очень просто:

.container – фиксированная ширина (fixed-width), т.е. такой макет будет растягиваться только до определенной ширины и по бокам от края окна будут отступы.

. container- fluid – максимальная ширина (full-width), т.е. в этом случае веб-страница будет занимать всю возможную ширину экрана и отступов никаких не будет.

Также стоит вспомнить, что есть классы, создающий строки – . row – и колонки – . col- X- Y , где вместо X указывается расширение экрана устройства (при помощи специальных классов), а вместо Y – количество колонок.

Чтобы аккуратно распределить информацию по странице , нужно для начала определить, сколько место необходимо выделить для того или иного объекта. И в гридах деление на колонки можно сравнить с объединениями ячеек в таблицах html.

К примеру, если вам нужно выделить место для бокового меню с левой стороны и основного контента с правой, то задайте навигации класс . col- md-3 , а главному блоку – . col- md-9 .

И запомните, даже если для контента вам необходимо использовать всю возможную ширину окна, т.е. 12 колонок, не вставляйте его в блок строк. По правилам контент должен располагаться в пределах блока колонок, а они в свою очередь должны быть вложены в блоки строк.

Шаблончики, да макетики

Ну а теперь я могу перейти к описанию шаблонов. На основе системы Grid было создано огромное количество различных макетов, большинство которых выложены в Интернет в публичный доступ. Я хочу посоветовать вам одну ссылку с готовыми шаблонами и открытым кодом, примеры с которой отлично подойдут для обучения. Это http://www.w3schools.com/bootstrap/bootstrap_templates.asp .

Перейдя по ней, вы найдете 8 готовых решений различных типов сайтов . Программную реализацию каждого из них желательно проанализировать, видоизменить и после сверстать свой собственный Дизайн.

И вот тут стоит обратить внимание на главное преимущество верстки в изучаемом фреймворке . Его создатели предусмотрели множество полезных классов и других плюшек, которые обеспечивают сайт отзывчивостью. Это решает множество проблем, благодаря чему вам достаточно создать одну версию веб-сервиса и она будет корректно отображаться как на мобильных устройствах, так и на десктопах.

Если вы изучали css, то там существуют медиазапросы, с помощью которых определяется внешний вид дизайна в зависимости от размера экрана. «А что же обеспечивает отзывчивость в Bootstrap?» – спросят некоторые из вас. Ответ: все те же медиазапросы. Однако в этом случае они уже прописаны во встроенных классах, которых всего 4. Давайте подробнее рассмотрим их.

	Экстра-маленькие девайсы (Смартфоны)	Маленькие девайсы (Планшеты)	Средние девайсы (Персональные компьютеры)	Большие девайсы (Персональные компьютеры)
Разрешение	767px	>991px	>1199px
Ширина контейнера	None (auto)	750px	970px	1170px
Класс	-xs-	-sm-	-md-	-lg-
Ширина колонки	auto	~62px	~81px	~97px

А теперь вспомните, как я выше прописывал . col- X- Y . Так вот название одного их этих классов нужно подставлять вместо X.

Как же функционируют данные классы? Если вы зададите, например, col- lg-6 , то при уменьшении ширины экрана начиная сразу с 1199px все колонки выстроятся одна под другой и займут все 12 ячеек.

Если же вы выберете класс sm , то такое произойдет, начиная с 767px. При этом данные параметры можно комбинировать и менять переменную Y.

Для закрепления рассмотрите пример с использованием -sm- .

Вы можете запустить пример в любом онлайн-редакторе кода. На экране у вас отобразится макет сайта с навигационной панелью с левой стороны и основным блоком с выделенными статьями с правой.

Однако вы можете видоизменить дизайн и разместить меню сверху, а контент по центру, или же подобрать другие варианты в существующих в сети генераторах. Обязательно поиграйтесь с четырьмя выше перечисленными классами и сравните поведение сайта при разных параметрах.

На этом уроке узнаем, как скачать и подключить фреймворк Bootstrap (версию 3 или 4) к сайту.

Набор инструментов для изучения Bootstrap

Минимальный набор инструментов (программ) для создания веб-проектов на фреймворке Bootstrap:

• текстовый редактор для работы с кодом ("Блокнот", "Brackets", "Notepad++" или др.);
• браузер (Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer или др.).

Загрузка фреймворка Bootstrap

Создание веб-проекта, в основу дизайна которого положен фреймворк Bootstrap всегда начинают с его загрузки. Загрузить фреймворк Bootstrap можно различными способами . Например, посредством ссылки, расположенной на сайте getbootstrap.com или с помощью пакетного менеджера npm, Composer, Bower или др. Способ как это осуществить зависит от вашего опыта или конкретной ситуации .

Как установить фреймворк Bootstrap с помощью пакетных менеджеров, а также как осуществить его сборку посредством Grunt, можно почитать в этой статье .

Наиболее просто выполнить загрузку – это воспользоваться ссылкой . На сайте Bootstrap присутствуют 2 ссылки.

Первая ссылка содержит готовые к использованию файлы CSS и JavaScript . Эту сборку в основном используют для изучения фреймворка или для использования в проектах, дизайн которых может быть выполнен в стилях заложенных авторами по умолчанию.

Скачать Bootstrap 3.4.1 Скачать Bootstrap 4.3.1

Вторая ссылка содержит фреймворк в исходных кодах . Эта версия более удобна для разработки сайтов, т.к. позволяет очень просто изменить стили, цветовую гамму компонентов, выполнить их настройку и др. Но эти исходные файлы, перед тем как использовать на странице, нужно будет скомпилировать и минимизировать. Данный процесс обычно автоматизируют, например, с помощью Gulp.

Исходные коды Bootstrap 3.4.1 Исходные коды Bootstrap 4.3.1 Распаковка архива Bootstrap

После скачивания архива (с готовыми к применению CSS и JavaScript файлами), его необходимо распаковать в каталог вашего веб-проекта.

Если рассмотреть архив, то можно заметить, что он имеет следующее содержимое (на примере Bootstrap 3.4.1):

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

В каталоге css находятся стили фреймворка Bootstrap, а в js - плагины для обеспечения работы некоторых компонентов. Плагины написаны с использованием функций библиотеки jQuery. Поэтому перед Bootstrap JS необходимо подключить библиотеку jQuery.

Как вы можете заметить, в архиве есть 2 версии CSS и JavaScript файлов, т.е. с суффиксом min и без него. Версия файла с min ничем ни отличается от без min , она просто минимизирована (сжата).

В продакшене (на рабочем сайте) лучше использовать минимизированные версии файлов. Эти файлы имеют меньший размер, и, следовательно, обеспечивают более быструю загрузку страниц сайта.

Не минимизированные версии более удобно использовать при разработке, а также для изучения.

Кроме этих файлов, в данный архив ещё входит иконочный шрифт "Glyphicons" . Шрифт "Glyphicons" насчитывает более 250 иконок из набора "Glyphicon Halflings". Шрифт представлен с помощью 4 файлов: glyphicons-halflings-regular.eot , glyphicons-halflings-regular.svg , glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.woff).

Такое разнообразие форматов одного и того же шрифта необходимо для того чтобы обеспечить его отображение во всех браузерах.

Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье .

Архив фреймворка Bootstrap 4 практически ничем ни отличается от Bootstrap 3 . Основное его отличие в том, что он не содержит шрифт "Glyphicons" . Если вам нужны шрифтовые иконки, то их необходимо будет подключить самостоятельно. Например, воспользовавшись одним из следующих наборов: FontAwesome , Octicons, Glyphicons, IcoMoon или др. Если же вы не хотите использовать готовый шрифт, а создать свой, который будет состоять только из нужных значков, то воспользуйтесь этой информацией .

Кроме этого архив Bootstrap 4 содержит ещё файлы bootstrap-grid.css и bootstrap-reboot.css . Данные файлы необходимы только тем, кому нужен не целый фреймворк, а только его часть .

Первый файл (bootstrap-grid.css) содержит сетку Bootstrap , а второй (bootstrap-reboot.css) - нормализатор, который устанавливает базовые стили, для того чтобы они у всех HTML-элементов во всех браузерах были одинаковыми.

Подключение Bootstrap к HTML странице

Процесс установки фреймворка Bootstrap 3 состоит из подключения следующих файлов к HTML 5 странице:

Bootstrap CSS (bootstrap.min.css);

Последней версии библиотеки jQuery (необходима для работы JS плагинов Bootstrap);

Bootstrap JavaScript (bootstrap.min.js).

Примечание: Файлы JavaScript лучше подключать перед закрывающим тегом body (), так как это обеспечит более быструю загрузку и отображение основного контента веб-страницы.

...

Подключение фреймворка Bootstrap 4 осуществляется так:

...

Подключить Bootstrap 4 можно также с помощью CDN (при этом скачивать Bootstrap в проект не нужно):

Скопировано

...

CDN Bootstrap 3.4.1:

Скопировано

Для проверки работоспособности фреймворка, создадим кнопку, при поднесении к которой будет показываться всплывающая подсказка popover.

Поднеси ко мне курсор $(function () { $("").popover({trigger:"hover"}); });