Eskuragarri dauden glifoak

Glyphicon Halflings multzoko letra-tipo formatuan 250 glifo baino gehiago biltzen ditu. Glyphicons Halflings normalean ez daude doan eskuragarri, baina haien sortzaileak Bootstrap-erako dohainik jarri ditu eskuragarri. Eskerrik asko, Glyphicons -erako esteka bat sar dezazula soilik eskatzen dizugu ahal den guztietan.

glifiko glifiko-asterisko
glyphicon glyphicon-plus
glifiko glyphicon-euro
glyphicon glyphicon-eur
glifiko glyphicon-minus
glifiko glifiko-hodei
glifiko glyphicon-envelope
glifiko glifiko-arkatz
glifiko glyphicon-glass
glifiko glyphicon-musika
glifiko glifiko-bilaketa
glifiko glifiko-bihotza
glifiko glifiko-izar
glifiko glyphicon-izar-hutsik
glifiko glifiko-erabiltzaile
glifiko glyphicon-film
glyphicon glyphicon-th-handi
glifiko glyphicon-th
glifiko glyphicon-th-zerrenda
glifiko glifiko-ok
glifiko glifiko-kendu
glyphicon gliphicon-zoom-in
glifiko glifiko txikiagotu
glifiko glyphicon-off
glifiko glyphicon-seinale
glifiko glyphicon-cog
glifiko glyphicon-zaborrontzia
glifiko glyphicon-etxe
glyphicon glyphicon-fitxategia
glifiko glifiko-denbora
glifiko glifiko-bide
glyphicon glyphicon-deskargatu-alt
glyphicon glyphicon-deskargatu
glyphicon glyphicon-kargatu
glyphicon glyphicon-inbox
glifiko glyphicon-jolas-zirkulu
glifiko glifiko-errepikatu
glifiko glyphicon-freskatu
glifiko glyphicon-zerrenda-alt
glifiko glyphicon-blokeo
glifiko glifiko-bandera
glyphicon glyphicon-aurikularrak
glifiko glifiko-bolumen itzali
glifiko glifiko-bolumen behera
glifiko glifiko-bolumen-gora
glyphicon glyphicon-qrcode
glifiko glifiko-barra-kode
glifiko glifiko-etiketa
glifiko glyphicon-etiketak
glifiko glifiko-liburu
glifiko glifiko-laster-marka
glifiko glifiko-inprimatu
glifiko glyphicon-kamera
glyphicon glyphicon-font
glifiko glifiko-lodi
glifiko glyphicon-etalic
glifiko glifiko-testu-altuera
glifiko glifiko-testu-zabalera
glifiko glyphicon-lerrokatu-ezkerrera
glifiko glyphicon-lerrokatu-zentro
glifiko glyphicon-lerrokatu-eskuin
glifiko glyphicon-lerrokatu-justifikatu
glifiko glifiko-zerrenda
glifiko glifiko-koska-ezkerrera
glifiko glifiko-koska-eskuin
glyphicon glyphicon-facetime-bideo
glifiko glifiko-irudi
glifiko glifiko-mapa-markatzaile
glifiko glifiko-egokitu
glifiko glifiko-tinta
glifiko glyphicon-edit
glifiko glyphicon-partekatu
glifiko glyphicon-check
glifiko glifiko-mugitu
glifiko glifiko-pauso-atzera
glifiko glifiko-azkar-atzera
glifiko glifiko-atzera
glifiko glifiko-jolas
glifiko glifiko-pausu
glifiko glyphicon-stop
glifiko glyphicon-aurrera
glifiko glyphicon-azkar-aurrera
glifiko glyphicon-aurrera
glifiko glyphicon-eject
glifiko glyphicon-chevron-ezker
glifiko glyphicon-chevron-eskuin
glifiko glyphicon-plus-seinalea
glifiko glyphicon-minus-seinale
glyphicon gliphicon-kendu-seinalea
glifiko glyphicon-ok-seinalea
glifiko glifiko-galdera-seinalea
glifiko glyphicon-info-seinalea
glyphicon glyphicon-pantaila-argazkia
glifiko glifiko-kendu-zirkulu
glifiko glyphicon-ok-zirkulu
glifiko glyphicon-debeku-zirkulu
glifiko glifiko-gezi-ezker
glifiko glifiko-gezi-eskuinera
glifiko glifiko-gezi-gora
glifiko glifiko-gezi-behera
glifiko glyphicon-partekatu-alt
glifiko glyphicon-tamaina-aldaketa osoa
glifiko glyphicon-tamaina-txiki
glifiko glifiko-harridura-seinalea
glifiko glyphicon-opari
glifiko glifiko-hosto
glifiko glyphicon-su
glyphicon gliphicon-begi-zabalik
glifiko glifiko-begi itxi
glifiko glyphicon-abisu-seinale
glifiko glifiko-hegazkin
glifiko glifiko-egutegi
glifiko glyphicon-ausazko
glifiko glyphicon-iruzkin
glifiko glifiko-iman
glifiko glyphicon-chevron-gora
glifiko glyphicon-chevron-behera
glyphicon glyphicon-retweet
glyphicon glyphicon-erosketa-gurdi
glifiko glifiko-karpeta-itxi
glifiko glifiko-karpeta-ireki
glifiko glyphicon-tamaina-bertikala
glifiko glyphicon-tamaina-aldaketa-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glifiko glifiko-kanpai
glyphicon glyphicon-ziurtagiri
glifiko glyphicon-erpuru gora
glifiko glyphicon-erpuru-behera
glifiko glifiko-esku-eskuin
glifiko glifiko-esku-ezker
glifiko glifiko-esku-gora
glifiko glifiko-esku-behera
glifiko glifiko-zirkulu-gezi-eskuinera
glifiko glyphicon-zirkulu-gezi-ezkerrera
glifiko glyphicon-zirkulu-gezi-gora
glifiko glyphicon-zirkulu-gezi-behera
glifiko glifiko-globo
glifiko glifiko-giltza
glifiko glyphicon-zereginak
glifiko glifiko-iragazki
glifiko glifiko-maletina
glifiko glyphicon-pantaila osoa
glifiko glifiko-arbel
glifiko glyphicon-paperclip
glifiko glifiko-bihotz-hutsik
glifiko glifiko-lotura
glifiko glifiko-telefono
glifiko glyphicon-pintza
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glifiko glyphicon-sort
glyphicon glyphicon-ordenatu-alfabetoaren arabera
glyphicon glyphicon-ordenatu-alfabetoaren arabera-alt
glyphicon glyphicon-ordenatu-ordena
glyphicon glyphicon-ordena-ordena-ordena-alt
glyphicon glyphicon-ordenatu-atributuen arabera
glyphicon glyphicon-ordenatu-atributuen arabera-alt
glyphicon glyphicon-markatu gabe
glifiko glifiko-zabaldu
glyphicon gliphicon-kolapso-behera
glyphicon gliphicon-kolapsoa
glyphicon glyphicon-sartu
glifiko glyphicon-flash
glyphicon glyphicon-saioa atera
glyphicon glyphicon-leiho-berria
glifiko glifiko-erregistro
glifiko glyphicon-gorde
glifiko glyphicon-ireki
glifiko glifiko gordeta
glifiko glyphicon-inportatu
glifiko glyphicon-esportatu
glifiko glifiko-bidali
glyphicon glyphicon-disketea
glyphicon glyphicon-disketea gordeta
glyphicon glyphicon-floppy-kendu
glyphicon glyphicon-diskete-gorde
glyphicon glyphicon-disketea-ireki
glyphicon glyphicon-kreditu-txartel
glifiko glifiko-transferentzia
glifiko glifiko-tresneria
glifiko glifiko-goiburu
glifiko glyphicon-konprimitu
glifiko glyphicon-aurikularra
glifiko glyphicon-telefono-alt
glifiko glifiko-dorre
glifiko glyphicon-estatistikak
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-azpitituluak
glifiko glyphicon-soinu-estereo
glyphicon glyphicon-soinu-dolby
glyphicon glyphicon-soinua-5-1
glyphicon glyphicon-soinu-6-1
glyphicon glyphicon-soinu-7-1
glifiko glyphicon-copyright-marka
glifiko glyphicon-erregistro-marka
glyphicon glyphicon-cloud-deskarga
glyphicon glyphicon-cloud-upload
glyphicon gliphicon-zuhaitz-konifero
glyphicon gliphicon-zuhaitz-erorerorko
glyphicon glyphicon-cd
glyphicon glyphicon-gorde-fitxategia
glyphicon glyphicon-ireki-fitxategia
glifiko glifiko-maila-gora
glifiko glifiko-kopia
glifiko glifiko-itsatsi
glifiko glyphicon-alerta
glifiko glifiko-berdintzaile
glifiko glifiko-errege
glifiko glifiko-erregina
glifiko glifiko-peoi
glifiko glyphicon-gotzain
glifiko glifiko-zaldun
glifiko glyphicon-haur-formula
glyphicon glyphicon-karpa
glifiko glifiko-arbela
glifiko glifiko-ohe
glifiko glifiko-sagar
glifiko glifiko-ezabatu
glifiko glifiko-erloju
glifiko glyphicon-lanpara
glifiko glifiko-bikoiztu
glifiko glyphicon-txerri-kutxa
glifiko glifiko-guraize
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glifiko glyphicon-yen
glifiko glyphicon-jpy
glifiko glifiko-errublo
glifiko glyphicon-igurtzi
glifiko glifiko-eskala
glyphicon glyphicon-izotz-pirula
glyphicon glyphicon-izotz-pirula dastatu
glifiko glyphicon-hezkuntza
glifiko glyphicon-aukera-horizontal
glifiko glyphicon-aukera-bertikala
glyphicon glyphicon-menu-hanburgesa
glyphicon glyphicon-modal-leihoa
glifiko glifiko-olio
glifiko glyphicon-ale
glifiko glyphicon-eguzkitako betaurrekoak
glifiko glifiko-testu-tamaina
glifiko glifiko-testu-kolorea
glifiko glifiko-testu-hondo
glifiko glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glifiko glyphicon-objektu-lerrokatu-horizontal
glifiko glyphicon-object-align-left
glifiko glyphicon-objektu-lerrokatu-bertikala
glifiko glifiko-objektu-lerro-eskuin
glifiko glifiko-triangelu-eskuin
glifiko glifiko-triangelu-ezker
glifiko glifiko-triangelu-beheko
glifiko glifiko-triangelu-top
glifiko glyphicon-kontsola
glifiko glifiko-gainindize
glifiko glifiko-azpiindize
glifiko glyphicon-menu-ezker
glifiko glifiko-menu-eskuineko
glifiko glyphicon-menu-behera
glifiko glyphicon-menu-gora

