Komponendid

Bootstrapi on sisse ehitatud kümneid korduvkasutatavaid komponente, mis pakuvad navigeerimist, hoiatusi, hüpikaknaid ja palju muud.

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

Nuppude rippmenüüd

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

Jagamisnupu rippmenüüd

Ü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 klassi .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>

Kerged vaikeväärtused Sama märgistus, erinevad klassid

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:

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

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

Virnastatav Muutke sakid või pillid vertikaalseks

Kuidas neid virna panna

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

Virnastatud vahelehed

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

Virnastatud pillid

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

Rippmenüüd Täiustatud navigeerimiskomponentide jaoks

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

<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

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

Navigeerimisloendid Looge lihtsaid virnastatud navigeerimisi, mis sobivad suurepäraselt külgribade jaoks

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>

Vahekaartide navigeerimine Muutke vahelehed JavaScripti kaudu ellu

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.

Tabatav näide

Vahelehtede vahekaartide muutmiseks mähkige lahtrisse .nav-tabsklass .tabbable.

Olen 1. jaotises.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

Kohandatud jQuery pistikprogramm

Kõiki vahekaarte toidab meie kerge jQuery pistikprogramm. Lugege JavaScripti dokumentide lehelt lisateavet selle kohta, kuidas vahekaartide vahekaarte ellu äratada.

Hankige javascript →

Otsene märgistus

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

<div class = "tabable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > 1. jaotis </a></li>   
    <li><a href = "#2" data-toggle = "tab" > 2. jaotis </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Olen 1. jaotises. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Tere, olen 2. jaotises. </p>
    </div>
  </div>
</div>

Tabeldatav igas suunas

Sabid all

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

Olen A sektsioonis.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

Olen A sektsioonis.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

Olen A sektsioonis.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

Staatilise navigeerimisriba näide

Näide staatilisest (pole fikseeritud ülaosast) navigeerimisribast koos projekti nime, navigeerimise ja otsinguvormiga.

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 lisamist <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 .navbar-searchklass, et saada navigeerimisribal spetsiaalseid stiile.

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

Pea püsti! Reagatiivne navigeerimisriba nõuab ahendamise pistikprogrammi .

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

Pakkige tekstistringid <p>õige esikoha ja värvi jaoks sildi sisse.

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.

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>

Mitmeleheküljeline lehekülgede lehekülg

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>

Piiler Kiirete eelmiste ja järgmiste linkide jaoks

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.

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

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

Sildid	Märgistus
Vaikimisi	`<span class="label">Default</span>`
Edu	`<span class="label label-success">Success</span>`
Hoiatus	`<span class="label label-warning">Warning</span>`
Tähtis	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Pöördvõrdeline	`<span class="label label-inverse">Inverse</span>`

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

Nimi	Näide	Märgistus
Vaikimisi	1	`<span class="badge">1</span>`
Edu	2	`<span class="badge badge-success">2</span>`
Hoiatus	4	`<span class="badge badge-warning">4</span>`
Viga	6	`<span class="badge badge-error">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Pöördvõrdeline	10	`<span class="badge badge-inverse">10</span>`

Kangelase üksus

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>

Tere, Maailm!

See on lihtne kangelasüksus, lihtne jumbotron-stiilis komponent, mis tõmbab esiletoodud sisule või teabele lisatähelepanu.

Lisateavet

Lehe päis

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.

Kerged vaikesätted

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

× Hoiatus! Parim on kontrollida ennast, sa ei näe liiga hea välja.

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

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

Hoiatus!

Parim on kontrollida ennast, sa ei näe liiga hea välja. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

Kontekstipõhised alternatiivid Lisage valikulisi klasse, et muuta hoiatuse konnotatsiooni

Viga või oht

× Oh näpust! Muutke mõnda asja ja proovige uuesti esitada.

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

Edu

× Hästi tehtud! Lugesite selle olulise hoiatussõnumi edukalt läbi.

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

Teave

× Pea püsti! See hoiatus vajab teie tähelepanu, kuid see pole eriti oluline.

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

Näited ja märgistus

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>

Valikud ja brauseri tugi

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.

Vaata, ma olen kaevus!

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

Sule ikoon

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

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

Nupurühmad Ühenda nupud, et saada rohkem tööriistariba sarnaseid funktsioone

Nupurühmad

Parimad tavad

Vaikimisi näide

Tööriistariba näide

Märkekasti ja raadio maitsed

Nupurühmade rippmenüüd

Nuppude rippmenüüd Ehitatud nupurühmadele kontekstimenüüde pakkumiseks

Nuppude rippmenüüd

Ülevaade ja näited

Märgistuse näide

Töötab kõigi suurustega nuppudega

Nõuab javascripti

Jagamisnupu rippmenüüd

Ülevaade ja näited

Suurused

Märgistuse näide

Rippmenüüd

Navigeerimine , vahelehed ja pillid Väga kohandatav loendi stiilis navigeerimine

Kerged vaikeväärtused Sama märgistus, erinevad klassid

Võimas baasklass

Millal kasutada

Komponentide joondamine

Põhilised vahelehed

Põhilised pillid

Virnastatav Muutke sakid või pillid vertikaalseks

Kuidas neid virna panna

Virnastatud vahelehed

Virnastatud pillid

Rippmenüüd Täiustatud navigeerimiskomponentide jaoks

Rikkalikud menüüd on lihtsaks tehtud

Rippmenüüdega vahelehed

Rippmenüüdega pillid

Navigeerimisloendid Looge lihtsaid virnastatud navigeerimisi, mis sobivad suurepäraselt külgribade jaoks

Rakenduse stiilis navigeerimine

Ikoonidega

Horisontaalsed jagajad

Navigeerimisloendi näide

Näide ikoonidega

Vahekaartide navigeerimine Muutke vahelehed JavaScripti kaudu ellu

Mis on kaasas

Tabatav näide

Kohandatud jQuery pistikprogramm

Otsene märgistus

Tabeldatav igas suunas

Sabid all

Vahekaardid vasakul

Vahekaardid paremal

Navibar

Staatilise navigeerimisriba näide

Navbar-tellingud

Parandatud navigeerimisriba

Brändi nimi

Vormid navigeerimisribal

Valikuline reageeriv variatsioon

Nav-lingid

Komponentide joondamine

Rippmenüüde lisamine

Tekst navigeerimisribal

Riivsai

Miks neid kasutada

Näited

Märgistus

Lehtede lehitsemine Kaks võimalust sisu lehitsemiseks

Mitmeleheküljeline lehekülgede lehekülg

Millal kasutada

Olulised lehelingid

Paindlik joondus

Näited

Märgistus

Piiler Kiirete eelmiste ja järgmiste linkide jaoks

Piileri kohta

Valikuline keelatud olek

Vaikimisi näide

Joondatud lingid

Tekstisisesed sildid Teksti sildistamine ja märkus

Märgid Näitajad ja lugemata arv

Umbes

Saadaolevad klassid

Tüpograafilised komponendid Lehekülje päis ja kangelase üksus sisu segmenteerimiseks