Начало работы с Bootstrap. Bootstrap для новичков, что это и как его установить
У Верстальщиков и фронтендеров, есть блоки кода, которые используют в каждом проекте и поэтому часто задумываются о создании собственного фреймворка. Но обычно начинают пользоваться уже существующими, например bootstrap.
Это фреймворк из трёх языков HTML/CSS/JS. Благодаря большому функционалу верстать сайты становится легко и быстро, ну конечно если во всем разобраться.
Появился в стенах компании Twitter и назывался «Twitter Bootstrap». Но из-за того что его захотели сделать всемирным пришлось отказаться от слова Twitter в названии. По моему личному опыту в bootstrap есть ряд плюсов:
Есть два способа его подключения:
- Через скачивание файлов .
Также мы имеем стили для оформления:
- кнопок
- радиокнопок
- текстовых полей
- чекбоксов
При этом ещё можно указать горизонтальное или вертикальное положение элементов и названий, также изменять цвет формы тем самым уведомляя пользователя на возникновении ошибки или предупреждения.
ТаблицыДля создания такой простенькой таблицы нужно добавить к ней class = "table" .
Когда мы подробнее рассмотрим, как оформлять таблицы, то вы сможете:
Для создания красивой кнопки понадобится добавить только два класса. Кстати второй отвечает за цвет кнопки, так что можно сделать класс с вашим цветом и подключить его вместо стандартного.
А вот их конструкция.
Кнопка Обычная Отлично Инфо Обратите внимание Тревога Ссылка
JavaScript элементыBootstrap имеет множество фишек связанных с анимацией:
- Сворачивание и разворачивание окон
- Появление модальных окон
- Всплывающие подсказки
- Создания табов
- Слайдер
Все это будет у вас в руках при подключении одного файла bootstrap.js
ВыводА если вы дошли до этого место, то у вас может возникнуть вопрос: «Нужно ли знать все компоненты bootstrap ?». Все зависит от ваших желаний, обычно пользуются только сеткой, но каждый верстальщик должен уметь пользоваться всем. Лично мне он нравится, простой, быстрый, удобный.
Переходите на следующий урок, если готовы быстро верстать сайты.
В третьем уроке немного теории о построении шаблона и сетке Bootstrap.
Bootstrap видит шаблон сайта следующим образом
В построение шаблона с помощью Bootstrap используются три уровня вложенности
- Первый уровень это container — область в которой размещаются все блоки сайта.(Красная рама)
- Второй уровень это row — область в которую помещаются блоки для материала
- Третий уровень для разных устройств он разный. Это уже сам материал.
В целом Bootstrap чем-то схож с обычной таблицей. Есть общий каркас далее идут строки и ячейки. Если проводить аналогию с html-таблицей, то роль контейнера выполняет тег
.
С первым уровнем мы уже познакомились. Второй уровень вложенности выполняет функцию контейнера, но уже применительно к информационным блокам (аналогично тегу |