BOOTSTRAP¶

Вопросы¶

1. Что такое Twitter Bootstrap?
2. Какие основные преимущества Bootstrap?
3. Что включает в себя пакет Bootstrap?
4. Какие основные инструменты Bootstrap?
5. Что такое отзывчивый или адаптивный дизайн?
6. Что такое Contextual классы таблицы в Bootstrap?
7. Что такое Bootstrap Grid System?
8. Что такое Bootstrap media запросы?
9. Какие виды контейнеров в Bootstrap вы знаете?
10. Покажите основную табличную структуру в Bootstrap.
11. Что такое Offset смещение столбцов?
12. Как можно упорядочить столбцы в Bootstrap?
13. Какими двумя способами вы можете отобразить код в Bootstrap?
14. Как сделать изображения responsive(отзывчивым)?
15. Какие основные этапы создания формы в Bootstrap?
16. В чем разница между вертикальною и горизонтальной формой?
17. Объясните типографику и ссылки в Bootstrap.
18. Что такое Нормализация(Normalize) в Bootstrap?
19. Что такое Lead Body Copy?
20. Какие типы списков поддерживаются в Bootstrap?
21. Что такое Glyphicons?
22. Как использовать Glyphicons?
23. Что такое плагин Transition?
24. Что такое Modal плагин?
25. Как использовать плагин Dropdown?
26. Что такое Bootstrap карусель?
27. Что такое группа кнопок?
28. Какой класс используется для основной группы кнопок?
29. Какой класс используется, чтобы нарисовать панель кнопок?
30. Какие классы могут быть применены к группе кнопок вместо изменения размера каждой кнопки?
31. Какой класс отображает набор кнопок вертикально, а не горизонтально?
32. Что такое input группы?
33. Как создать меню навигации с вкладками?
34. Как создать меню навигации с кнопками?
35. Как создать вертикальное меню навигации с кнопками?
36. Что такое bootstrap navbar?
37. Как создать navbar в bootstrap?
38. Что такое bootstrap breadcrumb?
39. Какой класс используется для базовой нумерации страниц(pagination)?
40. Что такое bootstrap метки?
41. Что такое bootstrap бейджики?
42. Что такое Bootstrap Jumbotron?
43. Что такое Bootstrap page header?
44. Как создать миниатюры thumbnails, используя Bootstrap?
45. Как настроить миниатюры, используя Bootstrap?
46. Что такое bootstrap alerts?
47. Как создать bootstrap alert?
48. Как создать Bootstrap Dismissal Alert?
49. Как создать прогресс-бар, используя Bootstrap?
50. Как создать альтернативный прогресс-бар, используя bootstrap?
51. Как создать прогресс-бар в полоску, используя bootstrap?
52. Как создать анимированный прогресс-бар, используя bootstrap?
53. Как создать набор прогресс-баров, используя bootstrap?
54. Что такое bootstrap медиа-объекты?
55. Для чего нужен класс ".media" в bootstrap?
56. Для чего нужен класс ".media-list" класса в bootstrap?
57. Что такое bootstrap panels?
58. Как создать bootstrap панель с заголовком?
59. Как создать bootstrap панель с footer?
60. Какие контекстные классы доступны для оформления панелей?
61. Как объединить несколько bootstrap панелей?
62. Можете ли вы поместить таблицу в панель?
63. Как стилизовать таблицу горизонтальными разделителями?
64. Как стилизовать таблицу повторяющимся разным фоном строк?
65. Как добавить границы к ячейкам таблицы?
66. Как добавить изменение фона строки при наведении курсора?
67. Как уменьшить отступ ячеек наполовину?
68. Как сделать разноцветным фон строк таблицы?
69. Что такое bootstrap well?
70. Что такое scrollspy плагин?
71. Что такое affix плагин?

Ответы¶

Что такое Twitter Bootstrap?¶

Bootstrap (также известен как Twitter Bootstrap) - свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения. Bootstrap использует самые современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров.

Какие основные преимущества Bootstrap?¶

Основные преимущества Bootstrap:

• Экономия времени - Bootstrap позволяет сэкономить время и усилия, используя шаблоны дизайна и классы, и сконцентрироваться на других разработках.
• Высокая скорость - динамичные макеты Bootstrap масштабируются на разные устройства и разрешения экрана без каких-либо изменений в разметке.
• Гармоничный дизайн - все компоненты платформы Bootstrap используют единый стиль и шаблоны с помощью центральной библиотеки. Дизайн и макеты веб-страниц согласуются друг с другом.
• Простота в использовании - платформа проста в использовании, пользователь с базовыми знаниями HTML и CSS может начать разработку с Twitter Bootstrap.
• Совместимость с браузерами - Twitter Bootstrap совместим с Mozilla Firefox, Yandex Browser, Google Chrome, Safari, Internet Explorer и Opera.
• Открытое программное обеспечение - Twitter Bootstrap это фреймворк с открытым исходным кодом, который предполагает удобство использования, посредством открытости исходных кодов и бесплатной загрузки.
• Он также поддерживает кастомизацию на веб-основе.

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

Bootstrap включает включает в себя:

• Scaffolding - Bootstrap предоставляет базовую структуру с табличной системой Grid System, стилями ссылок, фоном.
• CSS - Bootstrap поставляется с функцией глобальных CSS настроек, основными HTML элементами, имеющими стили и улучшенных с помощью расширяемых классов, и передовой табличной системой.
• Components - Bootstrap содержит более десятка компонентов многократного использовании, построенных для обеспечения иконографии, выпадающих элементов, навигации, оповещений, всплывающих панелей popovers, и многое другое.
• JavaScript Plugins - Bootstrap содержит более десятка пользовательских подключаемых модулей jQuery. Вы можете легко подключить их все, или по одному.
• Customize - вы можете настроить Bootstrap компоненты, LESS переменные и jQuery плагины, чтобы получить свою собственную версию Bootstrap.

Какие основные инструменты Bootstrap?¶

Основные инструменты Bootstrap:

• Сетки - заранее заданные размеры колонок, которые можно сразу же использовать, например ширина колонки 140px относится к классу ".span2" (".col-md-2" в третьей версии фреймворка), который можно использовать в CSS описании документа.
• Шаблоны - фиксированный или резиновый шаблон документа.
• Типографика - описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т. п.
• Медиа - представляет некоторое управление изображениями и видео.
• Таблицы - средства оформления таблиц, вплоть до добавления функциональности сортировки.
• Формы - классы для оформления форм и некоторых событий происходящих с ними.
• Навигация - классы оформления для табов, вкладок, страничности, меню и тулбара.
• Алерты - оформление диалоговых окон, подсказок и всплывающих окон.

Что такое отзывчивый или адаптивный дизайн?¶

Отзывчивый или адаптивный дизайн (responsive, adaptive) позволяет создавать веб-сайты, которые меняют свой внешний вид в зависимости от разрешения экрана, чтобы удобно было просматривать один и тот же сайт на различных устройствах - от телефона до настольного компьютера с большим монитором.

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

Contextual классы позволяют изменить цвет фона табличных строк или индивидуальных ячеек:

• .active - применяет цвет при наведении на конкретную строку или ячейку.
• .success - указывает на успешное или положительное действие.
• .warning - указывает предупреждение, что, возможно, потребуется действие.
• .danger - указывает на опасное или потенциально негативное действие.

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

Bootstrap включает в себя отзывчивую, гибкую "сетку", которая надлежащим образом масштабируется до 12 столбцов при увеличении размера устройства или окна просмотра. Она включает в себя предопределенные классы для простых вариантов компоновки, а также мощные сложные классы для генерации более семантических макетов.

Что такое Bootstrap media запросы?¶

Медиа запросы (Media Queries) - позволяют перемещать, показывать и скрывать контент, основываясь на размере экрана.

Какие виды контейнеров в Bootstrap вы знаете?¶

Контейнер является "фундаментом", с которого начинают создавать сетку вебстраницы сайта. На платформе Twitter Bootstrap контейнеры бывают 2 видов:

• Фиксированный контейнер (элемент div с классом ".container"). Он имеет строго определённую ширину для определённого типа устройств. Т.е. для одного устройства контейнер имеет одну ширину, для другого устройства - другое значение ширины. Всего в Bootstrap 3 определено 4 типа устройств:
  • xs (смартфоны - ширина контейнера равна ширине рабочей области окна браузера).
  • sm (планшеты - 750px).
  • md (ноутбуки - 970px).
  • lg (персональные компьютеры - 1170px). Позиционируется фиксированный контейнер в горизонтальном направлении по центру, это достигается за счёт CSS свойства "margin: 0 auto".
