Esempiu

Menu contestuale toggleable per vede liste di ligami. Fattu interattivu cù u plugin JavaScript dropdown .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Azzione </a></li>  
  <li><a tabindex = "-1" href = "#" > Un'altra azione </a></li>  
  <li><a tabindex = "-1" href = "#" > Qualcosa d'altru quì </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Ligame separatu </a></li>  
</ul>

Marcatura

Fighjendu solu u menù drop-down, quì hè u HTML necessariu. Avete bisognu di imballà u trigger di u menù drop-down è u menù dropdown in .dropdown, o un altru elementu chì dichjara position: relative;. Allora basta à creà u menu.

<div class = "dropdown" > 
  <!-- Ligame o buttone per cambià u menù drop-down -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Azzione </a></li>  
    <li><a tabindex = "-1" href = "#" > Un'altra azione </a></li>  
    <li><a tabindex = "-1" href = "#" > Qualcosa d'altru quì </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Ligame separatu </a></li>  
  </ul>
</div>

Opzioni

Allineate i menu à a diritta è aghjunghje include livelli supplementari di menu a tendina.

Allineamentu di i menu

Aghjunghjite .pull-rightà .dropdown-menua destra allineate u menù a tendina.

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

Opzioni di menu disabilitate

Aghjunghjite .disabledà un <li>in u menù dropdown per disattivà u ligame.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Ligame regulare </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Link disattivatu </a></li>   
  <li><a tabindex = "-1" href = "#" > Un altru ligame </a></li>  
</ul>

Sottomenu in menu a discesa

Aghjunghjite un livellu extra di menu drop-down, apparsu nantu à u passaghju cum'è quelli di OS X, cù qualchi aggiunte di marcatura simplici. Aghjunghjite .dropdown-submenuà qualsiasi liin un menù dropdown esistente per u stilu automaticu.

Default

Dropup

Sottomenu a sinistra

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "sottomenu a discesa" > 
    <a tabindex = "-1" href = "#" > Più opzioni </a>  
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </li>
</ul>

Esempii

Dui opzioni basi, cù duie varianti più specifiche.

Un gruppu di buttone unicu

Avvolgi una seria di buttoni cù .btnin .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > A manca </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Destra </button> 
</div>

Diversi gruppi di buttone

Unisce seti di <div class="btn-group">in un <div class="btn-toolbar">per cumpunenti più cumplessi.

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Gruppi di buttone verticali

Fate chì un inseme di buttuni apparisce verticalmente in pila invece di orizontali.

<div class = "btn-group btn-group-vertical" > 
  ...
</div>

Casella di spunta è sapori radio

I gruppi di buttone pò ancu funziunà cum'è radiu, induve solu un buttone pò esse attivu, o caselle di spunta, induve ogni numeru di buttoni pò esse attivu. Vede i documenti JavaScript per quessa.

Dropdowns in gruppi di buttone

A testa alta !I buttoni cù menu dropdown devenu esse imballati individualmente in u so propiu per .btn-groupun .btn-toolbarrendering propiu.

Panoramica è esempii

Aduprate qualsiasi buttone per attivà un menu a tendina mettendulu in un .btn-groupè furnisce u marcatu di menu propiu.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Azzione
    <span class = "caret" ></span> 
  </a>
  <ul class = "menu a discesa" > 
    <!-- links menu a tendina -->
  </ul>
</div>

Funziona cù tutte e dimensioni di buttone

I menu dropdown di i buttoni funzionanu in ogni dimensione: .btn-large, .btn-small, o .btn-mini.

Richiede JavaScript

I dropdown di i buttoni necessitanu u plugin Bootstrap dropdown per funziunà.

In certi casi, cum'è u telefuninu, i menu a tendina si estenderanu fora di a vista. Avete bisognu di risolve l'allineamentu manualmente o cù JavaScript persunalizatu.

Dividete i menu a tendina di u buttone

Basendu nantu à i stili di u gruppu di buttone è u marcatu, pudemu creà facilmente un buttone split. I buttuni divisi presentanu una azione standard à manca è un toggle dropdown à a diritta cù ligami contextuali.

<div class = "btn-group" > 
  <button class = "btn" > Azzione </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menu a discesa" > 
    <!-- links menu a tendina -->
  </ul>
</div>

Taglie

Utilizà e classi di buttone extra .btn-mini, .btn-small, o .btn-largeper dimensionà.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Azzione </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menu a discesa" > 
    <!-- links menu a tendina -->
  </ul>
</div>

Menu a tendina

I menu a tendina ponu ancu esse attivati da u fondu in sopra aghjunghjendu una sola classe à u parent immediatu di .dropdown-menu. Invertirà a direzzione di .caretu menu è riposizionarà u menù stessu per passà da u fondu in l'altu invece di l'altu in sopra.

<div class = " dropup di btn-group" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "menu a discesa" > 
    <!-- links menu a tendina -->
  </ul>
</div>

Predefiniti leggeri Stessa marcatura, diverse classi

Tutti i cumpunenti di navigazione quì-tabulazioni, pillole è listi- sparte u listessu marcatu di basa è stili attraversu a .navclasse.

Tabs basi

Pigliate un regulare <ul>di ligami è aghjunghje .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "attivu" > 
    <a href = "#" > Casa </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pills basi

Pigliate u listessu HTML, ma utilizate .nav-pillsinvece:

<ul class = "nav nav-pills" > 
  <li class = "attivu" > 
    <a href = "#" > Casa </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Statu disattivatu

Per qualsiasi cumpunente di navigazione (tabulazioni, pillole, o lista), aghjunghje .disabledper ligami grigi è senza effetti di hover . I ligami fermanu clicchendu, però, salvu chì ùn sguassate l' hrefattributu. In alternativa, pudete implementà JavaScript persunalizatu per prevene quelli clics.

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

Allineamentu di cumpunenti

Per allineà i ligami di navigazione, aduprate .pull-lefto .pull-rightclassi di utilità. E duie classi aghjunghjenu un float CSS in a direzzione specifica.

Impilabile

Siccomu i tabulazioni è i pills sò orizontali per difettu, aghjunghje solu una seconda classa, .nav-stacked, per fà apparisce verticalmente stacked.

Tabulature impilate

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

Pilule impilate

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

Dropdowns

Aghjunghjite menu dropdown cù un pocu HTML extra è u plugin JavaScript dropdowns .

Tabulazioni cù menu a tendina

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu a discesa" > 
      <!-- ligami -->
    </ul>
  </li>
</ul>

Pills cù dropdowns

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "menu a discesa" > 
      <!-- ligami -->
    </ul>
  </li>
</ul>

Listi di navigazione

Un modu simplice è faciule per custruisce gruppi di ligami di navigazione cù intestazioni opzionali. Sò megliu utilizati in sidebars cum'è u Finder in OS X.

Esempiu di lista di navigazione

Pigliate una lista di ligami è aghjunghje class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Intestazione di a lista </li> 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Biblioteca </a></li> 
  ...
</ul>

NotaPer nidificà in una lista di navigazione, include class="nav nav-list"nantu à qualsiasi <ul>.

Divisori orizontali

Aghjunghjite un divisore horizontale creendu un articulu di lista viotu cù a classa .divider, cum'è cusì:

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

Navigazione à tabulazione

Fate vita à e vostre tabulazioni cù un plugin simplice per bascà trà u cuntenutu via tabulazioni. Bootstrap integra tabulazioni tabulabili in quattru stili: cima (predeterminata), right, bottom, and left.

Esempiu di tabulazione

Per fà e tabulazioni tabulabili, creanu un .tab-paneID unicu per ogni tabulazione è imbulighjate in .tab-content.

Sò in a Sezione 1.

Saluti, sò in a Sezione 2.

Chì vai ragazza, questu hè a Sezione 3.

<div class = "tabbable" > <!-- Necessaria solu per e tabulazioni di sinistra/destra -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Sezione 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Sezione 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane attivu" id = "tab1" >  
      <p> Sò in a Sezione 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Salute, sò in a Sezione 2. </p>
    </div>
  </div>
</div>

Fade in tabulazioni

Per fà chì e tabulazioni svaniscenu, aghjunghje .fadeà ognunu .tab-pane.

Richiede un plugin jQuery

Tutte e tabulazioni di tabulazione sò alimentate da u nostru plugin jQuery ligeru. Leghjite più nantu à cumu dà vita à e tabulazioni di tabulazione nantu à a pagina di documenti JavaScript .

Tabulabile in ogni direzzione

Tabs nantu à u fondu

Flip l'ordine di l'HTML è aghjunghje una classa per mette tabulazioni in u fondu.

Sò in a Sezione A.

Saluti, sò in a Sezione B.

Chì vai ragazza, questu hè a Sezione C.

<div class = "tabulazioni tabulabili-sotto" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Tabs à manca

Scambià a classe per mette tabulazioni à a manca.

Sò in a Sezione A.

Saluti, sò in a Sezione B.

Chì vai ragazza, questu hè a Sezione C.

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

Tabs à a diritta

Scambià a classe per mette tabulazioni à a diritta.

Sò in a Sezione A.

Saluti, sò in a Sezione B.

Chì vai ragazza, questu hè a Sezione C.

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

Barra di navigazione basica

Per principià, i navbars sò statici (micca fissati à a cima) è includenu supportu per un nome di prughjettu è navigazione basica. Pone unu in ogni locu in un .container, chì stabilisce a larghezza di u vostru situ è u cuntenutu.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Titulu </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Home </a></li>  
      <li><a href = "#" > Link </a></li> 
      <li><a href = "#" > Link </a></li> 
    </ul>
  </div>
</div>

cumpunenti Navbar

Marca

Un ligame simplice per mostrà a vostra marca o u nome di u prugettu richiede solu un tag d'ancora.

<a class = "brand" href = "#" > Nome di u prughjettu </a>

Ligami di navigazione

L'articuli di navigazione sò simplici per aghjunghje via listi senza ordine.

<ul class = "nav" > 
  <li class = "attivu" > 
    <a href = "#" > Casa </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Pudete facilmente aghjunghje divisori à i vostri ligami di navigazione cun un articulu di lista viotu è una classa simplice. Basta aghjunghje questu trà i ligami:

<ul class = "nav" > 
  ...
  <li class = "divisore-verticale" ></li> 
  ...
</ul>

Forme

Per stilà bè è pusà una forma in a barra di navigazione, aghjunghje e classi appropritate cum'è mostra quì sottu. Per una forma predeterminata, include .navbar-formè o .pull-lefto .pull-rightper allineà bè.

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

Forma di ricerca

Per una forma di ricerca più persunalizata, aghjunghje .navbar-searchà l' forme .search-queryà l'input per stili specializati in a barra di navigazione.

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

Allineamentu di cumpunenti

Align ligami nav, forma di ricerca, o testu, aduprà u .pull-lefto .pull-rightclassi di utilità. E duie classi aghjunghjenu un float CSS in a direzzione specifica.

Utilizà i dropdowns

Aghjunghjite dropdowns è dropups à u navigatore cù un pocu di marcatura è u plugin JavaScript dropdowns .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      contu
      <b class = "caret" ></b> 
    </a>
    <ul class = "menu a discesa" > 
      ...
    </ul>
  </li>
</ul>

Visita a documentazione di i dropdown JavaScript per più marcatu è infurmazione nantu à chjamate dropdowns.

Testu

Imbulighjate e stringhe di testu in un elementu cù .navbar-text, di solitu nantu à un <p>tag per u culore è u culore propiu.

Variazioni di display opzionali

Fix a navbar à a cima o in fondu di u viewport cù una classa supplementu nantu à u div più esterno, .navbar.

Fissu in cima

Aghjunghjite .navbar-fixed-topè ricordate di cuntà l'area oculta sottu aghjunghjendu almenu 40px paddingà u <body>. Assicuratevi di aghjunghje questu dopu à u core Bootstrap CSS è prima di u CSS responsive optional.

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

Fissu in fondu

Aghjunghjite .navbar-fixed-bottominvece.

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

Barra di navigazione superiore statica

