Ответы на вопросы на собеседование Bootstrap (Twitter Bootstrap) (часть 1).

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;" к изображению, так что изображение красиво масштабируется относительно родительского элемента.

• Какие основные этапы создания формы в 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".
• Списки определений(Definition 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" на ссылку или кнопку для переключения выпадающего меню.

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

Если страница для пользователя не видима (например, когда вкладка, содержащая карусель неактивна или окно браузера свёрнуто и т.д.), то карусель не будет осуществлять смену слайдов. 

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

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

Bootstrap (Twitter Bootstrap) (часть 2)