Glyphicons

Glyffau sydd ar gael

Yn cynnwys dros 250 o glyffau mewn fformat ffont o set Glyphicon Halflings. Fel arfer nid yw Glyphicons Halflings ar gael am ddim, ond mae eu crëwr wedi sicrhau eu bod ar gael ar gyfer Bootstrap yn rhad ac am ddim. Fel diolch, rydym ond yn gofyn i chi gynnwys dolen yn ôl i Glyphicons pryd bynnag y bo modd.

  • glyphicon glyphicon-sterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-ewro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minws
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-amlen
  • glyphicon glyphicon-pensil
  • glyphicon glyphicon-gwydr
  • glyphicon glyphicon-cerddoriaeth
  • glyphicon glyphicon-search
  • glyphicon glyphicon-galon
  • glyphicon seren glyphicon
  • glyphicon glyphicon-seren-gwag
  • glyphicon defnyddiwr glyphicon
  • glyphicon glyphicon-ffilm
  • glyphicon glyphicon-th-mawr
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-iawn
  • glyphicon glyphicon-tynnu
  • glyphicon glyphicon-chwyddo i mewn
  • glyphicon glyphicon-chwyddo allan
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-sbwriel
  • glyphicon glyphicon-cartref
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-lawrlwytho
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-mewnflwch
  • glyphicon glyphicon-chwarae-cylch
  • glyphicon glyphicon-ailadrodd
  • glyphicon glyphicon-adnewyddu
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-clo
  • glyphicon glyphicon-flag
  • glyphicon clustffonau glyphicon
  • glyphicon glyphicon-cyfrol-off
  • glyphicon glyphicon-cyfrol-i lawr
  • glyphicon glyphicon-cyfrol i fyny
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-cod bar
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon nod tudalen glyphicon
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italig
  • glyphicon glyphicon-testun-uchder
  • glyphicon glyphicon-testun-led
  • glyphicon glyphicon-align-chwith
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-alinio-cyfiawnhau
  • glyphicon glyphicon-list
  • glyphicon glyphicon-mewndent-chwith
  • glyphicon glyphicon-mewndent-dde
  • glyphicon glyphicon-facetime-fideo
  • glyphicon glyphicon-llun
  • glyphicon glyphicon-map-marciwr
  • glyphicon glyphicon-addasu
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-golygu
  • glyphicon glyphicon-rhannu
  • glyphicon glyphicon-check
  • glyphicon glyphicon-symud
  • glyphicon glyphicon-cam yn ôl
  • glyphicon glyphicon-cyflym-yn-ôl
  • glyphicon glyphicon-yn ôl
  • glyphicon glyphicon-chwarae
  • glyphicon glyphicon-saib
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-ymlaen
  • glyphicon glyphicon-cyflym-ymlaen
  • glyphicon glyphicon-cam ymlaen
  • glyphicon glyphicon-dafliad
  • glyphicon glyphicon-chevron-chwith
  • glyphicon glyphicon-chevron-dde
  • glyphicon glyphicon-plus-arwydd
  • glyphicon glyphicon-minws-arwydd
  • glyphicon glyphicon-tynnu-arwydd
  • glyphicon glyphicon-iawn-arwydd
  • glyphicon glyphicon-arwydd cwestiwn
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-tynnu-cylch
  • glyphicon glyphicon-ok-cylch
  • glyphicon glyphicon-ban-cylch
  • glyphicon glyphicon-saeth-chwith
  • glyphicon glyphicon-saeth-dde
  • glyphicon glyphicon-saeth-fyny
  • glyphicon glyphicon-saeth-lawr
  • glyphicon glyphicon-rhannu-alt
  • glyphicon glyphicon-newid maint-llawn
  • glyphicon glyphicon-newid maint-bach
  • glyphicon glyphicon-ebychnod-arwydd
  • glyphicon glyphicon-rhodd
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-tân
  • glyphicon glyphicon-llygad-agored
  • glyphicon glyphicon-llygad-agos
  • glyphicon arwydd rhybudd-glyphicon
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendr
  • glyphicon glyphicon-hap
  • glyphicon glyphicon-sylw
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-aildrydar
  • glyphicon glyphicon-siopa-cert
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-agored
  • glyphicon glyphicon-newid maint-fertigol
  • glyphicon glyphicon-newid maint-llorweddol
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-tystysgrif
  • glyphicon glyphicon-bawd i fyny
  • glyphicon glyphicon-bawd i lawr
  • glyphicon glyphicon-llaw-dde
  • glyphicon glyphicon-llaw-chwith
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-llaw-lawr
  • glyphicon glyphicon-cylch-saeth-dde
  • glyphicon glyphicon-cylch-saeth-chwith
  • glyphicon glyphicon-cylch-saeth-fyny
  • glyphicon glyphicon-cylch-saeth-lawr
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasgau
  • glyphicon glyphicon-hidlen
  • glyphicon glyphicon-case
  • glyphicon glyphicon-sgrîn lawn
  • glyphicon glyphicon-dangosfwrdd
  • glyphicon glyphicon-clip papur
  • glyphicon glyphicon-galon-gwag
  • glyphicon glyphicon-cyswllt
  • glyphicon glyphicon-ffôn
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-yn-wyddor
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by- order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-prionweddau
  • glyphicon glyphicon-trefnu-wrth-briodoleddau-alt
  • glyphicon glyphicon heb ei wirio
  • glyphicon glyphicon-ehangu
  • glyphicon glyphicon-cwymp-lawr
  • glyphicon glyphicon-cwymp
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-fflach
  • glyphicon glyphicon-allgofnodi
  • glyphicon glyphicon-ffenestr newydd
  • glyphicon glyphicon-record
  • glyphicon glyphicon-arbed
  • glyphicon glyphicon-agored
  • glyphicon glyphicon-arbed
  • glyphicon glyphicon-mewnforio
  • glyphicon glyphicon-allforio
  • glyphicon glyphicon-anfon
  • glyphicon glyphicon-disg hyblyg
  • glyphicon glyphicon-llipa-arbed
  • glyphicon glyphicon-floppy-tynnu
  • glyphicon glyphicon-llipa-arbed
  • glyphicon glyphicon-llipa-agored
  • glyphicon glyphicon-cerdyn credyd
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cyllyll a ffyrc
  • glyphicon glyphicon-header
  • glyphicon glyphicon-cywasgedig
  • glyphicon glyphicon-phone earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-twr
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-fideo
  • glyphicon glyphicon-hd-fideo
  • glyphicon glyphicon-is-deitlau
  • glyphicon glyphicon-sain-stereo
  • glyphicon glyphicon-sain-dolby
  • glyphicon glyphicon-sain-5-1
  • glyphicon glyphicon-sain-6-1
  • glyphicon glyphicon-sain-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-cofrestru-marc
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conwydd
  • glyphicon glyphicon-coed collddail
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-lefel i fyny
  • glyphicon glyphicon-copi
  • glyphicon glyphicon-past
  • glyphicon glyphicon-rhybudd
  • glyphicon glyphicon-cyfartal
  • glyphicon glyphicon-brenin
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-gwystl
  • glyphicon glyphicon-esgob
  • glyphicon glyphicon-marchog
  • glyphicon glyphicon-fformiwla babi
  • glyphicon glyphicon-pabell
  • glyphicon glyphicon-bwrdd du
  • glyphicon gwely glyphicon
  • glyphicon glyphicon-afal
  • glyphicon glyphicon-dileu
  • glyphicon glyphicon-awrwydr
  • glyphicon glyphicon-lamp
  • glyphicon glyphicon-dyblyg
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-siswrn
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-rwbl
  • glyphicon glyphicon-rhwb
  • glyphicon graddfa glyphicon
  • glyphicon glyphicon-iâ loli
  • glyphicon glyphicon-iâ loli-blasu
  • glyphicon glyphicon-addysg
  • glyphicon glyphicon-opsiwn-llorweddol
  • glyphicon glyphicon-opsiwn-fertigol
  • glyphicon glyphicon-bwydlen-hamburger
  • glyphicon glyphicon-modal-ffenestr
  • glyphicon glyphicon-olew
  • glyphicon glyphicon-grawn
  • glyphicon glyphicon-sbectol haul
  • glyphicon glyphicon-testun-maint
  • glyphicon glyphicon-testun-liw
  • glyphicon glyphicon-testun-cefndir
  • glyphicon glyphicon-gwrthrych-alinio-top
  • glyphicon glyphicon-gwrthrych-alinio-gwaelod
  • glyphicon glyphicon-gwrthrych-alinio-llorweddol
  • glyphicon glyphicon-gwrthrych-alinio-chwith
  • glyphicon glyphicon-gwrthrych-alinio-fertigol
  • glyphicon glyphicon-gwrthrych-alinio-dde
  • glyphicon glyphicon-triongl-dde
  • glyphicon glyphicon-triongl-chwith
  • glyphicon glyphicon-triongl-gwaelod
  • glyphicon glyphicon-triongl-top
  • glyphicon glyphicon-console
  • glyphicon glyphicon-uwchysgrif
  • glyphicon glyphicon-tanysgrif
  • glyphicon glyphicon-menu-chwith
  • glyphicon glyphicon-dewislen-dde
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

