Css bootstrap: Bootstrap · The most popular HTML, CSS, and JS library in the world.

Css
18 Май, 2023
0

Содержание

Bootstrap · Самая популярная в мире библиотека HTML, CSS и JS.

Bootstrap

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

Начать Скачать

В настоящее время v5.0.1

Установка

Установите исходные файлы Sass и JavaScript для Bootstrap через npm, Composer или Meteor.

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

Прочтите документацию по установке

npm install bootstrap

gem install bootstrap -v 5. 0.0-alpha1

BootstrapCDN

Когда вам нужно только включить скомпилированный CSS или JS Bootstrap , вы можете использовать BootstrapCDN.

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

Изучить документацию

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

<!-- JavaScript and dependencies -->
<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/5.0.0-alpha1/js/bootstrap. min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Bootstrap иконки

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

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

Получить Bootstrap иконки

Официальные темы

Поднимите Bootstrap на новый уровень с премиальными темами с официального магазина Bootstrap тем.

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

Обзор тем

Bootstrap 4

Bootstrap 4 пока находится в разработке. Домашняя страница находится по адресу http://getbootstrap.com/. На момент написания статьи была версия v4.0.0-beta.2

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

Bootstrap 4 теперь по умолчанию использует Flexbox.

Подключаем CSS:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

Подключаем JavaScript-сценарии и плагины (обязательно в этом порядке) перед закрывающим тегом body:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.
 bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh2PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Я столкнулся с случаем, когда один из моих сценариев перестал работать при использовании slim-версии. В этом случае можете подключить полную версию jQuery.

Минимальный HTML-шаблон

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    <h2>Hello, world!</h2>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.
 js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh2PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

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

Контейнер

Содержание страницы желательно помещать в специальные контейнеры. Если этого не делать, то текст будет выводиться некрасиво. Данная страница использует Bootstrap и весь текст уже находится в контейнер.

Чтобы поместить текст в контейнер, используется класс container.

<div>
Какой-то текст, который находится в контейнере
</div>

Какой-то текст, который находится в контейнере

Класс container использует отступ 15 пикселей по краям и вы можете увидеть, что текст смещён.

Кроме стандартного контейнера существует ещё резиновый контейнер, за который отвечает класс container-fluid.

<div>
Текст находится в резиновом контейнере. Чтобы увидеть поведение текста в этом контейнере, попробуйте изменить размеры браузера.
</div>

Текст находится в резиновом контейнере. Чтобы увидеть поведение текста в этом контейнере, попробуйте изменить размеры браузера.

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

Ряды

В контейнерах контент можно разбить на колонки и ряды. Сейчас поговорим о рядах. Создадим два контейнера. Разобьём второй контейнер на две колонки.

Верхний контейнер

Какой-то текст в первой колонке. Здесь должно быть много текста.

Какой-то текст во второй колонке. Здесь должно быть много текста.

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

div с классом row для используемых колонок.

Верхний контейнер

Какой-то текст в первой колонке. Здесь должно быть много текста.

Какой-то текст во второй колонке. Здесь должно быть много текста.

Теперь колонки по ширине совпадают с верхним контейнером.

<div>
Верхний контейнер
</div>
<div>
  <div>
    <div>
      <h2>Первая колонка</h2>
      <p>Какой-то текст в первой колонке.  Здесь должно быть много текста.</p>
    </div>
    
    <div>
      <h2>Вторая колонка</h2>
      <p>Какой-то текст во второй колонке. Здесь должно быть много текста.</p>
    </div>
  </div>
</div>

Разное

Размеры заголовков — display-# (1-4)

Выравнивание текстов — text-*-center, text-justify, text-*-left, text-*-right.

Списки без точек, горизонтальные списки — list-unstyled, list-inline.

Отзывчивые изображения — img-fluid. С закруглением — rounded, rounded-*, rounded-circle. Класс rounded-0 используется для сброса закруглений при создании собственных стилей с радиусами закрулений.

Выравнять изображение по левому или правому краю — float-right или float-left. Не используйте с ними класс img-fluid.

Подписи к картинкам — figure, figure-img, figure-caption.

Margin и padding — классы m-* (m-0, m-1, m-2, m-3, m-4, m-5) и p-* (p-0, p-1, p-2, p-3, p-4, p-5). Для отдельных сторон используются символы t (top), b (bottom), r (right), l (left): mb-1, pt-2 и т. д. Символы x и y для парных значений по горизонтали и вертикали — mx = ml + mr, py = pt + pb. Примеры: mx-1, py-5.

Дополнительные материалы

Сетка

Flexbox

Цвета

Bootstrap 4 Cheat Sheet — удобная таблица по классам Bootstrap 4. Обнаружил, что некоторых классов не хватает, отписал автору. Обещал поправить в следующем обновлении.

Home of free code snippets for Bootstrap | Bootsnipp.com — примеры для Bootstrap.

Начните работу с Bootstrap · Bootstrap v5.3

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

Начните работу, включив готовые CSS и JavaScript Bootstrap через CDN без каких-либо шагов по сборке. Посмотрите это на практике с помощью этой демонстрации Bootstrap CodePen.

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

 

  <голова>

    <мета-кодировка="utf-8">
    
    Демо Bootstrap
  
  <тело>
     Привет, мир!

Включить CSS и JS Bootstrap. Поместите тег в для нашего CSS и . Узнайте больше о наших ссылках CDN.

 

  <голова>
    <мета-кодировка="utf-8">
    
    Демо Bootstrap
    
  
  <тело>
     Привет, мир!

Css bootstrap: Bootstrap · The most popular HTML, CSS, and JS library in the world.

Css
17 Дек, 1976
0

Содержание

CSS-сетка · Bootstrap v5.1

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

Внимание! Наша система CSS Grid является экспериментальной и поддерживает версию 5.1.0! Мы включили ее в CSS нашей документации, чтобы продемонстрировать ее вам, но по умолчанию она отключена. Продолжайте читать, чтобы узнать, как включить его в свои проекты.

Как это устроено

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

CSS Grid включен. Отключите сетку по умолчанию, установив $enable-grid-classes: false, и включите CSS Grid, установив $enable-cssgrid: true. Затем перекомпилируйте свой Sass.
Замените экземпляры .row на .grid. Класс .grid устанавливает display: grid и создает grid-template, который вы создаете с помощью вашего HTML.
Замените классы .col-* классами .g-col-*. Это потому, что наши столбцы CSS Grid используют свойство grid-column вместо width.

Столбцы и размеры желоба устанавливаются с помощью переменных CSS. Задайте их в родительском .grid и настройте, как хотите, встроенным или в таблице стилей, с помощью --bs-columns и --bs-gap.

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

Ключевые отличия

Сравнение с сеткой по умолчанию:

Утилиты Flex не влияют на столбцы CSS Grid таким же образом.
Заменяет зазоры водосточные желоба. Свойство gap заменяет горизонтальный
padding из нашей системы сетки по умолчанию и работает больше как margin.
Таким образом, в отличие от .row, .grid не имеет отрицательного отступа, и утилиты отступа не могут использоваться для изменения промежутков сетки. Промежутки сетки по умолчанию применяются по горизонтали и вертикали. Смотрите раздел кастомизации для получения более подробной информации.
Встроенные и пользовательские стили следует рассматривать как замену для классов модификаторов (например, style="--bs-columns: 3;" против class="row-cols-3").
Вложение работает аналогично, но может потребовать от вас сбросить счетчик столбцов для каждого экземпляра вложенного файла
.grid. Смотрите раздел вложенности для получения подробной информации.

Примеры

Три колонки

Три столбца одинаковой ширины во всех окнах просмотра и на всех устройствах могут быть созданы с помощью классов . g-col-4. Добавьте отзывчивые классы, чтобы изменить макет по размеру области просмотра.

.g-col-4

<div>
  <div>.g-col-4</div>
  <div>.g-col-4</div>
  <div>.g-col-4</div>
</div>

Адаптивность

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

.g-col-6 .g-col-md-4

<div>
  <div>.g-col-6 .g-col-md-4</div>
  <div>.g-col-6 .g-col-md-4</div>
  <div>.g-col-6 .g-col-md-4</div>
</div>

Сравните это с макетом из двух столбцов во всех окнах просмотра.

.g-col-6

<div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
</div>

Обертка

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

.g-col-6

<div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
</div>

Начало

Стартовые классы призваны заменить классы смещения нашей сетки по умолчанию, но они не совсем такие же. CSS-Сетка создает шаблон сетки с помощью стилей, которые говорят браузерам «начинать с этого столбца» и «заканчиваться в этом столбце». Это свойства

grid-column-start и grid-column-end. Стартовые классы являются сокращением для первых. Соедините их с классами столбцов, чтобы задать размер и выровнять столбцы, как вам нужно. Начальные классы начинаются с 1, поскольку 0 является недопустимым значением для этих свойств.

.g-col-3 .g-start-2

.g-col-4 . g-start-6

<div>
  <div>.g-col-3 .g-start-2</div>
  <div>.g-col-4 .g-start-6</div>
</div>

Авто колонки

Когда в элементах сетки нет классов (непосредственные дочерние элементы для .grid), размер каждого элемента сетки автоматически будет равен одному столбцу.

<div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Это поведение можно смешивать с классами столбцов сетки.

.g-col-6

<div>
  <div>.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Вложенность

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

Мы переопределяем количество столбцов по умолчанию с помощью локальной переменной CSS: --bs-columns: 3.
В первом автоматическом столбце количество столбцов наследуется, и каждый столбец составляет одну треть доступной ширины.
Во втором автоматическом столбце мы сбросили счетчик столбцов во вложенном .grid на 12 (наше значение по умолчанию).
В третьем автоколонке нет вложенного содержимого.

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

Первая автоколонка

Автоколонка

Вторая автоколонка

6 of 12

4 of 12

2 of 12

Третья автоколонка

<div>
  <div>
    Первая автоколонка
    <div>
      <div>Автоколонка</div>
      <div>Автоколонка</div>
    </div>
  </div>
  <div>
    Вторая автоколонка
    <div>
      <div>6 of 12</div>
      <div>4 of 12</div>
      <div>2 of 12</div>
    </div>
  </div>
  <div>Третья автоколонка</div>
</div>

Кастомизация

Настройте количество столбцов, количество строк и ширину промежутков с помощью локальных переменных CSS.

Переменная	Резервное значение	Описание
`--bs-rows`	`1`	Количество строк в шаблоне сетки
`--bs-columns`	`12`	Количество столбцов в шаблоне сетки
`--bs-gap`	`1.5rem`	Размер промежутка между столбцами (по вертикали и горизонтали)

Эти переменные CSS не имеют значения по умолчанию; вместо этого они применяют резервные значения, которые используются до тех пор, пока не будет предоставлен локальный экземпляр. Например, мы используем var(--bs-rows, 1)

для наших строк CSS Grid, который игнорирует --bs-rows, потому что он еще нигде не установлен. Как только это произойдет, экземпляр .grid будет использовать это значение вместо резервного значения 1.

Нет классов сетки

Непосредственные дочерние элементы для . grid являются элементами сетки, поэтому их размер будет изменяться без явного добавления класса .g-col.

Автоколонка

<div>
  <div>Автоколонка</div>
  <div>Автоколонка</div>
  <div>Автоколонка</div>
</div>

Столбцы и промежутки

Отрегулируйте количество столбцов и промежутков.

.g-col-2

<div>
  <div>.g-col-2</div>
  <div>.g-col-2</div>
</div>

.g-col-6

.g-col-4

<div>
  <div>.g-col-6</div>
  <div>.g-col-4</div>
</div>

Добавление строк

Добавление дополнительных строк и изменение размещения столбцов:

Автоколонка

<div>
  <div>Автоколонка</div>
  <div>Автоколонка</div>
  <div>Автоколонка</div>
</div>

Промежутки

Изменяйте вертикальные промежутки, только изменяя row-gap. Обратите внимание, что мы используем gap в .grid, но row-gap и column-gap можно изменить по мере необходимости.

.g-col-6

<div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
</div>

Из-за этого у вас могут быть разные вертикальные и горизонтальные gap, которые могут принимать одно значение (все стороны) или пару значений (вертикальное и горизонтальное). Это может быть применено со встроенным стилем для gap или с нашей CSS-переменной --bs-gap.

.g-col-6

<div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
  <div>.g-col-6</div>
</div>

Sass

Одним из ограничений CSS Grid является то, что наши классы по умолчанию по-прежнему генерируются двумя переменными Sass: $grid-columns и $grid-gutter-width. Это фактически предопределяет количество классов, сгенерированных в нашем скомпилированном CSS. У вас есть два варианта:

Измените эти переменные Sass по умолчанию и перекомпилируйте свой CSS.
Используйте встроенные или настраиваемые стили для расширения предоставленных классов.

Например, вы можете увеличить количество столбцов и изменить размер зазора, а затем изменить размер «столбцов» с помощью сочетания встроенных стилей и предопределенных классов столбцов таблицы CSS (например, .g-col-4).

14 колонок

.g-col-4

<div>
  <div>14 колонок</div>
  <div>.g-col-4</div>
</div>

Bootstrap 4

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

Bootstrap 4 теперь по умолчанию использует Flexbox.

Подключаем CSS:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

Подключаем JavaScript-сценарии и плагины (обязательно в этом порядке) перед закрывающим тегом body:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh2PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Минимальный HTML-шаблон

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    <h2>Hello, world!</h2>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs. cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh2PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

Контейнер

Чтобы поместить текст в контейнер, используется класс container.

<div>
Какой-то текст, который находится в контейнере
</div>

Какой-то текст, который находится в контейнере

Класс container использует отступ 15 пикселей по краям и вы можете увидеть, что текст смещён.

Кроме стандартного контейнера существует ещё резиновый контейнер, за который отвечает класс container-fluid.

<div>
Текст находится в резиновом контейнере. Чтобы увидеть поведение текста в этом контейнере, попробуйте изменить размеры браузера.
</div>

Ряды

Верхний контейнер

Какой-то текст в первой колонке. Здесь должно быть много текста.

Какой-то текст во второй колонке. Здесь должно быть много текста.

Верхний контейнер

Какой-то текст в первой колонке. Здесь должно быть много текста.

Какой-то текст во второй колонке. Здесь должно быть много текста.

Теперь колонки по ширине совпадают с верхним контейнером.

<div>
Верхний контейнер
</div>
<div>
  <div>
    <div>
      <h2>Первая колонка</h2>
      <p>Какой-то текст в первой колонке. Здесь должно быть много текста.</p>
    </div>
    
    <div>
      <h2>Вторая колонка</h2>
      <p>Какой-то текст во второй колонке.  Здесь должно быть много текста.</p>
    </div>
  </div>
</div>

Разное

Размеры заголовков — display-# (1-4)

Выравнивание текстов — text-*-center, text-justify, text-*-left, text-*-right.

Списки без точек, горизонтальные списки — list-unstyled, list-inline.

Выравнять изображение по левому или правому краю — float-right или float-left. Не используйте с ними класс img-fluid.

Подписи к картинкам — figure, figure-img, figure-caption.

Margin и padding — классы m-* (m-0, m-1, m-2, m-3, m-4, m-5) и p-* (p-0, p-1, p-2, p-3, p-4, p-5). Для отдельных сторон используются символы t (top), b (bottom), r (right), l (left): mb-1, pt-2 и т.д. Символы x и y для парных значений по горизонтали и вертикали — mx = ml + mr, py = pt + pb. Примеры: mx-1, py-5.

Дополнительные материалы

Сетка

Flexbox

Цвета

Home of free code snippets for Bootstrap | Bootsnipp.com — примеры для Bootstrap.

Bootstrap — HTML- и CSS-шаблоны оформления и…

Привет, Вы узнаете про bootstrap, Разберем основные ее виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое bootstrap, css-шаблоны оформления, javascript-расширения использования , настоятельно рекомендую прочитать все из категории Каскадные таблицы стилей CSS/ CSS3.

Bootstrap (также известен как Twitter Bootstrap ) — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и css-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

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

Введение

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

Bootstrap разработали Марк Отто и Якоб Торнтон, сотрудники Twitter, именно поэтому в названии фигурирует имя компании. Их цель понятна любому разработчику — создать единый стандартный набор инструментов для сотрудников компании, ускоряющий их работу.

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

Какие плюсы несет в себе использование библиотеки.

Высокая скорость разработки

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

Адаптивный дизайн

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

Открытая программа

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

Совместимость с браузерами

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

Низкий порог вхождения

Чтобы использовать библиотеку в своей работе, требуется обладать минимальными знаниями по HTML, CSS и JavaScript. Это позволяет создавать эффектные сайты даже начинающим разработчикам.

Единая работа компонент

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

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

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

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

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

История

Этот фреймворк начал разрабатываться как внутренняя библиотека компании Twitter под названием Twitter Blueprint. После нескольких месяцев разработки он был открыт под названием Bootstrap 19 августа 2011 года .

Основными нововведениями второй версии, появившейся 31 января 2012 года, стали 12-колоночная сетка и поддержка адаптивности .

Третья версия выпущена 19 августа 2013 года. В ней адаптивность получила дальнейшее развитие, был осуществлен переход к концепции mobile first, оптимизации прежде всего под мобильные устройства. Дизайн по умолчанию стал плоским .

Работа над четвертой версией начата 29 октября 2014 года . Альфа версия вышла 19 августа 2015 года[10].

Преимущества и недостатки

К недостаткам можно отнести бедную цветовую гамму стандартного набора иконок.[11]. К преимуществам — хорошую реализацию grid-сетки для масштабирования веб-страницы, создания адаптивного дизайна.[12]

Основные инструменты

Основные инструменты Bootstrap:

Сетки — заранее заданные размеры колонок, которые можно сразу же использовать, например ширина колонки 140 px относится к классу .span2 (.col-md-2 в третьей версии фреймворка), который можно использовать в CSS-описании документа.
Шаблоны — фиксированный или резиновый шаблон документа.
Типографика — описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т. п.
Медиа — представляет некоторое управление изображениями и видео.
Таблицы — средства оформления таблиц, вплоть до добавления функциональности сортировки.
Формы — классы для оформления форм и некоторых событий, происходящих с ними.
Навигация — классы оформления для табов, вкладок, страничности, меню и панели инструментов.
Алерты — оформление диалоговых окон, подсказок и всплывающих окон.

Figure 1. Aaron K. White’s Bootstrap grid system template

Для начала необходимо скачать Bootstrap с сайта разработчика по следующему адресу:

http://getbootstrap.com/getting-started/#download

Это полная версия, содержащая все необходимые скрипты и стили. Внутри находится три папки: css, fonts и js.

Структура файлов Bootstrap

В папках со стилями и скриптами приложено две версии файлов — исходная и компактная (в имени содержится min). Компактная отличается лишь размером файла и снижением читаемости кода. Лучше всего на рабочий сайт добавлять именно эту версию, так мы чуть ускорим загрузку веб-страниц.

Копируем все папки в наш проект и в корне создаем index.html. В итоге структура нашего проекта будет выглядеть следующим образом.

Файлы и папки нашего проекта

Содержимое index.html включает в себя ссылку на стилевой файл bootstrap.css и внизу страницы мы вызываем bootstrap.js. Больше пока ничего не нужно.




 
  Bootstrap

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

http://getbootstrap.com/customize/

Также в дальнейшем нам понадобится библиотека jQuery, ее надо скачать и добавить вызов перед bootstrap. js.

Модульные сетки

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

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

Сами колонки не обязательно должны иметь одинаковую ширину, можно комбинировать любое число колонок, главное, чтобы они в сумме давали 12.

