Glifi disponibbli

Jinkludi aktar minn 250 glifi f'format tat-tipa mis-sett Glyphicon Halflings. Glyphicons Halflings normalment mhumiex disponibbli b'xejn, iżda l-kreatur tagħhom għamilhom disponibbli għal Bootstrap mingħajr ħlas. Bħala grazzi, nitolbu biss li tinkludi link lura għal Glyphicons kull meta jkun possibbli.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-sħaba
glyphicon glyphicon-envelope
glyphicon glyphicon-lapes
glyphicon glyphicon-ħġieġ
glyphicon glyphicon-mużika
glyphicon glyphicon-tfittxija
glyphicon glyphicon-qalb
glyphicon glyphicon-istilla
glyphicon glyphicon-star-vojta
glyphicon glyphicon-utent
glyphicon glyphicon-film
glyphicon glyphicon-th-kbir
glyphicon glyphicon-th
glyphicon glyphicon-th-lista
glyphicon glyphicon-ok
glyphicon glyphicon-tneħħija
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-sinjal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-dar
glyphicon glyphicon-fajl
glyphicon glyphicon-ħin
glyphicon glyphicon-triq
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeti
glyphicon glyphicon-aġġornament
glyphicon glyphicon-lista-alt
glyphicon glyphicon-lock
glyphicon glyphicon-bandiera
glyphicon glyphicon-headphones
glyphicon glyphicon-volum-off
glyphicon glyphicon-volum-isfel
glyphicon glyphicon-volum-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-ktieb
glyphicon glyphicon-bookmark
glyphicon glyphicon-istampar
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-korsiv
glyphicon glyphicon-test-għoli
glyphicon glyphicon-test-wisa'
glyphicon glyphicon-align-xellug
glyphicon glyphicon-align-center
glyphicon glyphicon-align-lemin
glyphicon glyphicon-align-jiġġustifika
glyphicon glyphicon-lista
glyphicon glyphicon-inċiż-xellug
glyphicon glyphicon-inċiż-lemin
glyphicon glyphicon-facetime-video
glyphicon glyphicon-stampa
glyphicon glyphicon-mappa-markatur
glyphicon glyphicon-aġġustament
glyphicon glyphicon-lewn
glyphicon glyphicon-editja
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-ċaqlaq
glyphicon glyphicon-pass-lura
glyphicon glyphicon-fast-backward
glyphicon glyphicon-lura
glyphicon glyphicon-play
glyphicon glyphicon-pawsa
glyphicon glyphicon-stop
glyphicon glyphicon-quddiem
glyphicon glyphicon-fast-forward
glyphicon glyphicon-pass 'il quddiem
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-xellug
glyphicon glyphicon-chevron-lemin
glyphicon glyphicon-plus-sinjal
glyphicon glyphicon-minus-sinjal
glyphicon glyphicon-neħħi-sinjal
glyphicon glyphicon-ok-sinjal
glyphicon glyphicon-mistoqsija-sinjal
glyphicon glyphicon-info-sinjal
glyphicon glyphicon-screenshot
glyphicon glyphicon-neħħi-ċirku
glyphicon glyphicon-ok-ċirku
glyphicon glyphicon-projbizzjoni-ċirku
glyphicon glyphicon-vleġġa-xellug
glyphicon glyphicon-vleġġa-lemin
glyphicon glyphicon-vleġġa-up
glyphicon glyphicon-vleġġa-isfel
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-żgħir
glyphicon glyphicon-sinjal-exclamation
glyphicon glyphicon-rigal
glyphicon glyphicon-werqa
glyphicon glyphicon-nar
glyphicon glyphicon-għajn-miftuħa
glyphicon glyphicon-għajn-qrib
glyphicon glyphicon-sinjal-twissija
glyphicon glyphicon-pjan
glyphicon glyphicon-kalendarju
glyphicon glyphicon-random
glyphicon glyphicon-kumment
glyphicon glyphicon-kalamita
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-qrib
glyphicon glyphicon-folder-miftuħ
glyphicon glyphicon-resize-vertikali
glyphicon glyphicon-resize-orizzontali
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-qanpiena
glyphicon glyphicon-ċertifikat
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-id-lemin
glyphicon glyphicon-id-xellug
glyphicon glyphicon-id-il fuq
glyphicon glyphicon-id-isfel
glyphicon glyphicon-ċirku-vleġġa-lemin
glyphicon glyphicon-ċirku-vleġġa-xellug
glyphicon glyphicon-ċirku-vleġġa-up
glyphicon glyphicon-ċirku-vleġġa-isfel
glyphicon glyphicon-globu
glyphicon glyphicon-wrench
glyphicon glyphicon-kompiti
glyphicon glyphicon-filtru
glyphicon glyphicon-bagalja
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-qalb-vojta
glyphicon glyphicon-link
glyphicon glyphicon-telefon
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alfabett
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-b'ordni
glyphicon glyphicon-sort-b'ordni-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-mhux iċċekkjat
glyphicon glyphicon-expand
glyphicon glyphicon-kollass-isfel
glyphicon glyphicon-kollass-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-tieqa-ġdida
glyphicon glyphicon-rekord
glyphicon glyphicon-jsalva
glyphicon glyphicon-miftuħ
glyphicon glyphicon-salvat
glyphicon glyphicon-importazzjoni
glyphicon glyphicon-esportazzjoni
glyphicon glyphicon-ibgħat
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-salvat
glyphicon glyphicon-floppy-tneħħija
glyphicon glyphicon-floppy-salva
glyphicon glyphicon-floppy-miftuħ
glyphicon glyphicon-karta-kreditu
glyphicon glyphicon-trasferiment
glyphicon glyphicon-pożati
glyphicon glyphicon-header
glyphicon glyphicon-kompressat
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-torri
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-sottotitli
glyphicon glyphicon-ħoss-stereo
glyphicon glyphicon-ħoss-dolby
glyphicon glyphicon-ħoss-5-1
glyphicon glyphicon-ħoss-6-1
glyphicon glyphicon-ħoss-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-marka-reġistrazzjoni
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-siġra-konifera
glyphicon glyphicon-siġra-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-livell up
glyphicon glyphicon-kopja
glyphicon glyphicon-pejst
glyphicon glyphicon-twissija
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-reġina
glyphicon glyphicon-pedina
glyphicon glyphicon-isqof
glyphicon glyphicon-kavallier
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tinda
glyphicon glyphicon-blackboard
glyphicon glyphicon-sodda
glyphicon glyphicon-tuffieħ
glyphicon glyphicon-tħassar
glyphicon glyphicon-hourglass
glyphicon glyphicon-lampa
glyphicon glyphicon-duplikat
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-imqass
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rublu
glyphicon glyphicon-togħrok
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-silġ-lolly-togħma
glyphicon glyphicon-edukazzjoni
glyphicon glyphicon-għażla-orizzontali
glyphicon glyphicon-għażla-vertikali
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-tieqa
glyphicon glyphicon-żejt
glyphicon glyphicon-grain
glyphicon glyphicon-nuċċalijiet tax-xemx
glyphicon glyphicon-test-daqs
glyphicon glyphicon-test-kulur
glyphicon glyphicon-test-isfond
glyphicon glyphicon-object-align-top
glyphicon glyphicon-oġġett-allinja-qiegħ
glyphicon glyphicon-oġġett-allinja-orizzontali
glyphicon glyphicon-oġġett-allinja-xellug
glyphicon glyphicon-oġġett-allinjament-vertikali
glyphicon glyphicon-oġġett-allinja-lemin
glyphicon glyphicon-trijangolu-lemin
glyphicon glyphicon-trijangolu-xellug
glyphicon glyphicon-trijangolu-qiegħ
glyphicon glyphicon-trijangolu-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-sottoskritt
glyphicon glyphicon-menu-xellug
glyphicon glyphicon-menu-lemin
glyphicon glyphicon-menu-isfel
glyphicon glyphicon-menu-up

