Nupurühmad

Kasutage nupurühmi, et ühendada mitu nuppu üheks komposiitkomponendiks. Koostage need elementide seeria <a>või <button>elementide abil.

Parimad tavad

Soovitame nupurühmade ja tööriistaribade kasutamiseks järgida järgmisi juhiseid.

• Kasutage alati sama elementi ühes nupurühmas <a>või <button>.
• Ärge segage samasse nupurühma erinevat värvi nuppe.
• Kasutage ikoone lisaks tekstile või selle asemel, kuid vajadusel lisage kindlasti alternatiiv- ja pealkirjatekst.

Rippmenüüdega seotud nuppude rühmad (vt allpool) tuleks eraldi välja kutsuda ja need peavad alati sisaldama rippmenüüd, mis näitab kavandatud käitumist.

Vaikimisi näide

Ankurmärgendi nuppudega loodud standardset nupurühma otsib HTML järgmiselt.

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

Tööriistariba näide

Keerulisemate komponentide jaoks ühendage komplektid <div class="btn-group">a-ks .<div class="btn-toolbar">

<div class = "btn-tööriistariba" > 
  <div class = "btn-grupp" > 
    ...
  </div>
</div>

Märkekasti ja raadio maitsed

Nupurühmad võivad toimida ka raadiotena, kus aktiivne võib olla ainult üks nupp, või märkeruutudena, kus võib olla aktiivne suvaline arv nuppe. Vaadake selle jaoks Javascripti dokumente .

Hankige javascript »

Nupurühmade rippmenüüd

Pea püsti! Rippmenüüga nupud peavad olema õigeks renderdamiseks eraldi mähitud .btn-group..btn-toolbar

Ülevaade ja näited

Kasutage mis tahes nuppu rippmenüü käivitamiseks, asetades selle a -sse .btn-groupja esitades õige menüümärgistuse.

Märgistuse näide

Sarnaselt nupurühmaga kasutab meie märgistus tavalist nuppude märgistust, kuid stiili täpsustamiseks ja Bootstrapi rippmenüü jQuery pistikprogrammi toetamiseks on lisatud käputäis täiendusi.

<div class = "btn-grupp" > 
  <a class = "btn dropdown-toggle" data-toggle = "rippmenüü" href = "#" >   
    Tegevus
    <span class = "caret" ></span> 
  </a>
  <ul class = "rippmenüü" > 
    <!-- rippmenüü lingid -->
  </ul>
</div>

Töötab kõigi suurustega nuppudega

Nuppude rippmenüüd töötavad igas suuruses. teie nuppude suurus on .btn-large, .btn-smallvõi .btn-mini.

Nõuab javascripti

Nuppude rippmenüüde toimimiseks on vaja Bootstrapi rippmenüü pistikprogrammi .

Mõnel juhul (nt mobiilis) ulatuvad rippmenüüd vaateavast väljapoole. Peate joonduse lahendama käsitsi või kohandatud JavaScripti abil.

Ülevaade ja näited

Tuginedes nupurühmade stiilidele ja märgistusele, saame hõlpsasti luua jagatud nupu. Tükeldatud nuppudel on vasakul tavaline toiming ja paremal rippmenüü lüliti kontekstipõhiste linkidega.

Suurused

Kasutage suuruse määramiseks lisanuppude klasse .btn-mini, .btn-smallvõi ..btn-large

<div class = "btn-grupp" > 
  ...
  <ul class = "rippmenüü paremale tõmbamine" > 
    <!-- rippmenüü lingid -->
  </ul>
</div>

Märgistuse näide

Laiendame tavaliste nuppude rippmenüüd, et pakkuda teist nuputoimingut, mis toimib eraldi rippmenüü käivitajana.

<div class = "btn-grupp" > 
  <button class = "btn" > Toiming </button> 
  <button class = "btn dropdown-toggle" data-toggle = "rippmenüü" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rippmenüü" > 
    <!-- rippmenüü lingid -->
  </ul>
</div>

Rippmenüüd

