Näide

Lülitav kontekstimenüü linkide loendite kuvamiseks. Interaktiivseks tehtud rippmenüü JavaScripti pistikprogrammiga .

<ul class = "dropdown-menu" role = "menüü" aria-labelledby = "rippmenüü" >   
  <li><a tabindex = "-1" href = "#" > Toiming </a></li>  
  <li><a tabindex = "-1" href = "#" > Veel üks toiming </a></li>  
  <li><a tabindex = "-1" href = "#" > Midagi muud siin </a></li>  
  <li klass = "jagaja" ></li> 
  <li><a tabindex = "-1" href = "#" > Eraldatud link </a></li>  
</ul>

Märgistus

Vaadates ainult rippmenüüd, on siin vajalik HTML. Peate pakkima rippmenüü päästiku ja rippmenüü sisse .dropdownvõi muusse elemendisse, mis deklareerib position: relative;. Seejärel looge lihtsalt menüü.

<div class = "rippmenüü" > 
  <!-- Link või nupp rippmenüü sisselülitamiseks -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Toiming </a></li>  
    <li><a tabindex = "-1" href = "#" > Veel üks toiming </a></li>  
    <li><a tabindex = "-1" href = "#" > Midagi muud siin </a></li>  
    <li klass = "jagaja" ></li> 
    <li><a tabindex = "-1" href = "#" > Eraldatud link </a></li>  
  </ul>
</div>

Valikud

Joondage menüüd paremale ja lisage täiendavaid rippmenüüde tasemeid.

Menüüde joondamine

Rippmenüü lisamine paremale joondamiseks .pull-right..dropdown-menu

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

Keelatud menüüvalikud

Lingi keelamiseks lisage rippmenüüsse .disableda .<li>

<ul class = "dropdown-menu" role = "menüü" aria-labelledby = "rippmenüü" >   
  <li><a tabindex = "-1" href = "#" > Tavaline link </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Keelatud link </a></li>   
  <li><a tabindex = "-1" href = "#" > Veel üks link </a></li>  
</ul>

Alammenüüd rippmenüüdes

Lisage täiendav tase rippmenüüd, mis kuvatakse hõljutatult nagu OS X-i omad, koos mõne lihtsa märgistuslisandiga. Lisage automaatse stiili jaoks .dropdown-submenumis tahes liolemasolevasse rippmenüüsse.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "rippmenüü-alammenüü" > 
    <a tabindex = "-1" href = "#" > Rohkem valikuid </a>  
    <ul class = "rippmenüü" > 
      ...
    </ul>
  </li>
</ul>

Näited

Kaks põhivalikut koos kahe spetsiifilisema variandiga.

Üks nuppude rühm

Pakkige rida nuppe .btnsisse .btn-group.

<div class = "btn-grupp" > 
  <button class = "btn" > Vasak </button> 
  <button class = "btn" > Keskmine </button> 
  <button class = "btn" > Parem </button> 
</div>

Mitu nupurühma

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>

Vertikaalsed nupurühmad

Muutke nuppude komplekt vertikaalselt virnastatud, mitte horisontaalselt.

<div class = "btn-group btn-group-vertical" > 
  ...
</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 .

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.

<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 mis tahes suuruses: .btn-large, .btn-small, võ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 JavaScriptiga.

Jagamisnupu rippmenüüd

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.

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

Suurused

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

<div class = "btn-grupp" > 
  <button class = "btn btn-mini" > Toiming </button> 
  <button class = "btn btn-mini rippmenüü-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

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

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>

Puudega olek

Mis tahes navigeerimiskomponendi (vahekaardid, pillid või loendid) jaoks lisage .disabledhallide linkide ja hõljutusefektideta . Lingid jäävad siiski klõpsatavateks, kui te hrefatribuuti ei eemalda. Teise võimalusena võite nende klikkide vältimiseks rakendada kohandatud JavaScripti.

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

Komponentide joondamine

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

Virnastatav

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

Lisage rippmenüüd väikese täiendava HTML-i ja JavaScripti pistikprogrammiga .

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>

Navi loendid

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

Navigeerimisloendi näide

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

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

MärgeNavigeerimisloendis pesastamiseks lisage class="nav nav-list"mis tahes pesastatud <ul>.

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>

Tabeldav nav

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.

Tabatav näide

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

Olen 1. jaotises.

Tere, ma olen 2. jaotises.

Mis seal ikka, tüdruk, see on 3. osa.

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

Vahelehtedel tuhmumine

Vahelehtede tuhmumiseks lisage .fadeigale .tab-pane.

