Eksempel

Byttbar, kontekstuell meny for å vise lister over lenker. Gjorde interaktiv med JavaScript-pluginen for rullegardinmenyen .

<ul class = "dropdown-meny" role = "meny" aria-labelledby = "dropdownMeny" >   
  <li><a tabindex = "-1" href = "#" > Handling </a></li>  
  <li><a tabindex = "-1" href = "#" > En annen handling </a></li>  
  <li><a tabindex = "-1" href = "#" > Noe annet her </a></li>  
  <li class = "deler" ></li> 
  <li><a tabindex = "-1" href = "#" > Separert lenke </a></li>  
</ul>

Markup

Ser du bare på rullegardinmenyen, her er den nødvendige HTML-en. Du må vikle rullegardinmenyens trigger og rullegardinmenyen innenfor .dropdown, eller et annet element som erklærer position: relative;. Så er det bare å lage menyen.

<div class = "dropdown" > 
  <!-- Link eller knapp for å bytte rullegardin -->
  <ul class = "dropdown-menu" role = "meny" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Handling </a></li>  
    <li><a tabindex = "-1" href = "#" > En annen handling </a></li>  
    <li><a tabindex = "-1" href = "#" > Noe annet her </a></li>  
    <li class = "deler" ></li> 
    <li><a tabindex = "-1" href = "#" > Separert lenke </a></li>  
  </ul>
</div>

Alternativer

Juster menyene til høyre og legg til flere nivåer av rullegardinmenyene.

Justere menyene

Legg .pull-righttil en .dropdown-menutil høyre juster rullegardinmenyen.

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

Deaktiverte menyalternativer

Legg .disabledtil <li>i rullegardinmenyen for å deaktivere koblingen.

<ul class = "dropdown-meny" role = "meny" aria-labelledby = "dropdownMeny" >   
  <li><a tabindex = "-1" href = "#" > Vanlig kobling </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Deaktivert kobling </a></li>   
  <li><a tabindex = "-1" href = "#" > En annen lenke </a></li>  
</ul>

Undermenyer på rullegardinmenyene

Legg til et ekstra nivå med rullegardinmenyer, som vises når du holder musepekeren på samme måte som OS X, med noen enkle markeringstillegg. Legg .dropdown-submenutil lii en eksisterende rullegardinmeny for automatisk styling.

Misligholde

Dropup

Venstre undermeny

<ul class = "dropdown-menu" role = "meny" aria-labelledby = "dLabel" >   
  ...
  <li class = "rullegardin-undermeny" > 
    <a tabindex = "-1" href = "#" > Flere alternativer </a>  
    <ul class = "rullegardinmeny" > 
      ...
    </ul>
  </li>
</ul>

Eksempler

To grunnleggende alternativer, sammen med to mer spesifikke varianter.

Enkeltknappgruppe

Pakk inn en serie knapper med .btninn .btn-group.

<div class = "btn-gruppe" > 
  <button class = "btn" > Venstre </button> 
  <button class = "btn" > Midt </button> 
  <button class = "btn" > Høyre </button> 
</div>

Flere knappegrupper

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>

Vertikale knappegrupper

Få et sett med knapper til å vises vertikalt stablet i stedet for horisontalt.

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

Nedtrekkslister i knappegrupper

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

Oversikt og eksempler

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

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

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.

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

Størrelser

Bruk de ekstra knappeklassene .btn-mini, .btn-small, eller .btn-largefor dimensjonering.

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

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

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>

Deaktivert tilstand

For enhver nav-komponent (faner, piller eller liste), legg .disabledtil for grå lenker og ingen sveveeffekter . Koblinger vil imidlertid forbli klikkbare med mindre du fjerner hrefattributtet. Alternativt kan du implementere tilpasset JavaScript for å forhindre disse klikkene.

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

Komponentjustering

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

Stables

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

Legg til rullegardinmenyer med litt ekstra HTML og JavaScript-plugin-modulen .

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

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

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

MerkFor nesting i en nav-liste, inkludere class="nav nav-list"på alle nestede <ul>.

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>

Tabbar nav

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.

Tabbar eksempel

For å gjøre faner tabulable, lag en .tab-panemed unik ID for hver fane og pakk dem inn .tab-content.

Jeg er i seksjon 1.

Hei, jeg er i seksjon 2.

Hva skjer jente, dette er seksjon 3.

<div class = "tabbable" > <!-- Kun nødvendig for venstre/høyre faner -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Del 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Del 2 </a></li>  
  </ul>
  <div class = "tab-innhold" > 
    <div class = "tab-panel aktiv" id = "tab1" >  
      <p> Jeg er i seksjon 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hei, jeg er i seksjon 2. </p>
    </div>
  </div>
</div>

Tok inn faner

For å få faner til å tone inn, legg .fadetil i hver .tab-pane.

Krever jQuery-plugin

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

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.

Hei, jeg er i seksjon B.

Hva skjer jente, dette er seksjon 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.

Hei, jeg er i seksjon B.