Crea una barra di navigazione di larghezza completa chì scorri cù a pagina aghjunghjendu .navbar-static-top. A cuntrariu di a .navbar-fixed-topclasse, ùn avete micca bisognu di cambià alcuna padding in u body.

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

Navbar responsive

Per implementà una navbar responsive colapsante, imbulighjate u vostru cuntenutu di navbar in un div chì cuntene .nav-collapse.collapse, è aghjunghje u buttone di toggle navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar hè utilizatu cum'è basculante per u cuntenutu di navbar colapsatu -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Assicuratevi di lascià a marca fora, se vulete vede -->
      <a class = "brand" href = "#" > Nome di u prughjettu </a>  
 
      <!-- Tuttu ciò chì vulete ammucciatu à 940px o menu, postu quì -->
      <div class = "collapse nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, ecc -->
      </div>
 
    </div>
  </div>
</div>

A testa alta ! A navbar responsiva richiede u plugin di colapsu è u schedariu CSS Bootstrap responsive .

Variazione invertita

Mudificà l'aspettu di a barra di navigazione aghjunghjendu .navbar-inverse.

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

Esempii

Un unicu esempiu mostratu cumu pò esse affissatu in parechje pagine.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Home </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Biblioteca </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Dati </li> 
</ul>

Pagina standard

Semplice paginazione inspirata da Rdio, fantastica per app è risultati di ricerca. U grande bloccu hè difficiule di missu, facilmente scalabile, è furnisce grandi spazii di clic.

<div class = "paginazione" > 
  <ul>
    <li><a href = "#" > Prec </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 = "#" > Avanti </a></li> 
  </ul>
</div>

Opzioni

Stati disattivati è attivi

I ligami sò persunalizabili per diverse circustanze. Aduprà .disabledper i ligami incliccabili è .activeper indicà a pagina attuale.

<div class = "paginazione" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Pudete eventualmente scambià l'ancore attive o disattivate per spazii per sguassà a funziunalità di clic, mantenendu i stili previsti.

<div class = "paginazione" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "attivu" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Taglie

Vulete una paginazione più grande o più chjuca? Aggiungi .pagination-large, .pagination-small, o .pagination-miniper dimensioni supplementari.

<div class = "paginazione paginazione-grande" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginazione" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginazione paginazione-piccola" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginazione paginazione-mini" > 
  <ul>
    ...
  </ul>
</div>

Allineamentu

Aghjunghjite una di duie classi opzionali per cambià l'alineazione di i ligami di paginazione: .pagination-centeredè .pagination-right.

<div class = "paginazione centrata in paginazione" > 
  ...
</div>

<div class = "paginazione paginazione-right" > 
  ...
</div>

paginar

Ligami rapidi precedenti è prossimi per implementazioni di paginazione simplici cù marcatura è stili di luce. Hè grande per i siti simplici cum'è i blog o riviste.

Esempiu predeterminatu

Per automaticamente, u pager centra i ligami.

<ul class = "pager" > 
  <li><a href = "#" > Precedente </a></li> 
  <li><a href = "#" > Avanti </a></li> 
</ul>

Ligami allineati

In alternativa, pudete allineà ogni ligame à i lati:

<ul class = "pager" > 
  <li class = "previous" > 
    <a href = "#" > ← Anzianu </a> 
  </li>
  <li class = "next" > 
    <a href = "#" > Più recente → </a> 
  </li>
</ul>

Statu disattivatu opzionale

I ligami di pager utilizanu ancu a .disabledclassa di utilità generale da a paginazione.

<ul class = "pager" > 
  <li class = "previous disabled" > 
    <a href = "#" > ← Anzianu </a> 
  </li>
  ...
</ul>

Etichette

Etichette	Marcatura
Default	`<span class="label">Default</span>`
Successu	`<span class="label label-success">Success</span>`
Attenzione	`<span class="label label-warning">Warning</span>`
Impurtante	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Inversu	`<span class="label label-inverse">Inverse</span>`

Badges

