Komponenter

Dusinvis av gjenbrukbare komponenter er innebygd i Bootstrap for å gi navigasjon, varsler, popovers og mye mer.

Knappegrupper

Bruk knappegrupper for å slå sammen flere knapper som én sammensatt komponent. Bygg dem med en serie av <a>eller <button>elementer.

Beste praksis

Vi anbefaler følgende retningslinjer for bruk av knappegrupper og verktøylinjer:

Bruk alltid det samme elementet i en enkelt knappegruppe, <a>eller <button>.
Ikke bland knapper med forskjellige farger i samme knappegruppe.
Bruk ikoner i tillegg til eller i stedet for tekst, men pass på å inkludere alt- og titteltekst der det er aktuelt.

Relaterte knappegrupper med rullegardiner (se nedenfor) bør kalles opp separat og alltid inkludere en rullegardinmerke for å indikere tiltenkt oppførsel.

Standard eksempel

Slik ser HTML-en ut for en standard knappegruppe bygget med ankertagknapper:

<div class = "btn-gruppe" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Eksempel på verktøylinje

Kombiner sett <div class="btn-group">til en <div class="btn-toolbar">for mer komplekse komponenter.

<div class = "btn-verktøylinje" > 
  <div class = "btn-gruppe" > 
    ...
  </div>
</div>

Avkrysningsboks og radiosmaker

Knappegrupper kan også fungere som radioer, der bare én knapp kan være aktiv, eller avmerkingsbokser, hvor et hvilket som helst antall knapper kan være aktive. Se Javascript-dokumentene for det.

Få javascript »

Nedtrekkslister i knappegrupper

Vær oppmerksom! Knapper med rullegardiner må pakkes individuelt inn i .btn-groupen .btn-toolbarfor riktig gjengivelse.

Nedtrekkslister for knapper

Oversikt og eksempler

Bruk en hvilken som helst knapp for å utløse en rullegardinmeny ved å plassere den i en .btn-groupog gi riktig menyoppmerking.

Eksempel på markering

I likhet med en knappegruppe bruker vår markering vanlig knappemarkering, men med en håndfull tillegg for å avgrense stilen og støtte Bootstraps dropdown jQuery-plugin.

<div class = "btn-gruppe" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Handling
    <span class = "caret" ></span> 
  </a>
  <ul class = "rullegardinmeny" > 
    <!-- lenker til rullegardinmenyen -->
  </ul>
</div>

Fungerer med alle knappestørrelser

Nedtrekkbare knapper fungerer i alle størrelser. knappestørrelsene til .btn-large, .btn-small, eller .btn-mini.

Krever javascript

Dropdown- knapper krever at Bootstrap-rullegardinpluginen fungerer.

I noen tilfeller – som mobil – vil rullegardinmenyene strekke seg utenfor visningsporten. Du må løse justeringen manuelt eller med tilpasset javascript.

Rullegardiner for delt knapp

Oversikt og eksempler

Med utgangspunkt i knappegruppestilene og markeringen kan vi enkelt lage en delt knapp. Delte knapper har en standard handling til venstre og en rullegardinbryter til høyre med kontekstuelle lenker.

Størrelser

Bruk den ekstra knappeklassen .btn-mini, .btn-small, eller .btn-largefor dimensjonering.

<div class = "btn-gruppe" > 
  ...
  <ul class = "rullegardinmeny trekk til høyre" > 
    <!-- lenker til rullegardinmenyen -->
  </ul>
</div>

Eksempel på markering

Vi utvider de vanlige rullegardinmenyene for å gi en andre knappehandling som fungerer som en separat rullegardinutløser.

<div class = "btn-gruppe" > 
  <button class = "btn" > Handling </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rullegardinmeny" > 
    <!-- lenker til rullegardinmenyen -->
  </ul>
</div>

Dropup-menyer

Rullegardinmenyer kan også veksles fra bunnen og opp ved å legge til en enkelt klasse til den nærmeste forelderen til .dropdown-menu. Den vil snu retningen på .caretog flytte selve menyen for å flytte fra bunnen og opp i stedet for ovenfra og 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 = "rullegardinmeny" > 
    <!-- lenker til rullegardinmenyen -->
  </ul>
</div>

Lightweight defaults Samme markering, forskjellige klasser

Kraftig grunnklasse

Alle nav-komponenter her – faner, piller og lister – deler den samme grunnoppmerkingen og stilene gjennom .navklassen.

Når du skal bruke

Faner og piller er flotte for deler av innhold eller for å navigere mellom sider med relatert innhold.

Komponentjustering

For å justere nav-koblinger, bruk verktøyklassene .pull-lefteller .pull-right. Begge klassene vil legge til en CSS-float i den angitte retningen.

Grunnleggende faner

Ta en vanlig <ul>lenker og legg til .nav-tabs:

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

Grunnleggende piller

Ta den samme HTML-en, men bruk .nav-pillsi stedet:

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

Stables Gjør faner eller piller vertikale

Hvordan stable dem

Siden faner og piller er horisontale som standard, bare legg til en andre klasse, .nav-stacked, for å få dem til å se vertikalt stablet ut.

Stablede faner

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

Stablede piller

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

Rullegardiner For avanserte navigasjonskomponenter

Rike menyer gjort enkelt

Rullegardinmenyer i Bootstrap-faner og -piller er superenkle og krever bare litt ekstra HTML og en lett jQuery-plugin.

Gå over til Javascript-siden for å lese dokumentene om initialisering av rullegardinmenyene i Bootstrap.

Faner med rullegardiner

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "rullegardinmeny"
       href = "#" >
        Fall ned
        <b class = "caret" ></b> 
      </a>
    <ul class = "rullegardinmeny" > 
      <!-- lenker -->
    </ul>
  </li>
</ul>

Piller med dropdowns

<ul class = "nav nav-piller" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "rullegardinmeny"
       href = "#" >
        Fall ned
        <b class = "caret" ></b> 
      </a>
    <ul class = "rullegardinmeny" > 
      <!-- lenker -->
    </ul>
  </li>
</ul>

Nav-lister Bygg enkle stablede nav-er, flott for sidefelt

Navigasjon i applikasjonsstil

Nav-lister gir en enkel og enkel måte å bygge grupper av nav-lenker med valgfrie overskrifter. De brukes best i sidefelt som Finder i OS X.

Strukturelt sett er de bygget på de samme kjernenavigasjonsstilene som tabulatorer og piller, så bruk og tilpasning er enkel.

Med ikoner

Nav-lister er også enkle å utstyre med ikoner. Legg til riktig <i>tag med klassen, og du er klar.

Horisontale skillevegger

Legg til en horisontal skillelinje ved å lage et tomt listeelement med klassen .divider, slik:

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

Eksempel på nav-liste

Ta en liste over linker og legg til class="nav nav-list":

<ul class = "nav nav-liste" > 
  <li class = "nav-header" > 
    Listeoverskrift
  </li>
  <li class = "aktiv" > 
    <a href = "#" > Hjem </a> 
  </li>
  <li>
    <a href = "#" > Bibliotek </a> 
  </li>
  ...
</ul>

Eksempel med ikoner

Samme eksempel, men med <i>tagger for ikoner.

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

Tabbar nav Gjør faner til live via javascript

Hva er inkludert

Gi liv til fanene dine med en enkel plugin for å veksle mellom innhold via faner. Bootstrap integrerer tabulatorer i fire stiler: topp (standard), høyre, bunn og venstre.

Det er enkelt å bytte mellom dem og krever bare å endre svært lite markering.

Tabbar eksempel

For å gjøre faner tabulable, pakk .nav-tabsinn en annen div med klasse .tabbable.

Jeg er i seksjon 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

Egendefinert jQuery-plugin

