Ekzemplo

Ŝaltigebla, kunteksta menuo por montri listojn de ligiloj. Farita interaga kun la falmenuo JavaScript-kromaĵo .

<ul class = "dropdown-menu" role = "menuo" aria-labelledby = "dropdown-menuo" >   
  <li><a tabindex = "-1" href = "#" > Ago </a></li>  
  <li><a tabindex = "-1" href = "#" > Alia ago </a></li>  
  <li><a tabindex = "-1" href = "#" > Io alia ĉi tie </a></li>  
  <li class = "dividanto" ></li> 
  <li><a tabindex = "-1" href = "#" > Apartigita ligilo </a></li>  
</ul>

Markado

Rigardante nur la falmenuon, jen la bezonata HTML. Vi devas envolvi la ellasilon de la falmenuo kaj la falmenuon ene de .dropdown, aŭ alian elementon kiu deklaras position: relative;. Tiam simple kreu la menuon.

<div klaso = "menumenumo" > 
  <!-- Ligo aŭ butono por ŝanĝi falmenuon -->
  <ul class = "dropdown-menu" rolo = "menuo" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Ago </a></li>  
    <li><a tabindex = "-1" href = "#" > Alia ago </a></li>  
    <li><a tabindex = "-1" href = "#" > Io alia ĉi tie </a></li>  
    <li class = "dividanto" ></li> 
    <li><a tabindex = "-1" href = "#" > Apartigita ligilo </a></li>  
  </ul>
</div>

Opcioj

Vicigu menuojn dekstren kaj aldonu inkluzivi pliajn nivelojn de falmenuoj.

Vicigante la menuojn

Aldonu .pull-rightal .dropdown-menudekstre vicigi la falmenuon.

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

Malebligitaj menuaj opcioj

Aldonu .disabledal <li>en la menuo por malŝalti la ligilon.

<ul class = "dropdown-menu" role = "menuo" aria-labelledby = "dropdown-menuo" >   
  <li><a tabindex = "-1" href = "#" > Regula ligilo </a></li>  
  <li class = "malŝaltita" ><a tabindex = "-1" href = "#" > Malŝaltita ligilo </a></li>   
  <li><a tabindex = "-1" href = "#" > Alia ligilo </a></li>  
</ul>

Submenuoj sur falmenuoj

Aldonu ekstran nivelon de falmenuoj, aperantaj surŝvebataj kiel tiuj de OS X, kun kelkaj simplaj markado-aldonoj. Aldonu .dropdown-submenual iu ajn lien ekzistanta falmenuo por aŭtomata stilo.

Defaŭlte

Dropup

Maldekstra submenuo

<ul class = "dropdown-menu" rolo = "menuo" aria-labelledby = "dLabel" >   
  ...
  <li class = "menuo-submenuo" > 
    <a tabindex = "-1" href = "#" > Pli da opcioj </a>  
    <ul class = "falmenuo" > 
      ...
    </ul>
  </li>
</ul>

Ekzemploj

Du bazaj opcioj, kune kun du pli specifaj variaĵoj.

Ununura butongrupo

Envolvu serion da butonoj per .btnen .btn-group.

<div class = "btn-grupo" > 
  <button class = "btn" > Maldekstre </button> 
  <button class = "btn" > Mezo </button> 
  <button class = "btn" > Dekstre </button> 
</div>

Multoblaj butongrupoj

Kombinu arojn <div class="btn-group">en a <div class="btn-toolbar">por pli kompleksaj komponantoj.

<div class = "btn-ilbreto" > 
  <div class = "btn-grupo" > 
    ...
  </div>
</div>

Vertikalaj butongrupoj

Faru aron da butonoj aperi vertikale stakitaj prefere ol horizontale.

<div class = "btn-grupo btn-grupo-vertikala" > 
  ...
</div>

Markobutono kaj radio-gustoj

Butongrupoj ankaŭ povas funkcii kiel radioj, kie nur unu butono povas esti aktiva, aŭ markobutonoj, kie ajna nombro da butonoj povas esti aktivaj. Rigardu la JavaScript-dokumentojn por tio.

Dropdowns en butongrupoj

Atentu!Butonoj kun falmenuoj devas esti individue envolvitaj .btn-groupene de a .btn-toolbarpor taŭga bildigo.

Superrigardo kaj ekzemploj

Uzu ajnan butonon por ekigi falmenuon metante ĝin ene de a .btn-groupkaj disponigante la taŭgan menuan markadon.

<div class = "btn-grupo" > 
  <a class = "btn dropdown-toggle" data-toggle = "menumenumo" href = "#" >   
    Ago
    <span class = "karto" ></span> 
  </a>
  <ul class = "falmenuo" > 
    <!-- ligiloj al falmenuo -->
  </ul>
</div>

Funkcias kun ĉiuj grandecoj de butonoj

Butonfalumoj funkcias je ajna grandeco: .btn-large, .btn-small, aŭ .btn-mini.

Postulas JavaScript

Butonaj falmenuoj postulas la Bootstrap falmenuman kromprogramon por funkcii.

En iuj kazoj—kiel poŝtelefono—falmenuoj etendiĝos ekster la vidfenestro. Vi devas solvi la vicigon permane aŭ per kutima JavaScript.

Dividi butonajn menuojn

Konstruante sur la butongrupoj stiloj kaj markado, ni povas facile krei dividitan butonon. Dividitaj butonoj prezentas norman agon maldekstre kaj falmenuklavon dekstre kun kontekstaj ligiloj.

<div class = "btn-grupo" > 
  <button class = "btn" > Ago </button> 
  <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >  
    <span class = "karto" ></span> 
  </butono>
  <ul class = "falmenuo" > 
    <!-- ligiloj al falmenuo -->
  </ul>
</div>

Grandecoj

Uzu la kromajn butonklasojn .btn-mini, .btn-smallaŭ .btn-largepor grandeco.

<div class = "btn-grupo" > 
  <button class = "btn btn-mini" > Ago </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "menumenumo" >  
    <span class = "karto" ></span> 
  </butono>
  <ul class = "falmenuo" > 
    <!-- ligiloj al falmenuo -->
  </ul>
</div>

Elŝutaj menuoj

Falmenuoj ankaŭ povas esti ŝanĝitaj de malsupre supren aldonante ununuran klason al la tuja gepatro de .dropdown-menu. Ĝi renversos la direkton de la .caretkaj repoziciigos la menuon mem por movi de malsupre supren anstataŭ de supre malsupren.

<div class = "btn-grupo forigo" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >  
    <span class = "karto" ></span> 
  </butono>
  <ul class = "falmenuo" > 
    <!-- ligiloj al falmenuo -->
  </ul>
</div>

Malpezaj defaŭltoj Sama markado, malsamaj klasoj

Ĉiuj nav-komponentoj ĉi tie—langetoj, piloloj kaj listoj— dividas la saman bazan markadon kaj stilojn tra la .navklaso.

Bazaj langetoj

Prenu ordinaran <ul>ligilojn kaj aldonu .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aktiva" > 
    <a href = "#" > Hejmo </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Bazaj piloloj

Prenu tiun saman HTML, sed uzu .nav-pillsanstataŭe:

<ul class = "nav nav-pills" > 
  <li class = "aktiva" > 
    <a href = "#" > Hejmo </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Malfunkciigita ŝtato

Por iu ajn navkomponento (langetoj, piloloj aŭ listo), aldonu .disabledpor grizaj ligiloj kaj neniuj ŝvebaj efikoj . Ligiloj restos klakeblaj, tamen, krom se vi forigas la hrefatributon. Alternative, vi povus efektivigi kutiman JavaScript por malhelpi tiujn klakojn.

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

Komponento vicigo

Por vicigi nav-ligilojn, uzu la .pull-leftaŭ .pull-rightutilajn klasojn. Ambaŭ klasoj aldonos CSS-flosilon en la specifita direkto.

Stapilebla

Ĉar langetoj kaj piloloj estas horizontalaj defaŭlte, simple aldonu duan klason, .nav-stacked, por ke ili aspektu vertikale stakigitaj.

Stakitaj langetoj

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

Stakitaj piloloj

<ul class = "nav nav-piloloj nav-stakitaj" > 
  ...
</ul>

Dropdowns

Aldonu falmenuojn kun iom kroma HTML kaj la falmenuojn JavaScript kromaĵo .

Langetoj kun falmenuoj

<ul class = "nav nav-tabs" > 
  <li class = "menuo" > 
    <a klaso = "falu-baskulo" 
       data-toggle = "menuo"
       href = "#" >
        Dropdown
        <b klaso = "karto" ></b> 
      </a>
    <ul class = "falmenuo" > 
      <!-- ligiloj -->
    </ul>
  </li>
</ul>

Piloloj kun falmenuoj

