Bootstrap для новичков, что это и как его установить. Начало работы с Bootstrap

05.05.2019

» мы познакомились с фреймворком, разобрали его преимущества, вкратце рассмотрели его так называемую сетку, теперь пришло время на практике разобрать, как пользоваться Bootstrap.

Скачать Bootstrap можно с официального сайта getbootstrap.com . На главной странице жмем на кнопку «Download Bootstrap ».

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

После скачивания и распаковки архива мы получаем три папки:

CSS - папка со стилями
JS - папка с js скриптами
FONTS - папка с иконочными шрифтами

Это и есть весь фреймворк. Для дальнейшей работы с Bootstrap я создам папку с одноименным названием bootstrap , в папке создам один пустой файл index.html и буду наполнять папку и файл попутно с разбором фреймворка в данной статье, а в конце поста дам ссылку, чтобы Вы могли посмотреть результат. Если будите повторять за мной, то поймете, что работать с фреймворком действительно легко.

Из скаченного фреймворка нам потребуется папка fonts полностью, один файл стилей из папки css с названием bootstrap.css или bootstrap.min.css и аналогично один скрипт из папки js с названием bootstrap.js или bootstrap.min.js .

Отличие файлов с «.min.» от обычных в том, что файлы с «.min.» оптимизированные, то есть код написан в одну строку без переносов строк и пробелов, поэтому они весят меньше обычных, а содержимое файлов абсолютно одинаковое.

Теперь я создам в своей папке bootstrap папку css , помещу в нее файл bootstrap.min.css и создам папку js , в которую положу bootstrap.min.js . Дополнительно в папке css создам пока пустой файл style.css для добавления собственных стилей.

Нужные файлы фреймворка перенесены, и теперь будем работать только с файлом index.html . Чтобы не писать код самостоятельно, обратимся к документации, на странице скачивания официального сайта ниже есть уже готовый HTML-скелет документа, копируем его и вставляем в наш индексный файл.

В скелете уже подключаются наш файл стилей, js скрипт и библиотека jQuery , но если вы делаете не на «бутстраповском » шаблоне, а на каком-то своем, то нужно между тегами подключить файл стилей bootstrap.min.css , а после него созданный style.css .

Затем перед закрывающим тегом сначала подключаем библиотеку jQuery .

А после библиотеки подключаем js скрипт.

В общем, HTML-скелет документа получается вот такой.

Bootstrap

Подготовительный процесс закончен, Bootstrap подключен, можно идти дальше и заняться наполнением нашей WEB-страницы компонентами фреймворка.

Как пользоваться документацией

Документация у фреймворка очень хорошая, что делает его простым в использовании. В главном меню официального сайта несколько разделов: «Getting started », «CSS », «Components », «JavaScript » и «Custimize », на странице каждого раздела в правой колонке находятся названия разных компонентов, кликнув по которым показывается их описание и варианты использования в виде готового кода.

Если сложности с английским языком, то в сети есть несколько ресурсов с переведенной документацией, вот адрес одного из таких сайтов www.oneskyapp.com/ru/docs/bootstrap . Также можно воспользоваться каким-нибудь переводчиком для браузера, перевод будет, конечно, кривоватый, но суть написанного будет ясна. В общем, просто нужно читать документацию, брать примеры кода и практиковаться.

Работа с сеткой Bootstrap

Как я говорил в прошлой статье, сетка работает по принципу таблицы, включая в себя ряды .row и колонки .col , колонок может быть максимум двенадцать. К классу.col добавляются префиксы (lg , md , sm , xs), которые указывают ширину данного столбца на конкретном разрешении экрана.

Оборачиваются ряды со столбцами в блок с классом .container или классом.container-fluid . Различие между ними в том, что у класса.container максимальная ширина 1170 пикселей, а у класса.container-fluid — ширина не ограничена, то есть на всю ширину экрана, даже если разрешение экрана очень большое. Полную информацию о сетке Bootstrap смотрите в документации раздела «CSS ».

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

HEADER CONTENT SIDEBAR FOOTER

Для разделения блоков я прописал два дополнительных класса: .block , .block2 и добавил в них по паре правил в созданном файле style.css .

Block{ background: #eee; border: 1px solid #000; } .block2{ background: #ccc; border: 1px solid #000; }

Добавим иконочный шрифт к нашим заголовкам. В разделе «Components » выбираем понравившиеся иконки, копируем текст под изображением, этот текст является классом. Создаем внутри тега заголовка тег и вставляем скопированный класс.

HEADER

Теперь не мешало добавить какое-то меню. Для этого в разделе «Components » переходим в «Navbar », выбираем понравившееся меню, копируем код и после открывающего тега , вставляем.

Осталось заполнить «conten t» и «sidebar ». Все делаем по той же схеме: выбираем компонент в документации, читаем описание, копируем и вставляем в нужное место. Я добавлю форму и кнопку, кликнув по которой будет вызываться модальное окно с таблицей.

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

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

В третьем уроке немного теории о построении шаблона и сетке Bootstrap.
Bootstrap видит шаблон сайта следующим образом

В построение шаблона с помощью Bootstrap используются три уровня вложенности

Первый уровень это container — область в которой размещаются все блоки сайта.(Красная рама)
Второй уровень это row — область в которую помещаются блоки для материала
Третий уровень для разных устройств он разный. Это уже сам материал.

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

, роль row отводится тегу и последний уровень это сама ячейка с материалом ).

