Разное

Учебник bootstrap: Учебник по Bootstrap | ИТ Шеф

Содержание

Введение. Начало работы · Bootstrap. Версия v4.4

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



Быстрый старт


Хотите использовать Бутстрап в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.



CSS



Скопируйте и вставьте часть кода <link> в свой <head> перед всеми другими таблицами стилей, чтобы загрузить наш CSS.


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

JS


Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода <script> в конце страниц, прямо перед закрывающим </body>. Сперва jQuery , потом Popper.js, потом наши.

Мы используем мини-сборку jQuery, но и полную можно использовать.


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.


Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают в себя Popper, но не jQuery. Для получения дополнительной информации о том, что входит в Bootstrap, пожалуйста, смотрите наш раздел содержание.



Показать компоненты, требующие 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 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, shrink-to-fit=no">

Вы можете посмотреть пример этого в действии на странице starter template.


Размер ширины и высоты элемента


Для большей простоты масштабирования в 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 с помощью этих ресурсов:


  • @getbootstrap on Twitter.
  • The Official Bootstrap Blog.
  • the official Slack room.
  • Чат с камрадами по Bootstrap. Канал ##bootstrap на сервере irc.freenode.net.
  • Помощь в реализации Bootstrap 4 на Stackoverflow bootstrap-4).
  • При разработке через npm или аналогичные депозитарии, разработчикам следует использовать ключевое слово bootstrap в своих пакетах и библиотеках для максимальной видимости.

Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.



Учебное пособие по framework Bootstrap

Twitter Bootstrap один из самых популярных front-end вэб-фреймворков. Это удобный, интуитивно понятный и мощный мобильный первый фреймворк для более быстрой и простой веб-разработки. Он использует HTML, CSS и Javascript. Эти статьи научат вас основам Bootstrap Framework с помощью которого можно создавать любые веб-проекты. Статьи разделены на разделы, которые состоят из основной структуры Bootstrap, Bootstrap CSS, Компоненты слоев Bootstrap и плагины Bootstrap. Каждый из этих разделов содержит темы, связанные с простыми и полезными примерами.

Аудитория

Это руководство было подготовлено для тех, кто имеет базовые знания HTML и CSS и имеет желание развивать веб-сайты и блоги. После завершения этой статьи вы окажитесь на приличном уровне опыта в разработке веб-проектов с использованием Twitter Bootstrap.

Предпосылки

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

Пример кода на Bootstrap

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

<!DOCTYPE html>
<html lang = "en">
   
   <head>
      <meta charset = "utf-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
      <title>Шаблон Bootstrap 101</title>
      
      <!-- Bootstrap -->
      <link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- В HTML5 shim и Respond.js для поддержки IE8 элементы HTML5 и медиа запросов -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h2>Привет мир!</h2>
      
      <!-- jQuery (необходимые JavaScript плагины для Bootstrap's) -->
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      
      <!-- Включает все скомпилированные плагины (ниже), или включает отдельные файлы по мере необходимости -->
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
      
   </body>
</html>

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Примеры. Документация · Bootstrap. Версия v4.3.1

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

Пользовательские компоненты

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


Альбом

Простой одностраничный шаблон для фотогалереи, портфолио и многого другого.

Прайслист

Пример страницы с ценой, созданной с помощью карт, с пользовательским верхнего и нижнего колонтитула.

Checkout

Пользовательская форма заказа, показывающая компоненты формы и функции проверки.

Продукт

Ориентированная на продукт продвигающая маркетинговая страница с обширной сеткой и изображениями.

Обложка

Одностраничный шаблон для создания простых и красивых домашних страниц.

Слайдер

Навигационная панель, карусель и новые компоненты.

Блог

Двухколоночный макет блога с пользовательской навигацией, заголовком и содержанием.

Прижатый футер

Прижатый футер отображается в нижней части страницы, когда содержимое окна слишком короткое.

Прижатый футер с меню

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



Фреймворк

Примеры, которые направлены на внедрение использования встроенных компонентов, предоставляемых Bootstrap.


Разметка

Несколько примеров макетов сетки с различными уровнями вложенности.

Jumbotron

Макет jumbotron с навигационной панели и базовая система разметки.



Navbars

Использование компонента navbar по умолчанию и отображение способа его перемещения, размещения и расширения.


Статическое меню

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

Фиксированное меню

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



Эксперименты

Примеры, которые ориентированы на будущие функции или методы.


Скользящее меню

Превратите расширяемую навигационную панель в скользящем меню.




Bootstrap Бутстрап Начало работы


Что такое Bootstrap?

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

Что такое Адаптивный веб-дизайн?

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


История начальной загрузки

Bootstrap была разработана Марком Отто и Джейкобом Торнтоном в Твиттере и выпущена в качестве продукта с открытым исходным кодом в августе 2011 на GitHub.

В июне 2014 Bootstrap был проектом No1 на GitHub!


Зачем использовать Bootstrap?

Преимущества Bootstrap:

  • Простота в использовании: Кто-нибудь с только базовые знания HTML и CSS может начать использовать Bootstrap
  • Адаптивные функции: Адаптивный CSS Bootstrap адаптируется к телефонам, планшетам и рабочим столам
  • Мобильный-первый подход: В Bootstrap 3 стили Mobile-First являются частью базовой платформы
  • Совместимость с браузером: Bootstrap совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer, Safari и Opera)

Где получить Bootstrap?

Существует два способа начать использование Bootstrap на собственном веб-узле.

Вы можете:

  • Скачать Bootstrap из getbootstrap.com
  • Включить Bootstrap из CDN

Загрузка начальной загрузки

Если вы хотите скачать и хост Bootstrap самостоятельно, перейдите на getbootstrap.com, и следуйте инструкциям там.



Bootstrap CDN

Если вы не хотите загружать и размещать Bootstrap самостоятельно, вы можете включить его в CDN (сеть доставки контента).

Макскдн предоставляет поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить JQuery:

MaxCDN:

<!— jQuery library —>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js»></script>

<!— Latest compiled JavaScript —>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js»></script>

Одно из преимуществ использования Bootstrap CDN:
Многие пользователи уже скачали Bootstrap из макскдн при посещении другого сайта. В результате, он будет загружен из кэша, когда они посеща

Bootstrap 3: на Русском

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

Требуется jQuery

Пожалуйста имейте ввиду что все JavaScript-плагины требуют jQuery для работы, как в примере базовый шаблон. Уточните в bower.json какая версия jQuery поддерживается.

Скомпилированные файлы

После скачивания Вы найдете следующие файлы, логически объединенные в папки, файлы поставляются в минифицированных, и нет версиях. Структура скаченного архива:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Это стандартный вид Bootstrap’а: скомпилированные файлы — готовые к использованию в Вашем проекте. Мы предоставляем скомпилированные CSS и JS (bootstrap.*) файлы, вместе с минифицированными CSS и JS (bootstrap.min.*) файлами. Шрифт от Glyphicons так же включен в стандартный набор Bootstrap.

Исходный код

Исходный код Bootstrap’а так же включает в себя скомпилированные CSS, JavaScript файлы, и шрифты, но в дополнение Вы получаете исходники в виде LESS-файлов, JavaScript, и документацию. Обычно структура архива с исходным кодом выглядит след. образом:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
├── docs-assets/
├── examples/
└── *.html

Папки less/, js/, и fonts/ содержат исходный код для CSS, JS, и шрифтов. Папка dist/ содержит скомпилированный вариант исходного кода. Папки docs-assets/, examples/, и все *.html файлы относятся к документации по Bootstrap 3.

Bootstrap Бутстрап 4 Get Started


Что такое Bootstrap?

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

Что такое Адаптивный веб-дизайн?

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


Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицы стилей и большей отзывчивостью.

Bootstrap 4 поддерживает новейшие, стабильные выпуски всех основных браузеров и платформ. Тем не менее Internet Explorer 9 и вниз не поддерживается.

Если вам нужна поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.

Поддержка значков дропппед: Bootstrap 4 не поддерживает BS3 глификонс. Используйте Шрифт-Awesome или другие библиотеки значков вместо.


Зачем использовать Bootstrap?

Преимущества Bootstrap:

  • Простота в использовании: Кто-нибудь с только базовые знания HTML и CSS может начать использовать Bootstrap
  • Адаптивные функции: Адаптивный CSS Bootstrap адаптируется к телефонам, планшетам и рабочим столам
  • Мобильный-первый подход: В Bootstrap, мобильные-First стили являются частью основной платформы
  • Совместимость с браузером: Bootstrap 4 совместима со всеми современными браузерами (Chrome, Firefox, Internet Explorer 10 +, EDGE, Safari и Opera)

Где получить Bootstrap 4?

Существует два способа начать использование Bootstrap 4 на собственном веб-узле.

Вы можете:

  • Включить Bootstrap 4 из CDN
  • Скачать Bootstrap 4 из getbootstrap.com


Bootstrap 4 CDN

Если вы не хотите загружать и размещать Bootstrap 4 самостоятельно, вы можете включить его в CDN (сеть доставки контента).

Макскдн предоставляет поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить JQuery:

