BootstrapШпаргалку

Шпаргалка RTL

Зміст

Типографіка

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

Дисплей 1

Дисплей 2

Дисплей 3

Дисплей 4

Дисплей 5

Дисплей 6

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Це провідний абзац. Він виділяється із звичайних абзаців.

Ви можете використовувати позначку, щобпідсвічуватитекст.

Цей рядок тексту має розглядатися як видалений текст.

Цей рядок тексту має вважатися неточним.

Цей рядок тексту має розглядатися як доповнення до документа.

Цей рядок тексту відображатиметься як підкреслений.

Цей рядок тексту має розглядатися як дрібний шрифт.

Цей рядок відображається жирним шрифтом.

Цей рядок відображається як текст, виділений курсивом.

Добре відома цитата, що міститься в елементі blockquote.

Хтось відомий у назві джерела
  • Це список.
  • Виглядає абсолютно нестилизованим.
  • Структурно це все-таки список.
  • Однак цей стиль застосовується лише до безпосередніх дочірніх елементів.
  • Вкладені списки:
    • не впливають на цей стиль
    • все одно буде показувати кулю
    • і мати відповідне ліве поле
  • Це може стати в нагоді в деяких ситуаціях.
  • Це пункт списку.
  • І ще один.
  • Але вони відображаються вбудовано.

Зображення

Документація
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 Марк Отто @mdo
2 Яків Торнтон @жирний
3 Пташка Ларрі @twitter
# Спочатку Останній Ручка
1 Марк Отто @mdo
2 Яків Торнтон @жирний
3 Пташка Ларрі @twitter
Клас Заголовок Заголовок
За замовчуванням Стільниковий Стільниковий
Первинний Стільниковий Стільниковий
Вторинний Стільниковий Стільниковий
Успіх Стільниковий Стільниковий
Небезпека Стільниковий Стільниковий
УВАГА Стільниковий Стільниковий
Інформація Стільниковий Стільниковий
світло Стільниковий Стільниковий
Темний Стільниковий Стільниковий
# Спочатку Останній Ручка
1 Марк Отто @mdo
2 Яків Торнтон @жирний
3 Пташка Ларрі @twitter

Форми

Огляд

Документація
Ми ніколи нікому не передамо вашу електронну адресу.
Кнопки радіо

Відключені форми

Документація
Вимкнені радіокнопки

Розміри

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

Вхідна група

Документація
@
@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. Зауважте, що під час прокручування сторінки вниз відповідне навігаційне посилання буде виділено. Це повторюється у всьому прикладі компонента. Ми продовжуємо додавати ще кілька зразків, щоб підкреслити прокручування та виділення.

П'ятий заголовок

Це деякий вміст заповнювача для сторінки Scrollspy. Зауважте, що під час прокручування сторінки вниз відповідне навігаційне посилання буде виділено. Це повторюється у всьому прикладі компонента. Ми продовжуємо додавати ще кілька зразків, щоб підкреслити прокручування та виділення.

Спінери

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

Тости

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

Підказки

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