Bootstrap
Официальный сайт - getbootstrap.com
.h1 Заголовок 1
.h2 Заголовок 2
.h3 Заголовок 3
.h4 Заголовок 4
.h5 Заголовок 5
.h6 Заголовок 6
|
Очень мелкие экраны
Телефоны (до 768 px) |
Маленькие экраны
Планшеты (≥768px) |
Средние экраны
Настольные (≥992px) |
Большие экраны
Настольные (≥1200px) |
.visible-xs-* |
Видимый |
Скрытый |
Скрытый |
Скрытый |
.visible-sm-* |
Скрытый |
Видимый |
Скрытый |
Скрытый |
.visible-md-* |
Скрытый |
Скрытый |
Видимый |
Скрытый |
.visible-lg-* |
Скрытый |
Скрытый |
Скрытый |
Видимый |
.hidden-xs |
Скрытый |
Видимый |
Видимый |
Видимый |
.hidden-sm |
Видимый |
Скрытый |
Видимый |
Видимый |
.hidden-md |
Видимый |
Видимый |
Скрытый |
Видимый |
.hidden-lg |
Видимый |
Видимый |
Видимый |
Скрытый |
Как видите, один и тот же блок можно спрятать на планшете и показывать только на десктопе и мобильном.
успех (success) / Вы успешно дочитали до этого места
подсказка (info) / Это ещё не конец статьи
предупреждение (warning) / Читать мало, нужно всё применять на практике
ошибка (danger) / Да, это не смешно
Таблицы
| Имя |
Фамилия |
Почта |
| Иван |
Николайчук |
ivan@example.com |
| Мария |
Иванова |
mary@example.com |
| Юлия |
Петренко |
julia@example.com |
| Имя |
Фамилия |
Почта |
| Иван |
Николайчук |
ivan@example.com |
| Мария |
Иванова |
mary@example.com |
| Юлия |
Петренко |
julia@example.com |
| Имя |
Фамилия |
Почта |
| Иван |
Николайчук |
ivan@example.com |
| Мария |
Иванова |
mary@example.com |
| Юлия |
Петренко |
julia@example.com |
a - Кнопка
В блочной верстке Bootstrap есть четыре основных класса:
- xs (extra small) — для мобильных телефонов, до 767 пикс. включительно
- sm (small) — для планшетов, размер экрана 768—991 пикс.
- md (middle) — для десктопов, 992—1199 пикс.
- lg (large) — для больших экранов, от 1200 пикс.
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-xs-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-xs-2
.col-xs-2
.col-xs-2
.col-xs-2
.col-xs-2
.col-xs-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-xs-3
.col-xs-3
.col-xs-3
.col-xs-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-lg-3
.col-lg-3
.col-lg-3
.col-lg-3
.col-xs-4
.col-xs-4
.col-xs-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-4 .col-sm-push-8
.col-sm-8 .col-sm-pull-4
.col-sm-12 col-md-8 col-lg-6
.col-sm-12 col-md-4 col-lg-6