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, slidery, ikony, itp. Ogólnie rzecz biorąc framework Bootstrap jest intuicyjny, przejrzysty i posiada wszystkie (lub prawie wszystkie) elementy niezbędne przy tworzeniu stron internetowych. Rozwijany jest przez programistów Twittera. Framework korzysta także z języka JavaScript. Jedną  z największych zalet jest to, że Boostrap wspiera Resposive Web Design – tworzone strony są responsywne.

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. Na szczęście twórcy framweorka 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.

 

Kurs tworzenia strony www opartej o framework Twitter Bootstrap

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-ogolny shcemat
A więc wystarczy dodać następujący kod w nagłówku strony aby uruchomić framework:

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.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 Javascripts.

 

Lista wszystkich komponentów

Nazwa Podgląd
Button groups bootstrap-button-groups
Button dropdowns bootstrap-dropdowns-menu
Navigational tabs bootstrap-tabs
Navbar bootstrap-navbar
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ć Boostrap należy odwiedzić stronę http://twitter.github.com/bootstrap/

Postawowy szkielet szablonu strony html

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

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 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 Boostrap (niestety tylko po angielsku): getbootstrap.com

 

Podsumowanie

Moim zdaniem platforma Boootstrap 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 setki 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!

 

Aktualizacja 5.04.2018:

Lista stron stworzonych przeze mnie opartych o ten framework: maxplus.kalisz.plbioskin-kalisz.plfundacjaprzystan.comrektravel.comshopka.plkreativitaetboerse.de

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