Frameworki CSS – Bootstrap

Na chwilę obecną Twitter Bootstrap jest jednym z popularniejszych frameworków CSS. Nie tylko w naszym kraju, ale także poza nim.

Dlaczego ludzie wybierają Bootstrap?

Swój sukces Bootstrap w dużej mierze zawdzięcza prostocie użytkowania. Posiada też 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.

Co posiada framework Bootstrap?

W skład frameworka 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.

Podobnie jak w przypadku innych frameworków nie należy modyfikować jego elementów bibliotek, czy modułów. W praktyce oznacz to, że niewolo nam edytować plików, które wchodzą w jego skład. Wszystkie zmiany wprowadzamy w osobnym pliku, dodając do niego nowe nie istniejące wcześniej klasy lub id nadpisując ustawienia Bootstrap np. w style.css.

Brak zmian w plikach podstawowych w późniejszym czacie zaswędzi nam dużo nerwów i czasu.

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.

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Tytuł strony z Twitter Bootstrap</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body>

    <!-- Zawartość strony -->

    <script type="text/javascript"
        src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

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

Przygotowane lekcje:

dodatkowe tagi:

  • bootstrap instalacja
  • bootstrap pl

Frameworki CSS – Bootstrap
aurelia

Recent Posts

Mity o marce osobistej, które warto znać

Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…

1 tydzień ago

Jakie zawody zastąpi AI? Czy mamy się czego bać?

Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…

2 tygodnie ago

Widmo Brockenu – co to jest?

Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…

2 miesiące ago

Relikwie: jak zdobywano, sprzedawano i podrabiano święte przedmioty

Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…

2 miesiące ago

Poznaj 6 powodów, dla których warto posiadać logo

Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…

2 miesiące ago

Dlaczego firmy mylą markę osobistą z firmową

Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…

2 miesiące ago