Adibidea

Aldatu daitekeen menua, esteken zerrendak bistaratzeko. Goitibeherako JavaScript pluginarekin interaktibo egin da .

<ul class = "dropdown-menu" role = "menua" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Ekintza </a></li>  
  <li><a tabindex = "-1" href = "#" > Beste ekintza bat </a></li>  
  <li><a tabindex = "-1" href = "#" > Hemen beste zerbait </a></li>  
  <li class = "banatzailea" ></li> 
  <li><a tabindex = "-1" href = "#" > Esteka bereizia </a></li>  
</ul>

Markatzea

Goitibeherako menuari begira, hona hemen beharrezko HTMLa. Goitibeherako abiarazlea eta goitibeherako menua .dropdown, edo deklaratzen duen beste elementu batean bildu behar dituzu position: relative;. Ondoren, sortu menua.

<div class = "goiburua" > 
  <!-- Goitibeherako esteka edo botoia -->
  <ul class = "dropdown-menu" role = "menua" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Ekintza </a></li>  
    <li><a tabindex = "-1" href = "#" > Beste ekintza bat </a></li>  
    <li><a tabindex = "-1" href = "#" > Hemen beste zerbait </a></li>  
    <li class = "banatzailea" ></li> 
    <li><a tabindex = "-1" href = "#" > Esteka bereizia </a></li>  
  </ul>
</div>

Aukerak

Lerrokatu menuak eskuinera eta gehitu goitibeherako maila gehigarriak.

Menuak lerrokatzea

Gehitu .pull-righta .dropdown-menueskuinera lerrokatu goitibeherako menua.

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

Menu-aukerak desgaituta

Gehitu .disableda <li>goitibeherako esteka desgaitzeko.

<ul class = "dropdown-menu" role = "menua" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Esteka arrunta </a></li>  
  <li class = "desgaituta" ><a tabindex = "-1" href = "#" > Desgaitutako esteka </a></li>   
  <li><a tabindex = "-1" href = "#" > Beste esteka bat </a></li>  
</ul>

Goitibehetako azpimenuak

Gehitu goitibeherako menuen maila gehigarria, pasatzean OS X-en bezala agertuz, markatze-gehiketa sinple batzuekin. Gehitu .dropdown-submenulehendik lidagoen goitibeherako menu batean estilo automatikorako.

Lehenetsia

Jaitsiera

Ezkerreko azpimenua

<ul class = "dropdown-menu" role = "menua" aria-labelledby = "dLabel" >   
  ...
  <li class = "menu goitibeherako azpimenua" > 
    <a tabindex = "-1" href = "#" > Aukera gehiago </a>  
    <ul class = "menua goitibeherako" > 
      ...
    </ul>
  </li>
</ul>

Adibideak

Oinarrizko bi aukera, bi aldaera zehatzagorekin batera.

Botoi bakarreko taldea

Itzulbiratu botoi sorta bat .btnbarruan .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Ezkerrean </button> 
  <button class = "btn" > Erdikoa </button> 
  <button class = "btn" > Eskuinera </button> 
</div>

Hainbat botoi-talde

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

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

Botoi talde bertikalak

Botoi multzo bat horizontalki baino bertikalki pilatuta agertzea.

<div class = "btn-group btn-group-bertical" > 
  ...
</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 .

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.

<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: .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.

Zatitu botoien goitibehurrak

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.

<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>

Tamainak

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Ekintza </button> 
  <button class = "btn btn-mini 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>

Lehenetsi arinak Markaketa bera, klase desberdinak

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

Oinarrizko fitxak

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

<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:

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

Ezindu egoera

Nabigaziorako edozein osagaitarako (fitxak, pilulak edo zerrenda), gehitu esteka grisetarako eta ez pasatzeko.disabled efekturik . Estekak klik egin daitezke, hala ere, atributua kendu ezean . Bestela, JavaScript pertsonalizatua ezar dezakezu klik horiek saihesteko.href

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

Osagaien lerrokatzea

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

Pilagarria

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

Fitxa pilatuak

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

Pilulak pilatuta

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

Goitibeherak

Gehitu goitibeherako menuak HTML gehigarri batekin eta goitibeherako JavaScript pluginarekin .

Goitibeherako fitxak

<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

<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>

Nabigazio-zerrendak

Aukerako goiburuekin nabigazio-esteken taldeak sortzeko modu sinple eta erraza. OS X-ko Finder bezalako alboko barran erabiltzen dira onena.

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 = "active" ><a href = "#" > Hasiera </a></li>  
  <li><a href = "#" > Liburutegia </a></li> 
  ...
</ul>

OharNabigazio-zerrenda baten barruan habiratzeko, sartu class="nav nav-list"habiaratutako edozein <ul>.

Banatzaile horizontalak

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

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

Tabulaziorako nabigazioa

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.

Tabulatzeko adibidea

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

1. atalean nago.

Kaixo, 2. atalean nago.

Zer da neska, hau da 3. atala.

<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>

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 bizitzeari buruz JavaScript docs orrian .

Tabulagarria edozein norabidetan

Fitxak behealdean

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

A atalean nago.

Kaixo, B atalean nago.

Zera neska, hau da C atala.

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

Ezkerreko fitxak

Trukatu klasea ezkerreko fitxak jartzeko.

A atalean nago.

Kaixo, B atalean nago.

Zera neska, hau da C atala.

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

Eskuineko fitxak

Trukatu klasea eskuineko fitxak jartzeko.

A atalean nago.

Kaixo, B atalean nago.

Zera neska, hau da C atala.

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

Oinarrizko nabigazio barra

Hasteko, nabigazio-barrak estatikoak dira (ez dira goiko aldean finkatuta) eta proiektuaren izena eta oinarrizko nabigazioa onartzen dituzte. Jarri bat edozein lekutan .container, zure webgunearen eta edukiaren zabalera ezartzen duena.

<div class = "nabigazio barra" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Izenburua </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Hasiera </a></li>  
      <li><a href = "#" > Esteka </a></li> 
      <li><a href = "#" > Esteka </a></li> 
    </ul>
  </div>
</div>

Nabbar osagaiak

Marka

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

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

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>

Formak

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" >  
  <button type = "submit" class = "btn" > Bidali </button>  
</form>

Bilaketa formularioa

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>

Osagaien lerrokatzea

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

Goitibehurrak erabiliz

Gehitu goitibeherako zerrendak eta goitibeherak nabigaziora markaketa pixka batekin eta goitibeherako JavaScript pluginarekin .

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

Bisitatu JavaScript goitibeheren dokumentazioa goitibeherako deien markaketa eta informazio gehiago lortzeko.

Testua

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

Aukerako pantaila-aldaerak

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

Goian finkatuta

Gehitu .navbar-fixed-topeta gogoratu azpian ezkutuko eremua kontutan hartu behar duzula, gutxienez 40 px paddinggehituz <body>. Ziurtatu hau gehitzen duzula Core Bootstrap CSS-aren ondoren eta aukerako responsive CSS-aren aurretik.

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

Behean finkatuta

Gehitu .navbar-fixed-bottomhorren ordez.

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

Goiko nabigazio barra estatikoa

Sortu zabalera osoko nabigazio-barra, orrialdearekin batera korritzen dena gehituz .navbar-static-top. Klasean ez bezala, .navbar-fixed-topez duzu betegarririk aldatu behar body.

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

Nabigazio-barra erantzunkorra

Erantsitako nabigazio-barra tolesgarria ezartzeko, bildu zure nabigazio-barrako 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-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etab -->
      </div>
 
    </div>
  </div>
</div>

Buruak gora! Nabigazio-barra erantzuleak tolestu plugina eta Bootstrap CSS fitxategi sentikorra behar ditu .

Alderantzizko aldakuntza

Aldatu nabigazio-barraren itxura gehituz .navbar-inverse.

<div class = "nabigazio-barra-alderantzizkoa" > 
  ...
</div>

Adibideak

Adibide bakar bat orrialde askotan bistaratu daitekeenez.

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

Orrigintza estandarra

Rdio-n inspiratutako orrialde sinplea, aplikazioetarako eta bilaketa-emaitzetarako bikaina. Bloke handia galtzen zaila da, erraz eskala daiteke eta klik eremu handiak eskaintzen ditu.

<div class = "paginazioa" > 
  <ul>
    <li><a href = "#" > Aurrekoa </a></li> 
    <li><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 = "#" > 5 </a></li> 
    <li><a href = "#" > Hurrengoa </a></li> 
  </ul>
</div>

Aukerak

Desgaitutako eta aktibo egoerak

Estekak egoera ezberdinetarako pertsonaliza daitezke. Erabili .disabledklik egin ezin diren esteketarako eta .activeuneko orrialdea adierazteko.

<div class = "paginazioa" > 
  <ul>
    <li class = "desgaituta" ><a href = "#" > « </a></li>  
    <li class = "aktiboa" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Aukeran, aingura aktiboak edo desgaituak tarteka alda ditzakezu klik funtzionalitateak kentzeko, nahi diren estiloak mantenduz.

<div class = "paginazioa" > 
  <ul>
    <li class = "desgaituta" ><span> « </span></li> 
    <li class = "aktiboa" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Tamainak

Orrialde handiagoa ala txikiagoa al duzu? Gehitu .pagination-large, .pagination-small, edo .pagination-minitamaina gehigarrietarako.

<div class = "pagination pagination-handi" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginazioa" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Lerrokatzea

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

<div class = "paginazioa orrialdera zentratutako" > 
  ...
</div>

<div class = "paginazio orria-eskuinean" > 
  ...
</div>

Orriburua

Aurreko eta hurrengo esteka azkarrak markatu eta estilo arinekin orrituratze inplementazio errazetarako. Oso ona da blogak edo aldizkariak bezalako gune sinpleetarako.

Lehenetsitako adibidea

Lehenespenez, orrialdeak estekak ditu zentroak.

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

Lerrokaturiko estekak

Bestela, esteka bakoitza alboetara lerrokatu dezakezu:

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

Aukerako desgaitu egoera

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

<ul class = "orria" > 
  <li class = "aurreko desgaituta" > 
    <a href = "#" > ← Zaharragoak </a> 
  </li>
  ...
</ul>

Etiketak

Etiketak	Markatzea
Lehenetsia	`<span class="label">Default</span>`
Arrakasta	`<span class="label label-success">Success</span>`
Abisua	`<span class="label label-warning">Warning</span>`
Garrantzitsua	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Alderantzizkoa	`<span class="label label-inverse">Inverse</span>`

Txapak

Izena	Adibidea	Markatzea
Lehenetsia	1	`<span class="badge">1</span>`
Arrakasta	2	`<span class="badge badge-success">2</span>`
Abisua	4	`<span class="badge badge-warning">4</span>`
Garrantzitsua	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Alderantzizkoa	10	`<span class="badge badge-inverse">10</span>`

Erraz tolesgarria

Erraz inplementatzeko, etiketak eta bereizgarriak tolestuko dira (CSS-ren :emptyhautatzailearen bidez) edukirik ez dagoenean.

Hero unitatea

Osagai arina eta malgua zure webgunean funtsezko edukia erakusteko. Ondo funtzionatzen du marketin eta eduki handiko guneetan.

Kaixo Mundua!

Heroi-unitate sinple bat da, eduki edo informazioari arreta gehiago deitzeko jumbotron estiloko osagai soil bat.

Gehiago ikasi

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

Orriaren goiburua

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 <small> Goibururako azpitestua </small></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
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.

Markatzea

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

<ul class = "miniaturak" > 
  <li class = "span4" > 
    <a href = "#" class = "miniatura" >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    <div class = "miniatura" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Irudi txikiaren etiketa </h3>
      <p> Miniatura-oina... </p>
    </div>
  </li>
  ...
</ul>

Adibide gehiago

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

Alerta lehenetsia

Itzulbiratu edozein testu eta aukerako baztertzeko botoia .alertoinarrizko abisu-abisu-mezu bat lortzeko.

Kontuz! Hobe egiazta ezazu zeure burua, ez zaude itxura ona.

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

Baztertu botoiak

Mobile Safari eta Mobile Opera arakatzaileek, data-dismiss="alert"atributuaz gain, etiketa href="#"bat erabiltzean alertak ezabatzeko eskatzen dute.<a>

<a href = "#" class = "close" data-dismiss = "alerta" > × </a>

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.

<button type = "button" class = "itxi" data-dismiss = "alerta" > × </button>

Baztertu alertak JavaScript bidez

Erabili alertak jQuery plugina alertak azkar eta erraz baztertzeko.

Aukerak

Mezu luzeagoetarako, handitu alerta-bilgarriaren goiko eta beheko betegarria gehituz .alert-block.

Kontuz!

Hobe egiazta ezazu zeure burua, ez zaude itxura ona. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "alerta alerta-blokeoa" > 
  <button type = "button" class = "itxi" data-dismiss = "alerta" > × </button>   
  <h4> Kontuz! </h4>
  Egiaztatu zure burua, ez zara...
</div>

Testuinguruko alternatibak

Gehitu aukerako klaseak alerta baten konnotazioa aldatzeko.

Akatsa edo arriskua

Ai txorrota! Aldatu gauza batzuk eta saiatu berriro bidaltzen.

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

Arrakasta

Ongi egina! Irakurri duzu alerta-mezu garrantzitsu hau.

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

Informazioa

Buruak gora! Alerta honek zure arreta behar du, baina ez da oso garrantzitsua.

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

Adibideak eta markaketa

Oinarrizkoa

Aurrerapen-barra lehenetsia gradiente bertikal batekin.

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

Marraduna

Gradiente bat erabiltzen du marra-efektua sortzeko. Ez dago eskuragarri IE7-8-n.

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

Animatua

Gehitu .activehona .progress-stripedmarra eskuinetik ezkerrera animatzeko. Ez dago eskuragarri IEren bertsio guztietan.

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

Pilatuta

Jarri hainbat barra berean .progresspilatzeko.

<div class = "aurrerapena" > 
  <div class = "bar bar-success" style = " zabalera : % 35 ; " ></div>   
  <div class = "bar bar-warning" style = " zabalera : % 20 ; " ></div>   
  <div class = "bar bar-danger" style = " zabalera : % 10 ; " ></div>   
</div>

Aukerak

Kolore gehigarriak

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

<div class = "aurrerapen aurrerapen-informazioa" > 
  <div class = "bar" style = " zabalera : % 20 " ></div>   
</div>
<div class = "aurrerapena aurrerapena-arrakasta" > 
  <div class = "bar" style = " zabalera : % 40 " ></div>   
</div>
<div class = "aurrerapen aurrerapen-abisua" > 
  <div class = "bar" style = " zabalera : % 60 " ></div>   
</div>
<div class = "aurrerapena aurrerapen-arriskua" > 
  <div class = "bar" style = " zabalera : % 80 " ></div>   
</div>

Barra marradunak

Kolore solidoen antzera, marradun aurrerapen-barra desberdinak ditugu.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " zabalera : % 20 " ></div>   
</div>
<div class = "aurrerapena aurrerapen-arrakasta aurrerapen marradun" > 
  <div class = "bar" style = " zabalera : % 40 " ></div>   
</div>
<div class = "aurrerapena aurrerapen-abisua aurrerapen marradun" > 
  <div class = "bar" style = " zabalera : % 60 " ></div>   
</div>
<div class = "aurrerapena aurrerapena-arriskua aurrerapen marradun" > 
  <div class = "bar" style = " zabalera : % 80 " ></div>   
</div>

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.

Internet Explorer 10 eta Opera 12 baino lehenagoko bertsioek ez dute animaziorik onartzen.

Testu-edukiarekin batera ezkerrera edo eskuinera lerrokatuta dagoen irudia agertzen duten hainbat osagai mota (blog-iruzkinak, txioak, etab.) eraikitzeko objektu-estilo abstraktuak.

Lehenetsitako adibidea

Multimedia lehenetsiek multimedia-objektu bat (irudiak, bideoa, audioa) eduki bloke baten ezkerrera edo eskuinera flotatzea ahalbidetzen dute.

Hedabideen goiburua

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Hedabideen goiburua

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Multimedia goiburua </h4> 
    ...
 
    <!-- Habiaratutako multimedia-objektua -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Komunikabideen zerrenda

Markatze gehigarri pixka batekin, media zerrenda barruan erabil dezakezu (erabilgarria iruzkinen harietarako edo artikulu zerrendetarako).

Hedabideen goiburua

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Habiaraturiko multimedia goiburua
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Habiaraturiko multimedia goiburua
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Habiaraturiko multimedia goiburua
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Hedabideen goiburua
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class = "komunikabideen zerrenda" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Multimedia goiburua </h4> 
      ...
 
      <!-- Habiaratutako multimedia-objektua -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Putzuak

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

Begira, putzu batean nago!

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

Aukerako klaseak

Kontrolatu betegarria eta ertz biribilduak aukerako bi aldatzaile klaseekin.

Begira, putzu batean nago!

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

Begira, putzu batean nago!

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

Itxi ikonoa

Erabili itxi ikono generikoa moduak eta alertak bezalako edukia baztertzeko.

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

iOS gailuek href="#"klik-gertaerak behar dituzte aingura bat erabili nahi baduzu.

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

Laguntzaile klaseak

Klase errazak eta bideratuak pantaila txikietarako edo portaera doitzeko.

.tira-ezkerrera

Flota ezazu elementu bat ezkerrean

klasea = "tira-ezkerrera"

. tira - ezkerrera {
  float : ezkerrera ;
}

.tira-eskuinera

Mugitu elementu bat eskuinera

klasea = "eskuinera tira"

. tira - eskuinera {
  float : eskuinera ;
}

.isilduta

Aldatu elementu baten kolorea#999

class = "isilduta"

. isilduta {
  kolorea : #999; 
}

.garbi konpondu

Garbitu floatedozein elementutan

klase = "garbiketa"

. garbitu {
  * zooma : 1 ; 
  &: aurretik ,
  &: { ondoren
    pantaila : taula ;
    edukia : "" ; 
  }
  &: { ondoren
    argi : biak ;
  }
}

Goitibeherako menuak

Adibidea

Markatzea

Aukerak

Menuak lerrokatzea

Menu-aukerak desgaituta

Goitibehetako azpimenuak

Botoi-taldeak

Adibideak

Botoi bakarreko taldea

Hainbat botoi-talde

Botoi talde bertikalak

Checkbox eta irrati zaporeak

Goitibeherak botoi-taldeetan

Botoien goitibeherako menuak

Ikuspegi orokorra eta adibideak

Botoien tamaina guztiekin funtzionatzen du

JavaScript behar du

Zatitu botoien goitibehurrak

Tamainak

Goitibeherako menuak

Nabigazioa: fitxak, pilulak eta zerrendak

Lehenetsi arinak Markaketa bera, klase desberdinak

Oinarrizko fitxak

Oinarrizko pilulak

Ezindu egoera

Osagaien lerrokatzea

Pilagarria

Fitxa pilatuak

Pilulak pilatuta

Goitibeherak

Goitibeherako fitxak

Goitibeherako pilulak

Nabigazio-zerrendak

Nabigazio-zerrenda adibidea

Banatzaile horizontalak

Tabulaziorako nabigazioa

Tabulatzeko adibidea

Desagertu fitxetan

jQuery plugina behar du

Tabulagarria edozein norabidetan

Fitxak behealdean

Ezkerreko fitxak

Eskuineko fitxak

Nabigazio barra

Oinarrizko nabigazio barra

Nabbar osagaiak

Marka

Nabigazio estekak

Formak

Bilaketa formularioa

Osagaien lerrokatzea

Goitibehurrak erabiliz

Testua

Aukerako pantaila-aldaerak

Goian finkatuta

Behean finkatuta

Goiko nabigazio barra estatikoa

Nabigazio-barra erantzunkorra

Alderantzizko aldakuntza

Ogi birrindua

Adibideak

Orrizketa Edukiak orrialdeak egiteko bi aukera

Orrigintza estandarra

Aukerak

Desgaitutako eta aktibo egoerak

Tamainak

Lerrokatzea

Orriburua

Lehenetsitako adibidea

Lerrokaturiko estekak

Aukerako desgaitu egoera

Etiketak eta txapak

Etiketak

Txapak

Erraz tolesgarria

Osagai tipografikoak

Hero unitatea

Kaixo Mundua!

Orriaren goiburua