Eksempel

Skiftbar, kontekstmenu til visning af lister over links. Gjorde interaktiv med dropdown JavaScript-plugin .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Handling </a></li>  
  <li><a tabindex = "-1" href = "#" > En anden handling </a></li>  
  <li><a tabindex = "-1" href = "#" > Noget andet her </a></li>  
  <li klasse = "deler" ></li> 
  <li><a tabindex = "-1" href = "#" > Separeret link </a></li>  
</ul>

Markup

Hvis du kun ser på rullemenuen, er her den nødvendige HTML. Du skal ombryde rullemenuens trigger og rullemenuen inden for .dropdown, eller et andet element, der erklærer position: relative;. Så laver du bare menuen.

<div class = "dropdown" > 
  <!-- Link eller knap for at skifte rullemenu -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Handling </a></li>  
    <li><a tabindex = "-1" href = "#" > En anden handling </a></li>  
    <li><a tabindex = "-1" href = "#" > Noget andet her </a></li>  
    <li klasse = "deler" ></li> 
    <li><a tabindex = "-1" href = "#" > Separeret link </a></li>  
  </ul>
</div>

Muligheder

Juster menuer til højre, og tilføj inkludere yderligere niveauer af rullemenuer.

Justering af menuerne

Føj .pull-righttil en .dropdown-menuhøjrejuster rullemenuen.

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

Deaktiverede menuindstillinger

Tilføj .disabledtil en <li>i rullemenuen for at deaktivere linket.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Almindelig link </a></li>  
  <li class = "deaktiveret" ><a tabindex = "-1" href = "#" > Deaktiveret link </a></li>   
  <li><a tabindex = "-1" href = "#" > Endnu et link </a></li>  
</ul>

Undermenuer på dropdowns

Tilføj et ekstra niveau af dropdown-menuer, der vises på svævefeltet som dem i OS X, med nogle enkle markup-tilføjelser. Tilføj .dropdown-submenutil enhver lii en eksisterende rullemenu for automatisk styling.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-undermenu" > 
    <a tabindex = "-1" href = "#" > Flere muligheder </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Eksempler

To grundlæggende muligheder sammen med to mere specifikke variationer.

Enkelt knap gruppe

Pak en række knapper ind .btnmed .btn-group.

<div class = "btn-gruppe" > 
  <button class = "btn" > Venstre </button> 
  <button class = "btn" > Mellem </button> 
  <button class = "btn" > Højre </button> 
</div>

Flere knapgrupper

Kombiner sæt <div class="btn-group">til en <div class="btn-toolbar">for mere komplekse komponenter.

<div class = "btn-værktøjslinje" > 
  <div class = "btn-gruppe" > 
    ...
  </div>
</div>

Lodrette knapgrupper

Få et sæt knapper til at se ud lodret stablet i stedet for vandret.

<div class = "btn-gruppe btn-gruppe-vertikal" > 
  ...
</div>

Afkrydsningsfelt og radiosmag

Knapgrupper kan også fungere som radioer, hvor kun én knap kan være aktiv, eller afkrydsningsfelter, hvor et vilkårligt antal knapper kan være aktive. Se JavaScript-dokumenterne for det.

Dropdowns i knapgrupper

Heads up!Knapper med dropdowns skal pakkes individuelt ind i deres egne .btn-groupinden for en .btn-toolbarfor korrekt gengivelse.

Overblik og eksempler

Brug en hvilken som helst knap til at udløse en rullemenu ved at placere den i en .btn-groupog give den korrekte menumarkering.

<div class = "btn-gruppe" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Handling
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Fungerer med alle knapstørrelser

Knap rullemenuer fungerer i enhver størrelse: .btn-large, .btn-small, eller .btn-mini.

Kræver JavaScript

Knap dropdowns kræver Bootstrap dropdown plugin for at fungere.

I nogle tilfælde – som mobil – vil rullemenuerne strække sig uden for visningsporten. Du skal løse justeringen manuelt eller med tilpasset JavaScript.

Rullemenuer med splitknap

Med udgangspunkt i knapgruppestilene og markeringen kan vi nemt oprette en opdelt knap. Split-knapper har en standardhandling til venstre og en rullemenu til højre med kontekstuelle links.

<div class = "btn-gruppe" > 
  <button class = "btn" > Handling </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Størrelser