Nola erabili

Errendimendu arrazoiengatik, ikono guztiek oinarrizko klase bat eta banakako ikono klase bat behar dute. Erabiltzeko, jarri hurrengo kodea ia edonon. Ziurtatu ikonoaren eta testuaren artean tarte bat uzten duzula betegarri egokirako.

Ez nahastu beste osagai batzuekin

Ikono-klaseak ezin dira zuzenean beste osagai batzuekin konbinatu. Ez dira erabili behar beste klaseekin batera elementu berean. Horren ordez, gehitu habiaratu bat <span>eta aplikatu ikono-klaseak <span>.

Elementu hutsetan erabiltzeko soilik

Ikono-klaseak testu-edukirik ez duten eta elementu seme-alabarik ez duten elementuetan soilik erabili behar dira.

Ikonoaren letra-tipoaren kokapena aldatzea

Bootstrap-ek ikonoen letra-tipoaren fitxategiak direktorioan kokatuko direla suposatzen du ../fonts/, konpilatutako CSS fitxategiekiko. Letra-fitxategi horiek mugitzeak edo izenak aldatzeak CSS-a hiru modu hauetako batean eguneratzea dakar:

Aldatu iturburu Gutxiago fitxategietan @icon-font-patheta/edo @icon-font-namealdagaiak.
Erabili Less konpilatzaileak eskaintzen duen URL erlatiboak aukera .
Aldatu url()bideak konpilatutako CSSan.

Erabili zure garapen-konfigurazio zehatza hobekien egokitzen den aukera.

Ikono eskuragarriak

Laguntza-teknologien bertsio modernoek CSS sortutako edukia iragarriko dute, baita Unicode karaktere zehatzak ere. Pantaila-irakurleetan nahi gabeko irteera eta nahasmena saihesteko (batez ere ikonoak dekoraziorako soilik erabiltzen direnean), aria-hidden="true"atributuarekin ezkutatzen ditugu.

Esanahia adierazteko ikono bat erabiltzen ari bazara (elementu apaingarri gisa soilik), ziurtatu esanahi hori laguntza-teknologiei ere helarazten zaiela; adibidez, sartu eduki gehigarria, .sr-onlyklasearekin ikusmen ezkutatuta.

Beste testurik gabeko kontrolak sortzen ari bazara (adibidez, <button>ikono bat besterik ez duena), beti eman behar duzu eduki alternatiboa kontrolaren helburua identifikatzeko, laguntza-teknologien erabiltzaileentzat zentzuzkoa izan dadin. Kasu honetan, aria-labelatributu bat gehi dezakezu kontrolean bertan.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Adibideak

Erabili itzazu botoietan, botoi-taldeetan tresna-barran, nabigazioan edo inprimaki-sarreran.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Alerta batean errore-mezu bat dela adierazteko erabiltzen den ikono bat .sr-only, laguntza-teknologien erabiltzaileei aholku hau helarazteko testu gehigarriarekin.

Sartu baliozko helbide elektroniko bat

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

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

Adibidea

Itzulbi ezazu goitibeherako abiarazlea eta goitibeherako menua .dropdown, edo deklaratzen duen beste elementu batean position: relative;. Ondoren, gehitu menuaren HTMLa.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Goitibeherako menuak alda daitezke gora zabaltzeko (behera beharrean) .dropupgurasoari gehituz.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Lerrokatzea

Lehenespenez, goitibeherako menu bat automatikoki kokatzen da % 100ean bere gurasoaren goiko eta ezkerreko aldean. Gehitu .dropdown-menu-righta .dropdown-menueskuinera lerrokatu goitibeherako menua.

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

Goiburuak

Gehitu goiburu bat ekintzen atalak etiketatzeko edozein goitibeherako menutan.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Banatzailea

Gehitu zatitzailea goitibeherako menu batean estekak bereizteko.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Menu-elementuak desgaituta

Gehitu .disableda <li>goitibeherako esteka desgaitzeko.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Talde botoi sorta bat lerro bakarrean botoi taldearekin. Gehitu aukerako JavaScript irratia eta kontrol-laukiaren estiloko portaera gure botoien pluginarekin .

Botoien taldeetako tresna-informazioek eta popover-ek ezarpen berezia behar dute

Tresna-aholkuak edo popover-ak erabiltzen dituzunean, elementuen barruan .btn-group, nahi ez diren albo-ondorioak saihesteko aukera zehaztu beharko duzu container: 'body'(adibidez, elementua gero eta zabalagoa izatea eta/edo ertz biribilduak galtzea tresna-informazioa edo popover-a abiarazten denean).

Ziurtatu zuzena `role`eta eman etiketa

Laguntza-teknologiek (pantaila-irakurgailuak, esaterako) botoi sorta bat multzokatuta dagoela adierazteko, roleatributu egoki bat eman behar da. Botoien taldeetarako, hau izango litzateke role="group", tresna-barrak, berriz, role="toolbar".

Salbuespen bat kontrol bakarra duten taldeak dira (adibidez, elementuekin justifikatutako botoi-taldeak<button> ) edo goitibeherako zerrenda bat.

Gainera, taldeei eta tresna-barrari etiketa esplizitua eman behar zaie, teknologia laguntzaile gehienek bestela ez baitituzte iragarriko, roleatributu zuzena egon arren. Hemen emandako adibideetan, erabiltzen dugu aria-label, baina bezalako alternatibak aria-labelledbyere erabil daitezke.

Oinarrizko adibidea

Itzulbiratu botoi sorta bat .btnbarruan .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

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

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

Tamaina

Botoien tamainako klaseak talde bateko botoi guztiei aplikatu beharrean, gehitu .btn-group-*bakoitzari .btn-group, talde anitz habiatzerakoan barne.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Habia egitea

Jarri bat .btn-groupbeste baten barruan .btn-groupgoitibeherako menuak botoi batzuekin nahastuta nahi dituzunean.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Aldaera bertikala

Botoi multzo bat horizontalki baino bertikalki pilatuta agertzea. Botoien zatitutako goitibeherako zerrendak ez dira onartzen hemen.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Botoi-talde justifikatuak

Egin botoi talde bat tamaina berdinetan luzatzea bere gurasoaren zabalera osoa hartzeko. Botoien taldeko goitibehekin ere funtzionatzen du.

Mugak maneiatzea

Botoiak justifikatzeko erabiltzen diren HTML eta CSS espezifikoak direla eta (hots display: table-cell, ), haien arteko ertzak bikoiztu egiten dira. Botoi talde arruntetan margin-left: -1px, ertzak pilatzeko erabiltzen da, kendu beharrean. Hala ere, marginez du funtzionatzen display: table-cell. Ondorioz, Bootstrap-en egin dituzun pertsonalizazioen arabera, baliteke ertzak kendu edo koloreztatu nahi izatea.

IE8 eta ertzak

Internet Explorer 8k ez ditu botoien ertzak errendatzen justifikatutako botoien talde bateko botoietan, aktibatuta egon <a>edo <button>elementuetan egon. Horri aurre egiteko, bildu botoi bakoitza beste batean .btn-group.

Ikus #12476 informazio gehiagorako.

`<a>`Elementuekin _

.btnBildu s- sail bat besterik ez .btn-group.btn-group-justified.

Ezkerra Erdikoa Eskuin

Ezkerra Erdikoa

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Botoi gisa jarduten duten estekak

Elementuak <a>botoi gisa jarduteko erabiltzen badira (orriaren funtzionaltasuna abiaraziz, uneko orrialdeko beste dokumentu edo atal batera nabigatu beharrean), . egokia ere eman behar zaie role="button".

`<button>`Elementuekin _

<button>Elementuekin justifikatutako botoi-taldeak erabiltzeko , botoi bakoitza botoi-talde batean bildu behar duzu . Arakatzaile gehienek ez dute behar bezala aplikatzen gure CSS <button>elementuei justifikatzeko, baina botoien goitibeherako aukerak onartzen ditugunez, hori landu dezakegu.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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

Plugin menpekotasuna

Botoien goitibeherako goitibeherako plugina zure Bootstrap bertsioan sartzea eskatzen dute.

Botoi bakarreko goitibeherakoak

Bihurtu botoi bat goitibeherako hautagailu batean oinarrizko marka-aldaketa batzuekin.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Zatitu botoien goitibehurrak

Era berean, sortu zatitutako botoien goitibehurrak marka-aldaketa berberekin, botoi bereizi batekin soilik.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Tamaina

Botoien goitibeharrek tamaina guztietako botoiekin funtzionatzen dute.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Dropup aldakuntza

.dropupAktibatu elementuen gaineko goitibeherako menuak gurasoari gehituz .

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Zabaldu inprimaki-kontrolak testua edo botoiak gehituz testuan oinarritutako edozeinen aurretik, ondoren edo bi aldeetan <input>. Erabili edo .input-groupbatekin elementuak bakar baten aurretik jartzeko .input-group-addonedo .input-group-btneransteko .form-control.

Testuzkoak `<input>`soilik

Saihestu <select>hemen elementuak erabiltzea, WebKit arakatzaileetan ezin direlako guztiz estilizatu.

Saihestu <textarea>hemen elementuak erabiltzea, haien rowsatributua ez baita errespetatuko kasu batzuetan.

Sarrera-taldeetako tresna-informazioek eta popover-ek ezarpen berezia behar dute

Tresna-aholkuak edo popover-ak erabiltzen dituzunean, elementuen barruan .input-group, nahi ez diren albo-ondorioak saihesteko aukera zehaztu beharko duzu container: 'body'(adibidez, elementua zabaltzen ari den edo/eta bere ertz biribilduak galtzen ditu tresna-informazioa edo popover-a abiarazten denean).

Ez nahastu beste osagai batzuekin

Ez nahasi inprimaki-taldeak edo sareko zutabe-klaseak zuzenean sarrera-taldeekin. Horren ordez, habiatu sarrera-taldea inprimaki-taldearen edo sarearekin erlazionatutako elementuaren barruan.

Gehitu beti etiketak

Pantaila-irakurleek arazoak izango dituzte zure inprimakiekin sarrera bakoitzeko etiketarik sartzen ez baduzu. Sarrera-talde hauetarako, ziurtatu etiketa edo funtzionalitate gehigarririk laguntza-teknologietara helarazten dela.

Erabili behar den teknika zehatza ( <label>elementu ikusgaiak, klasea <label>erabiliz ezkutatutako elementuak edo , , , edo atributuaren erabilera) eta zer informazio gehigarri helarazi behar den aldatuko dira inplementatzen ari zaren interfazearen widget mota zehatzaren arabera. Atal honetako adibideek iradokitako hurbilketa batzuk eskaintzen dituzte..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

Oinarrizko adibidea

Jarri gehigarri edo botoi bat sarrera baten bi alboetan. Sarrera baten bi aldeetan ere jar dezakezu bat.

Ez dugu onartzen hainbat gehigarri ( .input-group-addonedo .input-group-btn) alde bakarrean.

Ez ditugu inprimaki-kontrol anitz onartzen sarrera-talde bakarrean.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Tamaina

Gehitu inprimaki-tamaina-klase erlatiboak .input-groupberari eta barruko edukiak automatikoki aldatuko dira tamainaz, ez da beharrezkoa inprimakien kontrol-tamaina-klaseak elementu bakoitzean errepikatu.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Kontrol-laukiak eta irrati gehigarriak

Jarri edozein kontrol-laukia edo irrati-aukera sarrera-talde baten gehigarrian testuaren ordez.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Botoien gehigarriak

Sarrera-taldeetako botoiak pixka bat desberdinak dira eta habia-maila gehigarri bat behar dute. ren ordez , botoiak biltzeko .input-group-addonerabili beharko dituzu . .input-group-btnBeharrezkoa da baliogabetu ezin diren arakatzaile-estilo lehenetsiak direla eta.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Goitibeherako botoiak

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Segmentatutako botoiak

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Botoi anitz

Alde bakoitzeko gehigarri bakarra izan dezakezun arren, botoi bat baino gehiago izan ditzakezu .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Bootstrap-en erabilgarri dauden nabiek markaketa partekatua dute, oinarrizko .navklasetik hasita, baita partekatutako egoerak ere. Trukatu modifikatzaile klaseak estilo bakoitzaren artean aldatzeko.

Fitxen paneletarako navs erabiltzeak JavaScript fitxen plugina behar du

Tabulatzeko eremuak dituzten fitxetarako, fitxak JavaScript plugina erabili behar duzu . Markaketak atributu gehigarriak roleeta ARIA ere beharko ditu; ikusi pluginaren adibideko markaketa xehetasun gehiagorako.

Egin eskuragarri nabigazio gisa erabiltzen diren nabigazioak

Nabigazio-barra bat emateko nabigazio-barra erabiltzen ari bazara, ziurtatu a gehitzen duzula role="navigation"gailuaren guraso-edukiontzirik logikoenean <ul>, edo <nav>nabigazio osoaren inguruan elementu bat bildu. Ez gehitu rola <ul>berari, honek laguntza-teknologiek benetako zerrenda gisa iragartzea eragotziko lukeelako.

Fitxak

