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

1. Распространенная ошибка начальной загрузки # 1: Основные заблуждения о фреймворке
2. Распространенная ошибка Bootstrap # 2: думая, что вам не нужно знать CSS, чтобы использовать Bootstrap,...
3. Распространенная ошибка Bootstrap # 3: Изменение CSS-файла Bootstrap
4. Распространенная ошибка Bootstrap # 4: Использование всего, что предлагает Bootstrap
5. Распространенная ошибка начальной загрузки № 5: неправильное использование модальной подсказки
6. Отображение более одного модального приглашения одновременно
7. Bootstrap модальный появляется под фоном
8. Модал на мобильных устройствах
9. Распространенная ошибка начальной загрузки # 6: проблема с компонентом кнопки ввода файла
10. Распространенная ошибка начальной загрузки № 9: проблемы несовместимости IE8 и более старых браузеров
11. Распространенная ошибка начальной загрузки № 10: игнорирование лучших практик
12. Заключение ошибок Bootstrap

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

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

Распространенная ошибка начальной загрузки # 1: Основные заблуждения о фреймворке

Есть несколько основных заблуждений о Основа начальной загрузки что люди имеют. Это может быть связано с тем, что на сайте 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.

Не знаете, МЕНЬШЕ или 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. А затем добавляйте компоненты только по мере необходимости для конкретных ролей, одну за другой.

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

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

Отображение более одного модального приглашения одновременно

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

Bootstrap модальный появляется под фоном

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

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

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

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

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

<span class = "btn btn-default btn-file"> Просмотр <input type = "file"> </ span> .btn-file {position: относительный; переполнение: скрытое; } .btn-file input [type = file] {position: absolute; верх: 0; справа: 0; минимальная ширина: 100%; минимальная высота: 100%; размер шрифта: 100 пикселей; выравнивание текста: справа; фильтр: альфа (непрозрачность = 0); непрозрачность: 0; контур: нет; фон: белый; курсор: наследовать; дисплей: блок; }

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

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

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

<button type = "button" data-toggle = "modal" data-target = "# myModal" data-фон = "static" data-клавиатура = "false"> запустить мой модальный режим </ button>

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

Если вы хотите внести свой вклад в проект Bootstrap, стоит проверить Роршах , Rorschach - это робот проверки работоспособности запросов на загрузку 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-equ = "X-UA-совместимый" 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 "> </ скрипт> <! [endif] -> </ head>

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

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

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

Заключение ошибок Bootstrap

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

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

Похожие

Комментарии