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.

Rhowch gyfeiriad e-bost dilys

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

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

Enghraifft

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>

Aliniad

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.

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

Penawdau

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>

Rhannwr

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>

Eitemau dewislen anabl

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>

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 `role`a 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>

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.

Chwith Canol Iawn

Chwith Canol

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

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>

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.

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

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.

Tabiau

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>

Pils

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>

Wedi'i gyfiawnhau

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>

Dolenni anabl

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>

Defnyddio cwymplenni

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>

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:

Lleihau maint neu led yr eitemau bar llywio.
Cuddio rhai eitemau bar llywio ar feintiau sgrin arbennig gan ddefnyddio dosbarthiadau cyfleustodau ymatebol .
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.

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

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>

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.

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>

Dolenni wedi'u halinio

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>

Enghraifft

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 .

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>

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>

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>

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.

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

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

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>

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.

Da iawn! Rydych chi wedi darllen y neges rhybuddio bwysig hon yn llwyddiannus.

Pennau i fyny! Mae angen eich sylw ar y rhybudd hwn, ond nid yw'n hynod bwysig.

Rhybudd! Gwell gwirio'ch hun, nid ydych chi'n edrych yn rhy dda.

O snap! Newidiwch ychydig o bethau a cheisiwch gyflwyno eto.

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

Rhybudd! Gwell gwirio'ch hun, nid ydych chi'n edrych yn rhy dda.

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

Dolenni mewn rhybuddion

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

Da iawn! Rydych chi wedi darllen y neges rhybuddio bwysig hon yn llwyddiannus .

Pennau i fyny! Mae angen eich sylw ar y rhybudd hwn , ond nid yw'n hynod bwysig.

Rhybudd! Gwell gwirio'ch hun, nid ydych chi'n edrych yn rhy dda .

O snap! Newidiwch ychydig o bethau a cheisiwch gyflwyno eto.

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

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.

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

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

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

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

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

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>

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.

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

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

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.

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

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

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

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.

Rhestrwch bennawd eitem grŵp

Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Maecenas sed diam eget risus varius blandit.

Rhestrwch bennawd eitem grŵp

Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Maecenas sed diam eget risus varius blandit.

Rhestrwch bennawd eitem grŵp

Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Maecenas sed diam eget risus varius blandit.

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

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>

Panel with footer

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

Panel footer

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

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>

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>

Cydrannau

Glyphicons

Glyffau sydd ar gael

Sut i ddefnyddio

Peidiwch â chymysgu â chydrannau eraill

Dim ond i'w ddefnyddio ar elfennau gwag

Newid lleoliad ffont yr eicon

Eiconau hygyrch

Enghreifftiau

Cwympiadau

Enghraifft

Aliniad

Efallai y bydd angen lleoliad ychwanegol

Yn anghymeradwy.pull-right anghymeradwy

Penawdau

Rhannwr

Eitemau dewislen anabl

Grwpiau botwm

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

Sicrhewch fod yn gywir rolea rhowch label

Enghraifft sylfaenol

Bar offer botwm

Maintioli

Nythu

Amrywiad fertigol

Grwpiau botwm wedi'u cyfiawnhau

Trin ffiniau

IE8 a ffiniau

Gydag <a>elfennau

Dolenni yn gweithredu fel botymau

Gydag <button>elfennau

Cwympiadau botwm

Dibyniaeth ategyn

Cwympiadau botwm sengl

Hollti botymau botwm

Maintioli

Amrywiad dropup

Grwpiau mewnbwn

Testun <input>yn unig

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

Peidiwch â chymysgu â chydrannau eraill

Ychwanegwch labeli bob amser

Enghraifft sylfaenol

Maintioli

Blychau ticio ac ategion radio

Addons botwm

Botymau gyda dropdowns

Botymau segmentiedig

Botymau lluosog

Navs

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

Gwneud llywio a ddefnyddir fel llywio yn hygyrch

Tabiau

Pils

Wedi'i gyfiawnhau

Safari a llywio ymatebol y gellir ei gyfiawnhau

Dolenni anabl

Nid yw ymarferoldeb cyswllt wedi'i effeithio

Defnyddio cwymplenni

Tabiau gyda dropdowns

Pils gyda dropdowns

Navbar

Bar llywio diofyn

Cynnwys gorlifo

Angen ategyn JavaScript

Newid torbwynt y bar llywio symudol sydd wedi cwympo

Gwneud barrau llywio yn hygyrch

Delwedd brand

Ffurflenni

Cafeatau dyfeisiau symudol

Ychwanegwch labeli bob amser

Botymau

Defnydd cyd-destun penodol

Testun

Dolenni di-llyw

Aliniad cydran

Alinio cydrannau lluosog i'r dde

Wedi'i osod i'r brig

Mae angen padin corff

Wedi'i osod i'r gwaelod

Yn anghymeradwy`.pull-right` anghymeradwy

Sicrhewch fod yn gywir `role`a rhowch label

Gydag `<a>`elfennau

Gydag `<button>`elfennau

Testun `<input>`yn unig