Nome	Esempiu	Marcatura
Default	1	`<span class="badge">1</span>`
Successu	2	`<span class="badge badge-success">2</span>`
Attenzione	4	`<span class="badge badge-warning">4</span>`
Impurtante	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Inversu	10	`<span class="badge badge-inverse">10</span>`

Facilmente collapsable

Per una implementazione faciule, l'etichette è i badge colapsanu solu (via u :emptyselettore di CSS) quandu ùn ci hè micca cuntenutu.

Unità eroe

Un cumpunente ligeru è flessibile per mostrà u cuntenutu chjave in u vostru situ. Funziona bè nantu à i siti di marketing è di cuntenutu.

Salute, mondu !

Questa hè una unità di eroe simplice, un cumpunente simplice in stile jumbotron per chjamà l'attenzione extra à u cuntenutu o l'infurmazioni presentati.

Sapè ne di più

<div class = "unità di eroe" > 
  <h1> Titulu </h1>
  <p> Slogan </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Sapè ne di più
    </a>
  </p>
</div>

Intestazione di a pagina

Una cunchiglia simplice per un h1spaziu adattatu è segmentà e sezioni di cuntenutu in una pagina. Pò aduprà l' elementu h1predeterminatu small, è ancu a maiò parte di l'altri cumpunenti (cù stili supplementari).

<div class = "pagina-header" > 
  <h1> Esempiu di intestazione di pagina <small> Sottotestu per l'intestazione </small></h1>
</div>

Miniature predefinite

Per automaticamente, e miniature di Bootstrap sò pensate per mostrà l'imaghjini ligati cù un marcatu minimu necessariu.

Altamente persunalizabile

Cù un pocu di marcatura extra, hè pussibule aghjunghje ogni tipu di cuntenutu HTML cum'è intestazioni, paragrafi, o buttoni in miniature.

Etichetta miniatura

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.

Azzione Azzione
Etichetta miniatura

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.

Azzione Azzione
Etichetta miniatura

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.

Azzione Azzione

Perchè aduprà miniature

Miniature (precedentemente .media-gridfinu à a v1.4) sò grandi per griglie di foto o video, risultati di ricerca d'imaghjini, prudutti di vendita, portafogli, è assai di più. Puderanu esse ligami o cuntenutu staticu.

Marcatura simplice è flessibile

A marcatura in miniatura hè simplice - una ulcù qualsiasi quantità di lielementi hè tuttu ciò chì hè necessariu. Hè ancu super flessibile, chì permette ogni tipu di cuntenutu cù un pocu più marcatu per imballà u vostru cuntenutu.

Utiliza dimensioni di e colonne di griglia

Infine, u cumpunente di miniature utilizza classi di sistema di griglia esistenti - cum'è .span2o .span3- per u cuntrollu di dimensioni di miniatura.

Marcatura

Comu diciatu prima, a marcatura necessaria per e miniature hè ligera è diretta. Eccu un ochju à a cunfigurazione predeterminata per l'imaghjini ligati :

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

Per u cuntenutu HTML persunalizatu in miniature, u marcatu cambia ligeramente. Per permettà u cuntenutu di u nivellu di bloccu in ogni locu, scambiemu <a>per un <div>cum'è cusì:

<ul class = "miniature" > 
  <li class = "span4" > 
    <div class = "miniatura" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Etichetta miniatura </h3>
      <p> Didascalia in miniatura... </p>
    </div>
  </li>
  ...
</ul>

Più esempii

Esplora tutte e vostre opzioni cù e diverse classi di griglia dispunibili per voi. Pudete ancu mischjà è cunghjuntà diverse dimensioni.

Alerta predeterminata

Imbulighjate qualsiasi testu è un buttone di licenziamentu facultativu .alertper un missaghju di avvisu di basa.

Attenzione ! U megliu verificate voi stessu, ùn site micca troppu bellu.

<div class = "alerta" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <strong> Attenzione ! </strong> U megliu verificate voi stessu, ùn site micca troppu bellu.
</div>

Licetà i buttoni

I navigatori Mobile Safari è Mobile Opera, in più di l' data-dismiss="alert"attributu, necessitanu una href="#"per l'eliminazione di l'alerta quandu usanu una <a>tag.

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

