Введение. Начало работы · Bootstrap v5.0.0-alpha2
Быстрый старт
Хотите использовать Бутстрап в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.
CSS
Скопируйте и вставьте часть кода <link> в свой <head> перед всеми другими таблицами стилей, чтобы загрузить наш CSS.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">JS
Многие из наших компонентов требуют использования JavaScript. В частности, для них требуются наши собственные плагины JavaScript и Popper.js. Поместите один из следующих тегов <script> в конце страниц, прямо перед закрывающим тегом </body>
Пакетное подключение
Все необходимое включено в один скрипт. Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают Popper. Дополнительную информацию о том, что входит в Bootstrap, можно найти в нашем разделе Содержание.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>Раздельное подключение
Если вы решите использовать раздельный сценарий подключения, то сначала должен быть подключен Popper.js, а затем наши плагины JavaScript.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.
bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.min.js" integrity="sha384-5h5UG+6GOuV9qXh6HqOLwZMY4mnLPraeTrjT5v07o347pj6IkfuoASuGBhfDsp3d" crossorigin="anonymous"></script>Модули
Если вы используете <script type="module">, смотрите раздел Использование Bootstrap в качестве модуля.
Компоненты
Любопытно, какие компоненты явно требуют наши JavaScript и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.
Показать компоненты, требующие JavaScript- Уведомления отмены
- Кнопки изменения состояний и чекбоксов/»радио»
- Карусель для поведения «слайд», элементы контроля и индикаторы
- Коллапс для изменения видимости содержимого
- Выпадающие элементы для отображения и расположения (также требует Popper.js)
- Модальные окна для отображения, расположения и создания поведения прокрутки
- Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
- Выплывающие подсказки и окна для отображения и расположения (также требует Popper.
js) - Отслеживание прокрутки и обновления навигации
Начальный шаблон страницы
Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h2>Hello, world!</h2> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper.js --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper.js and Bootstrap JS <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.min.js" integrity="sha384-5h5UG+6GOuV9qXh6HqOLwZMY4mnLPraeTrjT5v07o347pj6IkfuoASuGBhfDsp3d" crossorigin="anonymous"></script> --> </body> </html>
Это все, что вам нужно из общих требований к странице. Посетите раздел Система сеток или наши официальные примеры для создания контента и компонентов вашего сайта.
Важные глобальные атрибуты
Бутстрап включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.
HTML5 doctype
Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями, его включение не должно вызывать каких-либо серьезных сбоев.
<!doctype html>
<html lang="en">
...
</html>«Отзывчивый» мета-тэг
Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">Вы можете посмотреть пример этого в действии на странице Начальный шаблон страницы.
Размер ширины и высоты элемента
Для большей простоты масштабирования в CSS мы изменяем глобальное значение box-sizing с content-box на border-box. Это гарантирует, что padding не будет влиять на конечную вычисленную ширину элемента; однако может создать проблемы для сторонних приложений, таких как Google Maps или поисковой движок Google.
В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:
.selector-for-some-widget {
box-sizing: content-box;
}В приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент с помощью ::before и ::after, будут наследовать указанный размер блока box-sizing для этого
.selector-for-some-widget.
Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.
«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)
Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.
Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:
- Cледите @getbootstrap on Twitter.
- Чиатйте и подписывайтесь на The Official Bootstrap Blog.
- Присоединяйтесь к The official Slack room.
- Общайтесь с фоловерами Bootstrappers в IRC. Канал
##bootstrapна сервереirc.freenode.net. - Помощь в реализации на Stackoverflow (
bootstrap-5). - При разработке через npm или аналогичные депозитарии, разработчикам следует использовать ключевое слово
Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.
JavaScript. Начало работы · Bootstrap. Версия v4.0.0
Запустите Bootstrap с нашими дополнительными плагинами JavaScript построенными на jQuery.
Узнайте о каждом плагине, наших данных и программных API-интерфейсах и т.п.
Индивидуальные или компилированные
Плагины можно подключать по одному (файлами *.js) или все сразу – с помощью bootstrap.js или «облегченного» bootstrap.min.js (не подключайте оба сразу).
Зависимости
Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы подключаете плагины по одному, проверьте существование зависимостей в документации. Также заметим, что
все плагины зависят от jQuery (т.е. в файле HTML jQuery надо подключать перед плагинами). Загляните сюда bower.json для получения информации по поддерживаемым версиям jQuery.
Всплывающие подсказки (по наведению) и «всплывающие окна» (по клику мыши) зависят от библиотеки Popper.js.
Дата-атрибуты
все плагины Bootstrap можно подключить и настроить в HTML через дата-атрибуты Bootstrap «предпочитает» этот метод использования функционала JS.
Удостоверьтесь, что в одном элементе используется лишь один набор атрибутов (т.е., не получится запустить всплывающие подсказки и «всплывающие окна» из одной кнопки).
HTML5 спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определенного значения. data-* attributes позволяют нам хранить дополнительную информацию на стандартных, семантических элементах HTML, не загрязняя имя класса.
Однако иногда может понадобиться выключить эту способность. Для выключения API атрибута, «открепите» все обработчики событий документа, лежащие в пространстве имен data-api:
$(document).off('.data-api')Или, чтобы сделать это с определенным плагином, просто пропишите его название как пространство имен, наряду с пространством имен data-api:
$(document).off('.
alert.data-api')События
Bootstrap предлагает ряд собственных событий для уникальных действий большинства плагинов. В целом, эти события обозначаются инфинитивом и прошедшей формой причастия – где инфинитив (например, show) запускается в начале события, а его причастие (например, shown) – по окончанию события.
Все события неопределенной формы работают с функционалом preventDefault(). Это дает возможность остановить выполнение действия до его начала.
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})Алгоритмическое API
Мы решили дать вам возможность использовать все плагины Bootstrap прямиком через JS API. Все свободно распространяемые API – это отдельные методы «цепочки вызовов», возвращающие набор параметров, над которыми производилось действие.
$('.btn.danger').button('toggle').addClass('fat')Всем методам следует передавать или аргументы, т.е. строку, которая вызывает какой-либо метод, или ничего не передавать (что вызовет действие плагина, заложенное по умолчанию).
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediatelyТакже, у каждого плагина может быть вызван конструктор через свойство Constructor: $.fn.popover.Constructor. Если вам нужен экземпляр определенного плагина, извлеките его непосредственно из элемента: $('[rel="popover"]').data('popover').
Асинхронные функции и библиотека «переходов»
Все методы алгоритмических API асинхронны и возвращают пользователю значение после того, как «переход» начат и до того, как «переход» закончен.
Чтобы выполнить действие по завершению «перехода», вы можете отследить соответствующее событие.
$('#myCollapse').on('shown.bs.collapse', function (e) {
// Action to execute once the collapsible area is expanded
})Вызов метода на динамическом, изменяющемся компоненте будет проигнорирован.
$('#myCarousel').on('slid.bs.carousel', function (e) {
$('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})
$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!Установки по умолчанию
Вы можете изменить их для плагина, изменяя объект плагина Constructor.Default:
$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to falseКонфликты
Иногда необходимо использовать плагины BS с другими UI – фреймворками. Тогда могут возникнуть проблемы в пространствах имен. В этом случае вы можете вызвать метод .noConflict на плагине, значение которого вы хотите переназначить.
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionalityВерсии
Версия каждого плагина jQuery может быть узнана через свойство конструктора плагина VERSION. Например, для плагина всплывающих подсказок:
$.fn.tooltip.Constructor.VERSION // => "4.0.0"В BS4 нет т.н. fallback’a (т.е. «резервных» стилей для случая «глобальной поломки» верстки на старых браузерах), когда отключен JS
Банальный пример того, как все сейчас рисуют скругленные края у элементов:
#roundbox {
-webkit-border-radius: 5px; /* Safari */
-moz-border-radius: 5px; /* Firefox */
-o-border-radius: 5px; /* Opera */
border-radius: 5px; }
В случае, если браузер пользователя не поддерживает CSS3, он увидит просто прямоугольник, обладающий всей необходимой функциональность. То есть отобразится базовый вид элемента — это и есть fallback (резервная) страховка.
Плагины Bootstrap частично не смогут «подстроить» функциональность вашего сайта в соответствии с параметрами отображения старого браузера, если юзер зайдет на него с такового, или в случае «уничтожения» или «зависания» части кода т.е. на старых браузерах BS4 может не сработать, если там отключен JS. Если вы хотите подсказать юзеру, что делать в таком случае, используйте тэг <noscript> для пояснений о пере-включении JS.
Сторонние библиотеки
Официально BS4 не поддерживает сторонние JS библиотеки, такие как Prototype или UI-jQuery. Несмотря на использование .noConflict и группированных по функциональности обработчиков событий, при подключении сторонних библиотек могут возникнуть проблемы при компиляции.
Util
Весь JS в Bootstrap зависит от util.js, который должен подключаться среди прочих JS-файлов, кроме случаев, когда вы пользуетесь компилированным или «облегченным» bootstrap.js – потому что в этом случае он уже подключен.
util.js содержит полезные функции и базовый справочник для событий transitionEnd и эмулятор «переходов» CSS. Этот файл используется другими плагинами для проверки существования поддержки.
Как подключить bootstrap к сайту?
От автора: всех приветствую. Сегодня мы продолжаем небольшой цикл статей и рассмотрим, как подключить boostrap к сайту. В итоге мы получим подключенный и полностью готовый к использованию фреймворк.
Итак, чтобы начать подключение, нужно перейти на официальный сайт. В нашем случае это getbootstrap.com, именно на нем содержится вся необходимая информация.
Скачиваем фреймворк
В главном меню кликните по пункту Getting Started. На русский язык он переводится: “C чего начать”. Действительно, на этой странице вы найдете все необходимое для работы. В первую очередь вы увидите вот что:
Bootstrap предлагает нам скачать себя в нескольких вариантах. Первый – это просто стандартная последняя версия фреймворка, в которой есть все компоненты. Два следующих варианта – это less и sass исходники. Пока я не рекомендую вам их трогать, если вы не знаете, как работать с этими технологиями.
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнееЭто исходники, с их помощью вы можете переделать boostrap под себя. Опять же, если знаете, как работать с ними.
Пока нас устраивает первый вариант, жмите на кнопку скачивания и сохраняйте себе на компьютер архив с самой актиуальной версией фреймворка.
Содержимое фреймворка
Отлично, после скачивайте разархивируйте архив и перейдите в папку. В конечной папке вы увидите три каталога – css, js и fonts. Эти три директории и нужно будет скопировать в папку вашего проекта.
Перед этим вы можете просмотреть все эти папки. В первую очередь, папку css. В ней лежит 2 css-файла и их минифицированные версии. Это bootstrap.css и bootstrap-theme.css. Соответственно, первый с кодом самого фреймворка. А второй предназначен для темизации. У обоих файлов есть, как я уже сказал, минифицированные версии. Они весят на 10-15% меньше за счет того, что код в них размещен в одну строку.
Необходимость в минификации может быть уже на рабочем проекте, где важна каждая доля секунды загрузки страниц. Пока вы просто практикуетесь и изучаете фреймворк, вам нужна хорошая читабельность кода, поэтому подключайте простые версии файлов.
Далее у нас папка fonts. В ней содержится иконочный шрифт bootstrap, благодаря которому вы абсолютно без проблем сможете вставлять на веб-странице более 200 иконок, менять их размеры и цвет. По сути, это картинки, которыми можно очень шибко управлять. При увеличении размеров качество иконок не становится хуже, так как они векторные, то есть svg-формата.
В папке js содержится файл, необходимый для работы всех javascript-компонентов, которые заложены в фреймворк. Например, это модальные окна, табы и подсказки. Хорошо, немного с содержимым мы разобрались, время переходить непосредственно к подключению.
Подключение Bootstrap
Вообще я вам рекомендую сейчас просто потренироваться. То есть не подключать сразу фреймворк к своему реальному сайту, а создать на рабочем столе новую папку, скинуть туда эти три папки. Короче, создать новый проект с нуля. Это вам поможет понять, все работает.
Отлично, тем нужно создать файл index.html. Я сделаю это с помощью редактора Notepad++. Стоп-стоп, может вы уже по привычке начали писать начальную html-разметку, не нужно этого делать, сейчас мы вставим все готовое. Прокрутите страницу Getting Started ниже, там вы увидите Basic Template, то есть базовый шаблон html-страницы.
Смело копируйте этот код к себе в файл. Сейчас мы его немного разберем.
Сразу видим, что используется доктайп, характерный для html5. В теге html видим параметр lang, можете сменить его с en на ru.
Далее начинается секция head, в ней задается кодировка страницы. Следующие строчки достаточно важны, ни в коем случае их не удаляйте. Там, где видите IE-edge – это строка кода, которая обеспечивает корректную работу фреймворка вместе с браузером IE.
Следующая строка – это всем известный мета тег viewport, который позволяет выставить базовые настройки для корректного отображения сайта на мобильных устройствах.
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнееНу а далее у нас начинается непосредственно подключение файлов фреймворка. К слову, все комментарии, которые есть на скриншоте выше (они выделены серым цветом), вы можете удалить, кроме четырех строчек, которые начинаются со слов if it IE 9 и заканчиваются endif. Эти строки нужны нам для того, чтобы для браузера IE подгружались дополнительные файлы из внешнего хранилища, которые обеспечат поддержку адаптивности и элементов html5.
Первым делом, в коде подключается css-файл фреймворка. Как видите, на примере выше подключается сжатая версия, вы же можете подключить несжатую, просто удалив из адреса .min.
Javascript-файлы же подключаются перед закрывающим тегом body. Как видите, тут подключается не только сам фреймворк bootstrap, но и библиотека jquery. Дело в том, что для корректной работы фреймворка эта библиотека нужна и подключается она из внешнего хранилища.
Как мне проверить, подключился ли фреймворк?
Все очень просто. Откройте наш index.html в любом браузере, если вы увидите там такое, то все работает:
Если бы вы допустили какие-то ошибки при подключении фреймворка, то внешний вид заголовка был бы таким:
То есть Boostrap уже применил свои стили к заголовку и если вы можете их наблюдать, то все уже подключилось и корректно работает.
Но для убедительности вы можете вывести с помощью фреймворка, например, кнопку.
<button class = «btn btn-success»>Ура, я подключил Bootstrap!</button>
<button class = «btn btn-success»>Ура, я подключил Bootstrap!</button> |
Это уже точно доказало, что фреймворк работает и использует свои стили. Как видите, даже по умолчанию у bootstrap достаточно хорошее оформление для элементов, хотя и очень простое.
Но давайте мы пока вернемся на страницу Getting Started, ведь это был не единственный способ подключения фреймворка. Еще один вариант – подключить с внешнего хранилища, то есть из cdn. Он годится тогда, когда вы не планируете ничего редактировать в коде фреймворка, а просто хотите максимально быстро подключить его. Тогда удобнее всего вам будет использовать его именно из cdn.
Ниже на этой же странице написано еще очень много всего. Например, как установить фреймворк в Bower, Grunt, еще ниже даются ссылки на примеры использования абсолютно всех компонентов фреймворка.
В самом низу страницы есть ссылка на сайты, где вы можете читать все то же самое, но на других языках, так что если с английским у вас совсем плохо, можете переходить на русскоязычный сайт. Проблема только в том, что там переведено далеко не все, а также может отображаться далеко не вся информация, что есть на англоязычном официальном сайте.
Что ж, друзья, на этом я буду заканчивать эту статью, потому что основную задачу мы выполнили –рассмотрели, как подключить бутстрап, а далее остается только научиться пользоваться им. Далее вы можете самостоятельно просмотреть примеры использования, скопировать их на свою страницу.
Вы можете скачать, например, шаблон с готовой панелью навигации, страницу типичного блога, страницу входа и т.д. Просмотрев код вы уже можете немного понять, как это версталось.
Ну и конечно, не могу не порекомендовать вам пройти прямо сейчас наш бесплатный курс по Bootstrap. В нем вы получите самое важное – свою первую практику в работе с фреймворком и собственноручно сможете сверстать простой шаблон, что ценнее тысячи прочитанных статей. Все, на этом я с вами прощаюсь.
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнееФреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!
СмотретьЗнакомство с Bootstrap
От автора: Для любого фронтенд разработчика/программиста рано или поздно наступает момент для создания своего собственного мини-фреймворка. Обычно он состоит из тех правил и функций, которые повторялись во всех недавних проектах. После того как они будут собраны в одну библиотеку, их будет легче за один раз подключить к новому проекту и пользоваться готовыми решениями. В такую библиотеку может входить сетка с колонками, в которых находится любой контент, стандартные правила для спрайтов, внешних отступов, заголовков и т.д.
Если в разработке проекта принимает участие несколько профессиональных фронтенд разработчиков, то подобные фреймворки нужно стандартизировать. Если это так, то предпочтение отдается уже стандартизированным фреймворкам. Теперь перед нами определенно стоит выбор: какой из фреймворков использовать? В этой статье мы постараемся помочь будущим профессиональным разработчикам разобраться в «плюсах» и «минусах» фреймворка Bootstrap.
Что такое Bootstrap
Созданный командой разработчиков в компании Twitter, он изначально использовался для собственных продуктов компании и был назван «Twitter Bootstrap», но затем стал самостоятельным решением. Вот почему слово «Twitter» было в дальнейшем отброшено.
Bootstrap — это CSS/HTML фреймворк для создания веб-сайтов. Другими словами, это набор инструментов для создания веб-макета. У него есть ряд преимуществ, что делает его самым популярным среди других подобных фреймворков. Преимущества Bootstrap:
Скорость работы – создание макетов с Bootstrap занимает меньше времени благодаря большому набору готовых к использованию элементов.
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнееГибкость – добавление новых элементов не нарушает общую структуру благодаря динамически изменяющейся сетке.
Легкая изменяемость – правка стилей достигается за счет добавления новых CSS правил, которые переопределяют существующие. При этом, вам не нужно использовать атрибуты типа !important.
Большое количество шаблонов – этот момент будет отдельно рассмотрен далее.
Огромное сообщество сторонников/разработчиков.
Широкий спектр применения – Bootstrap используется для создания тем почти для любой CMS (Magento, Joomla, WordPress или любой другой), включая одностраничные лэндинги.
Замечательная официальная документация.
Bootstrap особенно популярен среди тех, кто занимается созданием так называемых «лэндингов» (посадочных/целевых страниц).
Шаблоны Bootstrap
Шаблоны в Bootstrap позволяют вам изменять уже модифицированные элементы под ваши нужды. Многие разработчики предлагают использовать их собственные шаблоны (платные или бесплатные). Подключаются шаблоны Bootstrap очень просто: после подключения самого Bootstrap вы просто добавляете вызов CSS шаблона.
Содержимое фреймворка
Если вы остановили свой выбор на Bootstrap, то данный фреймворк позволит вам существенно сэкономить время разработки фронтенд части проекта благодаря большому количеству готовых компонентов. Позже мы рассмотрим основные компоненты, которыми пользуются почти всех фронтенд разработчики. Следует здесь отметить, что Bootstrap — это, так сказать, набор из трех фреймворков: CSS/HTML, JS компоненты и иконочный шрифт.
Сетка
Наличие сетки является базовым требованием для хорошего макета. Сетка — это мощный инструмент для расположения блочного контента и вложенных элементов. С помощью префиксов вы можете указать, каким образом должны отображаться блоки, в зависимости от типа устройства, на котором просматривается веб-сайт.
Например, класс «col-xs-» будет использоваться для мобильных телефонов с шириной экрана менее 768 пикселей, а класс «col-lg-» — для устройств с шириной экрана более 1170 пикселей. Bootstrap разделяет ширину родительского блока на 12 равных блоков, которые мы можем использовать как угодно. Некоторые блоки могут комбинироваться, чтобы получить, например, три колонки: две 25% «col-lg-3» и одна 50% «col-lg-6».
Визуально страница может быть представлена в любом желаемом виде:
Если вы выйдете за пределы 12 блоков, то оставшаяся часть будет отображена ниже, под другими блоками, поэтому будьте внимательны. Вот пример блоков, которые будут одинаково отображаться на всех устройствах. Давайте разделим экран на три равные части:
<div> <div>First column</div> <div>Second column</div> <div>Third column</div> </div>
<div> <div>First column</div> <div>Second column</div> <div>Third column</div> </div> |
Типографика
В дополнение к возможности изменять блоки на макете и структуру страницы Bootstrap позволяет вам форматировать параметры шрифта: абзацы, цитаты, заголовки, подзаголовки, разные размеры текста, вставки кода и т.д. В большинстве случаев вам не нужно изменять настройки текста по умолчанию, потому что все внешние отступы, заголовки, межстрочные интервалы (интерлиньяж) и т.д. уже тщательно подобраны.
Большое внимание уделяется семантике: основной заголовок может быть задан в виде тега <h2>heading</h2>, но также и в виде <div class=»h2″>heading</div> – оба варианта будут выглядеть одинаково, но второй может быть использован любое количество раз на странице.
Если вы хотите попробовать поработать с Bootstrap, но не хотите сразу разбираться во всех «тонкостях», то начните с малого: создайте текстовую страничку с какими-то новостями. Просто проведите линии под заголовками и подзаголовками, вставьте изображения, добавьте какие-нибудь цитаты, списки и наслаждайтесь тем, как легко данный фреймворк справляется с данными задачами.
Оповещения (алерты)
Любое оповещение может быть представлено в 4 стандартных форматах: положительный, информационный, предупреждающий, отрицательный. Вот как они выглядят:
Для того чтобы отформатировать любое сообщение, потребуется добавить два класса для нужного объекта:
<div role=»alert»>Отлично! Вы успешно прочитали данное важное сообщение.</div> <div role=»alert»>Посмотрите сюда! Это оповещение нуждается в вашем внимании, но оно не супер-важное.</div> <div role=»alert»>Осторожно! Лучше бы вам провериться, т.к. вы выглядите не очень хорошо.</div> <div role=»alert»>О, нет! Придется изменить что-нибудь и попытаться отправить заново.</div>
<div role=»alert»>Отлично! Вы успешно прочитали данное важное сообщение.</div> <div role=»alert»>Посмотрите сюда! Это оповещение нуждается в вашем внимании, но оно не супер-важное.</div> <div role=»alert»>Осторожно! Лучше бы вам провериться, т.к. вы выглядите не очень хорошо.</div> <div role=»alert»>О, нет! Придется изменить что-нибудь и попытаться отправить заново.</div> |
Также Bootstrap позволяет вам форматировать диалоговые окна, всплывающие окна (pop-up) и всплывающие подсказки (tooltip).
Навигация
Навигация обычно является одним из основных элементов на веб-сайте и ему уделяется отдельное внимание при разработке макета. Правильное проектирование макета, создание и оформление элементов навигации для их правильной работы — это обычно одна из наиболее сложных задач. Навигации в Bootstrap уделено особое внимание: фреймворк содержит дизайны для вкладок (табов), постраничной навигации (пагинации), боковых меню, «хлебных крошек», основного меню, панели инструментов (тулбара) и т.д.
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнееОчень легко сделать так, чтобы основное меню выглядело следующим образом:
Чтобы исправить внешний вид меню, нужно будет добавить класс «navbar-fixed».
Пагинация выглядит вот так:
А вот и необходимый для этого код:
<nav> <ul> <li><a href=»#»><span aria-hidden=»true»>«</span><span>Previous</span></a></li> <li><a href=»#»>1</a></li> <li><a href=»#»>2</a></li> <li><a href=»#»>3</a></li> <li><a href=»#»>4</a></li> <li><a href=»#»>5</a></li> <li><a href=»#»><span aria-hidden=»true»>»</span><span>Next</span></a></li> </ul> </nav>
<nav> <ul> <li><a href=»#»><span aria-hidden=»true»>«</span><span>Previous</span></a></li> <li><a href=»#»>1</a></li> <li><a href=»#»>2</a></li> <li><a href=»#»>3</a></li> <li><a href=»#»>4</a></li> <li><a href=»#»>5</a></li> <li><a href=»#»><span aria-hidden=»true»>»</span><span>Next</span></a></li> </ul> </nav> |
Как вы можете заметить, ничего сложного.
Формы
Текстовые поля и блоки (textarea), кнопки, метки (label), радиокнопки, чекбоксы, выпадающие списки — для всех этих элементов в Bootstrap уже есть подготовленные стили. Вы можете создать вертикальные и горизонтальные разделители у заголовков, а также подсветить часть формы, если возникнут какие-то предупреждения или ошибки.
Вы можете сделать горизонтальное расположение блоков, расположение всех полей в одну строку и много другое.
Кнопки
Здесь все просто. Чтобы создать кнопку, нужно указать нужный набор классов. Вот лишь несколько типов кнопок:
А вот и сам код:
<button type=»button»>Default</button> <button type=»button»>Primary</button> <button type=»button»>Success</button> <button type=»button»>Info</button> <button type=»button»>Warning</button> <button type=»button»>Danger</button> <button type=»button»>Link</button>
<button type=»button»>Default</button> <button type=»button»>Primary</button> <button type=»button»>Success</button> <button type=»button»>Info</button> <button type=»button»>Warning</button> <button type=»button»>Danger</button> <button type=»button»>Link</button> |
Таблицы
Старые добрые таблицы создаются путем добавления класса «table». И мы получаем очень аккуратную таблицу:
Компоненты JavaScript
В дополнение к стилям в Bootstrap имеются правила поведения для модальных окон, слайдеров, тултипов, табов и других интерактивных элементов на странице. Чтобы управлять этими компонентами, потребуется библиотека jQuery; не забудьте подключить ее к файлу bootstrap.js.
Иконочный шрифт
Иконочный шрифт позволит вам забыть о раздражающих спрайтах для иконок и очень сильно упростит вашу жизнь. Единственное ограничение заключается в том, что к одной иконке можно применить только один цвет.
Вам предоставляется выбор из 200 иконок, и вы можете добавить их на ваш веб-сайт следующим образом:
<span></span>
<span></span> |
Как подключить Bootstrap
Зайдите на официальный сайт фреймворка и отметьте все пункты, которые понадобятся для работы. Дополнительные возможности могут быть добавлены/удалены при необходимости. После того как вы нажмете на кнопку «Compile and Download» («Компилировать и Загрузить»), скачайте архив и распакуйте его.
Для базовых вещей вам потребуется всего один файл. Он подчеркнут красным цветом. Сохраните его в папке с вашим CSS и подключите в области head на странице.
<link rel=’stylesheet’ href=’/styles/bootstrap.min.css’ type=’text/css’ media=’all’>
<link rel=’stylesheet’ href=’/styles/bootstrap.min.css’ type=’text/css’ media=’all’> |
Иконочный шрифт находится в папке fonts (шрифты), и если он вам действительно нужен, убедитесь в том, чтобы он остался в этой же папке. Сохраните структуру папок, чтобы все работало корректно.
Источник: //basicuse.net/
Редакция: Команда webformyself.
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнееPSD to HTML
Практика верстки сайта на CSS Grid с нуля
СмотретьBootstrap (Бутстрап) — как подключить на сайте
Для подключения Bootstrap необходимо посетить сайт getbootstrap.com. Именно на этом интернет-ресурсе хранятся все необходимые инструменты.
Скачивание фреймворка
Для того чтобы скачать фреймворк, следует перейти на страницу Getting Started. Здесь содержатся все необходимые инструменты. Прежде всего, перед пользователем предстанет выбор одной из доступных версий:
Первый вариант – это стандартная версия фреймворка со всеми необходимыми компонентами. Две следующих версии являются less и sass исходниками. Для работы с этими версиями необходимы определенные навыки и знания. Поэтому начинающим веб-разработчикам лучше начать с первого варианта. Для того чтобы скачать последнюю версию, достаточно нажать на кнопку Download Bootstrap.
Содержимое фреймворка
Далее нужно разархивировать скаченный файл и перейти в папку с содержимым. В последней папке находится 3 директории: css, fonts и js. Их необходимо скопировать в папку проекта.
Прежде чем выполнить копирование, стоит изучить все 3 директории. Наибольший интерес представляет папка css. В ней содержится 2 файла в формате css и их минифицированные версии. В файле bootstrap хранится код фреймворка. Файл bootstrap-theme используется для темизации. Благодаря компактному написанию кода, минифицированные версии этих файлов весят на 15% меньше.
Необходимость в использовании минифицированных файлов возникаете уже в процессе разработки проекта, когда чрезвычайно важна каждая секунда. А вот в процессе обучения желательно практиковаться и изучать именно полноценные версии данных файлов.
В директории fonts хранится иконочный шрифт bootstrap. Он позволяет использовать порядка 200 иконок. При этом разработчик имеет возможность изменять их оттенок и размер. Очень важный нюанс – в случае увеличенияи размера качество иконок не ухудшается. Это обусловлено тем, что они созданы в форматы svg.
В директории js хранится файл, предназначенный для работы подсказок, табов, модальных окон и других js-компонентов.
Подключение Bootstrap
Знакомство с Bootstrap желательно начать с простой тренировки. Не стоит сразу же подключать фреймворк к полноценно работающему сайту. Для тренировки можно создать на своем ПК новую папку, в которую нужно перекинуть те самые 3 директории. Другими словами, знакомство с Bootstrap желательно начинать с абсолютно нового проекта. За счет такого подхода можно быстрее понять, как работает Bootstrap.
В новой папке следует создать файл с именем index.html. Для этого можно использовать обычный Блокнот. Стоит заметить, что в нем не нужно писать html-разметку. За вас уже все сделано. Внизу страницы Getting Started находится Basic Template (базовый шаблон).
Этот код необходимо просто скопировать в только что созданный файл.
Если разбирать указанный выше код, то сразу же бросается в глаза doctype, свойственный для html 5. В теге html указан параметр lang (язык).
Автоматически указывается en. Русскоязычные разработчики могут изменить его на ru.
В «голове» указана кодировка страницы. Она очень важна. Поэтому не стоит рьяно корректировать этот блок. Стоит отметить, что в параметре content указано IE-edge. Эта строка свидетельствует об обеспечении корректной работы Bootstrap в браузере Internet Explorer.
Далее указан мета-тег viewport. Он позволяет использовать базовые настройки для того, что сайт корректно отображался на смартфонах и планшетах.
На следующей строке начинается подключение файлов фреймворка. Прежде всего, подключается css-файл. В данном примере используется минифицированная версия этого файла. Возможно использование и обычной версии. Для этого достаточно удалить из.min.
Js-файлы подключаются непосредственно перед закрывающим тегом «тела» страницы. В указанном примере дополнительно подключается библиотека Jquery.
Она необходима для обеспечения корректной работы данного фреймворка.
Для того чтобы убедиться в подключении Bootstrap, достаточно открыть созданный файл в любом из доступных браузеров. Свидетельством о том, что все работает правильно и корректно, является появление следующий строки:
<button class = "btn btn-success">Ура, я подключил Bootstrap!</button>
Если же фреймворк подключен некорректно, то заголовок будет выглядеть следующим образом:
Получается, что Bootstrap уже применил стили к заголовку. Следовательно, вы все сделали правильно и фреймворк работает корректно.
И все-таки чтобы убедиться в правильности своих действий разработчик может вывести посредством фреймворка какой-либо элемент. В данном случае этим элементом является кнопка.
Теги:Bootstrap: что это такое и как его установить
Bootstrap — бесплатный HTML/CSS/JavaScript фреймворк для быстрого создания адаптивного дизайна сайта. У разработчиков к нему неоднозначное отношение. С одной стороны, Bootstrap позволяет с минимальными знаниями создавать интерфейсы, которые работают во всех популярных браузерах и не ломаются при изменении разрешения экрана. С другой стороны, фреймворк тащит в проект кучу ненужного кода, который увеличивает вес сборки.
Что нужно знать о Bootstrap перед началом работы
У меня отношение к Bootstrap нейтральное. Он отлично подходит для прототипирования. Если нужно быстро проверить какую-то гипотезу или показать пример заказчику, то сборка во фреймворке — оптимальный вариант. Если вы делаете индивидуальный дизайн, то проще верстать с нуля, а не пытаться перебрать все стили и скрипты в Bootstrap.
Про плюсы и минусы фреймворка вы можете почитать в этой статье. За 2 года ничего не изменилось. Bootstrap правда очень помогает сэкономить время и при этом создать приличный шаблон, но тащит кучу лишнего кода и слабо подходит для нестандартных проектов. Все недостатки Bootstrap можно устранить перебором его исходных файлов, но это занимает столько времени, что любой опытный разработчик выберет верстку макета с нуля.
Какую версию Bootstrap выбрать?
Последняя стабильная версия — 4.5.0. Ее и стоит использовать. Сетка в ней построена на Flexbox, это достаточно распространенная технология. Сервис Can I Use показывает, что верстка на флексах поддерживается всеми современными версиями браузеров. Частичная поддержка есть в Internet Explorer 10 и 11.
В третьей версии Bootstrap сетка построена на Float. Это устаревшая технология, которая не дает такой гибкости, как Flexbox. Зато на флоатах можно верстать для старых браузеров, вплоть до Internet Explorer 6. Если вашему проекту нужна такая поддержка (вряд ли), то используйте Bootstrap 3.4.1.
В июне 2020 года появилась новость о выпуске Bootstrap 5 alpha. Когда из нее сделают стабильную версию — непонятно. Но есть несколько моментов, о которых нужно знать всем, кто работает или собирается работать с фреймворком.
- В пятой версии не будет поддержки Internet Explorer.
- Из Bootstrap пропадет библиотека jQuery, с помощью которой в предыдущих версиях реализовывалось большинство возможностей JavaScript.
Радует, что фреймворк развивается. Разработчики обещают, что в пятой версии будет более быстрый JavaScript, меньшее количество зависимостей, улучшенные API. Но пока она находится на стадии альфа-тестирования, мы будем пользоваться последней стабильной сборкой — Bootstrap 4.5.1.
Как установить Bootstrap
Установить Bootstrap можно несколькими способами:
- Подключить компилированные файлы c помощью BootstrapCDN.
- Скачать скомпилированные файлы CSS и JS, подключить их к проекту через ссылки и верстать. Это отличный вариант для того, чтобы познакомиться с фреймворком.
- Скачать исходные файлы. Эта сборка удобнее для верстки, потому что позволяет гибко кастомизировать компоненты. Однако она требует использования дополнительных инструментов: компилятора Sass и постпроцессоров.
- Установить исходники через npm, yarn, RubyGems, Composer, NuGet.
Мы не будем подробно рассматривать все способы — они описаны в документации Bootstrap. Вот версия на русском языке. Она обновляется немного позже официальной инструкции на английском, но порядок установки не меняется годами, так что вся информация актуальна.
Посмотрим способы подключения, которые позволяют быстро получить работающий фреймворк и приступить к изучению его особенностей.
Самый простой метод установки — подключение через BootstrapCDN. Вам не нужно скачивать файлы в проект. Просто создайте шаблон HTML и разместите внутри него ссылку на фреймворк.
Код может быть таким:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Эта ссылка загружает с CDN все необходимые файлы Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<h2>Привет, мир!</h2>
<!-- Перед закрывающим тегом <body> подключаем jQuery, Popper и Bootstrap JS, чтобы работали интерактивные компоненты -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" ></script>
</body>
</html>
Еще один простой способ установки — скачивание скомпилированных файлов. Внутри архива (его нужно распаковать) две папки: css и js.
В папке css — файлы стилей.
- bootstrap.css — стили фреймворка. Файл bootstrap.min.css — минифицированная версия.
- bootstrap-grid.css — сетка Bootstrap. Файл bootstrap-grid.min.css — минифицированная версия.
- bootstrap-reboot.css — нормализатор Bootstrap, устанавливающий базовые стили, чтобы во всех браузерах верстка смотрелась одинаково. Файл bootstrap-reboot.min.css — минифицированная версия.
В папке js — файлы для работы JavaScript.
- bootstrap.bundle.js — компилированные файлы JavaScript с Popper (плагином всплывающих подсказок). Файл bootstrap.bundle.min.js — минифицированая версия.
- bootstrap.js — компилированные файлы JavaScript без Popper. Файл bootstrap.js — минифицированая версия.
В четвертой версии Bootstrap для работы с JavaScript требуется библиотека JQuery. Она подключается перед Bootstrap JS.
Файл проекта index.html, к которому мы будем подключать Bootstrap, нужно разместить в той же директории, что и подключаемые файлы CSS и JavaScript.
Код шаблона может быть таким:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.css" >
</head>
<body>
<h2>Привет, мир!</h2>
<!-- Сначала подключаем библиотеку JQuery, затем — Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
Обратите внимание — я подключил не минифицированные файлы (с суффиксом min), а обычные. Так удобнее работать со стилями и скриптами. Однако на рабочем проекте нужно использовать минифицированные версии — они меньше весят и обеспечивают более быструю загрузку страницы. После редактирования стилей вам нужно самостоятельно минифицировать файл, заменив шаблонную версию.
Начинаем верстать с помощью Bootstrap
Для работы с Bootstrap нужен текстовый редактор и браузер, в котором вы будете видеть результат верстки с помощью фреймворка.
Для удобства рекомендую скачать примеры. Они помогают понять возможности фреймворка. Примеры можно использовать для верстки прототипов, особенно в ситуации, когда макет нужно было сдать еще вчера.
Допустим, я хочу быстро собрать слайдер. В примерах есть карусель. Внутри папки — два файла: index.html и carousel.css. Я открываю их в редакторе и исправляю так, как мне нужно.
Например, в моей карусели будет не три карточки, а пять. Для этого достаточно в файле index.html добавить еще два компонента.
Изначально карусель выглядит вот так.
Открываем файл index.html через любой текстовый редактор (я предпочитаю Visual Studio Code) и начинаем его править.
Находим в коде карусель. Вот она:
<div data-ride="carousel">
Добавляем в список с классом carousel-indicators два элемента с номерами 3 и 4. Они нужны для того, чтобы в карусели отображалось пять кнопок переключения между слайдами.
Далее находим блок слайда с классом carousel-item. Копируем все, что находится внутри, и вставляем в конце.
Дальше мы можем редактировать слайды так, как нравится: переписать заголовки и описания, добавить фоновое изображение или изменить цвет, настроить шрифт и отступы, изменить высоту контейнера. Все стили доступны в файле carousel.css.
Вся работа заняла пару минут. При этом компоненты имеют адаптивный дизайн. Вам не нужно настраивать даже медиа-запросы — они уже прописаны в исходных файлах Bootstrap. Такой подход позволяет значительно сэкономить время на верстку.
Конечно, редактирование шаблона — это не верстка. Но я могу взять код той же карусели и внедрить его в свой проект, к которому подключен Bootstrap. В этом главный плюс фреймворка.
Bootstrap содержит огромное количество готовых компонентов. Разработчику нужно только выбрать то, что необходимо для решения его задачи. По сути, это как работа с конструктором сайтов, только намного более гибким. Именно поэтому Bootstrap так хорош для прототипирования и быстрой верстки, но становится неудобным при разработке проектов с индивидуальным дизайном.
Как использовать Bootstrap с HTML
Функции JavaScript некоторых компонентов, таких как раскрывающиеся списки, вкладки и т. Д., Зависят от jQuery и popper.js.
Итак, включите jQuery и popper.js в следующем порядке прямо перед загрузкой файла JavaScript начальной загрузки для правильной работы.
Одно из преимуществ использования Bootstrap 4 CDN:
Многие пользователи уже скачали Bootstrap 4 от MaxCDN при посещении другой сайт.В результате он будет загружен из кеша при посещении вашего сайта, что приведет к сокращению времени загрузки. Кроме того, большинство CDN гарантируют, что после того, как пользователь запросит у него файл, он будет обслужен. с ближайшего к ним сервера, что также сокращает время загрузки.jQuery и Поппер?
Показать компоненты, требующие jQuery »
Bootstrap 4 использует jQuery и Popper.js для Компоненты JavaScript (например, модальные окна, всплывающие подсказки, всплывающие окна и т. Д.). Однако, если вы просто используете CSS часть Bootstrap, они вам не нужны.
- Закрытые оповещения
- Кнопки и флажки / переключатели для переключения состояний
- Карусель для слайдов, элементов управления и индикаторов
- Свернуть для переключения содержимого
- Выпадающие списки (для идеального позиционирования также требуется Popper.js)
- Модальные окна (открыть и закрыть)
- Navbar (для раскрывающихся меню)
- Всплывающие подсказки и всплывающие окна (также требуется Popper.js для идеального позиционирования)
- Scrollspy для прокрутки и обновлений навигации
Загрузка Bootstrap 4
Если вы хотите загрузить и разместить Bootstrap 4 самостоятельно, перейдите по ссылке https://getbootstrap.com/, и следуйте инструкциям там.
Создать первую веб-страницу с помощью Bootstrap 4
1. Добавьте тип документа HTML5
Bootstrap 4 использует элементы HTML и свойства CSS, требующие тип документа HTML5.
Всегда указывайте тип документа HTML5 в начале страница вместе с атрибутом lang и правильным набором символов:
2. Bootstrap 4 предназначен для мобильных устройств
Bootstrap 4 разработан, чтобы реагировать на мобильные устройства. Мобильные стили: часть основной структуры.
Чтобы обеспечить правильный рендеринг и сенсорное масштабирование, добавьте следующий тег внутри
элемент:
Часть width = device-width устанавливает ширину страницы, соответствующую ширине экрана.
устройства (который зависит от устройства).
Часть initial-scale = 1 устанавливает начальный уровень масштабирования при первой загрузке страницы
браузером.
3. Контейнеры
Bootstrap 4 также требует наличия содержащего элемента для обертывания содержимого сайта.
Есть два класса контейнеров на выбор:
- Класс
.containerпредоставляет отзывчивый контейнер фиксированной ширины - Класс
.container-fluidпредоставляет контейнер полной ширины , охватывающий всю ширину области просмотра
Две базовые загрузочные страницы, 4 страницы
В следующем примере показан код для базовой страницы Bootstrap 4 (с адаптивным контейнером фиксированной ширины):
Пример контейнера
Бутстрап 4 Пример
Моя первая страница начальной загрузки
Это текст.