[TuT] Twitter Bootstrap

[Gość]

Twitter Bootstrap - Poradnik

 

No to zaczynamy!

Twitter Bootstrap to takie czarodziejstwo, które pozwala nam tworzyć fajniejsze strony wykorzystując wbudowane w niego bajery. Są to na przykład: menu, przyciski, i w ogóle co tylko sobie można wymarzyć, a przy okazji wygląda to całkiem profesjonalnie.

Ten tutorial będzie o wyglądzie Bootstrapa. Prawdopodobnie pojawi się kolejny, w którym pokażę jak posługiwać się javascriptem.

Spis treści:
Część I - Dropdown
Część II - Przyciski

Część III - Nawigacja

Jak to działa?
Używając w kodzie klas które są zdefiniowane i spersonalizowane przez Bootstrap zmienisz wygląd i działanie elementów. Jak dobrze zmodyfikować stronę dowiesz się poniżej

Jak to zainstalować?
Ściągamy:

http://twitter.github.io/bootstrap/assets/bootstrap.zip 

Należy wrzucić zawartość paczki do folderu ze stroną, po czym dodać do kodu:

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

Potrzebna jest też biblioteka jQuery, jeśli już ją dołączyłeś to wyrzuć drugą linijkę kodu.

Przykładowe strony korzystające z Bootstrapa:

http://www.buycraft.net - Sklep do minecrafta
http://www.frostcast.net/banmanagement/ - Zarządzanie banami w MC

Jest wiele innych przykładów.

Przygotowując tutorial posłużyłem się jego oryginalną wersją:

http://twitter.github.io/bootstrap/components.html

Zaznaczam że nie kopiowałem treści z jakichkolwiek serwisów, czy to polskich czy nie, wszystko pisałem sam, oprócz przykładowych kodów,
których treść spolszczałem i modyfikowałem. Screeny zostały zrobione przy tworzeniu tutoriala, użyłem dokładnie tych samych kodów.

[Gość]

Część I - Dropdown

Dropdown, czyli menu:
To coś takiego jak rozwijana lista, w tym przypadku rozwinięta. Co tu dużo mówić, ładnie wyglądająca ramka z elementami menu.

Aby wysunąć nasze menu, będzie trzeba użyć przycisku takiego jak ten:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Pokaż menu</a>

Dobrze będzie też całość umieścić w:

<div class="dropdown">

A teraz wymarzony kod:

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Akcja</a></li>
<li><a tabindex="-1" href="#">Inna Akcja</a></li>
<li><a tabindex="-1" href="#">Coś innego</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Odseparowany link</a></li>
</ul>

Opcje dodatkowe:

Można dowolnie przemieścić menu, używając odpowiednich klas, na przykład .pull-right

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">

Aby zablokować opcję wystarczy dodać klasę .disabled do elementu <li>

<li class="disabled"><a tabindex="-1" href="#">wyłączony link</a></li>

Separator pozwoli oddzielić od siebie elementy menu.

<li class="divider"></li>

Kolejne menu można dodać za pomocą kodu takiego jak ten:

<li class="dropdown-submenu">
 <a tabindex="-1" href="#">Więcej opcji</a>
 <ul class="dropdown-menu">
  ... (tutaj kolejne menu)
 </ul>
</li>

[Gość]

Część II - Przyciski

Każdy wie co to przycisk, nowością jest to że te wyglądają lepiej niż jakiekolwiek inne.
Wielką zaletą jest to, że przyciski po najechaniu zmieniają swój kolor, a po kliknięciu to już w ogóle ful wypas, jak żywe.

Jeden przycisk to element <button> z klasą .btn
Nie zawsze jest to <button>!

<button class="btn">przycisk</button>

Możemy umieścić kilka przycisków w jednej grupie, będą one wtedy ze sobą połączone.
Wystarczy zrobić <div> o klasie .btn-group

<div class="btn-group">
 <button class="btn">Lewy</button>
 <button class="btn">Środkowy</button>
 <button class="btn">Prawy</button>
</div>

Jeśli chcemy umieścić kilka grup na raz, wystarczy użyć klasy .btn-toolbar przed grupami.

<div class="btn-toolbar"> 

Pionowa grupa przycisków też nie stanowi problemu, wystarczy klasa btn-group-vertical

<div class="btn-group btn-group-vertical"> 

Aby zrobić przycisk z menu przyda się przycisk z klasą .dropdown-toggle, jak widać tutaj przyciskiem nie jest <button> lecz <a>. Automatycznie dodała się strzałka oznaczająca że można rozwinąć menu klikając w element.

<div class="btn-group">
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
   Przycisk
   <span class="caret"></span>
 </a>
 <ul class="dropdown-menu">
  <li><a tabindex="-1" href="#">Akcja</a></li>
  <li><a tabindex="-1" href="#">Inna Akcja</a></li>
  <li><a tabindex="-1" href="#">Coś innego</a></li>
 </ul>
</div> 

Wielkości przycisków mogą być różne, są 4 dostępne. Element o klasie .btn można wzbogacić o .btn-large, btn-small btn-mini. Na obrazku drugi od lewej jest przycisk bez określonej wielkości.

<button class="btn btn-large">.btn-large</button>
<button class="btn">.btn</button>
<button class="btn btn-small">.btn-small</button>
<button class="btn btn-mini">.btn-mini</button>

Przycisk z menu, ale rozdzielony:
Można wcisnąć przycisk lub rozwinąć menu.

<div class="btn-group">
  <button class="btn">Przycisk</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    (linki do menu)
  </ul>
</div>

Przycisk z ,,dropup'em'':
To coś takiego jak menu dropdown, tylko że pojawia się powyżej przycisku.

<div class="btn-group dropup">
 <button class="btn">Przycisk dropup</button>
 <button class="btn dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
  (linki do menu)
 </ul>
</div>

[Gość]

Część III - Nawigacja

Ta część poświęcona będzie nawigacji, czyli zakładki, menu i tego typu bajery.

Klasyczne zakładki:
Jest to dość proste, tworzymy przyciski które po naciśnięciu/aktywowaniu mają klasę .active i przez to użytkownik wie że znajduje się na danej podstronie.

<ul class="nav nav-tabs">
	<li class="active"><a href="#">Strona glowna</a></li>
	<li><a href="#">Kontakt</a></li>
	<li><a href="#">Portfolio</a></li>
</ul>

Pills, czyli pigułki
Działanie identyczne, tylko że wygląd inny.

<ul class="nav nav-pills">
	<li class="active"><a href="#">Strona główna</a></li>
	<li><a href="#">Kontakt</a></li>
	<li><a href="#">Portfolio</a></li>
</ul>

 

Zablokowany link tworzymy dodając klasę .disabled

<li class="disabled"><a href="#">Strona Główna</a></li>

Przemieszczanie:
Tak samo jak wcześniej, możemy użyć klasy .pull-left lub .pull-left

Kilka na raz:
Można ,,stackować'' elementy.

<ul class="nav nav-tabs nav-stacked">
	(cała reszta kodu)
</ul>

Przycisk z dropdownem:
Zasada działania jest taka sama jak przy zwykłych przyciskach

<ul class="nav nav-tabs">
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Wysun
			<b class="caret"></b>
		</a>
		<ul class="dropdown-menu">
			(linki)
		</ul>
	</li>
</ul>

Listy:
Zasada działania taka sama, tylko że całość jest pionowa, a wygląd odlotowy.

<ul class="nav nav-list">
	<li class="nav-header">Nagłówek</li>
	<li class="active"><a href="#">Strona główna</a></li>
	<li><a href="#">biblioteka</a></li>
</ul>

Aby oddzielić ze sobą elementy pionowego menu należy użyć klasy .divider

<li class="divider"></li>

Menu z zakładkami:
Tutaj są takie czary że możemy zmieniać sobie treści klikając w przyciski.

<div class="tabbable">
	<ul class="nav nav-tabs">
		<li class="active"><a href="#tab1" data-toggle="tab">Sekcja 1</a></li>
		<li><a href="#tab2" data-toggle="tab">Sekcja 2</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active" id="tab1">
			<p>Witamy w sekcji 1.</p>
		</div>
		<div class="tab-pane" id="tab2">
			<p>Sekcja druga sie klania!.</p>
		</div>
	</div>
</div>

No i klasycznie, jeśli użyjemy tego kodu dodając klasę .nav-pills zamiast .nav-tabs w <ul> uzyskamy efekt pigułek.

 

 

Klasa .disabled uniemożliwia kliknięcie przycisku.

 

Przyciski mogą być umieszczone również poziomo, wystarczy dodać klasę .nav-stacked:

 

Oraz z pigułkami:

 

 

 

Do powyższych kodów w prosty sposób można dodać wyżej wymieniane dropdowny.

 

<ul class="nav nav-tabs">
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Dropdown
			<b class="caret"></b>
		</a>
		<ul class="dropdown-menu">
			
		</ul>
	</li>
</ul>

 

[Makin]

test

[Gość]

Przepisałeś tylko dokumentację po polsku. Nihil novi, proszę nie robić zbiegowiska.