Hva skjer jente, dette er seksjon 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.

Hei, jeg er i seksjon B.

Hva skjer jente, dette er seksjon C.

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

Grunnleggende navigasjonslinje

Til å begynne med er navbarer statiske (ikke festet til toppen) og inkluderer støtte for et prosjektnavn og grunnleggende navigasjon. Plasser en hvor som helst innenfor en .container, som angir bredden på nettstedet og innholdet.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Tittel </a>  
    <ul class = "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

Merke

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

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

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>

Skjemaer

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" >  
  <button type = "submit" class = "btn" > Send inn </button>  
</form>

Søkeskjema

For et mer tilpasset søkeskjema, legg .navbar-searchtil formog .search-querytil input for spesialiserte stiler i navigasjonslinjen.

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

Komponentjustering

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

Bruker rullegardinmenyene

Legg til dropdowns og dropups til nav med litt markering og dropdowns JavaScript-plugin .

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

Besøk dokumentasjonen for JavaScript-rullegardinmenyene for mer markering og informasjon om rullegardinmenyene for anrop.

Tekst

Pakk inn tekststrenger i et element med .navbar-text, vanligvis på en <p>tag for riktig visning og farge.

Valgfrie skjermvarianter

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

Festet til toppen

Legg .navbar-fixed-toptil og husk å ta hensyn til det skjulte området under det ved å legge til minst 40 px paddingtil <body>. Sørg for å legge til dette etter kjernen Bootstrap CSS og før den valgfrie responsive CSS.

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

Festet til bunnen

Legg .navbar-fixed-bottomtil i stedet.

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

Statisk toppnavigeringslinje

Lag en navigasjonslinje i full bredde som ruller bort med siden ved å legge til .navbar-static-top. I motsetning til .navbar-fixed-topklassen, trenger du ikke å endre noen polstring på body.

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

Responsiv navigasjonslinje

For å implementere en kollapsende responsiv navlinje, pakk navbarinnholdet inn i en inneholdende 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 -->
      <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 å 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-kollaps" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Vær oppmerksom! Den responsive navigasjonslinjen krever kollaps-plugin og den responsive Bootstrap CSS-filen .

Omvendt variasjon

Endre utseendet til navigasjonslinjen ved å legge til .navbar-inverse.

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

Eksempler

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

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

Standard paginering

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

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

Alternativer

Deaktivert og aktiv tilstand

Lenker kan tilpasses for ulike omstendigheter. Bruk .disabledfor uklikkbare lenker og .activefor å indikere gjeldende side.

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

Du kan valgfritt bytte ut aktive eller deaktiverte ankere for spenn for å fjerne klikkfunksjonalitet mens du beholder stilene.

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

Størrelser

Lyst på større eller mindre paginering? Legg til .pagination-large, .pagination-small, eller .pagination-minifor flere størrelser.

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

Justering

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

<div class = "paginering paginering-sentrert" > 
  ...
</div>

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

Personsøker

Raske forrige og neste lenker for enkle pagineringsimplementeringer med lett markering og stiler. Det er flott for enkle nettsteder som blogger eller magasiner.

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>

Valgfri deaktivert tilstand

Personsøkerkoblinger bruker også den generelle .disabledverktøyklassen fra pagineringen.

<ul class = "personsøker" > 
  <li class = "forrige deaktivert" > 
    <a href = "#" > ← Eldre </a> 
  </li>
  ...
</ul>

Etiketter

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

