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:

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

Foarbyld fan Toolbar

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

  1. <div class = "btn-arkbalke" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Checkbox en radio smaken

Knopgroepen kinne ek funksjonearje as radio's, wêrby't mar ien knop aktyf is, 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

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.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">
  3. Aksje
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu keppelings -->
  8. </ul>
  9. </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 viewport. 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 knopklassen .btn-mini, .btn-small, of .btn-largefoar grutte.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- dropdown menu keppelings -->
  5. </ul>
  6. </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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Aksje </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </knop>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu keppelings -->
  8. </ul>
  9. </div>

Dropup menu's

Dropdown-menu's kinne ek fan ûnderen nei boppen 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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </knop>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu keppelings -->
  8. </ul>
  9. </div>

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

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

  1. <div class = "pagina's" >
  2. <ul>
  3. <li><a href = "#" > Foarige </a></li>
  4. <li class = "aktyf" >
  5. <a href = "#"> 1 </a> _
  6. </li>
  7. <li><a href = "#"> 2 </a> </li>
  8. <li><a href = "#"> 3 </a> </li>
  9. <li><a href = "#"> 4 </a> </li>
  10. <li><a href = "#" > Folgjende </a></li>
  11. </ul>
  12. </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.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Foarige </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Folgjende </a>
  7. </li>
  8. </ul>

Oanpaste keppelings

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

  1. <ul class = "pager" >
  2. <li class = "foarige" >
  3. <a href = "#"> & larr ; Aldere </a>
  4. </li>
  5. <li class = "folgjende" >
  6. <a href = "#"> Nijer &rarr ; </a>
  7. </li>
  8. </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>
Belangryk 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Omkearde 10 <span class="badge badge-inverse">10</span>

Held ienheid

Bootstrap leveret in lichtgewicht, fleksibel 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:

  1. <div class = "hero-unit" >
  2. <h1> Koptekst </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Lear mear
  7. </a>
  8. </p>
  9. </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).

  1. <div class = "page-header" >
  2. <h1> Foarbyld fan sidekoptekst </h1>
  3. </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 yn te pakken.

Brûkt grid kolom maten

As lêste brûkt de komponint thumbnails besteande rastersysteemklassen - lykas .span2of .span3- foar kontrôle fan thumbnail-dimensjes.

De markearring

Lykas earder neamd, is de fereaske markearring foar thumbnails ljocht en ienfâldich. Hjir is in blik op de standert opset foar keppele ôfbyldings :

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail"> _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Miniatuerlabel </h5>
  6. <p> Miniatuerûnderskrift hjir... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.
  1. <div class = "alert" >
  2. <button class = "slute" data-dismiss = "alarm" > × </button>
  3. <strong> Warskôging! </strong> Best kontrolearje jo sels, jo sjogge net te goed.
  4. </div>

Heads up! iOS-apparaten fereaskje in href="#"foar it ûntslaan fan warskôgings. Wês der wis fan dat jo it opnimme en it data-attribút foar anker slute ikoanen. As alternatyf kinne jo in <button>elemint brûke mei it data-attribút, dat wy hawwe keazen foar ús dokuminten. By it brûken fan <button>, moatte jo opnimme type="button"of jo formulieren kinne net yntsjinje.

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.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#"> × </a> _
  3. <h4 class = "alert-heading" > Warskôging! </h4>
  4. Best check jo sels, do bist net ...
  5. </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.
  1. <div class = "alarm alert-flater" >
  2. ...
  3. </div>

Sukses

Goed dien! Jo hawwe dit wichtige warskôgingsberjocht mei súkses lêzen.
  1. <div class = "alarm alert-success" >
  2. ...
  3. </div>

Ynformaasje

Heads up! Dizze warskôging hat jo oandacht nedich, mar it is net super wichtich.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Foarbylden en markearring

Basic

Standert foarútgongbalke mei in fertikale gradient.

  1. <div class = "foarútgong" >
  2. <div class = "bar"
  3. style = " width : 60 %; " ></div>
  4. </div>

Striped

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

  1. <div class = "progress progress-striped" >
  2. <div class = "bar"
  3. style = " width : 20 %; " ></div>
  4. </div>

Animated

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

  1. <div class = "foarútgong foarútgong-striped
  2. aktyf" >
  3. <div class = "bar"
  4. style = " width : 40 %; " ></div>
  5. </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!
  1. <div class = "goed" >
  2. ...
  3. </div>

Ikoan slute

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

  1. <button class = "slute" > × </knop>

iOS-apparaten fereaskje in href="#" foar klikeveneminten as jo leaver in anker brûke.

  1. <a class = "close" href = "#"> & times; </a>