Sut i ddefnyddio

Am resymau perfformiad, mae angen dosbarth sylfaen a dosbarth eicon unigol ar bob eicon. I'w ddefnyddio, rhowch y cod canlynol bron yn unrhyw le. Gwnewch yn siŵr eich bod yn gadael bwlch rhwng yr eicon a'r testun ar gyfer padin cywir.

Peidiwch â chymysgu â chydrannau eraill

Ni ellir cyfuno dosbarthiadau eicon yn uniongyrchol â chydrannau eraill. Ni ddylid eu defnyddio ynghyd â dosbarthiadau eraill ar yr un elfen. Yn lle hynny, ychwanegwch nyth <span>a chymhwyso'r dosbarthiadau eicon i'r <span>.

Dim ond i'w ddefnyddio ar elfennau gwag

Dim ond ar elfennau nad ydynt yn cynnwys testun ac nad oes ganddynt elfennau plentyn y dylid defnyddio dosbarthiadau eicon.

Newid lleoliad ffont yr eicon

Mae Bootstrap yn tybio y bydd ffeiliau ffont eicon yn cael eu lleoli yn y ../fonts/cyfeiriadur, o'u cymharu â'r ffeiliau CSS a luniwyd. Mae symud neu ailenwi'r ffeiliau ffont hynny yn golygu diweddaru'r CSS mewn un o dair ffordd:

  • Newid y @icon-font-patha/neu @icon-font-namenewidynnau yn y ffynhonnell Llai o ffeiliau.
  • Defnyddiwch yr opsiwn URLs perthynol a ddarperir gan y casglwr Llai.
  • Newidiwch y url()llwybrau yn y CSS a luniwyd.

Defnyddiwch ba bynnag opsiwn sy'n gweddu orau i'ch gosodiad datblygu penodol.

Eiconau hygyrch

Bydd fersiynau modern o dechnolegau cynorthwyol yn cyhoeddi cynnwys a gynhyrchir gan CSS, yn ogystal â nodau Unicode penodol. Er mwyn osgoi allbwn anfwriadol a dryslyd mewn darllenwyr sgrin (yn enwedig pan ddefnyddir eiconau ar gyfer addurno yn unig), rydym yn eu cuddio â'r aria-hidden="true"priodoledd.

Os ydych chi'n defnyddio eicon i gyfleu ystyr (yn hytrach nag fel elfen addurniadol yn unig), sicrhewch fod yr ystyr hwn hefyd yn cael ei gyfleu i dechnolegau cynorthwyol - er enghraifft, cynnwys cynnwys ychwanegol, wedi'i guddio'n weledol gyda'r .sr-onlydosbarth.

Os ydych chi'n creu rheolyddion heb unrhyw destun arall (fel <button>sy'n cynnwys eicon yn unig), dylech bob amser ddarparu cynnwys amgen i nodi pwrpas y rheolaeth, fel y bydd yn gwneud synnwyr i ddefnyddwyr technolegau cynorthwyol. Yn yr achos hwn, fe allech chi ychwanegu aria-labelpriodoledd ar y rheolaeth ei hun.

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

Enghreifftiau

Defnyddiwch nhw mewn botymau, grwpiau botwm ar gyfer bar offer, llywio, neu fewnbynnau ffurf wedi'u rhagpendodi.

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

Eicon a ddefnyddir mewn rhybudd i gyfleu ei fod yn neges gwall, gyda .sr-onlythestun ychwanegol i gyfleu'r awgrym hwn i ddefnyddwyr technolegau cynorthwyol.

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

Cwympiadau

Dewislen gyd-destunol y gellir ei thoglo ar gyfer dangos rhestrau o ddolenni. Wedi'i wneud yn rhyngweithiol gyda'r ategyn JavaScript cwympo .

Lapiwch sbardun y gwymplen a'r gwymplen o fewn .dropdown, neu elfen arall sy'n datgan position: relative;. Yna ychwanegwch HTML y ddewislen.

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

Gellir newid dewislenni cwymplen i ehangu i fyny (yn hytrach nag i lawr) trwy ychwanegu .dropupat y rhiant.

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

Yn ddiofyn, mae cwymplen yn cael ei gosod yn awtomatig 100% o'r brig ac ar hyd ochr chwith ei riant. Ychwanegu .dropdown-menu-rightat a .dropdown-menui'r dde alinio'r ddewislen.

Efallai y bydd angen lleoliad ychwanegol

Mae cwymplenni yn cael eu gosod yn awtomatig trwy CSS o fewn llif arferol y ddogfen. Mae hyn yn golygu y gall cwymplenni gael eu torri gan rieni sydd â rhai overfloweiddo neu ymddangos y tu allan i ffiniau'r olygfan. Ymdrin â'r materion hyn ar eich pen eich hun wrth iddynt godi.

Yn anghymeradwy.pull-right anghymeradwy

O v3.1.0, rydym wedi .pull-rightanghymeradwyo ar gwymplenni. I alinio dewislen i'r dde, defnyddiwch .dropdown-menu-right. Mae cydrannau llywio â'r dde yn y bar llywio yn defnyddio fersiwn mixin o'r dosbarth hwn i alinio'r ddewislen yn awtomatig. I'w ddiystyru, defnyddiwch .dropdown-menu-left.

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

Ychwanegwch bennyn i labelu adrannau o gamau gweithredu mewn unrhyw gwymplen.

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

Ychwanegu rhannwr at gyfres ar wahân o ddolenni mewn cwymplen.

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

Ychwanegu .disabledat <li>yn y gwymplen i analluogi'r ddolen.

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

Grwpiau botwm

Grwpiwch gyfres o fotymau gyda'i gilydd ar un llinell gyda'r grŵp botymau. Ychwanegu ar radio JavaScript dewisol ac ymddygiad arddull blwch ticio gyda'n ategyn botymau .

Mae angen gosodiadau arbennig ar awgrymiadau offer a popovers mewn grwpiau botwm

Wrth ddefnyddio cynghorion offer neu bopovers ar elfennau o fewn .btn-group, bydd yn rhaid i chi nodi'r opsiwn container: 'body'i osgoi sgîl-effeithiau diangen (fel yr elfen yn tyfu'n ehangach a / neu'n colli ei gorneli crwn pan fydd y cyngor offer neu'r popover yn cael ei sbarduno).

Sicrhewch fod yn gywir rolea rhowch label

Er mwyn i dechnolegau cynorthwyol - megis darllenwyr sgrin - gyfleu bod cyfres o fotymau wedi'u grwpio, mae roleangen darparu priodoledd priodol. Ar gyfer grwpiau botwm, byddai hyn yn role="group", tra dylai bariau offer gael role="toolbar".

Un eithriad yw grwpiau sydd ond yn cynnwys un rheolydd (er enghraifft y grwpiau botwm wedi'u cyfiawnhau gydag <button>elfennau) neu gwymplen.

Yn ogystal, dylid rhoi label clir i grwpiau a bariau offer, gan na fydd y rhan fwyaf o dechnolegau cynorthwyol yn eu cyhoeddi fel arall, er gwaethaf presenoldeb y rolenodwedd gywir. Yn yr enghreifftiau a ddarperir yma, rydym yn defnyddio , ond gellir defnyddio aria-labeldewisiadau eraill megis hefyd.aria-labelledby

Enghraifft sylfaenol

Lapiwch gyfres o fotymau gyda .btnmewn .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>

Bar offer botwm

Cyfuno setiau o <div class="btn-group">i <div class="btn-toolbar">gydrannau mwy cymhleth.

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

Maintioli

Yn hytrach na chymhwyso dosbarthiadau maint botwm i bob botwm mewn grŵp, ychwanegwch .btn-group-*at bob .btn-group, gan gynnwys wrth nythu grwpiau lluosog.




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

Nythu

Rhowch un .btn-groupo fewn un arall .btn-grouppan fyddwch chi eisiau dewislenni wedi'u cymysgu â chyfres o fotymau.

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

Amrywiad fertigol

Gwnewch i set o fotymau ymddangos wedi'u pentyrru'n fertigol yn hytrach nag yn llorweddol. Ni chefnogir cwymplenni botwm hollti yma.

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

Grwpiau botwm wedi'u cyfiawnhau

Gwnewch i grŵp o fotymau ymestyn yr un maint i rychwantu lled cyfan ei riant. Hefyd yn gweithio gyda dropdowns botwm o fewn y grŵp botwm.

Trin ffiniau

Oherwydd yr HTML a CSS penodol a ddefnyddir i gyfiawnhau botymau (sef display: table-cell), mae'r ffiniau rhyngddynt yn cael eu dyblu. Mewn grwpiau botwm rheolaidd, margin-left: -1pxfe'i defnyddir i bentyrru'r ffiniau yn hytrach na'u tynnu. Fodd bynnag, marginnid yw'n gweithio gyda display: table-cell. O ganlyniad, yn dibynnu ar eich addasiadau i Bootstrap, efallai y byddwch am dynnu neu ail-liwio'r ffiniau.

IE8 a ffiniau

Nid yw Internet Explorer 8 yn gwneud borderi ar fotymau mewn grŵp botwm y gellir ei gyfiawnhau, boed hynny ymlaen <a>neu <button>elfennau. I fynd o gwmpas hynny, lapiwch bob botwm mewn un arall.btn-group .

Gweler #12476 am ragor o wybodaeth.

Gydag <a>elfennau

Lapiwch gyfres o .btns i mewn .btn-group.btn-group-justified.

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

Dolenni yn gweithredu fel botymau

Os <a>defnyddir yr elfennau i weithredu fel botymau – gan sbarduno ymarferoldeb o fewn y dudalen, yn hytrach na llywio i ddogfen neu adran arall o fewn y dudalen gyfredol – dylid rhoi ffon briodol iddynt hefyd role="button".

Gydag <button>elfennau

I ddefnyddio grwpiau botwm wedi'u cyfiawnhau gydag <button>elfennau, rhaid i chi lapio pob botwm mewn grŵp botymau . Nid yw'r rhan fwyaf o borwyr yn cymhwyso ein CSS yn gywir i gyfiawnhau <button>elfennau, ond gan ein bod yn cefnogi cwymplenni botymau, gallwn weithio o gwmpas hynny.

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

Cwympiadau botwm

Defnyddiwch unrhyw fotwm i sbarduno cwymplen trwy ei osod o fewn a .btn-groupa darparu'r marc dewislen cywir.

Dibyniaeth ategyn

Mae cwymplenni botwm yn ei gwneud yn ofynnol i'r ategyn cwymplen gael ei gynnwys yn eich fersiwn chi o Bootstrap.

Cwympiadau botwm sengl

Trowch fotwm yn dogl cwymplen gyda rhai newidiadau marcio sylfaenol.

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

Hollti botymau botwm

Yn yr un modd, creu cwymplenni botwm hollti gyda'r un newidiadau marcio, dim ond gyda botwm ar wahân.

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

Maintioli

Mae cwymplenni botwm yn gweithio gyda botymau o bob maint.

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

Amrywiad dropup

Sbardun cwymplenni uwchben elfennau trwy ychwanegu .dropupat y rhiant.

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

Grwpiau mewnbwn

Ymestyn rheolaethau ffurf trwy ychwanegu testun neu fotymau cyn, ar ôl, neu ar y ddwy ochr i unrhyw <input>. Defnyddiwch .input-groupgyda .input-group-addonneu .input-group-btni ragpendynnu neu atodi elfennau i sengl .form-control.

Testun <input>yn unig

Ceisiwch osgoi defnyddio <select>elfennau yma gan na ellir eu steilio'n llawn ym mhorwyr WebKit.

Ceisiwch osgoi defnyddio <textarea>elfennau yma gan na fydd eu rowspriodoledd yn cael ei barchu mewn rhai achosion.

Mae angen gosodiadau arbennig ar awgrymiadau offer a popovers mewn grwpiau mewnbwn

Wrth ddefnyddio cynghorion offer neu bopovers ar elfennau o fewn .input-group, bydd yn rhaid i chi nodi'r opsiwn container: 'body'i osgoi sgîl-effeithiau diangen (fel yr elfen yn tyfu'n ehangach a / neu'n colli ei gorneli crwn pan fydd y cyngor offer neu'r popover yn cael ei sbarduno).