<ul class = "nav nav-pills" > 
  <li class = "menuo" > 
    <a klaso = "falu-baskulo" 
       data-toggle = "menuo"
       href = "#" >
        Dropdown
        <b klaso = "karto" ></b> 
      </a>
    <ul class = "falmenuo" > 
      <!-- ligiloj -->
    </ul>
  </li>
</ul>

Nav-listoj

Simpla kaj facila maniero konstrui grupojn de navigaciaj ligiloj kun laŭvolaj kaplinioj. Ili estas plej bone uzataj en flankmenuoj kiel la Finder en OS X.

Ekzempla navlisto

Prenu liston de ligiloj kaj aldonu class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Listo kaplinio </li> 
  <li class = "active" ><a href = "#" > Hejmo </a></li>  
  <li><a href = "#" > Biblioteko </a></li> 
  ...
</ul>

NotuPor nestado ene de navlisto, inkluzivu class="nav nav-list"sur iu ajn nesto <ul>.

Horizontala disigilo

Aldonu horizontalan disigilon kreante malplenan listeron kun la klaso .divider, tiel:

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

Tabulabla nav

Vivu viajn langetojn per simpla kromaĵo por ŝanĝi inter enhavo per langetoj. Bootstrap integras tabulajn langetojn en kvar stiloj: supre (defaŭlte), dekstre, malsupre kaj maldekstre.

Tabula ekzemplo

Por fari langetojn tabeleblaj, kreu .tab-panekun unika ID por ĉiu langeto kaj envolvu ilin en .tab-content.

Mi estas en Sekcio 1.

Saluton, mi estas en Sekcio 2.

Kio do knabino, ĉi tio estas Sekcio 3.

<div class = "tabbable" > <!-- Bezonata nur por maldekstra/dekstra langetoj -->  
  <ul class = "nav nav-tabs" > 
    <li class = "aktiva" ><a href = "#tab1" data-toggle = "langeto" > Sekcio 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "langeto" > Sekcio 2 </a></li>  
  </ul>
  <div class = "tab-enhavo" > 
    <div class = "tab-fenestro aktiva" id = "langeto1" >  
      <p> Mi estas en Sekcio 1. </p>
    </div>
    <div class = "tab-paneo" id = "langeto2" >  
      <p> Saluton, mi estas en Sekcio 2. </p>
    </div>
  </div>
</div>

Fade en langetoj

Por ke klapetoj fadiĝu, aldonu .fadeal ĉiu .tab-pane.

Postulas jQuery-aldonaĵon

Ĉiuj tabulaj langetoj funkcias per nia malpeza jQuery kromaĵo. Legu pli pri kiel vivigi tabulajn langetojn sur la paĝo pri JavaScript-dokumentoj .

Tabulabla en ajna direkto

Langetoj sur la fundo

Turnu la ordon de la HTML kaj aldonu klason por meti langetojn malsupre.

Mi estas en Sekcio A.

Saluton, mi estas en Sekcio B.

Kio do knabino, ĉi tiu estas Sekcio C.

<div class = "tabeblaj langetoj-malsupre" > 
  <div class = "tab-enhavo" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Langetoj maldekstre

Interŝanĝu la klason por meti langetojn maldekstre.

Mi estas en Sekcio A.

Saluton, mi estas en Sekcio B.

Kio do knabino, ĉi tiu estas Sekcio C.

<div class = "tabulaj langetoj-maldekstre" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-enhavo" > 
    ...
  </div>
</div>

Langetoj dekstre

Interŝanĝu la klason por meti langetojn dekstre.

Mi estas en Sekcio A.

Saluton, mi estas en Sekcio B.

Kio do knabino, ĉi tiu estas Sekcio C.

<div class = "tabulaj langetoj-dekstra" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-enhavo" > 
    ...
  </div>
</div>

Baza navbaro

Komence, navbaroj estas senmovaj (ne fiksitaj al la supro) kaj inkluzivas subtenon por nomo de projekto kaj baza navigado. Metu unu ie ajn en .container, kiu fiksas la larĝecon de via retejo kaj enhavo.

<div class = "navbaro" > 
  <div class = "navbar-interna" > 
    <a class = "brand" href = "#" > Titolo </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Hejmo </a></li>  
      <li><a href = "#" > Ligo </a></li> 
      <li><a href = "#" > Ligo </a></li> 
    </ul>
  </div>
</div>

Navbar-komponentoj

Marko

Simpla ligo por montri vian markon aŭ projektan nomon nur postulas ankro-etikedon.

<a class = "brand" href = "#" > Nomo de projekto </a>

Nav-ligiloj

