Artykuł

getbootstrap.com getbootstrap.com
sty 26 2014
0

Jak szybko stworzyć ładny CSS z frameworkiem Bootstrap

Pracę jako programista .Net zacząłem ponad 5 lat temu i już od samego startu miałem dużą styczność z Asp.Net Web Forms. Od początku irytowała mnie ta technologia, w której głównym założeniem w warstwie frontendu jest budowanie witryny z komponentów, które w ówczesnym czasie mogły się zachowywać odmiennie w różnych przeglądarkach. Jeśli dodać do tego ciężki ViewState oraz ogólną odporność na wszelkiej maści wzorce projektowe, szybko można sobie wykreować wizję niezłego, mało perspektywicznego paszczetu. Z pewnością do takiego wniosku doszedł również Microsoft, który postanowił wypuścić konkurencyjny Asp.Net MVC.

Na temat Asp.Net MVC pisałem na blogu już raz. W moim odczuciu jest to świetne, otwarte rozwiązanie, w którym możemy z powodzeniem zaimplementować wszelkiej maści wzorce projektowe, testy jednostkowe, czy biblioteki zewnętrzne. Szczególnie ten ostatni punkt jest warty podkreślenia. Microsoft w tej materii jest wyjątkowo otwarty i już na starcie w projekcie znajdziecie takie biblioteki jak jQuery, Modernizr, czy też tytułowy Bootstrap. I to właśnie tej ostatniej z nich chciałbym dziś poświęcić kilka akapitów.

Bootstrap - wprowadzenie

Bootstrap powstał w 2010 roku i swoje istnienie zawdzięcza ówczesnym deweloperom pracującym przy Twitterze. Idea tego frameworka jest całkiem prosta i sprowadza się do dostarczenia elastycznych reguł CSS do tworzenia szybkich layoutów. Pewnym uzupełnieniem jest kod JavaScript, dzięki któremu możemy dodać naszym wystylizowanym elementom trochę dynamiki.

CSS przygotowany przez autorów frameworka obejmuje większość znaczników HTML. Cześć z nich, tych bardziej podstawowych, odpowiedzialnych za formatowanie tekstu posiada style przypisane bezpośrednio do konkretnych tagów. Z automatu sformatowane mamy więc np. nagłówki, paragrafy, czy też cytaty. W pozostałych przypadkach musimy zastosować konkretne klasy.

Twórcy Bootstrapa pomyśleli o naprawdę wielu różnych problemach które spadają na webdeveloperów i dostarczyli nam klasy dzięki którym stworzymy praktycznie wszystko, począwszy od ładnych przycisków, poprzez piękne tabele i formularze, aż do całych responsywnych layoutów. Żeby nie być gołosłownym dołączam link do strony, na której znajdziecie sporo gotowych przykładów.

Podpinanie frameworka do strony

W tym przypadku proces wygląda raczej standardowo. Po pobraniu całej paczki, dostajemy archiwum z 4 plikami CSS oraz z 2 plikami JS. W obu przypadkach mamy wersję deweloperską (nieskompresowaną) oraz produkcyjną (skompresowaną) w istocie w danym momencie interesują nas maksymalnie 3 pliki (+ plik JS od jQuery, w przypadku gdy chcemy korzystać ze skryptowej funkcjonalności frameworka).

Dla wersji deweloperskiej wystarczy więc dodać następujące wpisy do sekcji HEAD strony:

<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>

Oczywiście w przypadku wersji produkcyjnej zmieniamy pliki na wersję skompresowaną (min w nazwie). Możliwe jest również użycie repozytoriów CDN (przydatne jeśli Twój provider kasuje za transfer i/lub Twój serwer jest wolny), a także wykorzystanie menadżera pakietów Bower pod Node.js (więcej na ten temat pisał ostatnio Piotr Nalepa).

Na stronie Bootstrap Customize możliwe jest przygotowanie własnej kompilacji frameworka, która będzie zawierać tylko używane przez nas reguły oraz komponenty. Dla osób z większym doświadczeniem przy pracy z tym frameworkiem będzie to z pewnością bardzo przydatna opcja.

Hello World

Poniżej zaprezentuję bardzo prostą stronę w HTMLu, dzięki której będziecie mogli zobaczyć jak w praktyce działają podstawowe style Bootstrapa. Poniższy zrąb kodu będę wykorzystywał również w kolejnych przykładach.

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8" />
		<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>
		<style>
			#main{
				margin: 10px;
			}
		</style>
  	<title>Bootstrap example 1</title>
	</head>
	<body>
		
		<div id="main">
			<h1>Witaj świecie</h1>
			<blockquote>
				<p>Lorem ipsum... Lorem ipsum...</p>
			</blockquote>
		</div>
	</body>
</html>