Rippmenüüd saab ka alt üles lülitada, lisades ühe klassi üksuse vahetule vanemale .dropdown-menu. See pöörab suunda ja asetab .caretmenüü ise ümber, et liikuda alt üles, mitte ülevalt alla.

<div class = "btn-group dropup" > 
  <button class = "btn" > Kukkumine </button> 
  <button class = "btn dropdown-toggle" data-toggle = "rippmenüü" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rippmenüü" > 
    <!-- rippmenüü lingid -->
  </ul>
</div>

Võimas baasklass

Kõik siin olevad navigeerimiskomponendid – vahekaardid, pillid ja loendid – jagavad klassis sama põhimärgistust ja stiile ..nav

Millal kasutada

Vahekaardid ja pillid sobivad suurepäraselt sisu jaotiste jaoks või seotud sisuga lehtede vahel navigeerimiseks.

Komponentide joondamine

Nav-linkide joondamiseks kasutage utiliidiklasse .pull-leftvõi . .pull-rightMõlemad klassid lisavad CSS-i ujuki määratud suunas.

Põhilised vahelehed

Võtke regulaarselt <ul>linke ja lisage .nav-tabs:

• Kodu
• Profiil
• Sõnumid

<ul class = "nav nav-tabs" > 
  <li class = "aktiivne" > 
    <a href = "#" > Avaleht </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Põhilised pillid

Võtke sama HTML, kuid kasutage .nav-pillsselle asemel:

• Kodu
• Profiil
• Sõnumid

<ul class = "nav nav-pills" > 
  <li class = "aktiivne" > 
    <a href = "#" > Avaleht </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Kuidas neid virna panna

Kuna vahelehed ja pillid on vaikimisi horisontaalsed, lisage lihtsalt teine ​​klass , .nav-stackedet need paistaksid vertikaalselt virnastatud.

Virnastatud vahelehed

• Kodu
• Profiil
• Sõnumid

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

Virnastatud pillid

• Kodu
• Profiil
• Sõnumid

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

Rikkalikud menüüd on lihtsaks tehtud

Bootstrapi vahekaartide ja pillide rippmenüüd on ülilihtsad ja nõuavad vaid veidi lisa-HTML-i ja kerget jQuery pistikprogrammi.

Minge Javascripti lehele, et lugeda dokumente Bootstrapi lähtestamise rippmenüüde kohta.

Rippmenüüdega vahelehed

• Kodu
• Abi
• Rippmenüü
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "rippmenüü" > 
    <a class = "dropdown-toggle" 
       data-toggle = "rippmenüü"
       href = "#" >
        Rippmenüü
        <b klass = "caret" ></b> 
      </a>
    <ul class = "rippmenüü" > 
      <!-- lingid -->
    </ul>
  </li>
</ul>

Rippmenüüdega pillid

• Kodu
• Abi
• Rippmenüü
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = "rippmenüü" > 
    <a class = "dropdown-toggle" 
       data-toggle = "rippmenüü"
       href = "#" >
        Rippmenüü
        <b klass = "caret" ></b> 
      </a>
    <ul class = "rippmenüü" > 
      <!-- lingid -->
    </ul>
  </li>
</ul>

Rakenduse stiilis navigeerimine

Navigeerimisloendid pakuvad lihtsat ja lihtsat viisi valikuliste päistega navigeerimislinkide rühmade loomiseks. Neid on kõige parem kasutada külgribadel, nagu näiteks OS X-i Finder.

Struktuuriliselt on need üles ehitatud samadele põhilistele navigeerimisstiilidele nagu vahekaardid ja pillid, nii et kasutamine ja kohandamine on lihtne.

Ikoonidega

Navi loendeid on ka lihtne ikoonidega varustada. Lisage klassiga õige <i>silt ja oletegi valmis.

Horisontaalsed jagajad

Lisage horisontaalne jaotur, luues klassiga tühja loendiüksuse .divider, näiteks järgmiselt:

<ul class = "nav nav-list" > 
  ...
  <li klass = "jagaja" ></li> 
  ...
</ul>

