Bootstrap: Уроки верстки, основы и установка

Bootstrap — мощный инструмент для создания адаптивных веб-сайтов с минимальным объемом кода. Для изучения необходимы базовые знания HTML, CSS и желательно JavaScript.

Что такое Bootstrap?

Bootstrap — фреймворк для создания привлекательных и адаптивных сайтов с помощью готовых классов и JavaScript-кода. Это ускоряет разработку, сокращая время написания кода на чистом HTML и CSS. На сайте getbootstrap.com представлены примеры. Bootstrap относительно «тяжелый» (около 500 КБ, включая CSS и JavaScript файлы), поэтому важно использовать только необходимые компоненты для оптимизации загрузки сайта. Например, если не нужны выпадающие списки, их не следует включать в проект.

Установка Bootstrap

Bootstrap можно скачать с getbootstrap.com. Существуют два способа подключения:

Прямая загрузка: Загрузите файлы и подключите их к проекту. Это простой, но не самый удобный способ.
CDN (Content Delivery Network): Используйте ссылки на CDN-серверы, содержащие файлы Bootstrap. Это предпочтительнее, так как файлы не нужно хранить на сервере, и обновления происходят автоматически.

Подключение Bootstrap через CDN

Пример тестовой HTML-страницы:

Стандартная HTML-разметка.
Кодировка UTF-8.
Мета-тег <meta name=»viewport»> для корректного отображения на мобильных устройствах.
Подключение Bootstrap через CDN.
Тестовый контент (заголовки и абзацы).

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

Создание простого блока

Пример создания блока <div> с классами Bootstrap:

container: создает блок с фиксированной шириной.
container-fluid: создает блок, занимающий всю ширину экрана.

Пример кода:

<div class="container">
  <h1>Привет! Вы на сайте itproger.com</h1>
  <p>Привет!</p>
</div>

Пример демонстрирует использование класса container, создающего блок с отступами.

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