CSS
Mîhengên CSS-ê yên gerdûnî, hêmanên bingehîn ên HTML-ê yên ku bi dersên berfereh ve hatine şêwazkirin û zêdekirin, û pergalek torê ya pêşkeftî.
Têgihiştinî
Li ser perçeyên sereke yên binesaziya Bootstrap-ê, di nav de nêzîkatiya me ya ji bo pêşkeftina malperê ya çêtir, zûtir û bihêztir, kêm bin.
HTML5 doctype
Bootstrap hin hêmanên HTML-ê û taybetmendiyên CSS-ê yên ku karanîna doctype HTML5 hewce dike bikar tîne. Di destpêka hemî projeyên xwe de wê têxin nav xwe.
<!DOCTYPE html>
<html lang="en">
...
</html>Mobile yekem
Bi Bootstrap 2 re, me ji bo aliyên sereke yên çarçoveyê şêwazên dostaniya mobîl ên vebijarkî lê zêde kir. Bi Bootstrap 3 re, me proje ji nû ve nivîsand ku ji destpêkê ve hevalbendiya mobîl be. Li şûna ku şêwazên desta yên vebijarkî lê zêde bikin, ew rast di nav bingehê de têne pijandin. Bi rastî, Bootstrap yekem mobîl e . Şêweyên yekem ên mobîl li şûna pelên cûda li seranserê pirtûkxaneyê têne dîtin.
Ji bo misogerkirina renderkirina rast û zoomkirina destikê, meta taga viewportê li xwe zêde bikin <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Hûn dikarin kapasîteyên zoomkirinê yên li ser cîhazên desta bi lê zêdekirina user-scalable=noli meta taga viewport neçalak bikin. Ev zoom asteng dike, tê vê wateyê ku bikarhêner tenê dikarin bigerin, û di encamê de malpera we hinekî wekî serîlêdana xwemalî hîs dike. Bi tevayî, em vê yekê li ser her malperê pêşniyar nakin, ji ber vê yekê hişyarî bikar bînin!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Tîpografi û girêdan
Bootstrap pêşandana gerdûnî ya bingehîn, tîpografî, û şêwazên girêdanê destnîşan dike. Bi taybetî em:
- Set
background-color: #fff;li serbody @font-family-base,@font-size-base, û@line-height-basetaybetmendiyan wekî bingeha meya tîpografî bikar bînin- Rengê girêdana gerdûnî bi rê ve
@link-colorbicîh bikin û binê zencîreyan tenê li ser bicîh bikin:hover
Van şêweyan di hundurê de têne dîtin scaffolding.less.
Normalize.css
Ji bo baştirkirina ravekirina gerokê, em Normalize.css , projeyek Nicolas Gallagher û Jonathan Neal bikar tînin .
Konteynirên
Bootstrap pêdivî bi hêmanek têde heye ku naveroka malperê pêça û pergala meya torê bigire. Hûn dikarin yek ji du konteyneran hilbijêrin ku di projeyên xwe de bikar bînin. Bala xwe bidinê ku, ji ber paddingû bêtir, ne konteynir ne hêlîn e.
Ji .containerbo konteynirek firehiya sabît a bersivdar bikar bînin.
<div class="container">
...
</div>Ji .container-fluidbo konteynirek firehiya tevahî bikar bînin, ku tevahiya firehiya dîmendera we vedigire.
<div class="container-fluid">
...
</div>sîstema Grid
Bootstrap pergalek tora şilavê ya yekem a bersivdar, mobîl vedihewîne ku bi guncan heya 12 stûnan her ku mezinbûna amûrê an dîmenderê zêde dibe. Ew ji bo vebijarkên sêwirana hêsan, û hem jî mîksên hêzdar ên ji bo afirandina sêwiranên semantîkî yên bêtir , dersên pêşwextkirî vedihewîne .
Pêşkêş
Pergalên grid ji bo afirandina sêwirana rûpelê bi rêzek rêz û stûnên ku naveroka we vedihewîne têne bikar anîn. Li vir pergala torê ya Bootstrap çawa dixebite:
- Pêdivî ye ku rêz di nav
.container(firehiya sabît) an.container-fluid(tevahî-fireh) de werin danîn ji bo lihevkirin û peldanka rast. - Rêzan bikar bînin da ku komên stûnên horizontal biafirînin.
- Divê naverok di nav stûnan de were danîn, û tenê stûn dikarin yekser zarokên rêzikan bin.
- Dersên torê yên pêşwextkirî mîna
.rowû.col-xs-4ji bo bi lez çêkirina sêwiranên torê hene. Kêm mîksîn jî dikarin ji bo sêwiranên semantîktir werin bikar anîn. - Stûn bi rêya
padding. Ew padding di rêzan de ji bo stûna yekem û paşîn bi rêgeza neyînî ya li ser.rows-yê ve tê veqetandin. - Rêjeya neyînî ev e ku çima mînakên li jêr derketine. Ji ber vê yekê ye ku naverok di nav stûnên torê de bi naveroka ne-grîdê ve hatî rêz kirin.
- Stûnên torê bi destnîşankirina hejmara diwanzdeh stûnên berdest ên ku hûn dixwazin veguhezînin têne afirandin. Mînakî, sê stûnên wekhev dê sê bikar bînin
.col-xs-4. - Ger ji 12 stûnan zêdetir di nav rêzek yekane de werin danîn, her komek stûnên zêde dê, wekî yekînek, li ser rêzek nû biqelişe.
- Dersên torê li ser cîhazên bi firehiya dîmenderê ji mezinahiyên xala veqetînê mezintir an wekhev derbas dibin, û dersên torê yên ku li cîhazên piçûktir têne armanc kirin derbas dikin. Ji ber vê yekê, mînak sepandina her
.col-md-*çînekê li ser hêmanekê dê ne tenê bandorê li stîla wê li ser cîhazên navîn bike, lê di heman demê de li ser cîhazên mezin jî heke.col-lg-*çînek tune be.
Ji bo sepandina van prensîban li ser koda xwe li mînakan binêrin.
Pirsên medyayê
Em di pelên xwe yên Less de pirsên medyaya jêrîn bikar tînin da ku di pergala xweya torê de xalên veqetandinê yên sereke biafirînin.
/* 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) { ... }Em carinan li ser van pirsên medyayê berfireh dikin max-widthda ku CSS-ê bi komek cîhazên teng re sînordar bikin.
@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) { ... }Vebijarkên Grid
Binêrin ka aliyên pergala tora Bootstrap-ê li ser gelek cîhazên bi tabloyek bikêr çawa dixebitin.
| Amûrên piçûktir Telefon (<768 px) | Tabletên cîhazên piçûk (≥768 px) | Sermaseyên cîhazên navîn (≥992 px) | Sermaseyên Amûrên Mezin (≥1200px) | |
|---|---|---|---|---|
| tevgera Grid | Horizontal her dem | Ji bo destpêkekê hilweşiya, li jor xalên veqetînê horizontî | ||
| Firehiya konteynirê | Tune (otomatîk) | 750px | 970px | 1170px |
| Pêşgira dersê | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # stûnan | 12 | |||
| Firehiya stûnê | Auto | ~ 62 px | ~81px | ~ 97 px |
| Firehiya gulikê | 30px (15px li her aliyê stûnekê) | |||
| Nestable | Erê | |||
| Offsets | Erê | |||
| Siparîşa stûnê | Erê | |||
Nimûne: Lihevkirî-bi-horîzontal
Bi karanîna yek komek .col-md-*çînên torê, hûn dikarin pergalek torê ya bingehîn biafirînin ku li ser cîhazên mobîl û cîhazên tabletê (ji piçûktir û piçûktir) dest pê dike berî ku li ser cîhazên sermaseyê (navîn) bibe horizontî. Di her yekê de stûnên torê bi cih bikin .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Nimûne: Konteyna şilekê
Her sêwirana tora bi firehiya sabît veguherînin sêwirana tev-firehiyê bi guheztina herî derveyê .containerxwe li .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Mînak: Mobîl û sermaseya
Ma hûn naxwazin stûnên we bi hêsanî di cîhazên piçûktir de werin berhev kirin? .col-xs-* .col-md-*Bi lêzêdekirina li stûnên xwe , çînên tora cîhaza piçûk û navîn ên zêde bikar bînin. Ji bo ramanek çêtir ka ew hemî çawa dixebite, mînaka jêrîn bibînin.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Mînak: Mobîl, tablet, sermaseya
Li ser mînaka berê ava bikin û bi .col-sm-*dersên tabletê re sêwiranên dînamîk û bihêztir biafirînin.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>Nimûne: Pêçandina stûnê
Ger ji 12 stûnan zêdetir di nav rêzek yekane de werin danîn, her komek stûnên zêde dê, wekî yekînek, li ser rêzek nû biqelişe.
.col-xs-9
.col-xs-4
Ji ber ku 9 + 4 = 13 > 12, ev div-berfirehiya 4 stûnan li ser xeteke nû wekî yekînek hevgirtî tê pêçandin.
Ji ber ku 9 + 4 = 13 > 12, ev div-berfirehiya 4 stûnan li ser xeteke nû wekî yekînek hevgirtî tê pêçandin.
.col-xs-6 Stûnên
paşîn li ser xeta nû berdewam dikin.
paşîn li ser xeta nû berdewam dikin.
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>Stûna Bersiv ji nû ve vedike
Digel çar qatên şebekeyên berdest hûn neçar in ku bikevin nav pirsgirêkan ku, di hin xalên veqetandinê de, stûnên we rast zelal nabin ji ber ku yek ji ya din dirêjtir e. Ji bo rastkirina wê, berhevokek a .clearfixû çînên meya karûbarê bersivdar bikar bînin .
.col-xs-6 .col-sm-3
Mezinahiya dîmendera xwe biguherînin an mînakek li ser têlefona xwe kontrol bikin.
Mezinahiya dîmendera xwe biguherînin an mînakek li ser têlefona xwe kontrol bikin.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>Ji bilî paqijkirina stûnê li nuqteyên veqetandî yên bersivdar, dibe ku hûn hewce ne ku ji nû ve veqetandin, pêldan, an kişandin . Vê di çalakiyê de di mînaka torê de bibînin .
<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>Stûnên jihevdexistin
Bi karanîna dersan stûnan ber bi rastê ve .col-md-offset-*bigerînin. Van dersan marjîna çepê ya stûnê bi *stûnan zêde dikin. Mînakî, .col-md-offset-4li .col-md-4ser çar stûnan digere.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Di heman demê de hûn dikarin bi dersan re guheztinên ji rêzikên tora jêrîn bişopînin .col-*-offset-0.
<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>Stûnên nesting
Ji bo ku hûn naveroka xwe bi tora xwerû re nehêlin, di nav stûnek heyî de stûnek nû .rowû komeke zêde bikin . Rêzên hêlînkirî divê komek stûnên ku ji 12 an kêmtir zêde dibin tê de bin (ne hewce ye ku hûn hemî 12 stûnên berdest bikar bînin)..col-sm-*.col-sm-*
Asta 1: .col-sm-9
Asta 2: .col-xs-8 .col-sm-6
Asta 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>Siparîşa stûnê
.col-md-push-*Bi dersên guhêrbar û bi hêsanî rêza stûnên tora me yên çêkirî biguhezînin .col-md-pull-*.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-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>Kêmtir mixîn û guhêrbar
Ji bilî dersên torê yên pêş-avakirî ji bo sêwiranên bilez, Bootstrap guhêrbar û mîksên Kêmtir vedihewîne da ku zû bi zû sêwiranên xweyên hêsan û semantîk biafirîne.
Variables
Guherbar hejmara stûnan, firehiya gemarê, û xala pirsiyariya medyayê ya ku tê de dest bi stûnên herikîn dikin diyar dikin. Em vana bikar tînin da ku çînên tora pêşwext ên ku li jor hatine belge kirin, û her weha ji bo mîksên xwerû yên ku li jêr hatine destnîşan kirin çêbikin.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Mixins
Miksîn bi guhêrbarên torê re têne bikar anîn da ku CSS-ya semantîk ji bo stûnên torê yên kesane çêbikin.
// 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));
}
}Nimûne karanîna
Hûn dikarin guherbaran li gorî nirxên xweya xwerû biguhezînin, an jî tenê mîksan bi nirxên xweyên xwerû bikar bînin. Li vir mînakek karanîna mîhengên xwerû heye ku hûn nexşeyek du-stûnî bi navberek veqetandî çêbikin.
.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>Tîpografi
Sernav
Hemî sernavên HTML-ê, <h1>bi riya <h6>, berdest in. .h1di nav .h6dersan de jî hene, ji bo dema ku hûn dixwazin şêwaza tîpa sernivîsê li hev bikin lê dîsa jî dixwazin ku nivîsa we di hundurê de were xuyang kirin.
h1. Sernavê Bootstrap |
Semibold 36px |
h2. Sernavê Bootstrap |
Semibold 30px |
h3. Sernavê Bootstrap |
Semibold 24px |
h4. Sernavê Bootstrap |
Nîvbold 18px |
h5. Sernavê Bootstrap |
Nîvbold 14 px |
h6. Sernavê Bootstrap |
Nîvbold 12 px |
<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><small>Di her sernavê de bi tagek gelemperî an .smallpola nivîsek sivik, duyemîn biafirînin .
h1. Sernavê Bootstrap Nivîsara duyemîn |
h2. Sernavê Bootstrap Nivîsara duyemîn |
h3. Sernavê Bootstrap Nivîsara duyemîn |
h4. Sernavê Bootstrap Nivîsara duyemîn |
h5. Sernavê Bootstrap Nivîsara duyemîn |
h6. Sernavê Bootstrap Nivîsara duyemîn |
<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>Kopiya laş
Pêşniyara gerdûnî ya Bootstrap 14pxfont-size e , bi 1.428 . Ev li ser û hemî paragrafan tê sepandin. Digel vê yekê, (paragraf) marjînalek jêrîn ji nîvê bilindahiya rêza xweya hesabkirî (10px bi xwerû) distînin.line-height<body><p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis disparturient 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 at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>Kopê laşê rêber
Bi lêzêdekirina paragrafekê rawestin .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>Bi Less ve hatî çêkirin
Pîvana tîpografî li ser du guhêrbarên Kêmtir di guherbaran de ye.kêm : @font-size-baseû @line-height-base. Ya yekem mezinahiya tîpên bingehîn e ku li seranserê tê bikar anîn û ya duyemîn jî rêzika bingehîn e. Em wan guherbaran û hin matematîkî yên hêsan bikar tînin da ku marjînal, peldank, û bilindahiyên rêzê yên hemî celeb û hêj bêtir biafirînin. Wan xweş bikin û Bootstrap adapte dike.
Hêmanên nivîsê yên xêzkirî
Nivîsara nîşankirî
Ji bo ronîkirina nivînek nivîsê ji ber têkildariya wê di çarçoveyek din de, etîketê bikar bînin <mark>.
Hûn dikarin nîşana nîşanê bikar bîninhighlightnivîstok.
You can use the mark tag to <mark>highlight</mark> text.Nivîsar jêbirin
Ji bo nîşankirina blokên nivîsê yên ku hatine jêbirin, <del>tagê bikar bînin.
Ev rêza nivîsê tê wateya ku wekî metna jêbirin were hesibandin.
<del>This line of text is meant to be treated as deleted text.</del>Nivîsa Strikethrough
Ji bo nîşankirina blokên nivîsê yên ku êdî ne têkildar in, <s>tagê bikar bînin.
Ev rêza nivîsê tê wê wateyê ku wekî êdî ne rast were hesibandin.
<s>This line of text is meant to be treated as no longer accurate.</s>Metna têxistin
Ji bo nîşankirina lêzêdekirina belgeyê <ins>tagê bikar bînin.
Ev rêza nivîsê tê wateya ku wekî pêvekek belgeyê were hesibandin.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Nivîsa binxêzkirî
Ji bo binxêzkirina nivîsê <u>tagê bikar bînin.
Ev rêza nivîsê dê wekî binxêzkirî be
<u>This line of text will render as underlined</u>Bi şêwazên sivik etîketên giraniya xwerû yên HTML-ê bikar bînin.
Nivîsarek piçûk
Ji bo kêmkirina xêz an blokên nivîsê, etîketê bikar bînin <small>da ku nivîsê li% 85 mezinahiya dêûbav destnîşan bikin. font-sizeHêmanên serî ji bo hêmanên hêlînkirî yên xwe distînin <small>.
Wekî din, hûn dikarin hêmanek hundurîn bikar bînin .smallli şûna her yekê <small>.
Ev rêza nivîsê tê vê wateyê ku wekî çapa xweş were hesibandin.
<small>This line of text is meant to be treated as fine print.</small>Hesabî
Ji bo balkişandina perçeyek nivîsê ya bi tîpek girantir.
Parçeyek nivîsê ya jêrîn wekî metna stûr tê pêşkêş kirin .
<strong>rendered as bold text</strong>Îtalîk
Ji bo balkişandina parçeyek nivîsê ya bi îtalîk.
Parçeya nivîsê ya jêrîn wekî nivîsa îtalîk tê pêşkêş kirin .
<em>rendered as italicized text</em>hêmanên Alternate
Di HTML5-ê de <b>û bi serbestî bikar bînin . tê vê wateyê ku peyvan an hevokan ronî bike bêyî ku girîngiyek zêde ragihîne dema ku bi piranî ji bo deng, peyvên teknîkî, hwd.<i><b><i>
Dersên Alignment
Bi dersên hevrêzkirina nivîsê re bi hêsanî nivîsê li pêkhateyan rast bikin.
Nivîsa rêzkirî ya çepê.
Nivîsara rêzkirî ya navendê.
Nivîsa rasthevkirî.
Nivîsara rastdar.
Nivîsa pêça tune.
<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>Dersên veguherînê
Bi çînên sermayekirina nivîsê di pêkhateyan de nivîsê veguherînin.
Nivîsa bi tîpên piçûk.
Nivîsa bi tîpên mezin.
Nivîsa bi sermî.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Kurtenivîsandin
Pêkanîna stîlîzekirî ya <abbr>hêmana HTML-ê ji bo kurtenivîs û kurtenivîsan da ku guhertoya berfireh li ser hover nîşan bide. Kurtenivîsên bi titletaybetmendiyê xwedan sînorek binî ya sivik û xalîçeyek arîkar a li ser hoverê ne, li ser hover û ji bikarhênerên teknolojiyên alîkar re çarçoveyek zêde peyda dike.
Kurtenivîsa bingehîn
Kurteya peyva taybetmendiyê attr e .
<abbr title="attribute">attr</abbr>Înîsiyalîzm
Ji .initialismbo tîpek piçûktir li kurtenivîsekê zêde bikin.
HTML ji nanê perçekirî de tiştê çêtirîn e.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Navnîşan
Agahdariya têkiliyê ji bo bav û kalê herî nêzîk an tevahiya laşê xebatê pêşkêş bikin. Bi qedandina hemû rêzan bi <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Navê
Tev [email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Navê
Tev [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
Ji bo girtina blokên naverokê ji çavkaniyek din di hundurê belgeya we de.
Blockquote standard
<blockquote>Li dora her HTML-ê wekî vebêjê bipêçin . Ji bo bêjeyên rasterast, em pêşniyar dikin <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Vebijarkên Blockquote
Guhertinên şêwaz û naverok ji bo guhertoyên hêsan ên li ser standardek <blockquote>.
Navê çavkaniyekê
Ji <footer>bo tespîtkirina çavkaniyê a-yek zêde bikin. Navê xebata çavkaniyê pêça <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>Pêşandanên Alternatîf
Ji .blockquote-reversebo blokek bi naverokek rastgir ve zêde bikin.
<blockquote class="blockquote-reverse">
...
</blockquote>Lists
Unordered
Lîsteya tiştên ku rêzik tê de ne girîng e.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Hêsankirin di aliquet pretium nisl
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Ferman kirin
Lîsteya tiştên ku rêzik tê de bi eşkere girîng e.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Hêsankirin di aliquet pretium nisl
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Unstyled
Li ser hêmanên navnîşê marjînala xwerû list-styleû çepê rake (tenê zarokên yekser). Ev tenê ji bo tiştên tavilê yên navnîşa zarokan derbas dibe , tê vê wateyê ku hûn hewce ne ku ji bo her navnîşên hêlîn jî polê zêde bikin.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Hêsankirin di aliquet pretium nisl
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>Inline
Hemî hêmanên navnîşê li ser yek rêzek bi display: inline-block;û hin pêlavên sivik bixin.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Terîf
Lîsteya şertan bi danasînên wan ên têkildar.
- Navnîşan lîsteyên
- Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Danasîna Horizontal
Şert û şiroveyan li <dl>kêleka hev rêz bikin. Mîna <dl>s-yên xwerû dest pê dike, lê gava navbar berfireh dibe, wusa bikin.
- Navnîşan lîsteyên
- Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Auto-truncating
Lîsteyên danasînên asoyî dê şertên ku pir dirêj in ku di stûna çepê de bi cih bibin bibire text-overflow. Di dîmenderên teng de, ew ê biguhezînin sêwirana stêrkek xwerû.
Navê dizî
Inline
Parçeyên kodê yên hundurîn bi <code>.
Mînakî,
<section>divê wekî hundur were pêçan.
For example, <code><section></code> should be wrapped as inline.Têketina bikarhêner
Ji <kbd>bo nîşankirina têketina ku bi gelemperî bi klavyeyê ve tê navnîş kirin bikar bînin.
Ji bo veguhertina pelrêçan,
cdli pey navê pelrêçê binivîsin.
Ji bo guherandina mîhengan, pêl bikin ctrl + ,
Ji bo guherandina mîhengan, pêl bikin 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>Bloka bingehîn
Ji <pre>bo gelek rêzikên kodê bikar bînin. Ji bo veguheztina rast pê ewle bin ku hûn di kodê de ji berbendên goşeyê birevin.
<p>Nimûneya nivîsê li vir...</p>
<pre><p>Sample text here...</p></pre>Hûn dikarin vebijarkî .pre-scrollablepolê lê zêde bikin, ku dê bilindahiyek herî zêde 350 px destnîşan bike û barek gerokek y-axe peyda bike.
Variables
Ji bo nîşankirina guherbaran <var>tagê bikar bînin.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Hilberîna nimûne
Ji bo nîşankirina blokan, nimûneya encamek ji bernameyekê nîşanê bikar bînin <samp>.
Ev metn tê wateya ku wekî encamek nimûne ji bernameyek komputerê were hesibandin.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Tables
Mînaka bingehîn
Ji bo şêwaza bingehîn - pêlava sivik û tenê dabeşkerên horizontî - çîna bingehîn .tableli her yekê zêde bikin <table>. Dibe ku ew pir zêde zêde xuya bike, lê ji ber karanîna berbelav a tabloyan ji bo pêvekên din ên mîna salname û hilbijêrên tarîxê, me tercîh kir ku şêwazên tabloya xweya xwerû veqetînin.
| # | Nav | Paşnav | Navê bikarhêner |
|---|---|---|---|
| 1 | Delîl | Otto | @mdo |
| 2 | Jacob | Thornton | @rûn |
| 3 | Larry | Çûk |
<table class="table">
...
</table>Rêzên xerîdar
Ji .table-stripedbo lêzêdekirina zebra-striping li her rêzika tabloyê ya di hundurê de bikar bînin <tbody>.
Lihevhatina cross-browser
Tabloyên xêzkirî bi riya :nth-childhilbijêra CSS-ê, ku di Internet Explorer 8-ê de peyda nabe, têne şêwaz kirin.
| # | Nav | Paşnav | Navê bikarhêner |
|---|---|---|---|
| 1 | Delîl | Otto | @mdo |
| 2 | Jacob | Thornton | @rûn |
| 3 | Larry | Çûk |
<table class="table table-striped">
...
</table>Tabloya sînorkirî
Ji .table-borderedbo sînorên li ser hemî aliyên tablo û hucreyan zêde bikin.
| # | Nav | Paşnav | Navê bikarhêner |
|---|---|---|---|
| 1 | Delîl | Otto | @mdo |
| 2 | Jacob | Thornton | @rûn |
| 3 | Larry | Çûk |
<table class="table table-bordered">
...
</table>Rêzên hover
Zêde .table-hoverbikin da ku rewşek hêlînê li ser rêzên tabloyê di nav a <tbody>.
| # | Nav | Paşnav | Navê bikarhêner |
|---|---|---|---|
| 1 | Delîl | Otto | @mdo |
| 2 | Jacob | Thornton | @rûn |
| 3 | Larry | Çûk |
<table class="table table-hover">
...
</table>Tabloya kondenskirî
Zêde .table-condensedbikin da ku tabloyan tevlihevtir bikin bi qutkirina pelika hucreyê nîvco.
| # | Nav | Paşnav | Navê bikarhêner |
|---|---|---|---|
| 1 | Delîl | Otto | @mdo |
| 2 | Jacob | Thornton | @rûn |
| 3 | Larry The Bird | ||
<table class="table table-condensed">
...
</table>Dersên hevoksaziyê
Ji bo rengkirina rêzên tabloyê an şaneyên takekesî dersên kontekstê bikar bînin.
| Sinif | Terîf |
|---|---|
.active |
Rengê hoverê li rêzek an şaneyek taybetî bicîh tîne |
.success |
Çalakiyek serkeftî an erênî nîşan dide |
.info |
Guherînek agahdarî an çalakiyek neutral nîşan dide |
.warning |
Hişyariyek ku dibe ku balê hewce bike destnîşan dike |
.danger |
Çalakiyek xeternak an potansiyel neyînî nîşan dide |
| # | Sernavê stûnê | Sernavê stûnê | Sernavê stûnê |
|---|---|---|---|
| 1 | Naveroka stûnê | Naveroka stûnê | Naveroka stûnê |
| 2 | Naveroka stûnê | Naveroka stûnê | Naveroka stûnê |
| 3 | Naveroka stûnê | Naveroka stûnê | Naveroka stûnê |
| 4 | Naveroka stûnê | Naveroka stûnê | Naveroka stûnê |
| 5 | Naveroka stûnê | Naveroka stûnê | Naveroka stûnê |
| 6 | Naveroka stûnê | Naveroka stûnê | Naveroka stûnê |
| 7 | Naveroka stûnê | Naveroka stûnê | Naveroka stûnê |
| 8 | Naveroka stûnê | Naveroka stûnê | Naveroka stûnê |
| 9 | Naveroka stûnê | Naveroka stûnê | Naveroka stû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>Veguheztina wateya teknolojiyên arîkar
Bikaranîna rengan ji bo lê zêdekirina wateyê li rêzek tabloyê an şaneyek kesane tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (nivîsa xuyayî ya di rêza tabloya têkildar/hucreya têkildar de), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .sr-onlypolê re veşartî ye.
Tabloyên bersivdar
Tabloyên bersivdar bi pêçandina her .tableyekê .table-responsivebiafirînin da ku ew li ser cîhazên piçûk (binî 768px) horizontî bigerin. Dema ku hûn li tiştek ji firehiya 768 px mezintir temaşe bikin, hûn ê di van tabloyan de cûdahiyek nebînin.
Clipping Vertical / qutkirin
Tabloyên bersivdar bi kar tînin overflow-y: hidden, ku her naverokek ku ji keviyên jêrîn an jorîn ên tabloyê derbas dibe qut dike. Bi taybetî, ev dikare pêşekên dakêşanê û widgetên din ên partiya sêyemîn qut bike.
Firefox û zeviyên zeviyan
Firefox xwedan şêwazek zevî ya nebaş e widthku tev li tabloya bersivdar dibe. Ev bêyî hackek Firefox-a taybetî ya ku em di Bootstrap -ê de peyda nakin , nayê hilweşandin:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Ji bo bêtir agahdarî, vê bersiva Stack Overflow bixwînin .
| # | Sernavê sifrê | Sernavê sifrê | Sernavê sifrê | Sernavê sifrê | Sernavê sifrê | Sernavê sifrê |
|---|---|---|---|---|---|---|
| 1 | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê |
| 2 | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê |
| 3 | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê |
| # | Sernavê sifrê | Sernavê sifrê | Sernavê sifrê | Sernavê sifrê | Sernavê sifrê | Sernavê sifrê |
|---|---|---|---|---|---|---|
| 1 | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê |
| 2 | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê |
| 3 | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê | Hucreya sifrê |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Forms
Mînaka bingehîn
Kontrolên forma kesane bixweber hin şêwazên gerdûnî distînin. Hemî nivîsar <input>, <textarea>, û <select>hêmanên pê re .form-controlji width: 100%;hêla xwerû ve têne destnîşan kirin. Etîket û kontrolên xwe .form-groupji bo cîhê herî xweş bipêçin.
<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>Komên formê bi komên têketinê re tevlihev nekin
Komên form rasterast bi komên têketinê re tevlihev nekin . Di şûna wê de, koma têketinê di hundurê koma formê de hêlîn bikin.
Forma hundurîn
Ji bo kontrolên çepgir û blokê yên xêzkirî .form-inlineli forma xwe zêde bikin (ya ku ne hewce ye ku bibe ). Ev tenê ji bo formên di hundurê dîtinportan de ku bi kêmî ve 768 px fireh in derbas dibe.<form>
Dibe ku firehiyên xwerû hewce bike
Ketin û hilbijartî width: 100%;ji hêla xwerû ve di Bootstrap de hatine sepandin. Di nav formên hundurîn de, em ji nû ve vedigirin ku width: auto;ew çend kontrol dikarin li ser heman rêzê bimînin. Li ser sêwirana we ve girêdayî, dibe ku pêvekên xwerû yên zêde hewce bibin.
Her tim etîketan lê zêde bike
Ger hûn ji bo her têketinê etîketek negirin dê xwendevanên ekranê bi formên we re bibin pirsgirêk. Ji bo van formên hundurîn, hûn dikarin etîketan bi karanîna .sr-onlypolê veşêrin. Rêbazên din ên alternatîf ên peydakirina nîşanek ji bo teknolojiyên arîkar hene, wek mînak aria-label, aria-labelledbyan titletaybetmendî. Ger yek ji van tune be, xwendevanên ekranê dibe ku serî li karanîna placeholdertaybetmendiyê bidin, heke hebe, lê bala xwe bidin ku karanîna placeholderwekî cîhgirtina rêbazên din ên nîşankirinê nayê şîret kirin.
<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>Forma Horizontal
Dersên torê yên pêşwextkirî yên Bootstrap bikar bînin da ku bi lêzêdekirina .form-horizontalformê (ya ku ne hewce ye ku bibe <form>) etîket û komên kontrolên formê di sêwirana horizontî de hevrêz bikin. Bi kirina vê yekê .form-groupew diguhezîne ku wekî rêzikên torê tevbigere, ji ber vê yekê ne hewce ye .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>Kontrolên piştgirî kirin
Nimûneyên kontrolên forma standard ên ku di sêwirana forma nimûneyê de têne piştgirî kirin.
Inputs
Kontrola forma herî gelemperî, qadên têketina-based nivîsê. Piştgiriya ji bo hemî celebên HTML5 vedihewîne: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, û color.
Daxuyaniya tîpê pêwîst e
Têketin dê tenê bi tevahî şêwaz bibin heke wan typebi rêkûpêk were ragihandin.
<input type="text" class="form-control" placeholder="Text input">komên Input
Ji bo ku nivîs an bişkokên yekbûyî berî û/an piştî her nivîsê-based zêde bikin <input>, beşa koma têketinê binihêrin .
Textarea
Kontrola formê ya ku pir rêzikên nivîsê piştgirî dike. rowsWekî ku hewce ye, taybetmendiyê biguherînin .
<textarea class="form-control" rows="3"></textarea>Checkboxes û radyo
Qutikên kontrolê ji bo hilbijartina yek an çend vebijarkan di navnîşek de ne, dema ku radyo ji bo hilbijartina yek vebijarkek ji gelekan in.
Qutikên kontrolê û radyoyên neçalak têne piştgirî kirin, lê ji bo peydakirina nîşankerek "ne destûr" li ser hovera dêûbav <label>, hûn hewce ne ku .disabledpolê li dêûbav .radio, .radio-inline, .checkbox, an jî zêde .checkbox-inlinebikin.
Pêşbirk (lihevkirî)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>Qutiyên kontrolê û radyoyên hundurîn
Ji bo kontrolên ku li ser heman xetê xuya dibin, li ser rêzek qutiyên kontrolê an radyoyan dersên .checkbox-inlinean bikar bînin..radio-inline
<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>Qutiyên kontrolê û radyoyên bêyî nivîsa etîketê
Ger nivîsa we di hundurê de tune <label>be, têketin wekî ku hûn hêvî dikin tê cîh kirin. Heya nuha tenê li ser qutiyên kontrolê û radyoyên ne-ne-line dixebite. Bînin bîra xwe ku hûn hîn jî ji bo teknolojiyên arîkar hin formek etîketê peyda bikin (mînak, karanîna 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>Hilbijêre
Têbînî ku gelek menuyên hilbijartî yên xwemalî - nemaze di Safari û Chrome de - quncikên dorpêçkirî hene ku bi border-radiustaybetmendiyan nayên guheztin.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Ji bo <select>kontrolên bi multipletaybetmendiyê, gelek vebijark ji hêla xwerû ve têne destnîşan kirin.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Kontrola statîk
Gava ku hûn hewce ne ku di hundurê formekê de nivîsa sade li kêleka etîketek formê bi cîh bikin, .form-control-staticçîna li ser yek bikar bînin <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>Focus dewletê
Em outlineşêwazên xwerû yên li ser hin kontrolên formê radikin û a box-shadowli şûna wê ji bo :focus.
:focusDewleta Demo
Ketina mînaka jorîn di belgeyên me de şêwazên xwerû bikar tîne da ku :focusdewletê li ser yek nîşan bide .form-control.
Dewlet seqet
Taybetmendiya boolean disabledli ser têketinê zêde bikin da ku pêşî li danûstendinên bikarhêner bigirin. Têketinên neçalak siviktir xuya dikin û kursorek lê zêde dikin not-allowed.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Zeviyên seqetkirî
disabledTaybetmendiyê li a zêde bikin <fieldset>da ku hemî kontrolên di hundurê <fieldset>yekcar de neçalak bikin.
Hişyarî li ser fonksiyona girêdanê ya<a>
Bi xwerû, gerok dê hemî kontrolên forma xwemalî ( <input>, <select>û <button>hêmanên) di hundurê yekî de <fieldset disabled>wekî neçalak bihesibînin, û rê li ber danûstendinên klavyeyê û mişkê li ser wan bigire. Lêbelê, heke forma we jî <a ... class="btn btn-*">hêmanan vedihewîne, dê tenê şêwazek ji wan re were dayîn pointer-events: none. Wekî ku di beşa derbarê rewşa neçalak a ji bo bişkokan de (û bi taybetî di bin-beşa hêmanên ankerê de) hate destnîşan kirin, ev taybetmendiya CSS hîn ne standardkirî ye û di Opera 18 û jêrîn de, an di Internet Explorer 11 de bi tevahî nayê piştgirî kirin û bi ser ket. Nehêle ku bikarhênerên klavyeyê nikaribin van girêdanan balê bikşînin an çalak bikin. Ji ber vê yekê ji bo ewle bibin, JavaScript-a xwerû bikar bînin da ku girêdanên weha neçalak bikin.
Lihevhatina cross-browser
Dema ku Bootstrap dê van şêwazan di hemî gerokan de bicîh bîne, Internet Explorer 11 û jêrîn bi tevahî disabledtaybetmendiya li ser a <fieldset>. JavaScript-a xwerû bikar bînin da ku di van gerokan de berhevoka zeviyê neçalak bikin.
<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>Dewlet tenê xwendin
Taybetmendiya boolean li ser ketinek zêde readonlybikin da ku pêşî li guhertina nirxa têketinê bigirin. Têketinên tenê-xwendin siviktir xuya dikin (mîna têketinên neçalak), lê kursorê standard diparêzin.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Nivîsara alîkariyê
Ji bo kontrolên formê nivîsa alîkariyê ya asta asteng bikin.
Têkiliya nivîsa alîkariyê bi kontrolên formê re
Nivîsara alîkariyê divê bi eşkere bi forma kontrolê ya ku ew bi karanîna aria-describedbytaybetmendiyê ve girêdayî ye ve girêdayî be. Ev ê piştrast bike ku teknolojiyên arîkar - wek xwendevanên ekranê - dê dema ku bikarhêner balê dikişîne an têkeve kontrolê dê vê nivîsa alîkariyê ragihîne.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>Dewletên erêkirinê
Bootstrap şêwazên pejirandinê ji bo xeletî, hişyarî, û dewletên serketî yên li ser kontrolên formê vedihewîne. Ji bo hêmana dêûbavê bikar bînin, zêde .has-warningbikin .has-error, an jî . .has-successHer .control-label, .form-control, û .help-blockdi hundurê wê hêmanê de dê şêwazên pejirandinê bistînin.
Ragihandina rewşa pejirandinê ji teknolojiyên arîkar û bikarhênerên rengdêr re
Bikaranîna van şêwazên pejirandinê ji bo destnîşankirina rewşa kontrolek formê tenê nîşanek dîtbar, rengîn peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re - wek xwendevanên ekranê - an ji bikarhênerên kor-reng re neyê ragihandin.
Piştrast bike ku nîşanek alternatîf a dewletê jî were peyda kirin. Mînakî, hûn dikarin di nivîsa forma kontrolê de îşaretek li ser dewletê bixin nav <label>xwe (wek ku di mînaka koda jêrîn de heye), Glyphiconek (bi nivîsa alternatîf a guncav bi karanîna .sr-onlypolê - li mînakên Glyphicon binêre ), an jî bi pêşkêşkirina bloka nivîsa alîkariyê ya zêde . Bi taybetî ji bo teknolojiyên arîkar, kontrolên formên nederbasdar jî dikarin taybetmendiyek were destnîşan aria-invalid="true"kirin.
<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>Bi îkonên vebijarkî
Her weha hûn dikarin îkonên vebijarkî yên vebijarkî bi lêzêdekirina .has-feedbackû îkonê rast lê zêde bikin.
Îkonên bersivê tenê bi <input class="form-control">hêmanên nivîsê re dixebitin.
Îkon, etîket, û komên têketinê
Ji bo têketinên bê etîket û ji bo komên têketinê yên bi pêvekek li milê rastê ve, pozîsyona bi destan a îkonên bersivdayînê hewce ye. Hûn bi tundî têne teşwîq kirin ku ji bo sedemên gihîştinê ji bo hemî têketinan etîketan peyda bikin. Ger hûn dixwazin rê li ber xuyangkirina etîketan bigirin, wan bi .sr-onlypolê veşêrin. Ger pêdivî ye ku hûn bêyî etîketan bikin, topnirxa îkona bersivê rast bikin. Ji bo komên têketinê, li gorî firehiya pêveka xwe, rightnirxê li gorî nirxek pixelek guncan eyar bikin.
Veguheztina wateya îkonê ji teknolojiyên arîkar re
Ji bo ku pê ewle bibin ku teknolojiyên arîkar - wek xwendevanên ekranê - bi rast wateya îkonekê radigihînin, divê nivîsa veşartî ya zêde bi .sr-onlypolê re were veqetandin û bi eşkere bi kontrola forma ku ew bi karanîna ve girêdayî ye ve girêdayî ye aria-describedby. Wekî din, pê ewle bin ku wate (mînak, rastiya ku ji bo qadek têketina nivîsê ya taybetî hişyariyek heye) bi rengek din were ragihandin, wek mînak guheztina nivîsa rastîn <label>a ku bi kontrola formê ve girêdayî ye.
Her çend mînakên jêrîn jixwe di nivîsê de behsa rewşa pejirandinê ya kontrolên forma wan ên têkildar dikin <label>jî, teknîka jorîn (bikaranîna .sr-onlynivîsê û aria-describedby) ji bo mebestên ronîkirinê hatiye nav kirin.
<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>Îkonên vebijarkî di formên horizontî û hundurîn de
<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>Îkonên vebijarkî yên bi etîketên .sr-onlyveşartî
Ger hûn .sr-onlypolê bikar bînin da ku formek kontrolê veşêrin <label>(li şûna ku hûn vebijarkên din ên nîşankirinê, wek aria-labeltaybetmendiyê bikar bînin), Bootstrap dê bixweber pozîsyona îkonê gava ku were zêdekirin rast bike.
(serketinî)
@
(serketinî)
<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>Mezinahiya kontrolê
Bi karanîna çînên mîna .input-lg, bilindahiyan destnîşan bikin, û bi karanîna çînên stûnên torê yên mîna .col-lg-*.
Mezinahiya bilindbûnê
Kontrolên forma dirêjtir an kurttir biafirînin ku bi pîvanên bişkojkê re li hev dikin.
<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>Mezinahiyên koma formên asoyî
Bi .form-horizontallêzêdekirina .form-group-lgan .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>Mezinbûna stûnê
Keyanan di stûnên torê, an hêmanek dêûbavê xwerû de bipêçin, da ku bi hêsanî firehiyên xwestinê bicîh bikin.
<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>Buttons
Etîketên bişkokê
Dersên bişkojka li ser <a>, <button>, an <input>elementek bikar bînin.
<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">Bikaranîna-tewre-taybetî
Dema ku dersên bişkojkê dikarin li ser <a>û <button>hêmanan werin bikar anîn, tenê <button>hêman di nav pêkhateyên nav û navbara me de têne piştgirî kirin.
Girêdanên wekî bişkokan tevdigerin
Ger <a>hêman têne bikar anîn da ku wekî bişkokan tevbigerin - fonksiyona navrûpelê dişoxilînin, li şûna ku di nav rûpela heyî de berbi belgeyek an beşek din ve biçin - divê ji wan re jî guncanek were dayîn role="button".
Rendering cross-browser
Wekî pratîkek çêtirîn, em bi tundî pêşniyar dikin ku <button>gava ku gengaz be, hêmanê bikar bînin bikar bînin da ku ji hevberdana gerokê ya hevgirtî piştrast bikin.
Di nav tiştên din de, di Firefox <30 de xeletiyek heye ku me nahêle ku bişkokên-based saz bikin line-height, <input>û dibe sedem ku ew tam bi bilindahiya bişkokên din ên Firefox-ê re nebin hev.
Vebijêrk
Yek ji dersên bişkojka berdest bikar bînin da ku zû bişkokek şêwazê biafirînin.
<!-- 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>Veguheztina wateya teknolojiyên arîkar
Bikaranîna rengan ji bo lê zêdekirina wateyê li bişkokekê tenê nîşanek dîtbarî peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng hatî destnîşan kirin an ji naverokê bixwe diyar e (nivîsara xuya ya bişkojkê), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .sr-onlypolê re veşartî ye.
Sizes
Bişkokên mezintir an piçûktir dixwazin? Zêde bikin .btn-lg, .btn-sm, an .btn-xsji bo pîvanên din.
<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>Bişkojkên asta blokê biafirînin - yên ku bi tevahî firehiya dêûbav vedigirin - bi lêzêdekirina .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>Dewleta çalak
Dema ku çalak be dê bişkokên pêlkirî xuya bibin (bi paşxaneyek tarîtir, sînorê tarîtir û siya hundurîn). Ji bo <button>hêmanan, ev bi rêya pêk tê :active. Ji bo <a>hêmanan, ew bi .active. Lêbelê, hûn dikarin .activeli ser <button>s-ê bikar bînin (û aria-pressed="true"taybetmendiyê têxin nav xwe) heke hûn hewce ne ku dewleta çalak bi bernameyê dubare bikin.
Elementa bişkokê
Ne hewce ye ku lê zêde :activebikin ji ber ku ew çînek pseudo ye, lê heke hûn hewce ne ku heman xuyangê bi zorê bikin, pêşde biçin û lê zêde .activebikin.
<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>Hêmana Ankerê
Dersê .activeli <a>bişkokan zêde bikin.
<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>Dewlet seqet
Bi vegerandina bişkokan bi vegerandina wan bişkokan bikin ku nayên klîk kirin opacity.
Elementa bişkokê
disabledTaybetmendiyê li bişkokan zêde bikin <button>.
<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>Lihevhatina cross-browser
Ger hûn disabledtaybetmendiyê li a-yê zêde bikin <button>, Internet Explorer 9 û jêrîn dê nivîsê bi nivîs-siyayek xirab a ku em nekarin rast bikin gewr bikin.
Hêmana Ankerê
Dersê .disabledli <a>bişkokan zêde bikin.
<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>Em .disabledli vir wekî çîna bikêrhatî, mîna .activeçîna hevpar, bikar tînin, ji ber vê yekê pêşgirek ne hewce ye.
Hişyariya fonksiyona girêdanê
Ev çîn ji pointer-events: nonebo neçalakkirina fonksiyona girêdanê ya <a>s bikar tîne, lê ew taybetmendiya CSS hîn ne standardkirî ye û di Opera 18 û jêrîn de, an di Internet Explorer 11 de bi tevahî nayê piştgirî kirin. Wekî din, di gerokên ku piştgirî dikin de jî pointer-events: none, klavyeyê navîgasyon bêbandor dimîne, tê vê wateyê ku bikarhênerên klavyeyê yên dîtbar û bikarhênerên teknolojiyên arîkar hîn jî dê karibin van girêdanan çalak bikin. Ji ber vê yekê ji bo ewle bibin, JavaScript-a xwerû bikar bînin da ku girêdanên weha neçalak bikin.
Images
Wêneyên bersivdar
Wêneyên di Bootstrap 3 de dikarin bi lêzêdekirina .img-responsivepolê re bersivdar-heval werin çêkirin. Ev max-width: 100%;, height: auto;û display: block;li ser wêneyê derbas dibe, da ku ew bi hêmana dêûbav re xweş bihejîne.
Ji bo navendkirina wêneyên ku .img-responsivepolê bikar tînin, .center-blockli şûna .text-center. Ji bo bêtir agahdarî di derbarê karanîna de, beşa dersên arîkar bibînin..center-block
Wêneyên SVG û IE 8-10
Di Internet Explorer 8-10-ê de, wêneyên SVG bi .img-responsivemezinahîya nehevseng in. Ji bo rastkirina vê, width: 100% \9;cîhê ku pêwîst be lê zêde bike. Bootstrap vê yekê bixweber bicîh nayîne ji ber ku ew dibe sedema tevliheviyan di formên din ên wêneyê de.
<img src="..." class="img-responsive" alt="Responsive image">Şiklên wêneyê
Dersan li <img>hêmanek zêde bikin da ku di her projeyê de wêneyan bi hêsanî şêwaz bikin.
Lihevhatina cross-browser
Bînin bîra xwe ku Internet Explorer 8 ji bo quncikên dorpêçkirî piştgirî tune.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Dersên alîkar
Rengên hevokê
Bi çend dersên bikêrhatî yên girîng re wateyê bi rengê xwe vebigihînin. Dibe ku ev li ser girêdanan jî werin sepandin û dê mîna şêwazên girêdana meya xwerû ya li ser hover tarî bibin.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh 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>Bi taybetmendiyê re mijûl dibin
Carinan ji ber taybetmendiya hilbijêrek din dersên giraniyê nikarin werin sepandin. Di pir rewşan de, çareseriyek têr ev e ku hûn nivîsa xwe di <span>nav polê de bipêçin.
Veguheztina wateya teknolojiyên arîkar
Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (rengên naverokê tenê ji bo bihêzkirina wateya ku berê di nivîsê/nîşandanê de heye têne bikar anîn), an jî bi navgînên alternatîf ve girêdayî ye, wek mînak nivîsa zêde ya ku bi .sr-onlypolê re veşartî ye. .
Paşnavên hevokê
Mîna çînên rengê nivîsê yên kontekstî, bi hêsanî paşxaneya hêmanekê li her çînek konteksalî bicîh bikin. Dê pêkhateyên ankerê li ser hêlînê tarî bibin, mîna çînên nivîsê.
Nullam id dolor id nibh 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>Bi taybetmendiyê re mijûl dibin
Carinan ji ber taybetmendiya hilbijarkek din dersên paşnavê yên kontekstî nayên sepandin. Di hin rewşan de, çareseriyek têr ev e ku hûn naveroka hêmana xwe di <div>nav polê de bipêçin.
Veguheztina wateya teknolojiyên arîkar
Mîna rengên kontekstê , pê ewle bin ku her wateyek ku bi reng ve hatî veguheztin jî bi rengek ku ne tenê pêşkêşî ye were veguheztin.
Girtina îkonê
Ji bo betalkirina naverokê mîna modal û hişyariyê îkona nêzîkê ya gelemperî bikar bînin.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Carets
Ji bo ku fonksiyon û rêgezên dakêşanê destnîşan bikin xêzikan bikar bînin. Bala xwe bidinê ku xala xwerû dê di pêşekên dakêşanê de bixweber vegere .
<span class="caret"></span>Lepikên bilez
Bi çînekê re hêmanek li çep an rastê biherikînin. !importanttê de ye ku ji pirsgirêkên taybetî dûr nekevin. Ders dikarin wekî mixîn jî werin bikar anîn.
<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();
}Naveroka navendê asteng dike
Hêmanek li ser display: blockû navendê bi rêya margin. Wek mixîn û sinifê peyda dibe.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Clearfix
floatBi lêzêdekirina .clearfix li hêmana dêûbavê s bi hêsanî paqij bikin . Paqijkirina mîkro wekî ku ji hêla Nicolas Gallagher ve hatî populer kirin bikar tîne. Di heman demê de dikare wekî mixîn jî were bikar anî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();
}Naverok nîşan didin û vedişêrin
Bi karanîna û çînan zorê bidin ku hêmanek were xuyang kirin an veşartin ( tevî ji bo xwendevanên ekranê ). Van çînan bikar tînin da ku ji nakokiyên taybetmendiyê dûr bixin, mîna floatên bilez . Ew tenê ji bo veguherîna asta blokê hene. Di heman demê de ew dikarin wekî mîksan jî werin bikar anîn..show.hidden!important
.hideberdest e, lê ew her gav bandorê li xwendevanên ekranê nake û ji v3.0.1 -ê ve hatî qewirandin. Bi kar tînin .hiddenan .sr-onlyli şûna.
Wekî din,.invisible dikare were bikar anîn da ku tenê dîtina hêmanek biguheze, tê vê wateyê ku displayew nayê guheztin û hêman hîn jî dikare bandorê li herikîna belgeyê bike.
<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();
}Xwendevana ekranê û naveroka navîgasyonê ya klavyeyê
Ji bilî xwendevanên ekranê bi .sr-only. .sr-onlyBi hev re tevbigerin .sr-only-focusableda ku hêman dema ku balê dikişîne careke din nîşan bide (mînak ji hêla bikarhênerek tenê klavyeyê ve). Ji bo şopandina pratîkên çêtirîn gihîştinê hewce ye hewce ye . Di heman demê de dikare wekî mixîn jî were bikar anîn.
<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();
}Guhertina wêneyê
Ders .text-hidean mixin bikar bînin da ku ji bo ku hûn naveroka nivîsê ya hêmanek bi wêneyek paşerojê veguherînin bibin alîkar.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Karûbarên bersivdar
Ji bo pêşkeftina heval-mobîl a zûtir, van dersên karûbar bikar bînin ji bo nîşandana û veşartina naverokê ji hêla cîhazê ve bi navgîniya lêpirsîna medyayê. Di heman demê de dersên bikêrhatî jî hene ji bo guheztina naverokê dema çapkirinê.
Biceribînin ku van li ser bingehek sînordar bikar bînin û ji afirandina guhertoyên bi tevahî cûda yên heman malperê dûr bisekinin. Di şûna wê de, wan bikar bînin da ku pêşandana her cîhazê temam bikin.
Dersên berdest
Ji bo guheztina naverokê di nav xalên veqetandinê yên dîtinê de yek an hevbendiyek ji çînên berdest bikar bînin.
| Amûrên piçûk ên zêdeTelefon (<768px) | Amûrên piçûkTablet (≥768 px) | Amûrên navînSermaseyên (≥992px) | Amûrên mezinSermaseyên (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Têdîtinî | Veşartî | Veşartî | Veşartî |
.visible-sm-* |
Veşartî | Têdîtinî | Veşartî | Veşartî |
.visible-md-* |
Veşartî | Veşartî | Têdîtinî | Veşartî |
.visible-lg-* |
Veşartî | Veşartî | Veşartî | Têdîtinî |
.hidden-xs |
Veşartî | Têdîtinî | Têdîtinî | Têdîtinî |
.hidden-sm |
Têdîtinî | Veşartî | Têdîtinî | Têdîtinî |
.hidden-md |
Têdîtinî | Têdîtinî | Veşartî | Têdîtinî |
.hidden-lg |
Têdîtinî | Têdîtinî | Têdîtinî | Veşartî |
Ji v3.2.0 ve, .visible-*-*dersên ji bo her xala veqetandinê sê cûrbecûr têne, yek ji bo her displaynirxa milkê CSS-ê ku li jêr hatî navnîş kirin.
| Koma dersan | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Ji ber vê yekê, ji bo ekranên piçûktir ( xs) ji bo nimûne, .visible-*-*dersên berdest ev in: .visible-xs-block, .visible-xs-inline, û .visible-xs-inline-block.
Çînên .visible-xs, .visible-sm, .visible-md, û .visible-lgher weha hene, lê ji v3.2.0-ê ve têne derxistin . .visible-*-blockJi bilî rewşên taybetî yên din ên ji bo veguheztinê, ew bi qasî hevber in<table> veguheztina hêmanên têkildar.
Dersên çapkirinê
Mîna dersên bersivdar ên birêkûpêk, van ji bo guheztina naverokê ji bo çapkirinê bikar bînin.
| Classes | Browser | Çap |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Veşartî | Têdîtinî |
.hidden-print |
Têdîtinî | Veşartî |
.visible-printÇîn jî heye lê ji v3.2.0 - ê ve hatî paşve xistin. .visible-print-blockJi bilî rewşên taybetî yên din ên ji bo <table>hêmanên têkildar , ew bi qasî hevwate ye.
Rewşên testê
Geroka xwe biguhezînin an li ser cîhazên cihêreng bar bikin da ku dersên kargêriya bersivdar biceribînin.
Li ser xuya dibe ...
Nîşaneyên kesk destnîşan dikin ku hêman di dîmendera weya heyî de xuya ye .
Extra biçûk
✔ Li ser x-piçûk xuya dibe
Biçûk
✔ Li ser piçûk xuya dibe
Medya
✔ Li ser navîn xuya dibe
Mezin
✔ Li ser mezin xuya dibe
✔ Li ser x-piçûk û piçûk xuya dibe
✔ Li ser navîn û mezin xuya dibe
✔ Li ser x-piçûk û navîn xuya dibe
✔ Li ser piçûk û mezin xuya dibe
✔ Li ser x-piçûk û mezin xuya dibe
✔ Li ser piçûk û navîn xuya dibe
Veşartî li ser ...
Li vir, nîşaneyên kesk jî destnîşan dikin ku hêman di dîmendera weya heyî de veşartî ye .
Bikaranîna Kêmtir
CSS-ya Bootstrap li ser Less-ê hatî çêkirin, pêş-processorek bi fonksiyonên din ên mîna guhêrbar, mixîn, û fonksiyonên ji bo berhevkirina CSS-ê. Yên ku li şûna pelên me yên CSS-ê yên berhevkirî çavkaniyê pelên Kêmtir bikar bînin dikarin gelek guhêrbar û mixînên ku em di çarçovê de bikar tînin bikar bînin.
Guherbarên Grid û mixîn di beşa pergala Grid de têne vegirtin .
Berhevkirina Bootstrap
Bootstrap dikare bi kêmî ve bi du awayan were bikar anîn: bi CSS-ya berhevkirî an bi çavkaniya pelên Less. Ji bo berhevkirina pelên Kêmtir, ji beşa Destpêkirinê şêwir bikin ka meriv çawa hawîrdora pêşkeftina xwe saz dike da ku emrên pêwîst bimeşîne.
Dibe ku amûrên berhevkirina partiya sêyemîn bi Bootstrap re bixebitin, lê ew ji hêla tîmê meya bingehîn ve nayên piştgirî kirin.
Variables
Guherîn di tevahiya projeyê de wekî rêyek ji bo navendîkirin û parvekirina nirxên gelemperî yên wekî reng, cîh, an stûnên tîpan têne bikar anîn. Ji bo veqetandinek bêkêmasî, ji kerema xwe li Customizer binêre .
Colors
Bi hêsanî du nexşeyên rengîn bikar bînin: grayscale û semantîk. Rengên gewr gihîştina bilez a rengdêrên reş ên ku bi gelemperî têne bikar anîn peyda dikin dema ku semantîk rengên cihêreng ên ku ji nirxên çarçoveyek watedar re hatine veqetandin vedihewîne.
@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;Yek ji van guhêrbarên rengîn wekî ku ew in bikar bînin an ji bo projeya xwe wan ji nû ve bi guhêrbarên watedartir veqetînin.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Skeffolding
Çend guhêrbar ji bo xwerûkirina zû hêmanên sereke yên îskeleta malpera xwe.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Girêdanên
Girêdanên xwe bi rengek rast bi tenê bi yek nirx bi hêsanî şêwaz bikin.
// 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;
}
}Bala xwe bidinê ku @link-hover-colorfonksiyonek, amûrek din a bi heybet ji Less bikar tîne da ku bixweber rengê hoverê rast biafirîne. Hûn dikarin darken, lighten, saturate, û bikar bînin desaturate.
Tîpografi
Bi çend guhêrbarên bilez tîpên xwe, mezinahiya nivîsê, pêşeng, û hêj bêtir bi hêsanî saz bikin. Bootstrap van jî bikar tîne da ku tevliheviyên tîpografîk ên hêsan peyda bike.
@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;Îkonên
Du guhêrbarên bilez ji bo xweşkirina cîh û navê pelê îkonên xwe.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Components
Pêkhatên li seranserê Bootstrap ji bo danîna nirxên hevpar hin guhêrbarên xwerû bikar tînin. Li vir yên ku herî zêde têne bikar anîn hene.
@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;Firoşkar tevlihev dike
Miksên firoşkar mixîn in ku ji bo piştgirîkirina gelek gerokan bi tevlêkirina hemî pêşgirên firoşkarê têkildar di CSS-ya weya berhevkirî de dibin alîkar.
Box-sizing
Bi tevliheviyek yekane modela qutiya pêkhateyên xwe ji nû ve saz bikin. Ji bo çarçoveyê, vê gotara arîkar ji Mozilla bibînin .
Miksin ji v3.2.0-ê, bi danasîna Autoprefixer-ê ve hatî hilweşandin . Ji bo parastina lihevhatina paşverû, Bootstrap dê heya Bootstrap v4-ê karanîna mixin-ê di hundurê xwe de bidomîne.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Kuçên dorpêçkirî
Îro hemî gerokên nûjen piştgirî didin border-radiustaybetmendiya ne-pêşgir. Bi vî rengî, mixin tune .border-radius(), lê Bootstrap kurtebiran vedihewîne da ku zû du quncik li aliyekî taybetî yê tiştekê bizivirîne.
.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;
}Box (Drop) siya
Ger temaşevanên mebesta we gerok û cîhazên herî dawî û herî mezin bikar tînin, pê ewle bin ku hûn box-shadowxwedan xanî bikar bînin. Heke hûn ji bo cîhazên Android-ya kevn (pre-v4) û iOS (pre-iOS 5) piştgirî hewce ne, ji bo ku pêşgira pêwîst hilbijêrin, mixin-a netewandî bikar bînin.-webkit
Miksin ji v3.1.0 -ê ve hatî hilweşandin, ji ber ku Bootstrap bi fermî piştgirî nade platformên kevnar ên ku piştgirî nadin taybetmendiya standard. Ji bo parastina lihevhatina paşverû, Bootstrap dê heya Bootstrap v4-ê karanîna mixin-ê di hundurê xwe de bidomîne.
Pê bawer bin ku hûn rgba()rengan di siyên qutiya xwe de bikar bînin da ku ew bi qasî ku pêkan bi paşxaneyan re tevbigerin.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Transitions
Gelek mixin ji bo nermbûnê. Hemî agahdariya veguheztinê bi yekê re bicîh bikin, an jî li gorî hewcedariyê dereng û demek cûda diyar bikin.
Miksîn ji v3.2.0-ê, bi danasîna Autoprefixer-ê, têne paşguh kirin . Ji bo parastina lihevhatina paşverû, Bootstrap dê heta Bootstrap v4-ê karanîna mixînên hundurîn berdewam bike.
.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;
}Transformations
Tiştekî bizivirînin, pîvandin, wergerînin (livînin), an jî bizivirînin.
Miksîn ji v3.2.0-ê, bi danasîna Autoprefixer-ê, têne paşguh kirin . Ji bo parastina lihevhatina paşverû, Bootstrap dê heta Bootstrap v4-ê karanîna mixînên hundurîn berdewam bike.
.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;
}Animations
Miksek yekane ji bo karanîna hemî taybetmendiyên anîmasyonê yên CSS3 di yek danezanê de û mîksên din ji bo taybetmendiyên kesane.
Miksîn ji v3.2.0-ê, bi danasîna Autoprefixer-ê, têne paşguh kirin . Ji bo parastina lihevhatina paşverû, Bootstrap dê heta Bootstrap v4-ê karanîna mixînên hundurîn berdewam bike.
.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;
}Nerazîbûn
Nerazîbûnê ji bo hemî gerokan saz bikin û ji filterbo IE8 vegerek peyda bikin.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Nivîsara cihgir
Ji bo kontrolên formê di nav her qadê de çarçoveyek peyda bikin.
.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
}Stûnên
Bi riya CSS-ê di nav yek elementek de stûnan biafirînin.
.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;
}Gradients
Bi hêsanî her du rengan bizivirînin deverek paşîn. Zêdetir pêşkeftî bibin û rêgezek saz bikin, sê rengan bikar bînin, an gradientek radial bikar bînin. Bi tevliheviyek yekane hûn hemî hevoksaziyên pêşgir ên ku hûn hewce ne distînin.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Her weha hûn dikarin goşeya pîvanek standard a du-reng, rêzik diyar bikin:
#gradient > .directional(#333; #000; 45deg);Heke hûn hewceyê gradientek şêwaza berber-stripe hewce ne, ew jî hêsan e. Tenê rengek yekane diyar bikin û em ê xêzek spî ya şefaf li ser bixin.
#gradient > .striped(#333; 45deg);Ante bilind bikin û li şûna wê sê rengan bikar bînin. Rengê yekem, rengê duyemîn, rawestana rengê duyemîn (nirxek ji sedî 25%), û rengê sêyemîn bi van tevlihevan re bicîh bikin:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Serê xwe! Ger hewce be ku hûn pileyek derxînin, pê ewle bin ku hûn IE-ya taybetî ya filterku we lê zêde kiriye jêbirin. Hûn dikarin wê bi karanîna .reset-filter()mixin li kêleka hev background-image: none;bikin.
Miksên bikêrhatî
Mîksên bikêr mixîn in ku taybetmendiyên CSS yên negirêdayî hev dikin da ku bigihîjin armancek an peywirek taybetî.
Clearfix
class="clearfix"Zêdekirina li her hêmanek ji bîr bikin û li şûna .clearfix()ku pêdivî ye mixin lê zêde bikin. Micro zelal ji Nicolas Gallagher bikar tîne .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Navenda Horizontal
Zû her hêmanek di hundurê dêûbavê xwe de navend bikin. Pêdivî ye widthan jî max-widthwere danîn.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Alîkarên mezinbûnê
Pîvana tiştek hêsantir diyar bikin.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Qadên tekstê yên ku ji nû ve têne mezin kirin
Vebijarkên mezinbûnê ji bo her textarea, an hêmanek din bi hêsanî mîheng bikin. Ji bo tevgerên geroka normal ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Nivîsandin qutkirin
Bi yek mixînek bi elîpsîsekê bi hêsanî nivîsê qut bikin. Pêdivî ye ku hêman bibe blockan inline-blockasta.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Wêneyên Retina
Du rêyên wêneyê û pîvanên wêneya @1x diyar bikin, û Bootstrap dê pirsek medya @2x peyda bike. Ger gelek wêneyên we hene ku hûn xizmetê bikin, bifikirin ku wêneya xweya retina CSS bi destan di yek pirsek medyayê de binivîsin.
.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);
}Bikaranîna Sass
Dema ku Bootstrap li ser Less-ê hatî çêkirin, di heman demê de portek fermî ya Sass-ê jî heye . Em wê di depoyek GitHub-ê ya cihêreng de diparêzin û nûvekirinên bi skrîptek veguheztinê digirin dest.
Çi tê de ye
Ji ber ku porta Sass xwedan depoyek cihê ye û ji temaşevanek piçûktir re xizmet dike, naveroka projeyê ji projeya sereke ya Bootstrap pir cûda dibe. Ev piştrast dike ku porta Sass bi qasî ku gengaz dibe bi gelek pergalên bingeh-Sass re hevaheng e.
| Şop | Terîf |
|---|---|
lib/ |
Koda gem a Ruby (veavakirina Sass, Rails û entegrasyonên Compass) |
tasks/ |
Nivîsarên veguherîner (zivirandina Kêmtir berbi Sass) |
test/ |
testên berhevkirinê |
templates/ |
Pakêta Compass diyar dike |
vendor/assets/ |
Sass, JavaScript, û pelên fontê |
Rakefile |
Karên hundurîn, wekî rakêş û veguherîn |
Serdana depoya GitHub ya porta Sass bikin ku van pelan di çalakiyê de bibînin.
Lêkirinî
Ji bo agahdarî li ser meriv çawa Bootstrap-ê ji bo Sass saz dike û bikar tîne, li depoya GitHub readme şêwir bikin. Ew çavkaniya herî nûjen e û agahdariya ji bo karanîna bi Rails, Compass, û projeyên standard Sass vedihewîne.