Twitter Bootstrap: butoane, butoane, butoane


O să îmi permit să mai scriu despre Twitter Bootstrap dintr-un considerent cumva egoist: aşa îl descopăr şi eu mai bine :). Sper însă să fie o reclamă bună, care să prindă la webmasterii ce ar putea fi interesaţi de acest minunat proiect. Iar acum vă propun să vedem ce varietate de butoane arătoase, dar atât de simplu de implementat, ne oferă Bootstrap. Dacă vreţi să vedeţi exemplul live, deschideţi această pagină. Noi în cele ce urmează vom lua pe rând cele ilustrate în captură.

imagine

Şi pentru început să spunem că un buton poate fi implementat atât cu tagul button, cât şi cu tagul a folosit pentru linkuri. Totul e să punem class="btn" şi atunci vom avea un buton. Păi nu am spus eu că e simplu?! Iar dacă vom completa clasa scriind class="btn btn-large" atunci butonul va fi maaare! Aţi ghicit: adăugând btn-small va fi un buton mai mic, iar cu btn-mini va şi fi mai mic! Să vedem codurile pentru transparenţă totală.

<button class="btn btn-large">Mare</button>
<button class="btn">Normal</button>
<button class="btn btn-small">Mic</button>
<button class="btn btn-mini">Mini</button>

Dacă butoanele gri vă plictisesc, avem câteva variante colorate. Indicăm culoarea tot completând în clasă: btn-danger de exemplu va face ca butonul să fie roşu. Dacă mai sus am folosit tagul button, haideţi acum să folosim tagul a.

<a href="http://www.google.ro/" class="btn btn-danger">Google.ro</a>
<a href="http://www.bing.com/" class="btn btn-success">Bing.com</a>
<a href="http://www.duckduckgo.com/" class="btn btn-warning">DuckDuckGo.com</a>
<a href="http://www.yahoo.com/" class="btn btn-primary">Yahoo.com</a>
<a href="http://www.yandex.com/" class="btn btn-info">Yandex.com</a>
<a href="http://www.hotbot.com/" class="btn btn-inverse">HotBot.com</a>

Dacă folosim Bootstrap pentru o aplicaţie mobilă, care să ruleze pe un telefon, s-ar putea să dorim butoanele să umple lăţimea maximă. E foarte simplu: la clasă adăugăm btn-block.

<a href="http://images.google.ro/" class="btn btn-block btn-danger">Google Imagini</a>
<a href="http://maps.google.ro/" class="btn btn-block btn-danger">Google Hărţi</a>
<a href="http://www.youtube.com/" class="btn btn-block btn-danger">Google YouTube</a>

Dar astăzi ne-am obişnuit să vedem butoane cu iconiţe, care fac mai clară utilitatea lor. Este greu de adăugat o iconiţă? Evident că nu. Înaintea textului ce va fi afişat în buton punem <i class="icon-search"></i>. Evident, în loc de icon-search vom pune ce dorim. Avem 140 de opţiuni pe care le găsim aici. Dacă dorim iconiţele să fie desenate cu alb (când fundalul butonului este de culoare închisă) vom mai adăuga icon-white şi gata. În fine, putem avea şi butoane doar cu iconiţă, fără text. Cum? Păi nu punem textul şi gata :). Putem crea  bare de instrumente (toolbar) şi grupuri de iconiţe… dar vedeţi în codul de mai jos, căci e destul de intuitiv.

<a href="http://www.google.ro/" class="btn btn-success"><i class="icon-search"></i> Căutare</a>
<a href="http://www.google.ro/" class="btn btn-inverse"><i class="icon-search icon-white"></i> Căutare</a>
<a href="http://www.google.ro/" class="btn btn-danger btn-large"><i class="icon-download icon-white"></i> Descărcare</a>
<div class="btn-toolbar">
    <div class="btn-group">
        <a class="btn" href="#"><i class="icon-fast-backward"></i></a>
        <a class="btn" href="#"><i class="icon-step-backward"></i></a>
        <a class="btn" href="#"><i class="icon-step-forward"></i></a>
        <a class="btn" href="#"><i class="icon-fast-forward"></i></a>
    </div>
    <div class="btn-group">
        <a class="btn" href="#"><i class="icon-pause"></i></a>
        <a class="btn" href="#"><i class="icon-stop"></i></a>
    </div>
</div>

Dacă tot am vorbit de iconiţe – acum îmi dau seama că aici am părăsit sfera butoanelor – le putem folosi pentru a crea un meniu vertical cu o listă ul.

<ul class="nav nav-list">
    <li class="active"><a href="#"><i class="icon-home icon-white"></i> Start</a></li>
    <li><a href="#"><i class="icon-refresh"></i> Actualizare</a></li>
    <li><a href="#"><i class="icon-edit"></i> Editare</a></li>
    <li><a href="#"><i class="icon-info-sign"></i> Informaţii</a></li>
</ul>

OK. Iertaţi digresiunea de mai sus (nu ţine, repet, de butoane) şi să vedem finalul: butoane care deschid meniuri. Aici evident structurile se complică puţin. În primul rând încadrăm totul într-un div cu clasa btn-group. În primul exemplu (butonul care cere Destinaţia), nu există o acţiune implicită la click decât deschiderea meniului (descris cu o listă ul cu clasa dropdown-menu). În al doilea exemplu nu am mai folosit tagul a ci button (oricare merge) şi aici avem o acţiune (mă rog… putem pune) implicită pentru buton sau deschiderea meniului din săgeata-dreapta din buton. În fine, meniul se poate deschide şi în sus, după cum arată ultimul exemplu. Citiţi codul cu atenţie şi veţi vedea ce uşor e de lucrat cu astfel de butoane.

<div class="btn-group">
  <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="#">Destinaţia?
  <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Franţa</a></li>
    <li><a href="#">Spania</a></li>
    <li><a href="#">Italia</a></li>
    <li class="divider"></li>
    <li><a href="#">Acasă la mama!</a></li>
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-success">Cântă</button>
  <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Dansează</a></li>
    <li><a href="#">Pictează</a></li>
    <li><a href="#">Aleargă</a></li>
    <li class="divider"></li>
    <li><a href="#">Şezi blând!</a></li>
  </ul>
</div>
<div class="btn-group dropup">
  <a href="#" class="btn">Roşu</a>
  <a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-tags"></i> Albastru</a></li>
    <li><a href="#"><i class="icon-inbox"></i> Verde</a></li>
    <li><a href="#"><i class="icon-tint"></i> Galben</a></li>
    <li><a href="#"><i class="icon-asterisk"></i> Maro</a></li>
    <li><a href="#"><i class="icon-gift"></i> Violet</a></li>
  </ul>
</div>

Şi… am încheiat. Interesant, nu? Dacă aţi dorit butoane care să arate bine dar fără să investiţi mult timp, Bootstrap vă ajută. Şi are mult mai mult decât butoane excepţionale.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (6 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

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