10 самых распространенных ошибок Bootstrap, которые допускают разработчики

На первый взгляд Bootstrap кажется довольно простым. И действительно, начать использовать Bootstrap несложно. Существует очень хорошо написанная документация по Bootstrap со множеством примеров кода HTML, CSS и JavaScript. Там упоминается большинство важных подводных камней, но все же некоторые ошибки довольно тонкие или имеют неоднозначные причины. Поскольку Bootstrap выглядит очень простым и удобным в использовании, многие разработчики торопятся освоить фреймворк, и поэтому случаются ошибки.

Мы рассмотрим 10 наиболее распространенных ошибок, проблем и заблуждений Bootstrap, когда разработчики начинают его использовать.

Распространенная ошибка Bootstrap №1: основные заблуждения о фреймворке

Есть несколько основных неверных представлений о фреймворке Bootstrap, которые есть у людей. Это может быть связано с тем, что он не рекламируется на сайте Bootstrap или потому, что люди не уделяют достаточно времени чтению документации. Дело в том, что иногда разработчики оказываются в углу, делая что-то неправильно, а затем обвиняют фреймворк. Итак, давайте проясним некоторые основные факты.

Bootstrap всеобъемлющий, но он не огромный и не громадный. Bootstrap поставляется в комплекте с базовыми шаблонами дизайна HTML и CSS, которые включают в себя множество общих компонентов пользовательского интерфейса. К ним относятся типографика, таблицы, формы, кнопки, глификоны, раскрывающиеся списки, кнопки и группы ввода, навигация, нумерация страниц, ярлыки и значки, оповещения, индикаторы выполнения, модальные окна, вкладки, аккордеоны, карусели и многое другое. Вы можете выбрать несколько из них и с их конфигурацией по умолчанию быстро создать пользовательский интерфейс, который обрабатывает несколько браузеров, устройств и разрешений с хорошим форматом.

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

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

Распространенная ошибка Bootstrap № 2: Думать, что вам не нужно знать CSS, чтобы использовать Bootstrap, и что вам не нужен дизайнер

Если вы думаете, что если вы используете Bootstrap, вам не нужно знать CSS, вы очень ошибаетесь. Любой фронтенд-разработчик должен изучать CSS и HTML5. Bootstrap убирает с плеч разработчиков множество хитрых частей CSS (например, префиксы, специфичные для поставщиков) и предлагает базовые стили по умолчанию, но вам все равно нужно понимать CSS. Вам не нужно знать, как работают медиа-запросы, но вам нужно понимать, как работает адаптивный дизайн. Bootstrap не предназначен для обучения вас CSS, но он может помочь, если вы хотите. Изучение исходного кода в LESS или SASS — отличная отправная точка.

На схожую тему дизайнером быть не надо, и можно возразить, что с Bootstrap дизайнер не нужен. Однако, если возможно, воспользуйтесь помощью дизайнера. Распространенная жалоба на Bootstrap заключается в том, что все сайты Bootstrap выглядят одинаково, и легко получить веб-сайт, который выглядит точно так же, как любой другой сайт Bootstrap. Но это не обязательно должно быть правдой. Миллионы веб-сайтов в Интернете создаются с помощью Bootstrap. Отличные примеры того, как можно реализовать различные дизайны, можно найти на Bootstrap Expo, где собираются сайты, созданные с помощью Bootstrap. Посмотрите, вдохновитесь и начните создавать свой собственный вариант дизайна.

Распространенная ошибка Bootstrap № 3: изменение CSS-файла Bootstrap

Чтобы было просто и понятно: не изменяйте файл bootstrap.css .

Если вы внесете изменения в файл bootstrap.css , все очень быстро усложнится. Весь дизайн сломается, когда вы захотите обновить файлы Bootstrap. Вы можете перезаписать в своей собственной таблице стилей стандартные цвета начальной загрузки, стили, поля, отступы и все остальное. Нет необходимости трогать таблицу стилей bootstrap.css .

Не знаете LESS или SASS? Нет проблем, вы можете создать свой собственный файл CSS и перезаписать все, что хотите, из исходной таблицы стилей bootstrap.css . Как мы упоминали в предыдущей ошибке, знание CSS обязательно. Создайте свой новый селектор CSS, используйте его в HTML, и пока вы объявляете свои классы CSS после стилей Bootstrap, ваши определения перезапишут значения по умолчанию Bootstrap.

Все еще хотите узнать больше и погрузиться глубже? Я настоятельно рекомендую и призываю вас сделать это. Используйте исходный код Bootstrap LESS. Вы лучше поймете, что происходит и где что, если будете использовать исходный код LESS, а не статический CSS.

Распространенная ошибка Bootstrap № 4: Использование всего, что предлагает Bootstrap

Как упоминалось ранее, Bootstrap универсален. Он предлагает множество компонентов пользовательского интерфейса, шаблонов дизайна HTML и CSS и плагинов JavaScript. Но, пожалуйста, будьте избирательны. Вам не нужно использовать все функции Bootstrap.

Особенно это касается плагинов. Выбирайте только те плагины, которые имеют смысл, и не используйте все, потому что это выглядит красиво и круто. Ваш сайт можно легко перестараться. Для начала учтите, что вы вообще не включаете файл bootstrap.js и создаете сайт, используя только HTML и CSS. А затем добавляйте компоненты только по мере необходимости для конкретных ролей, один за другим.

Распространенная ошибка Bootstrap № 5: Неправильное использование модальной подсказки

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

Отображение более одной модальной подсказки одновременно

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

Модальное окно Bootstrap отображается под фоном

Если модальный контейнер или его родительский элемент имеют фиксированное или относительное положение, модальное окно не будет отображаться должным образом. Всегда следите за тем, чтобы к модальному контейнеру и его родительским элементам не применялось какое-либо специальное позиционирование. Лучше всего размещать HTML-код модального окна непосредственно перед закрывающим </body> или, что еще лучше, на верхнем уровне документа сразу после открывающего <body> . Это лучший способ избежать влияния других компонентов на внешний вид и функциональность модального окна.

Модальные на мобильных устройствах

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

Распространенная ошибка начальной загрузки № 6: проблема с компонентом кнопки ввода файла

В Bootstrap нет специального компонента для кнопки загрузки файла. Простое и элегантное решение, использующее только HTML и CSS, может быть реализовано с помощью следующего примера кода:

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>

 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

Есть много примеров того, как получить подобный эффект. Этот пример кода позаимствован у Cory LaViska, и на его сайте вы можете прочитать более подробное объяснение этой проблемы. Существует также расширенный пример с большей функциональностью, в котором используется дополнительный код JavaScript.

Распространенная ошибка Bootstrap № 7: чрезмерное усложнение JavaScript и игнорирование атрибутов «data-»

Дизайнеры или просто начинающие разработчики JavaScript могут очень легко погрузиться в веб-разработку и создавать веб-страницы, используя только HTML, CSS и Bootstrap. Если они не очень хороши в программировании, они могут попасть в ловушку неправильного использования JavaScript или просто чрезмерного усложнения. Важно отметить, что все плагины Bootstrap можно использовать исключительно через API разметки, без написания единой строки JavaScript. Это первоклассный API Bootstrap, и его следует учитывать в первую очередь при использовании плагинов.

Например, мы можем активировать модальный диалог без написания JavaScript, просто установив data-toggle="modal" для элемента контроллера, такого как кнопка или якорь, и передать дополнительные параметры, используя атрибуты data- . В приведенном ниже коде мы ориентируемся на HTML-код с идентификатором #myModal . Мы указали, что модальное окно не будет закрываться, когда пользователь щелкает за пределами модального окна с помощью параметра data-backdrop , и мы отключили событие управляющей клавиши, которое закрывает модальное окно с параметром data-keyboard . Все в одной строке кода HTML:

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

Распространенная ошибка Bootstrap № 8: игнорирование инструментов, упрощающих разработку на Bootstrap

Ошибки случаются, и каждый разработчик время от времени их совершает. Это неизбежно, но важно то, как вы справляетесь с ошибкой. Команда Bootstrap заметила, наблюдая за баг-трекером, что люди чаще совершают какие-то ошибки. Вот почему они пытались автоматизировать процесс разработки. В результате появился Bootlint, инструмент HTML-анализа для проектов Bootstrap. Bootlint можно использовать либо в браузере, либо из командной строки через Node.js, и он автоматически проверит веб-страницы с загрузкой на наличие многих распространенных ошибок использования Bootstrap. Добавление Bootlint в цепочку инструментов веб-разработки может устранить множество распространенных ошибок, которые обычно замедляют разработку проекта.

Если вы хотите внести свой вклад в проект Bootstrap, стоит проверить Роршаха. Rorschach — это бот проверки корректности запросов на вытягивание Bootstrap, который выполняет несколько проверок при каждом новом запросе на вытягивание. Если проверка работоспособности не удалась, он оставляет информативный комментарий к запросу на вытягивание, объясняющий ошибку и способы ее исправления, а затем закрывает запрос на вытягивание.

Распространенная ошибка Bootstrap № 9: проблемы несовместимости IE8 и более старых браузеров

Bootstrap создан для лучшей работы в новейших настольных и мобильных браузерах. Старые браузеры могут отображать компоненты и элементы в другом стиле, но все должно быть полностью функциональным. Поддержка включает Internet Explorer 8 и 9, с важным примечанием, что некоторые свойства CSS3 и элементы HTML5 не полностью поддерживаются этими браузерами.

Чтобы получить полную поддержку Internet Explorer 8 и других старых браузеров, вам необходимо использовать полифилл для CSS3 Media Queries Respond.js, прокладку HTML 5, которая позволяет использовать элементы HTML5, и правильный <meta> IE в заголовке HTML для убедитесь, что IE не работает в режиме совместимости. В итоге ваш HTML-шапка должен выглядеть примерно так:

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

В случае Respond.js остерегайтесь следующих предостережений в средах разработки и производства.

Распространенная ошибка Bootstrap № 10: игнорирование лучших практик

Один из частых вопросов в Stack Overflow — как сделать так, чтобы выпадающее меню Bootstrap открывалось при наведении, а не при щелчке. Хотя решение этого вопроса несложное и может быть выполнено с использованием только CSS, делать это не рекомендуется. Эта функция была намеренно исключена из структуры, и это дизайнерское решение, принятое командой разработчиков. Опять же, это можно сделать, но нужно понимать последствия и понимать, что существуют лучшие практики, особенно для мобильных фреймворков. Причина этой конкретной проблемы заключается в том, что работа при наведении не помогает пользователям с сенсорными устройствами. На таких устройствах нет наведения, только сенсорные события. Таким образом, это не будет работать должным образом на любых сенсорных устройствах.

Заключение об ошибках начальной загрузки

Я надеюсь, что это краткое руководство по Bootstrap поможет вам избежать некоторых распространенных ошибок, развеять обычные заблуждения и получить большую часть фреймворка. Имейте в виду, что Bootstrap подходит не для всех и не для каждого проекта. При выборе фреймворка вам нужно потратить некоторое время на чтение документации, и вам нужно потратить некоторое время на игру с фреймворком, чтобы лучше понять и понять, как он работает. Это справедливо и для Bootstrap.

Прочтите документацию, поиграйте и поэкспериментируйте с образцами, усвойте основы и наслаждайтесь созданием новых красивых дизайнов.