#02 – Portfolio – Siatka w Bootstrapie.

Witaj!
Dzisiaj zaczniemy tworzyć portfolio w oparciu o Boostrap.

  • Otwórz program do pisania kodu - ja używam programu Brackets.
  • Utwórzmy teraz nasz kod startowy:
Ważne, aby kod zapisać jako rozszerzenie .html

  • Siatka w  Bootstrapie

System siatki w Bootstrapie jest ogromnym narzędziem wspomagającym projektowanie interfejsu strony internetowej lub aplikacji. Pełna siatka Bootstrapa zawiera 12 kolumn o tej samej szerokości. Jeżeli potrzebujemy mniejszą ilość kolumn wówczas każde 2 sąsiednie kolumny możemy zastąpić większą. Komórki wiersza nie muszą nosić liczb parzystych - wystarczy tylko, że suma wszystkich liczb komórek wynosi 12.

  • Tak wygląda kod czterokolumnowej struktury:
 

  • Przydatne przedziały w siatce
    col-xs -> zastosowanie dla małych ekranów, szerokość mniejsza niż 768px;
    col-sm -> średnie ekrany, szerokość równa 768px i większa;
    col-md -> duże ekrany, szerokość równa 922px i większa;
    col-lg -> bardzo duże ekrany, szerokość od 1200px;

 

Zapraszam serdecznie do śledzenia mnie na:
LinkedIn
Twitter
Github - piotrowinka2410

Instagram
Snapchat - piotrowinka2410
Fanpage na Facebooku 

5 thoughts on “#02 – Portfolio – Siatka w Bootstrapie.

  • Zauważyłem tutaj jedną, dosyć zabawną, rzecz:
    Najpierw mówisz czytelnikom, aby pobrali Bootstrapa i powyciągali pliki, po czym w następnym kroku w kodzie zamieszczasz pliki z CDNów 😀
    Jest jeszcze literówka – “/fons” zamiast “/fonts”

    I to tyle, reszta w porządku.
    Pozdrawiam,
    Krylan

  • Grid bootstrapowy jest fajny, ale w moich projektach podział na 12 części wielokrotnie okazał się niewystarczający. To spowodowało że przesiadlem się na flexboxa. Tylko tutaj trzeba uważać na zgodność ze starszymi przeglądarkami, ale gorąco polecam.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *