Botoi-taldeak

Erabili botoi-taldeak hainbat botoi osagai konposatu gisa elkartzeko. Eraiki itzazu elementu <a>edo serie batekin .<button>

Praktika egokiak

Botoien taldeak eta tresna-barrak erabiltzeko jarraibide hauek gomendatzen ditugu:

• Erabili beti elementu bera botoi talde bakarrean, <a>edo <button>.
• Ez nahastu kolore ezberdineko botoiak botoi talde berean.
• Erabili ikonoak testuaz gain edo horren ordez, baina ziurtatu alt eta izenburuaren testua sartu behar denean.

Goitibeherako botoiekin erlazionatutako taldeei (ikus behean) bereizita deitu behar zaie eta beti ere goitibeherako ikurra sartu nahi den portaera adierazteko.

Lehenetsitako adibidea

Hona hemen HTML-ak aingura etiketa-botoiekin eraikitako botoi-talde estandar baten bila:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Tresna-barraren adibidea

Konbinatu multzoak <div class="btn-group">osagai <div class="btn-toolbar">konplexuagoetarako.

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Checkbox eta irrati zaporeak

Botoi-taldeek irrati gisa ere funtziona dezakete, non botoi bakarra aktibo egon daitekeen, edo kontrol-laukiak, edozein botoi aktibo egon daitezkeenetan. Ikusi horretarako Javascript dokumentuak .

Lortu javascript-a »

Goitibeherak botoi-taldeetan

Buruak gora! Goitibeherako botoiak banan-banan bilduta egon behar dira .btn-grouperrendatze .btn-toolbaregokia izateko.

Ikuspegi orokorra eta adibideak

Erabili edozein botoi goitibeherako menu bat abiarazteko, a barruan kokatuz .btn-groupeta menu-marka egokia emanez.

Adibide markaketa

Botoien talde baten antzera, gure markaketak ohiko botoien marka erabiltzen du, baina estiloa fintzeko eta Bootstrap-en goitibeherako jQuery plugina onartzeko gehigarri batzuk ditu.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Ekintza
    <span class = "caret" ></span> 
  </a>
  <ul class = "menua goitibeherako" > 
    <!-- goitibeherako menuaren estekak -->
  </ul>
</div>

Botoien tamaina guztiekin funtzionatzen du

Botoien goitibeharrek edozein tamainatan funtzionatzen dute. zure botoien tamainak .btn-large, .btn-small, edo .btn-mini.

Javascript behar du

Botoien goitibeharrek Bootstrap goitibeherako plugina behar dute funtzionatzeko.

Zenbait kasutan, mugikorrak bezala, goitibeherako menuak bistatik kanpo zabalduko dira. Lerrokatzea eskuz edo javascript pertsonalizatuarekin konpondu behar duzu.

Ikuspegi orokorra eta adibideak

Botoien taldeen estiloak eta markaketa oinarri hartuta, zatitutako botoi bat erraz sor dezakegu. Zatitutako botoiek ekintza estandar bat dute ezkerrean eta goitibeherako hautagailua eskuinaldean, testuinguruko estekekin.

Tamainak

Erabili botoien klase gehigarriak .btn-mini, .btn-small, edo .btn-largetamainarako.

<div class = "btn-group" > 
  ...
  <ul class = "menua goitibeherako tira-eskuinera" > 
    <!-- goitibeherako menuaren estekak -->
  </ul>
</div>

Adibide markaketa

Botoien goitibehitz arruntak zabaltzen ditugu goitibeherako abiarazle gisa funtzionatzen duen bigarren botoiaren ekintza bat eskaintzeko.

<div class = "btn-group" > 
  <button class = "btn" > Ekintza </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menua goitibeherako" > 
    <!-- goitibeherako menuaren estekak -->
  </ul>
</div>

Goitibeherako menuak

Goitibeherako menuak behetik gora ere alda daitezke klase bakar bat gehituz berehalako gurasoari .dropdown-menu. Norantza irauli .careteta menua bera aldatuko du goitik behera egin beharrean behetik gora mugitzeko.

<div class = "btn-group dropup" > 
  <button class = "btn" > Jaregin </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menua goitibeherako" > 
    <!-- goitibeherako menuaren estekak -->
  </ul>
</div>

Oinarrizko klase indartsua

Hemen nabigazio-osagai guztiek (fitxak, pilulak eta zerrendak) oinarrizko marka eta estilo berdinak partekatzen dituzte klasean .nav.

Noiz erabili

Fitxak eta pilulak oso egokiak dira edukien ataletarako edo erlazionatutako edukien orrien artean nabigatzeko.

Osagaien lerrokatzea

Nabigazio estekak lerrokatzeko, erabili .pull-leftedo .pull-righterabilgarritasun klaseak. Bi klaseek CSS flotatzaile bat gehituko dute zehaztutako norabidean.

Oinarrizko fitxak

Hartu <ul>esteka arruntak eta gehitu .nav-tabs:

• Hasiera
• Profila
• Mezuak

<ul class = "nav nav-tabs" > 
  <li class = "aktiboa" > 
    <a href = "#" > Hasiera </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Oinarrizko pilulak

Hartu HTML bera, baina erabili .nav-pillshorren ordez:

• Hasiera
• Profila
• Mezuak

<ul class = "nav nav-pilulak" > 
  <li class = "aktiboa" > 
    <a href = "#" > Hasiera </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Nola pilatu

Fitxak eta pilulak lehenespenez horizontalak direnez, gehitu bigarren klase bat, .nav-stacked, bertikalki pilatuta ager daitezen.

Fitxa pilatuak

• Hasiera
• Profila
• Mezuak

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Pilulak pilatuta

• Hasiera
• Profila
• Mezuak

<ul class = "nav nav-pilulak nav-pilatuta" > 
  ...
</ul>

Menu aberatsak errazak dira

Bootstrap fitxetan eta piluletan goitibeherako menuak oso errazak dira eta HTML gehigarri apur bat eta jQuery plugin arina besterik ez dute behar.

Joan Javascript orrira Bootstrap-en goitibeherako hasierako dokumentuak irakurtzeko .

Goitibeherako fitxak

• Hasiera
• Laguntza
• Goitibehera
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "goiburua" > 
    <a class = "gotibehera-toggle" 
       data-toggle = "gotibehera"
       href = "#" >
        Goitibehera
        <b class = "caret" ></b> 
      </a>
    <ul class = "menua goitibeherako" > 
      <!-- estekak -->
    </ul>
  </li>
</ul>

Goitibeherako pilulak

• Hasiera
• Laguntza
• Goitibehera
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pilulak" > 
  <li class = "goiburua" > 
    <a class = "gotibehera-toggle" 
       data-toggle = "gotibehera"
       href = "#" >
        Goitibehera
        <b class = "caret" ></b> 
      </a>
    <ul class = "menua goitibeherako" > 
      <!-- estekak -->
    </ul>
  </li>
</ul>

Aplikazio estiloko nabigazioa

Nabigazio-zerrendek aukerako goiburuekin nabigazio-esteken taldeak sortzeko modu sinple eta erraz bat eskaintzen dute. OS X-ko Finder bezalako alboko barran erabiltzen dira onena.

Egitura aldetik, fitxen eta pilulen oinarrizko nabigazio estilo berdinetan eraikita daude, beraz, erabilera eta pertsonalizazioa errazak dira.

Ikonoekin

Nabigazio-zerrendak ere errazak dira ikonoekin hornitzeko. Gehitu <i>etiketa egokia klasearekin eta listo.

Banatzaile horizontalak

Gehitu zatitzaile horizontal bat klasearekin zerrendako elementu huts bat sortuz .divider, honela:

<ul class = "nabigazio-zerrenda" > 
  ...
  <li class = "banatzailea" ></li> 
  ...
</ul>

Nabigazio-zerrenda adibidea

Hartu esteken zerrenda bat eta gehitu class="nav nav-list":

<ul class = "nabigazio-zerrenda" > 
  <li class = "nav-header" > 
    Zerrendaren goiburua
  </li>
  <li class = "aktiboa" > 
    <a href = "#" > Hasiera </a> 
  </li>
  <li>
    <a href = "#" > Liburutegia </a> 
  </li>
  ...
</ul>

Adibidea ikonoekin

Adibide bera, baina <i>ikonoetarako etiketarekin.

<ul class = "nabigazio-zerrenda" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "ikono-liburua" ></i> 
      Liburutegia
    </a>
  </li>
  ...
</ul>

Zer sartzen den

Eman zure fitxen bizia plugin sinple batekin fitxen bidez edukien artean aldatzeko. Bootstrap-ek lau estilotako fitxak integratzen ditu: goiko (lehenetsia), eskuinekoa, behekoa eta ezkerrekoa.

