CSS
Socruithe domhanda CSS, buneilimintí HTML stílithe agus feabhsaithe le ranganna sínte, agus ardchóras eangaí.
Forbhreathnú
Faigh síos ar na príomhchodanna de bhonneagar Bootstrap, lena n-áirítear ár gcur chuige maidir le forbairt gréasáin níos fearr, níos tapúla agus níos láidre.
HTML5 doiciméad
Úsáideann Bootstrap gnéithe áirithe HTML agus airíonna CSS a éilíonn úsáid an doctype HTML5. Cuir san áireamh é ag tús do thionscadail ar fad.
<!DOCTYPE html>
<html lang="en">
...
</html>Soghluaiste ar dtús
Le Bootstrap 2, chuireamar stíleanna roghnacha cairdiúil soghluaiste leis le haghaidh príomhghnéithe an chreata. Le Bootstrap 3, tá an tionscadal athscríofa againn chun a bheith cairdiúil don soghluaiste ón tús. In ionad stíleanna soghluaiste roghnacha a chur leis, déantar iad a bhácáil isteach sa chroílár. Go deimhin, tá Bootstrap soghluaiste ar dtús . Is féidir stíleanna soghluaiste den chéad uair a fháil ar fud na leabharlainne ar fad seachas i gcomhaid ar leith.
Chun rindreáil chuí agus súmáil tadhaill a chinntiú, cuir an meitea-chlib amhairc le do <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Is féidir leat cumais súmála a dhíchumasú ar ghléasanna móibíleacha trí chur user-scalable=noleis an meitea-chlib amhaircport. Déanann sé seo súmáil a dhíchumasú, rud a chiallaíonn nach féidir le húsáideoirí scrollú ach amháin, agus braitheann do shuíomh beagán níos mó cosúil le feidhmchlár dúchais dá bharr. Ar an iomlán, ní mholaimid é seo ar gach suíomh, mar sin bí cúramach!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Clóghrafaíocht agus naisc....
Socraíonn Bootstrap bunstíleanna taispeána domhanda, clóghrafaíochta agus naisc. Go sonrach, táimid:
- Socraigh
background-color: #fff;ar anbody - Bain úsáid as an
@font-family-base,@font-size-base, agus@line-height-basetréithe mar ár mbonn clóghrafach - Socraigh dath an naisc dhomhanda tríd
@link-coloragus cuir i bhfeidhm na folínte naisc amháin:hover
Is féidir na stíleanna seo a fháil laistigh de scaffolding.less.
Normalaigh.css
Chun rindreáil trasbhrabhsálaí feabhsaithe, úsáidimid Normalize.css , tionscadal le Nicolas Gallagher agus Jonathan Neal .
Coimeádáin
Teastaíonn eilimint ina bhfuil bootstrap chun inneachar an tsuímh a chumhdach agus chun ár gcóras eangaí a lonnú ann. Féadfaidh tú ceann amháin de dhá choimeádán a roghnú le húsáid i do thionscadail. Tabhair faoi deara, mar gheall ar paddingagus níos mó, nach bhfuil ceachtar coimeádán neadaithe.
Bain úsáid as .containerle haghaidh coimeádán sofhreagrach leithead seasta.
<div class="container">
...
</div>Bain úsáid as .container-fluidle haghaidh coimeádán lánleithead, a chuimsíonn leithead iomlán do amhairc.
<div class="container-fluid">
...
</div>Córas greille
Áirítear le Bootstrap córas greille sreabhán sofhreagrach, soghluaiste den chéad uair a scálaíonn suas le 12 cholún go cuí de réir mar a mhéadaíonn méid an ghléis nó an amhairc. Áiríonn sé ranganna réamhshainithe le haghaidh roghanna leagan amach éasca, chomh maith le meascáin chumhachtacha chun leagan amach níos séimeanaí a ghiniúint .
Réamhrá
Úsáidtear córais eangaí chun leagan amach leathanaigh a chruthú trí shraith sraitheanna agus colúin a chuimsíonn d’inneachar. Seo mar a oibríonn córas eangaí Bootstrap:
- Ní mór sraitheanna a chur laistigh de
.container(leithead seasta) nó.container-fluid(lánleithead) le haghaidh ailíniú cuí agus stuáil. - Úsáid sraitheanna chun grúpaí cothrománacha colún a chruthú.
- Ba chóir ábhar a chur laistigh de cholúin, agus ní fhéadfaidh ach colúin a bheith ina leanaí láithreacha de shraitheanna.
- Is maith le ranganna greille réamhshainithe
.rowagus.col-xs-4tá siad ar fáil chun leagan amach greille a dhéanamh go tapa. Is féidir níos lú meascáin a úsáid freisin le haghaidh leagan amach níos séimeantaí. - Cruthaíonn colúin gáitéir (bearnaí idir ábhar an cholúin) trí
padding. Déantar an stuáil sin a fhritháireamh i sraitheanna don chéad cholún agus don cholún deiridh trí chorrlach diúltach ar.rows. - Is é an corrlach diúltach an fáth a bhfuil na samplaí thíos as an áireamh. Is amhlaidh go mbeidh ábhar laistigh de cholúin ghreille líneáilte le hábhar nach mbaineann leis an eangach.
- Cruthaítear colúin ghreille trí líon na ndá cholún déag is mian leat a réise a shonrú. Mar shampla, d’úsáidfí trí cholún chothroma trí
.col-xs-4. - Má chuirtear níos mó ná 12 cholún laistigh de shraith amháin, cuimseoidh gach grúpa colún breise mar aonad amháin ar líne nua.
- Baineann aicmí greille le gléasanna a bhfuil leithid scáileáin acu atá níos mó ná nó cothrom leis na méideanna briste, agus sáraítear aicmí eangaí atá dírithe ar ghléasanna níos lú. Mar sin, m.sh.
.col-md-*ní amháin go gcuirfidh aicme ar bith le gné difear dá stíliú ar ghléasanna meánacha ach ar ghléasanna móra freisin mura bhfuil.col-lg-*aicme i láthair.
Féach ar na samplaí chun na prionsabail seo a chur i bhfeidhm ar do chód.
Ceisteanna ó na meáin
Bainimid úsáid as na fiosruithe seo a leanas ó na meáin inár gComhaid Lúide chun na príomhphointí briste a chruthú inár gcóras eangaí.
/* 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) { ... }Déanaimid leathnú ar na fiosrúcháin seo ó na meáin ó am go chéile max-widthchun CSS a theorannú go sraith gléasanna níos cúinge a áireamh.
@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) { ... }Roghanna greille
Féach ar an gcaoi a n-oibríonn gnéithe de chóras eangaí Bootstrap thar ilfheistí le tábla áisiúil.
| Fóin gléasanna beaga breise (<768px) | Táibléad gléasanna beaga (≥768px) | Deasc gléasanna meánacha (≥992px) | Deasc gléasanna móra (≥1200px) | |
|---|---|---|---|---|
| Iompar greille | Cothrománach i gcónaí | Laghdaigh chun tosaigh, cothrománach os cionn bristephointí | ||
| Leithead coimeádán | Dada (uathoibríoch) | 750px | 970px | 1170px |
| Réimír ranga | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # colún | 12 | |||
| Leithead an cholúin | Auto | ~62px | ~81px | ~97px |
| Leithead gutter | 30px (15px ar gach taobh de cholún) | |||
| Neadaí | Tá | |||
| Fritháireamh | Tá | |||
| Ordú colún | Tá | |||
Sampla: Cruachta-go-cothrománach
Ag baint úsáide as sraith amháin de .col-md-*ranganna greille, is féidir leat córas greille bunúsach a chruthú a thosaíonn amach cruachta ar ghléasanna soghluaiste agus gléasanna táibléid (an raon breise idir beag agus beag) sula n-éireoidh sé cothrománach ar ghléasanna deisce (meán). Cuir colúin ghreille in aon .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>Sampla: Coimeádán sreabhán
Déan leagan amach lánleithead ar aon leagan amach eangaí ar leithead seasta trí do chuid is forimeallaí .containera athrú go .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Sampla: Soghluaiste agus deasc
Nár mhaith leat do cholúin a chruachadh i ngléasanna níos lú? Bain úsáid as na ranganna breise greille gléasanna beaga agus meánmhéide trí chur .col-xs-* .col-md-*le do cholúin. Féach ar an sampla thíos le haghaidh smaoineamh níos fearr ar conas a oibríonn sé ar fad.
.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>Sampla: Soghluaiste, táibléad, deasc
Tóg ar an sampla roimhe seo trí leagan amach níos dinimiciúla agus níos cumhachtaí a chruthú le .col-sm-*ranganna táibléid.
.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>Sampla: Colún fillte
Má chuirtear níos mó ná 12 cholún laistigh de shraith amháin, cuimseoidh gach grúpa colún breise mar aonad amháin ar líne nua.
.col-xs-9
.col-xs-4
Ós rud é 9 + 4 = 13 > 12, filltear an div 4 cholún seo ar líne nua mar aonad tadhlach amháin.
Ós rud é 9 + 4 = 13 > 12, filltear an div 4 cholún seo ar líne nua mar aonad tadhlach amháin.
.col-xs-6
Leanann colúin ina dhiaidh sin feadh na líne nua.
Leanann colúin ina dhiaidh sin feadh na líne nua.
<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>Athshocraíonn colún sofhreagrach
Agus na ceithre shraith eangacha ar fáil beidh ort dul i ngleic le saincheisteanna nach nglanann do cholúin i gceart ag briseadhphointí áirithe mar go bhfuil ceann amháin níos airde ná an ceann eile. Chun é sin a shocrú, bain úsáid as meascán de .clearfixagus ár ranganna fóntais sofhreagracha .
.col-xs-6 .col-sm-3
Athraigh do radharc nó seiceáil amach ar do ghuthán le haghaidh sampla.
Athraigh do radharc nó seiceáil amach ar do ghuthán le haghaidh sampla.
.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>Chomh maith le himréiteach colún ag brisphointí sofhreagracha, b'fhéidir go mbeadh ort fritháirimh a athshocrú, brú nó tarraingt . Féach é seo i ngníomh sa sampla greille .
<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>Colúin fhritháireamh
Bog na colúin ar dheis ag úsáid .col-md-offset-*ranganna. Méadaíonn na haicmí seo imeall clé colúin de réir *colúin. Mar shampla, .col-md-offset-4bogann sé .col-md-4thar cheithre cholún.
.col-md-4
.col-md-4 .col-md-fritháireamh-4
.col-md-3 .col-md-fritháireamh-3
.col-md-3 .col-md-fritháireamh-3
.col-md-6 .col-md-fritháireamh-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>Is féidir leat freisin fritháirimh ó shraitheanna greille níos ísle a shárú le .col-*-offset-0ranganna.
<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>Colúin neadaithe
Chun d'ábhar a neadú leis an eangach réamhshocraithe, cuir sraith nua .rowagus sraith .col-sm-*colún laistigh de .col-sm-*cholún atá ann cheana féin. Ba cheart go gcuimseodh sraitheanna neadaithe sraith colún a chuireann suas le 12 nó níos lú (níl sé riachtanach go n-úsáideann tú gach ceann de na 12 cholún atá ar fáil).
Leibhéal 1: .col-sm-9
Leibhéal 2: .col-xs-8 .col-sm-6
Leibhéal 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>Ordú colún
Athraigh ord ár gcolún greille ionsuite go héasca le .col-md-push-*ranganna .col-md-pull-*mionathraithe.
.col-md-9 .col-md-bhrú-3
.col-md-3 .col-md-tarraingt-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>Níos lú meascáin agus athróg
Chomh maith le ranganna greille réamhthógtha do leagan amach tapa, cuimsíonn Bootstrap Lúide athróg agus meascáin chun do leagan amach simplí, shéimeantach féin a ghiniúint go tapa.
Athróga
Cinneann athróga líon na gcolún, leithead an gháitéir, agus pointe fiosrúcháin na meán ag a gcuirfear tús le colúin ar snámh. Bainimid úsáid astu seo chun na haicmí greille réamhshainithe atá doiciméadaithe thuas a ghiniúint, chomh maith le haghaidh na meascáin shaincheaptha atá liostaithe thíos.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Meascáin
Úsáidtear meascáin i gcomhar leis na hathróga eangaí chun CSS shéimeantach a ghiniúint do cholúin ghreille aonair.
// 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));
}
}Sampla úsáide
Is féidir leat na hathróga a mhodhnú le do luachanna saincheaptha féin, nó úsáid a bhaint as na meascáin lena luachanna réamhshocraithe. Seo sampla de na socruithe réamhshocraithe a úsáid chun leagan amach dhá cholún a chruthú le bearna idir.
.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>Clóghrafaíocht
Ceannteidil
Tá gach ceannteideal HTML, <h1>trí <h6>, ar fáil. .h1trí .h6ranganna ar fáil freisin, le haghaidh nuair is mian leat a mheaitseáil leis an stíl cló ceannteidil ach fós ag iarraidh do téacs a thaispeáint inlíne.
h1. Ceannteideal Bootstrap |
Leathcheann 36px |
h2. Ceannteideal Bootstrap |
Leathcheann 30px |
h3. Ceannteideal Bootstrap |
Leathcheann 24px |
h4. Ceannteideal Bootstrap |
Leathcheann 18px |
h5. Ceannteideal Bootstrap |
Leathcheann 14px |
h6. Ceannteideal Bootstrap |
Leathcheann 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>Cruthaigh téacs tánaisteach níos éadroime in aon cheannteideal le <small>clib cineálach nó leis an .smallrang.
h1. Teideal Bootstrap Téacs tánaisteach |
h2. Teideal Bootstrap Téacs tánaisteach |
h3. Teideal Bootstrap Téacs tánaisteach |
h4. Teideal Bootstrap Téacs tánaisteach |
h5. Teideal Bootstrap Téacs tánaisteach |
h6. Teideal Bootstrap Téacs tánaisteach |
<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>Cóip coirp
Is é réamhshocrú domhanda Bootstrap font-sizená 14px , line-heightle 1.428px . Cuirtear é seo i bhfeidhm ar na <body>hailt agus ar na hailt go léir. Ina theannta sin, <p>faigheann (míreanna) corrlach íochtair leath a n-airde líne ríofa (10px de réir réamhshocraithe).
Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Le 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. Donec id elit non mi porta gravida agus eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>Cóip comhlacht luaidhe
Déan alt seasamh amach trí chur leis .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor dolor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>Tógtha le Níos lú
Tá an scála clóghrafach bunaithe ar dhá athróg Lúide in athróga . gan : @font-size-baseagus @line-height-base. Is é an chéad cheann an clómhéid a úsáidtear tríd síos agus is é an dara ceann an bonnlíne airde. Bainimid úsáid as na hathróga sin agus roinnt mata simplí chun na himill, na stuáil, agus na hairde líne de gach cineál againn agus níos mó a chruthú. Déan iad a shaincheapadh agus déanann Bootstrap iad a oiriúnú.
Eilimintí téacs inlíne
Téacs marcáilte
Le béim a chur ar shraith téacs mar gheall ar a ábharthacht i gcomhthéacs eile, úsáid an <mark>chlib.
Is féidir leat an chlib marc a úsáid chunaird a tharraingttéacs.
You can use the mark tag to <mark>highlight</mark> text.Téacs scriosta
Chun bloic téacs a scriosadh a léiriú, úsáid an <del>chlib.
Tá sé i gceist go ndéileálfaí leis an líne téacs seo mar théacs scriosta.
<del>This line of text is meant to be treated as deleted text.</del>Téacs stailc tríd
<s>Úsáid an chlib chun bloic téacs nach bhfuil ábhartha a thuilleadh a léiriú .
Tá sé i gceist go ndéileálfar leis an líne téacs seo mar rud nach bhfuil cruinn a thuilleadh.
<s>This line of text is meant to be treated as no longer accurate.</s>Téacs curtha isteach
Chun breisithe leis an doiciméad a chur in iúl, úsáid an <ins>chlib.
Tá sé i gceist go ndéileálfaí leis an líne téacs seo mar bhreis ar an doiciméad.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Téacs a bhfuil líne faoi
Úsáid an <u>chlib chun an téacs a aibhsiú.
Déanfaidh an líne seo téacs mar a bhfuil líne faoi
<u>This line of text will render as underlined</u>Bain úsáid as clibeanna béime réamhshocraithe HTML le stíleanna éadroma.
Téacs beag
Chun inlíne nó bloic téacs a dhíbhéim, bain úsáid as an <small>chlib chun an téacs a shocrú ag 85% de mhéid an tuismitheora. Faigheann eilimintí ceannteidil a gcuid féin font-sizele haghaidh eilimintí neadaithe <small>.
De rogha air sin is féidir leat eilimint inlíne a úsáid .smallin ionad aon chuid <small>.
Tá sé i gceist go ndéileálfaí leis an líne téacs seo mar phriontáil mhín.
<small>This line of text is meant to be treated as fine print.</small>Trom
Chun béim a chur ar phíosa téacs le meáchan cló níos troime.
Tá an píosa téacs seo a leanas rindreáilte mar théacs trom .
<strong>rendered as bold text</strong>iodálach
Chun béim a chur ar phíosa téacs le cló iodálach.
Léirítear an píosa téacs seo a leanas mar théacs iodálach .
<em>rendered as italicized text</em>Eilimintí malartacha
Thig leat a úsáid <b>agus <i>i HTML5. <b>Tá sé i gceist focail nó frásaí a aibhsiú gan tábhacht bhreise a chur in iúl agus <i>é don chuid is mó do ghuthú, téarmaí teicniúla, etc.
Ranganna ailínithe
Téacs a athailíniú go héasca le comhpháirteanna le ranganna ailínithe téacs.
Téacs ailínithe ar chlé.
Téacs ailínithe sa lár.
Téacs ailínithe ar dheis.
Téacs inchosanta.
Gan téacs fillte.
<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>Ranganna claochlaithe
Téacs a athrú ina chomhpháirteanna le ranganna caipitlithe téacs.
Téacs i gcás íochtair.
Téacs chás uachtair.
Téacs caipitlithe.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Giorrúcháin
Cur i bhfeidhm stílithe <abbr>eilimint HTML do ghiorrúcháin agus acrainmneacha chun an leagan leathnaithe ar ainlíon a thaispeáint. titleTá bunteorainn poncaithe éadrom agus cúrsóir cabhrach ar ainliú ag giorraithe a bhfuil tréith acu, rud a chuireann comhthéacs breise ar ainliú agus d’úsáideoirí teicneolaíochtaí cúnta.
Giorrúchán bunúsach
Giorrúchán den tréith focal is ea attr .
<abbr title="attribute">attr</abbr>Túslitríocht
Cuir .initialismle giorrúchán le haghaidh clómhéid atá beagán níos lú.
Is é HTML an rud is fearr ó arán slisnithe.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Seoltaí
Cuir eolas teagmhála i láthair don sinsear is gaire nó don chorpas iomlán oibre. Caomhnaigh an fhormáidiú trí gach líne a chríochnú le <br>.
Twitter, Inc.
1355 Sráid an Mhargaidh, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Ainm Iomlán
[email protected]
1355 Sráid an Mhargaidh, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Ainm Iomlán
[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
Chun bloic ábhar a lua ó fhoinse eile laistigh de do dhoiciméad.
Blockquote réamhshocraithe
Wrap <blockquote>thart ar aon HTML mar an ceanglófar. Le haghaidh Sleachta díreach, molaimid <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Roghanna Blockquote
Athruithe ar stíl agus ar ábhar le haghaidh athruithe simplí ar chaighdeán <blockquote>.
Foinse a ainmniú
Cuir <footer>leis chun an fhoinse a shainaithint. Wrap ainm an tsaothair foinse i <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a 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>Taispeántais mhalartacha
Cuir .blockquote-reverseleis le haghaidh blocchuóta a bhfuil inneachar ceart-ailínithe leis.
<blockquote class="blockquote-reverse">
...
</blockquote>Liostaí
Neamhordúil
Liosta míreanna nach mbaineann an t-ordú go sainráite leo .
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Slánuimhir molestie lorem ag massa
- Facilisis i pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttititor sem
- Ac tristique libero volutpat ag
- Faucibus porta lacus fringilla nó
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>D'ordaigh
Liosta de na míreanna ina bhfuil ábhar sainráite san ord.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Slánuimhir molestie lorem ag massa
- Facilisis i pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla nó
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Gan stíl
Bain an list-stylecorrlach réamhshocraithe agus clé ar mhíreanna liosta (leanaí láithreacha amháin). Ní bhaineann sé seo ach le míreanna liostaí leanaí láithreacha , rud a chiallaíonn go mbeidh ort an rang a chur le haon liostaí neadaithe freisin.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Slánuimhir molestie lorem ag massa
- Facilisis i pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttititor sem
- Ac tristique libero volutpat ag
- Faucibus porta lacus fringilla nó
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>I líne
Cuir na míreanna liosta go léir ar líne amháin display: inline-block;agus roinnt stuáil éadrom.
- Ipsum
- Phasellus iaculis
- Níl ort ach
<ul class="list-inline">
<li>...</li>
</ul>Cur síos
Liosta téarmaí agus na tuairiscí a bhaineann leo.
- Liostaí cur síos
- Tá liosta tuairisce foirfe chun téarmaí a shainiú.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida agus eget metus.
- Porta Malesuada
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Cur síos cothrománach
Déan téarmaí agus tuairiscí i <dl>líne suas taobh le taobh. Tosaíonn sé cruachta cosúil le <dl>s réamhshocraithe, ach nuair a leathnaíonn an barra nascleanúna, déan iad seo.
- Liostaí cur síos
- Tá liosta tuairisce foirfe chun téarmaí a shainiú.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida agus eget metus.
- Porta 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>Uath-theascadh
Teascóidh liostaí tuairisce cothrománacha téarmaí atá ró-fhada le luí sa cholún ar chlé le text-overflow. I gcláir amhairc níos cúinge, athróidh siad go dtí an leagan amach réamhshocraithe cruachta.
Cód
I líne
Wrap sleachta inlíne den chód le <code>.
Mar shampla,
<section>ba chóir a bheith fillte mar inlíne.
For example, <code><section></code> should be wrapped as inline.Ionchur úsáideora
Úsáid an <kbd>chun ionchur a chuirtear isteach de ghnáth tríd an méarchlár a léiriú.
Chun comhadlanna a athrú, clóscríobh
cdagus ainm an eolaire ina dhiaidh sin.
Chun socruithe a chur in eagar, brúigh ctrl + ,
Chun socruithe a chur in eagar, brúigh 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 bunúsach
Úsáid <pre>le haghaidh línte iolracha de chód. Bí cinnte éalú ó aon lúibíní uillinne sa chód le haghaidh rindreála cuí.
<p>Téacs samplach anseo...</p>
<pre><p>Sample text here...</p></pre>Is féidir leat an rang a chur leis go roghnach .pre-scrollable, a shocróidh uasairde 350px agus a sholáthróidh scrollbharra y-ais.
Athróga
<var>Úsáid an chlib chun athróga a léiriú .
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Aschur samplach
Chun bloic a léiriú as aschur samplach ó chlár bain úsáid as an <samp>gclib.
Tá sé i gceist an téacs seo a láimhseáil mar aschur samplach ó ríomhchlár.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Táblaí
Sampla bunúsach
Maidir le stíliú bunúsach - stuáil éadrom agus gan ach roinnteoirí cothrománacha - cuir an bunrang .tablele haon <table>. Seans go bhfuil cuma ró-iomarcach air, ach i bhfianaise an úsáid fhorleathan a bhaintear as táblaí le haghaidh breiseán eile ar nós féilirí agus roghnóirí dáta, roghnaigh muid ár stíleanna tábla saincheaptha a leithlisiú.
| # | Ainm | Sloinne | Ainm úsáideora |
|---|---|---|---|
| 1 | Marcáil | Otto | @mdo |
| 2 | Iacób | Thornton | @saille |
| 3 | Larry | an t-éan |
<table class="table">
...
</table>Sraitheanna stiallacha
Bain úsáid as .table-stripedchun stiallacha séabra a chur le haon ró tábla laistigh den <tbody>.
Comhoiriúnacht tras-bhrabhsálaí
Stílítear táblaí stiallacha tríd an :nth-childroghnóir CSS, nach bhfuil ar fáil in Internet Explorer 8.
| # | Ainm | Sloinne | Ainm úsáideora |
|---|---|---|---|
| 1 | Marcáil | Otto | @mdo |
| 2 | Iacób | Thornton | @saille |
| 3 | Larry | an t-éan |
<table class="table table-striped">
...
</table>Tábla teorann
Cuir .table-borderedle haghaidh teorainneacha ar gach taobh den tábla agus cealla.
| # | Ainm | Sloinne | Ainm úsáideora |
|---|---|---|---|
| 1 | Marcáil | Otto | @mdo |
| 2 | Iacób | Thornton | @saille |
| 3 | Larry | an t-éan |
<table class="table table-bordered">
...
</table>Sraitheanna ainlíonn
Cuir .table-hoverleis chun staid ainlithe a chumasú ar na sraitheanna boird laistigh de <tbody>.
| # | Ainm | Sloinne | Ainm úsáideora |
|---|---|---|---|
| 1 | Marcáil | Otto | @mdo |
| 2 | Iacób | Thornton | @saille |
| 3 | Larry | an t-éan |
<table class="table table-hover">
...
</table>Tábla comhdhlúite
Cuir .table-condensedleis na táblaí a dhéanamh níos dlúithe trí stuáil cille a ghearradh ina dhá leath.
| # | Ainm | Sloinne | Ainm úsáideora |
|---|---|---|---|
| 1 | Marcáil | Otto | @mdo |
| 2 | Iacób | Thornton | @saille |
| 3 | Larry an t-éan | ||
<table class="table table-condensed">
...
</table>Ranganna comhthéacsúla
Úsáid ranganna comhthéacsúla chun sraitheanna boird nó cealla aonair a dhathú.
| Aicme | Cur síos |
|---|---|
.active |
Cuirtear an dath hover i bhfeidhm ar ró nó ar chill ar leith |
.success |
Léiríonn gníomh rathúil nó dearfach |
.info |
Léiríonn sé athrú nó gníomh neodrach faisnéiseach |
.warning |
Tugann sé le fios rabhadh a bhféadfadh gá aird a thabhairt air |
.danger |
Léiríonn gníomh contúirteach nó a d’fhéadfadh a bheith diúltach |
| # | Ceannteideal colún | Ceannteideal colún | Ceannteideal colún |
|---|---|---|---|
| 1 | Ábhar colún | Ábhar colún | Ábhar colún |
| 2 | Ábhar colún | Ábhar colún | Ábhar colún |
| 3 | Ábhar colún | Ábhar colún | Ábhar colún |
| 4 | Ábhar colún | Ábhar colún | Ábhar colún |
| 5 | Ábhar colún | Ábhar colún | Ábhar colún |
| 6 | Ábhar colún | Ábhar colún | Ábhar colún |
| 7 | Ábhar colún | Ábhar colún | Ábhar colún |
| 8 | Ábhar colún | Ábhar colún | Ábhar colún |
| 9 | Ábhar colún | Ábhar colún | Ábhar colún |
<!-- 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>Brí a chur in iúl do theicneolaíochtaí cúnta
Ní sholáthraíonn dath a úsáid chun brí a chur le ró tábla nó le cill aonair ach tásc amhairc, nach gcuirfear in iúl d’úsáideoirí teicneolaíochtaí cúnta – mar léitheoirí scáileáin. Cinntigh go bhfuil an t-eolas a shanntar leis an dath soiléir ón ábhar féin (an téacs infheicthe sa ró tábla/cill ábhartha), nó go n-áirítear í ar mhodhanna eile, mar théacs breise i bhfolach leis an .sr-onlyrang.
Táblaí sofhreagracha
Cruthaigh táblaí sofhreagracha trí aon cheann a fhilleadh .tableisteach .table-responsivechun iad a dhéanamh scrollaigh go cothrománach ar ghléasanna beaga (faoi 768px). Agus tú ag breathnú ar rud ar bith níos mó ná 768px ar leithead, ní fheicfidh tú aon difríocht sna táblaí seo.
Bearradh ingearach / teascadh
Baineann táblaí sofhreagracha úsáid as overflow-y: hidden, a ghearrann amach aon ábhar a théann thar imeall bun nó barr an tábla. Go háirithe, is féidir leis seo roghchláir anuas agus giuirléidí tríú páirtí eile a ghearradh amach.
Firefox agus réimsí
Tá roinnt stílithe réimse corracha ag Firefox a widthchuireann isteach ar an tábla sofhreagrach. Ní féidir é seo a shárú gan hac a bhaineann go sonrach le Firefox nach gcuirimid ar fáil i Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Le haghaidh tuilleadh faisnéise, léigh an freagra Stack Overflow .
| # | Ceannteideal tábla | Ceannteideal tábla | Ceannteideal tábla | Ceannteideal tábla | Ceannteideal tábla | Ceannteideal tábla |
|---|---|---|---|---|---|---|
| 1 | cill tábla | cill tábla | cill tábla | cill tábla | cill tábla | cill tábla |
| 2 | cill tábla | cill tábla | cill tábla | cill tábla | cill tábla | cill tábla |
| 3 | cill tábla | cill tábla | cill tábla | cill tábla | cill tábla | cill tábla |
| # | Ceannteideal tábla | Ceannteideal tábla | Ceannteideal tábla | Ceannteideal tábla | Ceannteideal tábla | Ceannteideal tábla |
|---|---|---|---|---|---|---|
| 1 | cill tábla | cill tábla | cill tábla | cill tábla | cill tábla | cill tábla |
| 2 | cill tábla | cill tábla | cill tábla | cill tábla | cill tábla | cill tábla |
| 3 | cill tábla | cill tábla | cill tábla | cill tábla | cill tábla | cill tábla |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Foirmeacha
Sampla bunúsach
Faigheann rialuithe foirm aonair roinnt stílithe domhanda go huathoibríoch. Socraítear gach gné théacsúil <input>, <textarea>, agus <select>eilimint le .form-controlgo width: 100%;réamhshocraithe. Cuir lipéid agus rialtáin isteach .form-groupchun an spásáil is fearr is féidir a fháil.
<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>Ná measc grúpaí foirme le grúpaí ionchuir
Ná measc grúpaí foirme go díreach le grúpaí ionchuir . Ina áit sin, neadaigh an grúpa ionchuir taobh istigh den fhoirmghrúpa.
Foirm inlíne
Cuir .form-inlinele d'fhoirm (nach gá a bheith ina <form>) le haghaidh rialuithe atá ailínithe ar chlé agus inlíne. Ní bhaineann sé seo ach le foirmeacha laistigh de phoirt amhairc atá 768px ar a laghad ar leithead.
Seans go mbeidh leithid saincheaptha de dhíth
Cuireadh ionchuir agus roghanna width: 100%;i bhfeidhm de réir réamhshocraithe i Bootstrap. Laistigh de na foirmeacha inlíne, athshocraímid gur width: auto;féidir le rialuithe iolracha maireachtáil ar an líne chéanna. Ag brath ar do leagan amach, d'fhéadfadh go mbeadh leithid de shaincheapadh breise ag teastáil.
Cuir lipéid leis i gcónaí
Beidh trioblóid ag léitheoirí scáileáin le d’fhoirmeacha mura n-áiríonn tú lipéad do gach ionchur. Maidir leis na foirmeacha inlíne seo, is féidir leat na lipéid a cheilt ag baint úsáide as an .sr-onlyrang. Tá modhanna malartacha eile ann chun lipéad a sholáthar do theicneolaíochtaí cúnta, amhail an aria-label, aria-labelledbynó an titleaitreabúid. Mura bhfuil aon cheann díobh seo i láthair, féadfaidh léitheoirí scáileáin úsáid a bhaint as an placeholdertréith, más ann dóibh, ach tabhair faoi deara placeholdernach moltar é a úsáid in ionad modhanna eile lipéadaithe.
<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>Foirm chothrománach
Úsáid ranganna greille réamhshainithe Bootstrap chun lipéid agus grúpaí de rialuithe foirmeacha a ailíniú i leagan amach cothrománach trí chur .form-horizontalleis an bhfoirm (nach gá a bheith ina <form>). Athraítear é sin .form-grouple hiompar mar sraitheanna eangaí, mar sin ní gá .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>Rialuithe tacaithe
Samplaí de rialuithe caighdeánacha foirme tacaithe i leagan amach foirme samplach.
Ionchuir
Rialú foirmeacha is coitianta, réimsí ionchuir téacs-bhunaithe. Áirítear leis tacaíocht do gach cineál HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, agus color.
Dearbhú cineáil ag teastáil
Ní dhéanfar ionchuir a stíliú go hiomlán ach amháin má typedhearbhaítear i gceart iad.
<input type="text" class="form-control" placeholder="Text input">Grúpaí ionchuir
Chun téacs nó cnaipí comhtháite a chur leis roimh agus/nó tar éis aon téacsbhunaithe <input>, seiceáil amach comhpháirt an ghrúpa ionchuir .
Réimse téacs
Rialú foirme a thacaíonn le línte iolracha téacs. Athraigh rowsan tréith de réir mar is gá.
<textarea class="form-control" rows="3"></textarea>Seiceálacha agus raidiónna
Tá ticbhoscaí ann chun rogha amháin nó roinnt roghanna a roghnú i liosta, agus tá raidiónna chun rogha amháin a roghnú as go leor.
Tacaítear le ticbhoscaí agus raidiónna do dhaoine faoi mhíchumas, ach chun cúrsóir “neamhcheadaithe” a sholáthar ar ainlíon an tuismitheora <label>, beidh ort an .disabledrang a chur leis an tuismitheoir .radio, .radio-inline, .checkbox, nó .checkbox-inline.
Réamhshocrú (cruachta)
<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>Seiceálaithe agus raidiónna inlíne
Bain úsáid as na .checkbox-inlinenó na .radio-inlineranganna ar shraith ticbhoscaí nó raidiónna le haghaidh rialuithe atá le feiceáil ar an líne chéanna.
<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>Seiceálacha agus raidiónna gan lipéad téacs
Mura bhfuil aon téacs agat laistigh den <label>, tá an t-ionchur suite mar a bheifeá ag súil leis. Faoi láthair ní oibríonn sé ach ar bhoscaí seiceála agus raidiónna neamh-inlíne. Ná déan dearmad lipéad de chineál éigin a sholáthar do theicneolaíochtaí cúnta (mar shampla, ag baint úsáide as 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>Roghnaíonn
Tabhair faoi deara go bhfuil coirnéil chothromaithe ag go leor roghchláir dhúchasacha - eadhon i Safari agus Chrome - nach féidir a mhodhnú trí border-radiusairíonna.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Maidir <select>le rialuithe leis an multipletréith, taispeántar roghanna iolracha de réir réamhshocraithe.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Rialú statach
Nuair is gá duit gnáth-théacs a chur in aice le lipéad foirme laistigh d’fhoirm, bain úsáid as an .form-control-staticrang 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>Staid fócais
Bainimid na outlinestíleanna réamhshocraithe ar roinnt rialuithe foirme agus cuirimid box-shadowi bhfeidhm ina áit do :focus.
:focusStaid taispeána
Úsáideann an t-ionchur sampla thuas stíleanna saincheaptha inár ndoiciméid chun an :focusstaid ar .form-control.
Stát faoi mhíchumas
Cuir an disabledtréith Boole ar ionchur chun idirghníomhaíochtaí úsáideoirí a chosc. Tá cuma níos éadroime ar ionchuir faoi mhíchumas agus cuireann siad not-allowedcúrsóir leis.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Sraitheanna páirce faoi mhíchumas
Cuir an disabledtréith le a <fieldset>chun na rialuithe go léir laistigh den <fieldset>am céanna a dhíchumasú.
Caveat faoi fheidhmiúlacht nasc de<a>
De réir réamhshocraithe, déileálfaidh brabhsálaithe le gach rialtán foirm dhúchasach ( <input>, <select>agus <button>eilimintí) taobh istigh de a <fieldset disabled>bheith díchumasaithe, ag cosc ar idirghníomhaíochtaí méarchláir agus lucha araon. Mar sin féin, má tá gnéithe san fhoirm ar do fhoirm freisin <a ... class="btn btn-*">, ní thabharfar ach stíl pointer-events: none. Mar a luadh sa rannán faoi staid mhíchumais le haghaidh cnaipí (agus go háirithe san fho-roinn le haghaidh eilimintí ancaire), níl an t-airí CSS seo caighdeánaithe go fóill agus ní thugtar tacaíocht iomlán dó in Opera 18 agus thíos, nó in Internet Explorer 11, agus bhuaigh sé Ní chuireann cosc ar úsáideoirí méarchláir na naisc seo a dhíriú nó a ghníomhachtú. Chun a bheith sábháilte, bain úsáid as JavaScript saincheaptha chun naisc den sórt sin a dhíchumasú.
Comhoiriúnacht tras-bhrabhsálaí
Cé go gcuirfidh Bootstrap na stíleanna seo i bhfeidhm i ngach brabhsálaí, ní thacaíonn Internet Explorer 11 agus thíos go hiomlán leis an disabledtréith ar <fieldset>. Úsáid JavaScript saincheaptha chun an réimse réimse sna brabhsálaithe seo a dhíchumasú.
<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>Luaigh inléite amháin
Cuir an readonlyaitreabúid Boole ar ionchur chun mionathrú ar luach an ionchuir a chosc. Tá cuma níos éadroime ar ionchuir inléite amháin (cosúil le hionchuir faoi mhíchumas), ach coinníonn siad an cúrsóir caighdeánach.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Téacs cabhrach
Téacs cabhrach leibhéal bloc le haghaidh rialuithe foirmeacha.
Téacs cabhrach a nascadh le rialuithe foirmeacha
Ba cheart go mbeadh baint shoiléir ag téacs cabhrach leis an rialú foirme a bhaineann leis an aria-describedbytréith a úsáid. Cinnteoidh sé seo go bhfógróidh teicneolaíochtaí cúnta - mar léitheoirí scáileáin - an téacs cabhrach seo nuair a dhíríonn an t-úsáideoir nó nuair a théann an t-úsáideoir isteach sa rialú.
<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>Staideanna bailíochtaithe
Áirítear le Bootstrap stíleanna bailíochtaithe le haghaidh earráidí, rabhaidh, agus stáit ratha ar rialuithe foirmeacha. Chun , .has-warning, .has-error, nó .has-successan tuismitheoir eilimint a úsáid, a chur leis. Gheobhaidh aon .control-label, .form-control, agus .help-blocklaistigh den eilimint sin na stíleanna bailíochtaithe.
Staid bailíochtaithe a thabhairt do theicneolaíochtaí cúnta agus d'úsáideoirí dall-datha
Ní sholáthraíonn úsáid na stíleanna bailíochtaithe seo chun staid rialaithe foirme a léiriú ach tásc amhairc, dath-bhunaithe, nach gcuirfear in iúl d'úsáideoirí teicneolaíochtaí cúnta - mar léitheoirí scáileáin - ná d'úsáideoirí dath-dall.
Cinntigh go gcuirtear léiriú eile ar staid ar fáil freisin. Mar shampla, is féidir leat leid ar staid a chur san áireamh i <label>dtéacs an rialaithe foirme féin (mar atá sa chódshampla seo a leanas), cuir Glyphicon san áireamh (le téacs malartach cuí ag baint úsáide as an .sr-onlyrang - féach na samplaí Glyphicon ), nó trí bloc téacs cabhrach breise . Go sonrach maidir le teicneolaíochtaí cúnta, is féidir aria-invalid="true"tréith a shannadh freisin do rialuithe foirme neamhbhailí.
<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>Le deilbhíní roghnacha
Is féidir leat deilbhíní aiseolais roghnacha a chur leis freisin .has-feedbackagus an deilbhín ceart a chur leo.
Ní oibríonn deilbhíní aiseolais ach le <input class="form-control">heilimintí téacsacha.
Deilbhíní, lipéid, agus grúpaí ionchuir
Tá gá le deilbhíní aiseolais a shuíomh de láimh le haghaidh ionchuir gan lipéad agus le haghaidh grúpaí ionchuir a bhfuil breiseán acu ar dheis. Moltar go láidir duit lipéid a sholáthar do gach ionchur ar chúiseanna inrochtaineachta. Más mian leat cosc a chur ar lipéid a thaispeáint, cuir i bhfolach iad leis an .sr-onlyrang. Más gá duit a dhéanamh gan lipéid, coigeartaigh topluach an deilbhín aiseolais. Maidir le grúpaí ionchuir, coigeartaigh an rightluach go luach picteilín cuí ag brath ar leithead do bhreiseáin.
An bhrí atá leis an íocón a chur in iúl do theicneolaíochtaí cúnta
Chun a chinntiú go gcuireann teicneolaíochtaí cúnta - ar nós léitheoirí scáileáin - in iúl i gceart an bhrí atá le íocón, ba chóir téacs breise i bhfolach a chur san áireamh leis an .sr-onlyrang agus é a nascadh go sainráite leis an rialú foirme a mbaineann sé le húsáid aria-describedby. Mar mhalairt air sin, cinntigh go gcuirtear an bhrí (mar shampla, an fhíric go bhfuil rabhadh ann do réimse iontrála téacs ar leith) in iúl i bhfoirm éigin eile, mar shampla téacs an fhíorais a <label>bhaineann le rialú na foirme a athrú.
Cé go luann na samplaí seo a leanas cheana staid bhailíochtaithe a rialuithe foirme faoi seach sa <label>téacs féin, tá an teicníocht thuas (ag úsáid .sr-onlytéacs agus aria-describedby) curtha san áireamh chun críocha léiriúcháin.
<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>Deilbhíní roghnacha i bhfoirmeacha cothrománacha agus inlíne
<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>Deilbhíní roghnacha le .sr-onlylipéid fholaithe
Má úsáideann tú an .sr-onlyrang chun rialtáin fhoirme a cheilt <label>(seachas roghanna lipéadaithe eile a úsáid, mar an aria-labeltréith), déanfaidh Bootstrap suíomh an íocón a choigeartú go huathoibríoch nuair a bheidh sé curtha leis.
(rath)
@
(rath)
<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>Rialú méid
Socraigh airde ag baint úsáide as ranganna mar .input-lg, agus socraigh leithead ag baint úsáide as ranganna colúin ghreille mar .col-lg-*.
Méid airde
Cruthaigh rialuithe foirmeacha níos airde nó níos giorra a mheaitseálann méideanna na gcnaipí.
<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>Méideanna grúpaí foirmeacha cothrománacha
Méid go tapa lipéid agus foirm rialuithe laistigh de .form-horizontaltrí chur leo .form-group-lgnó .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>Méid an cholúin
Fillte ionchuir i gcolúin ghreille, nó aon eilimint tuismitheora saincheaptha, chun na leithid atá ag teastáil a fhorfheidhmiú go héasca.
<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>Cnaipí
Clibeanna cnaipe
Bain úsáid as na ranganna cnaipe ar eilimint <a>, <button>, nó .<input>
<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">Úsáid comhthéacs-shonrach
Cé gur féidir ranganna cnaipí a úsáid ar <a>agus <button>eilimintí, ní <button>thacaítear ach le heilimintí laistigh dár gcomhpháirteanna nascleanúna agus barra loingseoireachta.
Naisc ag gníomhú mar cnaipí
Má <a>úsáidtear na heilimintí chun feidhmiú mar chnaipí – rud a spreagann feidhmiúlacht laistigh den leathanach, seachas a bheith ag nascleanúint chuig doiciméad nó rannán eile laistigh den leathanach reatha – ba cheart leathanach cuí a thabhairt dóibh freisin role="button".
Rindreáil trasbhrabhsálaí
Mar chleachtas is fearr, molaimid go mór an <button>eilimint a úsáid nuair is féidir chun rindreáil trasbhrabhsálaí meaitseála a chinntiú.
I measc rudaí eile, tá fabht i Firefox <30 a chuireann cosc orainn na cnaipí line-heightde- <input>bhunaithe a shocrú, rud a fhágann nach meaitseálann siad go díreach airde na gcnaipí eile ar Firefox.
Roghanna
Bain úsáid as aon cheann de na ranganna cnaipe atá ar fáil chun cnaipe stílithe a chruthú go tapa.
<!-- 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>Brí a chur in iúl do theicneolaíochtaí cúnta
Ní thugann úsáid dathanna chun brí a chur le cnaipe ach tásc amhairc, nach gcuirfear in iúl d'úsáideoirí na dteicneolaíochtaí cúnta - mar léitheoirí scáileáin. Cinntigh go bhfuil an t-eolas atá ainmnithe leis an dath soiléir ón ábhar féin (téacs infheicthe an chnaipe), nó go n-áirítear í ar mhodhanna eile, mar théacs breise atá i bhfolach leis an .sr-onlyrang.
Méideanna
An bhfuil fonn ort cnaipí níos mó nó níos lú? Cuir .btn-lg, .btn-sm, nó .btn-xsle haghaidh méideanna breise.
<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>Cruthaigh cnaipí blocleibhéil - iad siúd a théann trasna leithead iomlán tuismitheora - trí .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>Staid ghníomhach
Beidh cnaipí le feiceáil brúite (le cúlra níos dorcha, teorainn níos dorcha, agus scáth inset) nuair a bhíonn siad gníomhach. Maidir <button>le heilimintí, déantar é seo trí :active. Maidir <a>le heilimintí, déantar é le .active. Mar sin féin, is féidir leat úsáid a bhaint as .activear <button>s (agus an aria-pressed="true"tréith a chur san áireamh) más gá duit an stát gníomhach a mhacasamhlú go ríomhchláraithe.
Eilimint cnaipe
Níl gá a chur leis :activemar tá sé pseudo-aicme, ach más gá duit chun bhfeidhm ar an chuma céanna, dul ar aghaidh agus cuir .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>Gné ancaire
Cuir an .activerang le <a>cnaipí.
<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>Stát faoi mhíchumas
Déan breathnú ar chnaipí nach féidir a chliceáil ach iad a mhaolú le opacity.
Eilimint cnaipe
Cuir an disabledtréith le <button>cnaipí.
<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>Comhoiriúnacht tras-bhrabhsálaí
Má chuireann tú an disabledtréith le <button>, cuirfidh Internet Explorer 9 agus thíos an téacs liath le scáthú téacs olc nach féidir linn a shocrú.
Gné ancaire
Cuir an .disabledrang le <a>cnaipí.
<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>Úsáidimid .disabledmar rang fóntais anseo, cosúil leis an .activerang coitianta, mar sin níl aon réimír ag teastáil.
caveat feidhmiúlacht naisc
Úsáideann an rang seo pointer-events: nonechun iarracht a dhéanamh feidhmiúlacht naisc <a>s a dhíchumasú, ach níl an t-airí CSS sin caighdeánaithe go fóill agus nach bhfuil tacaíocht iomlán ann in Opera 18 agus thíos, nó in Internet Explorer 11. Ina theannta sin, fiú i mbrabhsálaithe a thacaíonn pointer-events: none, méarchlár níl aon tionchar fós ar an loingseoireacht, rud a chiallaíonn go mbeidh úsáideoirí méarchláir radharcacha agus úsáideoirí teicneolaíochtaí cúnta fós in ann na naisc seo a ghníomhachtú. Chun a bheith sábháilte, bain úsáid as JavaScript saincheaptha chun naisc den sórt sin a dhíchumasú.
Íomhánna
Íomhánna sofhreagracha
Is féidir íomhánna i Bootstrap 3 a dhéanamh sofhreagrach trí .img-responsiverang a chur leis. Baineann sé seo max-width: 100%;, height: auto;agus display: block;leis an íomhá ionas go scálaí sé nicely leis an eilimint tuismitheoir.
Chun íomhánna a úsáideann an .img-responsiverang a lárú, bain úsáid .center-blockas .text-center. Féach ar an rannán ranganna cúntóirí le haghaidh tuilleadh sonraí faoin .center-blockúsáid.
Íomhánna SVG agus IE 8-10
.img-responsiveIn Internet Explorer 8-10, tá méideanna díréireach ar íomhánna SVG . Chun é seo a shocrú, cuir leis width: 100% \9;nuair is gá. Ní chuireann Bootstrap é seo i bhfeidhm go huathoibríoch mar cruthaíonn sé aimhréidh le formáidí íomhá eile.
<img src="..." class="img-responsive" alt="Responsive image">Cruthanna íomhánna
Cuir ranganna le <img>heilimint chun íomhánna a stíliú go héasca in aon tionscadal.
Comhoiriúnacht tras-bhrabhsálaí
Coinnigh i gcuimhne nach bhfuil tacaíocht ag Internet Explorer 8 do choirnéil chruinne.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Ranganna cúntóirí
Dathanna comhthéacsúla
Cuir an bhrí in iúl trí dhath le dornán de ranganna fóntais béime. Féadfar iad seo a chur i bhfeidhm ar naisc freisin agus dorchadóidh siad ar ainlíon díreach mar atá ár stíleanna naisc réamhshocraithe.
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>Ag déileáil le sainiúlacht
Uaireanta ní féidir ranganna béime a chur i bhfeidhm mar gheall ar shainiúlacht roghnóir eile. I bhformhór na gcásanna, is leor réiteach a fháil chun do théacs a chuimilt <span>leis an rang.
Brí a chur in iúl do theicneolaíochtaí cúnta
Ní thugann úsáid dath chun brí a chur leis ach tásc amhairc, nach gcuirfear in iúl d’úsáideoirí na dteicneolaíochtaí cúnta – mar léitheoirí scáileáin. Cinntigh go bhfuil an t-eolas atá léirithe ag an dath soiléir ón ábhar féin (ní úsáidtear na dathanna comhthéacsúla ach amháin chun an bhrí atá sa téacs/marcáil cheana féin a threisiú), nó go gcuimsítear í ar mhodhanna eile, mar théacs breise i bhfolach leis an .sr-onlyrang . .
Cúlraí comhthéacsúla
Cosúil leis na haicmí datha téacs comhthéacsúla, socraigh go héasca cúlra eilimint d’aon rang comhthéacsúil. Dorchóidh comhpháirteanna ancaire ar ainlíonn, díreach cosúil leis na ranganna téacs.
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>Ag déileáil le sainiúlacht
Uaireanta ní féidir ranganna cúlra comhthéacsúla a chur i bhfeidhm mar gheall ar shainiúlacht roghnóir eile. I gcásanna áirithe, is réiteach leordhóthanach é ábhar d’eiliminte a chuimilt <div>leis an rang.
Brí a chur in iúl do theicneolaíochtaí cúnta
Mar is amhlaidh le dathanna comhthéacsúla , cinntigh go gcuirtear aon bhrí a thugtar trí dhath in iúl freisin i bhformáid nach bhfuil ach cur i láthair.
Dún an deilbhín
Bain úsáid as an deilbhín gar-chineálach chun ábhar cosúil le módúil agus foláirimh a dhíbhe.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Cúraimí
Úsáid cúramóirí chun feidhmiúlacht agus treo anuas a chur in iúl. Tabhair faoi deara go n-aisiompóidh an cúramóir réamhshocraithe go huathoibríoch sna roghchláir anuas .
<span class="caret"></span>Snámhann tapa
Snámh eilimint ar chlé nó ar dheis le rang. !importantsan áireamh chun saincheisteanna sainiúlachta a sheachaint. Is féidir ranganna a úsáid mar mheascáin freisin.
<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();
}Lár blocanna ábhair
Socraigh eilimint chuig display: blockagus lár tríd margin. Ar fáil mar mheascán agus rang.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Clearfix
Glan s go héasca floattrí chur .clearfix leis an eilimint tuismitheora . Úsáideann Nicolas Gallagher an t-athchóiriú micrea soiléir mar atá tóir air. Is féidir é a úsáid freisin mar mheascán.
<!-- 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();
}Ag taispeáint agus i bhfolach ábhar
Cuir iallach ar eilimint a thaispeáint nó a cheilt ( lena n-áirítear do léitheoirí scáileáin ) le húsáid .showagus le .hiddenranganna. Úsáidtear na ranganna seo !importantchun coinbhleachtaí sainiúlachta a sheachaint, díreach cosúil le snámháin sciobtha . Níl siad ar fáil ach le haghaidh scoránaithe blocleibhéil. Is féidir iad a úsáid freisin mar mheascáin.
.hidear fáil, ach ní chuireann sé isteach ar léitheoirí scáileáin i gcónaí agus ní dhéantar é a mheas mar v3.0.1 . Úsáid .hiddennó .sr-onlyina ionad.
Ina theannta sin, .invisibleis féidir é a úsáid chun infheictheacht eilimint amháin a scoránú, rud a chiallaíonn displaynach bhfuil sé modhnaithe agus is féidir leis an eilimint difear a dhéanamh fós ar shreabhadh an doiciméid.
<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();
}Léitheoir scáileáin agus ábhar nascleanúna méarchláir
Folaigh eilimint de gach gléas seachas léitheoirí scáileáin le .sr-only. Comhcheangail .sr-onlyleis .sr-only-focusablechun an eilimint a thaispeáint arís nuair atá sé dírithe (m.sh. ag úsáideoir méarchláir amháin). Riachtanach chun dea-chleachtais inrochtaineachta a leanúint . Is féidir é a úsáid freisin mar mheascáin.
<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();
}Athsholáthar íomhá
Úsáid an .text-hiderang nó an mixin chun íomhá chúlra a chur in ionad ábhar téacs eiliminte.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Fóntais sofhreagracha
Chun forbairt a dhéanamh níos tapúla ar shoghluaisteacht, bain úsáid as na ranganna áirgiúlachta seo chun ábhar a thaispeáint agus a cheilt trí ghléas trí cheist na meán. Áirítear freisin ranganna áirgiúlachta chun ábhar a scoránú nuair a phriontáiltear é.
Déan iarracht iad seo a úsáid ar bhonn teoranta agus seachain leaganacha iomlána éagsúla den suíomh céanna a chruthú. Ina áit sin, bain úsáid as iad chun cur i láthair gach feiste a chomhlánú.
Ranganna ar fáil
Bain úsáid as rang amháin nó teaglaim de na ranganna atá ar fáil chun ábhar a scoránú thar phointí amhairc.
| Feistí beaga breiseFóin (<768px) | Feistí beagaTáibléad (≥768px) | Feistí meánachaDeasc (≥992px) | Feistí móraDeasc (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Infheicthe | i bhfolach | i bhfolach | i bhfolach |
.visible-sm-* |
i bhfolach | Infheicthe | i bhfolach | i bhfolach |
.visible-md-* |
i bhfolach | i bhfolach | Infheicthe | i bhfolach |
.visible-lg-* |
i bhfolach | i bhfolach | i bhfolach | Infheicthe |
.hidden-xs |
i bhfolach | Infheicthe | Infheicthe | Infheicthe |
.hidden-sm |
Infheicthe | i bhfolach | Infheicthe | Infheicthe |
.hidden-md |
Infheicthe | Infheicthe | i bhfolach | Infheicthe |
.hidden-lg |
Infheicthe | Infheicthe | Infheicthe | i bhfolach |
Amhail v3.2.0, tagann na .visible-*-*haicmí do gach brisphointe i dtrí éagsúlacht, ceann amháin do gach displayluach maoine CSS atá liostaithe thíos.
| Grúpa ranganna | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Mar sin, le haghaidh scáileáin bheaga bhreise ( xs) mar shampla, is iad na .visible-*-*ranganna atá ar fáil ná: .visible-xs-block, .visible-xs-inline, agus .visible-xs-inline-block.
Tá na haicmí .visible-xs, .visible-sm, .visible-md, agus .visible-lgann freisin, ach ní dhéantar dearmad orthu mar v3.2.0 . Tá siad beagnach comhionann le .visible-*-block, ach amháin i gcásanna speisialta breise maidir <table>le heilimintí a bhaineann le scoránú.
Ranganna priontála
Cosúil leis na ranganna freagrúla rialta, bain úsáid as iad seo chun ábhar priontála a scoránú.
| Ranganna | Brabhsálaí | Priontáil |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
i bhfolach | Infheicthe |
.hidden-print |
Infheicthe | i bhfolach |
Tá an rang .visible-printann freisin ach ní dhéantar é a mheas mar v3.2.0 . Tá sé comhionann beagnach le .visible-print-block, ach amháin le cásanna speisialta breise le haghaidh <table>eilimintí gaolmhara.
Cásanna tástála
Athraigh do bhrabhsálaí nó lódáil ar ghléasanna éagsúla chun na ranganna fóntais sofhreagracha a thástáil.
Le feiceáil ar...
Léiríonn seicmharcanna glasa go bhfuil an eilimint le feiceáil i do radharc reatha.
Breise beag
✔ Le feiceáil ar x-bheag
Beaga
✔ Le feiceáil ar bheagán
Mheán
✔ Le feiceáil ar mheán
Mór
✔ Le feiceáil ar an mórchuid
✔ Le feiceáil ar x-bheag agus beag
✔ Le feiceáil ar mheánmhéid agus ar mhór
✔ Le feiceáil ar x-bheag agus meánmhéide
✔ Le feiceáil ar bheag agus mhór
✔ Le feiceáil ar x-bheag agus mhór
✔ Le feiceáil ar mheánmhéide agus beag
I bhfolach ar...
Anseo, léiríonn seicmharcanna glasa freisin go bhfuil an eilimint i bhfolach i do radharcra reatha.
Ag baint úsáide as Lúide
Tá CSS Bootstrap tógtha ar Less, réamhphróiseálaí le feidhmiúlacht bhreise cosúil le hathróga, meascáin, agus feidhmeanna chun CSS a thiomsú. Is féidir leo siúd atá ag iarraidh an fhoinse Níos lú comhad a úsáid in ionad ár gcomhaid CSS tiomsaithe úsáid a bhaint as na hathróga agus na meascáin iomadúla a úsáidimid ar fud an chreata.
Clúdaítear athróga greille agus meascáin laistigh den chuid den chóras Eangaí .
Bootstrap a thiomsú
Is féidir Bootstrap a úsáid ar dhá bhealach ar a laghad: leis an CSS tiomsaithe nó leis an bhfoinse Lúide comhaid. Chun na comhaid níos lú a thiomsú, téigh i gcomhairle leis an rannán Tús a Chur leis chun do thimpeallacht forbartha a shocrú chun na horduithe riachtanacha a rith.
Féadfaidh uirlisí tiomsaithe tríú páirtí oibriú le Bootstrap, ach ní thacaíonn ár gcroífhoireann leo.
Athróga
Úsáidtear athróga ar fud an tionscadail ar fad mar bhealach chun luachanna a úsáidtear go coitianta a lárú agus a roinnt amhail dathanna, spásáil, nó stoic chló. Le miondealú iomlán a fháil, féach ar an Customizer .
Dathanna
Bain úsáid go héasca as dhá scéim dathanna: liathscála agus shéimeantach. Soláthraíonn dathanna liathscála rochtain thapa ar shades dubh a úsáidtear go coitianta agus cuimsíonn séimeantach dathanna éagsúla a shanntar do luachanna comhthéacsúla brí.
@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;Bain úsáid as aon cheann de na hathróga datha seo mar atá siad nó déan iad a athshannadh chuig athróga níos brí le do thionscadal.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Scafall
Dornán athróg chun príomhghnéithe de chnámharlach do shuíomh a shaincheapadh go tapa.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Naisc
Stíl go héasca do naisc leis an dath ceart gan ach luach amháin.
// 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;
}
}Tabhair faoi deara go n- @link-hover-colorúsáideann an fheidhm, uirlis iontach eile ó Lúide, chun an dath hover ceart a chruthú go huathoibríoch. Is féidir leat darken, lighten, saturate, agus desaturate.
Clóghrafaíocht
Socraigh go héasca do chló, méid an téacs, tosaigh, agus níos mó le cúpla athróg thapa. Úsáideann Bootstrap iad seo freisin chun meascáin chlóghrafacha éasca a sholáthar.
@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;Deilbhíní
Dhá athróg thapa chun suíomh agus ainm comhaid do dheilbhíní a shaincheapadh.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Comhpháirteanna
Úsáideann comhpháirteanna ar fud Bootstrap roinnt athróg réamhshocraithe chun luachanna coitianta a shocrú. Seo iad na cinn is coitianta a úsáidtear.
@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;Meascáin díoltóirí
Is meascáin iad meascáin díoltóirí chun cabhrú le tacú le ilbhrabhsálaithe trí gach réimír díoltóra ábhartha a áireamh i do CSS tiomsaithe.
Bosca-mhéid
Athshocraigh múnla do bhosca comhpháirteanna le mixin amháin. Chun comhthéacs a fháil, féach an t-alt cabhrach seo ó Mozilla .
Tá an mixin i léig mar v3.2.0, le tabhairt isteach Autoprefixer. Chun comhoiriúnacht ar gcúl a chaomhnú, leanfaidh Bootstrap ag úsáid an mheascáin go hinmheánach go dtí Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Coirnéil chothromú
Sa lá atá inniu ann tacaíonn gach brabhsálaí nua-aimseartha leis an border-radiusmaoin neamh-réamhshocrú. Mar sin, níl aon .border-radius()mheascán ann, ach cuimsíonn Bootstrap aicearraí chun dhá choirnéal a shlánú go tapa ar thaobh ar leith de réad.
.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;
}Bosca (Buail) scáthanna
Má tá do spriocghrúpa ag baint úsáide as na brabhsálaithe agus na gléasanna is déanaí agus is mó, déan cinnte an box-shadowmhaoin a úsáid ina aonar. Má theastaíonn tacaíocht uait le haghaidh feistí níos sine Android (réamh-v4) agus iOS (réamh-iOS 5), bain úsáid as an mixin dímheasta-webkit chun an réimír riachtanach a phiocadh suas .
Tá an mixin i léig mar v3.1.0, toisc nach dtacaíonn Bootstrap go hoifigiúil leis na hardáin atá as dáta nach dtacaíonn leis an maoin chaighdeánach. Chun comhoiriúnacht ar gcúl a chaomhnú, leanfaidh Bootstrap ag úsáid an mheascáin go hinmheánach go dtí Bootstrap v4.
Bí cinnte rgba()dathanna a úsáid i scáthanna do bhosca ionas go mbeidh siad ag cumasc chomh héasca agus is féidir le cúlraí.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Aistrithe
Meascáin iolracha le haghaidh solúbthachta. Socraigh gach faisnéis aistrithe le ceann amháin, nó sonraigh moill agus fad ar leith de réir mar is gá.
Tá na meascáin i léig mar v3.2.0, nuair a tugadh isteach Autoprefixer. Chun comhoiriúnacht ar gcúl a chaomhnú, leanfaidh Bootstrap de na meascáin a úsáid go hinmheánach go dtí 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;
}Claochluithe
Rothlaigh, scála, aistrigh (bog), nó sceabhacha aon réad.
Tá na meascáin i léig mar v3.2.0, nuair a tugadh isteach Autoprefixer. Chun comhoiriúnacht ar gcúl a chaomhnú, leanfaidh Bootstrap de na meascáin a úsáid go hinmheánach go dtí 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;
}Beochan
Meascán amháin chun airíonna beochana CSS3 ar fad a úsáid i ndearbhú amháin agus meascáin eile le haghaidh maoine aonair.
Tá na meascáin i léig mar v3.2.0, nuair a tugadh isteach Autoprefixer. Chun comhoiriúnacht ar gcúl a chaomhnú, leanfaidh Bootstrap de na meascáin a úsáid go hinmheánach go dtí 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;
}Teimhneacht
Socraigh an teimhneacht do gach brabhsálaithe agus cuir filtercúl-ais ar fáil do IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Téacs sealbhóir áitribh
Comhthéacs a sholáthar do rialuithe foirme laistigh de gach réimse.
.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
}Colúin
Gin colúin trí CSS laistigh d'eilimint amháin.
.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;
}Grádáin
Déan dhá dhath ar bith a thiontú go grádán cúlra go héasca. Faigh níos mó chun cinn agus socraigh treo, bain úsáid as trí dhath, nó bain úsáid as grádán gathacha. Le meascadh amháin gheobhaidh tú na comhréireanna réamhshocruithe go léir a bheidh uait.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Is féidir leat freisin uillinn grádán líneach caighdeánach dhá dhath a shonrú:
#gradient > .directional(#333; #000; 45deg);Má theastaíonn grádán stíl bearbóra uait, tá sé sin éasca freisin. Sonraigh dath amháin agus cuirfimid stríoc bán tréshoilseach a fhorleagan.
#gradient > .striped(#333; 45deg);Suas an ante agus úsáid trí dhath ina ionad. Socraigh an chéad dath, an dara dath, stad dath an dara dath (luach céatadáin cosúil le 25%), agus an tríú dath leis na meascáin seo:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Cinnirí suas! Más gá duit grádán a bhaint riamh, cinntigh go mbainfidh tú aon IE-shonrach filtera chuir tú leis. Is féidir leat é sin a dhéanamh tríd an .reset-filter()mixin a úsáid taobh leis background-image: none;.
Meascáin fóntais
Is meascáin fóntais iad meascáin a chomhcheanglaíonn airíonna CSS nach mbaineann le hábhar chun sprioc nó tasc ar leith a bhaint amach.
Clearfix
Ná déan dearmad cur class="clearfix"le haon eilimint agus ina ionad sin cuir an .clearfix()mixin nuair is cuí. Úsáideann Nicolas Gallagher an socrú soiléir micrea .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Lárú cothrománach
Lár go tapa aon eilimint laistigh dá tuismitheoir. Éilíonn widthnó max-widtha shocrú.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Cúntóirí méide
Sonraigh toisí ruda ar bhealach níos éasca.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Réimsí téacs inathraithe
Cumraigh na roghanna a athrú go héasca le haghaidh aon réimse téacs, nó aon eilimint eile. Réamhshocrú ar ghnáthiompraíocht an bhrabhsálaí ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Teascadh téacs
Teascadh téacs go héasca le héilips le mixin amháin. Éilíonn eilimint blocknó inline-blockleibhéal.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Íomhánna reitine
Sonraigh dhá chonair íomhá agus na toisí íomhá @ 1x, agus cuirfidh Bootstrap ceist meáin @2x ar fáil. Má tá go leor íomhánna le fónamh agat, smaoinigh ar do CSS íomhá reitine a scríobh de láimh in aon cheist meán amháin.
.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);
}Ag baint úsáide as Sass
Cé go bhfuil Bootstrap tógtha ar Lúide, tá calafort oifigiúil Sass aige freisin . Coimeádaimid é i stór GitHub ar leith agus láimhseálann muid nuashonruithe le script chomhshó.
Cad atá san áireamh
Ós rud é go bhfuil repo ar leith ag calafort Sass agus go bhfreastalaíonn sé ar lucht éisteachta beagán difriúil, tá difríocht mhór idir ábhar an tionscadail agus príomhthionscadal Bootstrap. Cinntíonn sé seo go bhfuil calafort Sass chomh comhoiriúnach leis an oiread córais atá bunaithe ar Sass agus is féidir.
| Conair | Cur síos |
|---|---|
lib/ |
Cód Ruby gem (cumraíocht Sass, comhtháthú Rails agus Compass) |
tasks/ |
Scripteanna tiontairí (ag casadh in aghaidh an tsrutha Níos lú go Sass) |
test/ |
Tástálacha tiomsú |
templates/ |
Compás pacáiste cur i láthair |
vendor/assets/ |
Sass, JavaScript, agus comhaid chló |
Rakefile |
Tascanna inmheánacha, mar shampla ráca agus tiontú |
Tabhair cuairt ar stór GitHub an chalafoirt Sass chun na comhaid seo a fheiceáil i ngníomh.
Suiteáil
Le haghaidh faisnéise ar conas Bootstrap do Sass a shuiteáil agus a úsáid, féach ar an readme stór GitHub . Is í an fhoinse is déanaí í agus cuimsíonn sé faisnéis le húsáid le tionscadail Rails, Compass agus caighdeánach Sass.