MaxCDN:

<!— jQuery library —>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js»></script>

<!— Popper JS —>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js»></script>

<!— Latest compiled JavaScript —>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js»></script>

Одно из преимуществ использования Bootstrap 4 CDN:
Многие пользователи уже скачали Bootstrap 4 из макскдн при посещении другого сайта. В результате, он будет загружен из кэша, когда они посеща

Bootstrap Бутстрап 4 Class

.activeДобавление цвета белого текста к активной ссылке в навигационной области .Navbar
.activeДобавление синего цвета фона к элементу активного списка в группе списковList Groups
.activeДобавление темно-синего цвета фона для имитации нажатой кнопкиButtons
.activeДобавляет синий цвет фона для активного раскрывающегося элемента в раскрывающемся спискеDropdowns
.activeДобавление синего цвета фона в активную ссылку разбиения на страницы (для выделения текущей страницы)Pagination
.activeОтображает/показывает текущий элемент каруселиCarousel
.alertСоздает окно сообщения предупрежденияAlerts
.alert-dangerТревога. Указывает на опасное или потенциально отрицательное действиеAlerts
.alert-darkТемная тревога. Темно-серый окно оповещенияAlerts
.alert-dismissibleУказывает закрывающееся окно оповещения. Вместе с .close классом этот класс используется для закрытия оповещения (добавляет дополнительные отступы)Alerts
.alert-headingДобавляет color:inherit к указанному элементуAlerts
.alert-infoСинее оповещение. Указывает нейтральное информативное изменение или действиеAlerts
.alert-lightСигнал тревоги. Светлая серая коробка оповещенияAlerts
.alert-linkИспользуется на ссылки внутри оповещения для обеспечения соответствия цветные ссылкиAlerts
.alert-primaryСиняя тревога. Указывает на важное действиеAlerts
.alert-secondaryСерый сигнал тревоги. Указывает на «менее» важное действиеAlerts
.alert-successЗеленая тревога. Указывает на успешное или положительное действиеAlerts
.alert-warningЖелтый сигнал тревоги. Указывает на осторожность следует принимать с этим действиемAlerts
.align-baselineЭлемент выравнивается по базовой линии родительского элемента. Это значение по умолчаниюUtilities
.align-bottomЭлемент выравнивается по нижнему элементу в строкеUtilities
.align-middleЭлемент помещается в середину

Bootstrap Начало работы


Что такое Bootstrap?

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

Что такое адаптивный веб-дизайн?

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

Пример начальной загрузки

My First Bootstrap Page
Измените размер этой адаптивной страницы, чтобы увидеть эффект!

Столбец 1

Lorem ipsum
dolor ..

Колонка 2

Lorem ipsum
dolor ..

Колонка 3

Lorem ipsum
долор..

Попробуй сам »


История начальной загрузки

Bootstrap был разработан Марком Отто и Джейкобом Торнтоном в Twitter и выпущен как продукт с открытым исходным кодом в августе 2011 года на GitHub.

В июне 2014 года Bootstrap был проектом №1 на GitHub!


Зачем использовать Bootstrap?

Преимущества бутстрапа:

  • Простота использования: Любой, кто имеет базовые знания HTML и CSS, может начать использовать Bootstrap
  • Адаптивные функции: Адаптивный CSS Bootstrap подстраивается под телефоны, планшеты и настольные компьютеры
  • Подход, ориентированный на мобильные устройства: В Bootstrap 3 стили, ориентированные на мобильные устройства, являются частью базовой структуры
  • Совместимость с браузером: Bootstrap совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer, Edge, Safari и Opera)

Где взять Bootstrap?

Есть два способа начать использовать Bootstrap на вашем собственном веб-сайте.

Вы можете:

  • Загрузите Bootstrap с getbootstrap.com
  • Включить бутстрап из CDN

Загрузка Bootstrap

Если вы хотите загрузить и разместить Bootstrap самостоятельно, перейдите на
getbootstrap.com,
и следуйте инструкциям там.



Загрузочный CDN

Если вы не хотите загружать и размещать Bootstrap самостоятельно, вы можете включить его из CDN (сети доставки контента).

MaxCDN обеспечивает поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить jQuery:

Макс.CDN:


< ! - Последний скомпилированный JavaScript ->

Одно из преимуществ использования Bootstrap CDN:
Многие пользователи уже скачали
Bootstrap от MaxCDN при посещении
другой сайт.В результате он будет загружен из кеша при посещении вашего сайта, что приведет к сокращению времени загрузки.
Кроме того, большинство CDN гарантируют, что как только пользователь запросит у него файл, он будет обслужен.
с ближайшего к ним сервера, что также сокращает время загрузки.