Колонки разной ширины

Создание колонок

Так, чтобы создать макет из трех колонок используем

с классом container, внутри которого будут располагаться наши колонки. Сами колонки находятся внутри

с классом row и содержат имена вида col-xs-N, где N — число колонок от 1 до 12 (пример 1).

Пример 1. Макет с тремя колонками

Трехколоночный макет

3 колонки

7 колонок

2 колонки

Стиль добавлен лишь для наглядного выделения колонок.

Класс container создает макет фиксированной ширины, значение которой зависит от размера устройства. Для мониторов максимальная ширина составляет 1170 пикселей, для смартфонов макет будет занимать всю доступную ширину. Если вам не требуется ограничивать ширину макета, то вместо класса container следует использовать container-fluid (пример 2).

Пример 2. Резиновый макет

4 колонки

6 колонок

2 колонки

Отступы между колонок

Колонки изначально плотно прилегают друг к другу, что не всегда полезно для макета. Для добавления пустого пространства между колонками предназначен класс col-xs-offset-N, где N изменяется от 0 до 12. Отступ добавляется слева от текущей колонки (пример 3).

Пример 3. Добавление отступов

3 колонки

5 колонок

2 колонки

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

Рис. 3. Колонки с отступами между ними

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

Сдвиг колонок

Каждую колонку можно сдвигать влево или вправо на указанное число колонок. Опять же это делается с помощью классов. col-xs-pull-N — сдвигает колонку влево на заданное число, а col-xs-push-N сдвигает вправо (пример 4). Здесь N может меняться от 0 до 12.

Пример 4. Сдвиг колонок вправо

3 колонки

5 колонок

2 колонки

Заметьте, что сдвиг это не дополнительная колонка как при использовании offset, так что суммировать все значения не нужно. Еще надо следить за тем, чтобы колонки не накладывались друг на друга.

Вложенные колонки

При верстке сложных макетов двенадцати колонок может не хватить, к тому же в одной колонке могут встречаться еще дополнительные. Так что нам потребуются вложения одних колонок в другие. Делается это похожим образом (пример 5).

Пример 5. Вложенные колонки

Заголовок

Колонка 1

Колонка 1-1

Колонка 1-2

Колонка 2

Чтобы создать вложенные колонки опять добавляем

с классом row, который содержит желаемую структуру вложенных колонок. Таким образом можно сверстать какие угодно сложные макеты.

Заметьте, что заголовок заполняет всю ширину макета, потому что он занимает все 12 колонок. Дополнительный контейнер row для подобных вещей вводить не обязательно, перенос остальных колонок на другую строку произойдет автоматически (рис. 4).

Рис. 4. Вложенные колонки

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

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

Табл. 1. Ключевые слова
Устройство	Имя	Ширина макета
Смартфон	xs	Менее 768px
Планшет	sm	768px и больше
Монитор	md	992px и больше
Монитор с высоким разрешением	lg	1200px и больше

Чтобы задать ширину колонок для смартфонов достаточно в код включить класс col-xs-N, для мониторов он уже будет именоваться col-md-N. Любые классы можно комбинировать между собой, если класс для выбранного устройства не указан, то он наследуется снизу вверх. Это значит, что макет для смартфона будет выглядеть так же, как и макет для монитора. Но не наоборот. Именно поэтому верстка всегда начинается с макета для смартфона, затем уже идет планшет и монитор.

Поскольку мы теперь ориентируемся на мобильные устройства, то внутрь

надо добавить следующую строку.

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

С учетом этой строки и новых классов сделаем простой макет с двумя колонками (пример 1).

Пример 1. Адаптивный макет

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

Заголовок

Колонка 1

Колонка 2

Для тестирования макета не обязательно смотреть его на каком-то заданном устройстве, достаточно уменьшить ширину окна браузера и мы сразу же увидим изменения. На рис. 1-3 показан результат данного примера при разной ширине окна.

Рис. 1. Вид на смартфоне

Рис. 2. Вид на планшете

Рис. 3. Вид на мониторе

Мы рассмотрели самый простой случай, когда расположение элементов практически не меняется относительно друг друга. Как быть, если потребуется переставить элементы местами или кое-что убрать для маленьких экранов? Напрямую это сделать не получится, поэтому пойдем на небольшую хитрость — добавим два одинаковых элемента в разных местах и будем один прятать, а другой отображать. Bootstrap предлагает два набора классов для сокрытия и показа элементов в зависимости от ширины окна — hidden-xs и visible-xs-block. Принцип тот же, что и при работе с колонками, вместо xs подставляем нужное ключевое слово. В примере 2 показано как «перемещать» таким образом заголовок.

Пример 2. Изменение положения заголовка

Заголовок

Колонка 1

Колонка 2

Заголовок

Результат данного примера показан на рис. 4.

Рис. 4. Заголовок внизу колонок при узкой ширине окна

В данном примере класс hidden-xs означает, что колонку для смартфонов следует прятать, а visible-xs-block— наоборот, показывать. При просмотре на широком экране заголовок будет всегда вверху, а на узком внизу.

Стили Bootstrap

Boostrap содержит множество готовых стилей для оформления элементов. Применять их достаточно просто, всего то надо добавить к элементу определенный в стилях класс. Это сокращает время на разработку проекта, поскольку не приходится задумываться о дизайне отдельных элементов. Стиль некоторых элементов, вроде заголовков

Для веб-страницы устанавливается белый цвет фона, набор шрифтов Helvetica Neue, Helvetica, Arial и цвет текста #333. Вы также можете использовать заданный набор цветов для привлечения внимания к тексту и создания информационных сообщений (пример 1).

Пример 1. Цвета текста

Серый цвет

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

Цвет для сообщения об успехе

Цвет для информации

Цвет для предупреждений

Цвет для сообщений об ошибках

Результат применения этих классов показан на рис. 1.

Рис. 1. Цвета для разных сообщений

Подобным же образом можно менять цвет фона у текста или другого элемента, например, кнопок. Немного поменяются имена классов, но принцип сохранится (пример 2).

Пример 2. Фон элементов

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

Цвет для сообщения об успехе

Цвет для информации

Цвет для предупреждений

Цвет для сообщений об ошибках

Результат применения этих классов показан на рис. 2.

Рис. 2. Фон для разных сообщений

Врезки

Для создания врезок предназначены классы pull-left и pull-right, которые выравнивают элемент, соответственно, по левому и правому краям. Врезкой называется блок с рисунками и текстом, который встраивается в основной текст. Врезка обычно располагается по левому или правому краю текстового блока, а основной текст обтекает ее с других сторон (пример 3).

Пример 3. Создание врезки

Мясо отварить до готовности. Промыть свеклу, очистить, нарезать соломкой и тушить с помидорами до полуготовности.

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

Готовому борщу дать настояться в течение 20-25 минут. При подаче к столу добавить сметану, мясо, зелень.

Результат данного примера показан на рис. 3.

Рис. 3. Вид врезки в тексте

Чтобы наша врезка была более заметна, к

добавлен класс bg-info, а также ограничена его ширина. Само обтекание в стилях делается с помощью свойства float, которое продолжает воздействовать и на нижние элементы . Об этом говорит сайт https://intellect.icu . Для отмены действия float применяется класс clearfix, он добавляется к любому нижележащему элементу.

См. также

Документация по использованию классов в Bootstrap

http://getbootstrap. com/css/

Текст в Bootstrap

По умолчанию размер шрифта основного текста установлен как 14px, а межстрочное расстояние (значение свойства line-height) — 1.428. Между абзацами текста (элемент

) введено дополнительное расстояние в 10 пикселей.

Заголовки

Для заголовков применяются знакомые из HTML элементы с

Рис. 1. Вид заголовков текста

Заголовки допустимо немного уменьшить самостоятельно, если внутрь вставить элемент , получится такая комбинация.

Такого типа заголовки по виду несколько иные и предназначены для других разделов сайта, например, боковой панели (рис. 2).

Рис. 2. Уменьшенные заголовки

Лид

Лидом в журналистике называют первый абзац статьи привлекающий внимание и дающий краткое представление о содержании статьи. Обычно он по своему виду немного отличается от основного текста. Чтобы указать лид достаточно к абзацу или колонке добавить класс lead, как показано в примере 1.

Пример 1. Создание лида

Дорогой друг! Я расскажу тебе удивительную историю про маленького червячка, который жил в яблоке, о его путешествии в волшебную страну Нортландия, о том, какие опасности подстерегали его на пути, кого он повстречал по дороге, какие приключения и испытания прошел, и что он рассказал по возвращению домой.

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

Результат данного примера показан на рис. 3.

Рис. 3. Вид лида в браузере

Аббревиатура

Аббревиатура это сложносокращенное слово (колхоз) или слово, полученное из первых букв слов предложения (КГБ). Для обозначения аббревиатур в тексте применяется элемент , а для расшифровки внутрь него добавляется атрибут title (пример 2).

Пример 2. Аббревиатура

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

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

При добавлении класса initialism к элементу для него устанавливается свойство font-size со значением 90%, тем самым аббревиатура выводится уменьшенного размера.

CSS

Цитаты

Для оформления больших цитат в HTML применяется элемент

, но Bootstrap немного меняет его оформление (рис. 4). Слева от цитаты отображается серая вертикальная линия, а имя автора или источник цитаты выводится уменьшенным размером и серого цвета.

Рис. 4. Вид цитаты в браузере

Если сама цитата делается весьма традиционно, то подпись к ней добавляется с помощью элемента или , как показано в примере 3.

Пример 3. Добавление цитаты


 Нельзя сказать человеку: «Ты можешь творить. 
  Так давай, твори». Гораздо вернее подождать, пока он 
  сам не скажет: «Я могу творить, и я буду творить, хотите 
  вы этого или нет».
 Айзек Азимов