Kif tuża

Għal raġunijiet ta' prestazzjoni, l-ikoni kollha jeħtieġu klassi bażi u klassi ta' ikoni individwali. Biex tuża, poġġi l-kodiċi li ġej kważi kullimkien. Kun żgur li tħalli spazju bejn l-ikona u t-test għall-ikkuttunar xieraq.

Tħallatx ma 'komponenti oħra

Il-klassijiet tal-ikoni ma jistgħux jiġu kkombinati direttament ma' komponenti oħra. M'għandhomx jintużaw flimkien ma' klassijiet oħra fuq l-istess element. Minflok, żid imdawwar <span>u applika l-klassijiet tal-ikoni għall- <span>.

Għall-użu biss fuq elementi vojta

Il-klassijiet tal-ikoni għandhom jintużaw biss fuq elementi li ma fihom l-ebda kontenut tat-test u li m'għandhomx elementi tfal.

Nibdlu l-post tat-tipa tal-ikona

Bootstrap jassumi li l-fajls tat-tipa tal-ikona jkunu jinsabu fid- ../fonts/direttorju, relattiv għall-fajls CSS ikkompilati. Li ċċaqlaq jew tibdel l-isem ta' dawk il-fajls tat-tipa tfisser li taġġorna s-CSS b'wieħed minn tliet modi:

Ibdel il- @icon-font-pathu/jew @icon-font-namevarjabbli fis-sors Inqas fajls.
Uża l -għażla tal-URLs relattivi pprovduta mill-kompilatur Less.
Ibdel il- url()mogħdijiet fis-CSS ikkumpilat.

Uża kwalunkwe għażla li taqbel l-aħjar mal-konfigurazzjoni speċifika tal-iżvilupp tiegħek.

Ikoni aċċessibbli

Verżjonijiet moderni ta 'teknoloġiji ta' assistenza se jħabbru kontenut iġġenerat CSS, kif ukoll karattri Unicode speċifiċi. Biex tevita output mhux intenzjonat u konfuż fil-qarrejja tal-iskrin (partikolarment meta l-ikoni jintużaw purament għal dekorazzjoni), aħna naħbuhom bl- aria-hidden="true"attribut.

Jekk qed tuża ikona biex twassal tifsira (aktar milli biss bħala element dekorattiv), kun żgur li din it-tifsira titwassal ukoll għal teknoloġiji ta' assistenza – pereżempju, inkludi kontenut addizzjonali, moħbi viżwalment mal- .sr-onlyklassi.

Jekk qed toħloq kontrolli mingħajr test ieħor (bħal <button>li fiha biss ikona), għandek dejjem tipprovdi kontenut alternattiv biex tidentifika l-iskop tal-kontroll, sabiex ikun jagħmel sens għall-utenti tat-teknoloġiji ta' assistenza. F'dan il-każ, tista 'żżid aria-labelattribut fuq il-kontroll innifsu.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Eżempji

Użahom f'buttuni, gruppi ta 'buttuni għal toolbar, navigazzjoni, jew inputs ta' formola prepended.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Ikona użata f'twissija biex twassal li huwa messaġġ ta' żball, b'test addizzjonali .sr-onlybiex twassal dan il-ħjiel lill-utenti tat-teknoloġiji ta' assistenza.

Daħħal indirizz elettroniku validu

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Menu kuntestwali li jista' jinbidel għall-wiri ta' listi ta' links. Magħmul interattiv mal- plugin JavaScript dropdown .

Eżempju

Kebbeb il-grillu tal-dropdown u l-menu dropdown fi ħdan .dropdown, jew element ieħor li jiddikjara position: relative;. Imbagħad żid l-HTML tal-menu.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Il-menus dropdown jistgħu jinbidlu biex jespandu 'l fuq (minflok 'l isfel) billi jiżdiedu .dropupmal-ġenitur.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Allinjament

B'mod awtomatiku, menu dropdown jitqiegħed awtomatikament 100% minn fuq u tul in-naħa tax-xellug tal-ġenitur tiegħu. Żid .dropdown-menu-rightmal- .dropdown-menulemin tallinja l-menu dropdown.

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

Headers

Żid header biex ittikketta sezzjonijiet tal-azzjonijiet fi kwalunkwe menu dropdown.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Diviżur

Żid diviżur għal serje separata ta 'links f'menu dropdown.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Oġġetti tal-menu b'diżabilità

Żid .disabledma' <li>fil-dropdown biex tiddiżattiva l-link.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Ggruppa serje ta 'buttuni flimkien fuq linja waħda mal-grupp ta' buttuni. Żid fuq ir-radju JavaScript fakultattiv u l-imġiba tal-istil tal-kaxxa tal-kontroll bil -plugin tal-buttuni tagħna .

Tooltips u popovers fi gruppi ta' buttuna jeħtieġu setting speċjali