Peidiwch â chymysgu â chydrannau eraill

Peidiwch â chymysgu grwpiau ffurf neu ddosbarthiadau colofn grid yn uniongyrchol â grwpiau mewnbwn. Yn lle hynny, nythu'r grŵp mewnbwn y tu mewn i'r grŵp ffurflen neu'r elfen sy'n gysylltiedig â'r grid.

Ychwanegwch labeli bob amser

Bydd darllenwyr sgrin yn cael trafferth gyda'ch ffurflenni os na fyddwch chi'n cynnwys label ar gyfer pob mewnbwn. Ar gyfer y grwpiau mewnbwn hyn, sicrhewch fod unrhyw label neu ymarferoldeb ychwanegol yn cael ei gyfleu i dechnolegau cynorthwyol.

Bydd yr union dechneg i'w defnyddio (elfennau gweladwy <label>, <label>elfennau wedi'u cuddio gan ddefnyddio'r .sr-onlydosbarth, neu ddefnydd o'r aria-label, aria-labelledby, , aria-describedby, titleneu placeholderbriodoledd) a pha wybodaeth ychwanegol y bydd angen ei chyfleu yn amrywio yn dibynnu ar yr union fath o declyn rhyngwyneb rydych chi'n ei weithredu. Mae'r enghreifftiau yn yr adran hon yn cynnig ychydig o ymagweddau achos-benodol a awgrymir.

Enghraifft sylfaenol

Rhowch un ychwanegyn neu fotwm ar y naill ochr a'r llall i fewnbwn. Gallwch hefyd osod un ar ddwy ochr mewnbwn.

Nid ydym yn cefnogi ychwanegion lluosog ( .input-group-addonneu .input-group-btn) ar un ochr.

Nid ydym yn cefnogi rheolaethau ffurf lluosog mewn un grŵp mewnbwn.

@

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

Maintioli

Ychwanegu'r dosbarthiadau maint ffurf cymharol at .input-groupei hun a bydd y cynnwys y tu mewn yn newid maint yn awtomatig - dim angen ailadrodd y dosbarthiadau maint rheoli ffurf ar bob elfen.

@

@

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

Blychau ticio ac ategion radio

Rhowch unrhyw flwch ticio neu opsiwn radio o fewn ategyn grŵp mewnbwn yn lle testun.

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

Mae botymau mewn grwpiau mewnbwn ychydig yn wahanol ac angen un lefel ychwanegol o nythu. Yn lle .input-group-addon, bydd angen i chi ei ddefnyddio .input-group-btni lapio'r botymau. Mae hyn yn ofynnol oherwydd arddulliau porwr rhagosodedig na ellir eu diystyru.

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

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

Botymau segmentiedig

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

Botymau lluosog

Er mai dim ond un ychwanegiad y gallwch ei gael ar bob ochr, gallwch gael botymau lluosog y tu mewn i un ffeil .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

Mae'r Navs sydd ar gael yn Bootstrap wedi rhannu marcio, gan ddechrau gyda'r dosbarth sylfaen .nav, yn ogystal â gwladwriaethau a rennir. Cyfnewid dosbarthiadau addaswyr i newid rhwng pob arddull.

Mae angen ategyn tabiau JavaScript i ddefnyddio navs ar gyfer paneli tab

Ar gyfer tabiau ag ardaloedd tabladwy, rhaid i chi ddefnyddio'r ategyn tabiau JavaScript . Bydd angen rolepriodoleddau ychwanegol ac ARIA ar gyfer y marcio hefyd - gweler marcio enghreifftiol yr ategyn am ragor o fanylion.

Gwneud llywio a ddefnyddir fel llywio yn hygyrch

Os ydych yn defnyddio navs i ddarparu bar llywio, gwnewch yn siŵr eich bod yn ychwanegu role="navigation"at gynhwysydd rhiant mwyaf rhesymegol y <ul>, neu lapio <nav>elfen o amgylch y llywio cyfan. Peidiwch ag ychwanegu'r rôl at y rôl <ul>ei hun, gan y byddai hyn yn ei hatal rhag cael ei chyhoeddi fel rhestr wirioneddol gan dechnolegau cynorthwyol.

Sylwch fod .nav-tabsangen y .navdosbarth sylfaenol ar y dosbarth.

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

Cymerwch yr un HTML, ond defnyddiwch .nav-pillsyn lle hynny:

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

Mae pils hefyd yn fertigol y gellir eu stacio. Dim ond ychwanegu .nav-stacked.

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

Gwnewch yn hawdd tabiau neu dabledi lled cyfartal i'w rhiant ar sgriniau lletach na 768px gyda .nav-justified. Ar sgriniau llai, mae'r dolenni nav yn cael eu pentyrru.

Ar hyn o bryd ni chefnogir dolenni navbar nav wedi'u cyfiawnhau.

Safari a llywio ymatebol y gellir ei gyfiawnhau

O v9.1.2, mae Safari yn arddangos nam lle mae newid maint eich porwr yn llorweddol yn achosi gwallau rendro yn y llywio â chyfiawnhad sy'n cael eu clirio wrth adnewyddu. Dangosir y byg hwn hefyd yn yr enghraifft llywio â chyfiawnhad .

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

Ar gyfer unrhyw gydran nav (tabiau neu dabledi), ychwanegwch .disabledar gyfer dolenni llwyd a dim effeithiau hofran .

Nid yw ymarferoldeb cyswllt wedi'i effeithio

Ni fydd y dosbarth hwn ond yn newid <a>ymddangosiad y ', nid ei ymarferoldeb. Defnyddiwch JavaScript personol i analluogi dolenni yma.

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

Ychwanegwch gwymplenni gydag ychydig o HTML ychwanegol a'r ategyn JavaScript cwymplenni .

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

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

Mae Navbars yn gydrannau meta ymatebol sy'n gweithredu fel penawdau llywio ar gyfer eich cais neu wefan. Maent yn dechrau cwympo (a gellir eu toglo) mewn golygfeydd symudol ac yn troi'n llorweddol wrth i led yr olygfan sydd ar gael gynyddu.

Ar hyn o bryd ni chefnogir dolenni navbar nav wedi'u cyfiawnhau.

Cynnwys gorlifo

Gan nad yw Bootstrap yn gwybod faint o le sydd ei angen ar y cynnwys yn eich bar llywio, efallai y byddwch chi'n wynebu problemau gyda chynnwys yn lapio mewn ail res. I ddatrys hyn, gallwch:

  1. Lleihau maint neu led yr eitemau bar llywio.
  2. Cuddio rhai eitemau bar llywio ar feintiau sgrin arbennig gan ddefnyddio dosbarthiadau cyfleustodau ymatebol .
  3. Newidiwch y pwynt lle mae eich bar llywio yn newid rhwng modd cwympo a llorweddol. Addaswch y @grid-float-breakpointnewidyn neu ychwanegwch eich ymholiad cyfryngau eich hun.

Angen ategyn JavaScript

Os yw JavaScript wedi'i analluogi a'r porth gwylio yn ddigon cul i'r bar llywio gwympo, bydd yn amhosibl ehangu'r bar llywio a gweld y cynnwys o fewn y .navbar-collapse.

Mae'r bar llywio ymatebol yn ei gwneud yn ofynnol i'r ategyn cwympo gael ei gynnwys yn eich fersiwn chi o Bootstrap.

Newid torbwynt y bar llywio symudol sydd wedi cwympo

Mae'r navbar yn cwympo i'w olwg symudol fertigol pan fo'r porth gwylio'n gulach na @grid-float-breakpoint, ac yn ehangu i'w olwg llorweddol ansymudol pan fo'r olygfan o leiaf o @grid-float-breakpointled. Addaswch y newidyn hwn yn y ffynhonnell Llai i reoli pan fydd y bar llywio yn cwympo/ehangu. Y gwerth diofyn yw 768px(y sgrin "bach" neu "tabled" lleiaf).

Gwneud barrau llywio yn hygyrch

Gwnewch yn siŵr eich bod chi'n defnyddio <nav>elfen neu, os ydych chi'n defnyddio elfen fwy generig fel <div>, ychwanegu a role="navigation"at bob navbar i'w nodi'n benodol fel rhanbarth tirnod ar gyfer defnyddwyr technolegau cynorthwyol.

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

Amnewidiwch y brand navbar gyda'ch delwedd eich hun trwy gyfnewid y testun am <img>. Gan fod .navbar-brandganddo ei badin a'i uchder ei hun, efallai y bydd angen i chi ddiystyru rhywfaint o CSS yn dibynnu ar eich delwedd.

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

Rhowch gynnwys y ffurf y tu mewn .navbar-formi'r aliniad fertigol cywir ac ymddygiad cwympo mewn mannau gwylio cul. Defnyddiwch yr opsiynau alinio i benderfynu ble mae'n byw o fewn cynnwys y bar llywio.

Fel pen i fyny, yn .navbar-formrhannu llawer o'i god gyda .form-inlinevia mixin. Efallai y bydd rhai rheolyddion ffurf, fel grwpiau mewnbwn, yn gofyn am ddangos lledau sefydlog yn iawn o fewn bar llywio.

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

Cafeatau dyfeisiau symudol

Mae rhai cafeatau ynghylch defnyddio rheolyddion ffurflen o fewn elfennau sefydlog ar ddyfeisiau symudol. Gweler ein dogfennau cymorth porwr am fanylion.

Ychwanegwch labeli bob amser

Bydd darllenwyr sgrin yn cael trafferth gyda'ch ffurflenni os na fyddwch chi'n cynnwys label ar gyfer pob mewnbwn. Ar gyfer y ffurflenni mewnol hyn, gallwch guddio'r labeli gan ddefnyddio'r .sr-onlydosbarth. Mae yna ddulliau amgen pellach o ddarparu label ar gyfer technolegau cynorthwyol, megis y aria-label, aria-labelledbyneu titlebriodoledd. Os nad oes un o'r rhain yn bresennol, gall darllenwyr sgrin droi at ddefnyddio'r placeholdernodwedd, os yw'n bresennol, ond sylwer placeholderna chynghorir defnyddio yn lle dulliau labelu eraill.

Ychwanegwch y .navbar-btndosbarth at <button>elfennau nad ydynt yn byw yn a <form>i'w canoli'n fertigol yn y bar llywio.

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

Defnydd cyd-destun penodol

Fel y dosbarthiadau botwm safonol , .navbar-btngellir eu defnyddio ar <a>ac <input>elfennau. Fodd bynnag, ni .navbar-btnddylid defnyddio'r dosbarthiadau botwm safonol ar <a>elfennau o fewn .navbar-nav.

Lapiwch linynnau testun mewn elfen gyda .navbar-text, fel arfer ar <p>dag ar gyfer arwain a lliw cywir.

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

Ar gyfer pobl sy'n defnyddio dolenni safonol nad ydynt o fewn yr elfen llywio bar llywio arferol, defnyddiwch y .navbar-linkdosbarth i ychwanegu'r lliwiau cywir ar gyfer yr opsiynau bar llywio rhagosodedig a gwrthdro.

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

.navbar-leftAlinio dolenni nav, ffurflenni, botymau, neu destun, gan .navbar-rightddefnyddio'r dosbarthiadau cyfleustodau. Bydd y ddau ddosbarth yn ychwanegu fflôt CSS i'r cyfeiriad penodedig. Er enghraifft, i alinio dolenni llywio, rhowch nhw mewn ar wahân <ul>gyda'r dosbarth cyfleustodau priodol wedi'i gymhwyso.

Mae'r dosbarthiadau hyn yn fersiynau cymysg o .pull-lefta .pull-right, ond maent wedi'u cwmpasu i ymholiadau gan y cyfryngau er mwyn trin cydrannau bar llywio yn haws ar draws meintiau dyfeisiau.

Alinio cydrannau lluosog i'r dde

Ar hyn o bryd mae gan Navbars gyfyngiad gyda .navbar-rightdosbarthiadau lluosog. I ofod cynnwys yn iawn, rydym yn defnyddio ymyl negyddol ar yr .navbar-rightelfen olaf. Pan fydd sawl elfen yn defnyddio'r dosbarth hwnnw, nid yw'r ymylon hyn yn gweithio yn ôl y bwriad.

Byddwn yn ailedrych ar hyn pan allwn ailysgrifennu'r gydran honno yn v4.

Ychwanegu .navbar-fixed-topa chynnwys .containerneu .container-fluidi gynnwys bar llywio'r ganolfan a'r pad.

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

Mae angen padin corff

Bydd y bar llywio sefydlog yn troshaenu'ch cynnwys arall, oni bai eich bod yn ychwanegu paddingat frig y <body>. Rhowch gynnig ar eich gwerthoedd eich hun neu defnyddiwch ein pyt isod. Awgrym: Yn ddiofyn, mae'r bar llywio yn 50px o uchder.

body { padding-top: 70px; }

Gwnewch yn siŵr eich bod yn cynnwys hyn ar ôl y Bootstrap CSS craidd.

Ychwanegu .navbar-fixed-bottoma chynnwys .containerneu .container-fluidi gynnwys bar llywio'r ganolfan a'r pad.

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

Mae angen padin corff

Bydd y bar llywio sefydlog yn troshaenu'ch cynnwys arall, oni bai eich bod yn ychwanegu paddingat waelod y <body>. Rhowch gynnig ar eich gwerthoedd eich hun neu defnyddiwch ein pyt isod. Awgrym: Yn ddiofyn, mae'r bar llywio yn 50px o uchder.

body { padding-bottom: 70px; }

Gwnewch yn siŵr eich bod yn cynnwys hyn ar ôl y Bootstrap CSS craidd.

Creu bar llywio lled llawn sy'n sgrolio i ffwrdd gyda'r dudalen trwy ychwanegu .navbar-static-topa chynnwys .containerneu .container-fluidi gynnwys bar llywio canol a phad.

Yn wahanol i'r .navbar-fixed-*dosbarthiadau, nid oes angen i chi newid unrhyw badin ar y body.

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

Addaswch olwg y bar llywio trwy ychwanegu .navbar-inverse.

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

Briwsion bara

Nodwch leoliad y dudalen gyfredol o fewn hierarchaeth llywio.

Mae gwahanyddion yn cael eu hychwanegu'n awtomatig yn CSS trwy :beforea content.

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

Tudaleniad

Darparwch ddolenni tudalen ar gyfer eich gwefan neu ap gyda'r gydran dudalenu aml-dudalen, neu'r dewis arall symlach ar gyfer galwr .

Tudaleniad diofyn

Tudaleniad syml wedi'i ysbrydoli gan Rdio, gwych ar gyfer apiau a chanlyniadau chwilio. Mae'r bloc mawr yn anodd ei golli, yn hawdd ei raddio, ac mae'n darparu ardaloedd clicio mawr.

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

Labelu'r gydran dudaleniad

Dylai'r gydran tudaleniad gael ei lapio mewn <nav>elfen i'w nodi fel adran lywio i ddarllenwyr sgrin a thechnolegau cynorthwyol eraill. Yn ogystal, gan fod tudalen yn debygol o fod â mwy nag un adran llywio o'r fath eisoes (fel y llywio cynradd yn y pennyn, neu lywio bar ochr), fe'ch cynghorir i ddarparu disgrifiad sy'n adlewyrchu ei ddiben aria-label. <nav>Er enghraifft, os defnyddir y gydran dudaleniad i lywio rhwng set o ganlyniadau chwilio, gallai label priodol fod yn aria-label="Search results pages".

Gwladwriaethau anabl a gweithredol

Gellir addasu dolenni ar gyfer gwahanol amgylchiadau. Defnyddiwch .disabledar gyfer dolenni na ellir eu clicio ac .activei nodi'r dudalen gyfredol.

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

Rydym yn argymell eich bod yn cyfnewid angorau gweithredol neu anabl am <span>, neu'n hepgor yr angor yn achos y saethau blaenorol/nesaf, er mwyn dileu swyddogaeth clicio tra'n cadw'r arddulliau a fwriedir.

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

Maintioli

Awydd tudaleniad mwy neu lai? Ychwanegu .pagination-lgneu .pagination-smar gyfer meintiau ychwanegol.

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

Galwr

Dolenni cyflym blaenorol ac nesaf ar gyfer gweithrediadau tudaleniad syml gyda marcio ysgafn ac arddulliau. Mae'n wych ar gyfer gwefannau syml fel blogiau neu gylchgronau.

Enghraifft ddiofyn

Yn ddiofyn, mae'r peiriant galw yn canoli dolenni.

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

Fel arall, gallwch alinio pob dolen i'r ochrau:

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

Cyflwr anabl dewisol

Mae dolenni galwr hefyd yn defnyddio'r .disableddosbarth cyfleustodau cyffredinol o'r dudalen.

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

Labelau

Enghraifft

Enghraifft o bennawd Newydd

Enghraifft o bennawd Newydd

Enghraifft o bennawd Newydd

Enghraifft o bennawd Newydd

Enghraifft o bennawd Newydd
Enghraifft o bennawd Newydd
<h3>Example heading <span class="label label-default">New</span></h3>

Amrywiadau sydd ar gael

Ychwanegwch unrhyw un o'r dosbarthiadau addasu a grybwyllir isod i newid ymddangosiad label.

Rhagosodedig Gwybodaeth Llwyddiant Cynradd Rhybudd Perygl
<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>

Oes gennych chi dunelli o labeli?

Gall problemau rendro godi pan fydd gennych ddwsinau o labeli mewnol mewn cynhwysydd cul, pob un yn cynnwys ei inline-blockelfen ei hun (fel eicon). Y ffordd o gwmpas hyn yw lleoliad display: inline-block;. Am gyd-destun ac enghraifft, gweler #13219 .

Bathodynnau

Amlygwch eitemau newydd neu heb eu darllen yn hawdd trwy ychwanegu <span class="badge">at ddolenni, Bootstrap navs, a mwy.

Mewnflwch42

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

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

Hunan dymchwel

Pan nad oes unrhyw eitemau newydd neu heb eu darllen, bydd bathodynnau'n cwympo (trwy ddewisydd CSS :empty) ar yr amod nad oes unrhyw gynnwys yn bodoli oddi mewn.

Cydweddoldeb traws-borwr

Ni fydd bathodynnau'n cwympo yn Internet Explorer 8 gan nad oes ganddo gefnogaeth i'r :emptydewisydd.

Yn addasu i wladwriaethau llywio gweithredol

Mae arddulliau adeiledig wedi'u cynnwys ar gyfer gosod bathodynnau mewn cyflwr gweithredol wrth lywio bilsen.

<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

Cydran ysgafn, hyblyg a all ymestyn yr olygfan gyfan yn ddewisol i arddangos cynnwys allweddol ar eich gwefan.

Helo Byd!

Mae hon yn uned arwr syml, cydran syml ar ffurf jumbotron ar gyfer tynnu sylw ychwanegol at gynnwys neu wybodaeth dan sylw.

Dysgu mwy

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

I wneud y jumbotron lled llawn, a heb gorneli crwn, ei osod y tu allan i bob .containers ac yn lle hynny ychwanegu o .containerfewn.

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

Pennawd tudalen

Cragen syml ar gyfer bylchau h1priodol a segmentu adrannau o gynnwys ar dudalen. Gall ddefnyddio'r elfen h1ddiofyn small, yn ogystal â'r rhan fwyaf o gydrannau eraill (gydag arddulliau ychwanegol).

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

Mân-luniau

Ymestyn system grid Bootstrap gyda'r gydran bawd i arddangos gridiau o ddelweddau, fideos, testun, a mwy yn hawdd.

Os ydych chi'n chwilio am gyflwyniad tebyg i Pinterest o fawdluniau o uchder a / neu led amrywiol, bydd angen i chi ddefnyddio ategyn trydydd parti fel Masonry , Isotop , neu Salvatore .

Enghraifft ddiofyn

Yn ddiofyn, mae mân-luniau Bootstrap wedi'u cynllunio i arddangos delweddau cysylltiedig heb fawr o farcio gofynnol.

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

Cynnwys personol

Gydag ychydig o farcio ychwanegol, mae'n bosibl ychwanegu unrhyw fath o gynnwys HTML fel penawdau, paragraffau, neu fotymau mewn mân-luniau.

100% x200

Label bawd

Cras justo odio, dapibus ac facilisis yn, egestas eget quam. Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Nullam id dolor id ultricies vehicula ut id elit.

Botwm Botwm

100% x200

Label bawd

Cras justo odio, dapibus ac facilisis yn, egestas eget quam. Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Nullam id dolor id ultricies vehicula ut id elit.

Botwm Botwm

100% x200

Label bawd

Cras justo odio, dapibus ac facilisis yn, egestas eget quam. Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Nullam id dolor id ultricies vehicula ut id elit.

Botwm Botwm

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

Rhybuddion

Darparu negeseuon adborth cyd-destunol ar gyfer gweithredoedd arferol defnyddwyr gyda llond llaw o negeseuon rhybudd hyblyg sydd ar gael.

Enghreifftiau

Lapiwch unrhyw destun a botwm diswyddo dewisol yn .alertun o'r pedwar dosbarth cyd-destunol (ee, .alert-success) ar gyfer negeseuon rhybudd sylfaenol.

Dim dosbarth rhagosodedig

Nid oes gan rybuddion ddosbarthiadau rhagosodedig, dim ond dosbarthiadau sylfaen ac addaswyr. Nid yw rhybudd llwyd rhagosodedig yn gwneud gormod o synnwyr, felly mae'n ofynnol i chi nodi math trwy ddosbarth cyd-destunol. Dewiswch o lwyddiant, gwybodaeth, rhybudd, neu berygl.

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

Rhybuddion diystyru

Adeiladwch ar unrhyw rybudd trwy ychwanegu .alert-dismissiblebotwm dewisol a chau.

Angen ategyn rhybuddio JavaScript

Ar gyfer rhybuddion diystyru sy'n gweithredu'n llawn, rhaid i chi ddefnyddio'r ategyn rhybuddion JavaScript .

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

Sicrhau ymddygiad priodol ar draws pob dyfais

Byddwch yn siwr i ddefnyddio'r <button>elfen gyda'r data-dismiss="alert"priodoledd data.

Defnyddiwch y .alert-linkdosbarth cyfleustodau i ddarparu dolenni lliw cyfatebol yn gyflym o fewn unrhyw rybudd.

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

Bariau cynnydd

Darparu adborth cyfredol ar gynnydd llif gwaith neu weithred gyda bariau cynnydd syml ond hyblyg.

Cydweddoldeb traws-borwr

Mae bariau cynnydd yn defnyddio trawsnewidiadau CSS3 ac animeiddiadau i gyflawni rhai o'u heffeithiau. Ni chefnogir y nodweddion hyn yn Internet Explorer 9 ac is na fersiynau hŷn o Firefox. Nid yw Opera 12 yn cefnogi animeiddiadau.

Cydweddoldeb Polisi Diogelwch Cynnwys (CSP).

Os oes gan eich gwefan Bolisi Diogelwch Cynnwys (CSP) nad yw'n caniatáu style-src 'unsafe-inline', yna ni fyddwch yn gallu defnyddio stylepriodoleddau mewnol i osod lled bar cynnydd fel y dangosir yn ein henghreifftiau isod. Mae dulliau amgen o osod y lled sy'n gydnaws â PDCau llym yn cynnwys defnyddio ychydig o JavaScript wedi'i deilwra (sy'n gosod element.style.width) neu ddefnyddio dosbarthiadau CSS arferol.

Enghraifft sylfaenol

Bar cynnydd diofyn.

60% Wedi'i Gwblhau
<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>

Gyda label

Tynnwch y dosbarth <span>gyda'r .sr-onlytu mewn i'r bar cynnydd i ddangos canran weladwy.

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>

Er mwyn sicrhau bod testun y label yn parhau i fod yn ddarllenadwy hyd yn oed ar gyfer canrannau isel, ystyriwch ychwanegu a min-widthat y bar cynnydd.

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>

Dewisiadau cyd-destunol

Mae bariau cynnydd yn defnyddio rhai o'r un dosbarthiadau botwm a rhybuddio ar gyfer arddulliau cyson.

40% Wedi'i gwblhau (llwyddiant)
20% Wedi'i Gwblhau
60% Wedi'i gwblhau (rhybudd)
80% Wedi'i gwblhau (perygl)
<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>

Stripiog

Yn defnyddio graddiant i greu effaith streipiog. Ddim ar gael yn IE9 ac isod.

40% Wedi'i gwblhau (llwyddiant)
20% Wedi'i Gwblhau
60% Wedi'i gwblhau (rhybudd)
80% Wedi'i gwblhau (perygl)
<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>

Animeiddiedig

Ychwanegu .activeat .progress-bar-stripedi animeiddio'r streipiau o'r dde i'r chwith. Ddim ar gael yn IE9 ac isod.

45% Wedi'i Gwblhau
<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>

Wedi'i bentyrru

Rhowch fariau lluosog yn yr un peth .progressi'w pentyrru.

35% Wedi'i gwblhau (llwyddiant)
20% Wedi'i gwblhau (rhybudd)
10% Wedi'i gwblhau (perygl)
<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>

Gwrthrych cyfryngau

Arddulliau gwrthrych haniaethol ar gyfer adeiladu gwahanol fathau o gydrannau (fel sylwadau blog, Trydar, ac ati) sy'n cynnwys delwedd wedi'i halinio i'r chwith neu'r dde ochr yn ochr â chynnwys testunol.

Cyfryngau rhagosodedig

Mae'r cyfrwng rhagosodedig yn dangos gwrthrych cyfryngau (delweddau, fideo, sain) i'r chwith neu'r dde o floc cynnwys.

Pennawd cyfryngau

Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis yn faucibws.

Pennawd cyfryngau

Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis yn faucibws.

Pennawd cyfryngau nythu

Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis yn faucibws.

Pennawd cyfryngau

Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Pennawd cyfryngau

Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. 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>

Mae'r dosbarthiadau .pull-lefta .pull-righthefyd yn bodoli ac yn cael eu defnyddio o'r blaen fel rhan o'r gydran cyfryngau, ond yn anghymeradwy ar gyfer y defnydd hwnnw yn v3.3.0. Maent yn cyfateb yn fras i .media-lefta .media-right, ac eithrio y .media-rightdylid eu gosod ar ôl y .media-bodyyn yr html.

Aliniad cyfryngau

Gall y delweddau neu gyfryngau eraill gael eu halinio top, canol, neu waelod. Mae'r rhagosodiad wedi'i alinio i'r brig.

Cyfryngau wedi'u halinio uchaf

Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis yn faucibws.

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.

Cyfryngau wedi'u halinio'n ganol

Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis yn faucibws.

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.

Cyfryngau wedi'u halinio i'r gwaelod

Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis yn faucibws.

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>

Rhestr cyfryngau

Gydag ychydig o farcio ychwanegol, gallwch ddefnyddio cyfryngau y tu mewn i'r rhestr (defnyddiol ar gyfer edafedd sylwadau neu restrau erthyglau).

  • Pennawd cyfryngau

    Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Pennawd cyfryngau nythu

    Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Pennawd cyfryngau nythu

    Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Pennawd cyfryngau nythu

    Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. 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>

Rhestr grŵp

Mae grwpiau rhestr yn elfen hyblyg a phwerus ar gyfer arddangos nid yn unig restrau syml o elfennau, ond rhai cymhleth gyda chynnwys wedi'i deilwra.

Enghraifft sylfaenol

Yn syml, y grŵp rhestr mwyaf sylfaenol yw rhestr heb ei threfnu gydag eitemau rhestr, a'r dosbarthiadau cywir. Adeiladwch arno gyda'r opsiynau sy'n dilyn, neu'ch CSS eich hun yn ôl yr angen.

  • Cras justo odio
  • Dapibus ac facilisis yn
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum yn 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>

Bathodynnau

Ychwanegwch y gydran bathodynnau at unrhyw eitem grŵp rhestr a bydd yn cael ei gosod yn awtomatig ar y dde.

  • 14Cras justo odio
  • 2Dapibus ac facilisis yn
  • 1Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Eitemau cysylltiedig

Mae Linkify yn rhestru eitemau grŵp trwy ddefnyddio tagiau angor yn lle eitemau rhestr (mae hynny hefyd yn golygu rhiant yn <div>lle <ul>). Nid oes angen rhieni unigol o amgylch pob elfen.

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

Eitemau botwm

Gall eitemau grŵp rhestr fod yn fotymau yn lle eitemau rhestr (mae hynny hefyd yn golygu rhiant yn <div>lle <ul>). Nid oes angen rhieni unigol o amgylch pob elfen. Peidiwch â defnyddio'r .btndosbarthiadau safonol yma.

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

Eitemau anabl

Ychwanegu .disabledat a .list-group-itemi lwyd allan i ymddangos yn anabl.

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

Dosbarthiadau cyd-destunol

Defnyddiwch ddosbarthiadau cyd-destunol i steilio eitemau rhestr, rhagosodedig neu gysylltiedig. Mae hefyd yn cynnwys .activey wladwriaeth.

  • Dapibus ac facilisis yn
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum yn 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>

Cynnwys personol

Ychwanegwch bron unrhyw HTML o fewn, hyd yn oed ar gyfer grwpiau rhestr cysylltiedig fel yr un isod.

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

Paneli

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Basic example

By default, all the .panel does is apply some basic border and padding to contain some content.

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

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading. However, the font sizes of <h1>-<h6> are overridden by .panel-heading.

For proper link coloring, be sure to place links in headings within .panel-title.

Panel heading without title
Panel content

Panel title

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

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

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

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

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

With tables

Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

Panel heading

Some default panel content here. 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.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @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>

If there is no panel body, the component moves from panel header to table without interruption.

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

With list groups

Easily include full-width list groups within any panel.

Panel heading

Some default panel content here. 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>

Responsive embed

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Cymhwysir rheolau yn uniongyrchol at <iframe>, <embed>, <video>, ac <object>elfennau; yn ddewisol defnyddiwch ddosbarth disgynnydd penodol .embed-responsive-itempan fyddwch am gydweddu â'r arddull ar gyfer priodoleddau eraill.

Pro-Tip! Nid oes angen i chi gynnwys frameborder="0"yn eich <iframe>s gan ein bod yn diystyru hynny ar eich rhan.

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

ffynhonnau

Diofyn yn dda

Defnyddiwch y ffynnon fel effaith syml ar elfen i roi effaith mewnosod iddo.

Edrychwch, rydw i mewn ffynnon!
<div class="well">...</div>

Dosbarthiadau dewisol

Padin rheoli a chorneli crwn gyda dau ddosbarth addasydd dewisol.

Edrychwch, rydw i mewn ffynnon fawr!
<div class="well well-lg">...</div>
Edrychwch, rydw i mewn ffynnon fach!
<div class="well well-sm">...</div>