Exempel

Växlingsbar, sammanhangsberoende meny för att visa listor med länkar. Gjorde interaktiva med rullgardinsmenyn JavaScript-plugin .

<ul class = "rullgardinsmeny" role = "meny" aria-labelledby = "rullgardinsmeny" >   
  <li><a tabindex = "-1" href = "#" > Åtgärd </a></li>  
  <li><a tabindex = "-1" href = "#" > En annan åtgärd </a></li>  
  <li><a tabindex = "-1" href = "#" > Något annat här </a></li>  
  <li class = "avdelare" ></li> 
  <li><a tabindex = "-1" href = "#" > Separerad länk </a></li>  
</ul>

Pålägg

Om du bara tittar på rullgardinsmenyn, här är den nödvändiga HTML-koden. Du måste slå in rullgardinsmenyns utlösare och rullgardinsmenyn inom .dropdown, eller ett annat element som deklarerar position: relative;. Sedan är det bara att skapa menyn.

<div class = "rullgardinsmeny" > 
  <!-- Länk eller knapp för att växla rullgardinsmeny -->
  <ul class = "dropdown-menu" role = "meny" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Åtgärd </a></li>  
    <li><a tabindex = "-1" href = "#" > En annan åtgärd </a></li>  
    <li><a tabindex = "-1" href = "#" > Något annat här </a></li>  
    <li class = "avdelare" ></li> 
    <li><a tabindex = "-1" href = "#" > Separerad länk </a></li>  
  </ul>
</div>

alternativ

Justera menyer till höger och lägg till ytterligare nivåer av rullgardinsmenyer.

Justera menyerna

Lägg .pull-righttill .dropdown-menuhögerjustera rullgardinsmenyn.

<ul class = "rullgardinsmeny pull-right" role = "meny" aria-labelledby = "dLabel" >   
  ...
</ul>

Inaktiverade menyalternativ

Lägg .disabledtill ett <li>i rullgardinsmenyn för att inaktivera länken.

<ul class = "rullgardinsmeny" role = "meny" aria-labelledby = "rullgardinsmeny" >   
  <li><a tabindex = "-1" href = "#" > Vanlig länk </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Inaktiverad länk </a></li>   
  <li><a tabindex = "-1" href = "#" > En annan länk </a></li>  
</ul>

Undermenyer på rullgardinsmenyn

Lägg till en extra nivå av rullgardinsmenyer, som visas på svävaren som OS X, med några enkla uppmärkningstillägg. Lägg .dropdown-submenutill någon lii en befintlig rullgardinsmeny för automatisk styling.

<ul class = "dropdown-menu" role = "meny" aria-labelledby = "dLabel" >   
  ...
  <li class = "rullgardinsmeny" > 
    <a tabindex = "-1" href = "#" > Fler alternativ </a>  
    <ul class = "rullgardinsmeny" > 
      ...
    </ul>
  </li>
</ul>

Exempel

Två grundläggande alternativ, tillsammans med två mer specifika varianter.

En knapp grupp

Linda en serie knappar med .btnin .btn-group.

<div class = "btn-grupp" > 
  <button class = "btn" > Vänster </button> 
  <button class = "btn" > Mellan </button> 
  <button class = "btn" > Höger </button> 
</div>

Flera knappgrupper

Kombinera uppsättningar <div class="btn-group">till en <div class="btn-toolbar">för mer komplexa komponenter.

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

Vertikala knappgrupper

Få en uppsättning knappar att se vertikalt staplade snarare än horisontellt.

<div class = "btn-grupp btn-grupp-vertikal" > 
  ...
</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.

Dropdown-menyer i knappgrupper

Se upp!Knappar med rullgardinsmenyer måste vara individuellt inslagna i sina egna .btn-groupinom en .btn-toolbarför korrekt rendering.

Översikt och exempel

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

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

Fungerar med alla knappstorlekar

Rullgardinsmenyn för knappar fungerar i alla storlekar: .btn-large, .btn-small, eller .btn-mini.

Kräver JavaScript

Knapprullgardinsmeny kräver Bootstrap dropdown-plugin för att fungera.

I vissa fall – som mobil – kommer rullgardinsmenyer att sträcka sig utanför visningsporten. Du måste lösa justeringen manuellt eller med anpassad JavaScript.

Rullgardinsmenyer för dela knappar

Med utgångspunkt i knappgruppsstilarna och uppmärkningen 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.

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

Storlekar

Använd de extra knappklasserna .btn-mini, .btn-small, eller .btn-largeför storlek.

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

Dropup-menyer

Rullgardinsmenyer kan också växlas nerifrån och upp genom att lägga till en enda klass till den omedelbara föräldern till .dropdown-menu. Det kommer att vända på riktningen .caretoch flytta själva menyn för att flytta nerifrån och upp istället för uppifrån och ner.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rullgardinsmeny" > 
    <!-- rullgardinsmenyn länkar -->
  </ul>
</div>

Lättviktsstandarder Samma markering, olika klasser

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

Grundläggande flikar

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

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

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

Inaktiverat tillstånd

För valfri nav-komponent (flikar, piller eller lista), lägg .disabledtill för grå länkar och inga hovringseffekter . Länkar kommer dock att förbli klickbara om du inte tar bort hrefattributet. Alternativt kan du implementera anpassat JavaScript för att förhindra dessa klick.

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

Komponentjustering

Använd verktygsklasserna .pull-lefteller för att justera nav-länkar . .pull-rightBåda klasserna kommer att lägga till en CSS-float i den angivna riktningen.

Stapelbar

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

Staplade flikar

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

Staplade piller

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

Dropdowns

Lägg till rullgardinsmenyer med lite extra HTML och rullgardinsmenyn JavaScript-plugin .

Flikar med rullgardinsmenyer

<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

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

Nav listor

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.

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 = "active" ><a href = "#" > Hem </a></li>  
  <li><a href = "#" > Bibliotek </a></li> 
  ...
</ul>

NoteraFör kapsling i en nav-lista, inkludera class="nav nav-list"på alla kapslade <ul>.

Horisontella avdelare

Lägg till en horisontell avdelare genom att skapa ett tomt listobjekt med klassen .divider, så här:

<ul class = "nav nav-lista" > 
  ...
  <li class = "avdelare" ></li> 
  ...
</ul>

Tabbar nav

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

Tabbar exempel

För att göra flikar flikbara, skapa ett .tab-panemed unikt ID för varje flik och slå in dem i .tab-content.

<div class = "tabbable" > <!-- Krävs endast för vänster/höger flikar -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Avsnitt 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Avsnitt 2 </a></li>  
  </ul>
  <div class = "tab-innehåll" > 
    <div class = "tab-panel aktiv" id = "tab1" >  
      <p> Jag är i avsnitt 1. </p>
    </div>
    <div class = "tab-panel" id = "tab2" >  
      <p> Hej, jag är i avsnitt 2. </p>
    </div>
  </div>
</div>

Tona in flikar

För att få flikar att tona in, lägg .fadetill varje .tab-pane.

Kräver jQuery-plugin

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

Tabbar åt alla håll

Flikar på botten

Vänd på HTML-ordningen och lägg till en klass för att sätta 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>

Grundläggande navigeringsfält

Till att börja med är navigeringsfälten statiska (inte fixerade till toppen) och inkluderar stöd för ett projektnamn och grundläggande navigering. Placera en var som helst inom en .container, som anger bredden på din webbplats och innehåll.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Titel </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Hem </a></li>  
      <li><a href = "#" > Länk </a></li> 
      <li><a href = "#" > Länk </a></li> 
    </ul>
  </div>
</div>

Navbar komponenter

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>  

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>

Du kan enkelt lägga till avdelare till dina nav-länkar med ett tomt listobjekt och en enkel klass. Lägg bara till detta mellan länkarna:

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

Blanketter

För att formatera och placera ett formulär korrekt i navigeringsfältet, lägg till lämpliga klasser som visas nedan. För ett standardformulär, inkludera .navbar-formoch antingen .pull-lefteller .pull-rightför att justera det korrekt.

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

Sökformulär

För ett mer anpassat sökformulär, lägg .navbar-searchtill formoch .search-queryi inmatningen för specialiserade stilar i navigeringsfältet.

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

Komponentjustering

Justera navigeringslänkar, sökformulär eller text, använd .pull-lefteller .pull-rightverktygsklasserna. Båda klasserna kommer att lägga till en CSS-float i den angivna riktningen.

Använder rullgardinsmenyn

Lägg till rullgardinsmenyer och rullgardinsmenyer i navigeringen med lite markering och JavaScript-plugin för rullgardinsmenyn .

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

