Szybki kurs Twitter Bootstrap, lekcja numer 5
W dzisiejszym odcinku 2 nowe elementy naszej strony:
- belka górna z formularzem logowania,
- paginator na dole strony.
Belkę umieszczamy przed główną sekcją <div class="container"> w sposób następujący:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="">Twitter Bootstrap</a>
<form class="navbar-form pull-right">
<input type="text" name="login" class="input-medium" placeholder="email" />
<input type="password" name="password" class="input-medium" placeholder="hasło" />
<button type="submit" class="btn btn-primary">Zaloguj</button>
</form>
</div>
</div>
</div>
Sprawę formularzy i przycisków na razie tylko sygnalizuję, więcej na ten temat za jakiś czas.
Paginację umieszczamy jako osobny wiersz siatki:
<div class="row">
<div class="span12">
<div class="pagination pull-right">
<ul>
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
</div>
W efekcie uzyskamy coś takiego:
Cały plik z tą częścią kursu można pobrać tutaj.