Bootstrap tutorial logo

Witajcie, Na niniejszym blogu postaram się przekazać wam tajniki frameworka Twitter Bootstrap który umożliwia szybkie tworzenie estetycznych i co najważniejsze w erze smartfonów, responsywnych stron WWW, które wyglądają dobrze na komputerze, tablecie i komórce. Elementarna wiedza z zakresu HTML i CSS jest mile widziana ale myślę, że nawet kompletny laik szybko zrozumie zasadę działania Bootstrapa. […]

Czytaj!

Jak wiadomo dobry edytor tekstu znacznie ułatwia tworzenie kodu, dzięki skrótom klawiszowym nie musimy wpisywać całych znaczników HTML ani ich ręcznie zamykać. Możemy również „zawinąć” bloki z których obecnie nie korzystamy aby nam nie przeszkadzały w dalszych etapach pracy. Ważne jest także otwieranie wielu kart zamiast wielu edytorów co ułatwia przełączanie się pomiędzy nimi. No […]

Czytaj!

Jak wspomniałem w poprzednim poście, używam Sublime Text 2 i postaram się pokazać kilka jego opcji które znacząco usprawniają pisanie kodu. Tworzenie nowego pliku Nowy plik tworzymy poprzez skrót klawiszowy CTRL + N lub wybieramy zakładkę File -> New File Zapisywanie pliku Plik zapisujemy poprzez kombinację klawiszy CTRL + S lub wybieramy zakładkę File -> Save Otwieranie pliku […]

Czytaj!

Naszą przygodę zaczynamy od pobrania plików niezbędnych do korzystania z Bootstrapa. Przechodzimy na stronę Klik i pobieramy paczkę z ostatnią wersją Bootstrap: Po ściągnięciu, wypakowujemy w wybranym przez siebie miejscu. Struktura wewnątrz folderu powinna wyglądać tak: Kolejnym etapem jest otworzenie naszego edytora tekstu i stworzenie nowego pliku oraz wklejenie do niego podstawowego szablonu Bootstrapa: Tak […]

Czytaj!

W tym poście opiszę budowę rusztowania szablonu czyli elementów, które tworzą szkielet strony i wewnątrz których będziemy zamieszczać inne elementy. Kontener Jak pewnie zauważyliście, większość stron w Internecie nie jest całej szerokości okna przeglądarki a posiada puste miejsca po bokach. Rozwiązanie takie zwiększa czytelność strony i jest standardową praktyką przy tworzeniu stron. Bootstrap oferuje klasę […]

Czytaj!

Gdy chcemy stworzyć tylko jedną kolumnę o szerokości 4 i na dodatek wyśrodkowaną nie musimy tworzyć pustej kolumny z klasą .col-md-4 a następnie kolejnej kolumny albo tworzyć dodatkowych klas CSS. Służy do tego klasa .col-md-offset-*, która tworzy nam margines po lewej o wybranej szerokości. Oczywiście klasa .col-md-offset-* może przyjmować wartości od 1 do 11 i […]

Czytaj!