Представьте, что вы создаете свой первый проект. Вы прописываете какие-то классы, какие-то контейнеры, прописываете универсальному селектору box-sixing: border-box, что у каждого элемента будет margin 0, padding 0 и прочее и прочее. Вы также создаете отдельные элементы: шапка, кнопка, какое-то модальное окно и прочее.
И вот теперь, когда вы приступаете к следующему проекту - вам все то же самое понадобится и в новом проекте, а потом еще и в следующем и в следующем.
Согласитесь, что каждый раз копировать один и тот же код и подстраивать его под новые проекты не совсем удобно.
Поэтому решением подобных задач стало такое понятие, как библиотека.
По простому библиотека - это набор готовых решений, который вы просто берете и используете. В них содержится опыт и наработки других разработчиков, которые вы можете использовать в своих проектах.
И сегодня мы будем знакомиться, пожалуй, с самой популярной библиотекой - Bootstrap.
Перед знакомством с библиотекой(как и со всем остальным) желательно сначала изучить документацию, базовые примеры и как вообще с этим работать.
Перейдя по кнопке «Download», нам предлагается скачать скомпилированные css и js (Compiled CSS and JS), то есть уже готовые для добавления в проект.
Так же мы можем скачать исходные файлы (Source files), в этом случае оптимизации нет и при необходимости можно что-либо поменять/перенастроить под свои нужды.
И третий способ — это CDN.
Копируем некий «Стартовый шаблон» в html-файл.
Важно учитывать, что у всех элементов уже стоит по умолчанию свойство box-sizing: border-box, сброшены все margin и padding, а так же включена такая мини-библиотека как reboot css. Поэтому отдельного подключения normalize css не требуется.
Размещаем шаблон и давайте удалим h1, остальное оставляем все без изменений.
Первое, с чего начинается наша страница обычно — это шапка, содержащая навигационное меню. Для его создания переходим в Navbar
Здесь содержится документация о том как работают элементы, классы, которые можно использовать есть примеры того, как это можно использовать.
Например, вот такую готовую шапку мы можем поместить на страницу просто скопировав данный код внутрь тега <body>
Меню появилось.
Все элементы являются ссылками, можно указать определенный адрес и, конечно, можно менять названия.
Прелесть библиотеки Bootstrap состоит еще и в системе сеток, в колоночной верстке. Это помогает правильно и красиво распределить контент на странице.
Правило 1. Если вы хотите применить колоночную верстку — необходимо использовать класс container. (либо container-fluid, если контент должен располагаться на всей ширине)
Правило 2. Для создания строк необходимо использовать класс row.
Правило 3. При создании колонок используем класс col.
Именно в таком порядке и в такой структуре у вас будет все работать
Для наглядности вставляем картинки и вот что получается
Если нам необходимо создать карточки, например, добавить под картинкой текст и кнопку, то для этого мы можем перейти в Card и скопировать данный код.
Вставляем его внутрь колонок, тега col
Мы можем разместить такую же строку ниже, просто продублировав часть кода
Заметьте, что css-файл не используется совсем, а чтобы добавлять некоторые изменения нам потребуются определенные классы.
Например, чтобы добавить верхние отступы мы дописываем классу нужного элемента «mt-5», что будет означать margin-top 50px. Все сокращения представлены в данном разделе
Если вы собираетесь использовать только сетку, то после скачивания Compiled CSS and JS желательно подключить только один файл «bootstrap-grid.min.css», в виду экономии времени и для лучшей скорости сайта.
Ну и в следующей части приступим к более сложной и полной практике.