Navigeerimisloendi näide

Tehke linkide loend ja lisage class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-päis" > 
    Loendi päis
  </li>
  <li class = "aktiivne" > 
    <a href = "#" > Avaleht </a> 
  </li>
  <li>
    <a href = "#" > Teek </a> 
  </li>
  ...
</ul>

Näide ikoonidega

Sama näide, kuid <i>ikoonide siltidega.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i klass = "ikooniraamat" ></i> 
      Raamatukogu
    </a>
  </li>
  ...
</ul>

Mis on kaasas

Muutke oma vahelehed ellu lihtsa pistikprogrammiga, mis võimaldab vahekaartide kaudu sisu vahel vahetada. Bootstrap integreerib vahelehed neljas stiilis: ülemine (vaikeseade), parem, alumine ja vasak.

Nende vahel vahetamine on lihtne ja nõuab vaid väga väikese märgistuse muutmist.

Vahelehtedel tuhmumine

Vahelehtede tuhmumiseks lisage .fadeigale .tab-pane.

Nõuab jQuery pistikprogrammi

Kõiki vahekaarte toidab meie kerge jQuery pistikprogramm. Lisateavet vahekaartide vahekaartide ellu äratamise kohta lugege JavaScripti dokumentide lehelt .

Hankige javascript →

Tabatav näide

Vahelehtede vahekaartide muutmiseks looge .tab-paneigale vahelehele kordumatu ID ja mähkige need vahelehesse .tab-content.

Paremale või vasakule joondatud vahelehtede puhul mähkige .nav-tabsja .tab-contentsisse .tabbable.

Otsene märgistus

Tabeldatud vahekaartide kasutamine eeldab ümbrislauset, vahekaartide komplekti ja vahekaartide sisupaanide komplekti.

<div class = "tabable" > <!-- Nõutav ainult vasakpoolsete/parempoolsete vahekaartide puhul -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > 1. jaotis </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > 2. jaotis </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Olen 1. jaotises. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Tere, olen 2. jaotises. </p>
    </div>
  </div>
</div>

Sabid all

Pöörake HTML-i järjekorda ja lisage klass, et panna vahele vahelehed.

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

Vahekaardid vasakul

Vahetage klassi, et panna vahelehed vasakule.

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

Vahekaardid paremal

Vahetage klass, et panna vahelehed paremale.

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

Navbar-tellingud

Navigeerimisriba vajab staatilise või fikseeritud kuva jaoks sobivaks struktureerimiseks vaid mõnda div'i.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "konteiner" > 
      ...
    </div>
  </div>
</div>

Parandatud navigeerimisriba

Kinnitage navigeerimisriba vaateava üla- või alaossa lisaklassiga kõige välimises osas .navbar.

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

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

Navigeerimisriba kinnitamisel ärge unustage arvestada selle all oleva peidetud alaga. Lisage 40 pikslit või rohkem polsterdust <body>. Lisage see kindlasti pärast põhilist Bootstrapi CSS-i ja enne valikulist reageerivat CSS-i.

Brändi nimi

Lihtne link teie kaubamärgi või projekti nime kuvamiseks nõuab ainult ankrumärgendit.

<a class = "bränd" href = "#" >  
  Projekti nimi
</a>

Vormid navigeerimisribal

Vormi õigeks stiiliks ja positsioneerimiseks navigeerimisribal lisage sobivad klassid, nagu allpool näidatud. Vaikevormi puhul kaasake .navbar-formja kas .pull-leftvõi .pull-right, et see õigesti joondada.

<form class = "navbar-form pull-left" > 
  <sisestustüüp = "text" class = " span2 " >  
</form>

Kohandatud otsinguvormi jaoks lisage navigeerimisriba spetsiaalsete stiilide sisendisse .navbar-searchja form..search-query

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

Valikuline reageeriv variatsioon