Meta tuża tooltips jew popovers fuq elementi fi ħdan .btn-group, ikollok tispeċifika l-għażla container: 'body'biex tevita effetti sekondarji mhux mixtieqa (bħall-element jikber usa u/jew jitlef il-kantunieri fit-tond tiegħu meta l-tooltip jew popover jiġi attivat).

Żgura korretta `role`u ipprovdi tikketta

Sabiex it-teknoloġiji ta' assistenza – bħal qarrejja tal-iskrin – iwasslu li serje ta' buttuni hija raggruppata, rolejeħtieġ li jiġi pprovdut attribut xieraq. Għal gruppi ta' buttuna, dan ikun role="group", filwaqt li toolbars għandu jkollhom role="toolbar".

Eċċezzjoni waħda huma gruppi li fihom biss kontroll wieħed (pereżempju l- gruppi ta' buttuna ġustifikati b'elementi <button>) jew dropdown.

Barra minn hekk, gruppi u toolbars għandhom jingħataw tikketta espliċita, peress li l-biċċa l-kbira tat-teknoloġiji ta 'assistenza inkella ma jħabbruhomx, minkejja l-preżenza tal- roleattribut korrett. Fl-eżempji pprovduti hawn, nużaw aria-label, iżda alternattivi bħal aria-labelledbyjistgħu jintużaw ukoll.

Eżempju bażiku

Kebbeb sensiela ta’ buttuni .btnb’in .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Għaqqad settijiet ta ' <div class="btn-group">fi <div class="btn-toolbar">għal komponenti aktar kumplessi.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Daqs

Minflok ma tapplika klassijiet tad-daqs tal-buttuna għal kull buttuna fi grupp, żid biss .btn-group-*ma 'kull .btn-group, inkluż meta jbejtu gruppi multipli.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Ibejtu

Poġġi fi .btn-groupħdan ieħor .btn-groupmeta trid dropdown menus mħallta ma 'serje ta' buttuni.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Varjazzjoni vertikali

Agħmel sett ta 'buttuni jidhru f'munzelli vertikalment aktar milli orizzontalment. Il-dropdowns tal-buttuna maqsuma mhumiex appoġġjati hawn.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Gruppi ta' buttuna ġustifikati

Agħmel grupp ta 'buttuni stretch f'daqsijiet ugwali biex ikopru l-wisa' kollu tal-ġenitur tiegħu. Taħdem ukoll bi dropdowns tal-buttuni fi ħdan il-grupp tal-buttuni.

Immaniġġjar tal-fruntieri

Minħabba l-HTML u CSS speċifiċi użati biex jiġġustifikaw buttuni (jiġifieri display: table-cell), il-fruntieri bejniethom huma rduppjati. Fil-gruppi ta 'buttuni regolari, margin-left: -1pxjintuża biex jiġġedded il-fruntieri minflok ma jneħħihom. Madankollu, marginma taħdimx ma ' display: table-cell. Bħala riżultat, skont il-personalizzazzjonijiet tiegħek għal Bootstrap, tista 'tixtieq li tneħħi jew terġa' kulur il-fruntieri.

IE8 u fruntieri

Internet Explorer 8 ma jirrendix fruntieri fuq buttuni fi grupp ta 'buttuni ġustifikat, kemm jekk ikun fuq <a>jew <button>elementi. Biex taqra dan, wrap kull buttuna f'oħra .btn-group.

Ara #12476 għal aktar informazzjoni.

B'elementi `<a>`_

Biss wrap serje ta ' .btns fi .btn-group.btn-group-justified.

Xellug Nofsani Dritt

Xellug Nofsani

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Links li jaġixxu bħala buttuni

Jekk l- <a>elementi jintużaw biex jaġixxu bħala buttuni – li jqanqlu l-funzjonalità fil-paġna, aktar milli jinnavigaw għal dokument jew sezzjoni oħra fil-paġna kurrenti – għandhom jingħataw ukoll role="button".

B'elementi `<button>`_

Biex tuża gruppi ta 'buttuni ġustifikati <button>b'elementi, trid tkebbeb kull buttuna fi grupp ta' buttuna . Ħafna mill-browsers ma japplikawx sew is-CSS tagħna għall-ġustifikazzjoni għall- <button>elementi, iżda peress li nappoġġaw dropdowns tal-buttuni, nistgħu naħdmu madwar dan.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

Uża kwalunkwe buttuna biex tiskatta menu dropdown billi tpoġġiha fi ħdan .btn-groupu tipprovdi l-markup xieraq tal-menu.

Dipendenza tal-plugin

Dropdowns tal-buttuni jeħtieġu li l- plugin dropdown jiġi inkluż fil-verżjoni tiegħek ta 'Bootstrap.

Dropdowns ta' buttuna waħda

Dawwar buttuna f'toggle dropdown b'xi bidliet bażiċi fil-markup.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Dropdowns tal-buttuna maqsuma

Bl-istess mod, oħloq dropdowns tal-buttuna maqsuma bl-istess bidliet fil-markup, b'buttuna separata biss.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Daqs

Buttuni dropdowns jaħdmu ma 'buttuni ta' kull daqs.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Varjazzjoni dropup

Trigger dropdown menus hawn fuq elementi billi żżid .dropupmal-ġenitur.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Estendi l-kontrolli tal-formola billi żżid test jew buttuni qabel, wara, jew fuq iż-żewġ naħat ta 'kwalunkwe test ibbażat fuq <input>. Uża .input-groupma' .input-group-addonjew .input-group-btnbiex tipprependi jew tehmeż elementi ma' wieħed .form-control.

Testwali `<input>`s biss

Evita li tuża <select>elementi hawn peress li ma jistgħux jiġu stiljati bis-sħiħ fil-browsers tal-WebKit.

Evita li tuża <textarea>elementi hawnhekk peress li l- rowsattribut tagħhom mhux se jiġi rispettat f'xi każijiet.

Tooltips u popovers fi gruppi ta' input jeħtieġu setting speċjali

Meta tuża tooltips jew popovers fuq elementi fi ħdan .input-group, ikollok tispeċifika l-għażla container: 'body'biex tevita effetti sekondarji mhux mixtieqa (bħall-element jikber usa u/jew jitlef il-kantunieri fit-tond tiegħu meta l-tooltip jew popover jinxtegħlu).

Tħallatx ma 'komponenti oħra

Tħallatx gruppi ta' forma jew klassijiet ta' kolonni ta' grilja direttament ma' gruppi ta' input. Minflok, bejta l-grupp tad-dħul ġewwa l-grupp tal-forma jew l-element relatat mal-grilja.

Dejjem żid it-tikketti

Screen readers se jkollhom problemi bil-formoli tiegħek jekk ma tinkludix tikketta għal kull input. Għal dawn il-gruppi ta' input, kun żgur li kwalunkwe tikketta jew funzjonalità addizzjonali tiġi mgħoddija lil teknoloġiji ta' assistenza.

It-teknika eżatta li għandha tintuża ( <label>elementi viżibbli, <label>elementi moħbija bl-użu tal- .sr-onlyklassi, jew l-użu tal- aria-label, aria-labelledby, aria-describedby, titlejew placeholderattribut) u x'informazzjoni addizzjonali tkun teħtieġ li titwassal se jvarjaw skont it-tip eżatt ta' widget tal-interface li tkun qed timplimenta. L-eżempji f'din it-taqsima jipprovdu ftit approċċi ssuġġeriti u speċifiċi għall-każ.

Eżempju bażiku

Poġġi add-on jew buttuna waħda fuq kull naħa ta' input. Tista' wkoll tpoġġi waħda fuq iż-żewġ naħat ta' input.

Aħna ma nappoġġjawx add-ons multipli ( .input-group-addonjew .input-group-btn) fuq naħa waħda.

Aħna ma nappoġġjawx kontrolli tal-forma multipli fi grupp ta' input wieħed.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Daqs

Żid il-klassijiet tad-daqs tal-forma relattiva mal- .input-groupistess u l-kontenuti fi ħdanhom awtomatikament jerġgħu jinbidlu—m'hemmx bżonn li tirrepeti l-klassijiet tad-daqs tal-kontroll tal-formola fuq kull element.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Checkboxes u addons tar-radju

Poġġi kwalunkwe checkbox jew għażla tar-radju fi ħdan l-addon ta' grupp ta' input minflok it-test.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Addons tal-buttuni

Buttuni fil-gruppi ta 'input huma daqsxejn differenti u jeħtieġu livell wieħed żejjed ta' nesting. Minflok .input-group-addon, ikollok bżonn tuża .input-group-btnbiex tkebbeb il-buttuni. Dan huwa meħtieġ minħabba l-istili tal-browser default li ma jistgħux jiġu megħluba.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Buttuni bi dropdowns

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Buttuni segmentati

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Buttuni multipli

Filwaqt li jista 'jkollok biss add-on wieħed għal kull naħa, jista' jkollok buttuni multipli ġewwa .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

In-Navs disponibbli f'Bootstrap għandhom markup kondiviżi, li jibdew mill- .navklassi bażi, kif ukoll stati kondiviżi. Ibdel il-klassijiet tal-modifikatur biex taqleb bejn kull stil.

L-użu ta 'navs għal pannelli ta' tab jeħtieġ plugin ta 'tabs JavaScript

Għal tabs b'żoni tabbable, trid tuża t- tabs JavaScript plugin . Il-markup se jeħtieġ ukoll roleattributi addizzjonali u ARIA – ara l- markup eżempju tal-plugin għal aktar dettalji.

Agħmel in-navs użati bħala navigazzjoni aċċessibbli

Jekk qed tuża navs biex tipprovdi bar tan-navigazzjoni, kun żgur li żżid a role="navigation"mal-kontenitur ġenitur l-aktar loġiku tal- <ul>, jew wrap <nav>element madwar in-navigazzjoni kollha. Iżżidx ir-rwol mal- <ul>persuna nfisha, peress li dan jipprevjeni milli jitħabbar bħala lista attwali minn teknoloġiji ta' assistenza.

Tabs

Innota li l- .nav-tabsklassi teħtieġ il .nav-klassi bażi.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Pilloli

Ħu dak l-istess HTML, imma uża .nav-pillsminflok:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Il-pilloli huma wkoll vertikalment fuq xulxin. Żid biss .nav-stacked.

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

Iġġustifikat

Faċilment jagħmlu tabs jew pilloli wisgħat ugwali tal-ġenitur tagħhom fi skrins usa 'minn 768px b' .nav-justified. Fuq skrins iżgħar, il-links tan-nav huma f'munzelli.

Links ġustifikati tan-navbar nav bħalissa mhumiex appoġġjati.

Safari u navs ġustifikati li jirrispondu

Minn v9.1.2, Safari juri bug li fih id-daqs tal-brawżer tiegħek b'mod orizzontal jikkawża żbalji ta' rendering fin-nav ġustifikat li jitneħħew mal-aġġornament. Dan il-bug jidher ukoll fl- eżempju tan-nav ġustifikat .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Links b'diżabilità

Għal kwalunkwe komponent tan-nav (tabs jew pilloli), żid .disabledgħal links griżi u l-ebda effetti ta 'hover .

Il-funzjonalità tal-link mhux affettwata

Din il-klassi se tbiddel biss id <a>-dehra tal-'s, mhux il-funzjonalità tagħha. Uża JavaScript personalizzat biex tiddiżattiva links hawn.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Bl-użu dropdowns

Żid menus dropdown bi ftit HTML żejjed u l- plugin JavaScript dropdowns .

Tabs bi dropdowns

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Pilloli bi dropdowns

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

In-Navbars huma komponenti meta reattivi li jservu bħala headers tan-navigazzjoni għall-applikazzjoni jew is-sit tiegħek. Jibdew ikkollassaw (u jistgħu jiġu togglebbli) f'veduti mobbli u jsiru orizzontali hekk kif tiżdied il-wisa' tal-viewport disponibbli.

Links ġustifikati tan-navbar nav bħalissa mhumiex appoġġjati.

Kontenut li jfur

Peress li Bootstrap ma jafx kemm jeħtieġ spazju l-kontenut fin-navbar tiegħek, tista' tiltaqa' ma' kwistjonijiet bil-kontenut tat-tgeżwir fit-tieni ringiela. Biex issolvi dan, tista':

