Íhlutir

Tugir endurnýtanlegra íhluta sem eru smíðaðir til að veita leiðsögn, viðvaranir, popovers og fleira.

Dæmi

Tveir grunnvalkostir ásamt tveimur sértækari afbrigðum.

Einn hnappahópur

Vefjið röð af hnöppum með .btninn .btn-group.

<div class="btn-group">
  <button class="btn">Vinstri</button>
  <button class="btn">Miðjan</button>
  <button class="btn">Hægri</button>
</div>

Margir hnappahópar

Sameina sett af <div class="btn-group">í a <div class="btn-toolbar">fyrir flóknari íhluti.

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

Lóðréttir hnappahópar

Láttu hóp af hnöppum birtast lóðrétt staflað frekar en lárétt.

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

Gátbox og útvarpsbragð

Hnappahópar geta einnig virkað sem talstöðvar, þar sem aðeins einn hnappur getur verið virkur, eða gátreitir, þar sem einhver fjöldi hnappa getur verið virkur. Skoðaðu JavaScript skjölin fyrir það.

Fellilistar í hnappahópum

Höfuð upp! Hnappar með fellivalmyndum verða að vera hver fyrir sig umbúðir í sínum eigin .btn-groupinnan til að hægt sé .btn-toolbarað birta rétta.

Yfirlit og dæmi

Notaðu hvaða hnapp sem er til að kveikja á fellivalmynd með því að setja hana í .btn-groupog ​​setja upp rétta valmyndarmerkingu.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Aðgerð
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- tenglar í fellivalmyndinni -->
  </ul>
</div>

Virkar með öllum hnappastærðum

Hnappavalmyndir virka í hvaða stærð sem er: .btn-large, .btn-small, eða .btn-mini.

Krefst JavaScript

Fellivalmyndir fyrir hnappa krefjast þess að Bootstrap fellivalmyndin virki.

Í sumum tilfellum – eins og farsíma – munu fellivalmyndir ná út fyrir útsýnisgluggann. Þú þarft að leysa jöfnunina handvirkt eða með sérsniðnu JavaScript.


Dreifingarhnappar fellivalmyndir

Með því að byggja á hnappahópstílum og álagningu getum við auðveldlega búið til skiptan hnapp. Skiptunarhnappar eru með hefðbundinni aðgerð til vinstri og fellivalmynd til hægri með samhengistengingum.

<div class="btn-group">
  <button class="btn">Aðgerð</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </hnappur>
  <ul class="dropdown-menu">
    <!-- tenglar í fellivalmyndinni -->
  </ul>
</div>

Stærðir

Notaðu aukahnappaflokkana .btn-mini, .btn-small, eða .btn-largetil að stærð.

<div class="btn-group">
  <button class="btn btn-mini">Aðgerð</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </hnappur>
  <ul class="dropdown-menu">
    <!-- tenglar í fellivalmyndinni -->
  </ul>
</div>

Fellivalmyndir

Einnig er hægt að skipta um fellivalmyndir frá botni og upp með því að bæta einum flokki við næsta foreldri .dropdown-menu. Það mun snúa stefnunni á .caretog breyta valmyndinni sjálfri til að færast frá botni og upp í stað þess að toppa niður.

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </hnappur>
  <ul class="dropdown-menu">
    <!-- tenglar í fellivalmyndinni -->
  </ul>
</div>

Hefðbundin blaðsíðugerð

Einföld blaðsíðugerð innblásin af Rdio, frábært fyrir öpp og leitarniðurstöður. Erfitt er að missa af stóra kubbnum, hann er auðvelt að skala og býður upp á stór smellisvæði.

<div class="pagination">
  <ul>
    <li><a href="#">Fyrri</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="#">Næst</a></li>
  </ul>
</div>

Valmöguleikar

Fötluð og virk ríki

Tenglar eru sérhannaðar fyrir mismunandi aðstæður. Notaðu .disabledfyrir ósmellanlega tengla og .activetil að gefa til kynna núverandi síðu.

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

Þú getur valfrjálst skipt út virkum eða óvirkum akkerum fyrir span til að fjarlægja smellivirkni á meðan þú heldur fyrirhuguðum stílum.

<div class="pagination">
  <ul>
    <li class="disabled"><span>«</span></li>
    <li class="active"></span>1</span></li>
    ...
  </ul>
</div>

Stærðir

Langar þig í stærri eða minni blaðsíðu? Bættu við .pagination-large, .pagination-small, eða .pagination-minifyrir fleiri stærðir.

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

Jöfnun

Bættu við einum af tveimur valkvæðum flokkum til að breyta röðun blaðsíðutengla: .pagination-centeredog .pagination-right.

<div class="pagination pagination-centered">
  ...
</div>
<div class="pagination pagination-right">
  ...
</div>

Símboðari

Fljótlegir fyrri og næstu hlekkir fyrir einfaldar blaðsíðuútfærslur með léttri merkingu og stílum. Það er frábært fyrir einfaldar síður eins og blogg eða tímarit.

Sjálfgefið dæmi

Sjálfgefið er að síminn miðlar tengla.

<ul class="pager">
  <li><a href="#">Fyrri</a></li>
  <li><a href="#">Næst</a></li>
</ul>

Samræmdir tenglar

Að öðrum kosti geturðu stillt hvern hlekk við hliðarnar:

<ul class="pager">
  <li class="previous">
    <a href="#">← Eldri</a>
  </li>
  <li class="next">
    <a href="#">Nýrari →</a>
  </li>
</ul>

Valfrjálst óvirkt ástand

Símboðstenglar nota einnig almenna .disabledgagnsemisflokkinn úr síðuskipuninni.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">← Eldri</a>
  </li>
  ...
</ul>

Merki

Merki Markup
Sjálfgefið <span class="label">Default</span>
Árangur <span class="label label-success">Success</span>
Viðvörun <span class="label label-warning">Warning</span>
Mikilvægt <span class="label label-important">Important</span>
Upplýsingar <span class="label label-info">Info</span>
Öfugt <span class="label label-inverse">Inverse</span>

Merki

Nafn Dæmi Markup
Sjálfgefið 1 <span class="badge">1</span>
Árangur 2 <span class="badge badge-success">2</span>
Viðvörun 4 <span class="badge badge-warning">4</span>
Mikilvægt 6 <span class="badge badge-important">6</span>
Upplýsingar 8 <span class="badge badge-info">8</span>
Öfugt 10 <span class="badge badge-inverse">10</span>

Auðvelt að fella saman

Til að auðvelda útfærslu munu merkimiðar og merki einfaldlega hrynja (í gegnum :emptyveljara CSS) þegar ekkert efni er til innan.

Hetjueining

Léttur, sveigjanlegur hluti til að sýna lykilefni á síðunni þinni. Það virkar vel á markaðs- og efnisþungum síðum.

Halló heimur!

Þetta er einföld hetjueining, einfaldur íhlutur í jumbotron-stíl til að vekja aukna athygli á efni eða upplýsingum.

Læra meira

<div class="hero-unit">
  <h1>Fyrirsögn</h1>
  <p>Tilorð</p>
  <p>
    <a class="btn btn-primary btn-large">
      Læra meira
    </a>
  </p>
</div>

Síðuhaus

Einföld skel til h1að rýma og skipta hluta efnis á síðu á viðeigandi hátt. Það getur notað h1sjálfgefið smallfrumefni sem og flesta aðra hluti (með viðbótarstílum).

<div class="page-header">
  <h1>Dæmi fyrir síðuhaus <small>Undirtexti fyrir haus</small></h1>
</div>

Sjálfgefnar smámyndir

Sjálfgefið er að smámyndir Bootstrap séu hannaðar til að sýna tengdar myndir með lágmarks nauðsynlegri merkingu.

Mjög sérhannaðar

Með smá auka álagningu er hægt að bæta hvers kyns HTML efni eins og fyrirsögnum, málsgreinum eða hnöppum í smámyndir.

  • Smámyndamerki

    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.

    Aðgerð Aðgerð

  • Smámyndamerki

    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.

    Aðgerð Aðgerð

  • Smámyndamerki

    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.

    Aðgerð Aðgerð

Af hverju að nota smámyndir

Smámyndir (áður .media-gridfram að v1.4) eru frábærar fyrir töflur af myndum eða myndböndum, myndaleitarniðurstöður, smásöluvörur, eignasöfn og margt fleira. Þeir geta verið tenglar eða kyrrstætt efni.

Einföld, sveigjanleg álagning

Smámyndamerking er einföld - ulmeð hvaða fjölda liþátta sem er er allt sem þarf. Það er líka frábær sveigjanlegt, gerir ráð fyrir hvers kyns efni með aðeins meiri álagningu til að pakka innihaldinu þínu.

Notar ristastærðir dálka

Að lokum notar smámyndahlutinn núverandi kerfisflokka – eins og .span2eða .span3– til að stjórna smámyndavíddum.

Markup

Eins og áður hefur komið fram er nauðsynleg álagning fyrir smámyndir létt og einföld. Hér er að líta á sjálfgefna uppsetningu fyrir tengdar myndir :

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

Fyrir sérsniðið HTML efni í smámyndum breytist merkingin lítillega. Til að leyfa efni á blokkarstigi hvar sem er, skiptum við út <a>fyrir <div>svipað:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>Smámyndamerki</h3>
      <p>Smámyndatexti...</p>
    </div>
  </li>
  ...
</ul>

Fleiri dæmi

Kannaðu alla valkosti þína með hinum ýmsu töfluflokkum sem þér standa til boða. Þú getur líka blandað saman mismunandi stærðum.

Sjálfgefin viðvörun

Vefjið hvaða texta sem er og valfrjáls hafnahnappur inn .alertfyrir grunnviðvörunarskilaboð.

Viðvörun! Best að athuga sjálfan þig, þú lítur ekki of vel út.
<div class="alert">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Viðvörun!</strong> Best að athuga sjálfan þig, þú lítur ekki of vel út.
</div>

Hunsa hnappa

Mobile Safari og Mobile Opera vafrar, auk data-dismiss="alert"eigindarinnar, krefjast href="#"þess að viðvörunum sé vísað frá þegar <a>merki er notað.

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

Að öðrum kosti geturðu notað <button>þátt með gagnaeigindinni, sem við höfum valið að gera fyrir skjölin okkar. Þegar þú notar <button>verður þú að láta fylgja með type="button"eða eyðublöðin þín kunna ekki að skila inn.

<button type="button" class="close" data-dismiss="alert">×</button>

Hunsa tilkynningar með JavaScript

Notaðu viðvaranir jQuery viðbótina til að sleppa tilkynningum á fljótlegan og auðveldan hátt.


Valmöguleikar

Fyrir lengri skilaboð skaltu auka fyllinguna efst og neðst á viðvörunarumbúðirnar með því að bæta við .alert-block.

Viðvörun!

Best að athuga sjálfan þig, þú lítur ekki of vel út. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <h4>Viðvörun!</h4>
  Best að athuga sjálfan þig, þú ert ekki...
</div>

Samhengislegir valkostir

Bættu við valkvæðum flokkum til að breyta merkingu viðvörunar.

Villa eða hætta

Ó snappið! Breyttu nokkrum hlutum og reyndu að senda inn aftur.
<div class="alert alert-error">
  ...
</div>

Árangur

Vel gert! Þú lest þessi mikilvægu viðvörunarskilaboð.
<div class="alert alert-success">
  ...
</div>

Upplýsingar

Höfuð upp! Þessi viðvörun þarfnast athygli þinnar, en hún er ekki mjög mikilvæg.
<div class="alert alert-info">
  ...
</div>

Dæmi og álagning

Basic

Sjálfgefin framvindustika með lóðréttum halla.

<div class="framvindu">
  <div class="bar" style="width: 60%;"></div>
</div>

Röndótt

Notar halla til að búa til röndótt áhrif. Ekki fáanlegt í IE7-8.

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

Hreyfimyndir

Bættu .activevið til .progress-stripedað lífga rendurnar frá hægri til vinstri. Ekki í boði í öllum útgáfum af IE.

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Staflað

Settu margar stangir í sama .progresstil að stafla þeim.

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

Valmöguleikar

Fleiri litir

Framvindustikur nota suma af sömu hnappa- og viðvörunarflokkunum fyrir samræmdan stíl.

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Röndóttar stangir

Svipað og í föstu litunum höfum við fjölbreyttar röndóttar framvindustikur.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

Stuðningur við vafra

Framvindustikur nota CSS3 halla, umbreytingar og hreyfimyndir til að ná fram öllum áhrifum þeirra. Þessir eiginleikar eru ekki studdir í IE7-9 eða eldri útgáfum af Firefox.

Fyrri útgáfur en Internet Explorer 10 og Opera 12 styðja ekki hreyfimyndir.

Ágripsstíll fyrir hluti til að smíða ýmsar gerðir af íhlutum (eins og blogg athugasemdir, tíst, osfrv.) sem eru með vinstri eða hægri stilltri mynd við hlið textaefnis.

Sjálfgefið dæmi

Sjálfgefin miðill gerir kleift að láta miðlunarhlut (myndir, myndband, hljóð) fljóta til vinstri eða hægri við efnisreit.

Fyrirsögn fjölmiðla

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 í faucibus.

Fyrirsögn fjölmiðla

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 í faucibus.

Fyrirsögn fjölmiðla

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 í faucibus.
<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">Fjölmiðlafyrirsögn</h4>
    ...

    <!-- Hreiður miðlunarhlutur -->
    <div class="media">
      ...
    </div>
  </div>
</div>

Fjölmiðlalisti

Með smá auka álagningu geturðu notað fjölmiðla inni í listanum (gagnlegt fyrir athugasemdaþræði eða greinalista).

  • Fyrirsögn fjölmiðla

    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.

    Hreiður fjölmiðlafyrirsögn

    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.

    Hreiður fjölmiðlafyrirsögn

    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.

    Hreiður fjölmiðlafyrirsögn

    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.
  • Fyrirsögn fjölmiðla

    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">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Fjölmiðlafyrirsögn</h4>
      ...

      <!-- Hreiður miðlunarhlutur -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Notaðu brunninn sem einföld áhrif á frumefni til að gefa honum innfellda áhrif.

Sjáðu, ég er í brunni!
<div class="well">
  ...
</div>

Valfrjálsir flokkar

Stýrifylling og ávöl horn með tveimur valfrjálsum breytingaflokkum.

Sjáðu, ég er í brunni!
<div class="well well-large">
  ...
</div>
Sjáðu, ég er í brunni!
<div class="well well-small">
  ...
</div>

Loka táknið

Notaðu almenna lokunartáknið til að hafna efni eins og aðferðum og viðvörunum.

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

iOS tæki krefjast href="#"fyrir smella atburði ef þú vilt frekar nota akkeri.

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

Hjálparnámskeið

Einföld, einbeitt námskeið fyrir litlar breytingar á skjá eða hegðun.

.draga-vinstri

Fleygðu frumefni til vinstri

class="pull-vinstri"
.pull-left {
  fljóta: vinstri;
}

.draga til hægri

Fljóta frumefni til hægri

class="draga-hægri"
.pull-hægri {
  fljóta: rétt;
}

.þaggað

Breyttu lit frumefnis í#999

class="þaggað"
.þaggað {
  litur: # 999;
}

.hreinsun

Hreinsaðu floatá hvaða þætti sem er

class="clearfix"
.clearfix {
  *aðdráttur: 1;
  &:áður,
  &:eftir {
    sýna: borð;
    innihald: "";
  }
  &:eftir {
    ljóst: bæði;
  }
}