Besök dokumentationen för JavaScript-rullgardinsmenyn för mer uppmärkning och information om rullgardinsmenyn för samtal.

Text

Linda textsträngar i ett element med .navbar-text, vanligtvis på en <p>tagg för korrekt ledning och färg.

Valfria displayvarianter

Fixa navigeringsfältet till toppen eller botten av viewporten med en extra klass på den yttersta div, .navbar.

Fast upptill

Lägg till .navbar-fixed-topoch kom ihåg att ta hänsyn till det dolda området under det genom att lägga till minst 40px paddingtill <body>. Var noga med att lägga till detta efter core Bootstrap CSS och före den valfria responsiva CSS.

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

Fast i botten

Lägg till .navbar-fixed-bottomistället.

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

Statisk toppnavigeringsfält

Skapa ett navigeringsfält i full bredd som rullar iväg med sidan genom att lägga till .navbar-static-top. Till skillnad från .navbar-fixed-topklassen behöver du inte ändra någon stoppning på body.

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

Responsiv navigeringsfält

För att implementera en komprimerad responsiv navbar, slå in ditt navbar-innehåll i en innehållande div, .nav-collapse.collapseoch lägg till navbar-växlingsknappen, .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 kollaps" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Inverterad variation

Ändra utseendet på navigeringsfältet genom att lägga till .navbar-inverse.

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

Exempel

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

<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 = "active" > Data </li> 
</ul>

Standard paginering

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

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

alternativ

Inaktiverade och aktiva tillstånd

Länkar är anpassningsbara för olika omständigheter. Använd .disabledför oklickbara länkar och .activeför att indikera den aktuella sidan.

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

Du kan valfritt byta ut aktiva eller inaktiverade ankare mot spann för att ta bort klickfunktionalitet samtidigt som du behåller avsedda stilar.

<div class = "paginering" > 
  <ul>
    <li class = "inaktiverad" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Storlekar

Vill du ha större eller mindre paginering? Lägg till .pagination-large, .pagination-small, eller .pagination-miniför ytterligare storlekar.

<div class = "paginering paginering-stor" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginering" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginering paginering-liten" > 
  <ul>
    ...
  </ul>
</div>
<div class = "paginering paginering-mini" > 
  <ul>
    ...
  </ul>
</div>

Inriktning

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

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

<div class = "paginering paginering-höger" > 
  ...
</div>

Personsökare

Snabba föregående och nästa länkar för enkla sideringsimplementeringar med lätt uppmärkning och stilar. Det är bra för enkla webbplatser som bloggar eller tidningar.

Standardexempel

Som standard centrerar personsökaren länkar.

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

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

Valfritt inaktiverat tillstånd

Personsökarlänkar använder också den allmänna .disabledverktygsklassen från sideringen.

<ul class = "personsökare" > 
  <li class = "föregående inaktiverad" > 
    <a href = "#" > ← Äldre </a> 
  </li>
  ...
</ul>

Etiketter

Märken

Lätt hopfällbar

För enkel implementering kommer etiketter och märken helt enkelt att kollapsa (via CSS:s :emptyväljare) när inget innehåll finns inom.

Hjälteenhet

En lätt, flexibel komponent för att visa upp nyckelinnehåll på din webbplats. Det fungerar bra på marknadsföring och innehållstunga sajter.

<div class = "hjälte-enhet" > 
  <h1> Rubrik </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Läs mer
    </a>
  </p>
</div>

Sidhuvud

Ett enkelt skal för h1att på lämpligt sätt placera ut och segmentera avsnitt av innehåll på en sida. Den kan använda h1standardelementet small, liksom de flesta andra komponenter (med ytterligare stilar).

<div class = "page-header" > 
  <h1> Exempel på sidhuvud <small> Undertext för sidhuvud </small></h1>
</div>

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

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

Miniatyrmarkering ä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 slå in ditt innehåll.

Använder rutnätskolumnstorlekar

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

Pålägg

Som nämnts tidigare är den obligatoriska 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 = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Miniatyretikett </h3>
      <p> Miniatyrbildstext... </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.

Standardvarning

Slå in valfri text och en valfri avvisande knapp .alertför ett grundläggande varningsmeddelande.

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

Avvisa knappar