Alle tabbare faner drives av vår lette jQuery-plugin. Les mer om hvordan du får liv i tabulatorer på javascript-dokumentsiden.

Få javascript →

Enkel markering

Bruk av tabulatorbare faner krever en innpaknings-div, et sett med faner og et sett med tabulatorer med innhold.

<div class = "tabbable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > Del 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Del 2 </a></li>  
  </ul>
  <div class = "tab-innhold" > 
    <div class = "tab-panel aktiv" id = "1" >  
      <p> Jeg er i seksjon 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Hei, jeg er i seksjon 2. </p>
    </div>
  </div>
</div>

Tabbar i alle retninger

Faner på bunnen

Vend rekkefølgen til HTML-en og legg til en klasse for å sette faner nederst.

Jeg er i seksjon A.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

Faner til venstre

Bytt klassen for å sette faner til venstre.

Jeg er i seksjon A.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

Faner til høyre

Bytt klassen for å sette faner til høyre.

Jeg er i seksjon A.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

Eksempel på statisk navbar

Et eksempel på en statisk (ikke festet til toppen) navigasjonslinje med prosjektnavn, navigasjon og søkeskjema.

Navbar stillas

Navigasjonslinjen krever bare noen få divs for å strukturere den godt for statisk eller fast visning.

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

Fast navbar

Fest navigasjonslinjen til toppen eller bunnen av viewporten med en ekstra klasse på den ytterste div, .navbar.

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

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

Når du fester navigasjonslinjen, husk å ta hensyn til det skjulte området under. Legg til 40px eller mer av tillegg til <body>. Sørg for å legge til dette etter kjernen Bootstrap CSS og før den valgfrie responsive CSS.

Merkenavn

En enkel lenke for å vise merkevaren eller prosjektnavnet ditt krever bare en ankermerke.

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

Skjemaer i navbar

For å style og plassere et skjema riktig i navigasjonslinjen, legg til de aktuelle klassene som vist nedenfor. For et standardskjema, inkluderer .navbar-formog enten .pull-lefteller .pull-rightfor å justere det riktig.

<form class = "navbar-form pull-venstre" > 
  <input type = "text" class = "span2" >  
</form>

For et mer tilpasset søkeskjema, legg til .navbar-searchklassen for å motta spesialiserte stiler i navigasjonslinjen.

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

Valgfri responsiv variant

Avhengig av mengden innhold i topplinjen din, vil du kanskje implementere de responsive alternativene. For å gjøre det, pakk nav-innholdet inn i en som inneholder div, .nav-collapse.collapse, og legg til navbar-veksleknappen, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar brukes som bryter for skjult navbarinnhold -->
      <en klasse  = "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 å la merkevaren være der ute hvis du vil ha den vist -->
      <a class = "brand" href = "#" > Prosjektnavn </a>  
 
      <!-- Alt du vil ha skjult ved 940px eller mindre, plasser her -->
      <div class = "nav-kollaps" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Vær oppmerksom! Den responsive navigasjonslinjen krever kollaps-plugin .

Nav-lenker

Nav-elementer er enkle å legge til via uordnede lister.

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

Du kan enkelt legge til skillelinjer til nav-lenkene dine med et tomt listeelement og en enkel klasse. Bare legg til dette mellom lenker:

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

Komponentjustering

For å justere en nav, søkeskjema eller tekst, bruk verktøyklassene .pull-lefteller .pull-right. Begge klassene vil legge til en CSS-float i den angitte retningen.

Legger til rullegardinmenyer

Det er superenkelt å legge til dropdowns og dropups i navigasjonen, men krever bruk av vår javascript-plugin .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          klasse = "rullegardinbryter"
          data-toggle = "rullegardinmenyen" >
          Regnskap
          <b class = "caret" ></b> 
    </a>
    <ul class = "rullegardinmeny" > 
      ...
    </ul>
  </li>
</ul>

Få javascript →

Tekst i navigasjonslinjen

Pakk inn tekststrenger i en <p>tag for riktig linjeføring og farge.

Hvorfor bruke dem

Brødsmule-navigasjon brukes som en måte å vise brukere hvor de er i en app eller et nettsted, men ikke for primærnavigering. Hold bruken sparsom og kortfattet for å være mest effektiv.

Eksempler

Et enkelt eksempel vist slik det kan vises på flere sider.

Markup

HTML er din standard uordnede liste med lenker.

<ul class = "brødsmule" > 
  <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>

Multicon-side paginering

Når du skal bruke

Ultra forenklet og minimalistisk paginering inspirert av Rdio, flott for apper og søkeresultater. Den store blokken er vanskelig å gå glipp av, lett skalerbar og gir store klikkområder.

Stateful sidelinker

Lenker kan tilpasses og fungerer i en rekke omstendigheter med riktig klasse. .disabledfor uklikkbare lenker og.active for gjeldende side.

Fleksibel justering

Legg til en av to valgfrie klasser for å endre justeringen av pagineringslenker: .pagination-centeredog .pagination-right.

Eksempler

Standard pagineringskomponent er fleksibel og fungerer i en rekke varianter.

Markup

Paginering er pakket inn i <div>en <ul>.

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

Personsøker For raske forrige og neste lenker

Om personsøker

Personsøkerkomponenten er et sett med lenker for enkle pagineringsimplementeringer med lett markering og enda lettere stiler. Det er flott for enkle nettsteder som blogger eller magasiner.

Valgfri deaktivert tilstand

Personsøkerlenker bruker også den generelle .disabledklassen fra pagineringen.

Standard eksempel

Som standard sentrerer personsøkeren lenker.

<ul class = "personsøker" > 
  <li>
    <a href = "#" > Forrige </a> 
  </li>
  <li>
    <a href = "#" > Neste </a> 
  </li>
</ul>

Justerte lenker

Alternativt kan du justere hver lenke til sidene:

<ul class = "personsøker" > 
  <li class = "forrige" > 
    <a href = "#" > ← Eldre </a> 
  </li>
  <li class = "neste" > 
    <a href = "#" > Nyere → </a> 
  </li>
</ul>

Etiketter	Markup
Misligholde	`<span class="label">Default</span>`
Suksess	`<span class="label label-success">Success</span>`
Advarsel	`<span class="label label-warning">Warning</span>`
Viktig	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Omvendt	`<span class="label label-inverse">Inverse</span>`

Om

Merker er små, enkle komponenter for å vise en indikator eller telling av noe slag. De finnes ofte i e-postklienter som Mail.app eller på mobilapper for push-varsler.

Tilgjengelige klasser