Merker

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>`
Viktig	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Omvendt	10	`<span class="badge badge-inverse">10</span>`

Lett sammenleggbar

For enkel implementering vil etiketter og merker ganske enkelt kollapse (via CSS- :emptyvelgeren) når det ikke finnes noe innhold innenfor.

Helteenhet

En lett, fleksibel komponent for å vise frem viktig innhold på nettstedet ditt. Det fungerer bra på markedsføring og innholdstunge nettsteder.

Hei Verden!

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

Lære mer

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

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 <small> Undertekst for overskrift </small></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
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-grid frem 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 antallli elementer 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.

Markup

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 = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Miniatyrbildeetikett </h3>
      <p> Miniatyrbildetekst... </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.

Standard varsel

Pakk inn tekst og en valgfri avvisningsknapp .alertfor en grunnleggende advarselsmelding.

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

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

Avvis knapper

Nettlesere Mobile Safari og Mobile Opera, i tillegg til data-dismiss="alert"attributtet, krever en href="#"for avvisning av varsler ved bruk av en <a>tag.

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

Alternativt kan du bruke et <button>element med dataattributtet, som vi har valgt å gjøre for dokumentene våre. Når du bruker <button>, må du inkludere type="button"eller sende inn skjemaene dine.

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

Avvis varsler via JavaScript

Bruk varsler jQuery-plugin for rask og enkel avvisning av varsler.

Alternativer

For lengre meldinger, øk utfyllingen på toppen og bunnen av varselomslaget ved å legge til .alert-block.

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" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> 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 = " width : 60 %; " ></div>   
</div>

Stripete

Bruker en gradient for å lage en stripete effekt. Ikke tilgjengelig i IE7-8.

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

Animert

Legg .activetil .progress-stripedfor å animere stripene fra høyre mot venstre. Ikke tilgjengelig i alle versjoner av IE.

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

Stablet

Plasser flere stenger i samme .progressfor å stable dem.

<div class = "fremgang" > 
  <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>

Alternativer

Ekstra farger

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "fremgang fremgang-suksess" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-advarsel" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Stripete stenger

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "fremgang fremgang-suksess fremgang-stripet" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-advarsel progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "fremgang fremgang-fare fremdrift-stripet" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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.

Versjoner tidligere enn Internet Explorer 10 og Opera 12 støtter ikke animasjoner.

Abstrakte objektstiler for å bygge ulike typer komponenter (som bloggkommentarer, tweets osv.) som har et venstre- eller høyrejustert bilde sammen med tekstinnhold.

Standard eksempel

Standardmediet tillater å flyte et medieobjekt (bilder, video, lyd) til venstre eller høyre for en innholdsblokk.

Medieoverskrift

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.

Medieoverskrift

<div  class = "media" >
  <a class = "pull-venstre"   href = "#" >
    <img class = "media-objekt"   data-src = "holder.js/64x64" >
  </a>
  <div klasse  = "media-body" >
    <h4 klasse =  "media-heading" > Medieoverskrift </h4>
    ...
 
    <!-- Nestet medieobjekt -->
    <div klasse = "media" >
      ...
    </div>
  </div>
</div>

Medieliste

Med litt ekstra markering kan du bruke media inne i listen (nyttig for kommentartråder eller artikkellister).

Medieoverskrift

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.

Nestet medieoverskrift
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.

Nestet medieoverskrift
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.

Nestet medieoverskrift
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.
Medieoverskrift
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.

<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" > Medieoverskrift </h4> 
      ...
 
      <!-- Nestet medieobjekt -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

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>

Valgfrie klasser

Kontrollpolstring og avrundede hjørner med to valgfrie modifikasjonsklasser.

Se, jeg er i en brønn!

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

Se, jeg er i en brønn!

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

Lukk ikon

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

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

iOS-enheter krever en href="#"for klikk-hendelser hvis du heller vil bruke et anker.

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

Hjelperklasser

Enkle, fokuserte klasser for små skjerm- eller atferdsjusteringer.

.trekk til venstre

Flyt et element til venstre

klasse = "trekk til venstre"

. pull - venstre {
  flyte : venstre ;
}

.trekk til høyre

Flyt et element til høyre

klasse = "trekk til høyre"

. trekk - høyre {
  flyte : høyre ;
}

.dempet

Endre fargen til et element til#999

klasse = "dempet"

. muted {
  farge : #999; 
}

.clearfix

Fjern floatpå ethvert element

klasse = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: før ,
  &: etter {
    display : tabell ;
    innhold : "" ; 
  }
  &: etter {
    klar : begge ;
  }
}

Rullegardinmenyer

Eksempel

Markup

Alternativer

Justere menyene

Deaktiverte menyalternativer

Undermenyer på rullegardinmenyene

Knappegrupper

Eksempler

Enkeltknappgruppe

Flere knappegrupper

Vertikale knappegrupper

Avkrysningsboks og radiosmaker

Nedtrekkslister i knappegrupper

Rullegardinmenyer for knapper

Oversikt og eksempler

Fungerer med alle knappestørrelser

Krever JavaScript

Rullegardiner for delt knapp

Størrelser

Dropup-menyer

Nav: faner, piller og lister

Lightweight defaults Samme markering, forskjellige klasser

Grunnleggende faner

Grunnleggende piller

Deaktivert tilstand

Komponentjustering

Stables

Stablede faner

Stablede piller

Rullegardiner

Faner med rullegardiner

Piller med dropdowns

Nav-lister

Eksempel på nav-liste

Horisontale skillevegger

Tabbar nav

Tabbar eksempel

Tok inn faner

Krever jQuery-plugin

Tabbar i alle retninger

Faner på bunnen

Faner til venstre

Faner til høyre

Navbar

Grunnleggende navigasjonslinje

Navbar komponenter

Merke

Nav-lenker

Skjemaer

Søkeskjema

Komponentjustering

Bruker rullegardinmenyene

Tekst

Valgfrie skjermvarianter

Festet til toppen

Festet til bunnen

Statisk toppnavigeringslinje

Responsiv navigasjonslinje

Omvendt variasjon

Brødsmuler

Eksempler

Paginering To alternativer for å bla gjennom innhold

Standard paginering

Alternativer

Deaktivert og aktiv tilstand

Størrelser

Justering

Personsøker

Standard eksempel

Justerte lenker

Valgfri deaktivert tilstand

Etiketter og merker

Etiketter

Merker

Lett sammenleggbar

Typografiske komponenter

Helteenhet

Hei Verden!

Sideoverskrift