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>

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

.col-md-4

.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

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

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

.col-xs-6
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 &gt; 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.

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

Bain gáitéir

Bain na gáitéir as a chéile agus tá sé colúin leis an .row-no-guttersrang.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</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-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>

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 léiriú, ú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]

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

Duine a bhfuil cáil air in Source Title

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante.

Duine a bhfuil cáil air in Source Title

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

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>&lt;section&gt;</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 + ,

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>&lt;p&gt;Sample text here...&lt;/p&gt;</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>

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

Teideal tábla roghnach.
#	Ainm	Sloinne	Ainm úsáideora
1	Marcáil	Otto	@mdo
2	Iacób	Thornton	@saille
3	Larry	an t-éan	@twitter

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

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

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

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

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

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

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í foirm 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 rialtáin atá ailínithe ar chlé agus inlíne. Ní bhaineann sé seo ach le foirmeacha laistigh de phoirt amhairc atá ar leithead 768px ar a laghad.

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&mdash;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&mdash;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.

`:focus`Staid taispeána

Úsáideann an t-ionchur samplach thuas stíleanna saincheaptha inár ndoiciméid chun an :focusstaid ar a .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 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-only`lipé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.

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

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

Nasc príomhúil Nasc

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

Nasc príomhúil Nasc

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

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">&times;</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

Iallach a chur 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ánú blocleibhéil. Is féidir iad a úsáid freisin mar mheascáin.

.hidear fáil, ach ní i gcónaí a chuireann sé isteach ar léitheoirí scáileáin 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();
}

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	CSS`display`
`.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

Breise beag agus beag ✔ Le feiceáil ar x-bheag agus beag

Meánach agus mór ✔ Le feiceáil ar mheánmhéid agus ar mhór

Breise beag agus meánmhéide ✔ Le feiceáil ar x-bheag agus meánmhéide

Beag agus mór ✔ Le feiceáil ar bheag agus mhór

Breise beag agus mór ✔ Le feiceáil ar x-bheag agus mhór

Beaga agus meánmhéide ✔ 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.

Breise beag ✔ I bhfolach ar x-bheag

Beaga ✔ I bhfolach ar bheagán

Mheán ✔ I bhfolach ar mheán

Mór ✔ I bhfolach ar an mór

Breise beag agus beag ✔ I bhfolach ar x-bheag agus beag

Meánach agus mór ✔ I bhfolach ar mheánmhéid agus ar mhór

Breise beag agus meánmhéide ✔ I bhfolach ar x-bheag agus meánmhéide

Beag agus mór ✔ I bhfolach ar bheag agus mhór

Breise beag agus mór ✔ I bhfolach ar x-bheag agus mhór

Beaga agus meánmhéide ✔ I bhfolach ar bheagán agus ar mheánmhéid

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

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

.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);
}

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.

Bootstrap do Sass

CSS

Forbhreathnú

HTML5 doiciméad

Soghluaiste ar dtús

Clóghrafaíocht agus naisc....

Normalaigh.css

Coimeádáin

Córas greille

Réamhrá

Ceisteanna ó na meáin

Roghanna greille

Sampla: Cruachta-go-cothrománach

Sampla: Coimeádán sreabhán

Sampla: Soghluaiste agus deasc

Sampla: Soghluaiste, táibléad, deasc

Sampla: Colún fillte

Athshocraíonn colún sofhreagrach

Bain gáitéir

Colúin fhritháireamh

Colúin neadaithe

Ordú colún

Níos lú meascáin agus athróg

Athróga

Meascáin

Sampla úsáide

Clóghrafaíocht

Ceannteidil

h1. Ceannteideal Bootstrap

h2. Ceannteideal Bootstrap

h3. Ceannteideal Bootstrap

h4. Ceannteideal Bootstrap

h5. Ceannteideal Bootstrap

h6. Ceannteideal Bootstrap

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

Cóip coirp

Cóip comhlacht luaidhe

Tógtha le Níos lú

Eilimintí téacs inlíne

Téacs marcáilte

Téacs scriosta

Téacs stailc tríd

Téacs curtha isteach

Téacs a bhfuil líne faoi

Téacs beag

Trom

iodálach

Eilimintí malartacha

Ranganna ailínithe

Ranganna claochlaithe

Giorrúcháin

Giorrúchán bunúsach

Túslitríocht

Seoltaí

Blockquotes

Blockquote réamhshocraithe

Roghanna Blockquote

Foinse a ainmniú

Taispeántais mhalartacha

Liostaí

Neamhordúil

D'ordaigh

Gan stíl

I líne

Cur síos

Cur síos cothrománach

Uath-theascadh

Cód

I líne

Ionchur úsáideora

Bloc bunúsach

Athróga

Aschur samplach

Táblaí

Sampla bunúsach

Sraitheanna stiallacha

`:focus`Staid taispeána

Caveat faoi fheidhmiúlacht nasc de`<a>`

Deilbhíní roghnacha le `.sr-only`lipéid fholaithe