tutoriale CSS

bootstrap tutorials kurs

Frameworki CSS – Bootstrap

Twitter Bootstrap jest obecnie jedną z popularniejszych na świecie bibliotek (frameworków) CSS. Znajdziecie w nim wiele gotowych już rozwiązań, modułów dzięki którym można przyspieszyć pracę nad budową nowej strony internetowej. W wielu przypadkach przyspiesza stworzenie strony nawet o kilka dni, ale co najważniejsze korzystanie z gotowej biblioteki standaryzuje nasze strony wszystko ma więc swoje miejsce. W efekcie kod jest nie tylko bardziej przejrzysty jest też łatwiejszy w późniejszej modyfikacji i rozbudowie. .

W skład biblioteki Bootstrap wchodzi wiele elementów oczywiście główną jej część stanowią pliki CSS poza nimi dostępne są również skrypty JS (JavaScript – oparte o jquery) oraz zbiór fontów. Pliki CSS dostępne są w kilku różnych formatach poza standardową wersją np. jako less lub sass. Na dzień dzisiejszy na stronie projektu http://getbootstrap.com/ dostępna jest wersja 3.3.6 jednak już wkrótce oficjalną wersją będzie Bootstrap 4.

Dosyć istotną zasadą pracy z Bootstrapem jest to, że nie należy ingerować w samą bibliotekę – nie edytujemy domyślnych plików. Wszystkie zmiany wprowadzamy w osobnym pliku najlepiej poprzez dodanie nowej klasy lub id nadpisując ustawienia Bootstrap np. w style.css. W ten sposób w przyszłości można sobie zaoszczędzić dużo pracy.

Do czego nam Bootastrap?

  • Zawiera gotowe rozwiązanie RWD (responsive design)
  • Nie trzeba samodzielnie ustawiać wszystkich pól, elementów na stronie (np. formularzy, przycisków)
  • Posiada już wbudowane funkcje takie jak: taby, karuzela (slider)
  • jednym słowem ułatwia pracę nad stroną

Instalacja (dodanie do strony) Bootstrapa

Instalacja dodanie do strony Bootstrapa jest bardzo proste. Poniżej zamieściłam prosty kod strony pozbawiony większości elementów jednak rozszerzony o bibliotekę Bootstrap.

W najbliższych wpisach postaram się przybliżyć tematykę tej biblioteki.

Przygotowane lekcje:

Rusztowanie Szablonu czyli Bootstrap Grid System

Frameworki CSS – Bootstrap

Tabele w Bootstrap

Etykiety w – Bootstrap (Badges and Labels)

Tworzenie prostych Tabs i Pills z użyciem Bootstrap i jQuery

Tworzenie Tooltips z wykorzystaniem Bootstrap

Pasek postępu – Bootstrap Progress bars

Bootstrap 3 Glyphicons – dostępne ikony

Przyciski w Bootstrap (Buttons)

Grupy przycisków Bootstrap – Button groups

dodatkowe tagi:
bootstrap instalacja
bootstrap pl

Sześciokąty rozmieszczone obok siebie CSS

Jakiś czas temu odwiedziłam stronę, której autor umieściła swoje portfolio w postaci sześciokątów (hexagonu) czyli kilku sześciokątów. Zrobiło to na mnie dość spore wrażenie jednak znalezienie rozwiązania zajeło mnie chwilę. Czytaj dalej