Brug de ekstra knapklasser .btn-mini, .btn-small, eller .btn-largetil størrelse.

<div class = "btn-gruppe" > 
  <button class = "btn btn-mini" > Handling </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Dropup menuer

Rullemenuer kan også skiftes fra bunden og op ved at tilføje en enkelt klasse til den umiddelbare forælder af .dropdown-menu. Det vil vende retningen af .caret​​og flytte selve menuen for at flytte nedefra og op i stedet for top ned.

<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 = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Letvægtsstandarder Samme opmærkning, forskellige klasser

Alle nav-komponenter her – faner, piller og lister – deler den samme basismarkering og stilarter gennem .navklassen.

Grundlæggende faner

Tag en regelmæssig <ul>af links og tilføj .nav-tabs:

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

Grundlæggende piller

Tag den samme HTML, men brug .nav-pillsi stedet:

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

Deaktiveret tilstand

For enhver nav-komponent (faner, piller eller liste), tilføj .disabledfor grå links og ingen hover-effekter . Links vil dog forblive klikbare, medmindre du fjerner hrefattributten. Alternativt kan du implementere tilpasset JavaScript for at forhindre disse klik.

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

Komponentjustering

For at justere nav-links skal du bruge hjælpeklasserne .pull-lefteller .pull-right. Begge klasser vil tilføje en CSS-float i den angivne retning.

Stabelbar

Da faner og piller er vandrette som standard, skal du blot tilføje en anden klasse, .nav-stacked, for at få dem til at se lodret stablet ud.

Stablede faner

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

Stablede piller

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

Dropdowns

Tilføj dropdown menuer med lidt ekstra HTML og dropdowns JavaScript plugin .

Faner med rullemenuer

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

Piller med dropdowns

<ul class = "nav nav-piller" > 
  <li klasse = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- links -->
    </ul>
  </li>
</ul>

Nav lister

En enkel og nem måde at opbygge grupper af nav-links med valgfri overskrifter. De bruges bedst i sidebjælker som Finder i OS X.

Eksempel på nav-liste

Tag en liste over links og tilføj class="nav nav-list":

<ul class = "nav nav-liste" > 
  <li class = "nav-header" > Listehoved </li> 
  <li class = "active" ><a href = "#" > Startside </a></li>  
  <li><a href = "#" > Bibliotek </a></li> 
  ...
</ul>

BemærkFor indlejring inden for en nav-liste skal du inkludere class="nav nav-list"på alle indlejrede <ul>.

Vandrette skillevægge

Tilføj en vandret skillelinje ved at oprette et tomt listeelement med klassen .divider, som sådan:

<ul class = "nav nav-liste" > 
  ...
  <li klasse = "deler" ></li> 
  ...
</ul>

Tabbar nav

Giv dine faner liv med et simpelt plugin til at skifte mellem indhold via faner. Bootstrap integrerer tabbare faner i fire stilarter: top (standard), højre, bund og venstre.

Tabbar eksempel

For at gøre faner fanerbare, skal du oprette et .tab-panemed unikt ID for hver fane og pakke dem ind .tab-content.

<div class = "tabbable" > <!-- Kun påkrævet for venstre/højre faner -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Sektion 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Afsnit 2 </a></li>  
  </ul>
  <div class = "tab-indhold" > 
    <div class = "tab-panel aktiv" id = "tab1" >  
      <p> Jeg er i sektion 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hej, jeg er i sektion 2. </p>
    </div>
  </div>
</div>

Fade i faner

For at få faner til at falme ind, skal du tilføje .fadetil hver .tab-pane.

Kræver jQuery plugin

Alle tabbare faner drives af vores lette jQuery-plugin. Læs mere om, hvordan du bringer tabbare faner til live på JavaScript-dokumentsiden .

Tabbar i enhver retning

Faner i bunden

Vend rækkefølgen af ​​HTML og tilføj en klasse for at sætte faner i bunden.

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

Faner til venstre

Skift klassen for at sætte faner til venstre.

<div class = "tabbare faner-venstre" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-indhold" > 
    ...
  </div>
</div>

Faner til højre

Skift klassen for at sætte faner til højre.

<div class = "table tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-indhold" > 
    ...
  </div>
</div>

Grundlæggende navbar

Til at starte med er navbarer statiske (ikke fastgjort til toppen) og inkluderer understøttelse af et projektnavn og grundlæggende navigation. Placer en hvor som helst inden for en .container, som angiver bredden af ​​dit websted og indhold.