Sõltuvalt teie ülemise riba sisu hulgast võiksite rakendada reageerimisvalikuid. Selleks mähkige navigeerimissisu sisaldavasse div .nav-collapse.collapse-sse ja lisage navigeerimisriba lülitusnupp .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "konteiner" > 
 
      <!-- .btn-navbar kasutatakse ahendatud navigeerimisriba sisu lülitina -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "ikooniriba" ></span> 
        <span class = "ikooniriba" ></span> 
        <span class = "ikooniriba" ></span> 
      </a>
 
      <!-- Kui soovite seda näidata, jätke bränd kindlasti välja -->
      <a class = "brand" href = "#" > Projekti nimi </a>  
 
      <!-- Kõik, mida soovite 940 piksli või väiksema eraldusvõimega peita, asetage siia -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form jne -->
      </div>
 
    </div>
  </div>
</div>

Nav-lingid

Navi üksusi on lihtne lisada järjestamata loendite kaudu.

<ul class = "nav" > 
  <li class = "aktiivne" > 
    <a href = "#" > Avaleht </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Tühja loendiüksuse ja lihtsa klassi abil saate hõlpsasti lisada oma navigeerimislinkidele eraldajaid. Lisage see lihtsalt linkide vahele:

<ul class = "nav" > 
  ...
  <li class = "jagaja-vertikaalne" ></li> 
  ...
</ul>

Komponentide joondamine

Navigatsiooni, otsinguvormi või teksti joondamiseks kasutage utiliidi klasse .pull-leftvõi . .pull-rightMõlemad klassid lisavad CSS-i ujuki määratud suunas.

Rippmenüüde lisamine

Rippmenüüde ja rippmenüüde lisamine navigeerimisseadmesse on ülilihtne, kuid selleks on vaja kasutada meie JavaScripti pistikprogrammi .

<ul class = "nav" > 
  <li class = "rippmenüü" > 
    <a href = "#" 
          klass = "rippmenüü lüliti"
          data-toggle = "rippmenüü" >
          Konto
          <b klass = "caret" ></b> 
    </a>
    <ul class = "rippmenüü" > 
      ...
    </ul>
  </li>
</ul>

Hankige javascript →

Tekst navigeerimisribal

Mähkige tekstistringid <.navbar-text>, tavaliselt <p>sildile, et tagada õige algus ja värv.

Miks neid kasutada

Koormustee navigeerimist kasutatakse kasutajatele nende asukoha näitamiseks rakenduses või saidil, kuid mitte esmase navigeerimise jaoks. Kasutage neid harva ja lühidalt, et olla kõige tõhusam.

Näited

Üks näide on näidatud nii, nagu seda võidakse kuvada mitmel lehel.

• Kodu

• Avaleht /
• Raamatukogu

• Avaleht /
• Raamatukogu /
• Andmed

Märgistus

HTML on teie standardne järjestamata loend koos linkidega.

<ul class = "leivapuru" > 
  <li>
    <a href = "#" > Avaleht </a> <span class = "jagaja" > / </span>   
  </li>
  <li>
    <a href = "#" > Teek </a> <span class = "jagaja" > / </span>   
  </li>
  <li class = "active" > Andmed </li> 
</ul>

Millal kasutada

Rdiost inspireeritud ülilihtsustatud ja minimaalse stiiliga lehekülgede lehekülg, mis sobib suurepäraselt rakenduste ja otsingutulemuste jaoks. Suurt plokki on raske mööda vaadata, see on kergesti skaleeritav ja pakub suuri klõpsamisalasid.

Olulised lehelingid

Lingid on kohandatavad ja töötavad õige klassiga paljudes olukordades. .disabledklõpsamatute linkide ja .activepraeguse lehe jaoks.

Paindlik joondus

Leheküljelinkide joonduse muutmiseks lisage üks kahest valikulisest klassist: .pagination-centeredja .pagination-right.

Näited

Lehekülgede vaikekomponent on paindlik ja töötab mitmes variandis.

Märgistus

Mähkituna on <div>lehekülgede arv vaid <ul>.

<div class = "lehekülgede jagamine" > 
  <ul>
    <li><a href = "#" > Eelmine </a></li> 
    <li class = "aktiivne" > 
      <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 = "#" > Järgmine </a></li> 
  </ul>
</div>

Piileri kohta

Piiparkomponent on linkide komplekt lihtsate lehekülgede rakendamiseks kerge märgistuse ja veelgi heledamate stiilidega. See on suurepärane lihtsate saitide jaoks, nagu ajaveebid või ajakirjad.

Valikuline keelatud olek

Peileri lingid kasutavad ka .disabledlehekülgede üldklassi.

Vaikimisi näide

Vaikimisi tsentreerib piipar lingid.

• Eelmine
• Edasi

<ul class = "piiler" > 
  <li>
    <a href = "#" > Eelmine </a> 
  </li>
  <li>
    <a href = "#" > Järgmine </a> 
  </li>
</ul>

Joondatud lingid

Teise võimalusena saate iga lingi külgedele joondada:

• ← Vanemad
• Uuem →

<ul class = "piiler" > 
  <li class = "eelmine" > 
    <a href = "#" > ← Vanemad </a> 
  </li>
  <li class = "järgmine" > 
    <a href = "#" > Uuem → </a> 
  </li>
</ul>

Umbes

Märgid on väikesed lihtsad komponendid mingisuguse indikaatori või arvu kuvamiseks. Neid leidub tavaliselt meiliklientides (nt Mail.app) või tõukemärguannete jaoks mobiilirakendustes.

Saadaolevad klassid

Bootstrap pakub teie saidi sisu esitlemiseks kerget ja paindlikku komponenti, mida nimetatakse kangelaseks. See töötab hästi turundus- ja sisurohketel saitidel.

Märgistus

Pakkige oma sisu divsarnasesse vormi nii:

<div class = "kangelaseüksus" > 
  <h1> Pealkiri </h1>
  <p> Tunnuslause </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Lisateavet
    </a>
  </p>
</div>

Lihtne kest h1lehe sisuosade sobivaks eraldamiseks ja segmenteerimiseks. See võib kasutada nii h1vaikeelementi smallkui ka enamikku muid komponente (koos täiendavate stiilidega).

<div class = "lehe päis" > 
  <h1> Näidislehe päis </h1>
</div>

Vaikimisi pisipildid

Vaikimisi on Bootstrapi pisipildid loodud lingitud piltide esitlemiseks minimaalse nõutava märgistusega.

Väga kohandatav

Veidi lisamärgistusega on võimalik pisipiltidesse lisada igasugust HTML-sisu, näiteks pealkirju, lõike või nuppe.

• 

  Pisipildi silt

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

  Tegevus Tegevus

• 

  Pisipildi silt

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

  Tegevus Tegevus

Miks kasutada pisipilte?

Pisipildid (varem .media-gridkuni versioonini 1.4) sobivad suurepäraselt fotode või videote, pildiotsingu tulemuste, jaemüügitoodete, portfellide ja palju muu jaoks. Need võivad olla lingid või staatiline sisu.

Lihtne, paindlik märgistus

Pisipiltide märgistus on lihtne – piisab ulsuvalise arvu lielementidega a. See on ka ülipaindlik, võimaldades mis tahes tüüpi sisu ja sisu pakkimiseks veidi rohkem märgistust.

Kasutab ruudustiku veergude suurusi

Lõpuks kasutab pisipiltide komponent pisipiltide mõõtmete juhtimiseks olemasolevaid ruudustikusüsteemi klasse, nagu .span2või ..span3

Märgistus

Nagu eelnevalt mainitud, on pisipiltide jaoks vajalik märgistus kerge ja arusaadav. Siin on ülevaade lingitud piltide vaikeseadetest :

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

Pisipiltide kohandatud HTML-sisu puhul muutub märgistus veidi. Blokeerimistaseme sisu lubamiseks kõikjal vahetame selle <a>sarnase vastu <div>:

<ul class = "pisipildid" > 
  <li class = "span3" > 
    <div class = "pisipilt" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Pisipildi silt </h5>
      <p> Pisipildi pealdis siin... </p>
    </div>
  </li>
  ...