jQuery
Bootstrap использует jQuery для подключаемых модулей JavaScript (таких как модальные окна, всплывающие подсказки и т. Д.). Однако, если вы просто используете
CSS часть Bootstrap, вам не нужен jQuery.


Создание первой веб-страницы с помощью Bootstrap

1.Добавьте тип документа HTML5

Bootstrap использует элементы HTML и свойства CSS, требующие
тип документа HTML5.

Всегда указывайте тип документа HTML5 в начале
страницу вместе с атрибутом lang и правильным набором символов:






2. Bootstrap 3 предназначен для мобильных устройств

Bootstrap 3 предназначен для работы с мобильными устройствами.Мобильные стили:
часть основной структуры.

Чтобы обеспечить правильный рендеринг и сенсорное масштабирование, добавьте следующий тег внутри
элемент:

Часть width = device-width устанавливает ширину страницы, соответствующую ширине экрана.
устройства (который зависит от устройства).

Часть initial-scale = 1 устанавливает начальный уровень масштабирования при первой загрузке страницы
браузером.

3. Контейнеры

Bootstrap также требует наличия содержащего элемента для обертывания содержимого сайта.

Есть два класса контейнеров на выбор:

  1. Класс .container предоставляет отзывчивый контейнер фиксированной ширины
  2. Класс .container-fluid предоставляет контейнер полной ширины , охватывающий всю ширину окна просмотра

Две основные страницы начальной загрузки

В следующем примере показан код базовой страницы Bootstrap (с адаптивным контейнером фиксированной ширины):

Пример

Пример начальной загрузки

Моя первая страница начальной загрузки

Это текст.


Попробуй сам »

В следующем примере показан код базовой страницы Bootstrap (с контейнером полной ширины):

Пример

Пример начальной загрузки

Моя первая загрузочная страница

Это текст.


Попробуй сам »

.

Bootstrap 4 Начало работы


Что такое Bootstrap?

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

Что такое адаптивный веб-дизайн?

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

Bootstrap 4, пример

Мой первый бутстрап
Страница
Измените размер этой адаптивной страницы, чтобы увидеть эффект!

Столбец 1

Lorem ipsum
dolor ..

Колонка 2

Lorem ipsum
dolor ..

Колонка 3

Lorem ipsum
долор..

Попробуй сам »


Bootstrap 3 против Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью.

Bootstrap 4 поддерживает последние стабильные версии всех основных браузеров и
платформы. Однако Internet Explorer 9 и более ранние версии не поддерживаются.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый
стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации.Однако в
Это.

Поддержка удаленных значков : Bootstrap 4 не поддерживает глификоны BS3. Вместо этого используйте Font-Awesome или другие библиотеки значков.


Зачем использовать Bootstrap?

Преимущества бутстрапа:

  • Простота использования: Любой, кто имеет базовые знания HTML и CSS, может начать использовать Bootstrap
  • Адаптивные функции: Адаптивный CSS Bootstrap подстраивается под телефоны, планшеты и настольные компьютеры
  • Подход, ориентированный на мобильные устройства: В Bootstrap стили, ориентированные на мобильные устройства, являются частью базовой структуры
  • Совместимость с браузером: Bootstrap 4 совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer 10+, Edge, Safari и Opera)

Где взять Bootstrap 4?

Есть два способа начать использовать Bootstrap 4 на вашем собственном веб-сайте.

Вы можете:

  • Включить Bootstrap 4 из CDN
  • Загрузите Bootstrap 4 с сайта getbootstrap.com


Бутстрап 4 CDN

Если вы не хотите загружать и размещать Bootstrap 4 самостоятельно, вы можете включить его из CDN (сети доставки контента).

MaxCDN обеспечивает поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить jQuery:

Макс.CDN:




Одно из преимуществ использования Bootstrap 4 CDN:
Многие пользователи уже скачали
Bootstrap 4 от MaxCDN при посещении
другой сайт.В результате он будет загружен из кеша при посещении вашего сайта, что приведет к сокращению времени загрузки.
Кроме того, большинство CDN гарантируют, что как только пользователь запросит у него файл, он будет обслужен.
с ближайшего к ним сервера, что также сокращает время загрузки.

jQuery и Поппер?
Bootstrap 4 использует jQuery и Popper.js для
Компоненты JavaScript (например, модальные окна, всплывающие подсказки, всплывающие окна и т. Д.). Однако, если вы просто используете
CSS часть Bootstrap, они вам не нужны.