Kontuan izan klaseak oinarrizko klasea .nav-tabsbehar duela ..nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Pilulak

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

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Pilulak ere bertikalean pila daitezke. Gehitu besterik ez .nav-stacked.

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

Justifikatuta

Erraz egin fitxak edo pilulak gurasoaren zabalera berdina duten 768 px baino zabalagoko pantailetan .nav-justified. Pantaila txikiagoetan, nabigazio estekak pilatzen dira.

Justifikatutako nabigazio-barrako nabigazio estekak ez dira onartzen.

Safari eta erantzunezko nabigazio justifikatuak

9.1.2 bertsiotik aurrera, Safari-k akats bat erakusten du, zeinak arakatzailea horizontalki aldatzeak nabigazio justifikatuan errendatzeko akatsak eragiten dituena, freskatzean garbitzen direnak. Akats hau justifikatutako nabigazio adibidean ere agertzen da .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Desgaitutako estekak

Nabigaziorako edozein osagaitarako (fitxak edo pilulak), gehitu esteka grisetarako eta ez pasatzeko.disabled efekturik .

Estekaren funtzionalitateak ez du eraginik

Klase honek itxura bakarrik aldatuko du <a>, ez funtzionaltasuna. Erabili JavaScript pertsonalizatua hemen estekak desgaitzeko.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Goitibehurrak erabiliz

Gehitu goitibeherako menuak HTML gehigarri batekin eta goitibeherako JavaScript pluginarekin .

Goitibeherako fitxak

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Goitibeherako pilulak

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Nabigazio-barrak zure aplikazio edo gunerako nabigazio-goiburu gisa balio duten meta osagai sentikorrak dira. Tolestuta hasten dira (eta txandaka daitezke) mugikorreko ikuspegietan eta horizontal bihurtzen dira erabilgarri dagoen ikuspegiaren zabalera handitu ahala.

Justifikatutako nabigazio-barrako nabigazio estekak ez dira onartzen.

Edukia gainezka

Bootstrap-ek ez dakienez zure nabigazio-barrako edukiak zenbat leku behar duen, baliteke edukia bigarren errenkada batean biltzearekin arazoak izatea. Hau konpontzeko, egin dezakezu:

Murriztu nabigazio-barrako elementuen kopurua edo zabalera.
Ezkutatu nabigazio-barrako elementu batzuk pantaila-tamaina jakin batzuetan erabilgarritasun klasikoak erabiliz .
Aldatu nabigazio-barra tolestutako eta modu horizontaletik aldatzeko puntua. Pertsonalizatu @grid-float-breakpointaldagaia edo gehitu zure multimedia-kontsulta.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Ordeztu navbar marka zure irudiarekin testua <img>. Bere betegarria eta altuera dituenez, .navbar-brandbaliteke CSS batzuk gainidatzi behar izatea zure irudiaren arabera.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Jarri inprimakiaren edukia barruan .navbar-formlerrokadura bertikal egokia izateko eta portaera tolestua bista estuetan. Erabili lerrokatze-aukerak nabigazio-barrako edukiaren barruan non dagoen erabakitzeko.

Adibide gisa .navbar-form, bere kodearen zati handi bat .form-inlinemixin bidez partekatzen du. Inprimaki-kontrol batzuek, sarrera-taldeek adibidez, zabalera finkoak behar bezala agertzea behar dute nabigazio-barra batean.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Gehitu beti etiketak

Pantaila-irakurleek arazoak izango dituzte zure inprimakiekin sarrera bakoitzeko etiketarik sartzen ez baduzu. Lineako inprimaki hauetarako, etiketak ezkutatu ditzakezu .sr-onlyklasea erabiliz. Laguntza-teknologiei etiketa bat emateko beste metodo alternatibo batzuk daude, hala nola aria-label, aria-labelledbyedo titleatributua. Horietako bat ere ez badago, pantaila-irakurleek placeholderatributua erabil dezakete, baldin badago, baina kontuan izan placeholderez dela gomendatzen beste etiketa-metodo batzuen ordezko erabiltzea.

Gehitu .navbar-btnklasea <button>batean bizi ez diren elementuei <form>nabigazio barran bertikalki zentratzeko.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

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

<p class="navbar-text">Signed in as Mark Otto</p>

Nabigazio-barrako nabigazio-osagai arruntean ez dauden esteka estandarrak erabiltzen dituzten pertsonentzat, erabili .navbar-linkklasea nabigazio-barrako aukera lehenetsien eta alderantzizkoen kolore egokiak gehitzeko.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Lerrokatu nabigazio estekak, inprimakiak, botoiak edo testua, .navbar-leftedo .navbar-righterabilgarritasun klaseak erabiliz. Bi klaseek CSS flotatzaile bat gehituko dute zehaztutako norabidean. Adibidez, nabigazio estekak lerrokatzeko, jarri bereizita <ul>dagokien erabilgarritasun-klasearekin.

Klase hauek eta .-ren bertsio nahasiak dira .pull-left, .pull-rightbaina multimedia-kontsultei dagozkie nabigazio-barrako osagaiak gailuen tamainatan errazago maneiatzeko.

Gehitu .navbar-fixed-topeta sartu .containeredo .container-fluidbat zentroan eta pad nabigazio-barrako edukian.

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

Gorputzeko betegarria behar da

Nabigazio-barra finkoak zure beste edukia gainjarriko du, ez paddingbaduzu <body>. Probatu zure balioak edo erabili beheko gure zatia. Aholkua: lehenespenez, nabigazio-barrak 50 px-ko altuera du.

body { padding-top: 70px; }

Ziurtatu hau sartzen duzula Bootstrap CSS corearen ondoren .

Gehitu .navbar-fixed-bottometa sartu .containeredo .container-fluidbat zentroan eta pad nabigazio-barrako edukian.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Gorputzeko betegarria behar da

Nabigazio-barra finkoak zure beste edukia gainjarriko du, ez paddingbaduzu <body>. Probatu zure balioak edo erabili beheko gure zatia. Aholkua: lehenespenez, nabigazio-barrak 50 px-ko altuera du.

