Knappgrupper

Använd knappgrupper för att sammanfoga flera knappar som en sammansatt komponent. Bygg dem med en serie av <a>eller <button>element.

Du kan också kombinera uppsättningar <div class="btn-group">till ett <div class="btn-toolbar">för mer komplexa projekt.

Exempel på uppmärkning

Så här ser HTML-koden ut för en standardknappgrupp byggd med ankartaggknappar:

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

Och med ett verktygsfält för flera grupper:

<div class = "btn-verktygsfält" > 
  <div class = "btn-grupp" > 
    ...
  </div>
</div>

Checkbox och radiosmaker

Knappgrupper kan också fungera som radioapparater, där endast en knapp kan vara aktiv, eller kryssrutor, där valfritt antal knappar kan vara aktiva. Se Javascript-dokumenten för det.

Hämta javascriptet »

Se upp

CSS för knappgrupper finns i en separat fil, button-groups.less.

Nedrullningsbara knappar

Använd valfri knapp för att aktivera en rullgardinsmeny genom att placera den inom en .btn-groupoch tillhandahålla rätt menyuppmärkning.

Exempel på uppmärkning

I likhet med en knappgrupp använder vår uppmärkning vanlig knappmarkering, men med en handfull tillägg för att förfina stilen och stödja Bootstraps dropdown jQuery-plugin.

<div class = "btn-grupp" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Handling
    <span class = "caret" ></span> 
  </a>
  <ul class = "rullgardinsmeny" > 
    <!-- rullgardinsmeny länkar -->
  </ul>
</div>

Rullgardinsmenyer för dela knappar

Med utgångspunkt i knappgruppens stilar och markeringar kan vi enkelt skapa en delad knapp. Dela knappar har en standardåtgärd till vänster och en rullgardinsknapp till höger med kontextuella länkar.

Exempel på uppmärkning

Vi utökar de normala knapprullgardinsmenyn för att tillhandahålla en andra knappåtgärd som fungerar som en separat rullgardinsmeny.

<div class = "btn-grupp" > 
  <a class = "btn" href = "#" > Åtgärd </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "rullgardinsmeny" > 
    <!-- rullgardinsmeny länkar -->
  </ul>
</div>

Kraftfull basklass

Alla nav-komponenter här – flikar, piller och listor – delar samma grunduppmärkning och stilar genom .navklassen.

Varför tabs och piller

Flikar och piller i Bootstrap är byggda på en <ul>med samma kärn-HTML, en lista med länkar. Byt mellan tabletter eller tabletter med bara en klass.

Båda alternativen är utmärkta för undersektioner av innehåll eller navigering mellan sidor med relaterat innehåll.

Grundläggande flikar

Ta en vanlig <ul>länk och lägg till .nav-tabs:

• Hem
• Profil
• Meddelanden

<ul class = "nav nav-tabs" > 
  <li class = "aktiv" > 
    <a href = "#" > Hem </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Grundläggande piller

Ta samma HTML, men använd .nav-pillsistället:

• Hem
• Profil
• Meddelanden

<ul class = "nav nav-piller" > 
  <li class = "aktiv" > 
    <a href = "#" > Hem </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Hur man staplar dem

Eftersom flikar och piller är horisontella som standard, lägg bara till en andra klass, .nav-stacked, för att få dem att se vertikalt staplade.

Staplade flikar

• Hem
• Profil
• Meddelanden

<ul class = "nav nav-flikar nav-stackade" > 
  ...
</ul>

Staplade piller

• Hem
• Profil
• Meddelanden

<ul class = "nav nav-piller nav-stackade" > 
  ...
</ul>

Rika menyer på ett enkelt sätt

Rullgardinsmenyer i Bootstrap-flikar och -piller är superenkla och kräver bara lite extra HTML och en lätt jQuery-plugin.

Gå över till Javascript-sidan för att läsa dokumenten om att initiera rullgardinsmenyn i Bootstrap.

Flikar med rullgardinsmenyer

• Hem
• Profil
• Falla ner
  • Handling
  • En annan åtgärd
  • Något annat här
  • Separerad länk

<ul class = "nav nav-tabs" > 
  <li class = "rullgardinsmeny" > 
    <a class = "rullgardinsmeny" 
       data-toggle = "rullgardinsmeny"
       href = "#" >
        Falla ner
        <b class = "caret" ></b> 
      </a>
    <ul class = "rullgardinsmeny" > 
      <!-- länkar -->
    </ul>
  </li>
</ul>

Piller med dropdowns

• Hem
• Profil
• Falla ner
  • Handling
  • En annan åtgärd
  • Något annat här
  • Separerad länk

<ul class = "nav nav-piller" > 
  <li class = "rullgardinsmeny" > 
    <a class = "rullgardinsmeny" 
       data-toggle = "rullgardinsmeny"
       href = "#" >
        Falla ner
        <b class = "caret" ></b> 
      </a>
    <ul class = "rullgardinsmeny" > 
      <!-- länkar -->
    </ul>
  </li>
</ul>

Navigering i applikationsstil

Nav-listor ger ett enkelt och enkelt sätt att bygga grupper av navigeringslänkar med valfria rubriker. De används bäst i sidofält som Finder i OS X.

Strukturellt är de byggda på samma centrala nav-stilar som flikar och piller, så användning och anpassning är enkel.

Med ikoner

Nav-listor är också lätta att utrusta med ikoner. Lägg till rätt <i>tagg med klass och du är klar.

Exempel på navigeringslista

Ta en lista med länkar och lägg till class="nav nav-list":

<ul class = "nav nav-lista" > 
  <li class = "nav-header" > 
    Listhuvud
  </li>
  <li class = "aktiv" > 
    <a href = "#" > Hem </a> 
  </li>
  <li>
    <a href = "#" > Bibliotek </a> 
  </li>
  ...
</ul>

Exempel med ikoner

Samma exempel, men med <i>taggar för ikoner.

<ul class = "nav nav-lista" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "ikonbok" ></i> 
      Bibliotek
    </a>
  </li>
  ...
</ul>

Vad ingår

Väck dina flikar till liv med ett enkelt plugin för att växla mellan innehåll via flikar. Bootstrap integrerar flikar med flikar i fyra stilar: topp (standard), höger, botten och vänster.

Det är enkelt att byta mellan dem och kräver bara att man ändrar väldigt lite märkning.

Tabbar exempel

För att göra flikar tabbara, slå in den .nav-tabsi en annan div med klass .tabbable.

Anpassat jQuery-plugin

Alla flikar som kan flikar drivs av vårt lätta jQuery-plugin. Läs mer om hur du väcker flikar med flikar till liv på javascript-dokumentsidan.

Hämta javascript →

Flikar på botten

Vänd på HTML-ordningen och lägg till en klass för att placera flikar längst ner.

<div class = "tabba tabs-below" > 
  <div class = "tab-innehåll" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Flikar till vänster

Byt klassen för att sätta flikar till vänster.

<div class = "tabba tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-innehåll" > 
    ...
  </div>
</div>

Flikar till höger

Byt klassen för att sätta flikar till höger.

<div class = "tabba tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-innehåll" > 
    ...
  </div>
</div>

Navbar ställningar

Navigationsfältet kräver bara ett fåtal divs för att strukturera den väl för statisk eller fast visning.

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

För att göra navigeringsfältet fixerat till toppen av visningsporten, lägg .navbar-fixed-toptill i den yttersta div, .navbar. I din CSS måste du också ta hänsyn till överlappningen den orsakar genom att lägga padding-top: 40px;till din <body>.

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

Varumärke

En enkel länk för att visa ditt varumärke eller projektnamn kräver bara en ankartagg.

<a class = "brand" href = "#" >  
  Projektnamn
</a>

Sökformulär

Sökformulär får anpassade stilar i navigeringsfältet med .navbar-searchklassen. Inkludera .pull-lefteller .pull-rightpå för formatt justera det.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" platshållare = "Sök" >   
</form>

Valfri responsiv variant

Beroende på mängden innehåll i toppfältet kanske du vill implementera de responsiva alternativen. För att göra det, slå in ditt nav-innehåll i en innehållande div, .nav-collapse.collapse, och lägg till navigeringsknappen, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar används som växel för komprimerat navbarinnehåll -->
      <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>
 
      <!-- Se till att lämna märket där ute om du vill att det ska visas -->
      <a class = "brand" href = "#" > Projektnamn </a>  
 
      <!-- Allt du vill ha dolt vid 940px eller mindre, placera här -->
      <div class = "nav-kollaps" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Nav länkar