Показать компоненты, требующие jQuery »

  • Закрытые оповещения
  • Кнопки и флажки / переключатели для переключения состояний
  • Карусель для слайдов, элементов управления и индикаторов
  • Свернуть для переключения содержимого
  • раскрывающихся списков (для идеального позиционирования также требуется 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 также требует наличия содержащего элемента для обертывания содержимого сайта.

Есть два класса контейнеров на выбор:

  1. Класс .container предоставляет отзывчивый контейнер фиксированной ширины
  2. Класс .container-fluid предоставляет контейнер полной ширины , охватывающий всю ширину окна просмотра

Две основные страницы начальной загрузки 4

В следующем примере показан код для базовой страницы Bootstrap 4 (с адаптивным контейнером фиксированной ширины):

Пример контейнера

Бутстрап
4 Пример

Моя первая страница начальной загрузки

Это текст.


Попробуй сам »

В следующем примере показан код базовой страницы Bootstrap 4 (с контейнером полной ширины):

Пример жидкости в контейнере

Бутстрап
4 Пример

Моя первая загрузочная страница

Это текст.


Попробуй сам »

.

Bootstrap 4 контейнера


Контейнеры

Из предыдущей главы вы узнали, что Bootstrap требует
элемент для обертывания содержимого сайта.

Контейнеры используются для заполнения содержимого внутри
из них, и доступно два класса контейнеров:

  1. Класс .container предоставляет адаптивный контейнер фиксированной ширины
  2. Класс .container-fluid предоставляет контейнер полной ширины , охватывающий всю ширину области просмотра

Фиксированный контейнер

Используйте .container для создания адаптивного контейнера фиксированной ширины.

Обратите внимание, что его ширина ( max-width ) будет меняться для разных размеров экрана:

Очень маленький
<576 пикселей
Маленький
≥576 пикселей
Средний
≥768 пикселей
Большой
≥992 пикселей
Очень большой
≥1200 пикселей
максимальная ширина 100% 540px 720 пикселей 960px 1140px

Откройте пример ниже и измените размер окна браузера, чтобы увидеть, что ширина контейнера изменится в разных точках останова:

Пример

Моя первая страница начальной загрузки

Это текст.

Попробуй сам »


Контейнер для жидкости

Используйте класс .container-fluid для создания контейнера полной ширины, который всегда будет охватывать всю ширину экрана ( ширина всегда 100% ):

Пример

Моя первая страница начальной загрузки

Это текст.

Попробуй сам »


Прокладка контейнера

По умолчанию контейнеры имеют отступы слева и справа по 15 пикселей, без верхнего и нижнего отступов.Поэтому мы часто используем утилиты для определения интервалов , такие как дополнительные отступы и поля, чтобы они выглядели еще лучше. Например, .pt-3 означает «добавить верхний отступ размером 16 пикселей»:


Граница и цвет контейнера

Другие утилиты, такие как границы и цвета, также часто используются вместе с контейнерами:

Пример

У этого контейнера есть граница, а также дополнительные поля и поля.

Этот контейнер имеет темный цвет фона и белый текст, а также некоторые дополнительные отступы и поля.

Этот контейнер имеет синий цвет фона и белый текст, а также некоторые дополнительные отступы и поля.

Попробуй сам »


Адаптивные контейнеры

Вы также можете использовать классы .container-sm | md | lg | xl для создания адаптивных контейнеров.

max-width контейнера будет меняться для разных размеров экрана / окон просмотра:

Класс Очень маленький
<576 пикселей
Маленький
≥576 пикселей
Средний
≥768 пикселей
Большой
≥992 пикселей
Очень большой
≥1200 пикселей
900 11.контейнер-см 100% 540px 720 пикселей 960px 1140px
.контейнер-мкр 100% 100% 720 пикселей 960px 1140px
. Контейнер-LG 100% 100% 100% 960px 1140px
.контейнер-XL 100% 100% 100% 100% 1140px

Пример

.container-sm

.container-md

.container-lg

.container-xl

Попробуй сам »


.

Bootstrap 4 Утилиты


Утилиты Bootstrap 4

Bootstrap 4 имеет множество служебных / вспомогательных классов для быстрого стилизации элементов без использования кода CSS.


Границы

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

Пример

Пример






Попробуй сам »


Цвет границы

Добавьте цвет к границе с любым из контекстных классов цвета границы:

Пример

Пример









Попробуй сам »


Радиус границы

Добавьте закругленные углы к элементу с помощью закругленных классов :

Пример

Пример









Попробуй сам »



Поплавок и Clearfix

Переместите элемент вправо с помощью .float-right class или left с .float-left и clear float с классом .clearfix :

Пример

Пример

Поплавок влево
Поплавок вправо

Попробуй сам »


Адаптивные поплавки

Поместите элемент влево или вправо в зависимости от ширины экрана с помощью адаптивных классов с плавающей запятой (.float - * - left | right — где * sm (> = 576px), md (> = 768px), lg (> = 992px) или xl (> = 1200px)):

Пример

Плавать вправо на маленьких экранах или более широких

Плавающих вправо на средних экранах или более широких

Плавать вправо на больших экранах или более широких

Плавать вправо на очень больших экранах или более широких

Плавающих нет

Пример

Плавайте прямо на маленьких экранах или шире
Плавать вправо на средних или широких экранах
Плавать вправо на больших экранах или шире
Плавайте прямо на очень больших экранах или
шире
Без поплавка

Попробуй сам »


Выровнять по центру

Отцентрируйте элемент с помощью .mx-auto class (добавляет margin-left и margin-right: auto):

Пример

Пример

По центру

Попробуй сам »


Ширина

Установите ширину элемента с помощью классов w- * ( .w-25 , .w-50 , .w-75 , .w-100 , .mw-100 ):

Пример

Ширина 25%

Ширина 50%

Ширина 75%

Ширина 100%

Макс.ширина 100%

Пример

Ширина 25%

Ширина
50%

Ширина 75%

Ширина 100%

Макс ширина 100%

Попробуй сам »


Высота

Установите высоту элемента с помощью классов h- * (.h-25 , .h-50 , . h-75 , .h-100 , .mh-100 ):

Пример

Высота 25%

Высота 50%

Высота 75%

Высота 100%

Макс.высота 100%

Пример

Высота 25%

Высота
50%

Высота 75%

Высота 100%

Макс. Высота 100%

Попробуй сам »


Шаг

Bootstrap 4 имеет широкий набор вспомогательных классов адаптивных полей и отступов.Они работают для всех точек останова: xs (<= 576px), sm (> = 576px), md (> = 768px), lg (> = 992px) или xl (> = 1200px). ):

Классы используются в формате: {свойство} {стороны} - {размер} для xs и {свойство} {стороны} - {точка останова} - {size} для sm , md , lg и xl .

Где свойство является одним из:

  • м — устанавливает маржа
  • p — комплекты набивки

Где сторон — одна из:

  • т — устанавливает верхний край или верхний край
  • b — устанавливает нижнее поле или нижнее поле
  • l — устанавливает левое поле или левое заполнение
  • r — устанавливает правое поле или правое заполнение
  • x — устанавливает как padding-left и padding-right или margin-left и margin-right
  • y — устанавливает как padding-top , так и padding-bottom или margin-top и margin-bottom
  • blank — устанавливает поле или отступ на всех 4 сторонах элемента

Где размер является одним из:

  • 0 — устанавливает поле или отступ от до 0
  • 1 — устанавливает поле или отступ от до .25rem (4 пикселя, если размер шрифта 16 пикселей)
  • 2 — устанавливает поле или отступ от до . 5rem (8 пикселей, если размер шрифта 16 пикселей)
  • 3 — устанавливает поле или отступ от до 1rem (16 пикселей, если размер шрифта 16 пикселей)
  • 4 — устанавливает поле или отступ от до 1.5rem (24 пикселя, если размер шрифта 16 пикселей)
  • 5 — устанавливает поле или отступ от до 3rem (48 пикселей, если размер шрифта 16 пикселей)
  • auto — устанавливает маржу на auto

Примечание. Поля также могут быть отрицательными, добавив «n» перед размером . :

  • n1 — устанавливает маржу с на -.25rem (-4px, если размер шрифта 16px)
  • n2 — устанавливает поле на -,5 rem (-8 пикселей, если размер шрифта 16 пикселей)
  • n3 — устанавливает поле на -1rem (-16 пикселей, если размер шрифта 16 пикселей)
  • n4 — устанавливает поле на -1,5 rem (-24px, если font-size 16px)
  • n5 — устанавливает поле на -3rem (-48 пикселей, если размер шрифта 16 пикселей)

Пример

У меня только верхняя обивка (1.5rem = 24 пикселя)

У меня есть отступы со всех сторон (3rem = 48px)

У меня есть поля со всех сторон (3rem = 48px) и нижний отступ (3rem = 48px)

Пример

У меня есть только верхний отступ (1.5rem =
24px)

У меня есть отступы со всех сторон
(3rem = 48px)

У меня есть запас на
со всех сторон (3rem = 48px) и нижний отступ (3rem = 48px)

Попробуй сам »

Другие примеры интервалов