Horien artean aldatzea erraza da eta oso marka gutxi aldatzea eskatzen du.

Desagertu fitxetan

Fitxak desagertzeko, gehitu .fadebakoitzari .tab-pane.

jQuery plugina behar du

Tabulatzeko fitxa guztiak gure jQuery plugin arinarekin elikatzen dira. Irakurri gehiago tabulazio-fitxak bizia eman javascript docs orrian .

Lortu javascript →

Tabulatzeko adibidea

Fitxak tabulagarriak izan daitezen, sortu .tab-paneID esklusibo batekin fitxa bakoitzeko eta bildu itzazu .tab-content.

Eskuinean edo ezkerrean lerrokatuta dauden fitxetarako, bildu .nav-tabseta .tab-contentsartu .tabbable.

Markaketa zuzena

Tabulazio-fitxak erabiltzeak div bilgarri bat, fitxa-multzo bat eta eduki-panel multzo bat behar ditu.

<div class = "tabbable" > <!-- Ezkerreko/eskuineko fitxetarako bakarrik beharrezkoa -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > 1. atala </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > 2. atala </a></li>  
  </ul>
  <div class = "tab-edukia" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> 1. atalean nago. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Kaixo, 2. atalean nago. </p>
    </div>
  </div>
</div>

Fitxak behealdean

Biratu HTML-aren ordena eta gehitu klase bat fitxak behean jartzeko.

<div class = "tabbable fits-below" > 
  <div class = "tab-edukia" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Ezkerreko fitxak

Trukatu klasea ezkerreko fitxak jartzeko.

<div class = "tabbable fits-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-edukia" > 
    ...
  </div>
</div>

Eskuineko fitxak

Trukatu klasea eskuineko fitxak jartzeko.

<div class = "tabulatzeko fitxak-eskuinean" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-edukia" > 
    ...
  </div>
</div>

Navbar aldamioak

Nabigazio-barrak div batzuk baino ez ditu behar ondo egituratzeko pantaila estatiko edo finkorako.

<div class = "nabigazio barra" > 
  <div class = "navbar-inner" > 
    <div class = "edukiontzi" > 
      ...
    </div>
  </div>
</div>

Nabigazio barra finkoa

Konpondu nabigazio-barra bistaratzearen goialdean edo behean, klase gehigarri batekin kanpoko div-an, .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "nabigazio-barra-behe finkoa" > 
  ...
</div>

Nabigazio-barra jartzen duzunean, gogoratu azpian ezkutuko eremua kontutan hartu behar duzula. Gehitu 40 px edo gehiago betegarria <body>. Ziurtatu hau gehitzen duzula Core Bootstrap CSS-aren ondoren eta aukerako responsive CSS-aren aurretik.

Marka Izena

Zure marka edo proiektuaren izena erakusteko esteka sinple batek aingura-etiketa bat besterik ez du behar.

<a class = "marka" href = "#" >  
  Proiektuaren izena
</a>

Inprimakiak nabigazio barran

Nabigazio-barran inprimaki bat behar bezala estilo eta kokatzeko, gehitu klase egokiak behean erakusten den moduan. Inprimaki lehenetsi baterako, sartu .navbar-formeta edo .pull-leftedo .pull-rightbehar bezala lerrokatzeko.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

Bilaketa-inprimaki pertsonalizatuagoa lortzeko, gehitu nabigazio-barrako estilo espezializatuen sarreran .navbar-searcheta form..search-query

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Bilatu" >   
</form>

Aukerako aldaera sentikorra

Goiko barrako eduki kopuruaren arabera, baliteke erantzuteko aukerak ezarri nahi izatea. Horretarako, bildu nabigazio-edukia div, .nav-collapse.collapse, eta gehitu nabigazio-barra aldatzeko botoia, .btn-navbar.