Nav-objekt är enkla att lägga till via oordnade listor.

<ul class = "nav" > 
  <li class = "aktiv" > 
    <a href = "#" > Hem </a> 
  </li>
  <li><a href = "#" > Länk </a></li> 
  <li><a href = "#" > Länk </a></li> 
</ul>

Lägger till rullgardinsmenyer

Det är superenkelt att lägga till rullgardinsmenyer i navigeringen, men kräver användning av vårt javascript-plugin .

<ul class = "nav" > 
  <li class = "rullgardinsmeny" > 
    <a href = "#" 
          klass = "rullgardinsmeny"
          data-toggle = "rullgardinsmeny" >
          konto
          <b class = "caret" ></b> 
    </a>
    <ul class = "rullgardinsmeny" > 
      ...
    </ul>
  </li>
</ul>

Hämta javascript →

Varför använda dem

Brödsmulnavigering används som ett sätt att visa användare var de är i en app eller en webbplats, men inte för primär navigering. Håll användningen sparsam och kortfattad för att vara mest effektiv.

Exempel

Ett enstaka exempel visas eftersom det kan visas på flera sidor.

• Hem

• Hem /
• Bibliotek

• Hem /
• Bibliotek /
• Data

Pålägg

HTML är din vanliga oordnade lista med länkar.

<ul class = "brödsmula" > 
  <li>
    <a href = "#" > Hem </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Bibliotek </a> <span class = "divider" > / </span>   
  </li>
  <li class = "aktiv" > 
    <a href = "#" > Data </a> 
  </li>
</ul>

När ska användas

Ultra förenklad och minimalistisk paginering inspirerad av Rdio, perfekt för appar och sökresultat. Det stora blocket är svårt att missa, lätt skalbart och ger stora klickytor.

Statliga sidlänkar

Länkar är anpassningsbara och fungerar i ett antal omständigheter med rätt klass. .disabledför oklickbara länkar och .activeför aktuell sida.

Flexibel uppriktning

Lägg till någon av två valfria klasser för att ändra justeringen av sideringslänkar: .pagination-centeredoch .pagination-right.

Exempel

Standardsidans sideringskomponent är flexibel och fungerar i ett antal varianter.

Pålägg

Insvept i en <div>, paginering är bara en <ul>.

<div class = "paginering" > 
  <ul>
    <li><a href = "#" > Föregående </a></li> 
    <li class = "aktiv" > 
      <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 = "#" > Nästa </a></li> 
  </ul>
</div>

Om personsökare

Personsökarkomponenten är en uppsättning länkar för enkla sideringsimplementeringar med lätt uppmärkning och ännu lättare stilar. Det är bra för enkla webbplatser som bloggar eller tidningar.

Standardexempel

Som standard centrerar personsökaren länkar.

• Tidigare
• Nästa

<ul class = "personsökare" > 
  <li>
    <a href = "#" > Föregående </a> 
  </li>
  <li>
    <a href = "#" > Nästa </a> 
  </li>
</ul>

Justerade länkar

Alternativt kan du justera varje länk mot sidorna:

• ← Äldre
• Nyare →

<ul class = "personsökare" > 
  <li class = "föregående" > 
    <a href = "#" > ← Äldre </a> 
  </li>
  <li class = "nästa" > 
    <a href = "#" > Nyare → </a> 
  </li>
</ul>

Standardminiatyrer

Som standard är Bootstraps miniatyrer utformade för att visa länkade bilder med minimal uppmärkning.

Mycket anpassningsbar

Med lite extra uppmärkning är det möjligt att lägga till alla typer av HTML-innehåll som rubriker, stycken eller knappar i miniatyrbilder.

• 

  Miniatyretikett

  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.

  Handling Handling

• 

  Miniatyretikett

  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.

  Handling Handling

Varför använda miniatyrer

Miniatyrer (tidigare .media-gridfram till v1.4) är utmärkta för rutnät av foton eller videor, bildsökresultat, detaljhandelsprodukter, portföljer och mycket mer. De kan vara länkar eller statiskt innehåll.

Enkel, flexibel markering

