Twitter Bootstrap: tabele, formulare, imagini


Continuăm incursiunea-reclamă pentru Twitter Bootstrap cu alte câteva elemente foarte-foarte comune în mai orice pagină web: tabele, formulare şi imagini. Şi ca să începem cu sfârşitul, vă invit să vedeţi ceea ce mai jos este doar captură dând click aici. Vreţi şi un bonus? Redimensionaţi fereastra cu acea pagină şi observaţi cum elementele se adaptează lăţimii disponibile. Da, fără nici o bătaie de cap toate aceste structuri incluse se vor redimensiona corespunzător, sau vor trece una sub alta când nu mai există lăţimea necesară. Cool!

imagine

Să o luăm rapid la rând câte un element. Desigur, pe scurt. Despre tabele mai întâi (documentaţia oficială): totul porneşte de la a pune clasa table la un tabel şi deja Twitter Bootstrap îl ia sub aripa proprie. Dacă mai adăugam clasa table-bordered vom avea deja linii între toate celulele şi totul încadrat într-un dreptunghi cu colţurile rotunjite – simplu dat de efect. Cu clasa table-hover putem adăuga efectul evidenţierii liniilor la parcurgerea cu mouse-ul deasupra. Cu clasa table-condensed putem avea tabelul, aţi ghicit, mai condensat (nu atâta spaţiu alb pe lângă texte). Dacă vrem să evidenţiem anumite linii, la tagul tr adăugăm clase precum success, error, warning sau info. De exemplu tabelul din captura de mai sus are următorul cod HTML:

<table class="table table-hover table-bordered">
    <thead><tr><td>Nume</td><td>Prenume</td></tr></thead>
    <tbody>
        <tr><td>Ionescu</td><td>Alex</td></tr>
        <tr><td>Popescu</td><td>Marian</td></tr>
        <tr class="success"><td>Anghelescu</td><td>Florin</td></tr>
        <tr><td>Mihăescu</td><td>Dan</td></tr>
    </tbody>
</table>

Acum formularele (documentaţia oficală)… oh formularele! Aranjarea unui formular astfel încât să fie cât de cât aspectuos este uşurată de Twitter Bootstrap. De exemplu clasica aranjare a elementelor formularului cu etichetele în faţă nu cere nici tabele şi nici să scrii tu reguli CSS. Avem de-a gata nişte elemente ajutătoare. Observaţi mai jos că am pus formularului clasa form-horizontal, după care cu control-group am indicat elementele formularului, atât etichetele cât şi câmpurile efective.

<form class="form-horizontal">
<div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
        <input type="text" class="span2" id="inputEmail" placeholder="Email">
    </div>
</div>
<div class="control-group">
    <label class="control-label" for="inputParola">Parola</label>
    <div class="controls">
        <input type="password" class="span2" id="inputParola" placeholder="Parola">
    </div>
</div>
<div class="control-group">
    <div class="controls">
        <button type="submit" class="btn">Identificare</button>
    </div>
</div>
</form>

Ce îmi place mult este posibilitatea de a avea lungimea câmpurilor potrivită structurii grid oferită de Twitter Bootstrap. Astfel e posibil ceea ce mai sus aţi văzut în coloana a treia.

<div class="controls">
  <input class="span4" type="text" placeholder="4col">
</div>
<div class="controls controls-row">
  <input class="span3" type="text" placeholder="3col">
  <input class="span1" type="text" placeholder="1col">
</div>
<div class="controls controls-row">
  <input class="span2" type="text" placeholder="2col">
  <input class="span2" type="text" placeholder="2col">
</div>

Cât priveşte câmpul input cu buton în dreapta, se rezolvă cu un cod precum următorul.

<form>
<div class="input-append">
<input class="span3" id="appendedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Căutare <span class="caret"></span></button>
<ul class="dropdown-menu">
    <li><a href="#">Înlocuire</a></li>
    <li><a href="#">Numărare</a></li>
</ul>
</div>
</div>
</form>

În fine, ajungem şi la imagini (documentaţia oficială). Presupunând că putem imaginile într-o structură grid, ele vor “umple” implicit lăţimea existentă. Şi avem trei “efecte” pe imagini, adăugând clasele img-rounded, img-circle sau img-polaroid.

Mai multe în sursa paginii demonstrative.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *