Jeśli nigdy nie słyszałeś o Bootstrap, frameworku opracowanym przez Twittera do tworzenia pięknych stron internetowych, nie możesz tego przegapić! Bootstrap pozwala dość szybko i łatwo zaprojektować stronę internetową bez dużej wiedzy na temat CSS (Cascading Style Sheets). Jeśli dopiero zaczynasz programować w Internecie, nie musisz nic wiedzieć o CSS, aby zacząć uczyć się, jak działa Bootstrap; wystarczy jeden dokument HTML. Przyjrzymy się Bootstrapowi, pokazując, o co w tym wszystkim chodzi, jak działa i czy jest to dobra opcja dla każdej budowanej witryny.
Wstawianie interfejsu API Bootstrap do pliku HTML
Masz kilka opcji wstawiania Bootstrap do głównego pliku projektu. Pierwszą opcją jest wstawienie wszystkich niezbędnych plików Bootstrap do projektu. Możesz to zrobić, pobierając pakiet i przesyłając go do folderu projektu. Będziesz oczywiście musiał połączyć główny plik CSS Bootstrap z dokumentem. Oficjalna strona Bootstrap zawiera przewodnik krok po kroku, jak to zrobić.
Inną opcją jest pominięcie pobierania pakietu i skorzystanie z sieci dostarczania treści (CDN). CDN umożliwia połączenie podstawowych plików Bootstrap z dokumentem HTML bez konieczności pobierania go. To oczywiście nie zawsze jest dobre dla profesjonalnych stron internetowych, ponieważ nie byłbym zbyt szybki, aby zostawić stronę mojej firmy lub portfolio, aby los był zły, gdyby ten serwer kiedykolwiek upadł. Najlepiej mieć pliki w swoim projekcie, ale do celów uczenia się CDN będzie w porządku.
Aby wstawić Bootstrap do dokumentu HTML, wystarczy umieścić następujący kod w pliku
znacznik w dokumencie HTML:Po wstawieniu tych linków do tego tagu głowy, wszystko powinno być ustawione na rozpoczęcie korzystania z klas Bootstrap. Twój dokument powinien wyglądać mniej więcej tak:
Bootstrap i klasy
Elementy Bootstrap są podzielone na klasy, które są tylko zbiorem wcześniej napisanych CSS, które można wstawić do swojego znacznika. Wstawianie klas do znaczników jest łatwe, wystarczy znać nazwę klasy, której chcesz użyć, a następnie zastosować ją do jednego z elementów HTML, używając wartości class = ”classname”, jak omówiono w poprzednim artykule.
Trudność polega na ustaleniu, jak to wszystko działa razem, aby stworzyć coś pięknego. Możesz sprawdzić wszystkie różne klasy dostępne w Bootstrap bezpośrednio z oficjalnej dokumentacji. Teraz opanowanie Bootstrap to inna historia. To nie jest coś, czego my lub ktokolwiek może cię nauczyć. Możesz obejrzeć samouczek po samouczku, ale aby dobrze korzystać z frameworka, zawiera wiele prób i błędów. I to wymaga praktycznego podejścia do własnych projektów.
Mając to na uwadze, proszę Cię o rozpoczęcie własnego projektu HTML na komputerze za pomocą Atom lub innego edytora tekstu, przejrzenie, o co chodzi w klasach HTML i CSS, a następnie rozpoczęcie zabawy z Bootstrap. A jeśli znasz wystarczającą liczbę znaczników, może nawet stwórz własną stronę portfolio jako ćwiczenie testowe.
Czy Bootstrap jest opłacalną opcją dla każdej witryny?
Bootstrap to świetny framework, ale czy jest opłacalną opcją dla każdej tworzonej witryny? To zależy od dewelopera, a także od wymagań projektu. W wielu profesjonalnych środowiskach tak naprawdę nie będziesz mieć wyboru, jakich technologii używasz, ponieważ to w dużej mierze zależy od Project Managera. Jeśli wspomniany Project Manager zdecyduje się na użycie Bootstrap, będziesz go również łączyć z mnóstwem niestandardowych CSS. To właśnie sprawia, że twoja strona internetowa jest wyjątkowa i różni się od innych stron korzystających z Bootstrap.
Ja osobiście nie uważam Bootstrap za świetną opcję dla każdej strony internetowej. Jasne, może pomóc i zapewnić kilka skrótów, ale ostatecznie odkryłem, że projektowanie od podstaw za pomocą CSS jest najlepszą drogą, w dużej mierze ze względu na kontrolę nad nią. Ale jeszcze raz, jeśli dopiero zaczynasz przygodę z programowaniem internetowym, korzystanie z Bootstrap wcale nie jest złe, ale nie polegaj na nim w swojej karierze.
Warto zauważyć, że jeśli jesteś początkującym programistą, nie powinieneś używać Bootstrap dla wszystkich projektów w swoim portfolio. Może się zdarzyć, że możesz biegle posługiwać się interfejsem API, ale nie do końca znasz się na CSS. To powiedziawszy, dobrze jest mieć przyzwoitą mieszankę obu w swoim portfolio (lub nawet wyłącznie CSS, ponieważ łatwo jest pobrać Bootstrap).
Zamknięcie
To wszystko, czym jest Bootstrap w pigułce. Jak wspomniałem wcześniej, zachęcam do rozpoczęcia własnego projektu HTML i dodania kilku różnych klas do elementów, aby rozpocząć zabawę z frameworkiem. Możesz znaleźć wszystkie różne komponenty, które oferuje Bootstrap wraz z objaśnieniami i przykładami kodu tutaj.
Bootstrap to naprawdę fajne narzędzie, ale pamiętaj, aby nie polegać tylko na nim! Dobrze jest się z tym zaznajomić i poznać swoją strukturę, ale upewnij się, że zagłębiłeś się w CSS, aby naprawdę zrozumieć, co dzieje się za kulisami. Nie tylko to, ale solidna znajomość CSS bardzo komplementuje Bootstrap, pozwalając naprawdę tworzyć unikalne i piękne strony internetowe z własnymi dostosowaniami.
