Bootstrap – framework
Bootstrap to popularny framework w internecie. Posiada on zestaw przydatnych narzędzi wspomagających tworzenie stron internetowych.
Bazuje głównie na gotowych rozwiązaniach HTML i CSS. Może być stosowany między innymi do stylizacji takich elementów jak teksty, formularze, przyciski , nawigacje, wykresy i wiele innych elementów które są niezbędne na naszych stronach.
Do tej pory pisaliśmy kod, który tworzyliśmy sami od zera. Tak więc warto sobie odpowiedzieć na pytanie – dlaczego warto wybrać Bootstrapa?
- Oszczędzamy czas przy budowaniu strony,
- Automatycznie strony stają się responsywne – framework ma już wbudowany grid z uniwersalnymi breakpointami,
- Framework cały czas jest rozwijany, więc pojawiają się aktualizację.
- Zaletą jest doskonała dokumentacja udostępniona w Internecie.
Przekonasz się, że Bootstrap to porządny framework. Szybko da się zbudować stronę od zera z wykorzystaniem tej technologii.
Style Bootstrapa
Aby rozpocząć pracę z Bootstrapem należy dołączyć jego style CSS do pliku index.html pomiędzy znacznikami head. Aby to zrobić musimy skorzystać ze znacznika:
Skorzystamy z CDN’ów dostępnych w Internecie (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css).
CDN (Content Delivery Network) składa się ze zbioru lokalizacji na świecie, które przekazują lokalnie zawartość serwerów. Optymalizacja z użyciem CDN zazwyczaj przyspiesza wczytywanie stron internetowych.
Zobacz na poniższy przykład w którym stworzyłem prosty przycisk z wykorzystaniem klas Bootstrapa:
Jumbotron
Teraz dowiesz się jak prosto stworzyć jeden z komponentów Bootstrapa. Komponenty to gotowe rozwiązania, które znacznie przyspieszają pracę programistów. Jedynie co trzeba zrobić, to skopiować i wstawić kod w wybrane przez siebie miejsce, żeby cieszyć się z ładnego elementu na stronie internetowej.
Jumbotron to komponent Bootstrapa, który przeważnie jest używany jako element powitalny na stronie. Wystarczy, że stworzysz element div z odpowiednimi klasami. W środku wypadało by dodać nagłówek z paragrafem i przyciskiem. Framework zajmie się odpowiednim stylowaniem za nas.
Spójrz na poniższy przykład. Widać w nim jak został ostylowany przycisk w jumbotronie, dzięki Bootstrapowi:
Układ kolumnowy
Stwórzmy sobie responsywny układ składający się z trzech kolumn. Skorzystamy z tzw. “gridu”, czyli szkieletu, na którym będziemy mogli organizować treści i elementy graficzne strony.
Poniżej kontynuacja przykładu. Przeanalizuj i wykorzystaj go na swoim przykładzie:
Pierwsze koty za płoty z Bootstrapem. Teraz lecimy i wejdziemy w szczegóły elementów frameworka. Z góry zapraszam na środę na kolejny materiał😉 Pozdrawiam😉
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA