Framework Bootstrap

Czym jest framework Bootstrap? Jest to narzędzie wykorzystujące gotowe rozwiązania HTML i CSS, ułatwiając stworzenie interfejsu graficznego stron www, a także aplikacji internetowych. Zawiera on zestaw różnego rodzaju sformatowanych elementów, np.: teksty, rozwijane menu, formularze, przyciski, tabele, slajdery, ikony. Framework Bootstrap jest intuicyjny, przejrzysty i posiada prawie wszystkie elementy niezbędne przy tworzeniu stron internetowych. Rozwijany jest przez programistów Twittera. Bootstrap korzysta także z języka JavaScript. Jedną  z największych zalet jest to, że Bootstrap wspiera Responsive Web Design.

Bootstrap powstał w 2010 roku dzięki programistom pracującym przy Twitterze. Zadaniem tego frameworka jest dostarczenie elastycznych reguł CSS (kaskadowych arkuszy stylów) do tworzenia layoutów stron w sposób prosty i szybki. Dodatkowo dzięki gotowym skryptom JavaScript możemy dodać do strony wiele ciekawych elementów.

Większość elementów html ma narzucone z góry style (są to nagłówki, paragrafy i cytaty). Aby nałożyć style na pozostałe elementy musimy skorzystać z konkretnych klas. Twórcy frameworka dostarczyli klasy, dzięki którym możemy stworzyć naprawdę wiele elementów, piękne i nowoczesne przyciski, tabele, formularze, paski nawigacyjne, itd.

Dzięki Bootstrap można w szybki i efektywny sposób stworzyć w pełni funkcjonalne, responsywne strony internetowe – dzięki temu strony stworzone w oparciu o ten framework świetnie wyglądają na każdym rodzaju wyświetlacza i na każdym urządzeniu – komputerze, tablecie, czy smartfonie.

Podstawy tworzenia strony www opartej o framework Twitter Bootstrap

Uwaga! Wpis ten dotyczy Bootstrap w wersji 3.

Struktura plików

Do naszej strony www wystarczy podłączyć tylko 2 pliki, aby uruchomić framework – jeden jest arkuszem CSS, a drugi plikiem JavaScript. Możemy wybrać wersję zwykłą lub skompresowaną (zajmuje mniej miejsca, szybciej się wczytuje, ale jest bardzo trudny w edycji). Tak wygląd ogólny schemat:

Bootstrap - ogólny schemat plików


A więc wystarczy dodać następujący kod w nagłówku strony aby uruchomić framework:

<link rel="stylesheet" href="css/bootstrap.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

 

Zawartość

Framework ten posiada praktycznie wszystkie elementy potrzebne twórcy stron internetowych. Dzieli się je na następujące główne kategorie:

Scaffolding

Fundament, na którym opiera się framework. Są tutaj globalne style dla strony, reset domyślnych stylów nadawanych przez przeglądarki (różne przeglądarki nadają odmienne style). Tutaj także znajdują się ustawienia dotyczące systemu Grid Layout (odpowiada on za tworzenie kolumn na stronie).

Bootstrap Grid

Base CSS

Tutaj znajdują się gotowe style dla praktycznie wszystkich elementów HTML. Oprócz nich są zdefiniowane klasy, które zawierają ikony Glyphicons.

Bootstrap Glyphicons

Components

Tutaj znajdują się podstawowe style dla elementów interfejsu strony.

JavaScript Plugins

Tutaj są zdefiniowane wszystkie interaktywne elementy strony, korzystające z języka JavaScript.

Lista wszystkich komponentów

NazwaPodgląd
Button groups
Bootstrap button groups
Button dropdowns
Bootstrap dropdowns menu
Navigational tabs
Bootstrap tabs
Navbar
Bootstrap navbar
Labels
Bootstrap labels
Page headers
Bootstrap headers
Thumbnails
Bootstrap thumbnails
Alerts
Bootstrap alerts
Progress bars
Bootstrap progress
Modals
Bootstrap modal
Dropdowns
Bootstrap button dropdowns
Tooltips
Bootstrap tooltips
Popovers
Bootstrap popovers
Accordion
Bootstrap accordions
Carousel
Bootstrap slider
Typeahead
Bootstrap typeheads

Pobieranie paczki z frameworkiem

Istnieją dwie możliwości pobrania frameworka. Możemy pobrać gotową, pełną wersję z wszystkimi pluginami albo stworzyć wersję spersonalizowaną – tę ostatnią szczególnie polecam doświadczonym użytkownikom.

Aby pobrać Bootstrap należy odwiedzić stronę https://getbootstrap.com/

Postawowy szkielet szablonu strony html

Do pracy z frameworkiem wystarczy podpiąć dwa pliki: arkusz CSS i pluginy JS.

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Szczegółowe informacje jakich klas należy użyć, aby sformatować dane elementy, można znaleźć na oficjalnej stronie Bootstrap.

Podsumowanie

Moim zdaniem platforma Bootstrap to naprawdę świetny framework, który małym nakładem pracy pozwoli na stworzenie efektownie i nowocześnie wyglądających witryn oraz aplikacji internetowych. Dostarcza setek gotowych reguł CSS, komponentów graficznych, skryptów JavaScript, które znacznie ułatwią pracę nie tylko początkującym, ale i zaawansowanym programistom. Zachęcam do zapoznania się z nim!

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close