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:
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
– zbiór szablonów wykonanych w oparciu o Twitter Bootstrap, w tym efektowne szablony dla paneli administracyjnych
– z ciekawszych usług można polecić builder
– jest również „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.
Opublikowano w 
Tags: 
