Bootstrap 4 - Краткое руководство

Что такое Bootstrap 4?

Bootstrap 4 - это мощный и популярный интерфейсный фреймворк для мобильных устройств для создания адаптивных мобильных сайтов в Интернете. Это последняя версия Bootstrap , в которой используются HTML, CSS и JavaScript.

История

Последний стабильный выпуск Bootstrap v3.3.7 был в июле 2016 года, а в августе 2017 года была выпущена бета-версия Bootstrap 4.0.0.

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

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

  • Только со знанием HTML и CSS любой может начать работу с Bootstrap. Также на официальном сайте Bootstrap есть хорошая документация.

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

  • Предоставляет чистое и единообразное решение для создания интерфейса для разработчиков.

  • Он содержит красивые и функциональные встроенные компоненты, которые легко настроить.

  • Это открытый исходный код, обеспечивающий настройку через Интернет.

Bootstrap 3 в / с Bootstrap 4

Bootstrap 4 - это последняя версия Bootstrap 3, исходные файлы CSS которой преобразованы в SCSS. Он использует гибкий модальный модуль для сетки и поддерживает все последние версии браузеров. Однако он поддерживает Internet Explorer 9+ и iOS 7+ и отказался от поддержки IE 8 и более ранних версий, iOS 6 и более ранних версий. Дополнительную информацию о различиях между Bootstrap 3 и Bootstrap 4 можно найти в этой главе .

Вы можете начать использовать Bootstrap 4 на своем веб-сайте, включив его из CDN (сети доставки контента) или загрузив с getbootstrap.com .

Использование CDN

Bootstrap 4 можно использовать на веб-сайте, включив его из сети доставки контента .

Используйте в своем проекте скомпилированный CDN Bootstrap для CSS и JS.

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

Включите CDN-версии jQuery и Popper.js (Bootstrap 4 использует jQuery и Popper.js для использования компонентов JavaScript, таких как модальные окна, всплывающие подсказки, всплывающие окна и т. Д.) До минифицированного Bootstrap JavaScript , если вы используете скомпилированную версию JavaScript.

Ниже приведены некоторые компоненты, для которых требуется jQuery.

  • Используется для закрываемых предупреждений

  • Переключайте состояния с помощью кнопок и флажков / переключателей и сворачивайте для переключения содержимого

  • Карусель для слайдов, элементов управления и индикаторов

  • Выпадающие списки ( для идеального позиционирования используется Popper.js )

  • Открыть и закрыть модальные окна

  • Для сворачивания панели навигации

  • Всплывающие подсказки и всплывающие окна ( для идеального позиционирования используется Popper.js )

Скачивание Bootstrap 4

Вы можете скачать Bootstrap 4 из https://getbootstrap.com/docs/4.1/getting-started/download/. Когда вы нажмете на эту ссылку, вы увидите экран, как показано ниже -

Здесь вы видите две кнопки -

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

  • Download Source - Щелкнув по ней, вы можете получить последнюю версию Bootstrap SCSS, исходный код JavaScript и файлы документации.

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

Файловая структура

Предварительно скомпилированный Bootstrap 4

После загрузки скомпилированной версии Bootstrap 4 извлеките ZIP-файл, и вы увидите следующую структуру файлов / каталогов:

Как видите, есть скомпилированные CSS и JS (bootstrap. *), А также скомпилированные и минифицированные CSS и JS (bootstrap.min. *).

Исходный код Bootstrap 4

Если вы загрузили исходный код Bootstrap 4, то файловая структура будет следующей:

  • Файлы в js / и scss / являются исходным кодом для Bootstrap CSS и JavaScript.

  • Расстояние / папка включает в себя все перечисленные в разделе загрузки скомпилированного выше.

  • В Docs / примеры / , включает в себя исходный код для Bootstrap документации и примеры использования Bootstrap.

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

В приведенном ниже примере указывается простая веб-страница Bootstrap 4 -

пример

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Это даст следующий результат -

Вывод