Navn	Eksempel	Markup
Misligholde	1	`<span class="badge">1</span>`
Suksess	2	`<span class="badge badge-success">2</span>`
Advarsel	4	`<span class="badge badge-warning">4</span>`
Feil	6	`<span class="badge badge-error">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Omvendt	10	`<span class="badge badge-inverse">10</span>`

Helteenhet

Bootstrap gir en lett, fleksibel komponent kalt en helteenhet for å vise frem innhold på nettstedet ditt. Det fungerer bra på markedsføring og innholdstunge nettsteder.

Markup

Pakk innholdet inn i en divslik:

<div class = "hero-unit" > 
  <h1> Overskrift </h1>
  <p> Slagord </p>
  <p>
    <a class = "btn btn-primær btn-large" > 
      Lære mer
    </a>
  </p>
</div>

Hei Verden!

Dette er en enkel helteenhet, en enkel jumbotron-stil komponent for å vekke ekstra oppmerksomhet til fremhevet innhold eller informasjon.

Lære mer

Sideoverskrift

Et enkelt skall for en h1passende plassering og segmentering av deler av innholdet på en side. Den kan bruke h1standardelementet smalli tillegg til de fleste andre komponenter (med ekstra stiler).

<div class = "page-header" > 
  <h1> Eksempelsideoverskrift </h1>
</div>

Standard miniatyrbilder

Som standard er Bootstraps miniatyrbilder utformet for å vise frem koblede bilder med minimal nødvendig markering.

Svært tilpassbar

Med litt ekstra markering er det mulig å legge til alle slags HTML-innhold som overskrifter, avsnitt eller knapper i miniatyrbilder.

Miniatyrbildeetikett

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
Miniatyrbildeetikett

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

Hvorfor bruke miniatyrbilder

Miniatyrbilder (tidligere .media-gridfrem til v1.4) er flotte for rutenett med bilder eller videoer, bildesøkeresultater, detaljhandelsprodukter, porteføljer og mye mer. De kan være lenker eller statisk innhold.

Enkel, fleksibel markering

Miniatyrbildeoppmerking er enkel – en ulmed et hvilket som helst antall lielementer er alt som kreves. Den er også superfleksibel, og tillater alle typer innhold med bare litt mer markering for å pakke inn innholdet.

Bruker rutenettkolonnestørrelser

Til slutt bruker miniatyrbildekomponenten eksisterende rutenettsystemklasser – som .span2eller .span3– for kontroll av miniatyrbildedimensjoner.

Markeringen

Som nevnt tidligere, er den nødvendige markeringen for miniatyrbilder lett og grei. Her er en titt på standardoppsettet for koblede bilder :

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

For tilpasset HTML-innhold i miniatyrbilder, endres markeringen litt. For å tillate innhold på blokknivå hvor som helst, bytter vi ut <a>med et <div>lignende:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Miniatyrbildeetikett </h5>
      <p> Miniatyrbildetekst her... </p>
    </div>
  </li>
  ...
</ul>

Flere eksempler

Utforsk alle alternativene dine med de forskjellige rutenettklassene som er tilgjengelige for deg. Du kan også mikse og matche forskjellige størrelser.

Lette standardinnstillinger

Omskrevet grunnklasse

Med Bootstrap 2 har vi forenklet grunnklassen: .alerti stedet for .alert-message. Vi har også redusert den minste nødvendige markeringen – ingen <p>er påkrevd som standard, bare den ytre <div>.

Enkelt varselmelding

For en mer holdbar komponent med mindre kode, har vi fjernet det differensierende utseendet for blokkvarsler, meldinger som kommer med mer utfylling og vanligvis mer tekst. Klassen har også endret seg til .alert-block.

Går bra med javascript

Bootstrap kommer med en flott jQuery-plugin som støtter varslingsmeldinger, noe som gjør det raskt og enkelt å avvise dem.

Få plugin »

Eksempler på varsler

Pakk inn meldingen og et valgfritt lukkeikon i en div med enkel klasse.

× Advarsel! Best sjekk deg selv, du ser ikke så bra ut.

<div class = "alert" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <strong> Advarsel! </strong> Best sjekk deg selv, du ser ikke så bra ut.
</div>

Utvid enkelt standardvarslingsmeldingen med to valgfrie klasser: .alert-blockfor flere utfyllings- og tekstkontroller og .alert-headingfor en matchende overskrift.

Advarsel!

Best sjekk deg selv, du ser ikke så bra ut. Nulla vitae elit libero, en pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <h4 class = "alert-heading" > Advarsel! </h4> 
  Best sjekk deg selv, du er ikke...
</div>

Kontekstuelle alternativer Legg til valgfrie klasser for å endre et varsels konnotasjon

Feil eller fare

× Oh Snap! Endre noen ting og prøv å sende inn på nytt.

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

Suksess

× Bra gjort! Du har lest denne viktige varselmeldingen.

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

Informasjon

× Vær oppmerksom! Dette varselet trenger din oppmerksomhet, men det er ikke superviktig.

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

Eksempler og markering

Grunnleggende

Standard fremdriftslinje med vertikal gradient.

<div class = "fremgang" > 
  <div class = "bar" 
       style = " bredde : 60 %; " ></div> 
</div>

Stripete

Bruker en gradient for å lage en stripete effekt (ingen IE).

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

Animert

Tar det stripete eksemplet og animerer det (ingen IE).

<div class = "fremdrift fremdriftsstripet 
     aktiv" >
  <div class = "bar" 
       style = " bredde : 40 %; " ></div> 
</div>

Alternativer og nettleserstøtte

Ekstra farger

Fremdriftslinjer bruker noen av de samme knappe- og varslingsklassene for konsekvente stiler.

Stripete stenger

I likhet med de solide fargene har vi varierte stripete fremdriftslinjer.

Oppførsel

Fremdriftslinjer bruker CSS3-overganger, så hvis du dynamisk justerer bredden via javascript, vil den endre størrelsen jevnt.

Hvis du bruker .activeklassen, vil .progress-stripedfremdriftslinjene dine animere stripene fra venstre mot høyre.

Nettleserstøtte

Fremdriftslinjer bruker CSS3-gradienter, overganger og animasjoner for å oppnå alle effektene. Disse funksjonene støttes ikke i IE7-9 eller eldre versjoner av Firefox.

Opera og IE støtter ikke animasjoner for øyeblikket.

Wells

Bruk brønnen som en enkel effekt på et element for å gi det en innfelt effekt.

Se, jeg er i en brønn!

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

Lukk ikon

Bruk det generiske lukkeikonet for å avvise innhold som modaler og varsler.

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

Knappegrupper Bli med knapper for mer verktøylinjelignende funksjonalitet

Knappegrupper

Beste praksis

Standard eksempel

Eksempel på verktøylinje

Avkrysningsboks og radiosmaker

Nedtrekkslister i knappegrupper

Rullegardinmenyer for knapper Bygget på knappegrupper for å gi kontekstuelle menyer

Nedtrekkslister for knapper

Oversikt og eksempler

Eksempel på markering

Fungerer med alle knappestørrelser

Krever javascript

Rullegardiner for delt knapp

Oversikt og eksempler

Størrelser

Eksempel på markering

Dropup-menyer

Nav, faner og piller Svært tilpassbar navigasjon i listestil

Lightweight defaults Samme markering, forskjellige klasser

Kraftig grunnklasse

Når du skal bruke

Komponentjustering

Grunnleggende faner

Grunnleggende piller

Stables Gjør faner eller piller vertikale

Hvordan stable dem

Stablede faner

Stablede piller

Rullegardiner For avanserte navigasjonskomponenter

Rike menyer gjort enkelt

Faner med rullegardiner

Piller med dropdowns

Nav-lister Bygg enkle stablede nav-er, flott for sidefelt

Navigasjon i applikasjonsstil

Med ikoner

Horisontale skillevegger

Eksempel på nav-liste

Eksempel med ikoner

Tabbar nav Gjør faner til live via javascript

Hva er inkludert

Tabbar eksempel

Egendefinert jQuery-plugin

Enkel markering

Tabbar i alle retninger

Faner på bunnen

Faner til venstre

Faner til høyre

Navbar

Eksempel på statisk navbar

Navbar stillas

Fast navbar

Merkenavn

Skjemaer i navbar

Valgfri responsiv variant

Nav-lenker

Komponentjustering

Legger til rullegardinmenyer

Tekst i navigasjonslinjen

Brødsmuler

Hvorfor bruke dem

Eksempler

Markup

Paginering To alternativer for å bla gjennom innhold

Multicon-side paginering

Når du skal bruke

Stateful sidelinker

Fleksibel justering

Eksempler

Markup

Personsøker For raske forrige og neste lenker

Om personsøker

Valgfri deaktivert tilstand

Standard eksempel

Justerte lenker

Innebygde etiketter Merk og merk tekst

Merker Indikatorer og uleste tellinger

Om

Tilgjengelige klasser

Typografiske komponenter Sideoverskrift og helteenhet for segmentering av innhold