CSS
Gosodiadau CSS byd-eang, elfennau HTML sylfaenol wedi'u steilio a'u gwella gyda dosbarthiadau estynadwy, a system grid uwch.
Trosolwg
Cael y downdown ar ddarnau allweddol o seilwaith Bootstrap, gan gynnwys ein hymagwedd at ddatblygiad gwe gwell, cyflymach a chryfach.
Docteip HTML5
Mae Bootstrap yn defnyddio rhai elfennau HTML ac eiddo CSS sy'n gofyn am ddefnyddio'r doctype HTML5. Cynhwyswch ef ar ddechrau eich holl brosiectau.
<!DOCTYPE html>
<html lang="en">
...
</html>Symudol yn gyntaf
Gyda Bootstrap 2, fe wnaethom ychwanegu arddulliau cyfeillgar symudol dewisol ar gyfer agweddau allweddol ar y fframwaith. Gyda Bootstrap 3, rydym wedi ailysgrifennu'r prosiect i fod yn gyfeillgar i ffonau symudol o'r cychwyn cyntaf. Yn lle ychwanegu arddulliau symudol dewisol, maen nhw'n cael eu pobi i'r craidd. Mewn gwirionedd, mae Bootstrap yn symudol yn gyntaf . Gellir dod o hyd i arddulliau symudol cyntaf ledled y llyfrgell gyfan yn hytrach na mewn ffeiliau ar wahân.
Er mwyn sicrhau rendro cywir a chwyddo cyffyrddiad, ychwanegwch y tag meta port golwg at eich ffeil <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Gallwch analluogi galluoedd chwyddo ar ddyfeisiau symudol trwy ychwanegu user-scalable=noat y tag meta porth golwg. Mae hyn yn analluogi chwyddo, sy'n golygu mai dim ond sgrolio y gall defnyddwyr ei wneud, ac mae'n golygu bod eich gwefan yn teimlo ychydig yn debycach i raglen frodorol. Yn gyffredinol, nid ydym yn argymell hyn ar bob gwefan, felly byddwch yn ofalus!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Teipograffeg a chysylltiadau....
Mae Bootstrap yn gosod arddangosiad byd-eang sylfaenol, teipograffeg, ac arddulliau cyswllt. Yn benodol, rydym yn:
- Gosod
background-color: #fff;ar ybody - Defnyddiwch y
@font-family-base,@font-size-base, a'r@line-height-basepriodoleddau fel ein sylfaen deipograffig - Gosodwch y lliw cyswllt byd-eang trwy
@link-colora chymhwyso tanlinelliadau cyswllt yn unig ymlaen:hover
Gellir dod o hyd i'r arddulliau hyn o fewn scaffolding.less.
Normalize.css
Ar gyfer gwell rendro ar draws porwr, rydym yn defnyddio Normalize.css , prosiect gan Nicolas Gallagher a Jonathan Neal .
Cynwysyddion
Mae angen elfen gynwysedig ar Bootstrap i lapio cynnwys y wefan a rhoi cartref i'n system grid. Gallwch ddewis un o ddau gynhwysydd i'w defnyddio yn eich prosiectau. Sylwch, oherwydd paddinga mwy, nad yw'r naill gynhwysydd na'r llall yn nythu.
Defnyddiwch .containerar gyfer cynhwysydd lled sefydlog ymatebol.
<div class="container">
...
</div>Defnyddiwch .container-fluidar gyfer cynhwysydd lled llawn, sy'n rhychwantu lled cyfan eich man gwylio.
<div class="container-fluid">
...
</div>System grid
Mae Bootstrap yn cynnwys system grid hylif cyntaf ymatebol, symudol sy'n graddio hyd at 12 colofn yn briodol wrth i faint y ddyfais neu'r porth gwylio gynyddu. Mae'n cynnwys dosbarthiadau wedi'u diffinio ymlaen llaw ar gyfer opsiynau gosodiad hawdd, yn ogystal â chymysgeddau pwerus ar gyfer cynhyrchu mwy o gynlluniau semantig .
Rhagymadrodd
Defnyddir systemau grid ar gyfer creu cynlluniau tudalennau trwy gyfres o resi a cholofnau sy'n gartref i'ch cynnwys. Dyma sut mae system grid Bootstrap yn gweithio:
- Rhaid gosod rhesi o fewn
.container(lled sefydlog) neu.container-fluid(lled llawn) ar gyfer aliniad cywir a phadin. - Defnyddiwch resi i greu grwpiau llorweddol o golofnau.
- Dylid gosod cynnwys o fewn colofnau, a dim ond colofnau all fod yn blant rhesi uniongyrchol.
- Mae dosbarthiadau grid wedi'u diffinio ymlaen llaw yn hoffi
.rowac.col-xs-4ar gael ar gyfer gwneud cynlluniau grid yn gyflym. Gellir defnyddio llai o gymysgeddau hefyd ar gyfer gosodiadau mwy semantig. - Mae colofnau'n creu cwteri (bylchau rhwng cynnwys y golofn) trwy
padding. Mae'r padin hwnnw'n cael ei wrthbwyso mewn rhesi ar gyfer y golofn gyntaf a'r golofn olaf trwy ymyl negyddol ar.rows. - Yr ymyl negyddol yw pam mae'r enghreifftiau isod yn hen ffasiwn. Mae hyn fel bod cynnwys o fewn colofnau grid wedi'i linellu â chynnwys nad yw'n ymwneud â'r grid.
- Mae colofnau grid yn cael eu creu trwy nodi nifer y deuddeg colofn sydd ar gael yr hoffech eu rhychwantu. Er enghraifft, byddai tair colofn gyfartal yn defnyddio tair
.col-xs-4. - Os gosodir mwy na 12 colofn o fewn un rhes, bydd pob grŵp o golofnau ychwanegol, fel un uned, yn lapio ar linell newydd.
- Mae dosbarthiadau grid yn berthnasol i ddyfeisiau â lled sgrin sy'n fwy neu'n hafal i'r meintiau torbwynt, ac yn diystyru dosbarthiadau grid sydd wedi'u targedu at ddyfeisiau llai. Felly, ee bydd cymhwyso unrhyw
.col-md-*ddosbarth at elfen nid yn unig yn effeithio ar ei steil ar ddyfeisiadau canolig ond hefyd ar ddyfeisiadau mawr os nad oes.col-lg-*dosbarth yn bresennol.
Edrychwch ar yr enghreifftiau ar gyfer cymhwyso'r egwyddorion hyn i'ch cod.
Ymholiadau gan y cyfryngau
Rydym yn defnyddio'r ymholiadau cyfryngau canlynol yn ein Ffeiliau Llai i greu'r torbwyntiau allweddol yn ein system grid.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }O bryd i'w gilydd byddwn yn ymhelaethu ar yr ymholiadau hyn gan y cyfryngau i gynnwys a max-widthi gyfyngu CSS i set gulach o ddyfeisiau.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }Opsiynau grid
Gweld sut mae agweddau ar system grid Bootstrap yn gweithio ar draws dyfeisiau lluosog gyda thabl defnyddiol.
| Ffonau dyfeisiau bach ychwanegol (<768px) | Tabledi dyfeisiau bach (≥768px) | Penbyrddau dyfeisiau canolig (≥992px) | Penbyrddau dyfeisiau mawr (≥1200px) | |
|---|---|---|---|---|
| Ymddygiad grid | Llorweddol bob amser | Wedi cwympo i ddechrau, yn llorweddol uwchben y torbwyntiau | ||
| Lled y cynhwysydd | Dim (auto) | 750px | 970px | 1170px |
| Rhagddodiad dosbarth | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # o golofnau | 12 | |||
| Lled y golofn | Auto | ~62px | ~81px | ~97px |
| Lled gwter | 30px (15px ar bob ochr i golofn) | |||
| Nestable | Oes | |||
| Gwrthbwysau | Oes | |||
| Trefnu colofn | Oes | |||
Enghraifft: Pentyrru i lorweddol
Gan ddefnyddio un set o .col-md-*ddosbarthiadau grid, gallwch greu system grid sylfaenol sy'n cychwyn wedi'i pentyrru ar ddyfeisiau symudol a dyfeisiau tabled (yr ystod fach i fach ychwanegol) cyn dod yn llorweddol ar ddyfeisiau bwrdd gwaith (canolig). Rhowch golofnau grid mewn unrhyw .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Enghraifft: Cynhwysydd hylif
Trowch unrhyw gynllun grid lled sefydlog yn gynllun lled llawn trwy newid eich gosodiad mwyaf allanol .containeri .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Enghraifft: Symudol a bwrdd gwaith
Ddim eisiau i'ch colofnau stacio mewn dyfeisiau llai yn unig? Defnyddiwch y dosbarthiadau grid dyfeisiau bach a chanolig ychwanegol trwy ychwanegu .col-xs-* .col-md-*at eich colofnau. Gweler yr enghraifft isod i gael gwell syniad o sut mae'r cyfan yn gweithio.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Enghraifft: Symudol, tabled, bwrdd gwaith
Adeiladwch ar yr enghraifft flaenorol trwy greu cynlluniau hyd yn oed yn fwy deinamig a phwerus gyda .col-sm-*dosbarthiadau llechen.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>Enghraifft: Lapio colofn
Os gosodir mwy na 12 colofn o fewn un rhes, bydd pob grŵp o golofnau ychwanegol, fel un uned, yn lapio ar linell newydd.
.col-xs-9
.col-xs-4
Ers 9 + 4 = 13 > 12, mae'r div 4 colofn hwn yn cael ei lapio ar linell newydd fel un uned gyffiniol.
Ers 9 + 4 = 13 > 12, mae'r div 4 colofn hwn yn cael ei lapio ar linell newydd fel un uned gyffiniol.
.col-xs-6 Mae
colofnau dilynol yn parhau ar hyd y llinell newydd.
colofnau dilynol yn parhau ar hyd y llinell newydd.
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>Ailosod colofnau ymatebol
Gyda'r pedair haen o gridiau sydd ar gael rydych chi'n siŵr o fynd i'r afael â phroblemau lle, ar rai torbwyntiau, nad yw'ch colofnau'n clirio'n hollol gywir gan fod un yn dalach na'r llall. I drwsio hynny, defnyddiwch gyfuniad o .clearfixa'n dosbarthiadau cyfleustodau ymatebol .
.col-xs-6 .col-sm-3
Newid maint eich man gwylio neu edrych arno ar eich ffôn am enghraifft.
Newid maint eich man gwylio neu edrych arno ar eich ffôn am enghraifft.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>Yn ogystal â chlirio colofnau ar dorbwyntiau ymatebol, efallai y bydd angen i chi ailosod gwrthbwyso, gwthio neu dynnu . Gweler hyn ar waith yn yr enghraifft grid .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>Colofnau gwrthbwyso
Symudwch y colofnau i'r dde gan ddefnyddio .col-md-offset-*dosbarthiadau. Mae'r dosbarthiadau hyn yn cynyddu ymyl chwith colofn fesul *colofn. Er enghraifft, .col-md-offset-4yn symud .col-md-4dros bedair colofn.
.col-md-4
.col-md-4 .col-md-gwrthbwyso-4
.col-md-3 .col-md-wrthbwyso-3
.col-md-3 .col-md-wrthbwyso-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Gallwch hefyd ddiystyru gwrthbwyso o haenau grid is gyda .col-*-offset-0dosbarthiadau.
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>Colofnau nythu
I nythu'ch cynnwys gyda'r grid rhagosodedig, ychwanegwch set newydd .rowo .col-sm-*golofnau o fewn .col-sm-*colofn sy'n bodoli eisoes. Dylai rhesi nythu gynnwys set o golofnau sy'n adio i 12 neu lai (nid yw'n ofynnol i chi ddefnyddio pob un o'r 12 colofn sydd ar gael).
Lefel 1: .col-sm-9
Lefel 2: .col-xs-8 .col-sm-6
Lefel 2: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>Trefnu colofn
Newidiwch drefn ein colofnau grid adeiledig yn hawdd gyda .col-md-push-*dosbarthiadau .col-md-pull-*addasu.
.col-md-9 .col-md-gwthio-3
.col-md-3 .col-md-tynnu-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>Llai o gymysgeddau a newidynnau
Yn ogystal â dosbarthiadau grid parod ar gyfer cynlluniau cyflym, mae Bootstrap yn cynnwys Llai o newidynnau a chymysgeddau ar gyfer cynhyrchu eich cynlluniau semantig syml eich hun yn gyflym.
Newidynnau
Mae newidynnau yn pennu nifer y colofnau, lled y gwter, a'r pwynt ymholiad cyfryngau i ddechrau colofnau arnofio. Rydym yn defnyddio'r rhain i gynhyrchu'r dosbarthiadau grid rhagddiffiniedig a ddogfennwyd uchod, yn ogystal ag ar gyfer y cymysgeddau arfer a restrir isod.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;cymysgeddau
Defnyddir cymysgeddau ar y cyd â'r newidynnau grid i gynhyrchu CSS semantig ar gyfer colofnau grid unigol.
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}Defnydd enghreifftiol
Gallwch chi addasu'r newidynnau i'ch gwerthoedd arfer eich hun, neu ddefnyddio'r cymysgeddau gyda'u gwerthoedd diofyn. Dyma enghraifft o ddefnyddio'r gosodiadau diofyn i greu cynllun dwy golofn gyda bwlch rhyngddynt.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>Teipograffeg
Penawdau
Mae pob pennawd HTML, <h1>trwy <h6>, ar gael. .h1trwy .h6ddosbarthiadau hefyd ar gael, ar gyfer pan fyddwch eisiau cyfateb arddull ffont pennawd ond yn dal am i'ch testun gael ei arddangos yn unol.
h1. Pennawd Bootstrap |
Lled-bold 36px |
h2. Pennawd Bootstrap |
Lled-bold 30px |
h3. Pennawd Bootstrap |
Lled-bold 24px |
h4. Pennawd Bootstrap |
Lled-bold 18px |
h5. Pennawd Bootstrap |
Lled-bold 14px |
h6. Pennawd Bootstrap |
Sembold 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>Creu testun ysgafnach, eilaidd mewn unrhyw bennawd gyda <small>thag generig neu'r .smalldosbarth.
h1. Pennawd Bootstrap Testun eilaidd |
h2. Pennawd Bootstrap Testun eilaidd |
h3. Pennawd Bootstrap Testun eilaidd |
h4. Pennawd Bootstrap Testun eilaidd |
h5. Pennawd Bootstrap Testun eilaidd |
h6. Pennawd Bootstrap Testun eilaidd |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>Copi corff
Rhagosodiad byd-eang Bootstrap font-sizeyw 14px , gydag un line-heighto 1.428 . Cymhwysir hyn i'r <body>a phob paragraff. Yn ogystal, mae <p>(paragraffau) yn cael ymyl isaf o hanner eu huchder llinell a gyfrifwyd (10px yn ddiofyn).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>Copi corff arweiniol
Gwnewch i baragraff sefyll allan trwy ychwanegu .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>Adeiladwyd gyda Llai
Mae'r raddfa deipograffig yn seiliedig ar ddau newidyn Llai mewn newidynnau.less : @font-size-basea @line-height-base. Y cyntaf yw maint y ffont sylfaen a ddefnyddir drwyddi draw a'r ail yw uchder y llinell sylfaen. Rydyn ni'n defnyddio'r newidynnau hynny a rhywfaint o fathemateg syml i greu'r ymylon, padinau, ac uchder llinell o'n holl fath a mwy. Addaswch nhw ac mae Bootstrap yn addasu.
Elfennau testun mewnol
Testun wedi'i farcio
I dynnu sylw at rediad o destun oherwydd ei berthnasedd mewn cyd-destun arall, defnyddiwch y <mark>tag.
Gallwch ddefnyddio'r tag marc iuchafbwynttestun.
You can use the mark tag to <mark>highlight</mark> text.Testun wedi'i ddileu
I nodi blociau o destun sydd wedi'u dileu defnyddiwch y <del>tag.
Mae'r llinell hon o destun i fod i gael ei thrin fel testun wedi'i ddileu.
<del>This line of text is meant to be treated as deleted text.</del>Testun trwodd
I nodi blociau o destun nad ydynt bellach yn berthnasol defnyddiwch y <s>tag.
Mae'r llinell hon o destun i fod i gael ei thrin fel un nad yw'n gywir mwyach.
<s>This line of text is meant to be treated as no longer accurate.</s>Testun wedi'i fewnosod
I nodi ychwanegiadau i'r ddogfen defnyddiwch y <ins>tag.
Mae'r llinell hon o destun i fod i gael ei thrin fel ychwanegiad at y ddogfen.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Testun wedi'i danlinellu
I danlinellu testun defnyddiwch y <u>tag.
Bydd y llinell hon o destun yn rendro fel y'i tanlinellir
<u>This line of text will render as underlined</u>Defnyddiwch dagiau pwyslais rhagosodedig HTML gydag arddulliau ysgafn.
Testun bach
I ddad-bwysleisio mewnlin neu flociau o destun, defnyddiwch y <small>tag i osod testun ar 85% maint y rhiant. Mae elfennau pennawd yn derbyn eu rhai eu hunain font-sizear gyfer elfennau nythu <small>.
Fel arall, gallwch ddefnyddio elfen unol ag .smallyn lle unrhyw <small>.
Mae'r llinell hon o destun i fod i gael ei thrin fel print mân.
<small>This line of text is meant to be treated as fine print.</small>Beiddgar
Am bwysleisio pyt o destun gyda phwysau ffont trymach.
Mae'r darn canlynol o destun wedi'i rendro fel testun trwm .
<strong>rendered as bold text</strong>italig
Am bwysleisio pyt o destun gyda llythrennau italig.
Mae'r darn canlynol o destun wedi'i rendro fel testun italig .
<em>rendered as italicized text</em>Elfennau amgen
Mae croeso i chi ddefnyddio <b>ac <i>yn HTML5. <b>i fod i amlygu geiriau neu ymadroddion heb gyfleu pwysigrwydd ychwanegol tra ei fod <i>yn bennaf ar gyfer llais, termau technegol, ac ati.
Dosbarthiadau aliniad
Ailalinio testun yn hawdd i gydrannau gyda dosbarthiadau alinio testun.
Testun wedi'i alinio i'r chwith.
Testun wedi'i alinio yn y canol.
Testun wedi'i alinio i'r dde.
Testun wedi'i gyfiawnhau.
Dim testun lapio.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>Dosbarthiadau trawsnewid
Trawsnewid testun yn gydrannau gyda dosbarthiadau cyfalafu testun.
Testun mewn llythrennau bach.
Testun priflythrennau.
Testun wedi'i gyfalafu.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Byrfoddau
Gweithrediad arddulliedig o <abbr>elfen HTML ar gyfer byrfoddau ac acronymau i ddangos y fersiwn estynedig ar hofran. Mae gan dalfyriadau â titlephriodoledd ffin gwaelod doredig golau a chyrchwr cymorth ar hofran, sy'n darparu cyd-destun ychwanegol ar hofran ac i ddefnyddwyr technolegau cynorthwyol.
Talfyriad sylfaenol
Talfyriad o'r gair priodoledd yw attr .
<abbr title="attribute">attr</abbr>dechreuad
Ychwanegu .initialismat dalfyriad ar gyfer maint ffont ychydig yn llai.
HTML yw'r peth gorau ers bara wedi'i sleisio.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Cyfeiriadau
Cyflwyno gwybodaeth gyswllt ar gyfer eich hynafiad agosaf neu'r corff cyfan o waith. Cadw fformatio trwy orffen pob llinell gyda <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Enw Llawn
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Enw Llawn
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>Blockquotes
Am ddyfynnu blociau o gynnwys o ffynhonnell arall yn eich dogfen.
Blockquote diofyn
Lapiwch<blockquote> unrhyw HTML fel y dyfyniad. Ar gyfer dyfynbrisiau syth, rydym yn argymell <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Opsiynau Blockquote
Newidiadau arddull a chynnwys ar gyfer amrywiadau syml ar safon <blockquote>.
Enwi ffynhonnell
Ychwanegu ar <footer>gyfer adnabod y ffynhonnell. Lapiwch enw'r gwaith ffynhonnell<cite> .
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>Arddangosfeydd amgen
Ychwanegu .blockquote-reversear gyfer blockquote gyda chynnwys wedi'i alinio i'r dde.
<blockquote class="blockquote-reverse">
...
</blockquote>Rhestrau
Heb drefn
Rhestr o eitemau lle nad yw'r drefn o bwys penodol.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Cyfanrif molestie lorem yn massa
- Facilitis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttititor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Archebwyd
Rhestr o eitemau lle mae'r drefn o bwys penodol.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Cyfanrif molestie lorem yn massa
- Facilitis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Unstyled
Tynnwch y rhagosodiad list-stylea'r ymyl chwith ar eitemau rhestr (plant ar unwaith yn unig). Mae hyn ond yn berthnasol i eitemau rhestr plant uniongyrchol , sy'n golygu y bydd angen i chi ychwanegu'r dosbarth ar gyfer unrhyw restrau nythu hefyd.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Cyfanrif molestie lorem yn massa
- Facilitis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttititor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>Mewn llinell
Rhowch yr holl eitemau rhestr ar un llinell gyda display: inline-block;phadin ysgafn.
- Ystyr geiriau: Lorem ipsum
- Phasellus iaculis
- Ystyr geiriau: Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Disgrifiad
Rhestr o dermau gyda'u disgrifiadau cysylltiedig.
- Rhestri disgrifiadau
- Mae rhestr ddisgrifiad yn berffaith ar gyfer diffinio termau.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus.
- Porthladd Malesuada
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Disgrifiad llorweddol
Gwnewch dermau a disgrifiadau mewn <dl>llinell ochr yn ochr. Yn dechrau wedi'i bentyrru fel s diofyn <dl>, ond pan fydd y bar llywio'n ehangu, gwnewch y rhain hefyd.
- Rhestri disgrifiadau
- Mae rhestr ddisgrifiad yn berffaith ar gyfer diffinio termau.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus.
- Porthladd Malesuada
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus comodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Torri'n awtomatig
Bydd rhestrau disgrifiadau llorweddol yn blaendorri termau sy'n rhy hir i ffitio yn y golofn chwith gyda text-overflow. Mewn mannau gwylio culach, byddant yn newid i'r cynllun pentyrru diofyn.
Côd
Mewn llinell
Lapiwch bytiau mewnol o god gyda<code> .
Er enghraifft,
<section>dylid ei lapio fel llinell.
For example, <code><section></code> should be wrapped as inline.Mewnbwn defnyddiwr
Defnyddiwch y<kbd> i nodi mewnbwn sy'n cael ei fewnbynnu fel arfer trwy fysellfwrdd.
I newid cyfeiriaduron, teipiwch
cdac yna enw'r cyfeiriadur.
I olygu gosodiadau, pwyswch ctrl + ,
I olygu gosodiadau, pwyswch ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>Bloc sylfaenol
Defnyddiwch <pre>ar gyfer llinellau cod lluosog. Gwnewch yn siŵr eich bod yn dianc rhag unrhyw fracedi ongl yn y cod ar gyfer rendro priodol.
<p>Testun enghreifftiol yma...</p>
<pre><p>Sample text here...</p></pre>Efallai y byddwch yn ddewisol ychwanegu'r.pre-scrollable dosbarth yn ddewisol, a fydd yn gosod uchder mwyaf o 350px ac yn darparu bar sgrolio echel-y.
Newidynnau
I ddangos newidynnau defnyddiwch y<var> tag.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Allbwn sampl
I nodi blociau allbwn sampl o raglen defnyddiwch y<samp> tag.
Mae'r testun hwn i fod i gael ei drin fel allbwn sampl o raglen gyfrifiadurol.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Byrddau
Enghraifft sylfaenol
Ar gyfer steilio sylfaenol - padin ysgafn a dim ond rhanwyr llorweddol - ychwanegwch y dosbarth sylfaen .tableat unrhyw <table>. Efallai ei fod yn ymddangos yn ddiangen iawn, ond o ystyried y defnydd eang o dablau ar gyfer ategion eraill fel calendrau a chodwyr dyddiadau, rydym wedi dewis ynysu ein harddulliau bwrdd arferol.
| # | Enw cyntaf | Enw olaf | Enw defnyddiwr |
|---|---|---|---|
| 1 | Marc | Otto | @mdo |
| 2 | Jacob | Thornton | @braster |
| 3 | Larry | yr Aderyn |
<table class="table">
...
</table>Rhesi streipiog
Defnyddiwch .table-stripedi ychwanegu stribedi sebra at unrhyw res tabl o fewn y <tbody>.
Cydweddoldeb traws-borwr
Mae tablau streipiog yn cael eu steilio trwy'r :nth-childdewisydd CSS, nad yw ar gael yn Internet Explorer 8.
| # | Enw cyntaf | Enw olaf | Enw defnyddiwr |
|---|---|---|---|
| 1 | Marc | Otto | @mdo |
| 2 | Jacob | Thornton | @braster |
| 3 | Larry | yr Aderyn |
<table class="table table-striped">
...
</table>Bwrdd ymylol
Ychwanegwch .table-borderedar gyfer borderi ar bob ochr i'r bwrdd a'r celloedd.
| # | Enw cyntaf | Enw olaf | Enw defnyddiwr |
|---|---|---|---|
| 1 | Marc | Otto | @mdo |
| 2 | Jacob | Thornton | @braster |
| 3 | Larry | yr Aderyn |
<table class="table table-bordered">
...
</table>Rhesi hofran
Ychwanegu .table-hoveri alluogi cyflwr hofran ar resi tabl o fewn <tbody>.
| # | Enw cyntaf | Enw olaf | Enw defnyddiwr |
|---|---|---|---|
| 1 | Marc | Otto | @mdo |
| 2 | Jacob | Thornton | @braster |
| 3 | Larry | yr Aderyn |
<table class="table table-hover">
...
</table>Bwrdd cyddwyso
Ychwanegwch .table-condensedi wneud byrddau'n fwy cryno trwy dorri padin celloedd yn ei hanner.
| # | Enw cyntaf | Enw olaf | Enw defnyddiwr |
|---|---|---|---|
| 1 | Marc | Otto | @mdo |
| 2 | Jacob | Thornton | @braster |
| 3 | Larry yr Aderyn | ||
<table class="table table-condensed">
...
</table>Dosbarthiadau cyd-destunol
Defnyddio dosbarthiadau cyd-destunol i liwio rhesi tabl neu gelloedd unigol.
| Dosbarth | Disgrifiad |
|---|---|
.active |
Yn cymhwyso'r lliw hofran i res neu gell benodol |
.success |
Yn dynodi gweithred lwyddiannus neu gadarnhaol |
.info |
Yn dynodi newid neu weithred addysgiadol niwtral |
.warning |
Yn dynodi rhybudd a allai fod angen sylw |
.danger |
Yn dynodi gweithred beryglus neu a allai fod yn negyddol |
| # | Pennawd colofn | Pennawd colofn | Pennawd colofn |
|---|---|---|---|
| 1 | Cynnwys colofn | Cynnwys colofn | Cynnwys colofn |
| 2 | Cynnwys colofn | Cynnwys colofn | Cynnwys colofn |
| 3 | Cynnwys colofn | Cynnwys colofn | Cynnwys colofn |
| 4 | Cynnwys colofn | Cynnwys colofn | Cynnwys colofn |
| 5 | Cynnwys colofn | Cynnwys colofn | Cynnwys colofn |
| 6 | Cynnwys colofn | Cynnwys colofn | Cynnwys colofn |
| 7 | Cynnwys colofn | Cynnwys colofn | Cynnwys colofn |
| 8 | Cynnwys colofn | Cynnwys colofn | Cynnwys colofn |
| 9 | Cynnwys colofn | Cynnwys colofn | Cynnwys colofn |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>Cyfleu ystyr i dechnolegau cynorthwyol
Mae defnyddio lliw i ychwanegu ystyr i res bwrdd neu gell unigol yn rhoi arwydd gweledol yn unig, na fydd yn cael ei gyfleu i ddefnyddwyr technolegau cynorthwyol - megis darllenwyr sgrin. Sicrhewch fod y wybodaeth a ddynodir gan y lliw naill ai'n amlwg o'r cynnwys ei hun (y testun gweladwy yn y rhes/gell tabl berthnasol), neu'n cael ei chynnwys trwy ddulliau amgen, megis testun ychwanegol wedi'i guddio gyda'r .sr-onlydosbarth.
Tablau ymatebol
Creu tablau ymatebol trwy lapio unrhyw rai i .tablemewn .table-responsivei'w gwneud yn sgrolio'n llorweddol ar ddyfeisiau bach (o dan 768px). Wrth edrych ar unrhyw beth sy'n fwy na 768px o led, ni welwch unrhyw wahaniaeth yn y tablau hyn.
Tocio fertigol / cwtogi
Mae tablau ymatebol yn defnyddio overflow-y: hidden, sy'n clipio oddi ar unrhyw gynnwys sy'n mynd y tu hwnt i ymylon gwaelod neu frig y tabl. Yn benodol, gall hyn dorri i ffwrdd dewislenni a widgets trydydd parti eraill.
Firefox a setiau maes
Mae gan Firefox rywfaint o arddull set faes lletchwith sy'n cynnwys widthsy'n ymyrryd â'r tabl ymatebol. Ni ellir diystyru hyn heb hac sy'n benodol i Firefox nad ydym yn ei ddarparu yn Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}I gael rhagor o wybodaeth, darllenwch yr ateb Stack Overflow hwn .
| # | Pennawd tabl | Pennawd tabl | Pennawd tabl | Pennawd tabl | Pennawd tabl | Pennawd tabl |
|---|---|---|---|---|---|---|
| 1 | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd |
| 2 | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd |
| 3 | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd |
| # | Pennawd tabl | Pennawd tabl | Pennawd tabl | Pennawd tabl | Pennawd tabl | Pennawd tabl |
|---|---|---|---|---|---|---|
| 1 | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd |
| 2 | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd |
| 3 | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd | Cell bwrdd |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Ffurflenni
Enghraifft sylfaenol
Mae rheolyddion ffurf unigol yn derbyn rhywfaint o steilio byd-eang yn awtomatig. Mae pob testun <input>, <textarea>, ac <select>elfen gyda .form-controlwedi'u gosod i width: 100%;ddiofyn. Lapiwch labeli a rheolyddion .form-groupar gyfer y gofod gorau posibl.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Peidiwch â chymysgu grwpiau dosbarth â grwpiau mewnbwn
Peidiwch â chymysgu grwpiau dosbarth yn uniongyrchol â grwpiau mewnbwn . Yn lle hynny, nythu'r grŵp mewnbwn y tu mewn i'r grŵp dosbarth.
Ffurf inline
Ychwanegwch .form-inlineat eich ffurflen (nad oes rhaid iddi fod yn <form>) ar gyfer rheolyddion bloc mewnol ac aliniad i'r chwith. Mae hyn ond yn berthnasol i ffurflenni o fewn meysydd gwylio sydd o leiaf 768px o led.
Efallai y bydd angen lledau arferol
Mae mewnbynnau a dewisiadau wedi'u width: 100%;cymhwyso'n ddiofyn yn Bootstrap. O fewn ffurflenni mewnol, rydym yn ailosod y width: auto;gall rheolyddion lluosog fod ar yr un llinell. Yn dibynnu ar eich cynllun, efallai y bydd angen lledau personol ychwanegol.
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.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>Ffurf llorweddol
Defnyddiwch ddosbarthiadau grid rhagosodedig Bootstrap i alinio labeli a grwpiau o reolaethau ffurf mewn gosodiad llorweddol trwy ychwanegu .form-horizontalat y ffurflen (nad oes rhaid iddi fod yn <form>). Mae gwneud hynny yn newid .form-groupi ymddwyn fel rhesi grid, felly nid oes angen .row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>Rheolaethau a gefnogir
Enghreifftiau o reolaethau ffurf safonol a gefnogir mewn cynllun ffurf enghreifftiol.
Mewnbynnau
Rheolaeth ffurf fwyaf cyffredin, meysydd mewnbwn seiliedig ar destun. Yn cynnwys cefnogaeth ar gyfer pob math HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, a color.
Angen datganiad math
Dim ond os typecaiff mewnbwn ei ddatgan yn gywir y caiff mewnbwn ei arddullio'n llawn.
<input type="text" class="form-control" placeholder="Text input">Grwpiau mewnbwn
I ychwanegu testun neu fotymau integredig cyn a/neu ar ôl unrhyw destun sy'n seiliedig ar <input>, edrychwch ar y gydran grŵp mewnbwn .
Ardal destun
Rheoli ffurf sy'n cefnogi llinellau lluosog o destun. Newid rowspriodoledd yn ôl yr angen.
<textarea class="form-control" rows="3"></textarea>Blychau siec a radios
Mae blychau ticio ar gyfer dewis un neu sawl opsiwn mewn rhestr, tra bod setiau radio ar gyfer dewis un opsiwn o blith llawer.
Cefnogir blychau ticio a radios anabl, ond i ddarparu cyrchwr "ni chaniateir" ar hofran y rhiant <label>, bydd angen i chi ychwanegu'r .disableddosbarth at y rhiant .radio, .radio-inline, .checkbox, neu .checkbox-inline.
Rhagosodedig (wedi'i bentyrru)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>Blychau ticio mewnol a radios
Defnyddiwch y .checkbox-inlineneu'r .radio-inlinedosbarthiadau ar gyfres o flychau ticio neu radios ar gyfer rheolyddion sy'n ymddangos ar yr un llinell.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>Blychau ticio a radios heb destun label
Os nad oes gennych unrhyw destun o fewn y <label>, mae'r mewnbwn wedi'i leoli fel y byddech chi'n ei ddisgwyl. Ar hyn o bryd dim ond yn gweithio ar flychau ticio a radios anfewnol. Cofiwch barhau i ddarparu rhyw fath o label ar gyfer technolegau cynorthwyol (er enghraifft, defnyddio aria-label).
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>Yn dewis
Sylwch fod gan lawer o fwydlenni dethol brodorol - sef yn Safari a Chrome - gorneli crwn na ellir eu haddasu trwy border-radiusbriodweddau.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Ar gyfer <select>rheolyddion gyda'r multiplepriodoledd, dangosir opsiynau lluosog yn ddiofyn.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Rheolaeth statig
Pan fydd angen i chi osod testun plaen wrth ymyl label ffurflen o fewn ffurflen, defnyddiwch y .form-control-staticdosbarth ar <p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>Cyflwr ffocws
Rydym yn dileu'r outlinearddulliau rhagosodedig ar rai rheolyddion ffurf ac yn cymhwyso a box-shadowyn ei le ar gyfer :focus.
:focusCyflwr demo
Mae'r mewnbwn enghreifftiol uchod yn defnyddio arddulliau wedi'u teilwra yn ein dogfennaeth i ddangos y :focuscyflwr ar .form-control.
Cyflwr anabl
Ychwanegwch y disabledpriodoledd boolean ar fewnbwn i atal rhyngweithiadau defnyddwyr. Mae mewnbynnau anabl yn ymddangos yn ysgafnach ac yn ychwanegu not-allowedcyrchwr.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Setiau maes anabl
Ychwanegwch y disabledpriodoledd i a <fieldset>i analluogi'r holl reolaethau o fewn y <fieldset>ar unwaith.
Caveat ynghylch ymarferoldeb cyswllt o<a>
Yn ddiofyn, bydd porwyr yn trin pob rheolydd ffurf frodorol ( <input>, <select>ac <button>elfennau ) y tu mewn i a <fieldset disabled>yn anabl, gan atal rhyngweithiadau bysellfwrdd a llygoden arnynt. Fodd bynnag, os yw eich ffurflen hefyd yn cynnwys <a ... class="btn btn-*">elfennau, dim ond arddull o pointer-events: none. Fel y nodwyd yn yr adran am gyflwr anabl ar gyfer botymau (ac yn benodol yn yr is-adran ar gyfer elfennau angori), nid yw'r eiddo CSS hwn wedi'i safoni eto ac nid yw'n cael ei gefnogi'n llawn yn Opera 18 ac is, nac yn Internet Explorer 11, ac enillodd ' t atal defnyddwyr bysellfwrdd rhag gallu canolbwyntio neu actifadu'r dolenni hyn. Felly i fod yn ddiogel, defnyddiwch JavaScript wedi'i deilwra i analluogi dolenni o'r fath.
Cydweddoldeb traws-borwr
Er y bydd Bootstrap yn cymhwyso'r arddulliau hyn ym mhob porwr, nid yw Internet Explorer 11 ac isod yn cefnogi'r disabledpriodoledd ar <fieldset>. Defnyddiwch JavaScript wedi'i deilwra i analluogi'r set maes yn y porwyr hyn.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>Cyflwr darllen yn unig
Ychwanegwch y readonlypriodoledd boolean ar fewnbwn i atal newid gwerth y mewnbwn. Mae mewnbynnau darllen yn unig yn ymddangos yn ysgafnach (yn union fel mewnbynnau anabl), ond yn cadw'r cyrchwr safonol.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Testun cymorth
Testun cymorth lefel bloc ar gyfer rheolyddion ffurflen.
Cysylltu testun cymorth â rheolyddion ffurflen
Dylai testun cymorth gael ei gysylltu'n benodol â'r rheolaeth ffurf y mae'n ymwneud â defnyddio'r aria-describedbypriodoledd. Bydd hyn yn sicrhau bod technolegau cynorthwyol - megis darllenwyr sgrin - yn cyhoeddi'r testun cymorth hwn pan fydd y defnyddiwr yn canolbwyntio neu'n mynd i mewn i'r rheolydd.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>Cyflyrau dilysu
Mae Bootstrap yn cynnwys arddulliau dilysu ar gyfer gwallau, rhybuddion a chyflyrau llwyddiant ar reolaethau ffurflenni. I ddefnyddio, ychwanegu .has-warning, .has-error, neu .has-successi'r elfen rhiant. Bydd unrhyw .control-label, .form-control, ac .help-blocko fewn yr elfen honno yn derbyn yr arddulliau dilysu.
Cyfleu cyflwr dilysu i dechnolegau cynorthwyol a defnyddwyr lliwddall
Mae defnyddio'r arddulliau dilysu hyn i ddynodi cyflwr rheoli ffurf yn rhoi arwydd gweledol, seiliedig ar liw yn unig, na fydd yn cael ei gyfleu i ddefnyddwyr technolegau cynorthwyol - megis darllenwyr sgrin - nac i ddefnyddwyr lliwddall.
Sicrhewch hefyd fod arwydd arall o gyflwr yn cael ei ddarparu. Er enghraifft, gallwch gynnwys awgrym am gyflwr yn <label>nhestun y rheolydd ffurflen ei hun (fel sy'n wir yn yr enghraifft cod a ganlyn), cynnwys Glyphicon (gyda thestun amgen priodol gan ddefnyddio'r .sr-onlydosbarth - gweler yr enghreifftiau Glyphicon ), neu drwy ddarparu bloc testun cymorth ychwanegol . Yn benodol ar gyfer technolegau cynorthwyol, gellir neilltuo aria-invalid="true"priodoledd hefyd i reolaethau ffurf annilys.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>Gydag eiconau dewisol
Gallwch hefyd ychwanegu eiconau adborth dewisol gyda'r ychwanegiad .has-feedbacka'r eicon cywir.
<input class="form-control">Dim ond gydag elfennau testunol y mae eiconau adborth yn gweithio .
Eiconau, labeli, a grwpiau mewnbwn
Mae angen lleoli eiconau adborth â llaw ar gyfer mewnbynnau heb label ac ar gyfer grwpiau mewnbwn gydag ychwanegyn ar y dde. Fe'ch anogir yn gryf i ddarparu labeli ar gyfer pob mewnbwn am resymau hygyrchedd. Os dymunwch atal labeli rhag cael eu harddangos, cuddiwch nhw gyda'r .sr-onlydosbarth. Os oes rhaid i chi wneud heb labeli, addaswch topwerth yr eicon adborth. Ar gyfer grwpiau mewnbwn, addaswch yright gwerth i werth picsel priodol yn dibynnu ar led eich addon.
Cyfleu ystyr yr eicon i dechnolegau cynorthwyol
Er mwyn sicrhau bod technolegau cynorthwyol – megis darllenwyr sgrin – yn cyfleu ystyr eicon yn gywir, dylid cynnwys testun cudd ychwanegol gyda’r .sr-onlydosbarth a’i gysylltu’n benodol â’r rheolaeth ffurf y mae’n ymwneud â defnyddio aria-describedby. Fel arall, sicrhewch fod yr ystyr (er enghraifft, y ffaith bod rhybudd ar gyfer maes cofnodi testun penodol) yn cael ei gyfleu mewn rhyw ffurf arall, megis newid testun y gwir <label>sy'n gysylltiedig â rheolaeth y ffurflen.
Er bod yr enghreifftiau canlynol eisoes yn sôn am gyflwr dilysu eu rheolaethau ffurf priodol yn y <label>testun ei hun, mae'r dechneg uchod (gan ddefnyddio .sr-onlytestun a aria-describedby) wedi'i chynnwys at ddibenion enghreifftiol.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>Eiconau dewisol mewn ffurfiau llorweddol ac ar-lein
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>Eiconau dewisol gyda .sr-onlylabeli cudd
Os ydych chi'n defnyddio'r .sr-onlydosbarth i guddio rheolyddion ffurflen <label>(yn hytrach na defnyddio opsiynau labelu eraill, fel y aria-labelbriodwedd), bydd Bootstrap yn addasu lleoliad yr eicon yn awtomatig unwaith y bydd wedi'i ychwanegu.
(llwyddiant)
@
(llwyddiant)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>Rheoli maint
Gosod uchder gan ddefnyddio dosbarthiadau fel .input-lg, a gosod lled gan ddefnyddio dosbarthiadau colofn grid fel .col-lg-*.
Maint uchder
Creu rheolyddion ffurf talach neu fyrrach sy'n cyfateb i feintiau botymau.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>Meintiau grwpiau ffurf llorweddol
Maintwch labeli'n gyflym a ffurfiwch reolyddion o fewn .form-horizontaltrwy ychwanegu .form-group-lgneu .form-group-sm.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>Maint colofn
Lapiwch fewnbynnau mewn colofnau grid, neu unrhyw elfen rhiant arferol, i orfodi'r lled a ddymunir yn hawdd.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>Botymau
Tagiau botwm
Defnyddiwch y dosbarthiadau botwm ar <a>, <button>, neu <input>elfen.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">Defnydd cyd-destun penodol
Er y gellir defnyddio dosbarthiadau botwm <a>ac <button>elfennau, dim ond <button>elfennau sy'n cael eu cefnogi o fewn ein cydrannau nav a bar llywio.
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".
Rendro traws-borwr
Fel arfer gorau, rydym yn argymell yn gryf defnyddio'r <button>elfen pryd bynnag y bo modd i sicrhau rendrad traws-borwr cyfatebol.
Ymhlith pethau eraill, mae nam yn Firefox <30 sy'n ein hatal rhag gosod y botymau sy'n seiliedig ar line-heightof- <input>seiliedig, gan achosi iddynt beidio â chyd-fynd yn union ag uchder botymau eraill ar Firefox.
Opsiynau
Defnyddiwch unrhyw un o'r dosbarthiadau botwm sydd ar gael i greu botwm ag arddull yn gyflym.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>Cyfleu ystyr i dechnolegau cynorthwyol
Mae defnyddio lliw i ychwanegu ystyr i fotwm yn rhoi arwydd gweledol yn unig, na fydd yn cael ei gyfleu i ddefnyddwyr technolegau cynorthwyol - megis darllenwyr sgrin. Sicrhewch fod gwybodaeth a ddynodir gan y lliw naill ai'n amlwg o'r cynnwys ei hun (testun gweladwy'r botwm), neu'n cael ei chynnwys trwy ddulliau amgen, megis testun ychwanegol sydd wedi'i guddio gyda'r .sr-onlydosbarth.
Meintiau
Awydd botymau mwy neu lai? Ychwanegu .btn-lg, .btn-sm, neu .btn-xsar gyfer meintiau ychwanegol.
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>Creu botymau lefel bloc - y rhai sy'n rhychwantu lled llawn rhiant - trwy ychwanegu .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>Cyflwr gweithredol
Bydd botymau'n ymddangos wedi'u gwasgu (gyda chefndir tywyllach, ffin dywyllach, a chysgod mewnosod) pan fyddant yn weithredol. Ar gyfer <button>elfennau, gwneir hyn trwy :active. Ar gyfer <a>elfennau, mae'n cael ei wneud gyda .active. Fodd bynnag, gallwch ddefnyddio .activear <button>s (a chynnwys y aria-pressed="true"priodoledd) pe bai angen i chi ailadrodd y cyflwr gweithredol yn rhaglennol.
Elfen botwm
Nid oes angen ychwanegu :activegan ei fod yn ffug-ddosbarth, ond os oes angen i chi orfodi'r un ymddangosiad, ewch ymlaen ac ychwanegu .active.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>Elfen angor
Ychwanegu'r .activedosbarth at <a>fotymau.
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>Cyflwr anabl
Gwnewch i fotymau edrych na ellir eu clicio trwy eu pylu'n ôl gyda opacity.
Elfen botwm
Ychwanegwch y disabledpriodoledd i <button>fotymau.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>Cydweddoldeb traws-borwr
Os ychwanegwch y disabledpriodoledd at <button>, bydd Internet Explorer 9 ac isod yn gwneud y testun yn llwyd gyda chysgod testun cas na allwn ei drwsio.
Elfen angor
Ychwanegu'r .disableddosbarth at <a>fotymau.
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>Rydym yn defnyddio .disabledfel dosbarth cyfleustodau yma, yn debyg i'r .activedosbarth cyffredin, felly nid oes angen rhagddodiad.
Cafeat swyddogaeth cyswllt
Mae'r dosbarth hwn yn defnyddio pointer-events: nonei geisio analluogi swyddogaeth cyswllt <a>s, ond nid yw'r eiddo CSS hwnnw wedi'i safoni eto ac nid yw'n cael ei gefnogi'n llawn yn Opera 18 ac is, nac yn Internet Explorer 11. Yn ogystal, hyd yn oed mewn porwyr sy'n cefnogi pointer-events: none, bysellfwrdd nid yw llywio yn cael ei effeithio o hyd, sy'n golygu y bydd defnyddwyr bysellfwrdd sy'n gweld a defnyddwyr technolegau cynorthwyol yn dal i allu actifadu'r dolenni hyn. Felly i fod yn ddiogel, defnyddiwch JavaScript wedi'i deilwra i analluogi dolenni o'r fath.
Delweddau
Delweddau ymatebol
Gellir gwneud delweddau yn Bootstrap 3 yn ymatebol-gyfeillgar trwy ychwanegu'r .img-responsivedosbarth. Mae hyn yn berthnasol max-width: 100%;, height: auto;ac display: block;i'r ddelwedd fel ei fod yn cyd-fynd yn dda â'r rhiant elfen.
I ganoli delweddau sy'n defnyddio'r .img-responsivedosbarth, defnyddiwch .center-blockyn lle .text-center. Gweler yr adran dosbarthiadau cynorthwywyr am ragor o fanylion am .center-blockddefnydd.
Delweddau SVG ac IE 8-10
Yn Internet Explorer 8-10, mae delweddau SVG gyda .img-responsivemaint anghymesur. I drwsio hyn, ychwanegwch width: 100% \9;lle bo angen. Nid yw Bootstrap yn cymhwyso hwn yn awtomatig gan ei fod yn achosi cymhlethdodau i fformatau delwedd eraill.
<img src="..." class="img-responsive" alt="Responsive image">Siapiau delwedd
Ychwanegu dosbarthiadau at <img>elfen i steilio delweddau yn hawdd mewn unrhyw brosiect.
Cydweddoldeb traws-borwr
Cofiwch nad oes gan Internet Explorer 8 gefnogaeth ar gyfer corneli crwn.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Dosbarthiadau cynorthwywyr
Lliwiau cyd-destunol
Cyfleu ystyr trwy liw gyda llond llaw o ddosbarthiadau cyfleustodau pwyslais. Gall y rhain hefyd gael eu cymhwyso i ddolenni a byddant yn tywyllu ar hofran yn union fel ein harddulliau cyswllt rhagosodedig.
Fusce dapibus, tellus ac cursus comodo, tortor mauris nibh.
Nullam id dolor id ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>Ymdrin â phenodoldeb
Weithiau ni ellir cymhwyso dosbarthiadau pwyslais oherwydd penodoldeb dewiswr arall. Yn y rhan fwyaf o achosion, ateb digonol yw lapio'ch testun <span>gyda'r dosbarth.
Cyfleu ystyr i dechnolegau cynorthwyol
Mae defnyddio lliw i ychwanegu ystyr yn rhoi arwydd gweledol yn unig, na fydd yn cael ei gyfleu i ddefnyddwyr technolegau cynorthwyol - megis darllenwyr sgrin. Sicrhewch fod gwybodaeth a ddynodir gan y lliw naill ai'n amlwg o'r cynnwys ei hun (defnyddir y lliwiau cyd-destunol i atgyfnerthu'r ystyr sydd eisoes yn bresennol yn y testun/marcio), neu ei fod wedi'i gynnwys trwy ddulliau amgen, megis testun ychwanegol wedi'i guddio gyda'r .sr-onlydosbarth .
Cefndiroedd cyd-destunol
Yn debyg i'r dosbarthiadau lliw testun cyd-destunol, gosodwch gefndir elfen yn hawdd i unrhyw ddosbarth cyd-destunol. Bydd cydrannau angori yn tywyllu ar hofran, yn union fel y dosbarthiadau testun.
Nullam id dolor id ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>Ymdrin â phenodoldeb
Weithiau ni ellir cymhwyso dosbarthiadau cefndir cyd-destunol oherwydd penodoldeb dewiswr arall. Mewn rhai achosion, ateb digonol yw lapio cynnwys eich elfen mewn a <div>gyda'r dosbarth.
Cyfleu ystyr i dechnolegau cynorthwyol
Fel gyda lliwiau cyd-destunol , sicrhewch fod unrhyw ystyr a fynegir trwy liw hefyd yn cael ei gyfleu mewn fformat nad yw'n gyflwyniadol yn unig.
Eicon cau
Defnyddiwch yr eicon cau generig ar gyfer diystyru cynnwys fel moddau a rhybuddion.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Carets
Defnyddiwch gartiau i ddangos ymarferoldeb a chyfeiriad y cwymplen. Sylwch y bydd y caret rhagosodedig yn gwrthdroi'n awtomatig mewn dewislenni gollwng .
<span class="caret"></span>fflotiau cyflym
Arnofio elfen i'r chwith neu'r dde gyda dosbarth. !importantyn cael ei gynnwys er mwyn osgoi materion penodoldeb. Gellir defnyddio dosbarthiadau hefyd fel cymysgeddau.
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}Canol blociau cynnwys
Gosod elfen i display: blocka chanolbwyntio drwy margin. Ar gael fel mixin a dosbarth.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Clearfix
Clirio floats yn hawdd trwy ychwanegu .clearfix at y rhiant elfen . Yn defnyddio'r gosodiad clir micro fel y'i poblogeiddiwyd gan Nicolas Gallagher. Gellir ei ddefnyddio hefyd fel mixin.
<!-- Usage as a class -->
<div class="clearfix">...</div>// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}Yn dangos a chuddio cynnwys
Gorfodi elfen i gael ei dangos neu ei chuddio ( gan gynnwys ar gyfer darllenwyr sgrin ) gyda'r defnydd o .showa .hiddendosbarthiadau. Mae'r dosbarthiadau hyn yn cael eu defnyddio !importanti osgoi gwrthdaro penodolrwydd, yn union fel fflotiau cyflym . Dim ond ar gyfer toglo lefel bloc y maent ar gael. Gellir eu defnyddio hefyd fel mixins.
.hidear gael, ond nid yw bob amser yn effeithio ar ddarllenwyr sgrin ac mae'n anghymeradwy yn v3.0.1 . Defnyddiwch .hiddenneu .sr-onlyyn lle hynny.
Ymhellach, .invisiblegellir ei ddefnyddio i doglo gwelededd elfen yn unig, sy'n golygu displaynad yw wedi'i haddasu a gall yr elfen effeithio ar lif y ddogfen o hyd.
<div class="show">...</div>
<div class="hidden">...</div>// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}Darllenydd sgrin a chynnwys llywio bysellfwrdd
Cuddio elfen i bob dyfais ac eithrio darllenwyr sgrin gyda .sr-only. Cyfunwch .sr-onlyag .sr-only-focusablei ddangos yr elfen eto pan fydd wedi'i ffocysu (ee gan ddefnyddiwr bysellfwrdd yn unig). Angenrheidiol ar gyfer dilyn arferion gorau hygyrchedd . Gellir ei ddefnyddio hefyd fel mixins.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}Amnewid delwedd
Defnyddiwch y .text-hidedosbarth neu mixin i helpu i ddisodli cynnwys testun elfen gyda delwedd gefndir.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Cyfleustodau ymatebol
Ar gyfer datblygiad cyflymach sy'n gyfeillgar i ffonau symudol, defnyddiwch y dosbarthiadau cyfleustodau hyn i ddangos a chuddio cynnwys fesul dyfais trwy ymholiad cyfryngau. Mae dosbarthiadau cyfleustodau hefyd wedi'u cynnwys ar gyfer toglo cynnwys wrth ei argraffu.
Ceisiwch ddefnyddio'r rhain ar sail gyfyngedig ac osgoi creu fersiynau hollol wahanol o'r un safle. Yn lle hynny, defnyddiwch nhw i ategu cyflwyniad pob dyfais.
Dosbarthiadau sydd ar gael
Defnyddiwch un neu gyfuniad o'r dosbarthiadau sydd ar gael ar gyfer toglo cynnwys ar draws torbwyntiau porth gwylio.
| Dyfeisiau bach ychwanegolFfonau (<768px) | Dyfeisiau bachTabledi (≥768px) | Dyfeisiau canoligPenbyrddau (≥992px) | Dyfeisiau mawrPenbyrddau (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Gweladwy | Cudd | Cudd | Cudd |
.visible-sm-* |
Cudd | Gweladwy | Cudd | Cudd |
.visible-md-* |
Cudd | Cudd | Gweladwy | Cudd |
.visible-lg-* |
Cudd | Cudd | Cudd | Gweladwy |
.hidden-xs |
Cudd | Gweladwy | Gweladwy | Gweladwy |
.hidden-sm |
Gweladwy | Cudd | Gweladwy | Gweladwy |
.hidden-md |
Gweladwy | Gweladwy | Cudd | Gweladwy |
.hidden-lg |
Gweladwy | Gweladwy | Gweladwy | Cudd |
O v3.2.0, mae'r .visible-*-*dosbarthiadau ar gyfer pob torbwynt yn dod mewn tri amrywiad, un ar gyfer pob displaygwerth eiddo CSS a restrir isod.
| Grŵp o ddosbarthiadau | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Felly, ar gyfer sgriniau ( ) bach ychwanegol xser enghraifft, y .visible-*-*dosbarthiadau sydd ar gael yw: .visible-xs-block, .visible-xs-inline, a .visible-xs-inline-block.
Mae'r dosbarthiadau .visible-xs, .visible-sm, .visible-md, a .visible-lghefyd yn bodoli, ond yn anghymeradwy yn v3.2.0 . Maent yn cyfateb yn fras i .visible-*-block, ac eithrio gydag achosion arbennig ychwanegol ar gyfer <table>elfennau sy'n gysylltiedig â thoglo.
Dosbarthiadau argraffu
Yn debyg i'r dosbarthiadau ymatebol rheolaidd, defnyddiwch y rhain i doglo cynnwys i'w argraffu.
| Dosbarthiadau | Porwr | Argraffu |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Cudd | Gweladwy |
.hidden-print |
Gweladwy | Cudd |
Mae'r dosbarth .visible-printhefyd yn bodoli ond yn anghymeradwy o v3.2.0 . Mae'n cyfateb yn fras i .visible-print-block, ac eithrio gydag achosion arbennig ychwanegol ar gyfer <table>elfennau cysylltiedig.
Achosion prawf
Newid maint eich porwr neu lwytho ar wahanol ddyfeisiau i brofi'r dosbarthiadau cyfleustodau ymatebol.
I'w weld ar...
Mae nodau gwirio gwyrdd yn dangos bod yr elfen i'w gweld yn eich man gwylio cyfredol.
Bach ychwanegol
✔ I'w weld ar x-bach
Bach
✔ Gweladwy ar fach
Canolig
✔ Yn weladwy ar ganolig
Mawr
✔ Gweladwy ar fawr
✔ I'w weld ar x-bach a bach
✔ Yn weladwy ar ganolig a mawr
✔ Gweladwy ar x-bach a chanolig
✔ Gweladwy ar fach a mawr
✔ Gweladwy ar x-bach a mawr
✔ Gweladwy ar fach a chanolig
Wedi'i guddio ar...
Yma, mae nodau gwirio gwyrdd hefyd yn nodi bod yr elfen wedi'i chuddio yn eich porth gwylio cyfredol.
Defnyddio Llai
Mae CSS Bootstrap wedi'i adeiladu ar Less, rhagbrosesydd gyda swyddogaethau ychwanegol fel newidynnau, cymysgeddau, a swyddogaethau ar gyfer llunio CSS. Gall y rhai sy'n edrych i ddefnyddio'r ffynhonnell Llai o ffeiliau yn lle ein ffeiliau CSS a luniwyd gennym ddefnyddio'r newidynnau a'r cymysgeddau niferus a ddefnyddiwn trwy gydol y fframwaith.
Ymdrinnir â newidynnau grid a chymysgeddau yn yr adran system Grid .
Llunio Bootstrap
Gellir defnyddio Bootstrap mewn o leiaf dwy ffordd: gyda'r CSS a luniwyd neu gyda'r ffynhonnell Llai o ffeiliau. I lunio'r Ffeiliau Llai, edrychwch ar yr adran Dechrau Arni am sut i osod eich amgylchedd datblygu i redeg y gorchmynion angenrheidiol.
Efallai y bydd offer casglu trydydd parti yn gweithio gyda Bootstrap, ond nid ydynt yn cael eu cefnogi gan ein tîm craidd.
Newidynnau
Defnyddir newidynnau trwy gydol y prosiect cyfan fel ffordd o ganoli a rhannu gwerthoedd a ddefnyddir yn gyffredin fel lliwiau, bylchau, neu bentyrrau ffontiau. I gael dadansoddiad cyflawn, gweler y Customizer .
Lliwiau
Defnydd hawdd o ddau gynllun lliw: graddlwyd a semantig. Mae lliwiau graddlwyd yn darparu mynediad cyflym i arlliwiau du a ddefnyddir yn gyffredin tra bod semantig yn cynnwys lliwiau amrywiol a neilltuwyd i werthoedd cyd-destunol ystyrlon.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;Defnyddiwch unrhyw un o'r newidynnau lliw hyn fel ag y maent neu eu hailbennu i newidynnau mwy ystyrlon ar gyfer eich prosiect.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Sgaffaldiau
Llond llaw o newidynnau ar gyfer addasu elfennau allweddol o sgerbwd eich gwefan yn gyflym.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Cysylltiadau
Steiliwch eich dolenni'n hawdd gyda'r lliw cywir gyda dim ond un gwerth.
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}Sylwch ei fod yn @link-hover-colordefnyddio swyddogaeth, offeryn anhygoel arall o Llai, i greu'r lliw hofran cywir yn awtomatig. Gallwch ddefnyddio darken, lighten, saturate, a desaturate.
Teipograffeg
Gosodwch eich ffurfdeip, maint y testun, eich arwain, a mwy yn hawdd gydag ychydig o newidynnau cyflym. Mae Bootstrap yn defnyddio'r rhain hefyd i ddarparu cymysgeddau teipograffeg hawdd.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;Eiconau
Dau newidyn cyflym ar gyfer addasu lleoliad ac enw ffeil eich eiconau.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Cydrannau
Mae cydrannau trwy gydol Bootstrap yn defnyddio rhai newidynnau rhagosodedig ar gyfer gosod gwerthoedd cyffredin. Dyma'r rhai a ddefnyddir amlaf.
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;Cymysgeddau gwerthwr
Cymysgedd yw gwerthwyr i helpu i gefnogi porwr lluosog trwy gynnwys yr holl ragddodiaid gwerthwr perthnasol yn eich CSS a luniwyd.
Blwch-sizing
Ailosodwch fodel blwch eich cydrannau gydag un mixin. I gael cyd-destun, gweler yr erthygl ddefnyddiol hon gan Mozilla .
Mae'r mixin yn anghymeradwy o v3.2.0, gyda chyflwyniad Autoprefixer. Er mwyn cadw cydnawsedd tuag yn ôl, bydd Bootstrap yn parhau i ddefnyddio'r mixin yn fewnol tan Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Corneli crwn
Heddiw mae pob porwr modern yn cefnogi'r border-radiuseiddo nad yw'n rhagosodedig. O'r herwydd, nid oes unrhyw .border-radius()mixin, ond mae Bootstrap yn cynnwys llwybrau byr ar gyfer talgrynnu dwy gornel yn gyflym ar ochr benodol gwrthrych.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}Cysgodion blwch (Gollwng).
Os yw'ch cynulleidfa darged yn defnyddio'r porwyr a'r dyfeisiau diweddaraf a mwyaf, gwnewch yn siŵr eich bod chi'n defnyddio'r box-shadoweiddo ar ei ben ei hun yn unig. Os oes angen cefnogaeth arnoch ar gyfer dyfeisiau Android hŷn (cyn-v4) ac iOS (cyn iOS 5), defnyddiwch y mixin anghymeradwy i godi'r -webkitrhagddodiad gofynnol.
Mae'r mixin yn anghymeradwy o v3.1.0, gan nad yw Bootstrap yn swyddogol yn cefnogi'r llwyfannau hen ffasiwn nad ydynt yn cefnogi'r eiddo safonol. Er mwyn cadw cydnawsedd tuag yn ôl, bydd Bootstrap yn parhau i ddefnyddio'r mixin yn fewnol tan Bootstrap v4.
Gwnewch yn siŵr eich bod chi'n defnyddio rgba()lliwiau yn eich cysgodion bocs fel eu bod nhw'n asio mor ddi-dor â phosib â chefndiroedd.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Trawsnewidiadau
Cymysgedd lluosog ar gyfer hyblygrwydd. Gosodwch yr holl wybodaeth bontio gydag un, neu nodwch oedi a hyd ar wahân yn ôl yr angen.
Mae'r cymysgeddau yn anghymeradwy o v3.2.0 , gyda chyflwyniad Autoprefixer. Er mwyn cadw cydnawsedd tuag yn ôl, bydd Bootstrap yn parhau i ddefnyddio'r cymysgeddau yn fewnol tan Bootstrap v4.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}Trawsnewidiadau
Cylchdroi, graddio, cyfieithu (symud), neu ystumio unrhyw wrthrych.
Mae'r cymysgeddau yn anghymeradwy o v3.2.0 , gyda chyflwyniad Autoprefixer. Er mwyn cadw cydnawsedd tuag yn ôl, bydd Bootstrap yn parhau i ddefnyddio'r cymysgeddau yn fewnol tan Bootstrap v4.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}Animeiddiadau
Cymysgedd sengl ar gyfer defnyddio holl briodweddau animeiddio CSS3 mewn un datganiad a chymysgeddau eraill ar gyfer priodweddau unigol.
Mae'r cymysgeddau yn anghymeradwy o v3.2.0 , gyda chyflwyniad Autoprefixer. Er mwyn cadw cydnawsedd tuag yn ôl, bydd Bootstrap yn parhau i ddefnyddio'r cymysgeddau yn fewnol tan Bootstrap v4.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}Didreiddedd
Gosodwch y didreiddedd ar gyfer pob porwr a filterdarparwch wrth gefn ar gyfer IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Testun dalfan
Darparu cyd-destun ar gyfer rheolaethau ffurf ym mhob maes.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}Colofnau
Cynhyrchu colofnau trwy CSS o fewn un elfen.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}Graddiant
Trowch unrhyw ddau liw yn hawdd yn raddiant cefndir. Ewch yn fwy datblygedig a gosodwch gyfeiriad, defnyddiwch dri lliw, neu defnyddiwch raddiant rheiddiol. Gydag un mixin byddwch yn cael yr holl gystrawenau rhagosodedig y bydd eu hangen arnoch.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Gallwch hefyd nodi ongl graddiant llinol safonol dau liw:
#gradient > .directional(#333; #000; 45deg);Os oes angen graddiant steil barbwr arnoch chi, mae hynny'n hawdd hefyd. Nodwch un lliw a byddwn yn troshaenu streipen wen dryloyw.
#gradient > .striped(#333; 45deg);I fyny'r ante a defnyddio tri lliw yn lle. Gosodwch y lliw cyntaf, yr ail liw, stop lliw yr ail liw (gwerth canrannol fel 25%), a'r trydydd lliw gyda'r cymysgeddau hyn:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Pennau i fyny! Os bydd byth angen i chi dynnu graddiant, gwnewch yn siŵr eich bod yn dileu unrhyw IE-benodol y filtergallech fod wedi'i ychwanegu. Gallwch chi wneud hynny trwy ddefnyddio'r .reset-filter()mixin ochr yn ochr â background-image: none;.
Cymysgeddau cyfleustodau
Mae cymysgeddau cyfleustodau yn gymysgeddau sy'n cyfuno priodweddau CSS nad ydynt yn gysylltiedig fel arall i gyflawni nod neu dasg benodol.
Clearfix
Anghofiwch ychwanegu class="clearfix"at unrhyw elfen ac yn lle hynny ychwanegwch y .clearfix()mixin lle bo'n briodol. Yn defnyddio'r gosodiad clir micro gan Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Canoli llorweddol
Canolbwyntiwch yn gyflym ar unrhyw elfen o fewn ei riant. Angen widthneu max-widthi gael ei osod.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Cynorthwywyr maint
Nodwch ddimensiynau gwrthrych yn haws.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Ardaloedd testun y gellir eu hailfeintio
Ffurfweddwch yn hawdd yr opsiynau newid maint ar gyfer unrhyw faes testun, neu unrhyw elfen arall. Rhagosodiadau i ymddygiad arferol porwr ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Torri testun
Torri testun yn hawdd gydag elipsis gydag un mixin. Angen elfen blockneu inline-blocklefel.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Delweddau retina
Nodwch ddau lwybr delwedd a dimensiynau delwedd @1x, a bydd Bootstrap yn darparu ymholiad cyfryngau @2x. Os oes gennych lawer o ddelweddau i'w gwasanaethu, ystyriwch ysgrifennu eich delwedd retina CSS â llaw mewn un ymholiad cyfryngau.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}Gan ddefnyddio Sass
Tra bod Bootstrap wedi'i adeiladu ar Llai, mae ganddo hefyd borthladd Sass swyddogol . Rydym yn ei gadw mewn ystorfa GitHub ar wahân ac yn trin diweddariadau gyda sgript trosi.
Beth sydd wedi'i gynnwys
Gan fod gan borthladd Sass repo ar wahân a'i fod yn gwasanaethu cynulleidfa ychydig yn wahanol, mae cynnwys y prosiect yn wahanol iawn i brif brosiect Bootstrap. Mae hyn yn sicrhau bod y porthladd Sass mor gydnaws â chymaint o systemau seiliedig ar Sass â phosibl.
| Llwybr | Disgrifiad |
|---|---|
lib/ |
Cod gem Ruby (cyfluniad Sass, integreiddiadau Rails a Compass) |
tasks/ |
Sgriptiau trawsnewidydd (troi i fyny'r afon Llai i Sass) |
test/ |
Profion casglu |
templates/ |
Maniffest pecyn cwmpawd |
vendor/assets/ |
Sass, JavaScript, a ffeiliau ffont |
Rakefile |
Tasgau mewnol, fel rhaca a throsi |
Ewch i ystorfa GitHub porthladd Sass i weld y ffeiliau hyn ar waith.
Gosodiad
I gael gwybodaeth ar sut i osod a defnyddio Bootstrap ar gyfer Sass, edrychwch ar readme ystorfa GitHub . Dyma'r ffynhonnell fwyaf diweddar ac mae'n cynnwys gwybodaeth i'w defnyddio gyda phrosiectau Rails, Compass a Sass safonol.