Погружаемся в bootstrap

Новый Bootstrap 3 с ориентацией на мобильные устройства

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

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

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

Система сеток

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

Активация сетки

Для того, чтобы сетка правильно работала и выводилась на экран, добавьте мета-тег viewport в ваш документ:

Различия систем сеток по ширине

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

    Очень маленькие устройства

Телефоны ( = 768px);
Средние устройства

Ноутбуки (>= 992px);
Большие устройства

Настольные компьютеры (>= 1200px).

Каждому поддерживаемому виду соответствует свой класс:

Очень маленькие устройства;
col-sm —

Маленькие устройства;
col-md —

Средние устройства;
col-lg —

Чтобы использовать систему сеток, вам понадобится контейнер с классом «container». Внутри должен быть еще один контейнер с классом « row ». Заметьте, что в отличие от Bootstrap 2, суффикс « fluid » не используется. Внутри этого контейнера вы можете поместить свои столбцы.


Итак, новая версия придерживается подхода « Mobile First ». Это означает, что столбцы с суффиксом класса « xs » всегда будут плавающими по горизонтали, вне зависимости от выбранного размера экрана.

Если вы, скажем, используете столбцы с префиксом « md », а размер экрана выбран меньшим, чем 992px (например, 991px), то колонки будут располагаться друг под другом со 100%-ной шириной, как показано в примере ниже:

Когда данная страница будет просматриваться на экране, размер которого 992px или более, это будет выглядеть так:


Если же вы просмотрите этот документ на экране размером 991px или менее, то выглядеть это будет уже иначе:


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

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


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

Bootstrap CSS

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

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

Также, имя каждой переменной было стандартизировано в соответствии с правилом « element-state-pseudo state ». Это значит, что стили для элементов наподобие:

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

То же самое правило применяется и к спискам с inline-стилями.

Другие изменения в именах переменных касаются классов, которые соотнесены с различными размерами. Например, разметка для кнопок в версии 2.* выглядела так:

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

То же самое применимо и для элементов ввода.

Адаптивные таблицы

