10 najczęstszych błędów Bootstrap popełnianych przez programistów

Na pierwszy rzut oka Bootstrap wydaje się dość prosty. I rzeczywiście, rozpoczęcie korzystania z Bootstrapa nie jest trudne. Istnieje bardzo dobrze napisana dokumentacja Bootstrap z wieloma przykładami kodu HTML, CSS i JavaScript. Wspomniano tam większość ważnych pułapek, ale niektóre błędy są dość subtelne lub mają niejednoznaczne przyczyny. Ponieważ Bootstrap wygląda na bardzo prosty i łatwy w użyciu, wielu programistów pędzi do frameworka, więc zdarzają się błędy.

Przyjrzymy się 10 najczęstszym błędom, problemom i nieporozumieniom związanym z Bootstrapem, gdy programiści zaczynają go używać.

Powszechny błąd Bootstrap nr 1: Podstawowe nieporozumienia dotyczące frameworka

Istnieje kilka podstawowych nieporozumień dotyczących frameworka Bootstrap, które mają ludzie. Może to wynikać z tego, że nie jest to wyraźnie reklamowane na stronie Bootstrap lub dlatego, że ludzie nie poświęcają wystarczająco dużo czasu na przeczytanie dokumentacji. Faktem jest, że czasami programiści kończą w kącie, robiąc coś źle, a następnie obwiniają framework. Wyjaśnijmy więc kilka podstawowych faktów.

Bootstrap jest obszerny, ale nie jest ani ogromny, ani ogromny. Bootstrap jest dostarczany w pakiecie z podstawowymi szablonami projektów HTML i CSS, które zawierają wiele popularnych składników interfejsu użytkownika. Obejmują one typografię, tabele, formularze, przyciski, glify, listy rozwijane, przyciski i grupy wejściowe, nawigację, paginację, etykiety i odznaki, alerty, paski postępu, mody, zakładki, akordeony, karuzele i wiele innych. Możesz wybrać i wybrać kilka z nich, a dzięki domyślnej konfiguracji szybko wygenerować interfejs użytkownika, który obsługuje wiele przeglądarek, urządzeń i rozdzielczości w ładnym formacie.

Bootstrap nie zrobi za Ciebie wszystkiego, ale zapewnia zestaw rozsądnych wartości domyślnych do wyboru i pomoże programistom skoncentrować się bardziej na pracy programistycznej niż na projektowaniu, a także pomoże im w szybkim uruchomieniu dobrze wyglądającej strony internetowej. Pozwala na szybkie prototypowanie, ale nie ogranicza programistów w drodze.

Jest na tyle rozszerzalny, że każdy może go dostosować do swoich potrzeb. Na początku Bootstrap miał pewne ograniczenia, a wtedy rozszerzenie domyślnych stylów było skomplikowane. Jednak wraz z dojrzewaniem struktury poprawiła się również rozszerzalność.

Powszechny błąd Bootstrap nr 2: myślenie, że nie musisz znać CSS, aby używać Bootstrap i że nie potrzebujesz projektanta

Jeśli myślisz, że jeśli używasz Bootstrapa, nie musisz znać CSS, to bardzo się mylisz. Każdy programista front-end musi nauczyć się CSS i HTML5. Bootstrap usuwa wiele trudnych części CSS z ramion programistów (takich jak prefiksy specyficzne dla dostawców) i oferuje podstawowe domyślne style, ale nadal musisz zrozumieć CSS. Nie musisz wiedzieć, jak działają zapytania o media, ale musisz zrozumieć, jak działa projektowanie responsywne. Bootstrap nie ma na celu nauczenia Cię CSS, ale może Ci pomóc, jeśli chcesz. Badanie kodu źródłowego w LESS lub SASS to świetny punkt wyjścia.

