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 Видимый Видимый Видимый Скрытый

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

 

 

 

 

Таблицы
Имя Фамилия Почта
Иван Николайчук 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 есть четыре основных класса:

.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-xs-6
.col-xs-6
.col-sm-6
.col-sm-6
.col-md-6
.col-md-6
.col-lg-6
.col-lg-6

 

.col-xs-12
.col-sm-12
.col-md-12
.col-lg-12

 

.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

 

Пример строки с подсказкой

 

 

 

 

 

 

 

 

 

email@example.com