.м- # / м - * - # поля со всех сторон Попробуй это
.mt- # / mt - * - # верхнее поле Попробуй это
.mb- # / mb - * - # нижнее поле Попробуй это
.ml- # / ml - * - # поле слева Попробуй это
.MR- # / MR - * - # поле справа Попробуй это
.mx- # / mx - * - # поля слева и справа Попробуй это
.my- # / my - * - # поля сверху и снизу Попробуй это
.п- # / п - * - # обивка со всех сторон Попробуй это
.pt- # / pt - * - # утеплитель Попробуй это
.pb- # / pb - * - # обивка нижняя Попробуй это
.pl- # / pl - * - # обивка левая Попробуй это
.пр- # / пр - * - # обивка правая Попробуй это
.py- # / py - * - # обивка сверху и снизу Попробуй это
.px- # / px - * - # обивка слева и справа Попробуй это

Тени

Используйте классы shadow- для добавления теней к элементу:

Пример

Без тени

Маленькая тень

Тень по умолчанию

Большая тень

Пример

Без тени

Маленький
тень

По умолчанию
тень

Большой
тень

Попробуй сам »


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

Используйте классы align- для изменения выравнивания элементов (работает только с элементами inline, inline-block, inline-table и table cell):

Пример

исходный уровень
Топ
средний
дно
текст вверху
текст внизу

Пример

baseline
верх
средний
снизу
верхний текст
нижний текст

Попробуй сам »


Адаптивные встраивания

Создавайте адаптивные вставки для видео или слайд-шоу на основе ширины родительского элемента.

