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

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

  • Какие основные этапы создания формы в 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" на ссылку или кнопку для переключения выпадающего меню.
Если вам нужно сохранить ссылки нетронутыми (что полезно, если браузер не позволяет JavaScript), используйте атрибут data-target вместо href="#".
Для вызова dropdown меню с помощью JavaScript, используйте следующий метод

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

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

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

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

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

Рассказать друзьям:

1 коментарі :