Литмир - Электронная Библиотека

</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:

Bootstrap: Быстрое создание современных сайтов - image9_56d7856dd03802eb7d7bca81_jpg.jpeg
Bootstrap: Быстрое создание современных сайтов - image10_56d7856cd03802eb7d7bca7e_jpg.jpeg
Bootstrap: Быстрое создание современных сайтов - image11_56d7856bd03802eb7d7bca7b_jpg.jpeg

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

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

Bootstrap: Быстрое создание современных сайтов - image12_56d78569d03802eb7d7bca78_jpg.jpeg
Bootstrap: Быстрое создание современных сайтов - image13_56d78568d03802eb7d7bca75_jpg.jpeg

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

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

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

Bootstrap: Быстрое создание современных сайтов - image14_56d78567d03802eb7d7bca72_jpg.jpeg

Тест 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

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

Вопрос 25

Какой класс отображает набор кнопок вертикально, а не горизонтально?

Вопрос 26

Что такое input группы?

Вопрос 27

Как создать меню навигации с вкладками?

Вопрос 28

Как создать меню навигации с кнопками?

Вопрос 29

Как создать вертикальное меню навигации с кнопками?

Вопрос 30

Что такое bootstrap navbar?

Вопрос 31

Как создать NavBar в bootstrap?

Вопрос 32

Что такое bootstrap breadcrumb?

Вопрос 33

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

Вопрос 34

Как настраивать ссылки нумерации страниц?

Вопрос 35

Что такое bootstrap метки?

Вопрос 36

Что такое bootstrap бейджики?

Вопрос 37

Что такое Bootstrap Jumbotron?

Вопрос 38

Что такое Bootstrap page header?

Вопрос 39

Как создать миниатюры thumbnails, используя Bootstrap?

Вопрос 40

Как настроить миниатюры, используя Bootstrap?

Вопрос 41

Что такое bootstrap alerts?

Вопрос 42

Как создать bootstrap alert?

Вопрос 43

Как создать Bootstrap Dismissal Alert?

Вопрос 44

Как создать прогресс-бар, используя Bootstrap?

Вопрос 45

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

Вопрос 46

Как создать прогресс-бар в полоску, используя bootstrap?

Вопрос 47

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

Вопрос 48

Как создать набор индикаторов, используя bootstrap?

Вопрос 49

Что такое bootstrap медиа-объекты?

2
{"b":"483114","o":1}