<div klasse =  "navbar" >
  <div class = "navbar-indre"  >
    <a class = "brand" href = "#" > Titel   </a>
    <ul klasse = "nav"  >
      <li class = "active" ><a href = "#" > Hjem  </a></li>
      <li><a href = "#" > Link  </a></li>
      <li><a href = "#" > Link  </a></li>
    </ul>
  </div>
</div>

Navbar komponenter

Mærke

Et simpelt link til at vise dit brand- eller projektnavn kræver kun et ankermærke.

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

Nav links

Nav-elementer er nemme at tilføje via uordnede lister.

<ul class = "nav" > 
  <li klasse = "aktiv" > 
    <a href = "#" > Startside </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Du kan nemt tilføje skillelinjer til dine nav-links med et tomt listeelement og en simpel klasse. Bare tilføj dette mellem links:

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

Formularer

For at style og placere en formular korrekt i navigeringslinjen skal du tilføje de relevante klasser som vist nedenfor. For en standardformular skal du inkludere .navbar-formog enten .pull-lefteller .pull-rightfor at justere den korrekt.

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

Søgeformular

For en mere tilpasset søgeformular skal du tilføje .navbar-searchtil formog .search-querytil input for specialiserede stilarter i navigeringslinjen.

<form class = "navbar-search pull-venstre" > 
  <input type = "text" class = "search-query" pladsholder = "Søg" >   
</form>

Komponentjustering

Juster nav-links, søgeformularer eller tekst, brug .pull-lefteller.pull-right hjælpeklasserne. Begge klasser vil tilføje en CSS-float i den angivne retning.

Brug af dropdowns

Tilføj dropdowns og dropups til nav med en smule markup og dropdowns JavaScript plugin .

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

Besøg JavaScript-rullemenudokumentationen for at få flere markeringer og oplysninger om rullemenuer for opkald.

Tekst

Ombryd tekststrenge i et element med .navbar-text, normalt på et <p>tag for at få den rigtige linjeføring og farve.

Valgfri displayvarianter

Fastgør navbaren til toppen eller bunden af ​​viewporten med en ekstra klasse på den yderste div, .navbar.

Fastgjort til toppen

Tilføj .navbar-fixed-topog husk at tage højde for det skjulte område under det ved at tilføje mindst 40px paddingtil <body>. Sørg for at tilføje dette efter kerne Bootstrap CSS og før den valgfri responsive CSS.

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

Fastgjort til bunden

Tilføj .navbar-fixed-bottomi stedet.

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

Statisk top navbar

Opret en navigeringslinje i fuld bredde, der ruller væk med siden ved at tilføje .navbar-static-top. I modsætning til .navbar-fixed-topklassen behøver du ikke at ændre polstring på body.

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

Responsiv navbar

For at implementere en kollapsende responsiv navbar skal du pakke dit navbar-indhold ind i en indeholdende div, .nav-collapse.collapseog tilføje navbar-skifteknappen, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-indre" > 
    <div class = "container" > 
 
      <!-- .btn-navbar bruges som til/fra-knap for skjult navbar-indhold -->
      <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>
 
      <!-- Sørg for at lade mærket være derude, hvis du vil have det vist -->
      <a class = "brand" href = "#" > Projektnavn </a>  
 
      <!-- Alt hvad du vil have skjult ved 940px eller mindre, placer her -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form osv. -->
      </div>
 
    </div>
  </div>
</div>

Omvendt variation

Rediger udseendet af navigeringslinjen ved at tilføje .navbar-inverse.

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

Eksempler

Et enkelt eksempel vist, da det kan blive vist på tværs af flere sider.

<ul class = "brødkrumme" > 
  <li><a href = "#" > Hjem </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 inspireret af Rdio, fantastisk til apps og søgeresultater. Den store blok er svær at gå glip af, let skalerbar og giver store klikområder.

<div class = "paginering" > 
  <ul>
    <li><a href = "#" > Forrige </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æste </a></li> 
  </ul>
</div>

Muligheder

Deaktiveret og aktiv tilstand

Links kan tilpasses til forskellige omstændigheder. Bruges .disabledtil uklikbare links og .activetil at angive den aktuelle side.

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