Webbläsarna Mobile Safari och Mobile Opera, förutom data-dismiss="alert"attributet, kräver en href="#"för att avvisa varningar när en <a>tagg används.

<a href = "#" class = "stäng" data-dismiss = "alert" > × </a>   

Alternativt kan du använda ett <button>element med dataattributet, vilket vi har valt att göra för våra dokument. När du använder <button>måste du inkludera, type="button"annars kanske dina formulär inte skickas in.

<button type = "button" class = "stäng" data-dismiss = "alert" > × </button>   

Avvisa varningar via JavaScript

Använd alerts jQuery-plugin för att snabbt och enkelt ta bort varningar.

alternativ

För längre meddelanden ökar du utfyllnaden på toppen och botten av varningsomslaget genom att lägga till .alert-block.

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

Kontextuella alternativ

Lägg till valfria klasser för att ändra en varnings konnotation.

Fel eller fara

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

Framgång

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

Information

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

Exempel och uppmärkning

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. Ej tillgängligt i IE7-8.

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

Animerad

Lägg .activetill .progress-stripedför att animera ränderna från höger till vänster. Inte tillgängligt i alla versioner av IE.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " bredd : 40 %; " ></div>   
</div>

Staplad

Placera flera barer i samma .progressför att stapla dem.

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

alternativ

Ytterligare färger

Förloppsindikatorer använder några av samma knapp- och varningsklasser för konsekventa stilar.

<div class = "progress progress-info" > 
  <div class = "bar" style = " bredd : 20 % " ></div>   
</div>
<div class = "framsteg framsteg-framgång" > 
  <div class = "bar" style = " bredd : 40 % " ></div>   
</div>
<div class = "progress progress-warning" > 
  <div class = "bar" style = " bredd : 60 % " ></div>   
</div>
<div class = "framsteg framsteg-fara" > 
  <div class = "bar" style = " bredd : 80 % " ></div>   
</div>

Randiga stänger

I likhet med de solida färgerna har vi olika randiga förloppsindikatorer.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " bredd : 20 % " ></div>   
</div>
<div class = "framsteg framsteg-framgång framsteg-stripad" > 
  <div class = "bar" style = " bredd : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " bredd : 60 % " ></div>   
</div>
<div class = "framsteg framsteg-fara framsteg-randig" > 
  <div class = "bar" style = " bredd : 80 % " ></div>   
</div>

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-9 eller äldre versioner av Firefox.

Versioner tidigare än Internet Explorer 10 och Opera 12 stöder inte animationer.

Abstrakta objektstilar för att bygga olika typer av komponenter (som bloggkommentarer, Tweets, etc) som har en vänster- eller högerjusterad bild tillsammans med textinnehåll.

Standardexempel

Standardmediet tillåter att ett medieobjekt (bilder, video, ljud) flyter till vänster eller höger om ett innehållsblock.

Media rubrik

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate vid, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.

Media rubrik

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate vid, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.

Media rubrik

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate vid, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis i faucibus.

<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" > Medierubrik </h4> 
    ...
 
    <!-- Kapslat mediaobjekt -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Medialista

Med lite extra uppmärkning kan du använda media inuti listan (användbart för kommentarstrådar eller artikellistor).

<ul class = "media-list" > 
  <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" > Medierubrik </h4> 
      ...
 
      <!-- Kapslat mediaobjekt -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

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

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

Valfria klasser

Kontrollstoppning och rundade hörn med två valfria modifieringsklasser.

<div class = "well well-large" > 
  ...
</div>

<div class = "väl väl liten" > 
  ...
</div>

Stäng ikon

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

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

iOS-enheter kräver en href="#"för klick-händelser om du hellre vill använda ett ankare.

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

Hjälparklasser

Enkla, fokuserade klasser för små skärm- eller beteendejusteringar.

.dra åt vänster

Flytta ett element till vänster

klass = "dra-vänster"

. dra - vänster {
  flyta : vänster ;
}

.dra åt höger

Flyt ett element höger

klass = "dra höger"

. dra - höger {
  flyta : höger ;
}

.avstängd

Ändra ett elements färg till#999

klass = "avstängd"

. muted {
  färg : #999; 
}

.clearfix

Rensa floatpå alla element

klass = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: innan ,
  &: efter {
    display : tabell ;
    innehåll : "" ; 
  }
  &: efter {
    klara : båda ;
  }
}