Цитату можно инвертировать, тогда линия будет справа, а текст выравниваться также по правому краю (рис. 5).

Рис. 5. Цитата, выравненная по правому краю

Просто добавьте класс pull-right к
.

...
Листинг

Нам часто приходится выкладывать листинги программ и указывать переменные. В HTML для этого есть несколько готовых элементов — обозначает отдельные переменные, — строчный фрагмент кода, а
 используется для многострочного кода (пример 4). 
Пример 4. Вывод программы

Функция checkParent() вызывается 
  с параметрами src и dest.
function checkParent (src, dest) {
  while (src != null) {
    if (src.tagName == dest) 
      src = src.parentElement
    }
  return null
}
Результат данного примера показан на рис. 6.

Рис. 6. Вид кода программы в браузере

Элемент
 занимает высоту равную его содержимому, что для больших листингов может быть неудобно. Чтобы ограничить высоту достаточно добавить класс pre-scrollable, тогда высота будет равна 350 пикселей и появится вертикальная полоса прокрутки.

 

 Изображения в  Bootstrap   

Для оформления изображений есть несколько классов — img-rounded, img-circle и img-thumbnail. Чтобы изменить стиль отображения картинок просто добавьте один из этих классов к элементу .  На рис. 1 показаны результаты применения каждого класса.



а. Оригинальное изображение

б. img-rounded в. img-circle г. img-thumbnail
Рис. 1. Изменение стиля изображения

Класс img-rounded скругляет уголки у картинки, img-circle делает ее круглой, а img-thumbnail добавляет рамку вокруг изображения.

В примере 1 показано, как вывести фотографию и задать ее стиль.

Пример 1. Круглая картинка



 
  ИзображенияНастоящий боевой котик. Почему боевой, спросите вы? 
     Так ведь только опасных животных держат на привязи, 
     чтобы они никому случаем не навредили.
  
Любые выводимые изображения имеют исходные размеры, но для адаптивного дизайна лучше, когда ширина картинки подстраивается под ширину колонки. Для этого к элементу достаточно добавить класс img-responsive, как показано в примере выше. Заметьте, что классы для адаптивного размера и стиля изображения вполне сочетаются между собой. В результате при уменьшении размера окна мы увидим и уменьшение самой картинки (рис. 2).

Рис. 2. Вид фотографии при уменьшении размеров окна

Списки в Bootstrap

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

Горизонтальный список

Такой список обычно используется для создания меню, к элементу

Сепульки

Сепулькарии

Сепуление

Вот как выглядит подобное меню (рис. 1). Стиль средней ссылки меняется при наведении на нее курсора.

Рис. 1. Горизонтальный список

Список определений

Список определений состоит из двух элементов — термина и его определения. Сам список создается с помощью контейнера
, термин — элементом
, а его определение — с помощью
(пример 2).
Пример 2. Список определений

Сепульки

Важный элемент цивилизации ардритов с планеты Энтеропия.

Сепулькарии

Устройства для сепуления.

Сепуление

Занятие ардритов с планеты Энтеропия.

Bootstrap предлагает сделать такой список нагляднее за счет горизонтального расположения термина и определения. К элементу
достаточно добавить класс dl-horizontal (пример 3).
Пример 3. Горизонтальный список определений

Сепульки

Важный элемент цивилизации ардритов с планеты Энтеропия.

Сепулькарии

Устройства для сепуления.

Сепуление

Занятие ардритов с планеты Энтеропия.

Результат данного примера показан на рис. 2.

Рис. 2. Горизонтальный список определений

Если термин слишком длинный, то он будет обрезан и к нему добавлено многоточие. Также при уменьшении размеров окна вид списка меняется на традиционный (рис. 3).

Рис. 3. Список определений

Таблицы в Bootstrap

Для базового оформления таблиц в элемент
достаточно включить класс table. Вид оформленной через стили таблицы показан на рис. 1.
Рис. 1. Таблица
Рамки вокруг таблицы нет, строки таблицы отделяются друг от друга линиями. Чтобы таблица представляла собой сетку добавьте класс table-bordered (пример 1).
Пример 1. Сетка

2021 2022 2023
Рубины 43 51 79
Изумруды 28 34 48
Сапфиры 29 57 36
Заметьте, что класс table мы сохраняем и добавляем к нему новые классы. Результат данного примера показан на рис. 2.

Рис. 2. Сетка

Можно добавить к нашему набору еще один класс table-hover и тогда при наведении на строку таблицы она будет подсвечиваться серым цветом (рис. 3). Строки внутри не выделяются таким образом.

Рис. 3. Выделение строки таблицы

Для удобного представления табличных данных имеет смысл делать строки таблицы чередующимися, чтобы цвет фона четных и нечетных строк различался (рис. 4). Такой вид таблицы часто называют «зеброй».

Рис. 4. Чередующиеся строки

Такой формат опять же делается

	2021	2022	2023
Рубины	43	51	79
Изумруды	28	34	48
Сапфиры	29	57	36

продолжение следует…

Продолжение:

Часть 1 Bootstrap — HTML- и CSS-шаблоны оформления и JavaScript-расширения. основы использования
Часть 2 Кнопки в Bootstrap — Bootstrap — HTML- и CSS-шаблоны оформления…
Часть 3 — Bootstrap — HTML- и CSS-шаблоны оформления и JavaScript-расширения. основы…

См.также

дизайн-система

На этом все! Теперь вы знаете все про bootstrap, Помните, что это теперь будет проще использовать на практике. Надеюсь, что теперь ты понял что такое bootstrap, css-шаблоны оформления, javascript-расширения использования и для чего все это нужно, а если не понял, или есть замечания, то нестесняся пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Каскадные таблицы стилей CSS/ CSS3

Введение · Bootstrap

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

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

Хотите быстро добавить Bootstrap в свой проект? Используйте jsDelivr, бесплатно предоставляемый ребятами из jsDelivr. Используете менеджер пакетов или вам нужно загрузить исходные файлы? Перейдите на страницу загрузок.

УСБ

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

JS

Для работы многих наших компонентов требуется использование JavaScript. В частности, для них требуются jQuery, Popper.js и наши собственные плагины JavaScript. Поместите следующие

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


 Наши  bootstrap.bundle.js  и  bootstrap.bundle.min.js  включают Popper, но не jQuery. Для получения дополнительной информации о том, что включено в Bootstrap, см. наш раздел содержания. 
Показать компоненты, требующие JavaScript   Оповещения об отклонении 
 Кнопки для переключения состояний и функций флажка/радио 
 Карусель для всех вариантов поведения слайдов, элементов управления и индикаторов 
 Свернуть для переключения видимости содержимого 
 Выпадающие списки для отображения и позиционирования (также требуется Popper.js) 
 Модальные окна для отображения, позиционирования и поведения прокрутки 
 Панель навигации для расширения нашего плагина Collapse для реализации адаптивного поведения 
 Подсказки и всплывающие окна для отображения и позиционирования (также требуется Popper. js) 
 Scrollspy для обновления поведения прокрутки и навигации 
  Стартовый шаблон 
 Убедитесь, что ваши страницы настроены в соответствии с последними стандартами дизайна и разработки. Это означает использование типа документа HTML5 и включение метатега области просмотра для правильного реагирования. Соберите все вместе, и ваши страницы должны выглядеть так: 
 

  <голова>
    
    <мета-кодировка="utf-8">
    
    
    
    Привет, мир!
  
  <тело>
     Привет, мир! 
    
    
    
    
  
 
  Это все, что вам нужно для общих требований к странице. Посетите документацию по макету или наши официальные примеры, чтобы приступить к размещению содержимого и компонентов вашего сайта. 
 Важные глобальные переменные 
 Bootstrap использует несколько важных глобальных стилей и настроек, о которых вам необходимо знать при его использовании, и все они почти исключительно ориентированы на  нормализацию  кроссбраузерных стилей. Давайте углубимся. 
 Тип документа HTML5 
 Bootstrap требует использования типа документа HTML5. Без него вы увидите причудливый незавершенный стиль, но включение его не должно вызывать значительных сбоев. 
 

  ...
 
  Отзывчивый метатег 
 Bootstrap разработан  mobile first  , стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости, используя медиа-запросы CSS. Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств,  добавьте метатег адаптивного окна просмотра  к вашему    . 
  
  Вы можете увидеть пример этого в действии в начальном шаблоне. 
 Размер коробки 
 Для более простого определения размера в CSS мы переключаем глобальное значение  box-sizing  с  content-box  на  border-box  . Это гарантирует, что  padding  не повлияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторыми сторонними программами, такими как Google Maps и Google Custom Search Engine. 
 В редких случаях вам нужно переопределить его, используйте что-то вроде следующего: 
 .selector-for-some-widget {
  box-sizing: контент-бокс;
} 
  В приведенном выше фрагменте вложенные элементы, включая сгенерированный контент с помощью  ::before  и  ::after , унаследуют указанный  box-sizing  для этого  .selector-for-some-widget  . 
 Узнайте больше о блочной модели и размерах в CSS Tricks. 
 Перезагрузка 
 Для улучшения рендеринга в разных браузерах мы используем перезагрузку, чтобы исправить несоответствия между браузерами и устройствами, а также обеспечить несколько более целенаправленный сброс общих элементов HTML. 
 Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов. 
  Подпишитесь на @getbootstrap в Твиттере. 
 Прочтите официальный блог Bootstrap и подпишитесь на него. 
 Общайтесь с другими загрузчиками в IRC. На сервере  irc.freenode.net , в канале  ##bootstrap . 
 Справку по реализации можно найти в Stack Overflow (с тегом  bootstrap-4  ). 