In alternativa, pudete aduprà un <button>elementu cù l'attributu di dati, chì avemu sceltu di fà per i nostri documenti. Quandu si usa <button>, duvete include type="button"o i vostri formi ùn ponu micca sottumessi.

<button type = "button" class = "close" data-dismiss = "alert" > × </button>

Ignora l'alerte via JavaScript

Aduprate u plugin di alerts jQuery per un licenziamentu rapidu è faciule di alerti.

Opzioni

Per i missaghji più longu, aumentate l'imbottitura in cima è in fondu di u wrapper d'alerta aghjunghjendu .alert-block.

Attenzione !

U megliu verificate voi stessu, ùn site micca troppu bellu. 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 = "close" data-dismiss = "alert" > × </button>   
  <h4> Attenzione ! </h4>
  U megliu verificate voi stessu, ùn site micca ...
</div>

Alternative cuntestuali

Aghjunghjite classi opzionali per cambià a connotazione di una alerta.

Errore o periculu

Oh snap! Cambia uni pochi di cose è pruvate à mandà di novu.

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

Successu

Bè fatta! Avete lettu bè stu missaghju d'alerta impurtante.

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

infurmazione

A testa alta ! Questa alerta hà bisognu di a vostra attenzione, ma ùn hè micca super impurtante.

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

Esempii è marcatura

Basic

Barra di prugressu predeterminata cù un gradiente verticale.

<div class = "progressu" > 
  <div class = "bar" style = " larghezza : 60 %; " ></div>   
</div>

Striped

Aduprà un gradiente per creà un effettu strisce. Ùn dispunibile in IE7-8.

<div class = "progressu à strisce di prugressu" > 
  <div class = "bar" style = " larghezza : 20 %; " ></div>   
</div>

Animatu

Aghjunghjite .activeper .progress-stripedanimate e strisce da diritta à manca. Ùn hè micca dispunibule in tutte e versioni di IE.

<div class = "progressu à strisce attivu" > 
  <div class = "bar" style = " larghezza : 40 %; " ></div>   
</div>

Impilati

Pone parechje barre in u stessu .progressper impilà.

<div class = "progressu" > 
  <div class = "bar bar-success" style = " larghezza : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " larghezza : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " larghezza : 10 %; " ></div>   
</div>

Opzioni

Culori supplementari

E barre di prugressu utilizanu alcuni di u listessu buttone è classi d'alerta per stili coherenti.

<div class = "progress progress-info" > 
  <div class = "bar" style = " larghezza : 20 % " ></div>   
</div>
<div class = "progressu prugressu-successu" > 
  <div class = "bar" style = " larghezza : 40 % " ></div>   
</div>
<div class = "avvertimentu di prugressu di prugressu" > 
  <div class = "bar" style = " larghezza : 60 % " ></div>   
</div>
<div class = "progressu-periculu di prugressu" > 
  <div class = "bar" style = " larghezza : 80 % " ></div>   
</div>

Barre à strisce

Simile à i culori solidi, avemu variu barre di prugressu strisce.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " larghezza : 20 % " ></div>   
</div>
<div class = "progressu prugressu-success progress-striped" > 
  <div class = "bar" style = " larghezza : 40 % " ></div>   
</div>
<div class = "progressu-avvertimentu prugressu-strisciatu" > 
  <div class = "bar" style = " larghezza : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " larghezza : 80 % " ></div>   
</div>

Supportu di u navigatore

E barre di prugressu utilizanu gradienti CSS3, transizioni è animazioni per ottene tutti i so effetti. Queste funzioni ùn sò micca supportate in IE7-9 o versioni più vechje di Firefox.

Versioni prima di Internet Explorer 10 è Opera 12 ùn supportanu micca animazioni.

Stili d'oggetti astratti per custruisce diversi tipi di cumpunenti (cum'è cumenti di blog, Tweets, etc.) chì presentanu una maghjina allinata à a manca o à a diritta cù u cuntenutu testuale.

Esempiu predeterminatu

I media predeterminati permettenu di float un ughjettu media (imaghjini, video, audio) à a manca o à a diritta di un bloccu di cuntenutu.