</ul>

Veel näiteid

Tutvuge kõigi teile saadaolevate ruudustikuklassidega. Samuti saate segada ja sobitada erinevaid suurusi.

Ümber kirjutatud baasklass

Bootstrap 2 abil oleme põhiklassi lihtsustanud: .alertselle asemel, et .alert-message. Samuti oleme vähendanud minimaalset nõutavat märgistust – <p>vaikimisi pole nõutav, vaid ainult välimine <div>.

Üks hoiatusteade

Väiksema koodiga vastupidavama komponendi jaoks oleme eemaldanud blokeeritud hoiatuste, suurema täidisega sõnumite ja tavaliselt rohkema tekstiga eristava välimuse. Ka klass on muutunud klassiks .alert-block.

Sobib suurepäraselt javascriptiga

Bootstrapil on suurepärane jQuery pistikprogramm, mis toetab hoiatussõnumeid, muutes nendest loobumise kiireks ja lihtsaks.

Hankige pistikprogramm »

Näidishoiatused

Pakkige oma sõnum ja valikuline sulgemisikoon lihtsa klassiga lahtrisse.

<div class = "hoiatus" > 
  <button class = "sulge" data-dismiss = "alert" > × </button>  
  <strong> Hoiatus! </strong> Kontrollige ennast, te ei näe liiga hea välja.
</div>

Pea püsti! iOS-i seadmed nõuavad href="#"hoiatuste tühistamist. Lisage kindlasti see ja ankru sulgemise ikoonide andmeatribuut. Teise võimalusena võite kasutada <button>andmeatribuudiga elementi, mille oleme oma dokumentide jaoks valinud. Kui kasutate <button>, peate lisama, type="button"vastasel juhul ei pruugi teie vormid esitada.

Laiendage standardset hoiatusteadet hõlpsalt kahe valikulise klassiga: .alert-blockrohkem polsterdust ja teksti juhtelemente ning .alert-headingsobivat pealkirja.

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Hoiatus! </h4> 
  Parim on kontrollida ennast, sa ei ole...
</div>

Viga või oht

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

Edu

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

Teave

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

Põhiline

Vaikimisi vertikaalse gradiendiga edenemisriba.

<div class = "edenemine" > 
  <div class = "baar" 
       style = " laius : 60 %; " ></div> 
</div>

Triibuline

Kasutab triibulise efekti loomiseks gradienti (ilma IEta).

<div class = "edenemine edenemise triibuline" > 
  <div class = "baar" 
       style = " laius : 20 %; " ></div> 
</div>

Animeeritud

Võtab triibulise näite ja animeerib selle (ilma IE-d).

<div class = "edenemine edenemise triibuline 
     aktiivne" >
  <div class = "baar" 
       style = " laius : 40 %; " ></div> 
</div>

Lisavärvid

Edenemisribad kasutavad ühtsete stiilide jaoks samu nuppe ja hoiatusklasse.

Triibulised latid

Sarnaselt ühevärvilistele värvidele on meil erinevad triibulised edenemisribad.

Käitumine

Edenemisribad kasutavad CSS3 üleminekuid, nii et kui muudate laiust dünaamiliselt JavaScripti kaudu, muutub selle suurus sujuvalt.

Kui kasutate .activeklassi, .progress-stripedanimeerivad teie edenemisribad triipe vasakult paremale.

Brauseri tugi

Edenemisribad kasutavad kõigi efektide saavutamiseks CSS3 gradiente, üleminekuid ja animatsioone. Firefoxi IE7-9 või vanemad versioonid neid funktsioone ei toeta.

Opera ja IE ei toeta praegu animatsioone.

Wells

Kasutage kaevu lihtsa efektina elemendil, et anda sellele sisendefekt.

<div klass = "hästi" > 
  ...
</div>

Sule ikoon

Kasutage üldist sulgemisikooni sisust, nagu modaalid ja hoiatused, loobumiseks.

×

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

Kui kasutate ankrut, nõuavad iOS-i seadmed klikisündmuste jaoks märki href="#".

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