Przewodnik dla początkujących, jak zbudować responsywną stronę internetową z Bootstrapem – część 1

Ostatnia aktualizacja: 5 czerwca 2019 r.

Ten artykuł ma na celu edukowanie programistów stron internetowych w zakresie korzystania z podstawowych zasad Bootstrap Framework, aby szybko i skutecznie tworzyć responsywne strony internetowe. Zmniejsza to koszty produkcji i umożliwia firmom umożliwienie programistom łatwego zarządzania i tworzenia witryn i stron internetowych. Przejdę przez proces pobierania frameworka Bootstrap i korzyści z używania tego frameworka do tworzenia stron internetowych.

Co to jest Bootstrap?

Według oficjalnej strony Bootstrap (getbootstrap.com), „Bootstrap to najpopularniejszy framework HTML, CSS i JavaScript do tworzenia responsywnych i mobilnych pierwszych projektów w sieci”. Mówiąc prościej, Bootstrap jest wyjątkowo prostym frameworkiem, który pomaga przyspieszyć tworzenie stron internetowych, a także jest atrakcyjny dla programistów o różnym poziomie umiejętności.

Dlaczego warto korzystać z Bootstrapa?

Potencjał projektowania witryn internetowych dla różnych mediów, w tym dużych wyświetlaczy, zwykłych wyświetlaczy, telefonów i tabletów, sprawia, że ​​Bootstrap jest niezwykle atrakcyjny i stanowi mądry wybór do tworzenia treści internetowych. Framework, taki jak Bootstrap, zapewnia ogólną funkcjonalność, którą można łatwo zmienić, aby zoptymalizować witrynę pod kątem różnych funkcji i szybkości reakcji, które nie wymagają stałego kodowania. Krótko mówiąc, jest to jeden z najprostszych sposobów na zbudowanie strony internetowej z możliwością dostosowania, w przeciwieństwie do witryny WordPress.

Jak zacząć

Aby rozpocząć korzystanie z Bootstrap, musisz odwiedzić oficjalną stronę Bootstrap (http://getbootstrap.com/). Bootstrap to projekt open source, który jest hostowany, rozwijany i utrzymywany na GitHub; pozwala to użytkownikom na dostęp do kodu źródłowego i zrozumienie pełnego zakresu frameworka jako narzędzia do budowania stron internetowych.

Istnieją trzy sposoby pobrania aktualnej wersji Bootstrap (v3.3.6): możesz pobrać zgodną wersję Bootstrap, możesz pobrać kod źródłowy Bootstrap i możesz przenieść framework Bootstrap z Less do Sass. W takim przypadku, jeśli jesteś początkującym, sugeruję po prostu pobranie zgodnej wersji Bootstrapa. Jeśli chcesz zintegrować framework Bootstrap w projektach Rails, Compass lub Sass-only, wtedy powinieneś przenieść pobieranie z Less do Sass.

Po pobraniu pliku Boostrap należy rozpakować skompresowany folder, aby zobaczyć strukturę zgodnego frameworka Bootstrap. Spójrz poniżej, aby zobaczyć strukturę plików:

Teraz możesz po prostu wrzucić te pliki do systemu plików dowolnego projektu internetowego, nad którym pracujesz i rozpocząć pracę z Bootstrapem, aby zaprojektować i zbudować żądany projekt. Aby uzyskać więcej informacji na temat funkcjonalności Bootstrap, które omówimy w części 2 tego postu, odwiedź stronę internetową getboostrap.com, aby zobaczyć komponenty, funkcje CSS i funkcje JavaScript, które są dostępne za pomocą frameworka.

Elastyczny projekt

Responsywny projekt jest jedną z charakterystycznych cech frameworka Bootstrap; możliwość rozwijania się w sposób responsywny za pomocą Bootstrap pozwala programistom na stworzenie jednej strony internetowej, która może być odpowiednio sformatowana na wszystkich platformach wyświetlania. Często witrynę można dobrze zaprojektować, a wrażenia użytkownika są optymalne tylko na jednej określonej platformie lub rozmiarze ekranu. Bootstrap wykonuje niesamowitą robotę w walce z tymi problemami, umożliwiając programistom przypisywanie określonych kolumn strony internetowej do określonych rozmiarów podczas czytania na mniejszym ekranie. Podczas tworzenia responsywnych stron internetowych Bootstrap uwzględnia cztery typy urządzeń:

• Dodatkowe małe urządzenia (smartfony <768px)
• Małe urządzenia (tablety >= 768px)
• Średnie urządzenia (komputery stacjonarne >= 992 piks.)
• Duże urządzenia (komputery stacjonarne >= 1200 pikseli)

Deweloper może dodać tagi do powyższych klas, aby ustawić zmniejszanie, rozszerzanie, ukrywanie lub wyświetlanie niektórych treści internetowych na niektórych platformach. Jest to niezwykle pomocne w uproszczeniu procesu budowania wyglądu i stylu witryny.

System siatki

Bootstrap posiada system gridowy, który jest główną funkcją pozwalającą na wykorzystanie frameworka do projektowania responsywnych stron internetowych. Wszystkie wiersze w Bootstrap muszą być umieszczone w klasie kontenera, a następnie kolejne wiersze można zdefiniować jako określone rozmiary.

Oto przykład zapisu dla systemu siatki:

• Predefiniowana klasa wiersza tworzy wiersz
• W tym wierszu druga klasa określa „col-md-6”
• Oznacza to, że klasa tworzy kolumnę, która obejmuje 6 kolumn na stronie internetowej
• „md” określa, że ​​będzie to miało miejsce tylko na średnich urządzeniach lub komputerach stacjonarnych o rozmiarze mniejszym lub równym 768 px.
• Klasa „offset” oznacza, że ​​te kolumny pozostaną puste. W tym przypadku przesunięcie wynosi 3, więc trzy kolumny pozostaną puste, aby uzupełnić część treści.
  Ten system siatki umożliwia programistom szybkie definiowanie sekcji treści i odpowiednie odstępy między treściami, aby uzyskać przejrzysty, responsywny projekt.

Wyzwania z Bootstrapem

Rozmiary plików JavaScript i CSS są duże podczas bezpośredniego pobierania wszystkich plików Bootstrap. Może to prowadzić do pewnych wyzwań podczas tworzenia szybkiej strony. Dzieje się tak, ponieważ wszystkie pliki w plikach Bootstrap nie są w pełni wykorzystywane, co może oznaczać, że pobieranie niepotrzebnych danych może stanowić problem. Może to wpłynąć na wrażenia użytkownika, więc zachęcamy do zapoznania się z tym bardziej szczegółowo, odwiedzając post, Jak korzystać z podstaw Bootstrap w celu zwiększenia komfortu użytkownika (https://moz.com/ugc/how-to-use-bootstrap- podstawy, aby poprawić wrażenia użytkownika).

Mam nadzieję, że wszyscy wypróbujecie Bootstrap, ponieważ jest to fantastyczny framework do tworzenia responsywnych i czystych projektów stron internetowych. Czekajcie na kolejny post z serii, który będzie dotyczył bardziej początkowych koncepcji dotyczących Bootstrap.

Autor: Esme Vazquez, Junior Web Developer

Twórca, artysta, gracz, programista, programista i bloger; Esme jest twórcą ostatniej publikacji blogowej Indiellect na stronie poświęconej zarządzaniu treścią, Medium. Jej obecne doświadczenie obejmuje tworzenie stron internetowych i tworzenie gier; obecnie pracuje i szkoli się w SEO w That! Firma w Leesburgu na Florydzie jako Junior Web Developer. Chce w przyszłości tworzyć gry wideo, które ukazują piękno ludzkości. Jeśli masz jakieś pytania, śmiało pisz do niej na @EsmeVazquez18 i/lub dodaj ją na LinkedIn.