Glyphicons

Glifi disponibbli

Jinkludi aktar minn 250 glyphs fil-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 ta' teknoloġiji ta' assistenza.

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

Dropdowns

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

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>

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.

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

Dropdowns jitqiegħdu awtomatikament permezz tas-CSS fil-fluss normali tad-dokument. Dan ifisser dropdowns jistgħu jinqatgħu minn ġenituri b'ċerti overflowproprjetajiet jew jidhru barra mill-konfini tal-viewport. Indirizza dawn il-kwistjonijiet waħdek hekk kif jinqalgħu.

.pull-rightAllinjament deprecated

Minn v3.1.0, konna deprecated .pull-rightfuq menus dropdown. Biex tallinja menu lejn il-lemin, uża .dropdown-menu-right. Il-komponenti tan-nav allinjati mal-lemin fin-navbar jużaw verżjoni mixin ta' din il-klassi biex jallinjaw awtomatikament il-menu. Biex tegħlebha, uża .dropdown-menu-left.

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

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

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

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

Gruppi tal-buttuni

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

Kun żgur korretta roleu 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 .btnbi .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>

Toolbar tal-buttuna

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.

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

Dropdowns tal-buttuni

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>

Gruppi ta' input

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.

@

@example.com

$ .00

https://example.com/users/
<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>

Navs

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.

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>

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

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

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>

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

Navbar

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

  1. Naqqas l-ammont jew il-wisa 'tal-oġġetti tan-navbar.
  2. Aħbi ċerti oġġetti tan-navbar f'ċerti daqsijiet tal-iskrin bl -użu ta' klassijiet ta' utilità li jirrispondu .
  3. 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.

Jeħtieġ plugin JavaScript

Jekk JavaScript huwa diżattivat u l-viewport hija dejqa biżżejjed biex in-navbar tiġġarraf, ikun impossibbli li tespandi n-navbar u tara l-kontenut fi ħdan il- .navbar-collapse.

In-navbar li tirreaġixxi teħtieġ li l- plugin tal-kollass jiġi inkluż fil-verżjoni tiegħek ta 'Bootstrap.

Nibdlu l-breakpoint tan-navbar mobbli

In-navbar tiġġarraf fil-veduta mobbli vertikali tagħha meta l-vetrina tkun idjaq minn @grid-float-breakpoint, u tespandi fil-veduta orizzontali mhux mobbli tagħha meta l-veduta tkun mill-inqas @grid-float-breakpointfil-wisa '. Aġġusta din il-varjabbli fis-sors Inqas biex tikkontrolla meta n-navbar tiġġarraf/jespandi. Il-valur default huwa 768px(l-iżgħar skrin "żgħir" jew "tablet").

Agħmel in-navbars aċċessibbli

Kun żgur li tuża <nav>element jew, jekk tuża element aktar ġeneriku bħal <div>, żid a role="navigation"ma' kull navbar biex tidentifikaha b'mod espliċitu bħala reġjun importanti għall-utenti ta' teknoloġiji ta' assistenza.

<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 tal-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ħall-gruppi ta' input, jistgħu jeħtieġu wisa' fissi biex jintwerew sew f'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>

Caveats tal-apparat mobbli

Hemm xi twissijiet dwar l-użu tal-kontrolli tal-formoli fi ħdan elementi fissi fuq apparat mobbli. Ara d-dokumenti tal-appoġġ tal-browser tagħna għad-dettalji.

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>

Użu speċifiku għall-kuntest

Bħall- klassijiet tal-buttuni standard , .navbar-btnjistgħu jintużaw fuq <a>u <input>elementi. Madankollu, la .navbar-btnl-klassijiet tal-buttuni standard u lanqas m'għandhom jintużaw fuq <a>elementi fi ħdan .navbar-nav.

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.

Dritt tallinja komponenti multipli

In-Navbars bħalissa għandhom limitazzjoni bi .navbar-rightklassijiet multipli. Biex nispazjaw sew il-kontenut, nużaw marġni negattiv fuq l-aħħar .navbar-rightelement. Meta jkun hemm elementi multipli li jużaw dik il-klassi, dawn il-marġini ma jaħdmux kif maħsub.

Aħna ser nerġgħu nirrevedu dan meta nkunu nistgħu niktbu mill-ġdid dak il-komponent fil-v4.

Ż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 fissa se tispiċċa 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 jistgħux jiġu kklikkjati 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 pagination 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>

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>

Tikketti

Eżempju

Eżempju ta' intestatura Ġdid

Eżempju ta' intestatura Ġdid

Eżempju ta' intestatura Ġdid

Eżempju ta' intestatura Ġdid

Eżempju ta' intestatura Ġdid
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 .

Badges

Enfasizza faċilment oġġetti ġodda jew mhux moqrija billi żżid <span class="badge">ma' 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>

Jumbotron

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>

Header tal-paġna

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>

Miniatures

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

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

100%x200

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

100%x200

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

100%x200

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>

Twissijiet

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.

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

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

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

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

Vireg tal-progress

Ipprovdi feedback aġġornat dwar il-progress ta 'fluss tax-xogħol jew azzjoni b'vireg ta' 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.

60% Tlesti
<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.

40% Tlesti (suċċess)
20% Tlesti
60% Tlesti (twissija)
80% Tlesti (periklu)
<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.

40% Tlesti (suċċess)
20% Tlesti
60% Tlesti (twissija)
80% Tlesti (periklu)
<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.

45% Tlesti
<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.

35% Tlesti (suċċess)
20% Tlesti (twissija)
10% Tlesti (periklu)
<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>

Oġġett tal-midja

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. In-nuqqas 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>

Lista tal-grupp

Il-gruppi tal-lista huma komponent flessibbli u b'saħħtu biex jintwerew 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.

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

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

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

Pannelli

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>

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
<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 jkun hemm l-ebda 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>

Inkorporat li jirrispondu

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

Bjar

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>