Hnappahópar

Notaðu hnappahópa til að tengja marga hnappa saman sem einn samsettan íhlut. Byggðu þau með röð af <a>eða <button>þáttum.

Bestu starfsvenjur

Við mælum með eftirfarandi leiðbeiningum um notkun hnappahópa og tækjastikur:

• Notaðu alltaf sama þáttinn í einum hnappahópi, <a>eða <button>.
• Ekki blanda saman hnöppum af mismunandi litum í sama hnappahópnum.
• Notaðu tákn til viðbótar við eða í staðinn fyrir texta, en vertu viss um að innihalda alt og titiltexta þar sem við á.

Tengda hnappahópa með fellivalmyndum (sjá hér að neðan) ættu að vera kallaðir út sérstaklega og innihalda alltaf fellilista til að gefa til kynna fyrirhugaða hegðun.

Sjálfgefið dæmi

Svona lítur HTML út fyrir venjulegan hnappahóp sem byggður er með akkerismerkjahnöppum:

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

Tækjastiku dæmi

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>

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

Fáðu javascriptið »

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.

Dæmi um álagningu

Líkt og hnappahópur notar merkingin okkar venjulega hnappamerkingu, en með handfylli af viðbótum til að betrumbæta stílinn og styðja jQuery viðbót Bootstrap fellivalmyndarinnar.

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

Virkar með öllum hnappastærðum

Hnappavalmyndir virka í hvaða stærð sem er. hnappastærðirnar þínar til .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.

Yfirlit og dæmi

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.

Stærðir

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

<div class = "btn-group" > 
  ...
  <ul class = "fellivalmynd draga-hægri" > 
    <!-- tenglar í fellivalmyndinni -->
  </ul>
</div>

Dæmi um álagningu

Við víkkum út á venjulegum fellivalmyndum fyrir hnappa til að bjóða upp á aðra hnappaaðgerð sem virkar sem sérstakur fellivalmynd.

<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 = "fellivalmynd" > 
    <!-- 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 = "fellivalmynd" > 
    <!-- tenglar í fellivalmyndinni -->
  </ul>
</div>

Öflugur grunnflokkur

Allir nav íhlutir hér - flipar, pillur og listar - deila sömu grunnmerkingu og stílum í gegnum .navbekkinn.

Hvenær á að nota

Flipar og pillur eru frábærar fyrir efnishluta eða flakk á milli síðna með tengdu efni.

Jöfnun íhluta

Til að samræma nav-tengla skaltu nota .pull-lefteða .pull-rightgagnsemisflokkana. Báðir flokkar munu bæta við CSS floti í tilgreinda átt.

Grunnflipar

Taktu reglulega <ul>af hlekkjum og bættu við .nav-tabs:

• Heim
• Prófíll
• Skilaboð

<ul class = "nav nav-tabs" > 
  <li class = "virkur" > 
    <a href = "#" > Heim </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Grunnpillur

Taktu sama HTML, en notaðu .nav-pillsí staðinn:

• Heim
• Prófíll
• Skilaboð

<ul class = "nav nav-pillur" > 
  <li class = "virkur" > 
    <a href = "#" > Heim </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Hvernig á að stafla þeim

Þar sem flipar og töflur eru sjálfgefið láréttar, bætið bara við öðrum flokki, .nav-stacked, til að láta þær birtast lóðrétt staflað.

Staflaðir flipar

• Heim
• Prófíll
• Skilaboð

<ul class = "nav nav-flipa nav-staflað" > 
  ...
</ul>

Staflaðar pillur

• Heim
• Prófíll
• Skilaboð

<ul class = "nav nav-pillur nav-staflað" > 
  ...
</ul>

Ríkulegur matseðill gerður auðvelt

Fellivalmyndir í Bootstrap flipum og pillum eru mjög auðveldir og þurfa aðeins smá auka HTML og létt jQuery viðbót.

Farðu yfir á Javascript síðuna til að lesa skjölin um að frumstilla fellivalmyndir í Bootstrap.

Flipar með fellilista

• Heim
• Hjálp
• Fellilisti
  • Aðgerð
  • Önnur aðgerð
  • Eitthvað annað hérna
  • Aðskilinn hlekkur

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-switch" 
       data-toggle = "fellilisti"
       href = "#" >
        Fellilisti
        <b class = "caret" ></b> 
      </a>
    <ul class = "fellivalmynd" > 
      <!-- tenglar -->
    </ul>
  </li>
</ul>

Pilla með fellilista

• Heim
• Hjálp
• Fellilisti
  • Aðgerð
  • Önnur aðgerð
  • Eitthvað annað hérna
  • Aðskilinn hlekkur

<ul class = "nav nav-pillur" > 
  <li class = "dropdown" > 
    <a class = "dropdown-switch" 
       data-toggle = "fellilisti"
       href = "#" >
        Fellilisti
        <b class = "caret" ></b> 
      </a>
    <ul class = "fellivalmynd" > 
      <!-- tenglar -->
    </ul>
  </li>
</ul>

Leiðsögn í forritastíl

Nav listar veita einfalda og auðvelda leið til að búa til hópa af nav tengla með valfrjálsum hausum. Þau eru best notuð í hliðarstikum eins og Finder í OS X.

Skipulagslega eru þeir byggðir á sömu kjarna nav-stílum og flipar og pillum, svo notkun og sérsniðin eru einföld.

Með táknum

Einnig er auðvelt að útbúa siglingalista með táknum. Bættu við viðeigandi <i>merki með bekknum og þú ert búinn.

Lárétt skilrúm

Bættu við láréttum deili með því að búa til tóman listahlut með bekknum .divider, eins og svo:

<ul class = "nav nav-listi" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

Dæmi um siglingalista

Taktu lista yfir tengla og bættu við class="nav nav-list":

<ul class = "nav nav-listi" > 
  <li class = "nav-haus" > 
    Listahaus
  </li>
  <li class = "virkur" > 
    <a href = "#" > Heim </a> 
  </li>
  <li>
    <a href = "#" > Bókasafn </a> 
  </li>
  ...
</ul>

Dæmi með táknum

Sama dæmi, en með <i>merkjum fyrir tákn.

<ul class = "nav nav-listi" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Bókasafn
    </a>
  </li>
  ...
</ul>

Hvað er innifalið

Lífgaðu flipana þína lífi með einfaldri viðbót til að skipta á milli efnis í gegnum flipa. Bootstrap samþættir flipa sem hægt er að nota í fjórum stílum: efst (sjálfgefið), hægri, neðst og til vinstri.

Það er auðvelt að skipta á milli þeirra og þarf aðeins að breyta mjög litlu álagningu.

Farðu í flipa

Til að láta flipa hverfa inn skaltu bæta .fadevið hvern .tab-pane.

Krefst jQuery viðbót

Allir flipar sem hægt er að nota með flipa eru knúnir af léttu jQuery viðbótinni okkar. Lestu meira um hvernig á að lífga upp á flipa sem hægt er að nota á javascript skjalasíðunni .

Fáðu javascriptið →

Tabbable dæmi

Til að gera flipa flipahæfa skaltu búa til .tab-paneeinstakt auðkenni fyrir hvern flipa og pakka þeim inn í .tab-content.

Fyrir hægri eða vinstri stillta flipa skaltu vefja .nav-tabsog .tab-contentinn .tabbable.

Einföld álagning

Notkun flipa sem hægt er að nota þarf umbrotsdeild, sett af flipa og sett af efnisrúðum sem hægt er að flipa.

<div class = "tabbable" > <-- Aðeins krafist fyrir vinstri/hægri flipa --> 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Hluti 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Hluti 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Ég er í hluta 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hæ, ég er í kafla 2. </p>
    </div>
  </div>
</div>

Flipar neðst

Snúðu röð HTML og bættu við flokki til að setja flipa neðst.

<div class = "tabable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Flipar til vinstri

Skiptu um bekkinn til að setja flipa til vinstri.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Flipar til hægri

Skiptu um bekkinn til að setja flipa til hægri.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar vinnupallar

Navbar þarf aðeins nokkrar divs til að skipuleggja hana vel fyrir kyrrstæða eða fasta skjá.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "gámur" > 
      ...
    </div>
  </div>
</div>

Föst navbar

Festu stýristikuna efst eða neðst á útsýnisglugganum með viðbótarflokki á ystu deild, .navbar.

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

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

Þegar þú festir stýristikuna á, mundu að gera grein fyrir falda svæðinu fyrir neðan. Bættu 40px eða meira af fyllingu við <body>. Vertu viss um að bæta þessu við eftir kjarna Bootstrap CSS og fyrir valfrjálsa móttækilega CSS.

Vörumerki

Einfaldur hlekkur til að sýna vörumerkið þitt eða verkefnisheiti þarf aðeins akkerismerki.

<a class = "brand" href = "#" >  
  Nafn verkefnis
</a>

Eyðublöð í navbar

Til að stilla og staðsetja eyðublað á réttan hátt í stýristikunni skaltu bæta við viðeigandi flokkum eins og sýnt er hér að neðan. Fyrir sjálfgefið eyðublað skaltu innihalda .navbar-formog annað hvort .pull-lefteða .pull-righttil að samræma það rétt.

<form class = "navbar-form pull-vinstri" > 
  <inntakstegund = "texti" class = " span2 " >  
</form>

Til að fá sérsniðnara leitarform skaltu bæta .navbar-searchvið formog .search-queryvið inntakið fyrir sérhæfða stíla í stýristikunni.

<form class = "navbar-search pull-vinstri" > 
  <input type = "text" class = "search-query" staðgengill = "Leita" >   
</form>

Valfrjálst móttækilegur afbrigði

Það fer eftir magni efnis á efstu stikunni þinni, gætirðu viljað innleiða móttækilega valkostina. Til að gera það, pakkaðu nav-innihaldinu þínu inn í div, .nav-collapse.collapse, og bættu við stýrihnappinum, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "gámur" > 
 
      <!-- .btn-navbar er notað sem skipting fyrir hrunið efni navbar -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Vertu viss um að skilja vörumerkið eftir þarna úti ef þú vilt hafa það sýnt -->
      <a class = "brand" href = "#" > Heiti verkefnis </a>  
 
      <!-- Allt sem þú vilt falið í 940px eða minna, settu hér inni -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Nav tenglar

Auðvelt er að bæta við siglingaatriðum í gegnum óraðaða lista.

<ul class = "nav" > 
  <li class = "virkur" > 
    <a href = "#" > Heim </a> 
  </li>
  <li><a href = "#" > Tengill </a></li> 
  <li><a href = "#" > Tengill </a></li> 
</ul>

Þú getur auðveldlega bætt skiptingum við nav tenglana þína með tómu listaatriði og einföldum flokki. Bættu þessu bara við á milli tengla:

<ul class = "nav" > 
  ...
  <li class = "deilir-lóðrétt" ></li> 
  ...
</ul>

Jöfnun íhluta

Til að samræma nav, leitarform eða texta, notaðu .pull-lefteða .pull-righttólaflokkana. Báðir flokkar munu bæta við CSS floti í tilgreinda átt.

Bætir við fellivalmyndum

Það er mjög einfalt að bæta fellivalmyndum og fellivalmyndum við nav, en krefst þess að nota javascript viðbótina okkar .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-rofi"
          data-toggle = "fellilisti" >
          Reikningur
          <b class = "caret" ></b> 
    </a>
    <ul class = "fellivalmynd" > 
      ...
    </ul>
  </li>
</ul>

Fáðu javascriptið →

Texti í stýristikunni

Vefjið textastrengi inn í <.navbar-text>, venjulega á <p>merkimiða fyrir rétta leið og lit.

Af hverju að nota þá

Breadcrumb flakk er notað sem leið til að sýna notendum hvar þeir eru í forriti eða vefsvæði, en ekki fyrir aðalleiðsögn. Haltu notkun þeirra dreifðri og hnitmiðuðum til að skila árangri.

Dæmi

Eitt dæmi sýnt þar sem það gæti birst á mörgum síðum.

• Heim

• Heim /
• Bókasafn

• Heim /
• Bókasafn /
• Gögn

Markup

HTML er staðall óraðaður listi þinn með tenglum.

<ul class = "brauðmola" > 
  <li>
    <a href = "#" > Heim </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Bókasafn </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Gögn </li> 
</ul>

Hvenær á að nota

Ofur einfölduð og lítillega stíluð blaðsíðugerð innblásin af Rdio, frábært fyrir forrit 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.

Staðhæfir síðutenglar

Tenglar eru sérhannaðar og virka við ýmsar aðstæður með réttum flokki. .disabledfyrir ósmellanlega tengla og .activefyrir núverandi síðu.

Sveigjanleg röðun

Bættu við öðrum hvorum tveggja valkvæðra flokka til að breyta röðun blaðsíðutengla: .pagination-centeredog .pagination-right.

Dæmi

Sjálfgefinn blaðsíðuhluti er sveigjanlegur og virkar í mörgum afbrigðum.

Markup

Vafið inn í <div>, blaðsíðugerð er bara <ul>.

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

Um símann

Símboðshlutinn er sett af tenglum fyrir einfaldar útfærslur á síðusniði með léttri álagningu og jafnvel léttari stílum. Það er frábært fyrir einfaldar síður eins og blogg eða tímarit.

Valfrjálst óvirkt ástand

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

Sjálfgefið dæmi

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

• Fyrri
• Næst

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

• ← Eldri
• Nýrri →

<ul class = "pager" > 
  <li class = "fyrri" > 
    <a href = "#" > ← Eldri </a> 
  </li>
  <li class = "næsta" > 
    <a href = "#" > Nýrri → </a> 
  </li>
</ul>

Um

Merki eru litlir, einfaldir hlutir til að sýna vísir eða talningu af einhverju tagi. Þeir eru almennt að finna í tölvupóstforritum eins og Mail.app eða í farsímaforritum fyrir tilkynningar.

Námskeið í boði

Bootstrap býður upp á léttan, sveigjanlegan íhlut sem kallast hetjueining til að sýna efni á síðunni þinni. Það virkar vel á markaðs- og efnisþungum síðum.

Markup

Vefjið efnið inn í divsvona:

<div class = "hetja-eining" > 
  <h1> Fyrirsögn </h1>
  <p> Merkiorð </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Læra meira
    </a>
  </p>
</div>

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 = "síðuhaus" > 
  <h1> Dæmi fyrir síðuhaus </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ð

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.

Álagningin

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 = "smámyndir" > 
  <li class = "span3" > 
    <a href = "#" class = "smámynd" >  
      <img src = "https://placehold.it/260x180" 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 = "smámyndir" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Smámyndamerki </h5>
      <p> Yfirskrift smámynda hér... </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.

Endurskrifaður grunnflokkur

Með Bootstrap 2 höfum við einfaldað grunnflokkinn: .alertí stað .alert-message. Við höfum líka minnkað lágmarksálagningu sem krafist er - nei <p>er sjálfgefið áskilið, bara ytri <div>.

Stök viðvörunarskilaboð

Fyrir endingarbetri íhlut með minni kóða, höfum við fjarlægt aðgreiningarútlitið fyrir blokkaviðvaranir, skilaboð sem koma með meiri fyllingu og venjulega meiri texta. Bekkurinn hefur líka breyst í .alert-block.

Passar vel með javascript

Bootstrap kemur með frábært jQuery viðbót sem styður viðvörunarskilaboð, sem gerir það fljótt og auðvelt að vísa þeim frá.

Fáðu viðbótina »

Dæmi um viðvaranir

Settu skilaboðin þín og valfrjálst lokunartákn í div með einföldum flokki.

<div class = "viðvörun" > 
  <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>

Höfuð upp! iOS tæki krefjast href="#"til að vísa frá tilkynningum. Vertu viss um að láta það fylgja með og gagnaeigininni fyrir tákn fyrir lokun akkeris. Að öðrum kosti geturðu notað buttonþátt með gagnaeigindinni, sem við höfum valið að gera fyrir skjölin okkar.

Útvíkkaðu auðveldlega staðlaða viðvörunarskilaboðin með tveimur valfrjálsum flokkum: .alert-blockfyrir meiri fyllingu og textastýringar og .alert-headingfyrir samsvarandi fyrirsögn.

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

Villa eða hætta

<div class = "alert alert-error" > 
  ...
</div>

Árangur

<div class = "alert alert-success" > 
  ...
</div>

Upplýsingar

<div class = "alert alert-info" > 
  ...
</div>

Basic

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

<div class = "framfarir" > 
  <div class = "bar" 
       style = " breidd : 60 %; " ></div> 
</div>

Röndótt

Notar halla til að búa til röndótt áhrif (engin IE).

<div class = "framvinda framfarir-röndótt" > 
  <div class = "bar" 
       style = " breidd : 20 %; " ></div> 
</div>

Hreyfimyndir

Tekur röndótta dæmið og lífgar það (engin IE).

<div class = "framvinda framfarir-röndótt 
     virkur" >
  <div class = "bar" 
       style = " breidd : 40 %; " ></div> 
</div>

Fleiri litir

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

Röndóttar stangir

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

Hegðun

Framvindustikur nota CSS3 umbreytingar, þannig að ef þú stillir breiddina á virkan hátt með javascript mun hún breyta stærðinni vel.

Ef þú notar .activebekkinn munu .progress-stripedframvindustikurnar þínar lífga rendurnar frá vinstri til hægri.

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.

Opera og IE styðja ekki hreyfimyndir eins og er.

Wells

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

<div class = "jæja" > 
  ...
</div>

Loka táknið

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

×

<button class = "loka" > × </hnappur> 

iOS tæki þurfa href="#" fyrir smelliviðburði ef þú notar frekar akkeri.

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