Components

Tsientallen werbrûkbere komponinten binne yn Bootstrap ynboud om navigaasje, warskôgings, popovers en folle mear te leverjen.

Knop groepen

Brûk knopgroepen om meardere knoppen byinoar te kombinearjen as ien gearstalde komponint. Bou se mei in searje <a>of <button>eleminten.

Best practices

Wy riede de folgjende rjochtlinen oan foar it brûken fan knopgroepen en arkbalken:

Brûk altyd itselde elemint yn ien knopgroep, <a>of <button>.
Meitsje gjin knoppen fan ferskate kleuren yn deselde knopgroep.
Brûk ikoanen neist of yn stee fan tekst, mar wês wis dat alt- en titeltekst opnimme wêr't passend is.

Related Button groepen mei dropdowns (sjoch hjirûnder) moatte wurde neamd út apart en altyd befetsje in dropdown caret om oan te jaan bedoeld gedrach.

Standert foarbyld

Hjir is hoe't de HTML sjocht foar in standert knopgroep boud mei anker-tag-knoppen:

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

Foarbyld fan Toolbar

Kombinearje sets fan <div class="btn-group">yn in <div class="btn-toolbar">foar mear komplekse komponinten.

<div class = "btn-arkbalke" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Checkbox en radio smaken

Knopgroepen kinne ek funksjonearje as radio's, wêr't mar ien knop aktyf kin wêze, of karfakjes, wêr't elk oantal knoppen aktyf wêze kinne. Besjoch de Javascript-dokuminten dêrfoar.

Krij it javaskript »

Dropdowns yn knopgroepen

Heads up! Knoppen mei dropdowns moatte wurde yndividueel ferpakt yn har eigen .btn-groupbinnen in .btn-toolbarfoar goede rendering.

Knop dropdowns

Oersjoch en foarbylden

Brûk elke knop om in útklapmenu te triggerjen troch it yn in te pleatsen .btn-groupen de juste menuopmaak te leverjen.

Foarbyld markup

Fergelykber mei in knopgroep brûkt ús markup gewoane knopmarkearring, mar mei in hantsjefol tafoegings om de styl te ferfine en de dropdown jQuery-plugin fan Bootstrap te stypjen.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Aksje
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu keppelings -->
  </ul>
</div>

Wurket mei alle knop maten

Button dropdowns wurkje op elke grutte. jo knop maten nei .btn-large, .btn-small, of .btn-mini.

Fereasket javascript

Dropdown-knoppen fereaskje de Bootstrap dropdown-plugin om te funksjonearjen.

Yn guon gefallen - lykas mobyl - dellûkmenu's sille útwreidzje bûten de werjefteport. Jo moatte de ôfstimming manuell of mei oanpast javascript oplosse.

Split knop dropdowns

Oersjoch en foarbylden

Bouwe op 'e knopgroepstilen en markearring, kinne wy maklik in split knop meitsje. Splitknoppen hawwe in standert aksje oan 'e lofterkant en in útklapmenu oan' e rjochterkant mei kontekstuele keppelings.

Maten

Brûk de ekstra knopklasse .btn-mini, .btn-small, of .btn-largefoar grutte.

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- dropdown menu keppelings -->
  </ul>
</div>

Foarbyld markup

Wy wreidzje út op 'e normale knop-dropdowns om in twadde knop-aksje te leverjen dy't wurket as in aparte dropdown-trigger.

<div class = "btn-group" > 
  <button class = "btn" > Aksje </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </knop>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu keppelings -->
  </ul>
</div>

Dropup menu's

Dropdown-menu's kinne ek fan ûnderen omheech wikselje troch in inkele klasse ta te foegjen oan 'e direkte âlder fan .dropdown-menu. It sil flip de rjochting fan de .careten reposition it menu sels te ferpleatsen fan ûnderen omheech ynstee fan top down.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </knop>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu keppelings -->
  </ul>
</div>

Lichtgewicht standerts Deselde markup, ferskillende klassen

Krêftige basisklasse

Alle nav-komponinten hjir - ljeppers, pillen en listen - diele deselde basismarkearring en stilen troch de .navklasse.

Wannear te brûken

Ljeppers en pillen binne geweldich foar seksjes fan ynhâld of navigearje tusken siden mei relatearre ynhâld.

Component alignment

Om align nav keppelings, brûk de .pull-leftof .pull-rightnut klassen. Beide klassen sille in CSS-float tafoegje yn 'e oantsjutte rjochting.

Basis ljeppers

Nim in reguliere <ul>keppelings en foegje ta .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aktyf" > 
    <a href = "#" > Thús </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Basis pillen

Nim deselde HTML, mar brûk .nav-pillsynstee:

<ul class = "nav nav-pillen" > 
  <li class = "aktyf" > 
    <a href = "#" > Thús </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Stapelber Meitsje ljeppers of pillen fertikaal

Hoe't se stapelje

As ljeppers en pillen binne standert horizontaal, foegje gewoan in twadde klasse ta, .nav-stacked, om se fertikaal steapele te sjen.

Opsteapele ljeppers

<ul class = "nav nav-ljeppers nav-stacked" > 
  ...
</ul>

Opsteapele pillen

<ul class = "nav nav-pillen nav-stacked" > 
  ...
</ul>

Dropdowns Foar avansearre nav komponinten

Rike menu's makke maklik

Dropdown-menu's yn Bootstrap-ljeppers en pillen binne super maklik en fereaskje mar in bytsje ekstra HTML en in lichtgewicht jQuery-plugin.

Gean nei de Javascript-side om de dokuminten te lêzen oer it initialisearjen fan dropdowns yn Bootstrap.

Ljeppers mei dropdowns

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

Pillen mei dropdowns

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

Nav-listen Bou ienfâldige opsteapele nav's, geweldich foar sydbalken

Applikaasje-styl navigaasje

Nav-listen jouwe in ienfâldige en maklike manier om groepen fan nav-keppelings te bouwen mei opsjonele kopteksten. Se wurde it bêste brûkt yn sydbalken lykas de Finder yn OS X.

Struktureel binne se boud op deselde kearnnavigaasjestilen as ljeppers en pillen, sadat gebrûk en oanpassing ienfâldich binne.

Mei ikoanen

Nav-listen binne ek maklik út te rusten mei ikoanen. Foegje de juste <i>tag ta mei klasse en jo binne ynsteld.

Horizontale dividers

Foegje in horizontale divider ta troch in leech listitem te meitsjen mei de klasse .divider, lykas sa:

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

Foarbyld nav list

Nim in list mei keppelings en foegje ta class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    List header
  </li>
  <li class = "aktyf" > 
    <a href = "#" > Thús </a> 
  </li>
  <li>
    <a href = "#" > Bibleteek </a> 
  </li>
  ...
</ul>

Foarbyld mei ikoanen

Itselde foarbyld, mar mei <i>tags foar ikoanen.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Biblioteek
    </a>
  </li>
  ...
</ul>

Tabbable nav Bring ljeppers ta libben fia javascript

Wat is ynbegrepen

Bring jo ljeppers ta libben mei in ienfâldige plugin om te wikseljen tusken ynhâld fia ljeppers. Bootstrap yntegreart tabbere ljeppers yn fjouwer stilen: boppe (standert), rjochts, ûnder en lofts.

It feroarjen tusken har is maklik en fereasket allinich it feroarjen fan heul bytsje markup.

Foarbyld fan Tabbable

Om ljeppers tabable te meitsjen, wrap de .nav-tabsyn in oare div mei klasse .tabbable.

Ik bin yn seksje 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

Oanpaste jQuery-plugin

Alle tabbere ljeppers wurde oandreaun troch ús lichtgewicht jQuery-plugin. Lês mear oer hoe't jo tabbere ljeppers ta libben bringe kinne op 'e javascript docs-side.

Krij it javascript →

Rjochtfeardige markup

It brûken fan tabbere ljeppers fereasket in wrapping div, in set fan ljeppers, en in set fan tabable panels of ynhâld.

<div class = "tabel" > 
  <ul class = "nav nav-tabs" > 
    <li class = "aktyf" ><a href = "#1" data-toggle = "tab" > Seksje 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Seksje 2 </a></li>  
  </ul>
  <div class = "tab-ynhâld" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Ik bin yn seksje 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Hoi, ik bin yn seksje 2. </p>
    </div>
  </div>
</div>

Tabbable yn elke rjochting

Ljeppers op 'e boaiem

Flip de folchoarder fan 'e HTML en foegje in klasse ta om ljeppers op' e boaiem te pleatsen.

Ik sit yn seksje A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class = "tabable tabs-below" > 
  <div class = "tab-ynhâld" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Ljeppers oan de linkerkant

Wissel de klasse om ljeppers oan de linkerkant te pleatsen.

Ik sit yn seksje 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-ynhâld" > 
    ...
  </div>
</div>

Ljeppers oan de rjochterkant

Wissel de klasse om ljeppers oan de rjochterkant te pleatsen.

Ik sit yn seksje A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-ynhâld" > 
    ...
  </div>
</div>

Statyske navbar foarbyld

In foarbyld fan in statyske (net fêst oan 'e boppekant) navbar mei projektnamme, navigaasje en sykfoarm.

Navbar steigers

De navbar fereasket mar in pear divs om it goed te strukturearjen foar statyske as fêste werjefte.

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

Fêste navigaasjebalke

Befestigje de navbar oan 'e boppe- of ûnderkant fan' e viewport mei in ekstra klasse op 'e bûtenste div .navbar,.

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

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

As jo de navigaasjebalke oanbringe, tink dan om rekken te hâlden mei it ferburgen gebiet derûnder. Foegje 40px of mear fan tafoeging ta oan de <body>. Wês wis dat jo dit tafoegje nei de kearn Bootstrap CSS en foar de opsjonele responsive CSS.

Merknamme

In ienfâldige keppeling om jo merk- of projektnamme te sjen, fereasket allinich in ankertag.

<a class = "brand" href = "#"> _  
  Projekt namme
</a>

Formulieren yn navbar

Om in formulier goed te stylearjen en te pleatsen binnen de navbar, foegje de passende klassen ta lykas hjirûnder werjûn. Foar in standertfoarm, befetsje .navbar-formen of .pull-leftof .pull-rightom it goed út te rjochtsjen.

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

Foar in mear oanpast sykformulier, foegje de .navbar-searchklasse ta om spesjalisearre stilen te ûntfangen yn 'e navbar.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Sykje" >   
</form>

Opsjoneel responsive fariaasje

Ofhinklik fan 'e hoemannichte ynhâld yn jo topbalke, wolle jo miskien de responsive opsjes ymplementearje. Om dit te dwaan, wrap jo nav-ynhâld yn in befetsjende div, .nav-collapse.collapse, en heakje de navbar-wikselknop ta, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar wurdt brûkt as skeakel foar ynklapte navbar-ynhâld -->
      <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>
 
      <!-- Wês wis dat jo it merk derút litte as jo it sjen wolle -->
      <a class = "brand" href = "#"> Projektnamme </a> _  
 
      <!-- Alles wat jo wolle ferburgen op 940px of minder, pleats hjir binnen -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, ensfh -->
      </div>
 
    </div>
  </div>
</div>

Heads up! De responsive navbar fereasket de ynklapplugin .

Nav keppelings

Nav-items binne ienfâldich ta te foegjen fia net-oardere listen.

<ul class = "nav" > 
  <li class = "aktyf" > 
    <a href = "#" > Thús </a> 
  </li>
  <li><a href = "#" > Keppeling </a></li> 
  <li><a href = "#" > Keppeling </a></li> 
</ul>

Jo kinne maklik tafoegje dividers oan jo nav keppelings mei in lege list item en in ienfâldige klasse. Foegje dit gewoan ta tusken keppelings:

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

Component alignment

Om in nav, sykfoarm of tekst út te rjochtsjen, brûk de .pull-leftof .pull-rightnutklassen. Beide klassen sille in CSS-float tafoegje yn 'e oantsjutte rjochting.

It tafoegjen fan útklapmenu's

It tafoegjen fan dropdowns en dropups oan de nav is super ienfâldich, mar fereasket it gebrûk fan ús javascript-plugin .

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

Krij it javascript →

Tekst yn 'e navigaasjebalke

Wrap strings fan tekst yn in <p>tag foar goede lieding en kleur.

Wêrom brûke se

Breadcrumb-navigaasje wurdt brûkt as in manier om brûkers sjen te litten wêr't se binne binnen in app of in side, mar net foar primêre navigaasje. Hâld har gebrûk sparse en koart om it meast effektyf te wêzen.

Foarbylden

In inkeld foarbyld werjûn sa't it kin wurde werjûn oer meardere siden.

Markup

HTML is jo standert net-oardere list mei keppelings.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Thús </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Bibleteek </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Gegevens </li> 
</ul>

Multicon-pagina paginaasje

Wannear te brûken

Ultra-simplistysk en minimaal stylige paginaasje ynspireare troch Rdio, geweldig foar apps en sykresultaten. It grutte blok is min te missen, maklik skalberber en leveret grutte klikgebieten.

Stateful side keppelings

Keppelings binne oanpasber en wurkje yn in oantal omstannichheden mei de juste klasse. .disabledfoar net-klikbere keppelings en .activefoar aktuele side.

Fleksibele ôfstimming

Foegje ien fan twa opsjonele klassen ta om de ôfstimming fan pagineringskeppelings te feroarjen: .pagination-centereden .pagination-right.

Foarbylden

De standert pagineringskomponint is fleksibel en wurket yn in oantal fariaasjes.

Markup

Ynpakt yn in <div>, paginering is gewoan in <ul>.

<div class = "pagina's" > 
  <ul>
    <li><a href = "#" > Foarige </a></li> 
    <li class = "aktyf" > 
      <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 = "#" > Folgjende </a></li> 
  </ul>
</div>

Pager Foar rappe foarige en folgjende keppelings

Oer pager

De pager-komponint is in set keppelings foar ienfâldige paginaasje-ymplemintaasjes mei ljochte markup en noch lichtere stilen. It is geweldich foar ienfâldige siden lykas blogs of tydskriften.

Opsjoneel útskeakele steat

Pager-keppelings brûke ek de algemiene .disabledklasse fan 'e paginaasje.

Standert foarbyld

Standert sintraat de pager keppelings.

<ul class = "pager" > 
  <li>
    <a href = "#" > Foarige </a> 
  </li>
  <li>
    <a href = "#" > Folgjende </a> 
  </li>
</ul>

Oanpaste keppelings

As alternatyf kinne jo elke keppeling oan 'e kanten rjochtsje:

<ul class = "pager" > 
  <li class = "foarige" > 
    <a href = "#"> & larr ; Aldere </a> 
  </li>
  <li class = "folgjende" > 
    <a href = "#"> Nijer &rarr ; </a> 
  </li>
</ul>

Labels	Markup
Standert	`<span class="label">Default</span>`
Sukses	`<span class="label label-success">Success</span>`
Warskôging	`<span class="label label-warning">Warning</span>`
Belangryk	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Omkearde	`<span class="label label-inverse">Inverse</span>`

Oer

Badges binne lytse, ienfâldige komponinten foar it werjaan fan in yndikator of telling fan wat soarte. Se wurde faak fûn yn e-postkliïnten lykas Mail.app of op mobile apps foar push-notifikaasjes.

Beskikbere klassen

Namme	Foarbyld	Markup
Standert	1	`<span class="badge">1</span>`
Sukses	2	`<span class="badge badge-success">2</span>`
Warskôging	4	`<span class="badge badge-warning">4</span>`
Fersin	6	`<span class="badge badge-error">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Omkearde	10	`<span class="badge badge-inverse">10</span>`

Hero ienheid

Bootstrap leveret in lichtgewicht, fleksibele komponint neamd in held-ienheid om ynhâld op jo side te sjen. It wurket goed op marketing en ynhâld-swiere siden.

Markup

Wrap jo ynhâld yn in divlike sa:

<div class = "hero-unit" > 
  <h1> Koptekst </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Lear mear
    </a>
  </p>
</div>

Hallo wrâld!

Dit is in ienfâldige helde-ienheid, in ienfâldige komponint yn jumbotron-styl om ekstra omtinken te freegjen foar featured ynhâld of ynformaasje.

Lear mear

Sidekoptekst

In ienfâldige shell foar in h1passend romte út en segment seksjes fan ynhâld op in side. It kin it h1standert smallelemint brûke, lykas de measte oare komponinten (mei ekstra stilen).

<div class = "page-header" > 
  <h1> Foarbyld fan sidekoptekst </h1>
</div>

Standert thumbnails

Standert binne de thumbnails fan Bootstrap ûntworpen om keppele ôfbyldings wer te jaan mei minimale fereaske markup.

Heech oanpasber

Mei in bytsje ekstra opmaak is it mooglik om elke soart HTML-ynhâld lykas kopteksten, paragrafen of knoppen ta te foegjen oan thumbnails.

Miniatuerlabel

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.

Aksje Aksje
Miniatuerlabel

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.

Aksje Aksje

Wêrom brûke thumbnails

Miniatueren (earder .media-gridoant v1.4) binne geweldich foar rasteren fan foto's of fideo's, ôfbyldingssykresultaten, retailprodukten, portfolios, en folle mear. Se kinne keppelings wêze as statyske ynhâld.

Ienfâldige, fleksibele markup

Miniatuermarkearring is ienfâldich - in ulmei elk oantal lieleminten is alles dat nedich is. It is ek super fleksibel, wêrtroch elk type ynhâld mei mar in bytsje mear markup mooglik is om jo ynhâld te ferpakken.

Brûkt grid kolom maten

As lêste, de thumbnails komponint brûkt besteande raster systeem klassen-lykas .span2of .span3- foar kontrôle fan thumbnail diminsjes.

De markearring

Lykas earder neamd, is de fereaske markup foar thumbnails ljocht en rjochtlinich. Hjir is in blik op de standert opset foar keppele ôfbyldings :

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

Foar oanpaste HTML-ynhâld yn thumbnails feroaret de markearring in bytsje. Om ynhâld op bloknivo oeral ta te stean, ruilje wy de <a>foar in <div>like sa:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Miniatuerlabel </h5>
      <p> Miniatuerûnderskrift hjir... </p>
    </div>
  </li>
  ...
</ul>

Mear foarbylden

Ferkenne al jo opsjes mei de ferskate rasterklassen beskikber foar jo. Jo kinne ek mix en match ferskillende maten.

Lichtgewicht standerts

Herskreaun basis klasse

Mei Bootstrap 2 hawwe wy de basisklasse ferienfâldige: .alertynstee fan .alert-message. Wy hawwe ek de minimale fereaske markup fermindere - nee <p>is standert fereaske, allinich de bûtenste <div>.

Single warskôging berjocht

Foar in duorsumer komponint mei minder koade, hawwe wy it differinsjearjende uterlik foar blokwarskôgings fuortsmiten, berjochten dy't komme mei mear padding en typysk mear tekst. De klasse is ek feroare yn .alert-block.

Giet geweldich mei javascript

Bootstrap komt mei in geweldige jQuery-plugin dy't warskôgingsberjochten stipet, wêrtroch't se fluch en maklik ôfwize.

Krij de plugin »

Foarbyld alerts

Wrap jo berjocht en in opsjoneel slute ikoan yn in div mei ienfâldige klasse.

× Warskôging! Best kontrolearje jo sels, jo sjogge net te goed.

<div class = "alert" > 
  <a class = "close" data-dismiss = "alert"> × </a> _  
  <strong> Warskôging! </strong> Best kontrolearje jo sels, jo sjogge net te goed.
</div>

Wreidzje it standert warskôgingsberjocht maklik út mei twa opsjonele klassen: .alert-blockfoar mear padding- en tekstkontrôles en .alert-headingfoar in oerienkommende koptekst.

Warskôging!

Best kontrolearje jo sels, jo sjogge net te goed. Nulla vitae elit libero, in 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" > Warskôging! </h4> 
  Best check jo sels, do bist net ...
</div>

Kontekstuele alternativen Foegje opsjonele klassen ta om de konnotaasje fan in warskôging te feroarjen

Flater of gefaar

× Oh snap! Feroarje in pear dingen en besykje it opnij yn te stjoeren.

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

Sukses

× Goed dien! Jo hawwe dit wichtige warskôgingsberjocht mei súkses lêzen.

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

Ynformaasje

× Heads up! Dizze warskôging hat jo oandacht nedich, mar it is net super wichtich.

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

Foarbylden en markearring

Basic

Standert foarútgongbalke mei in fertikale gradient.

<div class = "foarútgong" > 
  <div class = "bar" 
       style = " width : 60 %; " ></div> 
</div>

Striped

Brûkt in gradient om in striped effekt te meitsjen (gjin IE).

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

Animated

Nimt it gestreepte foarbyld en animearret it (gjin IE).

<div class = "foarútgong foarútgong-striped 
     aktyf" >
  <div class = "bar" 
       style = " width : 40 %; " ></div> 
</div>

Opsjes en browserstipe

Oanfoljende kleuren

Foarútgongsbalken brûke guon fan deselde knop- en warskôgingsklassen foar konsekwinte stilen.

Striped bars

Fergelykber mei de solide kleuren hawwe wy farieare gestreepte foarútgongsbalken.

Hâlden en dragen

Foarútgongsbalken brûke CSS3-transysjes, dus as jo de breedte dynamysk oanpasse fia javascript, sil de grutte soepel feroarje.

As jo de .activeklasse brûke, .progress-stripedsille jo foarútgongsbalken de strepen fan links nei rjochts animearje.

Browser stipe

Foarútgongsbalken brûke CSS3-gradiënten, transysjes en animaasjes om al har effekten te berikken. Dizze funksjes wurde net stipe yn IE7-9 of âldere ferzjes fan Firefox.

Opera en IE stypje op dit stuit gjin animaasjes.

Wells

Brûk de put as in ienfâldich effekt op in elemint om it in ynset effekt te jaan.

Sjoch, ik sit yn in put!

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

Ikoan slute

Brûk it generike slute ikoan foar it ôfwizen fan ynhâld lykas modalen en warskôgings.

<a class = "slute"> & times; </a>

Knopgroepen Doch mei oan knoppen foar mear arkbalke-like funksjonaliteit

Knop groepen

Best practices

Standert foarbyld

Foarbyld fan Toolbar

Checkbox en radio smaken

Dropdowns yn knopgroepen

Knop útklapmenu's Boud op knopgroepen om kontekstuele menu's te leverjen

Knop dropdowns

Oersjoch en foarbylden

Foarbyld markup

Wurket mei alle knop maten

Fereasket javascript

Split knop dropdowns

Oersjoch en foarbylden

Maten

Foarbyld markup

Dropup menu's

Nav, ljeppers en pillen Heech oanpasbere navigaasje yn liststyl

Lichtgewicht standerts Deselde markup, ferskillende klassen

Krêftige basisklasse

Wannear te brûken

Component alignment

Basis ljeppers

Basis pillen

Stapelber Meitsje ljeppers of pillen fertikaal

Hoe't se stapelje

Opsteapele ljeppers

Opsteapele pillen

Dropdowns Foar avansearre nav komponinten

Rike menu's makke maklik

Ljeppers mei dropdowns

Pillen mei dropdowns

Nav-listen Bou ienfâldige opsteapele nav's, geweldich foar sydbalken

Applikaasje-styl navigaasje

Mei ikoanen

Horizontale dividers

Foarbyld nav list

Foarbyld mei ikoanen

Tabbable nav Bring ljeppers ta libben fia javascript

Wat is ynbegrepen

Foarbyld fan Tabbable

Oanpaste jQuery-plugin

Rjochtfeardige markup

Tabbable yn elke rjochting

Ljeppers op 'e boaiem

Ljeppers oan de linkerkant

Ljeppers oan de rjochterkant

Navbar

Statyske navbar foarbyld

Navbar steigers

Fêste navigaasjebalke

Merknamme

Formulieren yn navbar

Opsjoneel responsive fariaasje

Nav keppelings

Component alignment

It tafoegjen fan útklapmenu's

Tekst yn 'e navigaasjebalke

Broodkruimels

Wêrom brûke se

Foarbylden

Markup

Paginaasje Twa opsjes foar blêdzjen troch ynhâld

Multicon-pagina paginaasje

Wannear te brûken

Stateful side keppelings

Fleksibele ôfstimming

Foarbylden

Markup

Pager Foar rappe foarige en folgjende keppelings

Oer pager

Opsjoneel útskeakele steat

Standert foarbyld

Oanpaste keppelings

Inline labels Labelje en annotearje tekst

Badges Yndikatoaren en net-lêzen tellen

Oer

Beskikbere klassen

Typografyske komponinten Sidekoptekst en heldeinheid foar it segmentearjen fan ynhâld