• Жидкий "текучий" контейнер (элементы div с классом ".fluid-container"). Он имеет ширину, равную ширине рабочей области окна браузера. Т.е. ширина жидкого "текучего" контейнера не является фиксированной, а изменяется при любом изменении ширины рабочей области окна браузера. Сетку сайта, которую проектируют на основе жидкого "текучего" контейнера называют ещё "резиновой".

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

Ниже пример базовой структуры Bootstrap сетки:

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

Смещения расстояние между столбцами это полезная функция для более специализированных шаблонов. Она может быть использована, например, чтобы сместить столбцы на дополнительный интервал. ".соl-xs = *" - классы не поддерживают смещения, но они легко копируются с помощью пустой ячейки.

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

Вы можете легко изменить порядок встроенных столбцов с помощью классовмодификаторов ".col-md-push-*" и ".col-md-pull-*" в диапазоне от 1 до 11.

Какими двумя способами вы можете отобразить код в Bootstrap?¶

Код в Bootstrap вы можете отобразить двумя способами:

• Поместить код в строковый тег <"code">
• Для выделения 2-х и более строк кода используйте тег <"pre">. Избегайте использования угловых скобок < и >, для корректного отображения фрагментов кода. Всегда используйте теги <"pre"> как можно левее в редакторе кода, так как внутри тега <"pre"> сохраняются все отступы и пробелы.

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

Bootstrap 3 позволяет сделать изображения отзывчивыми путем добавления класса ". img-responsive" в тег <img>. Этот класс применяет "max-width: 100%;" и "height: auto;" к изображению, так что изображение красиво масштабируетcя относительно родительского элемента

Какие основные этапы создания формы в Bootstrap?¶

Основные моменты при создании и оформлении формы представим в виде следующих этапов:

• Указать вид формы. В Bootstrap 3 различают следующие виды форм: вертикальная (без добавления класса), горизонтальная (.form-horizontal) и в одну строку (.form-inline).
• Добавить к необходимым текстовым элементам управления <input>, <textarea>, <select> класс ".form-control", чтобы установить им ширину, равную 100% (всю доступную ширину родительского элемента).
• Поместить каждую надпись (<label>) и элемент управления в контейнер <div>... </div> с классом ".form-group". Это необходимо сделать, чтобы задать для элементов в форме оптимальные отступы.

В чем разница между вертикальною и горизонтальной формой?¶

Вертикальная форма - это макет формы, в которой её элементы располагаются вертикально, т.е. один под другим. Данная форма создаётся без добавления класса к элементу формы (<form>). Метки и элементы управления формы необходимо размещать в блоке с классом ".form-group".

Горизонтальная форма - это форма, в которой надписи и элементы управления находящиеся в одной группе (<div class="form-group">...</div>) располагаются на одной строке.

Объясните типографику и ссылки в Bootstrap.¶

Bootstrap устанавливает основной глобальный фон, типографику и стили ссылок.

• Основной глобальный фон - устанавливает "background-color: #fff" в элементе <body>.
• Шрифты - используют @font-family-base, @font-size-base, и @line-height-base атрибуты.
• Стили ссылок - устанавливают глобальный цвет ссылки через атрибут @link-color и применяют подчеркивание ссылки исключительно для ":hover".

Что такое Нормализация(Normalize) в Bootstrap?¶

Bootstrap использует нормализацию чтобы установить кросс согласованность для браузеров.

Normalize.css это современная, HTML5 - готовая альтернатива CSS. Это небольшой файл CSS, который обеспечивает лучшую кросс-браузерную согласованность в стилях по умолчанию для HTML элементов.

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

Чтобы добавить некоторою выразительность параграфу, добавте class="lead". Это даст вам больший размер шрифта, легчий вес, и более высокую высоту строки.

Какие типы списков поддерживаются в Bootstrap?¶

Bootstrap поддерживает упорядоченные списки, неупорядоченные и списки определений.