Bootstrap 4 использует классы-контейнеры для обертывания содержимого страницы. Он содержит два класса контейнеров -

  • .container - Он представляет собой контейнер фиксированной ширины.

  • .container-fluid - Он представляет собой контейнер полной ширины.

Контейнер

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

<div class = "container">
   ...
</div>

пример

В приведенном ниже примере указывается простая веб-страница с контейнером фиксированной ширины -

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
      <style>
         .container {
            background: #a52c644a;
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px;
         }   
      </style>
   </head>
   
   <body>
      <div class = "container">
         <h2>Fixed Width Container</h2>
         This is a simple web page with fixed width container by using 
         <code>.container</code> class.
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Это даст следующий результат -

Вывод

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

Вы можете создать контейнер полной ширины, используя класс .container-fluid, как показано ниже.

<div class = "container-fluid">
   ...
</div>

В приведенном ниже примере указывается простая веб-страница с полноширинным контейнером -

пример

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
       <style>
         .container-fluid {
            background: #a52c644a;
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px;
         }   
      </style>
   </head>
   
   <body>
      <div class = "container-fluid">
         <h2>Full Width Container</h2>
         This is a simple web page with full width container by using 
         <code>.container-fluid</code> class.
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity =" sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Это даст следующий результат -

Вывод

Описание

Система сеток Bootstrap 4, построенная с помощью flexbox, полностью адаптивна и масштабируется до 12 столбцов (в соответствии с размером устройства) путем создания макета со строками и столбцами на странице. Он обеспечивает адаптивную мобильную систему гибкой сетки, которая масштабирует столбцы по мере увеличения размера устройства или области просмотра.

Работа сетевой системы

  • Строки должны быть помещены в класс .container для правильного выравнивания и заполнения.

  • Для гибкой ширины используйте класс .container и для фиксированной ширины во всем окне просмотра используйте класс .container-fluid .

  • Используйте строки для создания горизонтальных групп столбцов.

  • Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк.

  • Столбцы содержат отступы для управления расстоянием между ними.

  • Если вы разместите более 12 столбцов в строке, то столбцы будут помещены в новую строку.

  • Столбцы создают промежутки между содержимым столбцов посредством заполнения. Поэтому вы можете удалить поля для строк и отступы для столбцов с помощью класса .no-gutters в строке.

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

  • Предопределенные классы сетки, такие как .col-4, доступны для быстрого создания макетов сетки. LESS-миксины также могут использоваться для более семантических макетов.

Параметры сетки

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

Очень маленькие устройства (<576 пикселей) Маленькие устройства (≥576 пикселей) Средние устройства (≥768 пикселей) Большие устройства (≥992 пикселей) Очень большие устройства (≥1200 пикселей)
Поведение сетки Горизонтально всегда Свернут, чтобы начать, горизонтально над точками останова Свернут, чтобы начать, горизонтально над точками останова Свернут, чтобы начать, горизонтально над точками останова Свернут, чтобы начать, горизонтально над точками останова
Максимальная ширина контейнера Нет (авто) 540 пикселей 720 пикселей 960 пикселей 1140 пикселей
Классные классы .col- .col-sm- .col-md- .col-lg- .col-xl-
# столбцов 12 12 12 12 12
Ширина желоба

30 пикселей

(15 пикселей с каждой стороны столбца)

30 пикселей

(15 пикселей с каждой стороны столбца)

30 пикселей

(15 пикселей с каждой стороны столбца)

30 пикселей

(15 пикселей с каждой стороны столбца)

30 пикселей

(15 пикселей с каждой стороны столбца)

Гнездовой да да да да да
Порядок столбцов да да да да да

Базовая структура сетки

Ниже приводится базовая структура сетки Bootstrap 4.

<div class = "container">
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>	  
   </div>
   
   <div class = "row">...</div>
</div>

Пример сеточной системы

Ниже приведен пример сеточной системы Bootstrap 4:

пример

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
      </style>
         .grid_system  div[class^="col"] {
            border: 1px solid white;
            background: #e4dcdc;
            text-align: center;
            padding-top: 5px;
            padding-bottom: 5px
         }
      </style>
   </head>
   
   <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
         </div>
         
         <div class = "row">
            <div class =" col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-5">.col-sm-5</div>
            <div class = "col-sm-7">.col-sm-7</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-6">.col-sm-6</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-12">.col-sm-12</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Это даст следующий результат -

Вывод

Создание макетов с двумя столбцами

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

пример

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-6">.col-sm-6</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-7">.col-sm-7</div>
            <div class = "col-sm-5">.col-sm-5</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-8">.col-sm-8</div>
         </div>
		 
         <div class = "row">
            <div class = "col-sm-9">.col-sm-9</div>
            <div class = "col-sm-3">.col-sm-3</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Это даст следующий результат -

Вывод

Создание макетов с тремя столбцами

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

пример

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-5">.col-sm-5</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-2">.col-sm-2</div>
            <div class = "col-sm-8">.col-sm-8</div>
            <div class = "col-sm-2">.col-sm-2</div>
         </div>
		
         <div class = "row">
            <div class = "col-sm-2">.col-sm-2</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-7">.col-sm-7</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Это даст следующий результат -

Вывод

Описание

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

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

S.No. Методы и описание
1

Типография

Функция типографики создает заголовки, абзацы, списки и другие встроенные элементы.

2

Код

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

3

Картинки

Bootstrap 4 обеспечивает поддержку изображений с помощью тега <img>.

4

Столы

Таблицы используются для отображения данных в табличном формате.

5

Цифры

Элемент figure определяет содержимое вместе со связанными изображениями с необязательной подписью.

Описание

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

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

S.No. Методы и описание
1

Оповещения

Компонент предупреждений определяет предопределенное сообщение для действий пользователя.

2

Значки

Значки используются для выделения дополнительной информации к контенту.

3

Панировочные сухари

Он используется для отображения информации о сайте на основе иерархии.

4

Кнопки

Bootstrap предоставляет нажимаемую кнопку для размещения такого содержимого, как текст и изображения.

5

Группа кнопок

Группы кнопок позволяют размещать несколько кнопок вместе в одной строке.

6

Карты

Карточка - это контейнер с содержимым, который отображает рамку с некоторыми отступами вокруг нее.

7

Карусель

Карусель - это гибкий и отзывчивый способ добавить слайдер на ваш сайт.

8

Свернуть

Он используется для отображения или скрытия содержимого.

9

Выпадающие списки

Выпадающие меню можно использовать для отображения ссылок в виде списка.

10

Формы

Элемент формы используется для сбора данных от пользователя.

11

Входная группа

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

12

Jumbotron

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

13

Модальный

Модальное окно - это дочернее окно, которое накладывается на свое родительское окно.

14

Navs

Bootstrap предоставляет элементы навигации для вашего сайта в горизонтальном меню.

15

Навбар

Navbar предоставляет заголовки навигации для вашего приложения или сайта.

16

Пагинация

Разбивка на страницы используется для разделения связанного содержимого на несколько страниц.

17

Поповерс

Popover похож на всплывающую подсказку, предлагая расширенный вид с заголовком.

18

Прогресс

Индикатор выполнения показывает прогресс процесса с помощью составных полос, анимированных фонов и текстовых меток.

19

Scrollspy

Scrollspy используется для указания текущей активной ссылки в меню на основе положения прокрутки.

20

Всплывающие подсказки

Всплывающие подсказки полезны, когда вам нужно описать ссылку.

Описание

Bootstrap 4 использует набор утилит для отображения границ, цвета текста, встраивания видео и т. Д. На веб-страницу.

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

S.No. Методы и описание
1

Границы

Утилита Border предоставляет стиль, цвет и радиус границы элемента.

2

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

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

3

Цвета

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

4

Встроить

Он используется для встраивания видео на страницу с помощью элемента <iframe>.

5

Плавать

Он используется для перемещения элемента влево или вправо.

6

Тени и интервалы

Утилита Shadow добавляет тень к элементам, а утилита Spacing предоставляет значения полей или отступов для элемента.

7

Размеры

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

8

Текст

Bootstrap предоставляет текстовые утилиты для управления выравниванием, преобразованием, весом и т. Д. Текста.

9

Flex

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

Описание

Bootstrap - это мощный и популярный интерфейсный фреймворк для мобильных устройств, предназначенный для создания адаптивных мобильных сайтов в Интернете с помощью HTML, CSS и JS.

В следующей таблице показаны различия в Bootstrap 3 и Bootstrap 4.

S.No. Составная часть Бутстрап 3 Бутстрап 4
1 Исходные файлы CSS МЕНЬШЕ SCSS
2 Сетка 4-х уровневая сеточная система (xs, sm, md, lg) 5-ти уровневая сеточная система (xs, sm, md, lg, xl)
3 CSS Unit px rem
4 Размер шрифта 14 пикселей 16 пикселей
5 Раскрывающаяся структура Создано с помощью <ul> и <li> Создано с помощью <ul> или <div>
6 Смещение колонн col-md-offset-4 офсет-мд-4
7 Картинки .img-адаптивный класс .img-fluid класс
8 Столы Добавить класс .table-responseive в родительский элемент <div> Добавить класс .table-responseive в элемент <table>
9 Глификоны Поддерживается Не поддерживается
10 Медиа объекты Использует классы для медиа-объектов, таких как .media , .media-body , .media-object , .media-heading , .media-right , .media-left , .media-list и .media-body. Использует только класс .media для медиа-объектов.
11 Темные / инверсные столы Не поддерживается Использует класс .table-dark для создания темных / обратных таблиц
12 Флажки и радиокнопки Отображает флажки и радиокнопки с помощью .radio , .radio-инлайн , .checkbox или .checkbox-рядный классы Отображает флажки и радиокнопки с помощью .FORM-чек , .FORM-регистрация этикетки , .FORM-регистрация вход или .FORM-чек-инлайн классы
13 Размер элемента управления формой Увеличение или уменьшение размера элемент управления вводом с помощью .Входного-Lg и .Входного-SM классов Увеличение или уменьшение размера элемента управления вводом с помощью .form-контрольно-Lg и .form-контроль-SM классы
14 Текст справки Отображение текста справки с помощью класса .help-block Отобразите текст справки с помощью класса .form-text
15 Стили Использует классы .btn-default и .btn-info для кнопок Использует классы .btn-secondary , .btn-light и .btn-dark для кнопок и отбрасывает класс .btn-default .
16 Кнопки контура Не поддерживается Стиль кнопка с контурным цветом с помощью .btn-* Контура класса
17 Размеры кнопок .Btn-хз класс доступен Доступно только .btn-см и .btn-Л.Г. классы и уронил .btn-хз класс
18 Заголовки меню Используйте класс .dropdown-header для тега li Используйте класс .dropdown-header для тегов h1 - h2
19 Разделители Используйте класс .divider в элементе li Используйте класс .dropdown-divider в элементе div
20 Фиксированные панели навигации Закрепить Navbar к верхним или нижней части с помощью .navbar фиксированного верхних и .navbar фиксированного нижних классов Закрепить Navbar к верхней или нижней части с помощью .fixed верхом и .fixed-нижние классы
21 год Пейджеры Выравнивание страниц с помощью .previous и .next классов Не поддерживается
22 Jumbotron Полная ширина Он не использует класс .jumbotron-fluid на полноширинных jumbotron. Он использует класс .jumbotron-fluid для полноширинных jumbotron.
23 Карусель Использует класс .item для элементов карусели. Использует класс .carousel-item для элементов карусели.
24 Колодцы, панели и эскизы Поддерживается Не поддерживается. Вместо этого используйте карты
25 Встроенная навигация Она не включает в себя .nav-рядный класс Отобразите навигацию как встроенную с помощью класса .nav-inline