Naqqas l-ammont jew il-wisa 'tal-oġġetti tan-navbar.
Aħbi ċerti oġġetti tan-navbar f'ċerti daqsijiet tal-iskrin bl -użu ta' klassijiet ta' utilità li jirrispondu .
Ibdel il-punt li fih in-navbar tiegħek taqleb bejn il-mod kollass u orizzontali. Ippersonalizza l- @grid-float-breakpointvarjabbli jew żid il-mistoqsija tal-midja tiegħek stess.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Ibdel il-marka tan-navbar bl-immaġni tiegħek billi tbiddel it-test għal <img>. Peress li .navbar-brandgħandha l-ikkuttunar u l-għoli tagħha stess, jista 'jkollok bżonn tegħleb xi CSS skont l-immaġni tiegħek.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Poġġi l-kontenut tal-forma ġewwa .navbar-formgħal allinjament vertikali xieraq u mġiba mġarrfa f'portijiet tal-vista dojoq. Uża l-għażliet ta' allinjament biex tiddeċiedi fejn tirrisjedi fil-kontenut tan-navbar.

Bħala heads up, .navbar-formjaqsam ħafna mill-kodiċi tiegħu ma .form-inline'via mixin. Xi kontrolli tal-formoli, bħal gruppi ta' input, jistgħu jeħtieġu wisa' fissi biex jintwerew sew fi ħdan navbar.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Dejjem żid it-tikketti

Screen readers se jkollhom problemi bil-formoli tiegħek jekk ma tinkludix tikketta għal kull input. Għal dawn il-formoli inline, tista 'taħbi t-tikketti billi tuża l- .sr-onlyklassi. Hemm metodi alternattivi oħra biex tiġi pprovduta tikketta għal teknoloġiji ta' assistenza, bħall- aria-label, aria-labelledbyjew l- titleattribut. Jekk l-ebda wieħed minn dawn ma jkun preżenti, il-qarrejja tal-iskrin jistgħu jirrikorru għall-użu tal- placeholderattribut, jekk ikun preżenti, iżda innota li l-użu ta’ placeholderbħala sostitut għal metodi oħra ta’ tikkettjar mhuwiex rakkomandat.

Żid il- .navbar-btnklassi ma' <button>elementi li ma joqogħdux <form>f'a biex iċċentrahom vertikalment fin-navbar.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Kebbeb kordi ta 'test f'element b' .navbar-text, normalment fuq <p>tikketta għal tmexxija u kulur xierqa.

<p class="navbar-text">Signed in as Mark Otto</p>

Għal nies li jużaw links standard li mhumiex fi ħdan il-komponent tan-navigazzjoni regolari tan-navbar, uża l- .navbar-linkklassi biex iżżid il-kuluri xierqa għall-għażliet default u inversi tan-navbar.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Allinja nav links, formoli, buttuni, jew test, bl-użu .navbar-leftjew .navbar-rightklassijiet ta 'utilità. Iż-żewġ klassijiet se jżidu float CSS fid-direzzjoni speċifikata. Pereżempju, biex tallinja l-links tan-nav, poġġihom f'parti separata <ul>bil-klassi ta 'utilità rispettiva applikata.

Dawn il-klassijiet huma verżjonijiet imħallta ta' .pull-leftu .pull-right, iżda huma mmirati għal mistoqsijiet tal-midja għal immaniġġjar eħfef tal-komponenti tan-navbar fid-daqsijiet tal-apparat.

Żid .navbar-fixed-topu inkludi .containerjew .container-fluidmaċ-ċentru u l-kuxxinett tal-kontenut tan-navbar.

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

Padding tal-ġisem meħtieġ

In-navbar fissa se tispiċċa l-kontenut l-ieħor tiegħek, sakemm ma żżidx paddingfil-quċċata tal- <body>. Ipprova l-valuri tiegħek jew uża s-snippet tagħna hawn taħt. Tip: B'mod awtomatiku, in-navbar hija għolja 50px.

body { padding-top: 70px; }

Kun żgur li tinkludi dan wara l-qalba Bootstrap CSS.

Żid .navbar-fixed-bottomu inkludi .containerjew .container-fluidmaċ-ċentru u l-kuxxinett tal-kontenut tan-navbar.

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

Padding tal-ġisem meħtieġ

In-navbar fiss se jkopri l-kontenut l-ieħor tiegħek, sakemm ma żżidx paddingmal-qiegħ tal- <body>. Ipprova l-valuri tiegħek jew uża s-snippet tagħna hawn taħt. Tip: B'mod awtomatiku, in-navbar hija għolja 50px.

body { padding-bottom: 70px; }

Kun żgur li tinkludi dan wara l-qalba Bootstrap CSS.

Oħloq navbar full-wisa 'li tiskrollja 'l bogħod mal-paġna billi żżid .navbar-static-topu tinkludi .containerjew .container-fluidlejn iċ-ċentru u l-kuxxinett tal-kontenut tan-navbar.

B'differenza mill- .navbar-fixed-*klassijiet, m'għandekx bżonn tibdel xi padding fuq il- body.

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

Immodifika d-dehra tan-navbar billi żżid .navbar-inverse.

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

Frak tal-ħobż

Indika l-post tal-paġna kurrenti fi ħdan ġerarkija tan-navigazzjoni.

Is-separaturi jiżdiedu awtomatikament f'CSS permezz ta' :beforeu content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Paġnar

Ipprovdi links tal-paġnar għas-sit jew l-app tiegħek bil-komponent tal-paġnar b'ħafna paġni, jew l- alternattiva tal-paġnar aktar sempliċi .

Paġinazzjoni default

Paġinazzjoni sempliċi ispirata minn Rdio, kbira għall-apps u r-riżultati tat-tiftix. Il-blokka l-kbira hija diffiċli biex titlifha, tista 'tiġi skalata faċilment, u tipprovdi żoni ta' klikkjar kbar.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Tikkettjar tal-komponent tal-paġnar

Il-komponent tal-paġnar għandu jkun imgeżwer <nav>f'element li jidentifikah bħala sezzjoni tan-navigazzjoni għall-qarrejja tal-iskrin u teknoloġiji ta' assistenza oħra. Barra minn hekk, peress li paġna x'aktarx li jkollha aktar minn sezzjoni waħda ta' navigazzjoni bħal din diġà (bħal in-navigazzjoni primarja fl-header, jew in-navigazzjoni tal-istrixxa tal-ġenb), huwa rakkomandabbli li tipprovdi deskrittiva aria-labelgħall- <nav>li tirrifletti l-iskop tagħha. Pereżempju, jekk il-komponent tal-paġnar jintuża biex jinnaviga bejn sett ta' riżultati ta' tfittxija, tikketta xierqa tista' tkun aria-label="Search results pages".

Stati b'diżabilità u attivi