Nõuab jQuery pistikprogrammi

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

Tabeldatav igas suunas

Sabid all

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

Olen A sektsioonis.

Tere, ma olen jaotises B.

Mis tüdruk, see on jaotis 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.

Tere, ma olen jaotises B.

Mis tüdruk, see on jaotis 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.

Tere, ma olen jaotises B.

Mis tüdruk, see on jaotis C.

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

Põhiline navigeerimisriba

Alustuseks on navigeerimisribad staatilised (pole fikseeritud ülaosaga) ja sisaldavad projekti nime ja põhilise navigeerimise tuge. Asetage see suvalisse kohta .container, mis määrab teie saidi ja sisu laiuse.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Pealkiri </a>  
    <ul class = "nav" > 
      <li class = "aktiivne" ><a href = "#" > Avaleht </a></li>  
      <li><a href = "#" > Link </a></li> 
      <li><a href = "#" > Link </a></li> 
    </ul>
  </div>
</div>

Navbari komponendid

Bränd

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

<a class = "brand" href = "#" > Projekti nimi </a>

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>

Vormid

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 " >  
  <button type = "submit" class = "btn" > Esita </button>  
</form>

Otsinguvorm

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>

Komponentide joondamine

Joondage navigeerimislingid, otsivorm või tekst, kasutage utiliidiklasse .pull-leftvõi . .pull-rightMõlemad klassid lisavad CSS-i ujuki määratud suunas.

Rippmenüüde kasutamine

Lisage navigeerimisseadmele rippmenüüd ja rippmenüüd, kasutades veidi märgistust ja rippmenüüd JavaScripti pistikprogramm .

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

Täiendava märgistuse ja helistamisrippmenüüde kohta teabe saamiseks külastage JavaScripti rippmenüüde dokumentatsiooni .

Tekst

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

Valikulised kuvavariatsioonid

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

Üleval fikseeritud

Lisage ja ärge unustage arvestada selle all oleva peidetud alaga , .navbar-fixed-toplisades vähemalt 40 pikslit padding. <body>Lisage see kindlasti pärast põhilist Bootstrapi CSS-i ja enne valikulist reageerivat CSS-i.

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

Altpoolt fikseeritud

Selle asemel lisage .navbar-fixed-bottom.

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

Staatiline ülemine navigeerimisriba

Looge täislaiuses navigeerimisriba, mis kerib koos lehega eemale, lisades .navbar-static-top. Erinevalt .navbar-fixed-topklassist ei pea te tähistust muutma body.

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

Tundlik navigeerimisriba

Ahendava tundliku navigeerimisriba rakendamiseks mähkige navigeerimisriba sisu 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form jne -->
      </div>
 
    </div>
  </div>
</div>

Pea püsti! Automaatselt reageeriv navigeerimisriba nõuab ahendamise pistikprogrammi ja tundliku Bootstrapi CSS-faili .

Pööratud variatsioon

Muutke navigeerimisriba välimust, lisades .navbar-inverse.

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

Näited

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

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

Standardne lehekülgede arv

Rdiost inspireeritud lihtne 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.

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

Valikud

Keelatud ja aktiivsed olekud

Lingid on kohandatavad erinevate olukordade jaoks. Kasutage .disabledklõpsamatute linkide jaoks ja .activepraeguse lehe näitamiseks.

<div class = "lehekülgede jagamine" > 
  <ul>
    <li class = "keelatud" ><a href = "#" > « </a></li>  
    <li class = "aktiivne" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Saate valikuliselt vahetada aktiivsed või keelatud ankrud vahemike vastu, et eemaldada klõpsamisfunktsioon, säilitades samal ajal kavandatud stiilid.

<div class = "lehekülgede jagamine" > 
  <ul>
    <li class = "keelatud" ><span> « </span></li> 
    <li class = "aktiivne" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Suurused

Kas soovite suuremat või väiksemat lehekülge? Lisage .pagination-large, .pagination-smallvõi .pagination-minilisasuuruste jaoks.

<div class = "lehekülgede arv-suur" > 
  <ul>
    ...
  </ul>
</div>
<div class = "lehekülgede jagamine" > 
  <ul>
    ...
  </ul>
</div>
<div class = "lehekülgede arv-väike" > 
  <ul>
    ...
  </ul>
</div>
<div class = "lehekülgede leheküljed-mini" > 
  <ul>
    ...
  </ul>
</div>

Joondamine

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

<div class = "lehekülgede lehekülgede vahetamise keskus" > 
  ...
</div>

<div class = "lehekülgede lehekülgede muutmine paremal" > 
  ...
</div>

Peiler

Kiired eelmised ja järgmised lingid lihtsate lehekülgede rakendamiseks kerge märgistuse ja stiilidega. See on suurepärane lihtsate saitide jaoks, nagu ajaveebid või ajakirjad.

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>

Valikuline keelatud olek

Peileri lingid kasutavad ka üldist .disabledkasuliku klassi lehekülgedelt.

<ul class = "piiler" > 
  <li class = "eelmine keelatud" > 
    <a href = "#" > ← Vanemad </a> 
  </li>
  ...
</ul>

Sildid

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

Märgid

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>`
Tähtis	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Pöördvõrdeline	10	`<span class="badge badge-inverse">10</span>`

Kergesti kokkupandav

Lihtsaks rakendamiseks tõmbuvad sildid ja märgid lihtsalt kokku (CSS-i :emptyvalija kaudu), kui sees pole sisu.

Kangelase üksus

Kerge ja paindlik komponent teie saidi põhisisu esitlemiseks. See töötab hästi turundus- ja sisurohketel saitidel.

Tere, Maailm!

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

Lisateavet

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

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 <small> Päise alltekst </small></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
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 = "span4" > 
    <a href = "#" class = "pisipilt" >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    <div class = "pisipilt" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Pisipildi silt </h3>
      <p> Pisipildi pealdis... </p>
    </div>
  </li>
  ...
</ul>

Veel näiteid

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

Vaikemärguanne

.alertPõhilise hoiatusteate saamiseks mähkige tekst ja valikuline loobumisnupp .

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

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

Loobu nupud

data-dismiss="alert"Mobiilse Safari ja Mobile Opera brauserid nõuavad märgendi kasutamisel lisaks atribuudile href="#"ka hoiatuste tühistamist.<a>

<a href = "#" class = "sulge" data-dismiss = "hoiatus" > × </a>

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.

<button type = "button" class = "sulge" data-dismiss = "hoiatus" > × </button>

Loobu märguannetest JavaScripti kaudu

Hoiatuste kiireks ja lihtsaks tühistamiseks kasutage hoiatuste jQuery pistikprogrammi .

Valikud

Pikemate sõnumite puhul suurendage märguandeümbrise üla- ja alaosa polsterdust, lisades .alert-block.

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" > 
  <button type = "button" class = "sulge" data-dismiss = "hoiatus" > × </button>   
  <h4> Hoiatus! </h4>
  Parim on kontrollida ennast, sa ei ole...
</div>

Kontekstuaalsed 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 = "bar" style = " laius : 60 %; " ></div>   
</div>

Triibuline

Kasutab triibulise efekti loomiseks gradienti. Pole saadaval IE7-8 puhul.

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

Animeeritud

Lisage triipude animeerimiseks .activeparemalt .progress-stripedvasakule. Pole saadaval kõigis IE versioonides.

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

Laotud

Asetage mitu riba ühte, .progresset need virnastada.

<div class = "edenemine" > 
  <div class = "bar-success" style = " laius : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " laius : 20 %; " ></div>   
  <div class = "latt-oht" style = " laius : 10 %; " ></div>   
</div>

Valikud

Lisavärvid

Edenemisribad kasutavad ühtsete stiilide jaoks samu nuppe ja hoiatusklasse.

<div class = "edenemise edenemisteave" > 
  <div class = "bar" style = " laius : 20 % " ></div>   
</div>
<div class = "edenemine edenemine-edu" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "edenemise edenemise hoiatus" > 
  <div class = "bar" style = " laius : 60 % " ></div>   
</div>
<div class = "edenemise edenemise oht" > 
  <div class = "bar" style = " laius : 80 % " ></div>   
</div>

Triibulised latid

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

<div class = "edenemise edenemise info progress-triibuline" > 
  <div class = "bar" style = " laius : 20 % " ></div>   
</div>
<div class = "edenemine progress-edu edenemine-triibuline" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "edenemishoiatus edenemise triibuline" > 
  <div class = "bar" style = " laius : 60 % " ></div>   
</div>
<div class = "edenemise edenemine-oht progressi-triibuline" > 
  <div class = "bar" style = " laius : 80 % " ></div>   
</div>

Brauseri tugi

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

Internet Explorer 10 ja Opera 12 varasemad versioonid ei toeta animatsioone.

Abstraktsed objektistiilid erinevat tüüpi komponentide (nt ajaveebi kommentaarid, säutsud jne) koostamiseks, millel on tekstilise sisu kõrval vasakule või paremale joondatud pilt.

Vaikimisi näide

Vaikimisi meedium võimaldab hõljuda meediaobjekti (pildid, video, heli) sisuplokist vasakule või paremale.

Meedia pealkiri

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.

Meedia pealkiri

<div class = "meedia" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Meediumipealkiri </h4> 
    ...
 
    <!-- Pesastatud meediaobjekt -->
    <div class = "meedia" > 
      ...
    </div>
  </div>
</div>

Meedia nimekiri

Veidi lisamärgistusega saate kasutada loendis olevaid meediume (kasulik kommentaarilõimede või artiklite loendite jaoks).

Meedia pealkiri

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.

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

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

Pesastatud meediumipealkiri
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.
Meedia pealkiri
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 = "meediumiloend" > 
  <li class = "meedia" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Meediumipealkiri </h4> 
      ...
 
      <!-- Pesastatud meediaobjekt -->
      <div class = "meedia" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Kasutage kaevu lihtsa efektina elemendil, et anda sellele sisendefekt.

Vaata, ma olen kaevus!

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

Vabatahtlikud klassid

Juhtpolster ja ümarad nurgad kahe valikulise modifikaatoriklassiga.

Vaata, ma olen kaevus!

<div class = "hästi hästi-suur" > 
  ...
</div>

Vaata, ma olen kaevus!

<div class = "hästi hästi-väike" > 
  ...
</div>

Sule ikoon

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

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

iOS-i seadmed nõuavad href="#"klikisündmusi, kui eelistaksite ankrut kasutada.

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

Abimeeste klassid

Lihtsad ja keskendunud tunnid väikeste kuvari või käitumise muudatuste tegemiseks.

.tõmba-vasakule

Hõljutage element vasakule

klass = "tõmba vasakule"

. tõmba - vasakule {
  ujuk : vasak ;
}

.tõmmake paremale

Hõljutage element paremale

klass = "tõmba paremale"

. tõmba - paremale {
  ujuk : parem ;
}

.vaigistatud

Muutke elemendi värviks#999

klass = "vaigistatud"

. vaigistatud {
  värv : #999; 
}

.selgitada

Tühjendage floatsuvaline element

klass = "puhastus"

. clearfix {
  * suum : 1 ; 
  &: enne ,
  &: pärast {
    kuva : laud ;
    sisu : "" ; 
  }
  &: pärast {
    selge : mõlemad ;
  }
}

Rippmenüüd

Näide

Märgistus

Valikud

Menüüde joondamine

Keelatud menüüvalikud

Alammenüüd rippmenüüdes

Nupurühmad

Näited

Üks nuppude rühm

Mitu nupurühma

Vertikaalsed nupurühmad

Märkekasti ja raadio maitsed

Nupurühmade rippmenüüd

Nuppude rippmenüüd

Ülevaade ja näited

Töötab kõigi suurustega nuppudega

Nõuab JavaScripti

Jagamisnupu rippmenüüd

Suurused

Rippmenüüd

Navigeerimine: vahelehed, pillid ja loendid

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

Põhilised vahelehed

Põhilised pillid

Puudega olek

Komponentide joondamine

Virnastatav

Virnastatud vahelehed

Virnastatud pillid

Rippmenüüd

Rippmenüüdega vahelehed

Rippmenüüdega pillid

Navi loendid

Navigeerimisloendi näide

Horisontaalsed jagajad

Tabeldav nav

Tabatav näide

Vahelehtedel tuhmumine

Nõuab jQuery pistikprogrammi

Tabeldatav igas suunas

Sabid all

Vahekaardid vasakul

Vahekaardid paremal

Navibar

Põhiline navigeerimisriba

Navbari komponendid

Bränd

Nav-lingid

Vormid

Otsinguvorm

Komponentide joondamine

Rippmenüüde kasutamine

Tekst

Valikulised kuvavariatsioonid

Üleval fikseeritud

Altpoolt fikseeritud

Staatiline ülemine navigeerimisriba

Tundlik navigeerimisriba

Pööratud variatsioon

Riivsai

Näited

Lehtede lehitsemine Kaks võimalust sisu lehitsemiseks

Standardne lehekülgede arv

Valikud

Keelatud ja aktiivsed olekud

Suurused

Joondamine

Peiler

Vaikimisi näide

Joondatud lingid

Valikuline keelatud olek

Sildid ja märgid

Sildid

Märgid

Kergesti kokkupandav

Tüpograafilised komponendid

Kangelase üksus

Tere, Maailm!

Lehe päis