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

Ще разгледаме 10 от най-често срещаните грешки, проблеми и заблуди в Bootstrap, когато разработчиците започнат да го използват.

Често срещана грешка при стартиране # 1: Основни заблуди относно рамката

Има някои основни заблуди относно Bootstrap рамка които хората имат. Това може да се дължи на това, че не се рекламира ясно на сайта Bootstrap или защото хората не отделят достатъчно време за четене на документацията. Факт е, че понякога разработчиците се озовават в ъгъла, като вършат неща погрешно и след това обвиняват рамката. Така че нека изясним някои основни факти.

llc s corp срещу c corp

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 изходен код. Ще разберете по-добре какво се случва и къде е какво, ако използвате по-малко източника, а не статичен CSS.

Често срещана грешка в Bootstrap # 4: Използване на всичко, което Bootstrap предлага

Както вече споменахме, Bootstrap е изчерпателен. Той предлага много UI компоненти, HTML и CSS шаблони за дизайн и приставки за JavaScript. Но моля, бъдете избирателни. Не е нужно да използвате всяка функция на Bootstrap.

Това важи особено за приставки. Избирайте и избирайте само приставки, които имат смисъл, и не използвайте всичко, защото изглежда добре и готино. Вашият уебсайт може лесно да бъде преувеличен. Помислете за начало, което не включвате bootstrap.js файл и създайте сайт, използвайки само обикновен HTML и CSS. И след това добавете компоненти само според нуждите за конкретни роли, един по един.

Често срещана грешка при стартиране # 5: Злоупотреба с модален ред

Bootstrap модалите предлагат гъвкави диалогови подкани с минимално необходимата функционалност и се предлагат с интелигентни настройки по подразбиране. Въпреки че модалът е лесен за използване и предлага богата персонализация, има няколко неща, които трябва да имаме предвид, за да избегнем често срещаните злоупотреби.

Показване на повече от един модален ред в момента

Bootstrap не поддържа припокриващи се модали. Само един модален в момента може да бъде видим. Показването на повече от един модал наведнъж може да бъде постигнато, но изисква да бъде написан персонализиран код, за да се справи с това правилно.

Bootstrap modal се появява под фона

Ако модалният контейнер или неговият родителски елемент има фиксирана или относителна позиция, модалният няма да се покаже правилно. Винаги се уверете, че модалният контейнер и неговите родителски елементи не са приложили специално позициониране. Най-добрата практика е да поставите HTML на модал непосредствено преди затварящия маркер или дори по-добре на позиция от най-високо ниво в документа непосредствено след отварящия маркер. Това е най-добрият начин да се избегнат други компоненти, засягащи външния вид и функционалността на модала.

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

Има някои предупреждения, с които разработчиците трябва да са наясно, когато се занимават с включени модали мобилни устройства с виртуални клавиатури . Това важи особено за iOS устройства , където съществува грешка при изобразяването, която не актуализира позицията на фиксираните елементи при задействане на виртуалната клавиатура. Това не се обработва от Bootstrap, така че от разработчика зависи да се справи с тези ситуации в кода по най-добрия начин за въпросното приложение.

Често срещана грешка при стартиране # 6: Проблем с компонента на бутона за въвеждане на файл

Bootstrap няма определен компонент за бутон за качване на файл. Едно просто и елегантно решение, използващо само HTML и CSS, може да бъде постигнато със следния примерен код:

Browse .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; }

Има много примери за това как да получите подобен ефект. Този пример за код е заимстван от Кори ЛаВиска и на неговия сайт можете да прочетете по-подробно обяснение на този проблем . Има и разширен пример с повече функционалност, който използва допълнителен JavaScript код.

Често срещана грешка при стартиране # 7: Свръхкомплициране с JavaScript и игнориране на атрибутите „data-“

Дизайнерите или просто начинаещи разработчици на JavaScript могат много лесно да се потопят в уеб разработката и да създават уеб страници, използвайки само HTML, CSS и Bootstrap. Ако не са много добри в кодирането, те могат да попаднат в капана на злоупотребата с JavaScript или просто свръхкомплицирането. Важно е да се посочи, че всички Bootstrap плъгини могат да се използват чисто чрез API за маркиране, без писане а една линия на JavaScript. Това е първокласният приложен програмен интерфейс (API) на Bootstrap и трябва да бъде първото ви внимание при използването на приставки.

Например, можем да активираме модален диалогов прозорец, без да пишем JavaScript, само като зададем data-toggle='modal' върху елемент на контролера като бутон или котва и предайте допълнителни параметри, използвайки data- атрибути. В кода по-долу насочваме HTML код с ID #myModal. Посочихме, че модалът няма да се затвори, когато потребителят щракне извън него, като използва data-backdrop опция и деактивирахме събитие за бягство от ключ, което затваря модал с data-keyboard опция. Всичко в един HTML ред код:

Launch my modal

Честа грешка в Bootstrap # 8: Пренебрегване на инструменти, които улесняват развитието на Bootstrap

Грешки се случват и всеки разработчик ги прави от време на време. Това е неизбежно, но е важно как се справяте с грешката. Екипът на 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 и други по-стари браузъри, трябва да използвате polyfill за CSS3 Media Queries Respond.js , HTML 5 подложка което позволява използването на HTML5 елементи и подходящ IEtag в HTML главата, за да се гарантира, че IE не работи в режим на съвместимост. Вашата HTML глава в крайна сметка трябва да изглежда по следния начин:

...

В случай на Respond.js, внимавайте за следното предупреждения в средите за разработка и производство.

Често срещана грешка при стартиране # 10: Пренебрегване на най-добрите практики

Един от често срещаните въпроси за Stack Overflow е как да направите падащото меню на Bootstraps, за да се отваря при нанасяне на курсора на мишката, а не при щракване. Въпреки че решението на този въпрос не е сложно и може да бъде направено само с помощта на CSS, то не се препоръчва. Тази функция беше оставена извън рамката нарочно и това е дизайнерско решение, взето от екипа за разработка. Отново може да се направи, но трябва да се разберат последиците и да се разбере, че съществуват най-добрите практики, особено за мобилните първи рамки. Причините за този конкретен проблем са, че създаването на нещата, които да работят, не помага на потребителите, които имат сензорни устройства. На такива устройства няма зависване, а само докосване на събития. По този начин това няма да работи правилно на устройства с поддръжка на докосване.

Заключение за грешки при стартиране

Надявам се това кратко ръководство за Bootstrap да ви помогне да избегнете някои от често срещаните грешки, да изчистите обичайните заблуди и да ви помогне да получите по-голямата част от рамката. Имайте предвид, че Bootstrap не е подходящ за всеки, нито е подходящ за всеки проект. Когато избирате рамка, трябва да отделите малко време за четене на документацията и да прекарате известно време в игра с рамката, за да получите по-добро усещане и представа за това как работи. Това важи и за Bootstrap.

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