Чтение онлайн

на главную - закладки

Жанры

Bootstrap: Быстрое создание современных сайтов
Шрифт:

Тогда при уменьшении размера экрана, четыре столбца в одной строке не будут преобразовываться в две строки по два столбца:

Чтобы достичь этого, нужно применить блок:

<div class=«clearfix visible-xs-block»> </div>

<div class=«clearfix visible-sm-block»> </div>

<section class=«row»>

<section class=«col-xs-6 col-sm-6 col-md-3 col-lg-3»>

<div class=«alert alert-danger»> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div>

</section>

<section class=«col-xs-6 col-sm-6 col-md-3 col-lg-3»>

<div class=«alert alert-info»> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div>

</section>

<div class=«clearfix visible-xs-block»> </div>

<div class=«clearfix visible-sm-block»> </div>

<section class=«col-xs-6 col-sm-6 col-md-3 col-lg-3»>

<div class=«alert alert-info»> Lorem ipsum dolor sit amet. </div>

</section>

<section class=«col-xs-6 col-sm-6 col-md-3 col-lg-3»>

<div class=«alert alert-info»> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros. </div>

</section>

</section>

Здесь

для управления видимостью элемента используется класс visible. Для сокрытия элемента используется класс hidden:

Таким образом, если применить класс visible-sm-block, элемент будет виден только на планшете, если применить класс hidden-sm, элемент будет скрыт на планшетах.

Для увеличения отступа между столбцами,

можно использовать класс col-*-offset-*, где первая звездочка это классы xs, sm, md, lg (обычно используют только md), а вторая звездочка это значение от 1 до 11. При использовании этого класса, за сценой применяется свойство margin-left.

Перемещать столбцы вправо или влево можно с помощью классов col-md-push-* и col-md-pull-* соответственно, где звездочка это значение от 1 до 11. При этом за сценой используется CSS свойство left: и right:.

<div class=«col-md-4 col-md-push-4»> green pushed 4 </div>

<div class=«col-md-4 col-md-pull-4»> red pulled 4 </div>

Тест 1 на знание Bootstrap

Вопрос 1

Что такое Twitter Bootstrap?

Вопрос 2

Зачем использовать Bootstrap?

Вопрос 3

Что Bootstrap пакет включает в себя?

Вопрос 4

Что такое Contextual классы таблицы в Bootstrap?

Вопрос 5

Что такое Bootstrap Grid System?

Вопрос 6

Что такое Bootstrap медиа запросы?

Вопрос 7

Покажите основную табличную структуру в Bootstrap.

Вопрос 8

Что такое Offset смещение столбцов?

Вопрос 9

Как можно упорядочить столбцы в Bootstrap?

Вопрос 10

Как сделать изображения отзывчивыми?

Вопрос 11

Объясните шрифты и ссылки в Bootstrap.

Вопрос 12

Что такое нормализовать Normalize в Bootstrap?

Вопрос 13

Что такое Lead Body Copy?

Вопрос 14

Объясните типы списков поддерживаемых Bootstrap.

Вопрос 15

Что такое glyphicons?

Вопрос 16

Как использовать Glyphicons?

Вопрос 17

Что такое плагин transition?

Вопрос 18

Что такое Modal плагин?

Вопрос 19

Как использовать плагин Dropdown?

Вопрос 20

Что такое Bootstrap карусель?

Вопрос 21

Что такое группа кнопок?

Вопрос 22

Какой класс используется для основной группы кнопок?

Вопрос 23

Какой класс используется, чтобы нарисовать панель кнопок?

Вопрос 24

Какие классы могут быть применены к группе кнопок вместо изменения размера каждой кнопки?

Поделиться:
Популярные книги

Адвокат вольного города

Парсиев Дмитрий
1. Адвокат
Фантастика:
городское фэнтези
альтернативная история
аниме
5.00
рейтинг книги
Адвокат вольного города

Темный Лекарь 4

Токсик Саша
4. Темный Лекарь
Фантастика:
фэнтези
аниме
5.00
рейтинг книги
Темный Лекарь 4

Дракон - не подарок

Суббота Светлана
2. Королевская академия Драко
Фантастика:
фэнтези
6.74
рейтинг книги
Дракон - не подарок

Разбуди меня

Рам Янка
7. Серьёзные мальчики в форме
Любовные романы:
современные любовные романы
остросюжетные любовные романы
5.00
рейтинг книги
Разбуди меня

Изгой Проклятого Клана. Том 2

Пламенев Владимир
2. Изгой
Фантастика:
попаданцы
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Изгой Проклятого Клана. Том 2

Провинциал. Книга 2

Лопарев Игорь Викторович
2. Провинциал
Фантастика:
космическая фантастика
рпг
аниме
5.00
рейтинг книги
Провинциал. Книга 2

На границе империй. Том 10. Часть 3

INDIGO
Вселенная EVE Online
Фантастика:
боевая фантастика
космическая фантастика
попаданцы
5.00
рейтинг книги
На границе империй. Том 10. Часть 3

Сумеречный Стрелок 2

Карелин Сергей Витальевич
2. Сумеречный стрелок
Фантастика:
городское фэнтези
попаданцы
аниме
5.00
рейтинг книги
Сумеречный Стрелок 2

Академия

Кондакова Анна
2. Клан Волка
Фантастика:
боевая фантастика
5.40
рейтинг книги
Академия

Попаданка для Дракона, или Жена любой ценой

Герр Ольга
Любовные романы:
любовно-фантастические романы
7.17
рейтинг книги
Попаданка для Дракона, или Жена любой ценой

Жена фаворита королевы. Посмешище двора

Семина Дия
Фантастика:
фэнтези
5.00
рейтинг книги
Жена фаворита королевы. Посмешище двора

Сердце Дракона. Том 12

Клеванский Кирилл Сергеевич
12. Сердце дракона
Фантастика:
фэнтези
героическая фантастика
боевая фантастика
7.29
рейтинг книги
Сердце Дракона. Том 12

Архонт

Прокофьев Роман Юрьевич
5. Стеллар
Фантастика:
боевая фантастика
рпг
7.80
рейтинг книги
Архонт

Лучший из худших

Дашко Дмитрий
1. Лучший из худших
Фантастика:
фэнтези
попаданцы
5.25
рейтинг книги
Лучший из худших