Nav-eroj estas simple aldoni per neordigitaj listoj.

<ul class = "nav" > 
  <li class = "aktiva" > 
    <a href = "#" > Hejmo </a> 
  </li>
  <li><a href = "#" > Ligo </a></li> 
  <li><a href = "#" > Ligo </a></li> 
</ul>

Vi povas facile aldoni disigilojn al viaj navigaciaj ligiloj kun malplena listo kaj simpla klaso. Nur aldonu ĉi tion inter ligiloj:

<ul class = "nav" > 
  ...
  <li class = "dividilo-vertikala" ></li> 
  ...
</ul>

Formoj

Por konvene stiligi kaj poziciigi formularon ene de la navbreto, aldonu la taŭgajn klasojn kiel montrite sube. Por defaŭlta formo, inkludu .navbar-formkaj aŭ .pull-leftaŭ .pull-rightpor ĝuste vicigi ĝin.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Sendi </button>  
</form>

Serĉformularo

Por pli personecigita serĉformularo, aldonu .navbar-searchal la formkaj .search-queryal la enigo por specialigitaj stiloj en la navbaro.

<form class = "navbar-serĉo tiru-maldekstren" > 
  <input type = "text" class = "serĉo-demando" anstataŭilo = "Serĉo" >   
</form>

Komponento vicigo

Vicigu nav-ligilojn, serĉformularon aŭ tekston, uzu la .pull-leftaŭ .pull-rightutilajn klasojn. Ambaŭ klasoj aldonos CSS-flosilon en la specifita direkto.

Uzante falmenuojn

Aldonu falmenuojn kaj elŝutojn al la navigacio kun iom da markado kaj la falmenuoj JavaScript-kromaĵo .

<ul class = "nav" > 
  <li class = "menuo" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "menumenumo" >   
      Konto
      <b klaso = "karto" ></b> 
    </a>
    <ul class = "falmenuo" > 
      ...
    </ul>
  </li>
</ul>

Vizitu la dokumentaron pri JavaScript -menuoj por pli da markado kaj informoj pri vokado de menuoj.

Teksto

Envolvu ŝnurojn de teksto en elemento kun .navbar-text, kutime sur <p>etikedo por ĝusta gvidado kaj koloro.

Laŭvolaj montraj variaĵoj

Ripari la navbaron al la supro aŭ malsupro de la vidfenestro kun plia klaso sur la plej ekstera div, .navbar.

Riparita supre

Aldonu .navbar-fixed-topkaj memoru prikalkuli la kaŝitan areon sub ĝi aldonante almenaŭ 40px paddingal la <body>. Nepre aldonu ĉi tion post la kerna Bootstrap CSS kaj antaŭ la laŭvola respondema CSS.

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

Fiksita malsupre

Aldonu .navbar-fixed-bottomanstataŭe.

<div class = "navbar navbar-fiksa-fundo" > 
  ...
</div>

Senmova supra navbaro

Kreu plenlarĝan navbaron, kiu rulumas for kun la paĝo aldonante .navbar-static-top. Male al la .navbar-fixed-topklaso, vi ne bezonas ŝanĝi ajnan kompletigo sur la body.

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

Respondema navbaro

Por efektivigi disfalantan respondeman navdrinkejon, envolvu vian navbaran enhavon en enhavanta div, .nav-collapse.collapse, kaj aldonu la navbaran baskuligan butonon, .btn-navbar.

<div klaso = "navbaro" >
  <div klaso = "navbar-interna" >
    <div class = "ujo" > 
 
      <!-- .btn-navbar estas uzata kiel baskulo por kolapsita navbar enhavo -->
      <a class = "btn btn-navbar" data-toggle = "kolapsi" data-target = ".nav-kolapso"    >
        <span class = "piktogramo"  ></span>
        <span class = "piktogramo"  ></span>
        <span class = "piktogramo"  ></span>
      </a>
 
      <!-- Nepre lasu la markon tie, se vi volas ke ĝi montru -->
      <a class = "brand" href = "#" > Nomo de projekto </a>  
 
      <!-- Ĉion, kion vi volas kaŝita je 940 px aŭ malpli, metu ĉi tie -->
      <div class = "nav-kolapso kolapso" > 
        <!-- .nav, .navbar-search, .navbar-form, ktp -->
      </div>
 
    </div>
  </div>
</div>

Atentu! La respondema navbar postulas la kolapsan kromaĵon kaj respondeman Bootstrap CSS-dosieron .

Inversa variado