<div class = "nabigazio barra" > 
  <div class = "navbar-inner" > 
    <div class = "edukiontzi" > 
 
      <!-- .btn-navbar nabigazio-barren edukiaren etengailu gisa erabiltzen da -->
      <a class = "btn btn-navbar" data-toggle = "kolapsoa" data-target = ".nav-kolapsoa" >   
        <span class = "ikono-barra" ></span> 
        <span class = "ikono-barra" ></span> 
        <span class = "ikono-barra" ></span> 
      </a>
 
      <!-- Ziurtatu marka hor utzi duzula erakutsi nahi baduzu -->
      <a class = "brand" href = "#" > Proiektuaren izena </a>  
 
      <!-- 940 px edo gutxiagotan ezkutatu nahi duzun guztia, jarri hemen -->
      <div class = "nav-kolapsoa" > 
        <!-- .nav, .navbar-search, .navbar-form, etab -->
      </div>
 
    </div>
  </div>
</div>

Nabigazio estekak

Nabigazio-elementuak ordenatu gabeko zerrenden bidez gehitzeko errazak dira.

<ul class = "nav" > 
  <li class = "aktiboa" > 
    <a href = "#" > Hasiera </a> 
  </li>
  <li><a href = "#" > Esteka </a></li> 
  <li><a href = "#" > Esteka </a></li> 
</ul>

Zure nabigazio esteketan banatzaileak erraz gehi ditzakezu zerrendako elementu huts batekin eta klase sinple batekin. Gehitu hau esteken artean:

<ul class = "nav" > 
  ...
  <li class = "banatzailea-bertikala" ></li> 
  ...
</ul>

Osagaien lerrokatzea

Nabigazioa, bilaketa-inprimakia edo testua lerrokatzeko, erabili .pull-leftedo .pull-righterabilgarritasun klaseak. Bi klaseek CSS flotatzaile bat gehituko dute zehaztutako norabidean.

Goitibeherako menuak gehitzea

Nabigazioan goitibehurrak eta goitibehurrak gehitzea oso erraza da, baina gure javascript plugina erabiltzea eskatzen du .

<ul class = "nav" > 
  <li class = "goiburua" > 
    <a href = "#" 
          klasea = "goigabea-toggle"
          data-toggle = "gotibehera" >
          Kontua
          <b class = "caret" ></b> 
    </a>
    <ul class = "menua goitibeherako" > 
      ...
    </ul>
  </li>
</ul>

Lortu javascript →

Testua nabigazio barran

Itzulbiratu testu-kateak <.navbar-text>, normalean <p>etiketa batean hasiera eta kolore egokia izateko.

Zergatik erabili

Breadcrumb nabigazioa erabiltzaileei aplikazio edo gune batean non dauden erakusteko modu gisa erabiltzen da, baina ez nabigazio nagusirako. Mantendu haien erabilera eskasa eta laburra eraginkorrena izateko.

Adibideak

Adibide bakar bat orrialde askotan bistaratu daitekeenez.

• Hasiera

• Hasiera /
• Liburutegia

• Hasiera /
• Liburutegia /
• Datuak

Markatzea

HTML zure estekekin ordenatu gabeko zerrenda estandarra da.

<ul class = "ogi birrindua" > 
  <li>
    <a href = "#" > Hasiera </a> <span class = "banatzailea" > / </span>   
  </li>
  <li>
    <a href = "#" > Liburutegia </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Datuak </li> 
</ul>

Noiz erabili

Rdio-n inspiratu den orrigintza ultra sinplista eta gutxieneko estiloa, bikaina aplikazioetarako eta bilaketa-emaitzetan. Bloke handia galtzen zaila da, erraz eskala daiteke eta klik eremu handiak eskaintzen ditu.

Orrialdearen estekak

Estekak pertsonalizagarriak dira eta hainbat egoeratan funtzionatzen dute klase egokiarekin. .disabledKlikatu ezin diren esteketarako eta .activeuneko orrialderako.

Lerrokadura malgua

Gehitu aukerako bi klaseetako bat orrialderatze-esteken lerrokadura aldatzeko: .pagination-centeredeta .pagination-right.

Adibideak

Orrialde-osagai lehenetsia malgua da eta hainbat aldaeratan funtzionatzen du.

Markatzea

Bat batean bilduta, <div>orria bat besterik ez da <ul>.

<div class = "paginazioa" > 
  <ul>
    <li><a href = "#" > Aurrekoa </a></li> 
    <li class = "aktiboa" > 
      <a href = "#" > 1 </a> 
    </li>
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > Hurrengoa </a></li> 
  </ul>
</div>

orrialdeari buruz

Orrialdearen osagaia orri-markaketa arinarekin eta are estilo arinagoak dituzten orrialde-inplementazio soiletarako esteka multzo bat da. Oso ona da blogak edo aldizkariak bezalako gune sinpleetarako.

Aukerako desgaitu egoera

Pager-en estekek .disabledorrialdeko klase orokorra ere erabiltzen dute.

Lehenetsitako adibidea

Lehenespenez, orrialdeak estekak ditu zentroak.

• Aurrekoa
• Hurrengoa

<ul class = "orria" > 
  <li>
    <a href = "#" > Aurrekoa </a> 
  </li>
  <li>
    <a href = "#" > Hurrengoa </a> 
  </li>
</ul>

Lerrokaturiko estekak

Bestela, esteka bakoitza alboetara lerrokatu dezakezu:

• ← Zaharragoa
• Berriagoa →

<ul class = "orria" > 
  <li class = "aurrekoa" > 
    <a href = "#" > ← Zaharragoak </a> 
  </li>
  <li class = "hurrengo" > 
    <a href = "#" > Berriagoa → </a> 
  </li>
</ul>

Buruz

Insigniak osagai txiki eta sinpleak dira nolabaiteko adierazle edo zenbaketa bat bistaratzeko. Mail.app bezalako posta elektronikoko bezeroetan edo push jakinarazpenetarako aplikazio mugikorretan aurkitu ohi dira.

Klase eskuragarriak

Bootstrap-ek heroi-unitate izeneko osagai arin eta malgu bat eskaintzen du zure webguneko edukia erakusteko. Ondo funtzionatzen du marketin eta eduki handiko guneetan.

Markatzea

Bilatu zure edukia divhonela:

<div class = "heroi-unitatea" > 
  <h1> Goiburua </h1>
  <p> Lema </p>
  <p>
    <a class = "btn btn-primary btn-handi" > 
      Gehiago ikasi
    </a>
  </p>
</div>

h1Orrialde bateko edukiaren atalak behar bezala zuritu eta segmentatzeko shell sinple bat. h1Elementu lehenetsia erabil dezake small, baita beste osagai gehienak ere (estilo gehigarriekin).

<div class = "orriaren goiburua" > 
  <h1> Orriaren goiburuaren adibidea </h1>
</div>

Miniatura lehenetsiak

Lehenespenez, Bootstrap-en koadro txikiak estekatutako irudiak behar den marka minimoarekin erakusteko diseinatuta daude.

Oso pertsonalizagarria

Markatze gehigarri batekin, edozein motatako HTML edukia gehi daiteke koadro txikietan, adibidez, goiburuak, paragrafoak edo botoiak.

• 

  Irudi txikiaren etiketa

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Ekintza Ekintza

• 

  Irudi txikiaren etiketa

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Ekintza Ekintza

Zergatik erabili miniaturak

Miniaturak (lehen .media-gridv1.4 arte) bikainak dira argazki edo bideoen sareta, irudien bilaketa-emaitzak, txikizkako produktuak, zorroak eta askoz gehiago egiteko. Estekak edo eduki estatikoak izan daitezke.

Markaketa sinplea eta malgua

Irudi txikien markaketa erraza da ul: edozein lielementu dituena da beharrezkoa dena. Gainera, oso malgua da, zure edukiak biltzeko marka apur bat gehiago duen edozein eduki mota ahalbidetzen du.

Sare-zutabeen tamainak erabiltzen ditu

Azkenik, miniaturak osagaiak lehendik dauden sareta-sistemako klaseak erabiltzen ditu, .span2edo antzekoak .span3, irudi txikien dimentsioak kontrolatzeko.

Markaketa

Aurretik esan bezala, miniaturak egiteko beharrezkoa den marka arina eta zuzena da. Hona hemen estekatutako irudien konfigurazio lehenetsia :

<ul class = "miniaturak" > 
  <li class = "span3" > 
    <a href = "#" class = "miniatura" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Irudi txikietako HTML eduki pertsonalizaturako, markaketa zertxobait aldatzen da. Bloke-mailako edukia edonon baimentzeko, honela aldatzen <a>dugu <div>:

<ul class = "miniaturak" > 
  <li class = "span3" > 
    <div class = "miniatura" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Irudi txikiaren etiketa </h5>
      <p> Miniatura-oina hementxe... </p>
    </div>
  </li>
  ...
</ul>

Adibide gehiago

Arakatu zure aukera guztiak eskuragarri dituzun sareko klase ezberdinekin. Tamaina desberdinak ere nahastu eta lotu ditzakezu.

Oinarrizko klase berridatzia

Bootstrap 2-rekin, oinarrizko klasea sinplifikatu dugu: .alertordez .alert-message. Beharrezko gutxieneko marka ere murriztu dugu <p>; lehenespenez ez da beharrezkoa, kanpokoa bakarrik <div>.

Alerta-mezu bakarra

Kode gutxiago duen osagai iraunkorragoa lortzeko, blokeen abisuei, betegarri gehiagorekin eta normalean testu gehiagorekin datozen mezuei itxura bereizgarria kendu diegu. Klasea ere aldatu egin da .alert-block.

Oso ondo doa javascript-ekin

Bootstrap-ek alerta-mezuak onartzen dituen jQuery plugin bikain batekin dator, horiek baztertzea azkar eta erraz eginez.

Lortu plugina »

Adibide alertak

Itzulbiratu zure mezua eta aukerako ixteko ikono bat div batean klase sinple batekin.

<div class = "alerta" > 
  <button class = "close" data-dismiss = "alerta" > × </button>  
  <strong> Kontuz! </strong> Egiaztatu zure burua, ez zara itxura onegia.
</div>

Buruak gora! iOS gailuek href="#"alertak ezabatzeko eskatzen dute. Ziurtatu hura eta aingura ixteko ikonoen datu-atributua sartzen dituzula. Bestela, datu-atributua duen elementu bat erabil dezakezu <button>, gure dokumentuetarako egitea aukeratu duguna. Erabiltzean <button>, sartu behar duzu type="button"edo baliteke zure inprimakiak ez bidali.

Hedatu erraz alerta-mezu estandarra aukerako bi klaserekin: .alert-blockbetegarri eta testu-kontrol gehiago .alert-headinglortzeko eta bat datorren izenburua lortzeko.

<div class = "alerta alerta-blokeoa" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Kontuz! </h4> 
  Egiaztatu zure burua, ez zara...
</div>

Akatsa edo arriskua

<div class = "alerta alerta-errorea" > 
  ...
</div>

Arrakasta

<div class = "alerta alerta-arrakasta" > 
  ...
</div>

Informazioa

<div class = "alerta alerta-informazioa" > 
  ...
</div>

Oinarrizkoa

Aurrerapen-barra lehenetsia gradiente bertikal batekin.

<div class = "aurrerapena" > 
  <div class = "barra" 
       style = " zabalera : % 60 ; " ></div> 
</div>

Marraduna

Gradiente bat erabiltzen du marra-efektua sortzeko (IE ez).

<div class = "aurrerapen-aurrerapen marradun" > 
  <div class = "barra" 
       style = " zabalera : % 20 ; " ></div> 
</div>

Animatua

Marradun adibidea hartu eta animatzen du (IE ez).

<div class = "aurrerapena aurrerapen marradun 
     aktibo" >
  <div class = "barra" 
       style = " zabalera : % 40 ; " ></div> 
</div>

Kolore gehigarriak

Aurrerapen-barrek botoi eta alerta-klase bereko batzuk erabiltzen dituzte estilo koherenteetarako.

Barra marradunak

Kolore solidoen antzera, marradun aurrerapen-barra desberdinak ditugu.

Portaera

Aurrerapen-barrek CSS3 trantsizioak erabiltzen dituzte, beraz, zabalera dinamikoki doitzen baduzu javascript bidez, erraz aldatuko da tamaina.

.activeKlasea erabiltzen baduzu , zure .progress-stripedaurrerapen-barrak ezkerretik eskuinera marrak animatuko ditu.

Arakatzailearen laguntza

Aurrerapen-barrek CSS3 gradienteak, trantsizioak eta animazioak erabiltzen dituzte efektu guztiak lortzeko. Ezaugarri hauek ez dira onartzen IE7-9 edo Firefox-en bertsio zaharretan.

Operak eta IE-k ez dute animaziorik onartzen momentu honetan.

Putzuak

Erabili putzua elementu baten efektu sinple gisa txertatze-efektua emateko.

<div class = "ondo" > 
  ...
</div>

Itxi ikonoa

Erabili itxi ikono generikoa moduak eta alertak bezalako edukia baztertzeko.

×

<button class = "itxi" > × </button> 

iOS gailuek href="#" bat behar dute klik-gertaeretarako aingura bat erabili nahi baduzu.

<a class = "close" href = "#" > × </a>