Bootstrap Шпаргалка

Шпаргалка по RTL

Содержание

Типография

Документация

Дисплей 1

Дисплей 2

Дисплей 3

Дисплей 4

Дисплей 5

Дисплей 6

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Это ведущий абзац. Он выделяется из обычных абзацев.

Вы можете использовать тег mark для выделения текста.

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

Эта строка текста считается неверной.

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

Эта строка текста будет отображаться как подчеркнутая.

Эту строку текста следует рассматривать как мелкий шрифт.

Эта строка выделена жирным шрифтом.

Эта строка выделена курсивом.

Известная цитата, содержащаяся в элементе цитаты.

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

Изображения

Документация
PlaceholderАдаптивное изображение
Обычное квадратное изображение-заполнитель с белой рамкой вокруг него, что делает его похожим на фотографию, сделанную на старую камеру мгновенного действия200x200

Таблицы

Документация
# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Класс Заголовок Заголовок
По умолчанию Ячейка Ячейка
Primary Ячейка Ячейка
Secondary Ячейка Ячейка
Success Ячейка Ячейка
Danger Ячейка Ячейка
Warning Ячейка Ячейка
Info Ячейка Ячейка
Light Ячейка Ячейка
Dark Ячейка Ячейка
# Имя Фамилия Обращение
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Формы

Обзор

Документация
Мы никогда никому не передадим вашу электронную почту.
Кнопки радио

Отключенные формы

Документация
Отключенные радиокнопки

Размеры

Документация

Группа ввода

Документация
@
@example.com
https://example.com/users/
$ .00
С текстовым полем

Валидация

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

Компоненты

Аккордеон

Документация

Это тело аккордеона первого элемента. По умолчанию оно скрыто, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в .accordion-body, хотя переход ограничивает переполнение.

Это тело аккордеона второго элемента. По умолчанию он скрыт, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в .accordion-body, хотя переход ограничивает переполнение.

Это тело "гармошки" третьего элемента. По умолчанию оно скрыто, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и скрытием с помощью переходов CSS. Вы можете изменить все это с помощью собственного CSS или переопределить наши переменные по умолчанию. Также стоит отметить, что практически любой HTML может быть помещен в .accordion-body, хотя переход ограничивает переполнение.

Уведомления

Документация

Значок

Документация

Пример заголовка Новое

Пример заголовка Новое

Пример заголовка Новое

Пример заголовка Новое

Пример заголовка Новое

Пример заголовка Новое

Пример заголовка Новое

Пример заголовка Новое

Primary Secondary Success Danger Warning Info Light Dark

Кнопки

Документация

Карточка

Документация
PlaceholderImage cap
Заголовок карточки

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

Иди куда-нибудь
Рекомендуемые
Заголовок карточки

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

Иди куда-нибудь
2 дня назад
Заголовок карточки

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

  • Элемент
  • Второй элемент
  • Третий элемент
Ссылка карточки Другая ссылка
PlaceholderImage
Заголовок карточки

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

Последнее обновление: 3 мин. назад

Группа списка

Документация
  • Отключенный элемент
  • Второй элемент
  • Третий элемент
  • Четвертый элемент
  • И пятый
  • Элемент
  • Второй элемент
  • Третий элемент
  • Четвертый элемент
  • И пятый
Простой элемент группы списка по умолчанию Простой primary элемент группы списка Простой secondary элемент группы списка Простой success элемент группы списка Простой danger элемент группы списка Простой warning элемент группы списка Простой info элемент группы списка Простой light элемент группы списка Простой dark элемент группы списка

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

Документация

Отслеживание прокрутки

Документация

Первый заголовок

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

Второй заголовок

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

Третий заголовок

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

Четвертый заголовок

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

Пятый заголовок

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

Состояние загрузки

Документация

Всплывающие сообщения

Документация

Всплывающие сообщения

Документация