Miniatyruppmärkning är enkel – en ulmed valfritt antal lielement är allt som krävs. Det är också superflexibelt, vilket tillåter alla typer av innehåll med bara lite mer markering för att omsluta ditt innehåll.

Använder rutnätskolumnstorlekar

Slutligen använder miniatyrbildskomponenten befintliga rutsystemklasser – som .span2eller .span3– för kontroll av miniatyrdimensioner.

Markeringen

Som nämnts tidigare är den nödvändiga markeringen för miniatyrbilder lätt och okomplicerad. Här är en titt på standardinställningarna för länkade bilder :

<ul class = "miniatyrer" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

För anpassat HTML-innehåll i miniatyrer ändras uppmärkningen något. För att tillåta innehåll på blocknivå var som helst byter vi ut <a>mot något <div>liknande:

<ul class = "miniatyrer" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Miniatyretikett </h5>
      <p> Miniatyrbildstext här... </p>
    </div>
  </li>
  ...
</ul>

Fler exempel

Utforska alla dina alternativ med de olika rutnätsklasserna som är tillgängliga för dig. Du kan också blanda och matcha olika storlekar.

Omskriven basklass

Med Bootstrap 2 har vi förenklat basklassen: .alertistället för .alert-message. Vi har också minskat den minsta nödvändiga markeringen – nej <p>krävs som standard, bara den yttre <div>.

Enkelt varningsmeddelande

För en mer hållbar komponent med mindre kod har vi tagit bort det särskiljande utseendet för blockvarningar, meddelanden som kommer med mer utfyllnad och vanligtvis mer text. Klassen har också ändrats till .alert-block.

Går utmärkt med javascript

Bootstrap kommer med ett bra jQuery-plugin som stöder varningsmeddelanden, vilket gör det snabbt och enkelt att avvisa dem.

Hämta plugin »

Exempel på varningar

Slå in ditt meddelande och en valfri stängningsikon i en div med enkel klass.

<div class = "alert" > 
  <a class = "stäng" > × </a> 
  <strong> Varning! </strong> Bäst kolla dig själv, du ser inte för bra ut.
</div>

Utöka enkelt standardvarningsmeddelandet med två valfria klasser: .alert-blockför mer utfyllnad och textkontroller och .alert-headingför en matchande rubrik.

<div class = "alert alert-block" > 
  <a class = "stäng" > × </a> 
  <h4 class = "alert-heading" > Varning! </h4> 
  Bäst kolla dig själv, du är inte...
</div>

Fel eller fara

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

Framgång

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

Information

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

Grundläggande

Standardförloppsindikator med vertikal gradient.

<div class = "framsteg" > 
  <div class = "bar" 
       style = " bredd : 60 %; " ></div> 
</div>

Randig

Använder en gradient för att skapa en randig effekt.

<div class = "progress progress-info 
     framstegsrandig" >
  <div class = "bar" 
       style = " bredd : 20 %; " ></div> 
</div>

Animerad

Tar det randiga exemplet och animerar det.

<div class = "framsteg framsteg-fara 
     framstegsrandig aktiv" >
  <div class = "bar" 
       style = " bredd : 40 %; " ></div> 
</div>

Ytterligare färger

Förloppsindikatorer använder några av samma klassnamn som knappar och varningar för liknande stil.

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

Alternativt kan du anpassa LESS-filerna och rulla dina egna färger och storlekar.

Beteende

Förloppsindikatorer använder CSS3-övergångar, så om du dynamiskt justerar bredden via javascript kommer den att ändra storlek smidigt.

Om du använder .activeklassen kommer dina .progress-stripedförloppsindikatorer att animera ränderna från vänster till höger.

Webbläsarstöd

Förloppsindikatorer använder CSS3-toningar, övergångar och animationer för att uppnå alla sina effekter. Dessa funktioner stöds inte i IE7-8 eller äldre versioner av Firefox.

Opera stöder inte animationer för närvarande.

Wells

Använd brunnen som en enkel effekt på ett element för att ge det en infälld effekt.

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

Märken

Använd ett märke på ett element för en oläst räkning eller som en enkel indikator.

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

Stäng ikon

Använd den allmänna stängningsikonen för att avvisa innehåll som modals och varningar.

×

<a class = "stäng" > × </a>