Gruppi di buttone

Aduprate gruppi di buttone per unisce parechji buttoni cum'è un cumpunente cumpostu. Custruite cù una seria di <a>o <button>elementi.

Pudete ancu cunghjuntà gruppi di <div class="btn-group">in un <div class="btn-toolbar">prughjetti più cumplessi.

Esempiu di marcatura

Eccu cumu l'HTML cerca un gruppu di buttone standard custruitu cù i buttuni di tag d'ancora:

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

È cù una toolbar per parechji gruppi:

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

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

Pigliate u javascript »

A testa alta

CSS per i gruppi di buttone hè in un schedariu separatu, button-groups.less.

Button dropdowns

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

Esempiu di marcatura

Simile à un gruppu di buttone, u nostru marcatu usa un marcatu di buttone regulare, ma cù una mansa di aghjunte per raffinà u stilu è sustene u plugin jQuery dropdown di Bootstrap.

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

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

Esempiu di marcatura

Espandemu nantu à i menu dropdown di u buttone normale per furnisce una seconda azione di buttone chì opera cum'è un trigger dropdown separatu.

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

Classe di basa putente

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

Perchè tabulature è pilules

Tabs è pills in Bootstrap sò custruiti nantu à un <ul>cù u listessu core HTML, una lista di ligami. Scambià trà tabulazioni o pillole cù solu una classe.

E duie opzioni sò fantastiche per sottosezzioni di cuntenutu o per navigà trà e pagine di cuntenutu ligatu.

Tabs basi

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

• A casa
• Prufilu
• Missaghji

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

• A casa
• Prufilu
• Missaghji

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

Cume li stack

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

Tabulature impilate

• A casa
• Prufilu
• Missaghji

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

Pilule impilate

• A casa
• Prufilu
• Missaghji

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

Menu ricchi resi facili

I menu dropdown in tabulazioni Bootstrap è pillole sò super faciuli è necessitanu solu un pocu HTML extra è un plugin jQuery ligeru.

Andate à a pagina Javascript per leghje i documenti nantu à l' inizializazione di dropdowns in Bootstrap.

Tabulature cù menu a tendina

• A casa
• Prufilu
• Dropdown
  • Azzione
  • Un'altra azione
  • Qualcosa altru quì
  • Ligame separatu

<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

• A casa
• Prufilu
• Dropdown
  • Azzione
  • Un'altra azione
  • Qualcosa altru quì
  • Ligame separatu

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

Navigazione in stile di l'applicazione

Listi di navigazione furnisce 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.

Strutturalmente, sò custruiti nantu à i stessi stili di navigazione core cum'è tabulazioni è pillole, cusì l'usu è a persunalizazione sò simplici.

Cù icone

I listi di navigazione sò ancu facili da equipà cù icone. Aghjunghjite l'etichetta propria <i>cù a classa è avete stabilitu.

Esempiu di lista di navigazione

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

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    L'intestazione di a lista
  </li>
  <li class = "attivu" > 
    <a href = "#" > Casa </a> 
  </li>
  <li>
    <a href = "#" > Biblioteca </a> 
  </li>
  ...
</ul>

Esempiu cù icone

U stessu esempiu, ma cù <i>tag per icone.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Biblioteca
    </a>
  </li>
  ...
</ul>

Ciò chì hè inclusu

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.

Cambià trà elli hè faciule è solu bisognu di cambià assai pocu marcatu.

Esempiu di tabulazione

Per fà tabulazioni tabulabili, imbulighjate .nav-tabsin un altru div cù class .tabbable.

Plugin jQuery persunalizatu

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

Get u javascript →

Tabs nantu à u fondu

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

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

Tabs à a manca

Scambià a classe per mette tabulazioni à a manca.

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

Tabs à a diritta

Scambià a classe per mette tabulazioni à a diritta.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" >
    ...
  </ul>
  <div class = "contenutu di tabulazione" >
    ...
  </div>
</div>

Navbar scaffolding

A navbar richiede solu uni pochi divs per strutturallu bè per a visualizazione statica o fissa.

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

Per fà a navbar fissata à a cima di u viewport, aghjunghje .navbar-fixed-topà u div più esterno, .navbar. In u vostru CSS, averà ancu bisognu di cuntà a sovrapposizione chì provoca aghjunghjendu padding-top: 40px;à u vostru <body>.

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

Nome di marca

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

<a class = "marca" href = "#" >  
  Nome di u prugettu
</a>

Forma di ricerca

Forme di ricerca ricevenu stili persunalizati in a barra di navigazione cù a .navbar-searchclasse. Includite .pull-lefto .pull-rightnantu formà l'allineà.

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

Variazione reattiva opzionale

Sicondu a quantità di cuntenutu in u vostru topbar, pudete vulete implementà l'opzioni rispunsevuli. Per fà cusì, imbulighjate u vostru cuntenutu nav 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 a barra di navigazione colapsata -->
      <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 = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, ecc -->
      </div>
 
    </div>
  </div>
</div>

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>

Aghjunghjendu dropdowns

L'aghjunghje dropdowns à u navigatore hè super simplice, ma richiede l'usu di u nostru plugin javascript .

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

Get u javascript →

Perchè aduprà

A navigazione di breadcrumb hè aduprata cum'è un modu per vede l'utilizatori induve si trovanu in una app o un situ, ma micca per a navigazione primaria. Mantene u so usu sparse è succinct per esse più efficace.

Esempii

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

• A casa

• Home /
• Biblioteca

• Home /
• biblioteca /
• Dati

Marcatura

HTML hè a vostra lista standard senza ordine cù ligami.

<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 = "attivu" > 
    <a href = "#" > Dati </a> 
  </li>
</ul>

Quandu aduprà

Paginazione ultra simplista è in stile minimale inspirata da Rdio, fantastica per app è risultati di ricerca. U grande bloccu hè difficiule di missu, facilmente scalabile, è furnisce grandi spazii di clic.

Ligami di pagine stateful

I ligami sò persunalizabili è funzionanu in parechje circustanze cù a classa ghjusta. .disabledper i ligami incliccabili è .activeper a pagina attuale.

Allineamentu flexible

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

Esempii

U cumpunente di paginazione predeterminatu hè flexible è travaglia in una quantità di variazioni.

Marcatura

Avvoltu in un <div>, a paginazione hè solu un <ul>.

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

À propositu di pager

U cumpunente pager hè un inseme di ligami per implementazioni di paginazione simplici cù marcatura ligera è ancu stili più ligeri. Hè grande per i siti simplici cum'è blog o riviste.

Esempiu predeterminatu

Per automaticamente, u pager centra i ligami.

• Previous
• Dopu

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

• ← Anzianu
• Novu →

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

Miniature predefinite

Per automaticamente, e miniature di Bootstrap sò pensate per vede 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

Perchè aduprà miniature

Miniature (precedentemente .media-gridfinu à a v1.4) sò fantastiche 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.

U marcatu

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 = "span3" > 
    <a href = "#" class = "miniatura" >  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "miniatura" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Etichetta miniatura </h5>
      <p> Didascalia in miniatura quì... </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.

Classe di basa riscritta

Cù Bootstrap 2, avemu simplificatu a classa di basa: .alertinvece di .alert-message. Avemu ancu riduciutu u marcatu minimu necessariu - ùn <p>hè micca necessariu per automaticamente, solu l'esterno<div> .

Un missaghju di alerta unicu

Per un cumpunente più durable cù menu codice, avemu sguassatu l'aspettu differenziatu per alerti di bloccu, missaghji chì venenu cù più padding è tipicamente più testu. A classe hè ancu cambiata in .alert-block.

Va bè cù javascript

Bootstrap vene cun un grande plugin jQuery chì supporta i missaghji d'alerta, facennu caccià elli rapidamente è faciule.

Pigliate u plugin »

Esempi di avvisi

Imbulighjate u vostru missaghju è un icona chjusu opzionale in un div cù classi simplici.

<div class = "alerta" > 
  <a class = "close" > × </a> 
  <strong> Attenzione ! </strong> U megliu verificate voi stessu, ùn site micca troppu bellu.
</div>

Estendete facilmente u messagiu d'alerta standard cù duie classi opzionali: .alert-blockper più padding è cuntrolli di testu è .alert-headingper un intestazione currispondente.

<div class = "alert alert-block" > 
  <a class = "close" > × </a> 
  <h4 class = "alert-heading" > Attenzione ! </h4> 
  U megliu verificate voi stessu, ùn site micca ...
</div>

Errore o periculu

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

Successu

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

infurmazione

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

Basic

Barra di prugressu predeterminata cù un gradiente verticale.

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

Striped

Aduprà un gradiente per creà un effettu strisce.

<div class = "progressu-info-progressu 
     striscia di prugressu " >
  <div class = "bar" 
       stile = " larghezza : 20 %; " ></div> 
</div>

Animatu

Piglia l'esempiu di strisce è l'anima.

<div class = "prugressu-periculu di prugressu 
     attivu à strisce di prugressu " >
  <div class = "bar" 
       stile = " larghezza : 40 %; " ></div> 
</div>

Culori supplementari

I bars di prugressu utilizanu alcuni di i stessi nomi di classi cum'è buttoni è alerti per stili simili.

• .progress-info
• .progress-success
• .progress-danger

In alternativa, pudete persunalizà i schedari LESS è rollu i vostri culori è dimensioni.

Cumportamentu

I bars di prugressu utilizanu transizioni CSS3, cusì se aghjustate dinamicamente a larghezza via javascript, si ridimensionarà facilmente.

Se aduprate a .activeclassa, i vostri .progress-stripedbars di prugressu animaranu e strisce da manca à diritta.

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-8 o versioni più vechje di Firefox.

Opera ùn sustene micca l'animazioni in questu mumentu.

Wells

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

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

Badges

Aduprate un badge nantu à un elementu per un conte micca lettu o cum'è un indicatore simplice.

<span class = "badge" > 3 </div> 

Chiudi icona

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

×

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