Modifi la aspekton de la navbar aldonante .navbar-inverse.

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

Ekzemploj

Ununura ekzemplo montrita kiel ĝi povus esti montrata tra pluraj paĝoj.

<ul class = "panpeceto" > 
  <li><a href = "#" > Hejmo </a> <span class = "dividilo" > / </span></li>   
  <li><a href = "#" > Biblioteko </a> <span class = "dividilo" > / </span></li>   
  <li class = "aktiva" > Datumoj </li> 
</ul>

Norma paĝigo

Simpla paĝigo inspirita de Rdio, bonega por programoj kaj serĉrezultoj. La granda bloko estas malfacile maltrafi, facile skalebla kaj provizas grandajn klakajn areojn.

<div class = "paĝigo" > 
  <ul>
    <li><a href = "#" > Antaŭa </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 = "#" > Poste </a></li> 
  </ul>
</div>

Opcioj

Malfunkciigitaj kaj aktivaj ŝtatoj

Ligiloj estas agordeblaj por malsamaj cirkonstancoj. Uzu .disabledpor neklakeblaj ligiloj kaj .activepor indiki la nunan paĝon.

<div class = "paĝigo" > 
  <ul>
    <li class = "malŝaltita" ><a href = "#" > « </a></li>  
    <li class = "aktiva" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Vi povas laŭvole interŝanĝi aktivajn aŭ malebligitajn ankrojn por interspacoj por forigi klakfunkciecon konservante celitajn stilojn.

<div class = "paĝigo" > 
  <ul>
    <li class = "malfunkciigita" ><span> « </ span ></ li > 
    <li class = "aktiva" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Grandecoj

Ĉu vi volas pli grandan aŭ pli malgrandan paĝigon? Aldonu .pagination-large, .pagination-small, aŭ .pagination-minipor pliaj grandecoj.

<div class = "paĝigo paĝigo-granda" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paĝigo" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paĝigo paĝigo-malgranda" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paĝigo pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Vicigo

Aldonu unu el du laŭvolaj klasoj por ŝanĝi la vicigon de paĝigaj ligiloj: .pagination-centeredkaj .pagination-right.

<div class = "paĝigo paĝigo-centrita" > 
  ...
</div>

<div class = "paĝigo paĝigo-dekstra" > 
  ...
</div>

Televokilo

Rapidaj antaŭaj kaj sekvaj ligiloj por simplaj paĝigaj efektivigoj kun malpeza markado kaj stiloj. Ĝi estas bonega por simplaj retejoj kiel blogoj aŭ revuoj.

Defaŭlta ekzemplo

Defaŭlte, la paginador centras ligilojn.

<ul class = "pagilo" > 
  <li><a href = "#" > Antaŭa </a></li> 
  <li><a href = "#" > Poste </a></li> 
</ul>

Vicigitaj ligiloj

Alternative, vi povas vicigi ĉiun ligon al la flankoj:

<ul class = "pagilo" > 
  <li class = "antaŭa" > 
    <a href = "#" > ← Pli malnova </a> 
  </li>
  <li klaso = "sekva" > 
    <a href = "#" > Pli nova → </a> 
  </li>
</ul>

Laŭvola malfunkciigita ŝtato

Pager-ligiloj ankaŭ uzas la ĝeneralan .disabledutilecan klason de la paĝigo.

<ul class = "pagilo" > 
  <li class = "antaŭa malfunkciigita" > 
    <a href = "#" > ← Pli malnova </a> 
  </li>
  ...
</ul>

Etikedoj

Etikedoj	Markado
Defaŭlte	`<span class="label">Default</span>`
Sukceso	`<span class="label label-success">Success</span>`
Averto	`<span class="label label-warning">Warning</span>`
Grava	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Inversa	`<span class="label label-inverse">Inverse</span>`

Insignoj

Nomo	Ekzemplo	Markado
Defaŭlte	1	`<span class="badge">1</span>`
Sukceso	2	`<span class="badge badge-success">2</span>`
Averto	4	`<span class="badge badge-warning">4</span>`
Grava	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Inversa	10	`<span class="badge badge-inverse">10</span>`

Facile faldebla

Por facila efektivigo, etikedoj kaj insignoj simple kolapsos (per la :emptyelektilo de CSS) kiam neniu enhavo ekzistas ene.

Hero-unuo

Malpeza, fleksebla komponanto por montri ŝlosilan enhavon en via retejo. Ĝi funkcias bone en merkatado kaj enhavo-pezaj retejoj.

Saluton mondo!

Ĉi tio estas simpla herounuo, simpla jumbotron-stila komponento por nomi ekstran atenton al elstara enhavo aŭ informoj.

Lernu pli

<div class = "hero-unuo" > 
  <h1> Titolo </h1>
  <p> Skomo </p>
  <p>
    <a klaso = "btn btn-primara btn-granda" > 
      Lernu pli
    </a>
  </p>
</div>

Paĝa kaplinio

Simpla ŝelo por h1taŭge interspacigi kaj segmenti sekciojn de enhavo sur paĝo. Ĝi povas uzi la h1defaŭltan small, elementon ankaŭ la plej multajn aliajn komponantojn (kun pliaj stiloj).

<div class = "paĝo-kapo" > 
  <h1> Ekzempla paĝokapo <small> Subteksto por kaplinio </small></h1>
</div>

Defaŭltaj bildetoj

Defaŭlte, la bildetoj de Bootstrap estas dizajnitaj por montri ligitajn bildojn kun minimuma postulata markado.

Tre agordebla

Kun iom da ekstra markado, eblas aldoni ajnan specon de HTML-enhavo kiel titoloj, alineoj aŭ butonoj en bildetojn.

Bildeto-etikedo

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.

Ago Ago
Bildeto-etikedo

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.

Ago Ago
Bildeto-etikedo

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.

Ago Ago

Kial uzi bildetojn

Bildetoj (antaŭe .media-gridĝis v1.4) estas bonegaj por kradoj de fotoj aŭ filmetoj, bildaj serĉrezultoj, podetalaj produktoj, biletujoj kaj multe pli. Ili povas esti ligiloj aŭ statika enhavo.

Simpla, fleksebla markado

Bildeto-markado estas simpla—a ulkun ajna nombro da lielementoj estas ĉio, kio necesas. Ĝi ankaŭ estas tre fleksebla, ebligante ajnan tipon de enhavo kun nur iom pli da markado por envolvi vian enhavon.

Uzas kradkolumngrandecojn

Laste, la bildetoj-komponento uzas ekzistantajn kradsistemajn klasojn - kiel .span2aŭ.span3 —por kontrolo de bildetoj-dimensioj.

Markado

Kiel menciite antaŭe, la bezonata markado por bildetoj estas malpeza kaj simpla. Jen rigardo al la defaŭlta agordo por ligitaj bildoj :

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

Por kutima HTML-enhavo en bildetoj, la markado iomete ŝanĝiĝas. Por permesi bloknivelan enhavon ie ajn, ni interŝanĝas la <a>por <div>tia:

<ul class = "bildetoj" > 
  <li class = "span4" > 
    <div class = "bildeto" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Bildeto-etikedo </h3>
      <p> Bildetoteksto... </p>
    </div>
  </li>
  ...
</ul>

Pli da ekzemploj

Esploru ĉiujn viajn eblojn kun la diversaj kradaj klasoj disponeblaj al vi. Vi ankaŭ povas miksi kaj kongrui malsamajn grandecojn.

Defaŭlta atentigo

Envolvu ajnan tekston kaj laŭvolan forĵetbutonon .alertpor baza averta avertmesaĝo.

Averto! Plej bone kontrolu vin mem, vi ne aspektas tro bona.

<div class = "atentigo" > 
  <button type = "button" class = "fermi" data-dismiss = "atenti" > × </butono>   
  <strong> Averto! </strong> Plej bone kontrolu vin mem, vi ne aspektas tro bona.
</div>

Forĵeti butonojn

Poŝtelefonaj Safari kaj Mobile Opera retumiloj, krom la data-dismiss="alert"atributo, postulas href="#"por la malakcepto de atentigoj kiam vi uzas <a>etikedon.

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

Alternative, vi povas uzi <button>elementon kun la datuma atributo, kion ni elektis fari por niaj dokumentoj. Kiam vi uzas <button>, vi devas inkluzivi type="button"aŭ viaj formoj eble ne sendis.

<button type = "button" class = "fermi" data-dismiss = "atenti" > × </butono>

Forĵeti atentigojn per JavaScript

Uzu la atentigojn jQuery-kromaĵon por rapida kaj facila malakcepto de atentigoj.

Opcioj

Por pli longaj mesaĝoj, pliigu la kompletigo sur la supro kaj malsupro de la atentiga envolvaĵo aldonante .alert-block.

Averto!

Plej bone kontrolu vin mem, vi ne aspektas tro bona. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "alerto-atentigo-bloko" > 
  <button type = "button" class = "fermi" data-dismiss = "atenti" > × </butono>   
  <h4> Averto! </h4>
  Plej bone kontrolu vin mem, vi ne estas...
</div>

Kuntekstaj alternativoj

Aldonu laŭvolajn klasojn por ŝanĝi la signifon de atentigo.

Eraro aŭ danĝero

Ho klaku! Ŝanĝu kelkajn aferojn kaj provu sendi denove.

<div class = "alerto-eraro" > 
  ...
</div>

Sukceso

Bone farita! Vi sukcese legis ĉi tiun gravan atentan mesaĝon.

<div class = "alerto-atentigo-sukceso" > 
  ...
</div>

Informoj

Atentu! Ĉi tiu atentigo bezonas vian atenton, sed ĝi ne estas tre grava.

<div class = "alerto-alerto-informoj" > 
  ...
</div>

Ekzemploj kaj markado

Baza

Defaŭlta progresbreto kun vertikala gradiento.

<div class = "progreso" > 
  <div class = "bar" style = " larĝo : 60 %; " ></div>   
</div>

Striita

Uzas gradienton por krei strian efikon. Ne havebla en IE7-8.

<div class = "progreso progres-striita" > 
  <div class = "bar" style = " larĝo : 20 %; " ></div>   
</div>

Vigla

Aldonu .activeal .progress-stripedpor animi la striojn dekstren al maldekstre. Ne havebla en ĉiuj versioj de IE.

<div class = "progreso progres-striita aktiva" > 
  <div class = "bar" style = " larĝo : 40 %; " ></div>   
</div>

Stakitaj

Metu plurajn stangojn en la saman .progresspor staki ilin.

<div class = "progreso" > 
  <div class = "bar bar-success" style = " larĝo : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " larĝo : 20 %; " ></div>   
  <div class = "drinkejo-danĝero" style = " larĝo : 10 %; " ></div>   
</div>

Opcioj

Pliaj koloroj

Progresbaroj uzas iujn el la samaj butonoj kaj atentaj klasoj por konsekvencaj stiloj.

<div class = "progresprogreso-informoj" > 
  <div class = "bar" style = " larĝo : 20 % " ></div>   
</div>
<div class = "progreso progreso-sukceso" > 
  <div class = "bar" style = " larĝo : 40 % " ></div>   
</div>
<div class = "progreso progreso-averto" > 
  <div class = "bar" style = " larĝo : 60 % " ></div>   
</div>
<div class = "progreso progreso-danĝero" > 
  <div class = "bar" style = " larĝo : 80 % " ></div>   
</div>

Striitaj stangoj

Simile al la solidaj koloroj, ni havas diversajn striitajn progresstangojn.

<div class = "progreso progreso-informo progreso-striita" > 
  <div class = "bar" style = " larĝo : 20 % " ></div>   
</div>
<div class = "progreso progreso-sukceso progreso-striita" > 
  <div class = "bar" style = " larĝo : 40 % " ></div>   
</div>
<div class = "progreso progreso-averto progreso-striita" > 
  <div class = "bar" style = " larĝo : 60 % " ></div>   
</div>
<div class = "progreso progreso-danĝero progreso-striita" > 
  <div class = "bar" style = " larĝo : 80 % " ></div>   
</div>

Subteno de retumilo

Progresstangoj uzas CSS3-gradientojn, transirojn kaj kuraĝigojn por atingi ĉiujn siajn efikojn. Ĉi tiuj funkcioj ne estas subtenataj en IE7-9 aŭ pli malnovaj versioj de Firefox.

Versioj antaŭaj ol Internet Explorer 10 kaj Opera 12 ne subtenas animaciojn.

Abstraktaj objektostiloj por konstrui diversajn specojn de komponantoj (kiel blogaj komentoj, Tweets, ktp) kiuj prezentas maldekstren aŭ dekstren vicigitan bildon kune kun teksta enhavo.

Defaŭlta ekzemplo

La defaŭlta amaskomunikilaro permesas flosi amaskomunikilaron objekton (bildoj, filmetoj, aŭdio) maldekstren aŭ dekstren de enhavbloko.

Media titolo

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.

Media titolo

<div class = "komunikiloj" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-korpo" > 
    <h4 class = "media-heading" > Media titolo </h4> 
    ...
 
    <!-- Nestita amaskomunikila objekto -->
    <div class = "komunikiloj" > 
      ...
    </div>
  </div>
</div>

Listo de amaskomunikiloj

Kun iom da ekstra markado, vi povas uzi amaskomunikilaron ene de listo (utila por komentfadenoj aŭ artikoloj-listoj).

Media titolo

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.

Nestitaj amaskomunikiloj titolo
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.

Nestitaj amaskomunikiloj titolo
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.

Nestitaj amaskomunikiloj titolo
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.
Media titolo
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 = "muld-listo" > 
  <li class = "komunikiloj" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-korpo" > 
      <h4 class = "media-heading" > Media titolo </h4> 
      ...
 
      <!-- Nestita amaskomunikila objekto -->
      <div class = "komunikiloj" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Uzu la puton kiel simplan efikon al elemento por doni al ĝi enmetitan efikon.

Rigardu, mi estas en puto!

<div class = "nu" > 
  ...
</div>

Laŭvolaj klasoj

Kontrolu remburaĵon kaj rondigitajn angulojn kun du laŭvolaj modifklasoj.

Rigardu, mi estas en puto!

<div class = "nu bone-granda" > 
  ...
</div>

Rigardu, mi estas en puto!

<div class = "bone-malgranda" > 
  ...
</div>

Fermu ikonon

Uzu la ĝeneralan fermikonon por forĵeti enhavon kiel modalojn kaj atentigojn.

<button class = "fermi" > × </butono>

iOS-aparatoj postulas href="#"eventojn por klako se vi preferus uzi ankron.

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

Helpklasoj

Simplaj, fokusitaj klasoj por malgrandaj ekranaj aŭ konduttajloj.

.tiri-maldekstren

Flosu elementon maldekstre

klaso = "tiri-maldekstren"

. tiri - maldekstren {
  flosi : maldekstre ;
}

.tiri-dekstren

Flosu elementon dekstre

klaso = "tiri dekstren"

. tiri - dekstre {
  flosi : dekstra ;
}

.mutigita

Ŝanĝu la koloron de elemento al#999

klaso = "silentita"

. silentigita {
  koloro : #999; 
}

.clearfix

Forigi la floatsur iu ajn elemento

klaso = "malpurigi"

. clearfix {
  * zomi : 1 ; 
  &: antaŭ ,
  &: post {
    montri : tablo ;
    enhavo : "" ; 
  }
  &: post {
    klara : ambaux ;
  }
}

falmenuoj

Ekzemplo

Markado

Opcioj

Vicigante la menuojn

Malebligitaj menuaj opcioj

Submenuoj sur falmenuoj

Butongrupoj

Ekzemploj

Ununura butongrupo

Multoblaj butongrupoj

Vertikalaj butongrupoj

Markobutono kaj radio-gustoj

Dropdowns en butongrupoj

Butonaj falmenuoj

Superrigardo kaj ekzemploj

Funkcias kun ĉiuj grandecoj de butonoj

Postulas JavaScript

Dividi butonajn menuojn

Grandecoj

Elŝutaj menuoj

Nav: langetoj, piloloj kaj listoj

Malpezaj defaŭltoj Sama markado, malsamaj klasoj

Bazaj langetoj

Bazaj piloloj

Malfunkciigita ŝtato

Komponento vicigo

Stapilebla

Stakitaj langetoj

Stakitaj piloloj

Dropdowns

Langetoj kun falmenuoj

Piloloj kun falmenuoj

Nav-listoj

Ekzempla navlisto

Horizontala disigilo

Tabulabla nav

Tabula ekzemplo

Fade en langetoj

Postulas jQuery-aldonaĵon

Tabulabla en ajna direkto

Langetoj sur la fundo

Langetoj maldekstre

Langetoj dekstre

Navbaro

Baza navbaro

Navbar-komponentoj

Marko

Nav-ligiloj

Formoj

Serĉformularo

Komponento vicigo

Uzante falmenuojn

Teksto

Laŭvolaj montraj variaĵoj

Riparita supre

Fiksita malsupre

Senmova supra navbaro

Respondema navbaro

Inversa variado

Panpecetoj

Ekzemploj

Paĝigo Du ebloj por paĝigi enhavon

Norma paĝigo

Opcioj

Malfunkciigitaj kaj aktivaj ŝtatoj

Grandecoj

Vicigo

Televokilo

Defaŭlta ekzemplo

Vicigitaj ligiloj

Laŭvola malfunkciigita ŝtato

Etikedoj kaj insignoj

Etikedoj

Insignoj

Facile faldebla

Tipografiaj komponantoj

Hero-unuo

Saluton mondo!

Paĝa kaplinio