body { padding-bottom: 70px; }

Ziurtatu hau sartzen duzula Bootstrap CSS corearen ondoren .

Sortu zabalera osoko nabigazio-barra, orrialdearekin batera mugitzen dena, edo .navbar-static-topbat gehituz eta barneratuta erdiratu eta pad nabigazio-barrako edukiari..container.container-fluid

Klaseetan ez bezala, .navbar-fixed-*ez duzu betegarririk aldatu behar body.

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

Aldatu nabigazio-barraren itxura gehituz .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Ogi birrindua

Adierazi uneko orriaren kokapena nabigazio-hierarkia baten barruan.

Bereizleak automatikoki gehitzen dira CSS-n :beforeeta content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Paginazioa

Eman orrialde anitzeko orrien osagaiarekin zure webgunerako edo aplikaziorako orrialdeetarako estekak, edo orrialdearen alternatiba sinpleagoarekin .

Orrialde lehenetsia

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Orrigintzaren osagaia etiketatzea

Orrigintza-osagaia <nav>elementu batean bilduta egon behar da pantaila-irakurleetarako eta beste laguntza-teknologietarako nabigazio-atal gisa identifikatzeko. Horrez gain, orrialde batek nabigazio-atal bat baino gehiago izatea litekeena denez (esaterako, goiburuko nabigazio nagusia edo alboko barraren nabigazioa), komeni da horren helburua islatzen duen deskribapen bat aria-labelematea . <nav>Esate baterako, orrialdeketa-osagaia bilaketa-emaitzen multzo baten artean nabigatzeko erabiltzen bada, etiketa egokia izan daiteke aria-label="Search results pages".

Desgaitutako eta aktibo egoerak

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Aingura aktiboak edo desgaituak ordezkatzea gomendatzen dugu <span>, edo aingura kentzea aurreko/hurrengo gezien kasuan, klik-funtzionalitatea kentzeko nahi diren estiloak mantenduz.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Tamaina

Orrialde handiagoa ala txikiagoa al duzu? Gehitu .pagination-lgedo .pagination-smtamaina gehigarrietarako.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

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.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Lerrokaturiko estekak

Bestela, esteka bakoitza alboetara lerrokatu dezakezu:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Aukerako desgaitu egoera

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Adibidea

Adibide goiburua Berria

<h3>Example heading <span class="label label-default">New</span></h3>

Eskuragarri dauden aldaerak

Gehitu behean aipatutako modifikatzaile klaseetako bat etiketa baten itxura aldatzeko.

Lehenetsitako Arrakastaren Informazioa Abisua Arriskua _

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Tona etiketa dituzu?

Errendatzeko arazoak sor daitezke edukiontzi estu baten barruan lerroko dozenaka etiketa dituzunean, bakoitzak bere inline-blockelementua duela (ikono bat bezala). Honen inguruko bidea ezarpena da display: inline-block;. Testuingurua eta adibide bat ikusteko, ikus #13219 .

Erraz nabarmendu elementu berriak edo irakurri gabekoak <span class="badge">esteketan, Bootstrap nabigazioetan eta abar gehituta.

Sarrera-ontzia42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Norberaren kolapsoa

Elementu berririk edo irakurri gabekorik ez dagoenean, bereizgarriak tolestuko dira (CSS-ren :emptyhautatzailearen bidez), baldin eta edukirik ez badago.

Arakatzaileen arteko bateragarritasuna

:emptyTxapak ez dira berez tolestuko Internet Explorer 8-n, hautatzailerako laguntza falta duelako .

Nabigazio-egoera aktiboetara egokitzen da

Pilletako nabigazioetan txapak egoera aktiboetan jartzeko integratutako estiloak sartzen dira.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Osagai arina eta malgua, aukeran ikuspegi osoa heda dezakeena zure webguneko eduki nagusia erakusteko.

Kaixo Mundua!

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

Gehiago ikasi

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Jumbotron-a zabalera osoa izateko, eta ertz biribildurik gabe, jarri .containers guztietatik kanpo eta, horren ordez, gehitu .containerbarruan.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</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="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Hedatu Bootstrap-en sareta-sistema irudi txikien osagaiarekin, irudi, bideo, testu eta beste sareak erraz bistaratzeko.

Altuera eta/edo zabalera ezberdinetako irudi txikien Pinterest-en antzeko aurkezpena bilatzen ari bazara, hirugarrenen plugin bat erabili beharko duzu, hala nola Masonry , Isotope , edo Salvattore .

Lehenetsitako adibidea

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Eduki pertsonalizatuak

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.

Botoia Botoia

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.

Botoia Botoia

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.

Botoia Botoia

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Eman erabiltzailearen ohiko ekintzetarako testuinguruko iritzi-mezuak alerta-mezu erabilgarri eta malgu gutxi batzuekin.

Adibideak

Bildu edozein testu eta aukerako baztertzeko botoia .alerteta lau testuinguruko klaseetako batean (adibidez, .alert-success) oinarrizko alerta-mezuetarako.

Klase lehenetsirik ez

Alertak ez dute klase lehenetsirik, oinarrizko eta modifikatzaile klaseak soilik. Alerta gris lehenetsi batek ez du zentzu handiegirik, beraz, mota bat zehaztu behar duzu testuinguru-klasearen bidez. Aukeratu arrakasta, informazioa, abisua edo arriskua.

Ongi egina! Irakurri duzu alerta-mezu garrantzitsu hau.

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

Kontuz! Hobe zure burua egiaztatu, ez zara itxura ona.

Ai txorrota! Aldatu gauza batzuk eta saiatu berriro bidaltzen.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Baztertu daitezkeen alertak

.alert-dismissibleEraiki edozein alertaren gainean aukerako eta ixteko botoia gehituz .

JavaScript alerta-plugin behar du

Alerta baztergarriak guztiz funtzionatzeko, alertak JavaScript plugina erabili behar duzu .

Kontuz! Hobe zure burua egiaztatu, ez zara itxura ona.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Ziurtatu portaera egokia gailu guztietan