• Упорядоченный список(Ordered lists) - является списком. который отображается в каком-либо последовательном порядке и начинается с цифры.
• Неупорядоченный список(Unordered lists) - является списком, который не имеет никакого определенного порядка и отображается в традиционном стиле с маркерами. Если вы не хотите, чтобы маркеры отображались, вы можете удалить стиль, используя класс ".list-unstyled". Вы также можете разместить все элементы списка в одну строку с помощью класса ".list-inline".
• Списки определений(DeÙnition lists) - в этом типе списка, каждый элемент списка может состоять из <dt> и <dd> элементов. <dt> обозначает термин "определение", и как в словаре, это термин (или словосочетание), которое определяется. Далее, <dd> является определением <dt>. Вы можете разместить термины и описания в <dl> линии бок о бок с использованием класса "dl-horizontal".

Что такое Glyphicons?¶

Glyphicons это великолепный набор иконок, которые вы можете использовать вместо изображений в ваших веб-проектах.

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

Чтобы использовать Glyphicons значки, просто используйте следующий код почти в любом месте в вашем коде. Оставьте пространство между значком и текстом для правильного заполнения.

<span class = "glyphicon glyphicon-search"></span>

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

Плагин Transition предоставляет простые эффекты перехода, такие как скольжения или затухание в диалоговых окнах.

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

Modal это окно предназначенное для отображения на веб-странице некоторого контента посредством модального окна. В Bootstrap 3 и 4, модальное окно (modal) представляет собой контейнер, который визуально отображается над остальным содержимым страницы.

Модальные окна на веб-странице применяется для решения большого круга задач. Например, может использоваться для отображения регистрационной формы пользователю, изображения в увеличенном масштабе, какого-то важного события, произошедшего на сайте и чего-то другого.

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

Можно через атрибуты данных, добавить data-toggle="dropdown" на ссылку или кнопку для переключения выпадающего меню.

Если вам нужно сохранить ссылки нетронутыми (что полезно, если браузер не позволяет JavaScript), используйте атрибут data-target вместо href="#".

Для вызова dropdown меню с помощью JavaScript, используйте следующий метод

$('dropdown-toggle').dropdown()

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

Bootstrap карусель - это слайд-шоу компонент, для циклической смены элементов (изображений или текстовых слайдов). Карусель для картинок, позволяет создать
слайдшоу с использованием подписей, аннотаций и других различных элементов. Если страница для пользователя не видима (например, когда вкладка, содержащая карусель неактивна или окно браузера свёрнуто и т.д.), то карусель не будет осуществлять смену слайдов.

Стандартные методы Bootstrap карусели:

• .carousel(options) - инициализирует карусель с дополнительными параметрами и запускает процесс смены слайдов
• .carousel('cycle') - запускает процесс смены слайдов слева направо
• .carousel('pause') - останавливает процесс автоматической смены слайдов карусели
• .carousel(number) - осуществляет переход на определённый слайд карусели, который устанавливается с помощью числа number (отчёт ведётся с 0, по аналогии с массивом)
• .carousel('prev') - осуществляет переход на предыдущий слайд
• .carousel('next') - осуществляет переход на следующий слайд

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

Группа кнопок позволяют разместить несколько кнопок вместе в одной строке. Это полезно, если вы хотите разместить элементы вместе.

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

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

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

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

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

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

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

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

Что такое bootstrap navbar?¶

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

Что такое bootstrap breadcrumb?¶

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

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

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

Что такое Bootstrap Jumbotron?¶

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

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

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

Что такое bootstrap alerts?¶

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

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

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

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

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

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

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

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

Для чего нужен класс ".media" в bootstrap?¶

Для чего нужен класс ".media-list" класса в bootstrap?¶

Что такое bootstrap panels?¶

Как создать bootstrap панель с заголовком?¶

Как создать bootstrap панель с footer?¶

Какие контекстные классы доступны для оформления панелей?¶

Как объединить несколько bootstrap панелей?¶

Можете ли вы поместить таблицу в панель?¶

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

Как стилизовать таблицу повторяющимся разным фоном строк?¶

Как добавить границы к ячейкам таблицы?¶

Как добавить изменение фона строки при наведении курсора?¶

Как уменьшить отступ ячеек наполовину?¶

Как сделать разноцветным фон строк таблицы?¶

Что такое bootstrap well?¶

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

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