#42. Bootstrap – krótkie wyjaśnienie

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?

  1. Oszczędzamy czas przy budowaniu strony,
  2. Automatycznie strony stają się responsywne – framework ma już wbudowany grid z uniwersalnymi breakpointami,
  3. Framework cały czas jest rozwijany, więc pojawiają się aktualizację.
  4. 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:

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

bitter-water-0g1pu

bitter-water-0g1pu danielminschinski

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:

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

objective-sea-dfswu

objective-sea-dfswu danielminschinski

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

keen-golick-t2655

keen-golick-t2655 danielminschinski

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 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!