Ziurtatu datu-atributua duen <button>elementua erabiltzen duzula.data-dismiss="alert"

Loturak abisuetan

Erabili .alert-linkerabilgarritasun-klasea edozein alertaren barruan bat datozen koloretako estekak azkar emateko.

Ongi egina! Irakurri duzu alerta-mezu garrantzitsu hau .

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

Kontuz! Hobe zure burua egiaztatu, ez zara itxura ona .

Ai txorrota! Aldatu gauza batzuk eta saiatu berriro bidaltzen.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Eman iritzi eguneratua lan-fluxu edo ekintza baten aurrerapenari buruz, aurrerapen-barra sinple baina malguekin.

Arakatzaileen arteko bateragarritasuna

Aurrerapen-barrek CSS3 trantsizioak eta animazioak erabiltzen dituzte efektu batzuk lortzeko. Ezaugarri hauek ez dira onartzen Internet Explorer 9 eta ondorengo bertsioetan edo Firefoxen bertsio zaharragoetan. Opera 12-k ez du animaziorik onartzen.

Edukiaren Segurtasun-politika (CSP) bateragarritasuna

Zure webguneak onartzen ez duen Edukiaren Segurtasun Politika (CSP) badu style-src 'unsafe-inline', ezin izango dituzu lerroko styleatributuak erabili aurrerapen-barren zabalerak ezartzeko beheko adibideetan erakusten den moduan. CSP zorrotzekin bateragarriak diren zabalerak ezartzeko metodo alternatiboen artean, JavaScript pertsonalizatu txiki bat element.style.widtherabiltzea edo CSS klase pertsonalizatuak erabiltzea daude.

Oinarrizko adibidea

Aurrerapen-barra lehenetsia.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Etiketarekin

Kendu <span>with .sr-onlyclass aurrerapen-barratik ikusgai dagoen ehuneko bat erakusteko.

%60

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Etiketaren testua portzentaje baxuetan ere irakurgarria izaten jarraitzen duela ziurtatzeko, kontuan hartu min-widthaurrerapen-barran a gehitzea.

%0

%2

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Testuinguruko alternatibak

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

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Marraduna

Gradiente bat erabiltzen du marra-efektua sortzeko. Ez dago eskuragarri IE9n eta behean.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animatua

Gehitu .activehona .progress-bar-stripedmarra eskuinetik ezkerrera animatzeko. Ez dago eskuragarri IE9n eta behean.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Pilatuak

Jarri hainbat barra berdinean .progresspilatzeko.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

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

Euskarri lehenetsia

Multimedia lehenetsiak multimedia-objektu bat bistaratzen du (irudiak, bideoa, audioa) eduki-bloke baten ezkerrean edo eskuinean.

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

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.

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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.

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.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Klaseak .pull-lefteta .pull-rightexistitzen dira eta aurretik multimedia-osagaiaren zati gisa erabiltzen ziren, baina erabilera horretarako zaharkituta daude v3.3.0-tik aurrera. Gutxi gorabehera .media-lefteta -ren baliokideak dira , html-n ondoren jarri behar dena izan .media-rightezik ..media-right.media-body

Komunikabideen lerrokatzea

Irudiak edo beste euskarri batzuk goian, erdian edo behean lerrokatu daitezke. Lehenetsia goiko lerrokatuta dago.

Goiko lerrokatutako euskarria

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum is natoque penatibus eta magnis parturient montes, nascetur ridiculus mus.

Erdi lerrokaturiko euskarriak

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum is natoque penatibus eta magnis parturient montes, nascetur ridiculus mus.

Behean lerrokatuta dagoen euskarria

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum is natoque penatibus eta magnis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </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.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Zerrenda-taldeak osagai malgu eta indartsuak dira elementu-zerrenda sinpleak ez ezik, eduki pertsonalizatua duten konplexuak ere bistaratzeko.

Oinarrizko adibidea

Zerrenda-talde oinarrizkoena zerrenda elementuekin eta klase egokiekin ordenatu gabeko zerrenda bat besterik ez da. Eraiki ezazu ondoko aukerekin, edo zure CSS behar duzunean.

Cras justo odio
Dapibus ac facilitis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Txapak

Gehitu txapak osagaia zerrendako edozein elementuri eta automatikoki eskuinaldean kokatuko da.

14Cras justo odio
2Dapibus ac facilitis in
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Lotutako elementuak

Lotu zerrenda-taldearen elementuak zerrenda-elementuen ordez aingura-etiketak erabiliz (horrek gurasoa ere esan nahi du ) <div>baten ordez <ul>. Elementu bakoitzaren inguruan guraso indibidualen beharrik ez.

Cras justo odio Dapibus ac facilitis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Botoien elementuak

Zerrenda-taldearen elementuak botoiak izan daitezke zerrenda-elementuen ordez (horrek gurasoa ere esan nahi du ) <div>baten ordez <ul>. Elementu bakoitzaren inguruan guraso indibidualen beharrik ez. Ez erabili .btnhemen klase estandarrak.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Desgaitutako elementuak

Gehitu .disableda .list-group-itemgrisa desgaituta ager dadin.

Cras justo odio Dapibus ac facilitis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Testuinguruko klaseak

Erabili testuinguru-klaseak zerrendako elementuak estiloratzeko, lehenetsiak edo estekatuak. Estatua ere barne hartzen du .active.

Dapibus ac facilitis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

Dapibus ac facilitis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Eduki pertsonalizatuak

Gehitu ia edozein HTML barruan, baita estekatutako zerrenda taldeetarako ere, behean dagoena bezalakoa.

Zerrenda taldeko elementuen goiburua

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

Zerrenda taldeko elementuen goiburua

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

Zerrenda taldeko elementuen goiburua

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Beti beharrezkoa ez den arren, batzuetan zure DOM kutxa batean jarri behar duzu. Egoera horietarako, probatu panelaren osagaia.

Oinarrizko adibidea

Lehenespenez, egin beharreko guztia .paneloinarrizko ertza eta betegarri batzuk aplikatzea da, eduki batzuk edukitzeko.

