Bootstrap i jego praktyczne zastosowanie w tworzeniu stron.

Zgodnie z moją ostatnią obietnicą kontynuujemy zgłębianie tajników dotyczących Bootstrap - a. Jak już wspominałam w Dlaczego Bootstrap jest najlepszy w tworzeniu stron internetowych? ten framework jest bardzo ceniony przez programistów.

strona internetowa

Krótko o Bootstrap - ie

Bootstrap to sama esencja najczęściej używanych funkcji HTML co sprawia że podczas korzystania z niego masz wszystko pod ręką, w jednym miejscu. Framework został również wyposażony w językowy skrypt programowania JavaScript którego głównym celem jest kierowanie elementami mającymi charakter interaktywny.

W skład Bootstrapa wchodzi między innymi Grid system. Zapewni Ci on pewnego rodzaju „rusztowanie”, które sprawnie pogrupuje elementy Twojej strony. Pogrupowane elementy występują w formie kolumn co daje Ci pewność profesjonalnego uporządkowania materiałów.

Bootstrap wyposażony jest również w klasę „container”, która z góry ma zdefiniowaną szerokość oraz marginesy po obu stronach. Pamiętasz, w artykule: Dlaczego Bootstrap jest najlepszy w tworzeniu stron internetowych? wspólnie pobraliśmy paczkę Bootstrapa. Musisz nastawić się na to, że w zależności od szerokości Twojego ekranu będzie on miał automatycznie nadaną różną szerokość.

A co dalej z kolumnami?

Wszystkie kolumny które powstaną będziesz umieszczać w klasie „row”. Kolumn nie jest dużo, zaledwie 12 więc jestem przekonana, że spokojnie się w tym wszystkim połapiesz.

Pamiętaj, że musisz zdefiniować kolumnę. Nie jest to nic trudnego, wystarczy, że nadasz klasę danemu DIVowi czyli: (col-x-y), gdzie x – rozmiar urządzenia oraz y – ilość kolumn.

O tym nie możesz zapomnieć – klasy definiujące szerokość:

Jeżeli chcesz aby Twoja strona, Twoje kolumny pokazywały się jako 12 kolumn na dużym ekranie, nie ma problemu. Prostą metodą jest wpisanie odpowiednich wzorów:

  • lg>1200px - standardowe (jak na ten moment) monitory – dla sporych rozdzielczości, nasza strona będzie miała 12 kolumn
  • md>=992px - małe netbooki
  • sm>=768px – tablety
  • xs<768px urz="" dzenia="" mobilne="" np="" smartfon="" b="">

Bootstrap jest bardzo przyjazny nie tylko dla nas, ale również dla klas i znaczników. Przygotowałam dla Ciebie listę tych, które prawdopodobnie będą dla Ciebie niezbędne. Pamiętaj, że strona internetowa nie może być nudna, ma przyciągnąć każdego czytelnika, nawet tego który wszedł na nią przypadkiem.

  • Klasa „lead” przypisujemy ją paragrafowi < p > jej funkcją jest nadanie paragrafowi odpowiedniego efektu. Preferowanym wynikiem jest powiększenie paragrafu.
  • < mark > jeden z moich ulubionych znaczników, podświetla tekst, który jest objęty tym właśnie znacznikiem. Efekt jest wyraźny, nie ma nic lepszego w stronie internetowej jak wyróżnienie jakiegoś konkretnego tekstu.
  • < u > czyli podkreślenie tekstu. Uwierz mi, jeżeli ktoś wchodzi na stronę pierwsze co rzuca mu się w oczy to wyróżnione elementy tekstu. Jest to dla niego pewnego rodzaju nawigacja, która sprawia że porusza się on po stronie z łatwością jak również szybciej może znaleźć potrzebne mu informacje.
  • „.text-leftcenterlright” - wyrównuje nam tekst do lewej, prawej bądź go centruje. Od razu rzuci Ci się w oczy to, że wcześniej, aby uzyskać efekt wpisywałeś to wszystko w CSS. Musiałeś używać selektora paragrafu i dopiero później zajmowałeś się dalszymi ustawieniami.Używając Bootstrapa, paragraf od razu dostaje klasę, która została już zdefiniowana przez twórcę Bootstrapa. Jak widzisz wszystko robione jest za Ciebie, nie musisz już wszystkiego po kolei wpisywać w CSS. Oszczędzasz zatem sporo czasu, możesz poświęcić więcej uwagi innym ważnym elementom Twojej strony.
  • < address > - używany do prezentacji danych firmowych/kontaktowych. Ważne jest aby strona zawierała takie informacje, dzięki temu nie będzie ona anonimowa i z łatwością będzie można skontaktować się z pożądaną osobą. Jedyne o czym jeszcze musisz pamiętać to oddzielanie w tym znaczniku każdej linii znacznikiem < br >.

Sprawne operowanie Bootstrapem jest również możliwe dzięki dokładnej znajomości klas. Dziś poznasz dwie podstawowe. Pierwszą z nich jest:

  • „.table-striped” - nadaje naszej tabeli efekt „zebry” czyli co wiersz masz inny kolor backgroundu. Bardzo przydatne rozwiązanie.

Kolejną klasą jest klasa:

  • „.table-hover”- po najechaniu na wiersz zmienia nam się background -color

Udało mi się również dowiedzieć, że do poszczególnych wierszy możesz bez problemu dopisać klasy. Wystarczy, że do znacznika < tr > dodasz jedną z poniżej wymienionych klas:

  • „,success” - zmienia nam kolor wiersza na zielony
  • „.warning” - kolor żółty
  • „.danger” - kolor czerwony

Jak stworzyć przycisk który znajdzie się na stronie internetowej?

Bootstrap przychodzi nam w tym momencie z dużą pomocą i dostajemy dodatkowe klasy. Wyświetlenie przycisku będzie możliwe dzięki znacznikowi < a > lub < btn > oraz następujących klas:

„btn btn-default”

„btn btn-primary”

„btn btn-warning”

To oczywiście nie wszystkie dostępne dla Ciebie klasy. Wiele, wiele innych, spokojnie znajdziecie na stronie http://getbootstrap.com.

Każdemu przyciskowi możemy dodać również odpowiedni rozmiar. Składnia będzie wyglądała następująco: „btn btn-primary btn-lg”.

Dopełnienie strony internetowej?

Oczywiście jest nim obraz. Niektórzy przywiązują się do tekstu inni lubią nacieszyć oko zdjęciem które ściśle jest związane z tematyką strony. Nie wygląda to estetycznie kiedy po prostu wrzucimy obrazek i pozostawimy go samego sobie, warto trochę nad nim popracować.

Bootstrap oferuje nam klasy, których możemy użyć w modyfikacji wyglądu naszego obrazka, np. zaokrąglaj jego rogi.

Przygotowałam dla Ciebie przykładowe klasy z których możesz śmiało skorzystać.

„.img-rounded”

„.img-circle”

„.img-thumbnail”

Oczywiście klasy te dodajemy do znacznika < img > .

Dzięki możliwościom jakie oferuje nam Bootstrap możemy wykonać naprawdę bardzo zaawansowane strony internetowe bez dużego wysiłku i konieczności wymyślania czegoś na własną rękę. Jedno z lepszych rozwiązań na rynku, z całą stanowczością polecam w szczególności jeżeli dopiero rozpoczynasz swoją przygodę z kodowaniem.