Titulu media

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.

Titulu media

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Titulu media </h4> 
    ...
 
    <!-- Oggettu media nidificatu -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Lista di media

Cù un pocu di marcatura extra, pudete aduprà a lista media interna (utile per i fili di cumenti o liste d'articuli).

Titulu media

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.

Intestazione media nidificata
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.

Intestazione media nidificata
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.

Intestazione media nidificata
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.
Titulu media
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 = "lista di media" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Titulu media </h4> 
      ...
 
      <!-- Oggettu media nidificatu -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Aduprate u pozzu cum'è un effettu simplice nantu à un elementu per dà un effettu inseritu.

Fighjate, sò in un pozzu !

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

Classi opzionali

Cuntrolla l'imbottitura è i cantoni arrotondati cù duie classi di modificatori opzionali.

Fighjate, sò in un pozzu !

<div class = "bene ben grande" > 
  ...
</div>

Fighjate, sò in un pozzu !

<div class = "ben bè-picculu" > 
  ...
</div>

Chiudi icona

Aduprate l'icona di chiudi generica per rinfriscà u cuntenutu cum'è modali è alerti.

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

I dispositi iOS necessitanu un href="#"eventu per cliccà se preferite aduprà un ancora.

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

Classi di helper

Classi simplici è focalizati per una piccula visualizazione o tweaks di cumpurtamentu.

.tirà à manca

Float un elementu manca

class = "tire a sinistra"

. tira - manca {
  float : manca ;
}

.tirà à diritta

Float un elementu ghjustu

class = "tire à destra"

. tira - dritta {
  float : right ;
}

.mutu

Cambia u culore di l'elementu#999

class = "silenziata"

. mutu {
  culore : #999; 
}

.clearfix

Sguassate u floatsu ogni elementu

class = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: prima ,
  &: dopu à {
    display : table ;
    cuntenutu : "" ; 
  }
  &: dopu à {
    chjaru : tramindui ;
  }
}

Menu a discesa

Esempiu

Marcatura

Opzioni

Allineamentu di i menu

Opzioni di menu disabilitate

Sottomenu in menu a discesa

Gruppi di buttone

Esempii

Un gruppu di buttone unicu

Diversi gruppi di buttone

Gruppi di buttone verticali

Casella di spunta è sapori radio

Dropdowns in gruppi di buttone

Menu a discesa dei pulsanti

Panoramica è esempii

Funziona cù tutte e dimensioni di buttone

Richiede JavaScript

Dividete i menu a tendina di u buttone

Taglie

Menu a tendina

Nav: tabs, pills, and lists

Predefiniti leggeri Stessa marcatura, diverse classi

Tabs basi

Pills basi

Statu disattivatu

Allineamentu di cumpunenti

Impilabile

Tabulature impilate

Pilule impilate

Dropdowns

Tabulazioni cù menu a tendina

Pills cù dropdowns

Listi di navigazione

Esempiu di lista di navigazione

Divisori orizontali

Navigazione à tabulazione

Esempiu di tabulazione

Fade in tabulazioni

Richiede un plugin jQuery

Tabulabile in ogni direzzione

Tabs nantu à u fondu

Tabs à manca

Tabs à a diritta

Navbar

Barra di navigazione basica

cumpunenti Navbar

Marca

Ligami di navigazione

Forme

Forma di ricerca

Allineamentu di cumpunenti

Utilizà i dropdowns

Testu

Variazioni di display opzionali

Fissu in cima

Fissu in fondu

Barra di navigazione superiore statica

Navbar responsive

Variazione invertita

Breadcrumbs

Esempii

Paginazione Duie opzioni per a paginazione di u cuntenutu

Pagina standard

Opzioni

Stati disattivati ​​è attivi

Taglie

Allineamentu

paginar

Esempiu predeterminatu

Ligami allineati

Statu disattivatu opzionale

Etichette e badge

Etichette

Badges

Facilmente collapsable

Cumpunenti tipografichi

Unità eroe

Salute, mondu !

Intestazione di a pagina

Stati disattivati è attivi