Разработчики должны использовать ключевое слово  bootstrap  в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной возможности обнаружения. 
  Вы также можете подписаться на @getbootstrap в Твиттере, чтобы быть в курсе последних сплетен и потрясающих музыкальных клипов. 
  Bootstrap Все классы CSS 
 или ячейка таблицы (   или ячейку таблицы (  .
.
.
 или к ячейке таблицы (  .
 или ячейку таблицы (   или ячейку таблицы (       .active  
 Добавляет серый цвет фона в строку  таблицы  (  
   ) (тот же цвет, который используется при наведении) 

Попытайся

 Столы 
    . актив  
 Добавляет серый цвет фона к активной ссылке по умолчанию. 
навигационная панель.  Добавляет черный фон и белый цвет к текущей ссылке внутри перевернутой панели навигации. 

Попытайся

 Навбар 
    .актив  
 Добавляет синий цвет фона к активному элементу списка   в группе списка 

Попытайся

 Группы списков 
    .актив  
 Добавляет синий цвет фона для имитации «нажатой» кнопки   

Попытайся

 Кнопки 
    .актив  
 Оживляет полосатую  индикатор выполнения  

Попытайся

 Индикаторы выполнения 
    .актив  
 Добавляет синий цвет фона к активному элементу  раскрывающегося списка  в раскрывающемся списке 

Попытайся

 Выпадающие списки 
    . актив  
 Добавляет синий цвет фона к активной  ссылке разбиения на страницы  (для выделения текущей страницы) 

Попытайся

 Пагинация 
    .аффикс  
 Плагин Affix позволяет элементу прикрепляться (запираться/прикрепляться) к области на странице. Он включает и выключает  position:fixed  

Попытайся

 Дополнение 
    .предупреждение  
 Создает окно предупреждающего сообщения 

Попытайся

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

Попытайся

 Оповещения 
    .alert-dismissible  
 Вместе с классом  . close  этот класс используется для
закрыть оповещение 

Попытайся

 Оповещения 
    .alert-info  
 Голубой блок оповещения. Указывает некоторую информацию 

Попытайся

 Оповещения 
    .alert-ссылка  
 Используется для ссылок внутри предупреждений для добавления соответствующих цветных ссылок 

Попытайся

 Оповещения 
    .alert-success  
 Зеленый блок оповещения. Указывает на успешное или положительное действие 

Попытайся

 Оповещения 
    .предупреждение-предупреждение  
 Желтый блок оповещения. Указывает на то, что при выполнении этого действия следует соблюдать осторожность 

Попытайся

 Оповещения 
    . значок  
 Создает круглый значок (серый круг — часто используется в качестве числового индикатора) 

Попытайся

 Значки 
    .bg-опасность  
 Добавляет красный цвет фона к элементу. Обозначает опасность или негативное действие 

Попытайся

 Помощники 
    .bg-info  
 Добавляет к элементу светло-голубой цвет фона. Представляет некоторую информацию 

Попытайся

 Помощники 
    .bg-первичный  
 Добавляет к элементу синий цвет фона. Представляет что-то важное 

Попытайся

 Помощники 
    .bg-успех  
 Добавляет зеленый цвет фона к элементу. Указывает на успех или положительное действие 

Попытайся

 Помощники 
    . bg-предупреждение  
 Добавляет желтый цвет фона к элементу. Представляет собой предупреждение или отрицательное действие 

Попытайся

 Помощники 
    .панировочные сухари  
 Разбиение на страницы. Указывает расположение текущей страницы в навигационной иерархии 

Попытайся

 Пагинация 
    .бтн  
 Создает базовую кнопку (серый фон и закругленные углы) 

Попытайся

 Кнопки 
    .btn-блок  
 Создает кнопку уровня блока, которая охватывает всю ширину родительского элемента 

Попытайся

 Кнопки 
    .btn-опасность  
 Красная кнопка. Указывает на опасность или негативное действие 

Попытайся

 Кнопки 
    . btn-по умолчанию  
 Кнопка по умолчанию. Белый фон и серая рамка 

Попытайся

 Кнопки 
    .btn-группа  
 Группирует кнопки в одну строку 

Попытайся

 Группы кнопок 
    .btn-group-обоснованный  
 Группа кнопок занимает всю ширину экрана 

Попытайся

 Группы кнопок 
    .btn-group-lg  
 Большая группа кнопок (делает все кнопки в группе кнопок больше — увеличен размер шрифта и отступы) 

Попытайся

 Группы кнопок 
    .btn-group-sm  
 Маленькая группа кнопок (уменьшает размер всех кнопок в группе кнопок) 

Попытайся

 Группы кнопок 
    . btn-group-xs  
 Очень маленькая группа кнопок (делает все кнопки в группе кнопок очень маленькими) 

Попытайся

 Группы кнопок 
    .btn-group-vertical  
 Делает группу кнопок вертикально расположенной 

Попытайся

 Группы кнопок 
    .btn-info  
 Голубая кнопка. Представляет информацию 

Попытайся

 Кнопки 
    .btn-ссылка  
 Делает кнопку похожей на ссылку (получить поведение кнопки) 

Попытайся

 Кнопки 
    .btn-lg  
 Большая пуговица 

Попытайся

 Кнопки 
    .btn-первичный  
 Синяя кнопка. 

Попытайся

 Кнопки 
    .бтн-см  
 Маленькая пуговица 

Попытайся

 Кнопки 
    .btn-успех  
 Зеленая кнопка. Указывает на успех или положительное действие 

Попытайся

 Кнопки 
    .btn-предупреждение  
 Желтая кнопка. Представляет собой предупреждение или отрицательное действие 

Попытайся

 Кнопки 
    .btn-xs  
 Очень маленькая пуговица 

Попытайся

 Кнопки 
    .caption  
 Добавляет текст заголовка внутри  .thumbnail  

Попытайся

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

Попытайся

 Выпадающие списки 
    .карусель  
 Создает карусель (слайд-шоу) 

Попытайся

 Карусель 
    .carousel-caption  
 Создает текст заголовка для каждого слайда в карусели 

Попытайся

 Карусель 
    .карусель-управление  
 Контейнер для следующей и предыдущей ссылок 

Попытайся

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

Попытайся

 Карусель 
    . внутренняя карусель  
 Контейнер для слайдов 

Попытайся

 Карусель 
    .центральный блок  
 Центрирует любой элемент (устанавливает элемент в  display:block  с  margin-right:auto  и  margin-left:auto  ) 

Попытайся

 Помощники 
    .флажок  
 Контейнер для флажков 

Попытайся

 Входы 
    .checkbox-inline  
 Заставляет несколько флажков отображаться в одной строке 

Попытайся

 Входы 
    .clearfix  
 Очищает поплавки 

Попытайся

 Помощники 
    .закрыть  
 Указывает значок закрытия 

Попытайся

 Помощники 
    . col-*-*  
 Адаптивная сетка (расстояние от 1 до 12 столбцов). Очень маленькие устройства Телефоны (< 768 пикселей), Маленькие устройства Планшеты (≥ 768 пикселей), Средние устройства Настольные компьютеры (≥ 992 пикселей), Большие устройства Настольные компьютеры (≥ 1200 пикселей). Значения столбца могут быть от 1 до 12. 

Попытайся

 Сетка 
    .col-*-смещение-*  
 Переместить столбцы вправо. Эти классы увеличивают левое поле столбца на * столбцов 

Попытайся

 Сетка 
    .col-*-pull-*  
 Изменяет порядок столбцов сетки 

Попытайся

 Сетка 
    .col-*-push-*  
 Изменяет порядок столбцов сетки 

Попытайся

 Сетка 
    . свернуть  
 Указывает на сворачиваемое содержимое, которое можно скрыть или показать по запросу 

Попытайся

 Свернуть 
    .свернуть в  
 Показать сворачиваемое содержимое по умолчанию 

Попытайся

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

Попытайся

 Контейнеры 
    .контейнерная жидкость  
 Контейнер, занимающий всю ширину экрана 

Попытайся

 Контейнеры 
    .контрольная метка  
 Позволяет использовать метку для проверки формы 

Попытайся

 Формы 
    . опасность  
 Добавляет красный фон в строку таблицы (  
   ). Указывает на опасное или потенциально негативное действие 

Попытайся

 Таблицы 
    .отключен  
 Отключает кнопку   (добавляет непрозрачность и значок «знак запрета парковки» при наведении) 

Попытайся

 Кнопки 
    .отключен  
 Отключает раскрывающийся список   (добавляет серый цвет текста и значок «знак парковки запрещен» при наведении) 

Попытайся

 Выпадающие списки 
    .отключено  
 Отключает ссылку  разбиения на страницы  (нельзя щелкнуть — добавляет серый цвет текста и значок «знак запрета парковки» при наведении) 

Попытайся

 Пагинация 
    . отключен  
 Отключает элемент списка   в группе списков (нельзя щелкнуть — добавляет серый цвет фона и значок «знак запрета парковки» при наведении) 

Попытайся

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

Попытайся

 Выпадающие списки 
    .dl-горизонтальный  
 Выстраивает термины    и описания  
  в элементы    рядом друг с другом. Запускается как по умолчанию
   с, но когда окно браузера расширяется, оно выстраивается рядом 

Попытайся

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

Попытайся

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

Попытайся

 Выпадающие списки 
    .выпадающее меню  
 Добавляет стили по умолчанию для контейнера раскрывающегося меню  
Попытайся

 Выпадающие списки 
    .выпадающее меню-справа  
 Выравнивает раскрывающееся меню по правому краю  
Попытайся

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

Попытайся

 Выпадающие списки 
    .выпадающий  
 Указывает раскрывающееся меню (вверх, а не вниз) 

Попытайся

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

Попытайся

 Изображения 
    .embed-responsive-16by9  
 Контейнер для встроенного содержимого. Создает встроенный контент с соотношением сторон 16:9 

Попытайся

 Изображения 
    .embed-responsive-4by3  
 Контейнер для встроенного содержимого. Создает встроенное содержимое с соотношением сторон 4:3 

Попытайся

 Изображения 
    .embed-response-item  
 Используется внутри  .embed-responsive  . Красиво масштабирует видео к родительскому элементу 

Попытайся

 Изображения 
    . фейд  
 Добавляет эффект затухания при закрытии окна предупреждения 

Попытайся

 Оповещения 
    .form-control  
 Используется для элементов ввода, текстового поля и выбора, чтобы охватить всю ширину страницы и сделать их отзывчивыми 

Попытайся

 Формы 
    .form-control-обратная связь  
 Класс проверки формы 

Попытайся

 Входы 2 
    .form-control-static  
 Добавляет простой текст рядом с меткой формы в горизонтальной форме 

Попытайся

 Входы 2 
    .form-group  
 Контейнер для ввода формы и этикетки 

Попытайся

 Формы 
    . form-inline  
 Делает  выровненным по левому краю с элементами управления встроенными блоками (это только
применяется к формам в окнах просмотра шириной не менее 768 пикселей) 
 Попробуйте 
 Формы 
    .form-горизонтальный  
 Выравнивает метки и группы элементов управления формы по горизонтали 
 Попробуйте 
 Формы 
    .глификон  
 Создает значок. Bootstrap предоставляет 260 бесплатных глификонов из набора Glyphicons Halflings 
Попытайся

 Глификоны 
    .has-danger  
 Добавляет красный цвет к метке и красную рамку к вводу, а также значок ошибки внутри ввода (используется вместе с  .has-feedback ) 

Попытайся

 Формы 
    . has-обратная связь  
 Добавляет значки обратной связи для входов (галочка, предупреждающие знаки и знаки ошибки) 

Попытайся

 Формы 
    .имеет успех  
 Добавляет зеленый цвет к метке и зеленую рамку к вводу, а также значок галочки внутри ввода (используется вместе с  .has-feedback  ) 

Попытайся

 Формы 
    .has-warning  
 Добавляет желтый/оранжевый цвет к метке и желтую/оранжевую рамку к вводу, а также значок галочки внутри ввода (используется вместе с  .has-feedback  ) 

Попытайся

 Формы 
    .help-блок  
 Блок текста справки, который переходит на новую строку и может выходить за пределы одной строки. 

Попытайся

 Размер ввода 
    . скрытый  
 Принудительно скрывает элемент (  display:none  ) 

Попытайся

 Помощники 
    .скрытый-*  
 Скрывает содержимое в зависимости от размера экрана 

Попытайся

 Помощники 
    .скрыть  
 Устарело. Используйте  .hidden  вместо 

Попытайся

 Помощники 
    .h2 - .h6  
 Делает элемент похожим на заголовок выбранного класса (h2-h6) 

Попытайся

 Типографика 
    .icon-bar  
 Используется на панели навигации для создания гамбургер-меню (три горизонтальные полосы) 

Попытайся

 Навбар 
    . icon-следующий  
 Значок Unicode (стрелка, указывающая вправо), используемый в каруселях. Его часто заменяют глификоном 
Попытайся

 Карусель 
    .icon-предыдущий  
 Значок Unicode (стрелка, указывающая влево), используемый в каруселях. Его часто заменяют глификоном 
Попытайся

 Карусель 
    .img-круг  
 Преобразует изображение в круг (не поддерживается в IE8 и более ранних версиях) 

Попытайся

 Изображения 
    .img-отзывчивый  
 Делает изображение адаптивным 

Попытайся

 Изображения 
    .img с округлением  
 Добавляет закругленные углы к изображению 

Попытайся

 Изображения 
    . img-миниатюра  
 Преобразовывает изображение в миниатюру (границы) 

Попытайся

 Изображения 
    .in  
 Фейды во вкладках 

Попытайся

 Вкладки 
    .info  
 Добавляет голубой фон к строке таблицы (  
   ). Указывает на нейтральное информативное изменение или действие 

Попытайся

 Столы 
    .инициализм  
 Отображает текст внутри элемента    шрифтом немного меньшего размера 

Попытайся

 Типографика 
    .группа ввода  
 Контейнер для улучшения ввода путем добавления значка, текста или кнопки перед ним или за ним в качестве «текста справки» 

Попытайся

 Входы 
    . input-group-lg  
 Большая группа ввода 

Попытайся

 Входы 
    .input-group-sm  
 Малая группа ввода 

Попытайся

 Входы 
    .input-group-addon  
 Вместе с классом  .input-group  этот класс позволяет добавить значок или текст справки рядом с полем ввода 

Попытайся

 Входы 
    .input-group-btn  
 Вместе с классом  .input-group  этот класс прикрепляет кнопку рядом с входом. Часто используется как строка поиска 

Попытайся

 Входы 
    .input-lg  
 Большое поле ввода 

Попытайся

 Размер входа 
    . ввод-см  
 Маленькое поле ввода 

Попытайся

 Размер ввода 
    .невидимый  
 Делает элемент невидимым (  visibility:hidden  ).  Примечание:  Несмотря на то, что элемент невидим, он займет место на странице 

Попытайся

 Помощники 
    .элемент  
 Класс добавлен к каждому элементу карусели. Может быть текст или изображения 

Попытайся

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

 Джамботрон 
    этикетка  
 Добавляет к элементу серую круглую рамку. Предоставляет дополнительную информацию о чем-либо (например, «Новое») 

Попытайся

 Этикетки 
    .label-danger  
 Красная этикетка 

Попытайся

 Этикетки 
    .label-info  
 Голубая этикетка 

Попытайся

 Этикетки 
    .label-успех  
 Зеленая этикетка 

Попытайся

 Этикетки 
    .этикетка-предупреждение  
 Желтая этикетка 

Попытайся

 Этикетки 
    .свинец  
 Увеличить размер шрифта и высоту строки абзаца 

Попытайся

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

Попытайся

 Карусель 
    .list-group  
 Создает группу списка с границами для    элементов 

Попытайся

 Группа списка 
    .list-group-item  
 Добавлено к каждому элементу    в группе списка 

Попытайся

 Группа списка 
    .list-group-item-heading  
 Создает заголовок группы списка (используется в других элементах, кроме    ) 

Попытайся

 Группа списка 
    .list-group-item-text  
 Используется для текста элемента внутри группы списка (используется для других элементов, кроме
   ) 

Попытайся

 Группа списка 
    . list-group-item-danger  
 Красный цвет фона для элемента списка в группе списков 

Попытайся

 Группа списка 
    .list-group-item-info  
 Голубой цвет фона для элемента списка в группе списков 

Попытайся

 Группа списка 
    .list-group-item-success  
 Зеленый цвет фона для элемента списка в группе списков 

Попытайся

 Группа списка 
    .list-group-item-warning  
 Желтый цвет фона для элемента списка в группе списка 

Попытайся

 Группа списка 
    .list-inline  
 Помещает все элементы списка в одну строку (горизонтальное меню) 

Попытайся

 Вкладки 
    . list-unstyled  
 Удаляет все стили списка по умолчанию (маркеры, левое поле и т. д.) из 
  или    список 

Попытайся

 Типографика 
    .знак  
 Выделяет текст: Выделенный текст 

Попытайся

 Типографика 
    .медиа  
 Выравнивает объекты мультимедиа (например, изображения или видео — часто используется для комментариев в блоге и т. д.) 

Попытайся

 Медиа Объекты 
    .медиа-тело  
 Текст, который должен отображаться рядом с медиа-объектом 

Попытайся

 Медиа Объекты 
    .медиа-заголовок  
 Создает заголовок внутри медиа-объекта 

Попытайся

 Медиа Объекты 
    . медиа-список  
 Вложенные списки мультимедиа 

Попытайся

 Медиа Объекты 
    .медиа-объект  
 Указывает медиа-объект (изображение или видео) 

Попытайся

 Медиа Объекты 
    .модал  
 Идентифицирует содержимое как модальное и переводит на него фокус 

Попытайся

 Модалы 
    .modal-body  
 Определяет стиль тела модального окна. Добавьте сюда любую HTML-разметку (p, img и т. д.) 

Попытайся

 Модалы 
    .modal-content  
 Стили модального окна (граница, фоновый цвет и т. д.). Внутри добавьте заголовок, тело и нижний колонтитул модального окна, если необходимо 

Попытайся

 Модалы 
    . модальный диалог  
 Устанавливает правильную ширину и поля модального окна 

Попытайся

 Модалы 
    .modal-нижний колонтитул  
 Нижний колонтитул модального окна (часто содержит кнопку действия и кнопку закрытия) 

Попытайся

 Модалы 
    .modal-header  
 Заголовок модального окна (часто содержит заголовок и кнопку закрытия) 

Попытайся

 Модалы 
    .modal-lg  
 Большое модальное окно (шире, чем по умолчанию) 

Попытайся

 Модалы 
    .modal-open  
 Используется в элементе    для предотвращения прокрутки страницы (  overflow:hidden  ) 

Попытайся

 Модалы 
    . modal-sm  
 Маленький модал (меньше ширины) 

Попытайся

 Модалы 
    .modal-title  
 Название модального окна 

Попытайся

 Модалы 
    .nav навигационные вкладки  
 Указывает меню с вкладками 

Попытайся

 Вкладки 
    .nav nav-таблетки  
 Указывает меню таблеток 

Попытайся

 Вкладки 
    .nav .navbar-nav  
 Используется в контейнере   , который содержит элементы списка со ссылками внутри панели навигации 

Попытайся

 Навбар 
    .nav-выравнивание  
 Центры вкладки/таблетки. Обратите внимание, что на экранах размером менее 768 пикселей элементы располагаются стопкой (содержимое останется в центре) 

Попытайся

 Вкладки 
    .nav-stacked  
 Таблетки или таблетки в вертикальной стопке 

Попытайся

 Вкладки 
    .nav-вкладки  
 Создает меню с вкладками 

Попытайся

 Вкладки 
    .navbar  
 Создает панель навигации 

Попытайся

 Навбар 
    .navbar-бренд  
 Добавлено к ссылке или элементу заголовка внутри панели навигации для представления логотипа или заголовка 

Попытайся

 Навбар 
    .navbar-btn  
 Вертикально выравнивает кнопку внутри панели навигации 

Попытайся

 Навбар 
    . navbar-collapse  
 Сворачивает панель навигации (скрыта и заменена значком меню/гамбургера на мобильных телефонах и небольших планшетах) 

Попытайся

 Навбар 
    .navbar-по умолчанию  
 Создает панель навигации по умолчанию (светло-серый цвет фона) 

Попытайся

 Навбар 
    .navbar-fixed-bottom  
 Делает панель навигации внизу экрана (закрепленной/фиксированной) 

Попытайся

 Навбар 
    .navbar-fixed-top  
 Панель навигации остается в верхней части экрана (фиксированная/фиксированная) 

Попытайся

 Навбар 
    .navbar-форма  
 Добавлено к элементам формы внутри панели навигации, чтобы центрировать их по вертикали (правильный отступ) 

Попытайся

 Навбар 
    . navbar-заголовок  
 Добавлен к элементу-контейнеру, который содержит ссылку/элемент, представляющий логотип или заголовок 

Попытайся

 Навбар 
    .navbar-инверсия  
 Создает черную панель навигации (вместо светло-серой) 

Попытайся

 Навбар 
    .navbar-левый  
 Выравнивает навигационные ссылки, формы, кнопки или текст на панели навигации по левому краю 

Попытайся

 Навбар 
    .navbar-ссылка  
 Стили элемента, чтобы он выглядел как ссылка внутри панели навигации (якоря получают правильные отступы и подчеркивание при наведении, в то время как другие элементы, такие как p или span, получают эффект наведения по умолчанию — белый цвет в перевернутой панели навигации и черный цвет в панели навигации по умолчанию ) 

Попытайся

 Навбар 
    . navbar-nav  
 Используется в контейнере   , который содержит элементы списка со ссылками внутри панели навигации 

Попытайся

 Навбар 
    .navbar-право  
 Выравнивает ссылки навигации, формы, кнопки или текст на панели навигации по правому краю. 

Попытайся

 Навбар 
    .navbar-static-top  
 Удаляет левую, верхнюю и правую границы (закругленные углы) с панели навигации (панель навигации по умолчанию имеет серую рамку и радиус границы 4 пикселя по умолчанию) 

Попытайся

 Навбар 
    .navbar-текст  
 Вертикальное выравнивание любых элементов внутри панели навигации, которые не являются ссылками (обеспечивает правильное заполнение) 

Попытайся

 Навбар 
    . navbar-переключатель  
 Стиль кнопки, которая должна открывать панель навигации на маленьких экранах. Часто используется вместе с тремя классами  .icon-bar  для обозначения переключаемого значка меню (гамбургер/бары) 

Попытайся

 Навбар 
    .следующий  
 Используется в карусели для идентификации следующего элемента управления 

Попытайся

 Карусель 
    .следующий  
 Используется для выравнивания кнопок пейджера по правому краю страницы (кнопка «Далее») 

Попытайся

 Пейджер 
    .page-header  
 Добавляет горизонтальную линию под заголовком (+ добавляет дополнительное пространство вокруг элемента) 

Попытайся

 Заголовок страницы 
    . пейджер  
 Создает кнопки «предыдущий/следующий» (используется на элементах   ) 

Попытайся

 Пейджер 
    .pagination  
 Создает разбиение на страницы (Полезно, если у вас есть веб-сайт с большим количеством страниц. Используется для    элементов) 

Попытайся

 Страница 
    .pagination-lg  
 Большое разбиение на страницы (каждая ссылка на разбиение на страницы получает размер шрифта 18 пикселей. По умолчанию 14 пикселей) 

Попытайся

 Пагинация 
    .pagination-sm  
 Маленькая пагинация (каждая ссылка на пагинацию получает размер шрифта 12 пикселей. По умолчанию 14 пикселей) 

Попытайся

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

Попытайся

 Панели 
    .панель-корпус  
 Контейнер для содержимого внутри панели 

Попытайся

 Панели 
    .panel-collapse  
 Складная панель (переключение между отображением и скрытием панелей) 

Попытайся

 Свернуть 
    .панель-опасность  
 Красная панель. Указывает на опасность 

Попытайся

 Панели 
    .панель-информация  
 Голубая панель. Указывает информацию 

Попытайся

 Панели 
    .панель-успех  
 Зеленая панель. Указывает на успех 

Попытайся

 Панели 
    .панель-предупреждение  
 Желтая панель. Указывает на предупреждение 

Попытайся

 Панели 
    .нижний колонтитул  
 Создает нижний колонтитул панели (светлый цвет фона) 

Попытайся

 Панели 
    .панельная группа  
 Используется для группировки нескольких панелей вместе. Это удаляет нижнее поле под каждой панелью 

Попытайся

 Панели 
    .панель-заголовок  
 Создает заголовок панели (светлый цвет фона) 

Попытайся

 Панели 
    .panel-title  
 Используется внутри  . panel-heading  для настройки стиля текста (удаляет поля и добавляет размер шрифта 16 пикселей) 

Попытайся

 Панели 
    .поповер  
 Всплывающее окно, которое появляется, когда пользователь щелкает элемент 

Попытайся

 Поповер 
    .предварительно прокручиваемый  
 Делает элемент    прокручиваемым (  max-height  350px и предоставить полосу прокрутки по оси Y) 

Попытайся

 Помощники 
    .предыдущая  
 Используется в каруселях для обозначения «предыдущей» ссылки 

Попытайся

 Карусель 
    .предыдущий  
 Используется для выравнивания кнопок пейджера по левой стороне страницы (предыдущая кнопка) 

Попытайся

 Пейджер 
    . прогресс  
 Контейнер для индикаторов выполнения 

Попытайся

 Индикаторы выполнения 
    .прогресс-бар  
 Создает индикатор выполнения 

Попытайся

 Индикаторы выполнения 
    .прогресс-бар-опасность  
 Красный индикатор выполнения. Указывает на опасность 

Попытайся

 Индикаторы выполнения 
    .прогресс-бар-информация  
 Голубой индикатор выполнения. Указывает информацию 

Попытайся

 Индикаторы выполнения 
    .progress-bar-полосатый  
 Создает полосатый индикатор выполнения 

Попытайся

 Индикаторы выполнения 
    . прогресс-бар-успех  
 Зеленый индикатор выполнения. Указывает на успех 

Попытайся

 Индикаторы выполнения 
    .прогресс-бар-предупреждение  
 Желтый индикатор выполнения. Указывает на предупреждение 

Попытайся

 Индикаторы выполнения 
    .левый  
 Плавающий элемент влево 

Попытайся

 Помощники 
    .правая тяга  
 Поместить элемент вправо 

Попытайся

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

Попытайся

 Карусель 
    ряд  
 Контейнер для адаптивных столбцов 

Попытайся

 Сетка 
    . ряд без желобов  
 Удаляет промежутки из строки и ее столбцов 

Попытайся

 Сетка 
    .показать  
 Показывает элемент (  display:block)  

Попытайся

 Помощники 
    .маленький  
 Создает более легкий дополнительный текст в любом заголовке 

Попытайся

 Типографика 
    .sr-только  
 Скрывает элемент на всех устройствах, кроме программ чтения с экрана 

Попытайся

 Помощники 
    .sr-только фокус  
 Скрывает элемент на всех устройствах, кроме программ чтения с экрана 

Попытайся

 Помощники 
    . успех  
 Добавляет зеленый цвет фона в строку таблицы (  
   ). Указывает на успех или положительное действие 

Попытайся

 Столы 
    .tab-content  
 Используется вместе с  .tab-pane  для создания переключаемых/динамических вкладок/таблеток 

Попытайся

 Вкладки 
    Панель вкладок  
 Используется вместе с  .tab-content  для создания переключаемых/динамических вкладок/таблеток 

Попытайся

 Вкладки 
    .стол  
 Добавляет к таблице основные стили (отступы, нижние границы и т. д.) 

Попытайся

 Таблицы 
    .с окантовкой стола  
 Добавляет границы со всех сторон таблицы и ячеек 

Попытайся

 Столы 
    . стол-уплотненный  
 Делает таблицу более компактной за счет сокращения заполнения ячеек пополам 

Попытайся

 Столы 
    .стол-наведение  
 Создает наводимую таблицу (добавляет серый цвет фона в строки таблицы при наведении) 

Попытайся

 Столы 
    .table-отзывчивый  
 Делает таблицу отзывчивой (при необходимости добавляет горизонтальную полосу прокрутки) 

Попытайся

 Столы 
    .text-capitalize  
 Обозначает текст с заглавной буквы 

Попытайся

 Типографика 
    .текстовый центр  
 Выравнивание текста по центру 

Попытайся

 Типографика 
    . текст-опасность  
 Красный цвет текста. Указывает на опасность 

Попытайся

 Типографика 
    .текст-скрыть  
 Скрывает текст (помогает заменить текстовое содержимое элемента фоновым изображением) 

Попытайся

 Типографика 
    .text-info  
 Голубой цвет текста. Указывает информацию 

Попытайся

 Типографика 
    .text-выравнивание  
 Указывает выравнивание текста по ширине 

Попытайся

 Типографика 
    .текст слева  
 Выравнивает текст по левому краю 

Попытайся

 Типографика 
    .текст-нижний регистр  
 Преобразует текст в нижний регистр 

Попытайся

 Типографика 
    . text-muted  
 Серый цвет текста 

Попытайся

 Типографика 
    .text-nowrap  
 Предотвращает перенос текста 

Попытайся

 Типографика 
    .text-primary  
 Синий цвет текста 

Попытайся

 Типографика 
    .текст справа  
 Выравнивает текст по правому краю 

Попытайся

 Типографика 
    .текст-успех  
 Зеленый цвет текста. Указывает на успех 

Попытайся

 Типографика 
    .text-uppercase  
 Делает текст прописными 

Попытайся

 Типографика 
    . текстовое предупреждение  
 Желтый/оранжевый цвет текста. Указывает на предупреждение 

Попытайся

 Типографика 
    .миниатюра  
 Добавляет рамку вокруг элемента (часто изображения или видео), чтобы он выглядел как миниатюра 

Попытайся

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

Попытайся

 Подсказка 
    .видимый-*  
 Устарело, начиная с версии 3.2.0. Используется для отображения и/или скрытия контента по устройствам.  Примечание:  Используйте  .hidden-*  вместо 

Попытайся

 Помощники 
    . visible-print-block  
 Отображает элемент (  display:block  ) в печатном (предварительном) представлении 


 Помощники 
    .visible-print-inline  
 Отображает элемент (  display:inline  ) в режиме печати (предварительно) 


 Помощники 
    .visible-print-inline-block  
 Отображает элемент (  display:inline-block  ) в режиме печати (предварительно) 


 Помощники 
    .скрытая печать  
 Скрывает элемент (  display:none  ) в режиме печати (предварительно) 


 Помощники 
    .предупреждение  
 Добавляет желтый цвет фона в строку таблицы (  
   ). Указывает на предупреждение 

Попытайся

 Столы 
    колодец  
 Добавляет закругленную рамку вокруг элемента с серым цветом фона и некоторым отступом 

Попытайся

 Уэллс 
    .well-lg  
 Большой колодец (больше набивки) 

Попытайся

 Уэллс 
    .велл-см  
 Маленькая лунка (без набивки) 

Попытайся

 Уэллс 
 
  начальная загрузка — нпм 
 
  Бутстрап 
 
Изящная, интуитивно понятная и мощная интерфейсная среда для более быстрой и простой веб-разработки.

  Изучите документы Bootstrap » 
  Сообщить об ошибке
·
Функция запроса
·
Темы
·
Блог
  Bootstrap 5 
  Наша ветка по умолчанию предназначена для разработки выпуска Bootstrap 5. Перейдите в ветку  v4-dev , чтобы просмотреть ознакомительные сведения, документацию и исходный код для Bootstrap 4. 
  Содержание 
   Быстрый старт 
 Статус 
 Что включено 
 Ошибки и пожелания 
 Документация 
 Содействие 
 Сообщество 
 Управление версиями 
 Создатели 
 Спасибо 
 Авторское право и лицензия 
  Быстрый запуск 
  Доступно несколько вариантов быстрого запуска: 
   Загрузить последнюю версию 
 Клонировать репозиторий:  git clone https://github.com/twbs/bootstrap.git 

 Установить с помощью npm:  npm install [email protected] 

 Установить с помощью yarn:  yarn add [email protected] 

 Установить с помощью Composer:  требуется композитор twbs/bootstrap:5.2.2 

 Установка с помощью NuGet: CSS:  Install-Package bootstrap  Sass:  Install-Package bootstrap. sass 

  Прочтите страницу «Начало работы» для получения информации о содержании платформы, шаблонах, примерах и многом другом. 
  Статус 
 
  Что включено 
  В загружаемом файле вы найдете следующие каталоги и файлы, логически сгруппированные общие ресурсы и предоставляющие как скомпилированные, так и минимизированные варианты. 
 Загрузить содержимое  bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities. css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map
 
 Мы предоставляем скомпилированные CSS и JS (  bootstrap.*  ), а также скомпилированные и минифицированные CSS и JS (  bootstrap.min.*  ). Исходные карты (  bootstrap. *.map  ) доступны для использования с инструментами разработчика определенных браузеров. Связанные JS-файлы ( bootstrap.bundle.js  и уменьшенный  bootstrap.bundle.min.js ) включают Popper. 
  Ошибки и пожелания 
  Есть ошибка или пожелания? Пожалуйста, сначала прочитайте руководство по проблемам и найдите существующие и закрытые проблемы. Если ваша проблема или идея еще не рассмотрены, пожалуйста, откройте новый вопрос. 
  Документация 
  Документация Bootstrap, включенная в этот репозиторий в корневом каталоге, создана с помощью Hugo и размещена в открытом доступе на страницах GitHub по адресу https://getbootstrap.com/. Документы также могут запускаться локально. 
  Поиск документации осуществляется с помощью Algolia's DocSearch. Работаете над нашим поиском? Обязательно установите  debug: true  в  site/assets/js/search.js  . 
  Локальный запуск документации 
   Запустите  npm install , чтобы установить зависимости Node. js, включая Hugo (конструктор сайтов). 
 Запустите  npm run test  (или определенный скрипт npm), чтобы перестроить распределенные файлы CSS и JavaScript, а также ресурсы нашей документации. 
 Из корневого каталога  /bootstrap  запустите  npm run docs-serve  в командной строке. 
 Откройте  http://localhost:9001/ в браузере и вуаля. 
  Узнайте больше об использовании Hugo, прочитав его документацию. 
  Документация по предыдущим выпускам 
  Все документы по предыдущим выпускам можно найти на странице https://getbootstrap.com/docs/versions/. 
  Предыдущие выпуски и их документация также доступны для загрузки. 
  Содействие 
  Пожалуйста, ознакомьтесь с нашими инструкциями по содействию. Включены указания по открытию выпусков, стандарты кодирования и примечания по разработке. 
  Кроме того, если ваш запрос на включение содержит исправления или функции JavaScript, вы должны включить соответствующие модульные тесты. Все HTML и CSS должны соответствовать Руководству по коду, поддерживаемому Марком Отто. 
  Настройки редактора доступны в конфигурации редактора для удобства использования в обычных текстовых редакторах. Узнайте больше и загрузите плагины на https://editorconfig.org/. 
  Сообщество 
  Получайте новости о разработке Bootstrap и общайтесь с сопровождающими проекта и членами сообщества. 
   Подпишитесь на @getbootstrap в Твиттере. 
 Прочтите официальный блог Bootstrap и подпишитесь на него. 
 Спрашивайте и изучайте наши обсуждения на GitHub. 
 Общайтесь с другими загрузчиками в IRC. На сервере  irc.libera.chat , в канале  #bootstrap . 
 Справку по реализации можно найти в Stack Overflow (с тегом 9).0011 бутстрап-5  ). 
 Разработчики должны использовать ключевое слово  bootstrap  для пакетов, которые изменяют или добавляют функциональные возможности Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной возможности обнаружения. 
  Управление версиями 
  Для обеспечения прозрачности нашего цикла выпуска и стремления поддерживать обратную совместимость Bootstrap поддерживается в соответствии с рекомендациями по семантическому управлению версиями. Иногда мы ошибаемся, но мы придерживаемся этих правил, когда это возможно. 
  См. раздел «Выпуски» нашего проекта GitHub, чтобы узнать журналы изменений для каждой версии выпуска Bootstrap. Сообщения с объявлениями о выпуске в официальном блоге Bootstrap содержат сводку наиболее примечательных изменений, внесенных в каждый выпуск. 
  Создатели 
   Марк Отто  
   https://twitter.com/mdo 
 https://github.com/mdo 
   Джейкоб Торнтон  
   https://twitter.com/fat 
 https://github.com/fat 
  Спасибо 
 Спасибо BrowserStack за предоставление инфраструктуры, которая позволяет нам тестировать в реальных браузерах! 
 Спасибо Netlify за предоставленные нам предварительные версии для развертывания! 
  Спонсоры 
  Поддержите этот проект, став спонсором.

No related posts.



Вперед Функция help в python: Функция help() в Python, справка по любому объекту.
Назад Vk новости: Структура VK получила 87% сервиса Movika




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









Рубрики
Css
Html
Http
Javascript
Photoshop
Верстка
Вопросы и ответы
Макет
Развитие сайтов
Сайт
Шаблон
Шрифт
Разное
Рубрики

Css

Html

Http

Javascript

Photoshop

Адаптив

Верстка

Вопросы и ответы

Макет

Развитие сайтов

Разное

Сайт

Советы

Шаблон

Шаблоны

Шрифт

Шрифты

Css bootstrap: Bootstrap · The most popular HTML, CSS, and JS library in the world.

Bootstrap · Самая популярная в мире библиотека HTML, CSS и JS.

Установка

BootstrapCDN

Bootstrap иконки

Официальные темы

Bootstrap 4

Контейнер

Ряды

Разное

Дополнительные материалы

Реклама

Начните работу с Bootstrap · Bootstrap v5.3

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

Привет, мир!

Привет, мир!

Css bootstrap: Bootstrap · The most popular HTML, CSS, and JS library in the world.

CSS-сетка · Bootstrap v5.1

Как это устроено

Ключевые отличия

Примеры

Три колонки

Адаптивность

Обертка

Начало

Авто колонки

Вложенность

Кастомизация

Нет классов сетки

Столбцы и промежутки

Добавление строк

Промежутки

Sass

Bootstrap 4

Контейнер

Ряды

Разное

Дополнительные материалы

Реклама

Bootstrap — HTML- и CSS-шаблоны оформления и…

Введение

История

Преимущества и недостатки

Основные инструменты

Модульные сетки

Создание колонок

Отступы между колонок

Сдвиг колонок

Вложенные колонки

Стили Bootstrap

Врезки

См. также

Текст в Bootstrap

Заголовки

Лид

Аббревиатура

Цитаты

Листинг

Изображения в Bootstrap

Списки в Bootstrap

Горизонтальный список

Список определений

Таблицы в Bootstrap

Продолжение:

См.также

Введение · Bootstrap

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

УСБ

JS

Стартовый шаблон

Привет, мир!

Важные глобальные переменные

Тип документа HTML5

Отзывчивый метатег

Размер коробки

Перезагрузка

Bootstrap Все классы CSS

начальная загрузка — нпм

Бутстрап

Bootstrap 5