Oinarrizko panelaren adibidea

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Goiburudun panela

Gehitu erraz goiburuko edukiontzi bat zure panelean .panel-heading. <h1>Edozein - klase <h6>batekin ere sar dezakezu .panel-titleaurre-estiloaren goiburu bat gehitzeko. <h1>Hala ere, --ren letra - tamainak <h6>baliogabetzen ditu .panel-heading.

Estekak koloreztatzeko, ziurtatu estekak ipintzen dituzula goiburuetan .panel-title.

Panelaren goiburua izenbururik gabe

Panelaren edukia

Panelaren izenburua

Panelaren edukia

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panela oinarekin

Itzulbiratu botoiak edo bigarren mailako testua .panel-footer. Kontuan izan panel-oinek ez dituztela koloreak eta ertzak heredatzen testuinguru-aldaerak erabiltzean, ez baitira lehen planoan egon behar.

Panelaren edukia

Panel-oina

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Testuinguruko alternatibak

Beste osagai batzuek bezala, erraz bihurtu panel bat testuinguru jakin baterako esanguratsuagoa testuinguruko egoera-klaseren bat gehituz.

Panelaren izenburua

Panelaren edukia

Panelaren izenburua

Panelaren edukia

Panelaren izenburua

Panelaren edukia

Panelaren izenburua

Panelaren edukia

Panelaren izenburua

Panelaren edukia

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Mahaiekin

.tableGehitu panel baten barruan mugarik gabeko edozein diseinu bateratu baterako. Bat badago .panel-body, ertz gehigarri bat gehitzen dugu taularen goialdean bereizteko.

Panelaren goiburua

Paneleko eduki lehenetsi batzuk hemen. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Izena	Abizena	Erabiltzaile izena
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry	txoria	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Panelaren gorputzik ez badago, osagaia panelen goiburutik taulara mugitzen da etenik gabe.

Panelaren goiburua

#	Izena	Abizena	Erabiltzaile izena
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry	txoria	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Zerrenda taldeekin

Sartu erraz zabalera osoko zerrenda-taldeak edozein paneletan.

Panelaren goiburua

Paneleko eduki lehenetsi batzuk hemen. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilitis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Baimendu arakatzaileei bideo edo diapositiba-aurkezpenaren dimentsioak zehazten dituzten blokearen zabaleraren arabera, edozein gailutan behar bezala eskalatuko den proportzio intrintsekoa sortuz.

Arauak zuzenean aplikatzen zaizkie <iframe>, <embed>, <video>, eta <object>elementuei; aukeran, erabili ondorengo klase esplizitua .embed-responsive-itembeste atributu batzuen estiloarekin bat etorri nahi duzunean.

Pro-Tip! Ez duzu frameborder="0"zure <iframe>s-etan sartu behar, hori gainidazten dizugu.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Lehenetsi ondo

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

Begira, putzu batean nago!

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

Aukerako klaseak

Kontrolatu betegarria eta ertz biribilduak aukerako bi aldatzaile klaseekin.

Begira, putzu handi batean nago!

<div class="well well-lg">...</div>

Begira, putzu txiki batean nago!

<div class="well well-sm">...</div>

Osagaiak

Glifikonoak

Eskuragarri dauden glifoak

Nola erabili

Ez nahastu beste osagai batzuekin

Elementu hutsetan erabiltzeko soilik

Ikonoaren letra-tipoaren kokapena aldatzea

Ikono eskuragarriak

Adibideak

Goitibeherak

Adibidea

Lerrokatzea

Posizionamendu gehigarria eska dezake

.pull-rightLerrokatze zaharkitua

Goiburuak

Banatzailea

Menu-elementuak desgaituta

Botoi-taldeak

Botoien taldeetako tresna-informazioek eta popover-ek ezarpen berezia behar dute

Ziurtatu zuzena roleeta eman etiketa

Oinarrizko adibidea

Botoien tresna-barra

Tamaina

Habia egitea

Aldaera bertikala

Botoi-talde justifikatuak

Mugak maneiatzea

IE8 eta ertzak

<a>Elementuekin _

Botoi gisa jarduten duten estekak

<button>Elementuekin _

Botoien goitibeherakoak

Plugin menpekotasuna

Botoi bakarreko goitibeherakoak

Zatitu botoien goitibehurrak

Tamaina

Dropup aldakuntza

Sarrera-taldeak

Testuzkoak <input>soilik

Sarrera-taldeetako tresna-informazioek eta popover-ek ezarpen berezia behar dute

Ez nahastu beste osagai batzuekin

Gehitu beti etiketak

Oinarrizko adibidea

Tamaina

Kontrol-laukiak eta irrati gehigarriak

Botoien gehigarriak

Goitibeherako botoiak

Segmentatutako botoiak

Botoi anitz

Nabigazioak

Fitxen paneletarako navs erabiltzeak JavaScript fitxen plugina behar du

Egin eskuragarri nabigazio gisa erabiltzen diren nabigazioak

Fitxak

Pilulak

Justifikatuta

Safari eta erantzunezko nabigazio justifikatuak

Desgaitutako estekak

Estekaren funtzionalitateak ez du eraginik

Goitibehurrak erabiliz

Goitibeherako fitxak

Goitibeherako pilulak

Nabigazio barra

Nabigazio-barra lehenetsia

Edukia gainezka

JavaScript plugina behar du

Tolestutako mugikorreko nabigazio-barra eten-puntua aldatzen

Egin nabigazio-barrak eskuragarri

Markaren irudia

Formak

Gailu mugikorreko oharrak

Gehitu beti etiketak

Botoiak

Testuinguruari dagokion erabilera

Testua

Nabigazio ez diren estekak

Osagaien lerrokatzea

Osagai anitz eskuinera lerrokatuz

Goian finkatuta

Gorputzeko betegarria behar da

Behean finkatuta

`.pull-right`Lerrokatze zaharkitua

Ziurtatu zuzena `role`eta eman etiketa

`<a>`Elementuekin _

`<button>`Elementuekin _

Testuzkoak `<input>`soilik