Il-links huma customizable għal ċirkostanzi differenti. Uża .disabledgħal links li ma tistax tikklikkja u .activebiex tindika l-paġna attwali.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Nirrakkomandaw li tbiddel l-ankri attivi jew b'diżabilità għal <span>, jew tħalli barra l-ankra fil-każ tal-vleġeġ preċedenti/li jmiss, biex tneħħi l-funzjonalità tal-ikklikkja filwaqt li żżomm l-istili maħsuba.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Daqs

Fancy paginazzjoni akbar jew iżgħar? Żid .pagination-lgjew .pagination-smgħal daqsijiet addizzjonali.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Pager

Links ta 'qabel u li jmiss ta' malajr għal implimentazzjonijiet ta 'paginazzjoni sempliċi b'markup u stili ħfief. Huwa tajjeb ħafna għal siti sempliċi bħal blogs jew rivisti.

Eżempju default

B'mod awtomatiku, il-pager jiffoka links.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Links allinjati

Inkella, tista' tallinja kull link mal-ġnub:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Stat diżabbli mhux obbligatorju

Ir-rabtiet tal-pager jużaw ukoll il- .disabledklassi ta 'utilità ġenerali mill-paġnar.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Eżempju

Eżempju ta' intestatura Ġdid

<h3>Example heading <span class="label label-default">New</span></h3>

Varjazzjonijiet disponibbli

Żid xi waħda mill-klassijiet modifikaturi msemmija hawn taħt biex tibdel id-dehra ta 'tikketta.

Informazzjoni Primarja Suċċess Default Twissija Periklu

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Għandek tunnellati ta 'tikketti?

Jistgħu jinqalgħu problemi ta' rendering meta jkollok għexieren ta' tikketti inline f'kontenitur dejjaq, kull wieħed ikun fih l- inline-blockelement tiegħu stess (bħal ikona). Il-mod madwar dan huwa l-issettjar display: inline-block;. Għal kuntest u eżempju, ara #13219 .

Faċilment enfasizza oġġetti ġodda jew mhux moqrija billi żżid <span class="badge">mal-links, Bootstrap navs, u aktar.

Inbox42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Jiġġarraf waħdu

Meta ma jkun hemm l-ebda oġġetti ġodda jew mhux moqrija, il-badges sempliċiment jikkrollaw (permezz tas- :emptyselettur tas-CSS) sakemm ma jeżisti l-ebda kontenut ġewwa.

Kompatibilità bejn il-browser

Il-badges mhux se jikkollassaw lilhom infushom f'Internet Explorer 8 minħabba li m'għandux appoġġ għas- :emptyselettur.

Adatta għal stati nav attivi

Stili inkorporati huma inklużi għat-tqegħid ta 'badges fi stati attivi fin-navigazzjonijiet tal-pilloli.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Komponent ħafif u flessibbli li b'għażla jista' jestendi l-vetrina kollha biex juri kontenut ewlieni fuq is-sit tiegħek.

Hello dinja!

Din hija unità ta 'eroj sempliċi, komponent sempliċi ta' stil jumbotron biex tissejjaħ attenzjoni żejda għal kontenut jew informazzjoni dehru.

Itagħllem iżjed

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Biex tagħmel il-jumbotron wisa 'sħiħa, u mingħajr kantunieri fit-tond, poġġiha barra .containers kollha u minflok żid .containerġewwa.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Qoxra sempliċi biex tispazja b'mod h1xieraq u tissegmenta sezzjonijiet tal-kontenut fuq paġna. Jista 'jutilizza l -element h1default smalltal-, kif ukoll il-biċċa l-kbira tal-komponenti l-oħra (bi stili addizzjonali).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Estendi s -sistema tal-grilja ta 'Bootstrap bil-komponent thumbnail biex turi faċilment grilji ta' stampi, vidjows, test, u aktar.

Jekk qed tfittex preżentazzjoni bħal Pinterest ta' thumbnails ta' għoli u/jew wisgħat li jvarjaw, ikollok bżonn tuża plugin ta' parti terza bħal Masonry , Isotope , jew Salvattore .

Eżempju default

B'mod awtomatiku, il-minjaturi ta' Bootstrap huma ddisinjati biex juru immaġini konnessi b'markup minimu meħtieġ.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Kontenut apposta

B'daqsxejn ta 'markup żejjed, huwa possibbli li żżid kwalunkwe tip ta' kontenut HTML bħal intestaturi, paragrafi, jew buttuni fil-minijaturi.

Tikketta miniatura

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.

Buttuna Buttuna

Tikketta miniatura

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.

Buttuna Buttuna

Tikketta miniatura

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.

Buttuna Buttuna

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Ipprovdi messaġġi ta' feedback kuntestwali għal azzjonijiet tipiċi tal-utent b'numru żgħir ta' messaġġi ta' twissija disponibbli u flessibbli.

Eżempji

Kebbeb kwalunkwe test u buttuna ta' tiċħad fakultattiva fi .alertu waħda mill-erba' klassijiet kuntestwali (eż, .alert-success) għal messaġġi ta' twissija bażiċi.

Ebda klassi default

It-twissijiet m'għandhomx klassijiet default, biss klassijiet bażi u modifikaturi. Twissija griża default ma tagħmilx wisq sens, għalhekk int meħtieġ li tispeċifika tip permezz ta' klassi kuntestwali. Agħżel minn suċċess, informazzjoni, twissija jew periklu.

Proset! Inti taqra b'suċċess dan il-messaġġ ta 'twissija importanti.

Irjus up! Din it-twissija teħtieġ l-attenzjoni tiegħek, iżda mhix super importanti.

Twissija! Aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb.

Oh snap! Ibdel ftit affarijiet u erġa' pprova ssottometti.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Twissijiet miċħuda

Ibni fuq kwalunkwe twissija billi żżid .alert-dismissiblebuttuna fakultattiva u tagħlaq.

Jeħtieġ plugin ta' twissija JavaScript

Għal twissijiet li jistgħu jaħdmu bis-sħiħ, trid tuża l- plugin JavaScript ta' twissijiet .

Twissija! Aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Żgura mġiba xierqa fuq l-apparati kollha

Kun żgur li tuża l- <button>element bl- data-dismiss="alert"attribut tad-data.

Links fit-twissijiet

Uża l .alert-link-klassi ta 'utilità biex tipprovdi malajr links ikkuluriti li jaqblu fi kwalunkwe twissija.

Proset! Inti taqra b'suċċess dan il-messaġġ ta' twissija importanti .

Irjus up! Din it- twissija teħtieġ l-attenzjoni tiegħek , iżda mhix importanti ħafna.

Twissija! Aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb .

Oh snap! Ibdel ftit affarijiet u erġa' pprova ssottometti.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Ipprovdi feedback aġġornat dwar il-progress ta' fluss tax-xogħol jew azzjoni b'vireg tal-progress sempliċi iżda flessibbli.

Kompatibilità bejn il-browser

Il-vireg tal-progress jużaw transizzjonijiet u animazzjonijiet CSS3 biex jiksbu xi wħud mill-effetti tagħhom. Dawn il-karatteristiċi mhumiex appoġġjati fl-Internet Explorer 9 u taħt jew verżjonijiet eqdem ta' Firefox. Opera 12 ma jappoġġjax animazzjonijiet.

Kompatibilità tal-Politika tas-Sigurtà tal-Kontenut (CSP).

Jekk il-websajt tiegħek għandha Politika ta' Sigurtà tal-Kontenut (CSP) li ma tippermettix style-src 'unsafe-inline', allura ma tkunx tista' tuża styleattributi inline biex tissettja wisgħat tal-bar tal-progress kif muri fl-eżempji tagħna hawn taħt. Metodi alternattivi għall-iffissar tal-wisgħat li huma kompatibbli ma 'CSPs stretti jinkludu l-użu ta' JavaScript personalizzat ftit (li jistabbilixxi element.style.width) jew l-użu ta 'klassijiet CSS personalizzati.

Eżempju bażiku

Barra tal-progress default.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Bit-tikketta

Neħħi l- klassi <span>with .sr-onlyminn ġewwa l-istrixxa tal-progress biex turi persentaġġ viżibbli.

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Biex tiżgura li t-test tat-tikketta jibqa' leġibbli anke għal perċentwali baxxi, ikkunsidra li żżid a min-widthmal-bar tal-progress.

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Alternattivi kuntestwali

Il-vireg tal-progress jużaw xi wħud mill-istess buttuna u klassijiet ta 'twissija għal stili konsistenti.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Strixxat

Juża gradjent biex joħloq effett strixxat. Mhux disponibbli f'IE9 u taħt.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animati

Żid .activema .progress-bar-stripedbiex janima l-istrixxi mil-lemin għax-xellug. Mhux disponibbli f'IE9 u taħt.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Stacked

Poġġi vireg multipli fl-istess .progressbiex munzellhom.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Stili ta' oġġetti astratti għall-bini ta' diversi tipi ta' komponenti (bħal kummenti tal-blog, Tweets, eċċ) li fihom immaġni allinjata max-xellug jew mal-lemin flimkien ma' kontenut testwali.

Media default

Il-midja default turi oġġett tal-midja (immaġini, vidjow, awdjo) fuq ix-xellug jew il-lemin ta 'blokk tal-kontenut.

Intestatura tal-midja

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

Intestatura tal-midja

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

Intestatura tal-midja nested

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

Intestatura tal-midja

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Intestatura tal-midja

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Il-klassijiet .pull-leftu .pull-rightjeżistu wkoll u qabel kienu użati bħala parti mill-komponent tal-midja, iżda huma deprecati għal dak l-użu minn v3.3.0. Dawn huma bejn wieħed u ieħor ekwivalenti għal .media-leftu .media-right, ħlief li .media-rightgħandhom jitqiegħdu wara l- .media-bodyfil-html.

Allinjament tal-midja

L-immaġini jew midja oħra jistgħu jiġu allinjati fuq, nofs, jew t'isfel. Id-default huwa allinjat fuq nett.

Top midja allinjata

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Midja allinjata tan-nofs

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Midja allinjata tal-qiegħ

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Lista tal-midja

Bi ftit ta 'markup żejjed, tista' tuża l-midja ġewwa l-lista (utli għal ħjut ta 'kummenti jew listi ta' artikoli).

Intestatura tal-midja

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Intestatura tal-midja nested
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Intestatura tal-midja nested
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Intestatura tal-midja nested
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Il-gruppi tal-lista huma komponent flessibbli u b'saħħtu biex juru mhux biss listi sempliċi ta 'elementi, iżda dawk kumplessi b'kontenut personalizzat.

Eżempju bażiku

Il-grupp tal-lista l-aktar bażiku huwa sempliċement lista mhux ordnata b'oġġetti tal-lista, u l-klassijiet xierqa. Ibni fuqha bl-għażliet li jsegwu, jew is-CSS tiegħek kif meħtieġ.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Badges

Żid il-komponent badges ma 'kwalunkwe oġġett tal-grupp tal-lista u awtomatikament jitqiegħed fuq il-lemin.

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Oġġetti marbuta

Ikkonnettja l-oġġetti tal-grupp tal-lista billi tuża tikketti tal-ankri minflok oġġetti tal-lista (li tfisser ukoll ġenitur <div>minflok <ul>). Ebda ħtieġa għal ġenituri individwali madwar kull element.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Oġġetti tal-buttuni

L-oġġetti tal-grupp tal-lista jistgħu jkunu buttuni minflok oġġetti tal-lista (li tfisser ukoll ġenitur <div>minflok <ul>). Ebda ħtieġa għal ġenituri individwali madwar kull element. Tużax il- .btnklassijiet standard hawn.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Oġġetti b'diżabilità

Żid .disabledma' .list-group-itemgriż biex tidher b'diżabilità.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Klassijiet kuntestwali

Uża klassijiet kuntestwali biex tfassal oġġetti tal-lista, default jew marbuta. Jinkludi wkoll l- .activeistat.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Kontenut apposta

Żid kważi kull HTML fi ħdan, anke għal gruppi ta 'lista konnessi bħal dak ta' hawn taħt.

Elenka l-intestatura tal-oġġett tal-grupp

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Elenka l-intestatura tal-oġġett tal-grupp

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Elenka l-intestatura tal-oġġett tal-grupp

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Filwaqt li mhux dejjem meħtieġ, xi kultant ikollok bżonn tpoġġi DOM tiegħek f'kaxxa. Għal dawk is-sitwazzjonijiet, ipprova l-komponent tal-pannell.

Eżempju bażiku

B'mod awtomatiku, kull .panelma tagħmel hu li tapplika xi fruntiera bażika u padding biex ikun fihom xi kontenut.

Eżempju tal-pannell bażiku

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Bord bl-intestatura

Żid faċilment kontenitur tal-intestatura mal-pannell tiegħek b' .panel-heading. Tista' wkoll tinkludi kwalunkwe <h1>- <h6>bi .panel-titleklassi biex iżżid intestatura pre-styled. Madankollu, id-daqsijiet tat-tipa ta' <h1>- <h6>huma sostitwiti minn .panel-heading.

Għal kulur xieraq tal-link, kun żgur li tpoġġi links f'intestaturi fi ħdan .panel-title.

Intestatura tal-panel bla titolu

Kontenut tal-panel

Titolu tal-panel

Kontenut tal-panel

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel b'footer

Kebbeb buttuni jew test sekondarju fi .panel-footer. Innota li l-footers tal-pannelli ma jirtux kuluri u fruntieri meta tuża varjazzjonijiet kuntestwali peress li mhumiex maħsuba biex ikunu fit-tagħrif miksub.

Kontenut tal-panel

Footer tal-panel

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Alternattivi kuntestwali

Bħal komponenti oħra, faċilment tagħmel panel aktar sinifikanti għal kuntest partikolari billi żżid xi waħda mill-klassijiet tal-istat kuntestwali.

Titolu tal-panel

Kontenut tal-panel

Titolu tal-panel

Kontenut tal-panel

Titolu tal-panel

Kontenut tal-panel

Titolu tal-panel

Kontenut tal-panel

Titolu tal-panel

Kontenut tal-panel

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Bit-tabelli

Żid kwalunkwe mhux imdawwar .tablefi ħdan panel għal disinn bla xkiel. Jekk ikun hemm .panel-body, aħna żid fruntiera żejda fil-quċċata tat-tabella għas-separazzjoni.

Intestatura tal-panel

Xi kontenut tal-panel default hawn. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Isem	Kunjom	Isem tal-utent
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry	l-ghasfur	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Jekk ma jkunx hemm korp tal-pannell, il-komponent jiċċaqlaq minn header tal-pannell għal mejda mingħajr interruzzjoni.

Intestatura tal-panel

#	Isem	Kunjom	Isem tal-utent
1	Mark	Otto	@mdo
2	Ġakobb	Thornton	@xaħam
3	Larry	l-ghasfur	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Bil-gruppi tal-lista

Inkludi faċilment gruppi ta 'lista ta ' wisa 'sħiħ fi kwalunkwe panel.

Intestatura tal-panel

Xi kontenut tal-panel default hawn. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Ħalli lill-browsers jiddeterminaw id-dimensjonijiet tal-vidjow jew tal-wiri ta' pjastri bbażati fuq il-wisa' tal-blokka li jkun fihom billi joħolqu proporzjon intrinsiku li se jiskala sew fuq kwalunkwe apparat.

Ir-regoli huma applikati direttament għal <iframe>, <embed>, <video>, u <object>elementi; b'għażla uża klassi dixxendenti espliċita .embed-responsive-itemmeta trid tqabbel l-istil għal attributi oħra.

Pro-Tip! M'għandekx bżonn tinkludi frameborder="0"fl- <iframe>i tiegħek peress li aħna nirrivalqu dak għalik.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Default sew

Uża l-bir bħala effett sempliċi fuq element biex tagħtih effett inset.

Ara, jien fil-bir!

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

Klassijiet fakultattivi

Ikkuttunar ta 'kontroll u kantunieri ttundjati b'żewġ klassijiet ta' modifikaturi fakultattivi.

Ara, jien f'bir kbir!

<div class="well well-lg">...</div>

Ara, ninsab ġo bir żgħir!

<div class="well well-sm">...</div>

Komponenti

Glyphicons

Glifi disponibbli

Kif tuża

Tħallatx ma 'komponenti oħra

Għall-użu biss fuq elementi vojta

Nibdlu l-post tat-tipa tal-ikona

Ikoni aċċessibbli

Eżempji

Dropdowns

Eżempju

Allinjament

Jistgħu jeħtieġu pożizzjonament addizzjonali

.pull-rightAllinjament deprecated

Headers

Diviżur

Oġġetti tal-menu b'diżabilità

Gruppi tal-buttuni

Tooltips u popovers fi gruppi ta' buttuna jeħtieġu setting speċjali

Żgura korretta roleu ipprovdi tikketta

Eżempju bażiku

Toolbar tal-buttuna

Daqs

Ibejtu

Varjazzjoni vertikali

Gruppi ta' buttuna ġustifikati

Immaniġġjar tal-fruntieri

IE8 u fruntieri

B'elementi <a>_

Links li jaġixxu bħala buttuni

B'elementi <button>_

Dropdowns tal-buttuni

Dipendenza tal-plugin

Dropdowns ta' buttuna waħda

Dropdowns tal-buttuna maqsuma

Daqs

Varjazzjoni dropup

Gruppi ta' input

Testwali <input>s biss

Tooltips u popovers fi gruppi ta' input jeħtieġu setting speċjali

Tħallatx ma 'komponenti oħra

Dejjem żid it-tikketti

Eżempju bażiku

Daqs

Checkboxes u addons tar-radju

Addons tal-buttuni

Buttuni bi dropdowns

Buttuni segmentati

Buttuni multipli

Navs

L-użu ta 'navs għal pannelli ta' tab jeħtieġ plugin ta 'tabs JavaScript

Agħmel in-navs użati bħala navigazzjoni aċċessibbli

Tabs

Pilloli

Iġġustifikat

Safari u navs ġustifikati li jirrispondu

Links b'diżabilità

Il-funzjonalità tal-link mhux affettwata

Bl-użu dropdowns

Tabs bi dropdowns

Pilloli bi dropdowns

Navbar

Navbar default

Kontenut li jfur

Jeħtieġ plugin JavaScript

Nibdlu l-breakpoint tal-navbar mobbli

Agħmel in-navbars aċċessibbli

Immaġni tad-ditta

Formoli

Caveats tal-apparat mobbli

Dejjem żid it-tikketti

Buttuni

Użu speċifiku għall-kuntest

Test

Non-nav links

Allinjament tal-komponenti

Dritt tallinja komponenti multipli

Imwaħħla fuq nett

Padding tal-ġisem meħtieġ

Imwaħħla mal-qiegħ

`.pull-right`Allinjament deprecated

Żgura korretta `role`u ipprovdi tikketta

B'elementi `<a>`_

B'elementi `<button>`_

Testwali `<input>`s biss