Добавьте .embed-response-item к любым элементам вставки (например,

Попробуй сам »


Видимость

Используйте классы .visible или .invisible для управления видимостью элементов. Примечание. Эти классы не изменяют отображаемое значение CSS. Они только добавляют видимость: видимая или видимость: скрытая :

Пример

Я на виду

Я невидимый

Пример

Меня видно

Я
невидимый

Попробуй сам »


Позиция

Используйте .фиксированный верхний класс , чтобы любой элемент фиксировался / оставался на
верх страницы:

Пример

Попробуй сам »

Используйте класс .fixed-bottom , чтобы любой элемент фиксировался / оставался на
низ страницы:

Пример

Попробуй сам »

Используйте класс .sticky-top , чтобы зафиксировать любой элемент / остаться на
верхний страницы при прокрутке мимо нее. Примечание:
Этот класс не работает в IE11 и более ранних версиях (будет рассматривать его как позицию : относительный ).

Пример

Попробуй сам »


Значок закрытия

Используйте класс .close для стилизации значка закрытия. Это часто используется для предупреждений и модальных окон. Обратите внимание, что мы используем & times; , чтобы создать фактический значок (более красивый
«Икс»). Также обратите внимание, что по умолчанию он плавает справа:


Устройства чтения с экрана

Используйте .sr-only класс, чтобы скрыть элемент на всех устройствах, кроме программ чтения с экрана:

Пример

Я буду скрыт на всех экранах, кроме экрана
читателей

Попробуй сам »


Цвета

Как описано в главе «Цвета», вот список всех классов цвета текста и фона:

Классы цветов текста: .text-mute ,
.text-primary , .text-success , .текстовая информация ,
.text-warning , .text-dangerous , .text-secondary , .text-white ,
.text-dark , .text-body (цвет тела по умолчанию / часто черный) и .text-light :

Пример

Этот текст отключен.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет собой предупреждение.

Этот текст представляет опасность.

Дополнительный текст.

Темно-серый текст.

Основной текст.

Светло-серый текст.

Попробуй сам »

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

Вы также можете добавить 50% непрозрачности для черного или белого текста с помощью классов .text-black-50 или .text-white-50 :

Пример

Черный текст с непрозрачностью 50% на белом фоне

Белый текст с непрозрачностью 50% на черном фоне

Попробуй сам »


Цвета фона

Классы фоновых цветов: .bg-primary ,
.bg-success
, .bg-info , .bg-warning , .bg-dangerous , .bg-secondary , .bg-dark и .bg-light .

Обратите внимание, что цвета фона не определяют цвет текста, поэтому в некоторых случаях вы захотите использовать их вместе с классом .text- * .

Пример

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет собой предупреждение.

Этот текст представляет опасность.

Дополнительный цвет фона.

Темно-серый цвет фона.

Светло-серый цвет фона.

Попробуй сам »


Типографика / классы текста

Как описано в главе «Типографика», вот список всех классов типографики / текста:

.

Класс Описание Пример
.дисплей- * Отображаемые заголовки используются, чтобы выделить больше, чем обычные заголовки (больший размер шрифта и меньший размер шрифта), и есть четыре класса на выбор: .display-1 , .display-2 , .display -3 , . Дисплей-4 Попробуй
. Font-weight-bold Жирный текст Попробуй
. Шрифт-груз-жирдер Полужирный текст Попробуй
.шрифт-вес-нормальный Обычный текст Попробуй
. Font-weight-light Облегченный текст Попробуй
.font-weight-lighter Облегченный текст Попробуй
. Шрифт курсив Курсив Попробуй
.свинец Выделяет абзац Попробуй
. Маленький Обозначает меньший текст (установлен на 85% от размера родительского) Попробуй
. Текстовый разрыв Предотвращает нарушение макета длинным текстом Попробуй
.text-center Обозначает текст с выравниванием по центру Попробуй
.текст-украшение-нет Удаляет подчеркивание ссылки Попробуй
. Текст слева Обозначает текст с выравниванием по левому краю Попробуй
. Выравнивание текста Обозначает текст с выравниванием по ширине Попробуй
.text-monospace Моноширинный текст Попробуй
.текст-nowrap Указывает на отсутствие переноса текста Попробуй
. Текст в нижнем регистре Обозначает текст в нижнем регистре Попробуй
.text-reset Сбрасывает цвет текста или ссылки (наследует цвет от родительского) Попробуй
. Текст-право Обозначает текст с выравниванием по правому краю Попробуй
.текст верхний регистр Обозначает текст в верхнем регистре Попробуй
.text-capitalize Обозначает прописной текст Попробуй
.инициализм Отображает текст внутри элемента с немного меньшим размером шрифта Попробуй
. List-unstyled Удаляет стиль списка по умолчанию и левое поле для элементов списка (работает как с

    , так и с

      ).Этот класс применяется только к непосредственным дочерним элементам списка (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс также ко всем вложенным спискам)
Попробуй
.list-inline Помещает все элементы списка в одну строку (используется вместе с
.list-inline-item для каждого элемента

  • )
  • Попробуй
    . С предварительной прокруткой Делает элемент

      прокручиваемым
    Попробуй

    Блочные элементы

    Чтобы превратить элемент в блочный, добавьте .d-блок кл. Используйте любой из классов d - * - block для управления КОГДА элемент должен быть блочным элементом с определенной шириной экрана:

    Пример

    d-блок
    d-sm-блок
    д-мд-блок
    d-lg-блок
    d-xl-block

    Пример

    d-block
    d-sm-block
    d-md-block
    d-lg-block
    d-xl-block

    Попробуй сам "


    Другие классы отображения

    Также доступны другие классы отображения:

    Класс Описание Пример
    .d-нет Скрывает элемент Попробуй
    .d - * - нет Скрывает элемент на экране определенного размера Попробуй
    .d-рядный Делает элемент встроенным Попробуй
    .d - * - рядный Делает элемент встроенным на экране определенного размера Попробуй
    .d-рядный блок Делает элемент встроенным в блок Попробуй
    .d - * - встроенный блок Создает встроенный блок элемента на экране определенного размера Попробуй
    .d-стол Отображает элемент в виде таблицы Попробуй
    .d - * - таблица Отображает элемент в виде таблицы на экране определенного размера Попробуй
    .d-таблица-ячейка Отображает элемент в виде ячейки таблицы Попробуй
    .d - * - таблица-ячейка Отображает элемент в виде ячейки таблицы на экране определенного размера Попробуй
    .d-table-row Отображает элемент в виде строки таблицы Попробуй
    .d - * - таблица-строка Отображает элемент в виде строки таблицы на экране определенного размера Попробуй
    .d-flex Создает контейнер flexbox и преобразует прямые дочерние элементы в элементы гибкости Попробуй
    .d - * - гибкий Создает контейнер flexbox на экране определенного размера Попробуй
    .d-inline-flex Создает встроенный контейнер Flexbox Попробуй
    .d - * - inline-flex Создает встроенный контейнер Flexbox на экране определенного размера Попробуй

    Flex

    Используйте классы .flex- * для управления макетом с помощью flexbox.

    Узнайте больше о Bootstrap 4 Flex в нашей следующей главе.

    Пример

    По горизонтали:

    Гибкий элемент 1

    Гибкий элемент 2

    Элемент гибкости 3

    Гибкий элемент 1

    Гибкий элемент 2

    Элемент гибкости 3

    По вертикали:

    Гибкий элемент 1

    Гибкий элемент 2

    Элемент гибкости 3

    Гибкий элемент 1

    Гибкий элемент 2

    Элемент гибкости 3

    .

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *