Twitter Bootstrap w pigułce

javascript-html5-tutorial.pl

Październik 4th, 2014

Mr. JavaScript

Twitter Bootstrap (TB) to framework CSS na licencji MIT, tworzony rozwijany przez programistów Twittera. Zawiera zestaw narzędzi ułatwiających tworzenie UI stron oraz aplikacji www. Bazuje głównie na gotowych rozwiązaniach HTML oraz CSS (LESS).

Tutorial Twitter Bootstrap – co i jak

To znakomite rozwiązanie możemy wykorzystywać do stylizacji elementów naszej strony / aplikacji, m.in. efektownych przycisków, formularzy, dialogów, nawigacji i innych (Twitter Bootstrap korzysta także z języka JavaScript).

Ostatnimi czasy, gdy tworzę nowy projekt webowy w PHP, a nie ma jeszcze opracowanego layoutu, szybko podłączam do projektu Twitter Bootstrap, aby programowane funkcje nie tylko działały, ale i dobrze wyglądały.

Praca z takim rozwiązaniem jest przyjemna, spróbujmy zatem szybko zastosować go w praktyce.

Przede wszystkim pobieramy TB ze strony projektu:

http://getbootstrap.com/

I dołączamy pliki do naszego projektu, do strony w HTML5, np.:

/css/bootstrap.min.css
/js/bootstrap.min.js

Możemy także dołączyć dodatkowe pliki, np. bootstrap-theme.min.css dla podstawowego theme, czy też bootstrap-responsive.min.css. To zależy także od wersji TB, z którą pracujemy.

Dodatkowo na stronie dostępne jest narzędzie, które pozwala skonfigurować Twitter Bootstrap, który zamierzamy pobrać:

http://getbootstrap.com/customize/

Jak bogaty jest zestaw oferowanych komponentów, możemy przekonać się tutaj:

http://getbootstrap.com/components/

Generalnie TB jest świetny. To także znakomite rozwiązanie do pracy z RWD.

Pozwala względnie szybko i profesjonalnie opracować layout dla różnych urządzeń. Na przykład mamy na stronie element, którego nie chcemy jednak wyświetlać na urządzeniach mobilnych. Żaden problem! Wystarczy użyć klasy hidden-phone:

<div class="sidebar span4 hidden-phone">Lorem ipsum</div>

Polecane zasoby

Dodatkowe zasoby na temat Twitter Bootstrap:

– niewielki tutorial o budowaniu layoutu w Twitter Bootstrap

http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/

– użycie TB z LESS

http://groupdocs.com/blog/using-bootstrap-with-less-css-tutorial

– świetne rozwiązanie do tworzenia dynamicznych grid’ów

http://gridster.net/

– zbiór szablonów wykonanych w oparciu o Twitter Bootstrap, w tym efektowne szablony dla paneli administracyjnych

http://www.bootstrapzero.com/

– z ciekawszych usług można polecić builder

https://jetstrap.com/

– jest również „Twittstrap”

http://twittstrap.com/twittstrap/

RWD

Skoro już wspomnieliśmy o RWD w TB, to poniżej lista rekomendowanych zasobów, z których i sam korzystałem podczas pracy z RWD.

– artykuł na MDN o flexi boxes

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

– zbiór użytecznych tutoriali o RWD

http://www.hongkiat.com/blog/responsive-web-tutorials/

– nauka RWD

http://learn.shayhowe.com/advanced-html-css/responsive-web-design

– Mobile First Responsive Web Design

http://www.html5rocks.com/en/mobile/responsivedesign/

– tworzenie stron RWD z TB

http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/

Podsumowanie

We współczesnych projektach mile widziane jest podejście RWD i Mobile-first. Twitter bootstrap to pomocne rozwiązanie, dzięki któremu nawet NIE-frontend-developer może dodać dobry layout do projektu.