Du kan valgfrit udskifte aktive eller deaktiverede ankre med spændvidder for at fjerne klikfunktionalitet, mens du beholder tilsigtede stilarter.

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

Størrelser

Kunne du tænke dig større eller mindre paginering? Tilføj .pagination-large, .pagination-small, eller .pagination-minifor yderligere størrelser.

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

Justering

Tilføj en af ​​to valgfrie klasser for at ændre justeringen af ​​sideinddelingslinks: .pagination-centeredog .pagination-right.

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

<div class = "paginering paginering-højre" > 
  ...
</div>

Personsøger

Hurtige forrige og næste links til simple pagineringsimplementeringer med let opmærkning og stilarter. Det er fantastisk til simple websteder som blogs eller magasiner.

Standard eksempel

Som standard centrerer personsøgeren links.

<ul class = "personsøger" > 
  <li><a href = "#" > Forrige </a></li> 
  <li><a href = "#" > Næste </a></li> 
</ul>

Justerede links

Alternativt kan du justere hvert link til siderne:

<ul class = "personsøger" > 
  <li klasse = "forrige" > 
    <a href = "#" > ← Ældre </a> 
  </li>
  <li klasse = "næste" > 
    <a href = "#" > Nyere → </a> 
  </li>
</ul>

Valgfri deaktiveret tilstand

Pager-links bruger også den generelle .disabledhjælpeklasse fra pagineringen.

<ul class = "personsøger" > 
  <li class = "forrige deaktiveret" > 
    <a href = "#" > ← Ældre </a> 
  </li>
  ...
</ul>

Etiketter

Badges

Let sammenklappelig

For nem implementering vil etiketter og badges simpelthen kollapse (via CSS's :emptyvælger), når der ikke findes noget indhold indeni.

Hero enhed

En let, fleksibel komponent til at vise nøgleindhold på dit websted. Det fungerer godt på marketing- og indholdstunge sider.

<div class = "hero-unit" > 
  <h1> Overskrift </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Lær mere
    </a>
  </p>
</div>

Sidehoved

En simpel skal h1til passende afstand og segmentering af sektioner af indhold på en side. Det kan bruge h1standardelementet small, såvel som de fleste andre komponenter (med yderligere stilarter).

<div class = "page-header" > 
  <h1> Eksempel på sidehoved <small> Undertekst til sidehoved </small></h1>
</div>

Standard miniaturebilleder

Bootstraps thumbnails er som standard designet til at vise sammenkædede billeder med minimalt påkrævet opmærkning.

Meget tilpasselig

Med lidt ekstra markering er det muligt at tilføje enhver form for HTML-indhold som overskrifter, afsnit eller knapper til miniaturebilleder.

Hvorfor bruge thumbnails

Miniaturebilleder (tidligere .media-gridindtil v1.4) er fantastiske til gitter af fotos eller videoer, billedsøgeresultater, detailprodukter, porteføljer og meget mere. De kan være links eller statisk indhold.

Enkel, fleksibel markering

Opmærkning af miniaturebilleder er enkel - en ulmed et vilkårligt antal lielementer er alt, der kræves. Det er også super fleksibelt, hvilket giver mulighed for enhver type indhold med bare en smule mere markering til at pakke dit indhold.

Bruger gitterkolonnestørrelser

Til sidst bruger thumbnails-komponenten eksisterende gittersystemklasser - som .span2eller.span3 – til kontrol af thumbnail-dimensioner.

Markup

Som tidligere nævnt er den nødvendige markering for miniaturebilleder let og ligetil. Her er et kig på standardopsætningen for linkede billeder :

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

For tilpasset HTML-indhold i miniaturebilleder ændres opmærkningen lidt. For at tillade indhold på blokniveau overalt, bytter vi ud <a>med et <div>lignende:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Miniaturelabel </h3>
      <p> Miniature billedtekst... </p>
    </div>
  </li>
  ...
</ul>

Flere eksempler

Udforsk alle dine muligheder med de forskellige gitterklasser, der er tilgængelige for dig. Du kan også mikse og matche forskellige størrelser.

Standardadvarsel

Pak enhver tekst og en valgfri afvis-knap ind .alertfor en grundlæggende advarselsmeddelelse.

<div class = "alert" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <strong> Advarsel! </strong> Tjek bedst selv, du ser ikke for godt ud.
</div>

Afvis knapper

data-dismiss="alert"Mobile Safari og Mobile Opera-browsere kræver udover attributten en href="#"for afvisning af advarsler ved brug af et <a>tag.

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

Alternativt kan du bruge et <button>element med dataattributten, hvilket vi har valgt at gøre for vores dokumenter. Når du bruger <button>, skal du inkludere, type="button"ellers kan dine formularer ikke indsendes.

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

Afvis advarsler via JavaScript

Brug advarsler jQuery plugin til hurtig og nem afvisning af advarsler.

Muligheder

For længere beskeder skal du øge polstringen på toppen og bunden af ​​advarselsindpakningen ved at tilføje .alert-block.

<div class = "alarm alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> Advarsel! </h4>
  Bedst tjek dig selv, du er ikke...
</div>

Kontekstuelle alternativer

Tilføj valgfri klasser for at ændre en underretnings konnotation.

Fejl eller fare

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

Succes

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

Information

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

Eksempler og opmærkning

Grundlæggende

Standard statuslinje med en lodret gradient.

<div class = "fremskridt" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

Stribet

Bruger en gradient til at skabe en stribet effekt. Ikke tilgængelig i IE7-8.

<div class = "fremskridt fremskridt-stribet" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

Animeret

Tilføj .activetil .progress-stripedfor at animere striberne fra højre mod venstre. Ikke tilgængelig i alle versioner af IE.

<div class = "fremskridt fremskridt-stribet aktiv" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

Stablet

Placer flere stænger i det samme .progressfor at stable dem.

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

Muligheder

Yderligere farver

Fremskridtslinjer bruger nogle af de samme knap- og advarselsklasser til ensartede stilarter.

<div class = "fremskridt-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "fremskridt fremskridt-succes" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-advarsel" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "fremskridt fremskridt-fare" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Stribede stænger

I lighed med de solide farver har vi varierede stribede fremskridtsbjælker.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "fremskridt fremskridt-succes fremskridt-stribet" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "fremskridt fremskridt-advarsel fremskridt-stribet" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "fremskridt fremskridt-fare fremskridt-stribet" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Browser support

Fremskridtsbjælker bruger CSS3-gradienter, overgange og animationer til at opnå alle deres effekter. Disse funktioner understøttes ikke i IE7-9 eller ældre versioner af Firefox.

Tidligere versioner end Internet Explorer 10 og Opera 12 understøtter ikke animationer.

Abstrakte objektstile til at bygge forskellige typer komponenter (såsom blogkommentarer, tweets osv.), der har et venstre- eller højrejusteret billede sammen med tekstindhold.

Standard eksempel

Standardmediet tillader at flyde et medieobjekt (billeder, video, lyd) til venstre eller højre for en indholdsblok.

Mediers overskrift

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

Mediers overskrift

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

Mediers overskrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum i vulputate ved, 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" > Medieoverskrift </h4> 
    ...
 
    <!-- Indlejret medieobjekt -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Medieliste

Med lidt ekstra opmærkning kan du bruge medier inde i listen (nyttigt til kommentartråde eller artikellister).

<ul class = "medie-liste" > 
  <li klasse = "medie" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Medieoverskrift </h4> 
      ...
 
      <!-- Indlejret medieobjekt -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Brug brønden som en simpel effekt på et element for at give det en indsat effekt.

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

Valgfri klasser

Kontrolpolstring og afrundede hjørner med to valgfri modifikationsklasser.

<div class = "godt godt stort" > 
  ...
</div>

<div class = "godt godt lille" > 
  ...
</div>

Luk ikon

Brug det generiske lukkeikon til at afvise indhold som modals og advarsler.

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

iOS-enheder kræver en href="#"for klik-hændelser, hvis du hellere vil bruge et anker.

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

Hjælper klasser

Enkle, fokuserede klasser til små skærm- eller adfærdsjusteringer.

.træk til venstre

Flyd et element til venstre

klasse = "træk til venstre"

. pull - venstre {
  flyde : venstre ;
}

.træk til højre

Flyd et element til højre

klasse = "træk til højre"

. træk - højre {
  flyde : højre ;
}

.dæmpet

Skift et elements farve til#999

klasse = "dæmpet"

. muted {
  farve : #999; 
}

.clearfix

Ryd floatpå ethvert element

klasse = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: før ,
  &: efter {
    display : tabel ;
    indhold : "" ; 
  }
  &: efter {
    klar : begge ;
  }
}