W podobnym temacie nie musisz być projektantem i możesz argumentować, że nie potrzebujesz projektanta z Bootstrapem. Jeśli jednak to możliwe, skorzystaj z pomocy projektanta. Częstym zarzutem wobec Bootstrap jest to, że wszystkie strony Bootstrap wyglądają podobnie i łatwo jest otrzymać stronę, która wygląda jak każda inna strona Bootstrap. Ale to nie musi być prawda. Dzięki Bootstrap budowane są miliony stron internetowych. Świetne przykłady tego, jak można osiągnąć różne projekty, można znaleźć na Bootstrap Expo, które gromadzi witryny zbudowane za pomocą Bootstrap. Spójrz, zainspiruj się i zacznij tworzyć własną odmianę projektu.

Częsty błąd Bootstrap #3: Zmiana pliku CSS Bootstrap

Aby było to jasne i proste: Nie modyfikuj pliku bootstrap.css .

Jeśli wprowadzisz zmiany w pliku bootstrap.css , sprawy bardzo szybko się skomplikują. Cały projekt zepsuje się, gdy będziesz chciał uaktualnić pliki Bootstrap. Możesz nadpisać w swoim arkuszu stylów domyślne kolory bootstrap, style, marginesy, dopełnienia, wszystko. W ogóle nie ma potrzeby dotykania arkusza stylów bootstrap.css .

Nie znasz LESS lub SASS? Nie ma problemu, możesz stworzyć swój własny plik CSS i nadpisać co tylko chcesz z oryginalnego arkusza stylów bootstrap.css . Tak jak wspomnieliśmy w poprzednim błędzie, znajomość CSS jest obowiązkowa. Utwórz nowy selektor CSS, użyj go w kodzie HTML i tak długo, jak zadeklarujesz swoje klasy CSS po stylach Bootstrap, Twoje definicje zastąpią domyślne ustawienia Bootstrap.

Nadal chcesz wiedzieć więcej i zanurkować głębiej? Gorąco sugeruję i zachęcam do tego. Użyj kodu źródłowego Bootstrap LESS. Lepiej zrozumiesz, co się dzieje i gdzie jest co, jeśli używasz źródła LESS, a nie statycznego CSS.

Częsty błąd Bootstrap nr 4: Korzystanie ze wszystkiego, co oferuje Bootstrap

Jak wspomniano wcześniej, Bootstrap jest wszechstronny. Oferuje wiele komponentów interfejsu użytkownika, szablonów projektów HTML i CSS oraz wtyczek JavaScript. Ale proszę, bądź selektywny. Nie musisz korzystać ze wszystkich funkcji Bootstrapa.

Dotyczy to zwłaszcza wtyczek. Wybieraj tylko te wtyczki, które mają sens i nie używaj wszystkiego, ponieważ wygląda ładnie i fajnie. Twoja strona internetowa może być łatwo przesadzona. Zastanów się na początek, że nie dołączasz w ogóle pliku bootstrap.js i tworzysz witrynę używając tylko zwykłego HTML i CSS. A następnie dodawaj komponenty tylko w razie potrzeby dla określonych ról, jeden po drugim.

Częsty błąd Bootstrap nr 5: Niewłaściwe użycie monitu modalnego

Tryby Bootstrap oferują elastyczne monity dialogowe z minimalną wymaganą funkcjonalnością i są wyposażone w inteligentne ustawienia domyślne. Chociaż modalny jest łatwy w użyciu i oferuje bogate możliwości dostosowywania, jest kilka rzeczy, o których musimy pamiętać, aby uniknąć typowych nadużyć.

Wyświetlanie więcej niż jednego monitu modalnego jednocześnie

Bootstrap nie obsługuje nakładających się modów. W danym momencie może być widoczny tylko jeden modalny. Można wyświetlić więcej niż jeden modalny na raz, ale wymaga napisania niestandardowego kodu, aby obsłużyć to poprawnie.

Bootstrap modal pojawia się pod tłem

Jeśli kontener modalny lub jego element nadrzędny ma stałą lub względną pozycję, modalny nie będzie wyświetlany poprawnie. Zawsze upewnij się, że kontener modalny i jego elementy nadrzędne nie mają zastosowanego specjalnego pozycjonowania. Najlepszą praktyką jest umieszczenie kodu HTML modalu tuż przed zamykającym </body> lub jeszcze lepiej na najwyższym poziomie w dokumencie, tuż za otwierającym <body> . Jest to najlepszy sposób na uniknięcie innych elementów wpływających na wygląd i funkcjonalność modalu.

Modalne na urządzeniach mobilnych

Istnieją pewne zastrzeżenia, o których programiści muszą pamiętać, gdy mają do czynienia z modami na urządzeniach mobilnych z wirtualną klawiaturą. Dotyczy to zwłaszcza urządzeń z systemem iOS, w których występuje błąd renderowania, który nie aktualizuje pozycji stałych elementów po uruchomieniu klawiatury wirtualnej. Nie jest to obsługiwane przez Bootstrap, więc to od programisty zależy, czy poradzi sobie z tymi sytuacjami w kodzie w najlepszy sposób dla danej aplikacji.

Częsty błąd Bootstrap #6: Problem z komponentem przycisku wprowadzania pliku

Bootstrap nie ma wyznaczonego komponentu dla przycisku przesyłania pliku. Proste i eleganckie rozwiązanie wykorzystujące tylko HTML i CSS można uzyskać za pomocą następującego przykładowego kodu:

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

Istnieje wiele przykładów, jak uzyskać podobny efekt. Ten przykład kodu został zapożyczony od Cory'ego LaViska, a na jego stronie można przeczytać bardziej szczegółowe wyjaśnienie tego problemu. Istnieje również rozszerzony przykład z większą funkcjonalnością, który wykorzystuje dodatkowy kod JavaScript.

Częsty błąd Bootstrap nr 7: Nadmierna komplikacja w JavaScript i ignorowanie atrybutów „data-”

Projektanci lub po prostu początkujący programiści JavaScript mogą bardzo łatwo zagłębić się w tworzenie stron internetowych i tworzyć strony internetowe przy użyciu tylko HTML, CSS i Bootstrap. Jeśli nie są zbyt dobrzy w kodowaniu, mogą wpaść w pułapkę niewłaściwego używania JavaScriptu lub po prostu nadmiernego komplikowania. Ważne jest, aby stwierdzić, że wszystkie wtyczki Bootstrap mogą być używane wyłącznie za pośrednictwem interfejsu API znaczników, bez pisania ani jednej linii kodu JavaScript. Jest to pierwszorzędny interfejs API Bootstrap i powinien być Twoim pierwszym wyborem podczas korzystania z wtyczek.

Na przykład, możemy aktywować modalne okno dialogowe bez pisania kodu JavaScript, po prostu ustawiając data-toggle="modal" na elemencie kontrolera, takim jak przycisk lub kotwica, i przekazać dodatkowe parametry za pomocą atrybutów data- . W poniższym kodzie kierujemy kod HTML o identyfikatorze #myModal . Określiliśmy, że modalny nie zostanie zamknięty, gdy użytkownik kliknie poza modalnym za pomocą opcji data-backdrop , i wyłączyliśmy zdarzenie klawisza escape, które zamyka modalny z opcją data-keyboard . Wszystko w jednej linii kodu HTML:

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

Częsty błąd Bootstrap nr 8: Ignorowanie narzędzi ułatwiających tworzenie Bootstrap

Błędy się zdarzają, a każdy programista robi je od czasu do czasu. Jest to nieuniknione, ale ważne jest, jak radzisz sobie z błędem. Zespół Bootstrap zauważył, oglądając tracker problemów, że ludzie częściej popełniają błędy. Dlatego starali się zautomatyzować proces rozwoju. Rezultatem jest Bootlint, narzędzie do lintingu HTML dla projektów Bootstrap. Bootlint może być używany w przeglądarce lub z wiersza poleceń za pośrednictwem Node.js i automatycznie sprawdza strony Bootstrapped pod kątem wielu typowych błędów w użyciu Bootstrap. Dodanie Bootlinta do swojego łańcucha narzędzi do tworzenia stron internetowych może wyeliminować wiele typowych błędów, które zwykle spowalniają rozwój projektu.

Jeśli chcesz przyczynić się do projektu Bootstrap, warto sprawdzić Rorschach. Rorschach to bot do sprawdzania poprawności żądania ściągnięcia typu Bootstrap, który przeprowadza kilka kontroli przy każdym nowym żądaniu ściągnięcia. Jeśli kontrola poprawności nie powiedzie się, pozostawia komentarz informacyjny do żądania ściągnięcia wyjaśniający błąd i sposób jego naprawy, a następnie zamyka żądanie ściągnięcia.

Częsty błąd Bootstrap nr 9: problemy z niekompatybilnością IE8 i starszych przeglądarek

Bootstrap został stworzony, aby działać jak najlepiej w najnowszych przeglądarkach stacjonarnych i mobilnych. Starsze przeglądarki mogą wyświetlać komponenty i elementy w innym stylu, ale wszystko powinno być w pełni funkcjonalne. Wsparcie obejmuje Internet Explorer 8 i 9, z ważną informacją, że niektóre właściwości CSS3 i elementy HTML5 nie są w pełni obsługiwane przez te przeglądarki.

Aby uzyskać pełne wsparcie dla Internet Explorera 8 i innych starszych przeglądarek, musisz użyć polyfill dla CSS3 Media Queries Respond.js, podkładki HTML 5, która umożliwia korzystanie z elementów HTML5, oraz odpowiedniego tagu IE <meta> w nagłówku HTML, aby upewnij się, że IE nie działa w trybie zgodności. Twój nagłówek HTML na końcu powinien wyglądać mniej więcej tak:

 <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>

W przypadku Respond.js , uważaj na następujące zastrzeżenia w środowiskach programistycznych i produkcyjnych.

Częsty błąd Bootstrap nr 10: ignorowanie najlepszych praktyk

Jednym z typowych pytań na temat przepełnienia stosu jest to, jak sprawić, by menu Bootstraps otwierało się po najechaniu myszą, a nie po kliknięciu. Chociaż rozwiązanie tego problemu nie jest skomplikowane i można je wykonać tylko za pomocą CSS, nie jest to zalecane. Ta funkcja została celowo pominięta w strukturze i jest to decyzja projektowa podjęta przez zespół programistów. Znowu można to zrobić, ale trzeba zrozumieć konsekwencje i zrozumieć, że istnieją najlepsze praktyki, szczególnie w przypadku frameworków mobile first. Uzasadnieniem tego konkretnego problemu jest to, że tworzenie rzeczy do pracy na najechaniu nie pomaga użytkownikom, którzy mają urządzenia dotykowe. Na takich urządzeniach nie ma zawisu, a jedynie dotykowe zdarzenia. W związku z tym nie będzie to działać poprawnie na żadnych urządzeniach obsługujących dotyk.

Podsumowanie błędów Bootstrap

Mam nadzieję, że ten krótki przewodnik po Bootstrap pomoże ci uniknąć niektórych typowych błędów, wyjaśni zwykłe błędne przekonania i pomoże w zdobyciu większości frameworka. Pamiętaj, że Bootstrap nie jest dla wszystkich ani nie nadaje się do każdego projektu. Wybierając framework, musisz poświęcić trochę czasu na przeczytanie dokumentacji i poświęcić trochę czasu na zabawę z frameworkiem, aby uzyskać lepsze zrozumienie i obraz tego, jak to działa. Dotyczy to również Bootstrapa.

Przeczytaj dokumentację, baw się i eksperymentuj z próbkami, zdobądź podstawy i ciesz się tworzeniem nowych, pięknych projektów.