Сетка Bootstrap

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

Bootstrap 101 Template Hello, world! This is Photoshop"s version This is Photoshop"s version This is Photoshop"s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh This is Photoshop"s version This is Photoshop"s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh This is Photoshop"s version This is Photoshop"s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh

Скачайте пример запустите файл index.html и потихоньку начинайте изменять размер браузера. Вы увидите три состояния которые прописаны в шаблоне.

В примере используется следующая конструкция

Hello, world! This is Photoshop"s version This is Photoshop"s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh ....

col-sm -это класс для маленьких устройств (ниже будет приведена таблица ).

col-md предназначена для устройств с шириною 970px и выше. col-md имеет следующую структуру.
col-md -[дальше идет цифра, которая обозначает количество занимаемых ячеек всего их по умолчанию 12 ] я задал 3 поэтому изначально шаблон поделен на 4 столбца. Если задать 4-м div-ам значение col-md-6, то мы получим страницу в два столбца. Соотношение ячеек должно давать в сумме — 12. Попробуйте задать значение 8:4. Тогда в результате получите первую ячейку по ширине превышающую вторую в два раза.

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

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

Очень маленьких устройств
Телефоны(

То, что кода много, этому не пугайтесь. Вот так теперь выглядит сайт:

Но если меню у вас будет занимать не всю ширину экрана, есть смысл его отцентрировать. Для этого следует после следует создать дополнительный блок-обертку для меню, который разместить после блока с классом 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; }

Вот так сейчас выглядит сайт:

Bootstrap таблицы

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

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

Если вы хотите сделать таблицу полосатой, то есть чтобы у рядов чередовался фоновый цвет — добавьте класс table-striped . Чтобы при наведении на ряд таблицы он подсвечивался другим цветом, используйте класс table-hover .

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

Естественно, вы можете без проблем прописать свои собственные классы в style.css и использовать их. На этом с таблицами заканчиваем.

P.S. Статья будет дописываться и дополняться...

Итог

Надеюсь, статья была полезна и вы смогли понять самое важное. Любые вопросы можете задавать с помощью комментариев.

Перед загрузкой убедитесь, что у вас имеется редактор кода (мы рекомендуем Sublime Text 3) и некоторые знания в области HTML и CSS. Здесь мы не будем затрагивать исходные файлы, но скачать и изучить их Вы всегда можете сами. Мы сфокусируем наше внимание на начале работы с компилированными файлами Bootstrap.

Загрузка компилированных файлов

Самый быстрый способ начать работу: получить компилированные и минимизированные версии наших CSS, JS, и изображений. Никаких документов или исходных файлов.

2. Структура файлов

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

После загрузки распакуйте сжатую папку, чтобы увидеть структуру (компилированого) Bootstrap. Она должна быть примерно такой:

bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . min . css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . min . js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halflings - white . png L-- README . md

Это основная форма Bootstrap: компилированные файлы для быстрого и легкого использования почти в любом Web-проекте. Мы предоставляем вам компилированные CSS и JS (bootstrap.*), и также компилированные и минимизированные CSS и JS (bootstrap.min.*). Файлы изображений сжаты при помощи ImageOptim , приложения Mac для сжатия изображений в PNG.

Пожалуйста, обратите внимание, что все плагины JavaScript требуют jQuery.

3. Что включено

Bootstrap оснащен HTML, CSS и JS для всех видов работы, они все перечислены в категориях, которые вы можете найти в верхней части страницы .

Разделы документов Поддерживаемые элементы

Общие стили для тела (body) для сброса типа и фона, стилей ссылок, сетки шаблонов и двух простых элементов разметки.

Стили CSS

Стили для общих элементов HTML: оформления, кода, таблиц, форм и кнопок. Также включает в себя Glyphicons , великолепный набор иконок.

Компоненты

Основные стили для простых компонентов интерфейса: вкладок и кнопок, панелей навигации, сообщений, заголовков страниц и др.

Плагины Javascript

Как и компоненты, эти плагины Javascript являются интерактивными компонентами для всплывающих подсказок, информационных блоков, модальных компонентов и др.

Список компонентов

Все вместе компоненты и плагины Javascript содержат следующие элементы интерфейса:

Группы кнопок
Выпадающие списки кнопок
Навигационные вкладки, кнопки и списки
Панель навигации
Ярлыки
Бейджи
Заголовки страниц и элемент hero
Миниатюры
Сообщения
Индикаторы процесса
Модальные элементы
Выпадающие списки
Всплывающие подсказки
Информационные блоки
Элемент «Гармошка»
Элемент «Карусель»
Опережающий ввод с клавиатуры

4. Основной шаблон HTML

После короткого введения мы сфокусируем внимание на использовании Bootstrap. Для этого мы применим основной шаблон HTML, который включает все элементы, перечисленные в .

Вот как выглядит типичный файл HTML :

Шаблон Bootstrap 101

Привет, мир!

Чтобы сделать такой шаблон Bootstrap , просто присоедините соответствующие файлы CSS и JS:

Шаблон Bootstrap 101

Привет, мир!

И все настроено! Добавив эти два файла, вы можете с помощью Bootstrap разрабатывать сайт или приложение.