Общий синтаксис и разметка для таблиц не изменилась, но, следуя новой парадигме « Mobile First », они также стали адаптивными. Чтобы использовать это новшество, просто оберните таблицу контейнером с классом « responsive-table ». Это сделает таблицы прокручиваемыми по горизонтали на маленьких устройствах ( – класс « sr-only », являющийся частью Bootstrap, служащей цели приспособления сайта для людей с ограниченными возможностями. Использование тега не обязательно для inline-форм, однако настоятельно рекомендуется его добавлять – это никому не повредит.

Кстати, класс « sr-only » предназначен специально для программ чтения с экрана. Благодаря ему, такие программы будут знать, что метку следует прочитать вслух.

Наконец, для создания горизонтальной формы, вы просто устанавливаете ширину тега с помощью комбинации классов: “ col-md -” (конкретный класс выбирается из доступных вариантов исходя из ваших целей) и « control-label ». Затем, оборачиваете тег в контейнер с присвоенными ему классами для спецификации столбцов.

Результирующая форма выглядит так:


Имеются еще некоторые изменения, касающиеся форм, например, удаление классов « input-prepend » и « input-append », и добавление вместо них « input-group » и « input-group-addon ». Чтобы узнать обо всех изменениях, пожалуйста, обратитесь к документации.

Иконки-глифы (Glyphicons)

Это еще один аспект новой версии Bootstrap, который претерпел изменения. Библиотека иконок включает в себя 40 новых глифов, которые переведены из растрового формата в векторный. Проще говоря, иконки теперь стали шрифтовыми символами.

Читать еще:  Рассылка ручной работы или вдохновение для своих

Поэтому теперь, вместо добавления классов в формате « glyphicons-* » из папки « img », где раньше находилось два графических файла, содержащих библиотеку, вам нужно добавлять глиф-иконки, содержащиеся в файлах из папки «fonts». Файлы шрифтов с глифами представлены в четырех форматах, что сделано для кроссбраузерной совместимости.

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

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

Компоненты JavaScript

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

Модальные окна

Возможно, одним из наиболее часто используемых в Bootstrap компонентов является плагин Modals . Различие состоит в том, что контейнеры « modal-header », « modal-content » и « modal-footer », теперь обернуты контейнером « modal-dialog », который, в свою очередь, вложен в контейнер « modal-content ». Привычная разметка:

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

Чтобы запустить модальное окно из JavaScript, используется тот же метод, что и раньше:

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

Классы были немного изменены, но по-прежнему требуется использование плагина переходов (Transition Plugin) без нужды создавать дополнительные контейнеры.

Плагин Typeahead также был исключен из состава Bootstrap в пользу плагина Twitter`s Typeahead .

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

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

Вы можете ознакомиться с остальными имеющимися в Bootstrap компонентами JavaScript (все они основаны на jQuery ).

Новые компоненты

В новой версии фреймворка появились новые компоненты в CSS-части. Это групповые списки (list groups) и панели (panels).

Вот выдержка из официальной документации по групповым спискам (list groups):

… это гибкий и мощный компонент не только для отображения простых списков элементов, но и сложного контента.

Чтобы добавить групповой список, просто создайте неупорядоченный список с классом « list-group » и припишите класс « list-group-item » к каждому элементу этого списка.


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

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

Панели могут содержать шапку ( header ) и подвал ( footer ), а также иметь специальное назначение с применением классов « sucess », « error », « warning » и так далее. Например:


Как видите, панели отлично работают как с групповыми списками, так и с таблицами без границ.

Customizer – тонкая настройка Bootstrap

В третьей версии фреймворка обновился Customizer . Изменился не только внешний вид – инструмент стал лучше структурирован и теперь дает отличный контроль над максимальным количеством параметров.

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

Кроссбраузерность

Долгое время Internet Explorer 6 наводил ужас на веб-разработчиков. Bootstrap 2.* все еще поддерживал седьмую версию детища Microsoft. Но в третьей версии разработчики фреймворка убрали поддержку IE7 и Mozilla Firefox 3.6 и ниже.

Bootstrap имеет поддержку всех последних версий основных браузеров (Safari, Opera, Chrome, Firefox и IE) под Windows и Mac.

Если говорить об IE, то поддерживаются версии 8 и выше. И хотя имеются некоторые свойства, которые браузер от Microsoft не обрабатывает (к примеру «border-radius»), фреймворк остается полностью функциональным, но с небольшими недочетами. Также IE 8 требует respond.js для поддержки адаптивности.

Чтобы узнать обо всех обходных путях и подводных камнях поддержки CSS-свойств различными браузерами, обратитесь к официальной документации .

Заключение

С самого своего появления, Bootstrap зарекомендовал себя как отличный инструмент для быстрой разработки профессионально выглядящих сайтов и веб-приложений. Третья версия не стала исключением. Хотите знать, почему вам стоит использовать Bootstrap?

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

Данная публикация представляет собой перевод статьи « Mobile First With Bootstrap 3 » , подготовленной дружной командой проекта Интернет-технологии.ру

Bootstrap 4. Сетка. Подробное руководство

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

18 января 2018 года случилось важное событие — вышла из беты долгожданная версия Bootstrap 4, основанная на использовании модели Flexbox для разметки, которая в настоящее время уже имеет поддержку всех современных браузеров и является более удобной и гибкой для разработчиков, нежели классическая модель разметки, основанная на Float. Теперь с полной уверенностью можно сказать, что на «Флексах» не можно, а НУЖНО верстать!

Читать еще:  Как писать сочинение — что это такое, план подготовки и пример сочинения-рассуждения на тему мечты

Дополнительные материалы урока Bootstrap 4

  1. Все примеры урока вы можете потестировать самостоятельно: Скачать архив
  2. Более подробно ознакомиться с документацией Bootstrap 4 вы можете на оф. сайте;
  3. Последний стартер, включающий Bootstrap 4: OptimizedHTML 5.

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

1. Основные параметры сетки по-умолчанию

По-умолчанию сетка Bootstrap 4 очень похожа на сетку третьей версии, однако появились некоторые важные отличия.

Из таблицы основных опций мы можем заметить явные отличия от сетки третьей версии. Теперь отсутствует префикс класса «.col-xs-», отвечающий за самые маленькие разрешения, вместо него указывается упрощенный префикс «.col-». Можно ошибочно подумать, что префикс «.col-» отвечает за минимальные разрешения мобильных устройств, однако это не совсем так. Помимо всего прочего, префикс «.col-» — это одно из важнейших новшеств Bootstrap 4. Это класс, который отвечает за автоматическую разметку колонок на любом разрешении. Но об этом позже.

За малые разрешения (small) отвечает префикс «.col-sm-» с медиа-запросом от 576 пикс. Ширина контейнера составляет 540 пикс. Средние разрешения отрабатываются от 768 пикс. Ширина контейнера — 720 пикс. Большие разрешения работают с разрешения устройств от 992 пикс. Ширина контейнера — 960 пикс. И самые большие — от 1200 пикс. Ширина контейнера фиксируется на значении 1140 пикс.

Обратите внимание, что максимальные значения медиа-запросов имеют неточные значения с дробной частью «.98» в пикселях. Это заметно при выборе Desktop First метода верстки, где максимальная ширина медиа-запроса ограничена. Например, при компиляции Sass «+media-breakpoint-down(lg)» мы получим «@media (max-width: 1199.98px)». Здесь 0.02 пикселя освобождаются для старта следующего медиа-запроса. Имейте это ввиду. В следующих выпусках «Джедай верстки 8» мы рассмотрим этот и множество других моментов из этого урока на реальном примере.

2. Автоматическая разметка колонок

2.1 Колонки одинаковой ширины

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

2.2 Установка ширины одной колонки

Вы также можете явно установить ширину одной колонки, а остальные оставить автоматическими.

В данном примере второй элемент в третьем ряду имеет класс «.col-6» и второй элемент во втором ряду имеет класс «.col-5», которые занимают соответствующее количество колонок на всех разрешениях экрана. Ширина остальных колонок является отзывчивой и вычисляется автоматически, занимая всё оставшееся пространство.

2.3 Контент переменной ширины

Можно использовать класс «col--auto», чтобы определить контент с переменной шириной, в зависимости от занимаемого пространства содержимым колонки. Где breakpoint — размер экрана (xl, lg, md или sm).

Здесь мы видим, что две центральные колонки занимают ширину, соответствующую ширине содержимого, однако в первом ряду благодаря классу «.justify-content-sm-center» у «.row» весь ряд центрируется и общая ширина зависит только от ширины центральной колонки, в то время, как второй ряд растягивается на всю доступную ширину, но вторая колонка остается фиксированной по ширине содержимого.

2.4 Мульти-ряд

Благодаря Bootstrap 4 вы можете сделать в одном ряду несколько строк (переносов). Реализовать это можно с помощью класса «.w-100», который очень похож на тег «br» и по-сути просто делает перенос колонок на новую строку.

Обратите внимание, что данный класс является частью дополнительных возможностей Bootstrap 4, которые подключаются к проекту отдельно в случае использования Sass версии проекта Bootstrap и находятся в папке «scss/utilities». Вы также можете подключить другие плагины из этой папки к вашему проекту по необходимости.

3. Адаптивные классы

3.1 Брейкпоинты

Очень интересная возможность Bootstrap 4 — возможность задавать универсальные колонки, которые будут отображаться на всех разрешениях. Это упомянутый ранее класс «.col». Кроме того, можно определить класс, указывающий конкретное количество колонок, занимаемое содержимым — это классы с префиксом «.col-<число колонок>», например «.col-6» говорит нам о том, что содержимое займёт 6 колонок из 12. В случае, когда конкретное количество задавать не обязательно, можно смело использовать универсальный класс «.col».

3.2 На мобильных устройствах

Вы можете использовать префикс класса «.col-sm-<количество занимаемых колонок>» для того, чтобы задать базовую сетку на всех разрешениях, кроме самых маленьких. На небольших экранах колонки такой сетки будут складываться друг под друга. На разрешениях больше — будут занимать столько места, сколько вы определили в классах.

Здесь мы видим, что первый ряд на устройствах с разрешением более «sm», то-есть больше, чем 576 пикс. разбивается на 2 колонки — шириной 8 и 4 из 12-ти соответственно. Ширина колонок во втором ряду вычисляется автоматически, но на самых малых разрешениях эти колонки также складываются друг под друга, благодаря классу «.col-sm».

3.3 Создание сложной комбинированной сетки

С помощью Bootstrap вы можете создавать любые комбинации колонок при создании сетки. Для каждой колонки можно задать любое поведение на различных разрешениях с помощью адаптивных классов. Здесь отличия от третьей версии — только в наименованиях классов.

4. Выравнивание

Bootstrap 4 основан на «флексах» и дарит нам все возможности данной модели, которые доступны в простых готовых классах. В числе возможностей — вертикальное и горизонтальное выравнивание.

4.1 Вертикальное выравнивание

Помимо управления выравниванием через родительский «.row», можно выравнивать колонки, задавая им соответствующие классы:

4.2 Горизонтальное выравнивание

Кроме того, Bootstrap 4 имеет в своём арсенале инструменты для горизонтального выравнивания колонок при помощи префикса «.justify-content-» у «.row».

4.3 Удаление полей между колонками

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

Для этого достаточно у элемента «.row» задать дополнительный класс «.no-gutters».

4.4 Перенос колонок на новую строку

Если ряд (.row) заполняется суммарным количеством колонок более 12-ти, последующая колонка переносится на новую строку.

Читать еще:  Как улучшить качество фото за 5 минут — ретушь, редактирование и прочая обработка фотографий онлайн

Здесь всё также, как в 3-й версии Bootstrap.

5. Порядок элементов

5.1 Классы порядка элементов

Можно использовать специальные классы с префиксом «.order-» для определения порядка элементов. Если вы знакомы с Flex-вёрсткой, данные правила будут вам знакомы. Bootstrap 4 даёт возможность задавать порядок элементов с помощью классов. Можно задавать порядок напрямую (.order-1.order-md-2):

Или можно использовать специальные классы, которые определяют порядок первого и последнего элементов (.order-first, .order-last):

5.2 Смещение колонок

По аналогии с Bootstrap 3, в 4-й версии также есть возможность горизонтального смещения колонок, однако реализовано это несколько иначе и для этого есть специальные классы с префиксом «.offset-».

5.2.1 Классы смещения

Сдвигать колонку вправо можно, используя классы «.offset-md-*», которые увеличивают левый отступ на * количество элементов. Из примера ниже, класс «.offset-md-2» сдвинет колонку «.col-md-4» на 2 колонки вправо, остальные примеры работают по аналогии:

Можно сбрасывать отступ на всех разрешениях благодаря классу «.offset-*-0», где * — это sm, md, lg или xl.

6. Вложенность

Весьма ожидаемо, что Bootstrap 4 поддерживает вложенность элементов. Работает здесь всё также, как в третьей версии — чтобы вложить колонки в другие, необходимо создать дочерний класс «.row» и уже в него вкладывать колонки.

Мы рассмотрели основные особенности работы с сеткой Bootstrap 4. Если у вас есть желание более подробно ознакомиться со всеми возможностями фреймворка, рекомендую изучить документацию на официальном сайте.

В следующем уроке мы рассмотрим настройку Bootstrap сетки под ваш конкретный проект на примере использования в стартовом шаблоне OptimizedHTML 4. А именно настройку, работу с переменными отступов, брейкпоинтов, количества колонок и прочего.

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Содержание:

Bootstrap (от англ. сущ. «шнуровка» (ботинок) или гл. «добиваться самостоятельно«) — бесплатный фреймворк (набор инструментов) для быстрой вёрстки сайтов и прототипирования интерфейсов веб-приложений. Создан изначально для нужд популярного микроблогингового сервиса Twitter, однако в 2011 году открыт для свободного скачивания всем желающим.

Bootstrap включает в себя готовые шаблоны блоков различной конфигурации, кнопок, таблиц, форм, которые добавляются в Ваш проект простым прописыванием специальных классов. Кроме готовых CSS и HTML-сниппетов, имеется и ряд JavaScript-дополнений, которые реализуют тот или иной специфический функционал.

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

Быстрая вёрстка сайта

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

Вёрстка сайта – дело не сказать чтобы очень сложное, но довольно муторное. Помимо того, что нужно оснастить сайт требуемым функционалом, нужно ещё чтобы он был красивым! Такую красоту, обычно, делает дизайнер в Фотошопе. А задача верстальщика при этом сделать так же как на картинке. И вот для этого уже приходится попотеть.

Где-то с год назад я работал в команде с одним дизайнером над созданием сайта. И он после просмотра готового макета задал мне вопрос: «А ты что, не используешь сетку?». В Фотошопе он, оказывается, всё рисовал по направляющим, чтобы было ровно, однако в обычном HTML подобных средств выравнивания нет.

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

Зачем нужен Bootstrap

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

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

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

  • сетки для вертикального выравнивания блоков (но есть свойства для выравнивания текстовых элементов);
  • свойств для адаптивного масштабирования текста (нужно использовать сторонние библиотеки или собственные механизмы);
  • средств для вёрстки полноэкранных лэндингов;
  • некоторых популярных плагинов (нормального слайдера, вертикальных табов, поэкранной прокрутки и т.п.);
  • ряда свойств для позиционирования.

Справедливости ради следует сказать, что недавно вышел Bootstrap 4, который довольно сильно отличается по реализации и функционалу от более распространённой версии Bootstrap 3. Однако, в рамках данной статьи мы рассмотрим именно проверенную временем и стабильную 3-ю версию (последняя на данный момент – 3.3.7).

Установка Bootstrap

Чтобы начать работу с Bootstrap его нужно правильно подключить в Ваш HTML-документ. Сделать это можно несколькими способами.

Внешнее подключение через Bootstrap CDN

Как в своё время было с популярной библиотекой jQuery (кстати, её наличие тоже обязательно), Bootstrap на сегодняшний день тоже обзавёлся собственной системой доставки контента (CDN). Это означает, что Вам можно ничего не качать для его установки – достаточно просто прописать ссылки на нужные Вам компоненты в Вашем HTML-документе.

Минимально необходимым набором компонентов для работы Bootstrap является его таблица стилей и файл скриптов (bootstrap.css и bootstrap.js, соответственно). Стили Бутстрапа нужно подключить в секции перед объявлением своих стилей (style.css), а скрипты можно отправить в «подвал» сайта для ускорения загрузки страницы. Кстати, для этой же цели лучше использовать минифицированные версии файлов, ссылки на которые выглядят так:

Рекомендуется также подключать CSS-файл темы, в котором содержатся уникальные стили оформления Вашей версии Bootstrap (о том, как её сделать речь пойдёт немного ниже). Его следует также поместить перед объявлением Вашей основной таблицы стилей, но после общих стилей Бутстрапа. Ссылка на подключение темы выглядит так:

Ссылка на основную публикацию
Adblock
detector