Начальная загрузкаШпаргалка

шпаргалка RTL

Содержание

Типография

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

Дисплей 1

Дисплей 2

Дисплей 3

Дисплей 4

Дисплей 5

Дисплей 6

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

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

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

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

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

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

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

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

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

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

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

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

Картинки

Документация
Placeholder Responsive image
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200

Столы

Документация
# Первый Последний Справиться
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри Птица @твиттер
# Первый Последний Справиться
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри Птица @твиттер
Учебный класс Заголовок Заголовок
По умолчанию Клетка Клетка
Начальный Клетка Клетка
Среднее Клетка Клетка
Успех Клетка Клетка
Опасность Клетка Клетка
Предупреждение Клетка Клетка
Информация Клетка Клетка
Легкий Клетка Клетка
Темный Клетка Клетка
# Первый Последний Справиться
1 Отметка Отто @мдо
2 Джейкоб Торнтон @толстый
3 Ларри Птица @твиттер

Формы

Обзор

Документация
Мы никогда не будем делиться вашей электронной почтой с кем-либо еще.
Кнопки радио

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

Документация
Неактивные кнопки радио

Размеры

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

Группа ввода

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

Плавающие этикетки

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

Проверка

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

Составные части

Аккордеон

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

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

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

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

Оповещения

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

Значок

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

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

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

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

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

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

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

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

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

Начальный Среднее Успех Опасность Предупреждение Информация Легкий Темный

Кнопки

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

Открытка

Документация
Placeholder Image cap
Название карты

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

Иди куда-нибудь
Избранное
Название карты

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

Иди куда-нибудь
2 дня назад
Название карты

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

  • Пункт
  • Второй элемент
  • Третий элемент
Ссылка на карту Другая ссылка
Placeholder Image
Название карты

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

Последнее обновление 3 минуты назад

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

Документация
  • Отключенный элемент
  • Второй элемент
  • Третий элемент
  • Четвертый пункт
  • И пятый
  • Пункт
  • Второй элемент
  • Третий элемент
  • Четвертый пункт
  • И пятый
Простой элемент группы списка по умолчанию Простой элемент группы основного списка Простой групповой элемент вторичного списка Простой групповой элемент списка успеха Простой групповой элемент списка опасностей Простой групповой элемент списка предупреждений Простой групповой элемент информационного списка Простой групповой элемент списка источников света Простой групповой элемент темного списка

Поповеры

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

прокрутка

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

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

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

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

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

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

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

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

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

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

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

Спиннеры

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

Тосты

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

Подсказки

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