Jak widać w powyższym listingu, na razie nie zastosowaliśmy żadnej klasy z frameworka. Mimo tego wystarczyło podpięcie Bootstrapa, by zmienić domyślne reguły CSS przeglądarki.

Przykład praktyczny - tabele

Tak jak wspominałem wyżej, większość elementów dostępnych w HTMLu wymaga zastosowania dodatkowych klas Bootstrapa. Nie będę tutaj kopiował całej strony, ponieważ nie ma to żadnego sensu, ale pokaże jak działa stylizowanie w praktyce na podstawie tabel (więcej przykładów znajdziecie tutaj.

Spójrzmy na wyjściowy kod tabeli:

<table>
	<thead>
		<tr>
			<th>Lp.</th>
			<th>Imię i nazwisko</th>
			<th>Wiek</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Jan Kowalski</td>
			<td>24</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Anna Nowak</td>
			<td>25</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Zbigniew Graczyk</td>
			<td>24</td>
		</tr>
	</tbody>
</table>

Jak się pewnie domyślacie, w chwili obecnej nie wygląda ona zbyt zachęcająco, ale z Bootstrapem można to bardzo łatwo zmienić;-)

Pierwsze mocno zauważalne zmiany uzyskamy po dodaniu do znacznika table klasy table:

<table class="table">
...
</table>

Nasza tabela zmieni się nie do poznania. Pojawią marginesy, paddingi, obramowania oraz nowe ustawienia formatowania. To jednak dopiero przedsmak tego co oferuje Bootstrap. Możemy jeszcze dodać kilka innych ciekawych klas (wszystkie dodajemy do znacznika table):

  • table-bordered - dodaje pełne obramowanie tabeli
  • table-striped - umożliwia tworzenie tabel o stylistyce zebry - naprzemienne kolory tła wierszy
  • table-hover - włącza efekt hover dla wiersza nad którym aktualnie znajduje się kursor
  • table-condensed - wyświetla tabelę w postaci skondensowanej - mniejsze paddingi oraz marginesy

Przedstawione powyżej klasy to oczywiście nie jest pełnia możliwości tego co oferuje nam Bootstrap. Opcji jest znacznie więcej, wystarczy tylko spojrzeć w dokumentację na stronie projektu:-)

Przykład praktyczny z JS - zakładki

Zakładki są chyba moim ulubionym widgetem w jQueryUI dlatego też jednym z pierwszym moich testów w przypadku Bootstrapa, był test właśnie tej funkcjonalności. We wcześniejszych przykładach korzystaliśmy tylko z możliwości oferowanych przez CSSową część tego frameworka, teraz spojrzymy również na to, co zyskamy dzięki podpięciu JavaScriptu.

Na początek rozpracujemy kod HTML dla zakładek. W tym przypadku jest to pewnego rodzaju niepisany standard, ponieważ najpierw w liście ul definiujemy nagłówki kart, a następnie za pomocą elementów div określamy ich treść:

<!-- Nagłówki -->
<ul class="nav nav-tabs">
  <li><a href="#tab1" data-toggle="tab">Zakładka 1</a></li>
  <li><a href="#tab2" data-toggle="tab">Zakładka 2</a></li>
  <li><a href="#tab3" data-toggle="tab">Zakładka 3</a></li>
</ul>

<!-- Karty -->
<div class="tab-content">
  <div class="tab-pane active" id="tab1">Lorem Ipsum...</div>
  <div class="tab-pane" id="tab2">...jest tekstem...</div>
  <div class="tab-pane" id="tab3">...stosowanym jako</div>
</div>

W kolejnym kroku należy podpiąć kod JS. Możecie to zrobić albo w sekcji head strony, albo przed końcem znacznika body (oczywiście kod można również z powodzeniem umieścić w zewnętrznym pliku):

<script>
$(document).ready(function(){
	$("#myTab a").click(function (e) {
		e.preventDefault()
		$(this).tab("show")
	});
});
</script>

jQuery jest w tym przypadku bardziej niż wymagane i to nie tylko ze względu na powyższy fragment kodu, ale również ze względu na fakt, że sam Bootstrap z niego korzysta.

Finalny efekt na poniższym obrazku.

Podsumowanie

Bootstrap to w moim odczuciu naprawdę świetny framework, który niskim nakładem pracy umożliwia stworzenie przyjemnie wyglądających witryn oraz web-aplikacji. Oprócz setek reguł CSS, dostarcza on również wiele dodatkowych komponentów graficznych oraz skryptów JS, dzięki którym możemy tworzyć kompletne rozwiązania zarówno dla prywatnych jak i komercyjnych projektów. Dla osób, którym aspekty graficzne nie są do końca po drodze, lub dla tych których ogranicza czas, lub budżet, będzie to niewątpliwie framework z gatunku must have.

Data ostatniej modyfikacji: 26.01.2014, 16:51.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus