Cydrannau
Dros ddwsin o gydrannau y gellir eu hailddefnyddio wedi'u hadeiladu i ddarparu eiconograffeg, cwymplenni, grwpiau mewnbwn, llywio, rhybuddion, a llawer mwy.
Dros ddwsin o gydrannau y gellir eu hailddefnyddio wedi'u hadeiladu i ddarparu eiconograffeg, cwymplenni, grwpiau mewnbwn, llywio, rhybuddion, a llawer mwy.
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.
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.
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 ar elfennau nad ydynt yn cynnwys testun ac nad oes ganddynt elfennau plentyn y dylid defnyddio dosbarthiadau 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:
@icon-font-path
a/neu @icon-font-name
newidynnau yn y ffynhonnell Llai o ffeiliau.url()
llwybrau yn y CSS a luniwyd.Defnyddiwch ba bynnag opsiwn sy'n gweddu orau i'ch gosodiad datblygu penodol.
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-only
dosbarth.
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-label
priodoledd ar y rheolaeth ei hun.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
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-only
thestun 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>
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 .dropup
at 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-right
at a .dropdown-menu
i'r dde alinio'r ddewislen.
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 overflow
eiddo neu ymddangos y tu allan i ffiniau'r olygfan. Ymdrin â'r materion hyn ar eich pen eich hun wrth iddynt godi.
.pull-right
anghymeradwyO v3.1.0, rydym wedi .pull-right
anghymeradwyo 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 .disabled
at <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 .
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).
role
a rhowch labelEr mwyn i dechnolegau cynorthwyol - megis darllenwyr sgrin - gyfleu bod cyfres o fotymau wedi'u grwpio, mae role
angen 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 role
nodwedd gywir. Yn yr enghreifftiau a ddarperir yma, rydym yn defnyddio , ond gellir defnyddio aria-label
dewisiadau eraill megis hefyd.aria-labelledby
Lapiwch gyfres o fotymau gyda .btn
mewn .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>
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>
Rhowch un .btn-group
o fewn un arall .btn-group
pan 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>
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>
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.
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: -1px
fe'i defnyddir i bentyrru'r ffiniau yn hytrach na'u tynnu. Fodd bynnag, margin
nid 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.
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.
<a>
elfennauLapiwch gyfres o .btn
s i mewn .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
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"
.
<button>
elfennauI 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-group
a darparu'r marc dewislen cywir.
Mae cwymplenni botwm yn ei gwneud yn ofynnol i'r ategyn cwymplen gael ei gynnwys yn eich fersiwn chi o Bootstrap.
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>
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>
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>
Sbardun cwymplenni uwchben elfennau trwy ychwanegu .dropup
at 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-group
gyda .input-group-addon
neu .input-group-btn
i ragpendynnu neu atodi elfennau i sengl .form-control
.
<input>
yn unigCeisiwch 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 rows
priodoledd yn cael ei barchu mewn rhai achosion.
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 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.
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-only
dosbarth, neu ddefnydd o'r aria-label
, aria-labelledby
, , aria-describedby
, title
neu placeholder
briodoledd) 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.
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-addon
neu .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>
Ychwanegu'r dosbarthiadau maint ffurf cymharol at .input-group
ei 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>
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 -->
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-btn
i 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 -->
<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 -->
<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>
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.
Sylwch fod .nav-tabs
angen y .nav
dosbarth 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-pills
yn 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.
<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 .disabled
ar gyfer dolenni llwyd a dim effeithiau hofran .
<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 .
<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>
<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.
<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-brand
ganddo 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-form
i'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-form
rhannu llawer o'i god gyda .form-inline
via 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 y .navbar-btn
dosbarth 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-link
dosbarth 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-left
Alinio dolenni nav, ffurflenni, botymau, neu destun, gan .navbar-right
ddefnyddio'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-left
a .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-top
a chynnwys .container
neu .container-fluid
i gynnwys bar llywio'r ganolfan a'r pad.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Ychwanegu .navbar-fixed-bottom
a chynnwys .container
neu .container-fluid
i gynnwys bar llywio'r ganolfan a'r pad.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Creu bar llywio lled llawn sy'n sgrolio i ffwrdd gyda'r dudalen trwy ychwanegu .navbar-static-top
a chynnwys .container
neu .container-fluid
i 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>
Nodwch leoliad y dudalen gyfredol o fewn hierarchaeth llywio.
Mae gwahanyddion yn cael eu hychwanegu'n awtomatig yn CSS trwy :before
a content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Darparwch ddolenni tudalen ar gyfer eich gwefan neu ap gyda'r gydran dudalenu aml-dudalen, neu'r dewis arall symlach ar gyfer galwr .
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">«</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">»</span>
</a>
</li>
</ul>
</nav>
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"
.
Gellir addasu dolenni ar gyfer gwahanol amgylchiadau. Defnyddiwch .disabled
ar gyfer dolenni na ellir eu clicio ac .active
i nodi'r dudalen gyfredol.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</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">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Awydd tudaleniad mwy neu lai? Ychwanegu .pagination-lg
neu .pagination-sm
ar 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>
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.
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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Mae dolenni galwr hefyd yn defnyddio'r .disabled
dosbarth cyfleustodau cyffredinol o'r dudalen.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Ychwanegwch unrhyw un o'r dosbarthiadau addasu a grybwyllir isod i newid ymddangosiad label.
<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>
Gall problemau rendro godi pan fydd gennych ddwsinau o labeli mewnol mewn cynhwysydd cul, pob un yn cynnwys ei inline-block
elfen 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.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
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.
Ni fydd bathodynnau'n cwympo yn Internet Explorer 8 gan nad oes ganddo gefnogaeth i'r :empty
dewisydd.
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.
Mae hon yn uned arwr syml, cydran syml ar ffurf jumbotron ar gyfer tynnu sylw ychwanegol at gynnwys neu wybodaeth dan sylw.
<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 .container
s ac yn lle hynny ychwanegu o .container
fewn.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Cragen syml ar gyfer bylchau h1
priodol a segmentu adrannau o gynnwys ar dudalen. Gall ddefnyddio'r elfen h1
ddiofyn 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 .
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>
Gydag ychydig o farcio ychwanegol, mae'n bosibl ychwanegu unrhyw fath o gynnwys HTML fel penawdau, paragraffau, neu fotymau mewn mân-luniau.
<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.
Lapiwch unrhyw destun a botwm diswyddo dewisol yn .alert
un o'r pedwar dosbarth cyd-destunol (ee, .alert-success
) ar gyfer negeseuon rhybudd sylfaenol.
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>
Adeiladwch ar unrhyw rybudd trwy ychwanegu .alert-dismissible
botwm dewisol a chau.
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">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Byddwch yn siwr i ddefnyddio'r <button>
elfen gyda'r data-dismiss="alert"
priodoledd data.
Defnyddiwch y .alert-link
dosbarth 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>
Darparu adborth cyfredol ar gynnydd llif gwaith neu weithred gyda bariau cynnydd syml ond hyblyg.
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.
Os oes gan eich gwefan Bolisi Diogelwch Cynnwys (CSP) nad yw'n caniatáu style-src 'unsafe-inline'
, yna ni fyddwch yn gallu defnyddio style
priodoleddau 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.
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>
Tynnwch y dosbarth <span>
gyda'r .sr-only
tu mewn i'r bar cynnydd i ddangos canran weladwy.
<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-width
at y bar cynnydd.
<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>
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>
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>
Ychwanegu .active
at .progress-bar-striped
i 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>
Rhowch fariau lluosog yn yr un peth .progress
i'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.
Mae'r cyfrwng rhagosodedig yn dangos gwrthrych cyfryngau (delweddau, fideo, sain) i'r chwith neu'r dde o floc cynnwys.
<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-left
a .pull-right
hefyd 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-left
a .media-right
, ac eithrio y .media-right
dylid eu gosod ar ôl y .media-body
yn yr html.
Gall y delweddau neu gyfryngau eraill gael eu halinio top, canol, neu waelod. Mae'r rhagosodiad wedi'i alinio i'r brig.
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.
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.
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>
Gydag ychydig o farcio ychwanegol, gallwch ddefnyddio cyfryngau y tu mewn i'r rhestr (defnyddiol ar gyfer edafedd sylwadau neu restrau erthyglau).
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.
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.
<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>
Ychwanegwch y gydran bathodynnau at unrhyw eitem grŵp rhestr a bydd yn cael ei gosod yn awtomatig ar y dde.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
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>
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 .btn
dosbarthiadau 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>
Ychwanegu .disabled
at a .list-group-item
i 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>
Defnyddiwch ddosbarthiadau cyd-destunol i steilio eitemau rhestr, rhagosodedig neu gysylltiedig. Mae hefyd yn cynnwys .active
y wladwriaeth.
<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>
Ychwanegwch bron unrhyw HTML o fewn, hyd yn oed ar gyfer grwpiau rhestr cysylltiedig fel yr un isod.
Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Maecenas sed diam eget risus varius blandit.
Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Maecenas sed diam eget risus varius blandit.
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.
By default, all the .panel
does is apply some basic border and padding to contain some content.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
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
.
<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.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
<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>
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.
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 |
<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.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Easily include full-width list groups within any panel.
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.
<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-item
pan 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>
Defnyddiwch y ffynnon fel effaith syml ar elfen i roi effaith mewnosod iddo.
<div class="well">...</div>
Padin rheoli a chorneli crwn gyda dau ddosbarth addasydd dewisol.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>