“Bootstrap” -yň infrastrukturasynyň esasy böleklerine, şol sanda has gowy, has çalt we güýçli web ösüşine bolan çemeleşmämizi alyň.

HTML5 doktip görnüşi

Bootstrap, HTML5 doktipiniň ulanylmagyny talap edýän käbir HTML elementlerini we CSS häsiýetlerini ulanýar. Allhli taslamalaryňyzyň başynda goşuň.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Ilki bilen ykjam

“Bootstrap 2” bilen çarçuwanyň esasy taraplary üçin goşmaça ykjam dostluk stillerini goşduk. “Bootstrap 3” bilen, ykjam dostlukly bolmak üçin taslamany başdan täzeden ýazdyk. Goşmaça ykjam stilleri goşmagyň ýerine, özenine bişirilýär. Aslynda, “ Bootstrap” ilki ykjam . Jübi telefonynyň ilkinji stillerini aýratyn faýllaryň ýerine däl-de, tutuş kitaphanada tapyp bilersiňiz.

Dogry görkezilmegini we ýakynlaşdyrylmagyny üpjün etmek üçin, “Viewport meta” belligini goşuň <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noGörkeziş meta belligine goşup, ykjam enjamlarda ulaltmak mümkinçiliklerini öçürip bilersiňiz . Bu ulaltmagy öçürýär, ýagny ulanyjylar diňe aýlap bilýärler we sahypaňyza ýerli programma ýaly birneme duýulýar. Umuman aýdanymyzda, muny her sahypada maslahat beremzok, şonuň üçin seresap boluň!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Tipografiýa we baglanyşyklar

“Bootstrap” esasy global displeýi, tipografiýany we baglanyşyk stillerini düzýär. Has takygy, biz:

Gurnama background-color: #fff;_body
@font-family-base, @font-size-baseWe @line-height-basehäsiýetleri tipografiki bazamyz hökmünde ulanyň
Linkhliumumy baglanyşyk reňkini düzüň @link-colorwe diňe baglanyşyk setirlerini ulanyň:hover

Bu stilleri içerde tapyp bilersiňiz scaffolding.less.

Normalize.css

Has oňat brauzer görkezişi üçin, Nikolas Gallagher we Jonatan Nealyň taslamasy bolan Normalize.css ulanýarys .

Konteýnerler

“Bootstrap” sahypanyň mazmunyny örtmek we gözenek ulgamymyzy ýerleşdirmek üçin öz içine alýan elementi talap edýär. Taslamalaryňyzda ulanmak üçin iki gapdan birini saýlap bilersiňiz. Üns beriň, paddingköplenç we hiç bir konteýner höwürtgelemeýär.

.containerDuýgur kesgitlenen giňlikli gap üçin ulanyň .

<div class="container">
  ...
</div>

.container-fluidGörkezişiňiziň ähli giňligini öz içine alýan doly ini konteýner üçin ulanyň .

<div class="container-fluid">
  ...
</div>

“Bootstrap”, enjamyň ýa-da görnüşiň ulalmagy bilen 12 sütüne çenli terezini düzýän täsirli, ykjam ilkinji suwuklyk ulgamyny öz içine alýar. Easyeňil düzüliş opsiýalary üçin öňünden kesgitlenen sapaklary , has semantik düzülişleri döretmek üçin güýçli garyndylary öz içine alýar .

Giriş

Grid ulgamlary, mazmunyňyzy ýerleşdirýän hatarlaryň we sütünleriň üsti bilen sahypa düzülişini döretmek üçin ulanylýar. “Bootstrap” grid ulgamynyň işleýşi:

Dogry deňleşdirmek we ýerleşdirmek üçin hatarlary .container(kesgitlenen ini) ýa-da (doly ini) ýerleşdirmeli..container-fluid
Sütünleriň keseligine topar döretmek üçin hatarlary ulanyň.
Mazmun sütünleriň içinde ýerleşdirilmelidir we diňe sütünler hatar çagalar bolup biler.
Öňünden kesgitlenen gözenek synplary .row, .col-xs-4çalt tertip düzmek üçin elýeterlidir. Has az garyndylar has semantik düzülişler üçin hem ulanylyp bilner.
Sütünler üsti bilen çukurlary (sütün mazmunynyň arasyndaky boşluklary) döredýär padding. Şol örtük, birinji we soňky sütün üçin hatarlarda negatiw margin arkaly hatara düzülýär .row.
Negativearamaz margin, aşakdaky mysallaryň köne bolmagynyň sebäbi. Tor sütünleriniň içindäki mazmun, gözenegiň däl mazmuny bilen hatara düzülendir.
Grid sütünleri, aralaşmak isleýän on iki sütüniň sanyny görkezmek bilen döredilýär. Mysal üçin, üç sany sütün üçüsini ulanardy .col-xs-4.
Bir hatarda 12-den gowrak sütün ýerleşdirilse, goşmaça sütünleriň her topary bir birlik hökmünde täze setire girer.
Grid synplary, nokat giňliginden uly ýa-da deň bolan ekran giňligi bolan enjamlara degişlidir we kiçi enjamlara gönükdirilen gözenek synplaryny ýok edýär. Şonuň üçin haýsydyr bir .col-md-*synpy bir elemente ulanmak diňe bir orta enjamlarda däl-de, eýsem .col-lg-*synp ýok bolsa uly enjamlarda-da täsir eder.

Bu ýörelgeleri koduňyza ulanmak üçin mysallara göz aýlaň.

Mediýa soraglary

Tor ulgamymyzdaky esasy nokatlary döretmek üçin Az faýllarymyzdaky aşakdaky media talaplaryny ulanýarys.

/* 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) { ... }

max-widthCSS-ni has dar enjamlar toplumy bilen çäklendirmek üçin bu media talaplarynda wagtal-wagtal giňelýäris .

@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) { ... }

Grid görnüşleri

“Bootstrap” grid ulgamynyň taraplarynyň amatly stol bilen birnäçe enjamda nähili işleýändigini görüň.

	Goşmaça kiçi enjamlar Telefon (<768px)	Kiçi enjamlar Planşetler (≥768px)	Orta enjamlar Iş stollary (≥992px)	Uly enjamlar Iş stollary (≥1200px)
Grid häsiýeti	Hemişe keseligine	Başlamak üçin ýykyldy, kesiş nokatlarynyň üstünde keseligine
Konteýner giňligi	Hiç biri (awto)	750px	970px	1170px
Synp prefiksi	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
sütünleriň #	12
Sütüniň ini	Awto	~ 62px	~ 81px	~ 97px
Gutyň ini	30px (sütüniň her tarapynda 15px)
Höwürtge	Hawa
Offsets	Hawa
Sütün sargyt	Hawa

Mysal: Gorizontal

Grid synplarynyň ýekeje toplumyny ulanyp .col-md-*, iş stoly (orta) enjamlarda keseligine öwrülmezden ozal ykjam enjamlarda we planşet enjamlarynda (goşmaça kiçi we kiçi aralykda) ýerleşdirilen esasy gözenek ulgamyny döredip bilersiňiz. Islendik sütün sütünini ýerleşdiriň .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>

Mysal: Suwuk gap

Islendik kesgitli giňlikdäki gözenegiň daşky görnüşini üýtgedip, doly giňlikdäki tertibe .containeröwüriň .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Mysal: Jübi we iş stoly

Sütünleriňiziň has kiçi enjamlara ýerleşdirilmegini islemeýärsiňizmi? .col-xs-* .col-md-*Sütünleriňize goşup, goşmaça kiçi we orta enjam grid synplaryny ulanyň . Bularyň nähili işleýändigi barada has gowy düşünmek üçin aşakdaky mysala serediň.

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

Mysal: Jübi telefony, planşet, iş stoly

.col-sm-*Planşet synplary bilen has dinamiki we güýçli düzülişleri döredip, öňki mysalda guruň .

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

Mysal: Sütüniň örtügi

Bir hatarda 12-den gowrak sütün ýerleşdirilse, goşmaça sütünleriň her topary bir birlik hökmünde täze setire girer.

.col-xs-9

.col-xs-4
9 + 4 = 13> 12-den bäri, 4 sütünli bu diw bir bitewi birlik hökmünde täze setire örtülýär.

.col-xs-6
Soňky sütünler täze setir boýunça dowam edýär.

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

Jogapkär sütün täzeden başlaýar

Dört derejeli gözenek bar bolsa, belli bir nokatlarda sütünleriň biri beýlekisinden beýik bolany üçin gaty dogry düşmeýän meselelere baş goşarsyňyz. Muny düzetmek üçin a .clearfixwe jogap beriji peýdaly synplarymyzyň kombinasiýasyny ulanyň .

.col-xs-6 .col-sm-3
Görkezişiňizi üýtgediň ýa-da mysal üçin telefonyňyzda barlaň.

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

Duýgur nokatlarda sütün arassalamakdan başga-da, ofsetleri, itekleri ýa-da çekmeleri täzeden düzmeli bolmagyňyz mümkin . Muny gözenegiň mysalynda görüň .

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

Sütünleri öçürmek

Sütünleri ulanyp sütünleri saga geçiriň .col-md-offset-*. Bu synplar sütüniň çep gyrasyny *sütünler bilen köpeldýär. Mysal üçin, dört sütüniň üstünden .col-md-offset-4geçýär ..col-md-4

.col-md-4

.col-md-4 .col-md-ofset-4

.col-md-3 .col-md-ofset-3

.col-md-6 .col-md-ofset-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>

Mundan başga-da, synplar bilen aşaky gözenek gatlaklaryndan ofsetleri ýok edip bilersiňiz .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>

Höwürtge sütünleri

Mazmunyňyzy deslapky gözenek bilen ýerleşdirmek üçin, bar bolan sütüniň içine täze .rowwe sütünler goşuň . Içerki hatarlarda 12 ýa-da has az sütünler toplumy bolmaly (bar bolan sütünleriň hemmesini ulanmagyňyz hökmany däl)..col-sm-*.col-sm-*

1-nji dereje: .col-sm-9

2-nji dereje: .col-xs-8 .col-sm-6

2-nji dereje: .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>

Sütün sargyt

Gurlan gözenek sütünlerimiziň .col-md-push-*we .col-md-pull-*üýtgediji synplarymyzyň tertibini aňsatlyk bilen üýtgediň.

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

Az garyndylar we üýtgeýjiler

Çalt düzülişler üçin öňünden gurlan gözenek synplaryndan başga-da , “Bootstrap” öz ýönekeý, semantik düzülişleriňizi çalt döretmek üçin az üýtgeýjileri we garyndylary öz içine alýar.

Üýtgeýjiler

Üýtgeýjiler sütünleriň sanyny, içegäniň giňligini we ýüzýän sütünleri başlamaly media talap nokadyny kesgitleýär. Bulary ýokarda resminamalaşdyrylan öňünden kesgitlenen gözenek synplaryny, şeýle hem aşakda görkezilen adaty garyndylar üçin ulanýarys.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

Miksinler, aýratyn gözenek sütünleri üçin semantik CSS döretmek üçin gözenegiň üýtgeýjileri bilen bilelikde ulanylýar.

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

Mysal ulanylyşy

Üýtgeýjileri öz aýratyn bahalaryňyza üýtgedip bilersiňiz ýa-da garyşyklary adaty bahalary bilen ulanyp bilersiňiz. Ine, aralykdaky iki sütünli düzülişi döretmek üçin deslapky sazlamalary ulanmagyň mysaly.

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

Ingsazgylar

<h1>HTMLhli HTML sözbaşylary <h6>elýeterlidir. .h1sapaklaryň üsti .h6bilen hem elýeterlidir, sebäbi sözbaşynyň şrift görnüşine gabat gelmek isleseňiz, ýöne tekstiňiziň setirde görkezilmegini isleseňiz.

h1. Bootstrap sözbaşy	Semibold 36px
h2. Bootstrap sözbaşy	Semibold 30px
h3. Bootstrap sözbaşy	Semibold 24px
h4. Bootstrap sözbaşy	Semibold 18px
h5. Bootstrap sözbaşy	Semibold 14px
h6. Bootstrap sözbaşy	Semibold 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>

<small>Umumy bellik ýa-da synp bilen islendik sözbaşyda has ýeňil, ikinji derejeli tekst dörediň .small.

h1. Bootstrap sözbaşy Ikinji tekst

h2. Bootstrap sözbaşy Ikinji tekst

h3. Bootstrap sözbaşy Ikinji tekst

h4. Bootstrap sözbaşy Ikinji tekst

h5. Bootstrap sözbaşy Ikinji tekst

h6. Bootstrap sözbaşy Ikinji tekst

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

Bedeniň göçürmesi

“Bootstrap” -yň global defolty 1,428 font-sizebilen 14px . Bu we ähli abzaslara degişlidir. Mundan başga-da, (abzaslar) hasaplanan çyzyk beýikliginiň ýarysynyň aşaky marginini alýarlar (deslapky tertipde 10px).line-height<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus. Nullam id dolor id nibh ultricies ulag serişdesi.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus. Donec ullamcorper nulla metus däl auktor fringilla. Duis mollis, täjir däl luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla metus däl auktor fringilla.

“Maecenas sed diamet eget risus varius blandit” amna däl. Donec id elit metus-da mi porta gravida. Duis mollis, täjir däl luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Gurluşyň göçürmesi

Goşmak bilen abzasy tapawutlandyryň .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auktor. Duis mollis, haryt däl luctus.

<p class="lead">...</p>

Az bilen gurlan

Tipografiki masştab üýtgeýjilerdäki iki sany az üýtgeýjä esaslanýar.less : @font-size-basewe @line-height-base. Birinjisi, şriftiň ululygynda ulanylýar, ikinjisi esasy çyzyk beýikligi. Şol üýtgeýjileri we käbir ýönekeý matematikany ähli görnüşlerimiziň çäklerini, paddinglerini we çyzyk beýikliklerini döretmek üçin ulanýarys. Olary düzüň we Bootstrap uýgunlaşýar.

Tekst elementleri

Bellenen tekst

Başga bir kontekstdäki ähmiýeti sebäpli tekstiň işleýşini bellemek üçin <mark>belligi ulanyň.

Bellik belligini ulanyp bilersiňizbellemektekst.

You can use the mark tag to <mark>highlight</mark> text.

Öçürilen tekst

Öçürilen tekst böleklerini görkezmek üçin <del>belligi ulanyň.

~~Tekstiň bu setiri öçürilen tekst hökmünde garalýar.~~

<del>This line of text is meant to be treated as deleted text.</del>

Ajaýyp tekst

Indi ähmiýeti bolmadyk tekst böleklerini görkezmek üçin <s>belligi ulanyň.

~~Bu tekst setiri indi takyk däl diýlip hasaplanýar.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Goýlan tekst

Resminama goşmaçalary görkezmek üçin <ins>belligi ulanyň.

Tekstiň bu setiri resminama goşmaça hökmünde garalýar.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Aşakdaky tekst

Tekstiň aşagyny çyzmak üçin <u>belligi ulanyň.

Tekstiň bu setiri aşagyndaky ýaly görkeziler

<u>This line of text will render as underlined</u>

HTML-iň ýeňil ähmiýetli belliklerini ýeňil stil bilen ulanyň.

Kiçi tekst

Çyzgylary ýa-da tekst böleklerini ünsi çekmek üçin <small>belligi ulanyp, teksti ene-atanyň 85% ululykda belläň. font-sizeSözbaşy elementleri höwürtgeleýän elementler üçin özlerini alýar <small>.

.smallBaşga biriniň ýerine içerki elementi ulanyp bilersiňiz <small>.

Tekstiň bu setirine gowy çap edilmegi göz öňünde tutulýar.

<small>This line of text is meant to be treated as fine print.</small>

Batyr

Has agyr şriftli tekstiň bir bölegini bellemek üçin.

Aşakdaky tekst bölegi goýy tekst görnüşinde görkezilýär .

<strong>rendered as bold text</strong>

Italýan

Tekstiň bir bölegini çyzgy bilen bellemek üçin.

Aşakdaky tekst bölegi çyzylan tekst hökmünde görkezilýär .

<em>rendered as italicized text</em>

Alternatiw elementler

HTML5- <b>de ulanmaga arkaýyn boluň. esasan ses, tehniki adalgalar we ş.m. üçin goşmaça ähmiýet bermezden sözleri ýa-da sözlemleri tapawutlandyrmak üçin niýetlenendir .<i><b><i>

Düzediş sapaklary

Teksti tekizlemek synplary bolan komponentlere aňsatlyk bilen tertipleşdiriň.

Çep deňleşdirilen tekst

Merkez deňleşdirilen tekst.

Dogry düzülen tekst.

Dogry tekst.

Gaplanan tekst ýok.

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

Üýtgetme sapaklary

Teksti tekst baş harplary bilen komponentlerde öwüriň.

Aşakdaky tekst

Baş harp

Baş harp bilen ýazylan tekst

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Gysgaltmalar

<abbr>Giňeldilen wersiýany görkezmek üçin gysgaltmalar we gysgaltmalar üçin HTML elementiniň stilleşdirilen ýerine ýetirilişi . Aýratynlykly gysgaltmalar titleaçyk nokatly aşaky araçäk we aýlawda kömekçi kursor bolup, aýlawda we kömekçi tehnologiýalary ulanyjylarda goşmaça kontekst üpjün edýär.

Esasy gysgaltma

Sypat sözüniň gysgaldylyşy attr .

<abbr title="attribute">attr</abbr>

Başlangyç

.initialismBirneme kiçi şrift ululygy üçin gysgaltma goşuň .

Dilimlenen çörekden bäri HTML iň gowy zat.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Salgylar

Iň ýakyn ata-baba ýa-da tutuş iş topary üçin aragatnaşyk maglumatlary hödürläň. Linehli setirleri gutaryp formatirlemäni saklaň <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Fransisko, CA 94103
P: (123) 456-7890

Doly ady
[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>

Bloknotlar

Resminamanyňyzyň içindäki başga bir çeşmeden mazmun böleklerini sitata etmek üçin.

Bellenen bloknot

Sitata hökmünde <blockquote>islendik HTML -i gurşap alyň. Göni sitatalar üçin a <p>.

“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blokkot görnüşleri

Standartdaky ýönekeý üýtgeşiklikler üçin stil we mazmun üýtgeýär <blockquote>.

Çeşmäni atlandyrmak

<footer>Çeşmesini kesgitlemek üçin a goşuň . Çeşmäniň adyny ýazyň <cite>.

“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.

Çeşme ady bilen meşhur biri

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

Alternatiw displeýler

.blockquote-reverseSag tarapdaky mazmunly bloknot üçin goşuň .

“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.

Çeşme ady bilen meşhur biri

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Sanawlar

Tertibi

Sargyt aç-açan möhüm däl zatlaryň sanawy .

Lorem ipsum dolor amet otur
Consectetur adipiscing elit
Massa-da bitewi molestie lorem
Pretium nisl aliketinde ýeňilleşdirme
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat
Faucibus porta lacus fringilla vel
Ene oturylyşygy
Porttitor loremini alyň

<ul>
  <li>...</li>
</ul>

Sargyt edildi

Sargyt aç- açan möhüm bolan zatlaryň sanawy .

Lorem ipsum dolor amet otur
Consectetur adipiscing elit
Massa-da bitewi molestie lorem
Pretium nisl aliketinde ýeňilleşdirme
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Ene oturylyşygy
Porttitor loremini alyň

<ol>
  <li>...</li>
</ol>

Düzedilmedik

Sanaw elementlerinde deslapky list-stylewe çep aralygy aýyryň (diňe çagalar). Bu diňe çagalaryň sanawy elementlerine degişlidir , ýagny islendik öýlenen sanawlar üçin synpy goşmaly bolarsyňyz.

Lorem ipsum dolor amet otur
Consectetur adipiscing elit
Massa-da bitewi molestie lorem
Pretium nisl aliketinde ýeňilleşdirme
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat
Faucibus porta lacus fringilla vel
Ene oturylyşygy
Porttitor loremini alyň

<ul class="list-unstyled">
  <li>...</li>
</ul>

Inline

Listhli sanaw elementlerini bir setirde display: inline-block;we birneme ýeňil ýerleşdiriň.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

Düşündiriş

Baglanyşykly düşündirişleri bilen adalgalaryň sanawy.

Düşündiriş sanawlary: Düşündiriş sanawy adalgalary kesgitlemek üçin ajaýyp.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit metus-da mi porta gravida.
Malesuada porta: Etiam porta sem maleuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Gorizontal düşündiriş

Terminleri we düşündirişleri <dl>gapdala düzüň. Dymmaklyk s ýaly tertiplenip başlaýar <dl>, ýöne deňiz paneli giňelse, şular ýaly ediň.

Düşündiriş sanawlary: Düşündiriş sanawy adalgalary kesgitlemek üçin ajaýyp.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit metus-da mi porta gravida.
Malesuada porta: Etiam porta sem maleuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Awtomatik kesmek

Gorizontal düşündiriş sanawlary, çep sütüne gabat gelmek üçin gaty uzyn adalgalary keser text-overflow. Dar görnüşlerde, deslapky tertipleşdirilen tertibe geçerler.

Inline

Koduň içerki böleklerini örtüň <code>.

Mysal üçin, <section>içerki görnüşde örtülmeli.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Ulanyjy giriş

<kbd>Adatça klawiatura arkaly girizilýän girişi görkezmek üçin ulanyň .

Kataloglary üýtgetmek üçin cd, katalogyň adyny ýazyň.
Sazlamalary redaktirlemek üçin basyň 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>

Esasy blok

<pre>Birnäçe setir kod üçin ulanyň . Dogry görkezmek üçin koddaky islendik burç ýaýdan gaçmagy unutmaň.

<p> Bu ýerde nusga nusgasy ... </p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Islege görä .pre-scrollable, iň ýokary beýikligi 350px boljak we y ok aýlaw paneli bilen üpjün etjek synpy goşup bilersiňiz.

Üýtgeýjiler

Üýtgeýjileri görkezmek üçin <var>belligi ulanyň.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Mysal üçin çykyş

Bloklary görkezmek üçin bir programmadan nusga çykyşyny <samp>belligi ulanyň.

Bu tekst, kompýuter programmasynyň nusga çykyşy hökmünde garalýar.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Esasy mysal

Esasy bezeg üçin - ýeňil padding we diňe gorizontal bölüjiler - esasy synpy .tableislendik birine goşuň <table>. Bu gaty artykmaç ýaly bolup görünmegi mümkin, ýöne senenamalar we senäni saýlaýjylar ýaly beýleki pluginler üçin tablisalaryň giňden ulanylmagyny göz öňünde tutup, adaty stol görnüşlerimizi izolirlemegi makul bildik.

Goşmaça tablisanyň ýazgysy.
#	Ady	Familiýasy	Ulanyjy ady
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@twitter

<table class="table">
  ...
</table>

Zolakly hatarlar

.table-stripedIçindäki islendik stol hataryna zebra-zolak goşmak üçin ulanyň <tbody>.

Brauzeriň gabat gelmegi

Zolakly tablisalar :nth-childInternet Explorer 8-de ýok CSS saýlaýjynyň üsti bilen düzülendir.

#	Ady	Familiýasy	Ulanyjy ady
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@twitter

<table class="table table-striped">
  ...
</table>

Serhet stoly

.table-borderedStoluň we öýjükleriň hemme tarapyna serhetler goşuň .

#	Ady	Familiýasy	Ulanyjy ady
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@twitter

<table class="table table-bordered">
  ...
</table>

Setirler

.table-hoverA içindäki stol hatarlarynda aýlaw ýagdaýyny açmak üçin goşuň <tbody>.

#	Ady	Familiýasy	Ulanyjy ady
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@twitter

<table class="table table-hover">
  ...
</table>

Kondensirlenen stol

.table-condensedÖýjük örtüklerini ýarym kesip, tablisalary has ykjam etmek üçin goşuň .

#	Ady	Familiýasy	Ulanyjy ady
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry the guş		@twitter

<table class="table table-condensed">
  ...
</table>

Kontekst sapaklary

Stol hatarlaryny ýa-da aýry öýjükleri reňklemek üçin kontekst sapaklaryny ulanyň.

Synp	Düşündiriş
`.active`	Aýlaw reňkini belli bir hatara ýa-da öýjüge ulanýar
`.success`	Üstünlikli ýa-da oňyn hereketi görkezýär
`.info`	Bitarap maglumat beriş üýtgemesini ýa-da hereketini görkezýär
`.warning`	Üns berilmegini talap edip biljek duýduryşy görkezýär
`.danger`	Howply ýa-da potensial negatiw hereketi görkezýär

#	Sütüniň sözbaşy	Sütüniň sözbaşy	Sütüniň sözbaşy
1	Sütüniň mazmuny	Sütüniň mazmuny	Sütüniň mazmuny
2	Sütüniň mazmuny	Sütüniň mazmuny	Sütüniň mazmuny
3	Sütüniň mazmuny	Sütüniň mazmuny	Sütüniň mazmuny
4	Sütüniň mazmuny	Sütüniň mazmuny	Sütüniň mazmuny
5	Sütüniň mazmuny	Sütüniň mazmuny	Sütüniň mazmuny
6	Sütüniň mazmuny	Sütüniň mazmuny	Sütüniň mazmuny
7	Sütüniň mazmuny	Sütüniň mazmuny	Sütüniň mazmuny
8	Sütüniň mazmuny	Sütüniň mazmuny	Sütüniň mazmuny
9	Sütüniň mazmuny	Sütüniň mazmuny	Sütüniň mazmuny

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

Kömekçi tehnologiýalara many bermek

Stol hataryna ýa-da aýry öýjüge many goşmak üçin reňk ulanmak diňe wizual görkezijini üpjün edýär, bu ekran okyjylary ýaly kömekçi tehnologiýalaryň ulanyjylaryna ýetirilmez. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (degişli tablisanyň hataryndaky / öýjüginde görünýän tekst) aç-açan ýa-da .sr-onlysynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Jogap beriji tablisalar

Kiçijik enjamlarda (768px-den aşak) keseligine aýlanmak üçin haýsydyr .tablebir gaplap, täsirli tablisalary dörediň . .table-responsiveIni 768px-den uly bir zady göreniňizde, bu tablisalarda hiç hili tapawut görmersiňiz.

Dik kesmek / kesmek

Jogap beriji tablisalar, overflow-y: hiddentablisanyň aşaky ýa-da ýokarky gyralaryndan çykýan islendik mazmuny kesýär. Hususan-da, bu açylýan menýulary we beýleki üçünji tarap widjetlerini kesip biler.

Firefox we meýdançalar

width“Firefox” -da jogap tablisasyna päsgel berýän käbir oňaýsyz meýdan görnüşi bar. “ Bootstrap” -da hödürlemeýän “Firefox” -a mahsus hack bolmasa, muny ýok edip bolmaz :

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Has giňişleýin maglumat üçin bu “Stack Overflow” jogabyny okaň .

#	Stol sözbaşy	Stol sözbaşy	Stol sözbaşy	Stol sözbaşy	Stol sözbaşy	Stol sözbaşy
1	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi
2	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi
3	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi

#	Stol sözbaşy	Stol sözbaşy	Stol sözbaşy	Stol sözbaşy	Stol sözbaşy	Stol sözbaşy
1	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi
2	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi
3	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi	Stol öýjügi

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Esasy mysal

Aýry-aýry forma gözegçilikleri awtomatiki usulda käbir global stili alýar. Texthli tekst <input>we elementler deslapky <textarea>görnüşde düzüldi . Iň amatly aralyk üçin bellikleri we dolandyryşlary örtüň.<select>.form-controlwidth: 100%;.form-group

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

Forma toparlaryny giriş toparlary bilen garyşdyrmaň

Forma toparlaryny göni giriş toparlary bilen garyşdyrmaň . Munuň ýerine, forma toparynyň içindäki giriş toparyny höwürtgediň.

Çyzgy görnüşi

Çep hatara düzülen we içerki blok dolandyryşlary üçin formaňyza goşuň .form-inline(bu hökman däl ). Bu diňe iň azyndan 768px ini bolan görnüşdäki görnüşlere degişlidir.<form>

Customörite giňlikleri talap edip biler

Girişler we saýlamalar width: 100%;Bootstrap-da adaty ýagdaýda ulanylýar. Çyzgy görnüşleriniň içinde, width: auto;köp dolandyryşyň bir setirde ýaşap biljekdigini täzeden düzýäris. Tertibiňize baglylykda goşmaça ýörite giňlikler zerur bolup biler.

Elmydama bellikleri goşuň

Her giriş üçin bellik goşmasaňyz, ekran okyjylary formalaryňyzda kynçylyk çekerler. .sr-onlyBu içerki görnüşler üçin ýazgylary synpy ulanyp gizläp bilersiňiz . aria-labelKömekçi tehnologiýalar üçin bellik bermek ýa - aria-labelledbyda titleatribut ýaly başga alternatiw usullar bar . Bularyň hiç biri ýok bolsa, ekran okyjylary bar bolsa, placeholderatributdan peýdalanyp bilerler, ýöne bellik placeholderetmegiň beýleki usullaryny çalyşmak hökmünde ulanmak maslahat berilmeýändigini ýadyňyzdan çykarmaň.

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

Gorizontal görnüş

“Bootstrap” -yň öňünden kesgitlenen gözenek synplaryny ulanyň we bellikleri we forma dolandyryş toparlaryny forma goşmak arkaly keseligine ýerleşmek .form-horizontalüçin (bu bolmaly däl <form>). Şeýle etmek, gözenegiň hatarlary ýaly özüni alyp barşyny üýtgedýär .form-group, şonuň üçin zerurlyk ýok .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>

Goldanýan dolandyryşlar

Mysal forma düzülişinde goldanýan adaty forma dolandyryşlarynyň mysallary.

Girişler

Iň ýaýran forma gözegçilik, tekste esaslanýan giriş meýdanlary. HTMLhli HTML5 görnüşleri üçin goldawy öz textiçine passwordalýar : ,,,,,,,,,,,, we . _ _ _datetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor

Deklarasiýa talap edilýär

typeGirişler diňe dogry yglan edilse doly düzüler .

<input type="text" class="form-control" placeholder="Text input">

Giriş toparlary

Integrirlenen teksti ýa-da düwmeleri goşmak üçin we / ýa-da islendik tekste esaslanansoň <input>, giriş toparynyň düzümine göz aýlaň .

Textarea

Birnäçe setiri goldaýan forma dolandyryşy. rowsZerur bolanda atributyny üýtgediň .

<textarea class="form-control" rows="3"></textarea>

Bellikler we radiolar

Bellikler gutular sanawdaky bir ýa-da birnäçe warianty saýlamak üçin, radiolar bolsa köplerden bir warianty saýlamak üçin.

Maýyp bellikler we radiolar goldanýar, ýöne ene-atanyň üstünde "rugsat berilmeýän" kursory üpjün etmek üçin synpy ene-atasyna , ýa -da <label>goşmaly bolarsyňyz ..disabled.radio.radio-inline.checkbox.checkbox-inline

Bellenen (gaplanan)

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

Çyzgy gutularyny we radiolary

.checkbox-inlineBir setirde peýda bolan dolandyryşlar üçin bellikler ýa- da .radio-inlineradiolar tapgyryndaky sapaklary ulanyň .

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

Bellik teksti bolmadyk bellikler we radiolar

Içinde tekst ýok bolsa <label>, giriş garaşyşyňyz ýaly ýerleşýär. Häzirki wagtda diňe içerki däl belliklerde we radiolarda işleýär. aria-labelKömekçi tehnologiýalar üçin (meselem, ulanmak ) bellikleriň bir görnüşini bermegi ýatdan çykarmaň .

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

Saýlaýar

Safarierli saýlanan menýularyň köpüsinde, ýagny Safari we Chrome-da, border-radiushäsiýetleriň üsti bilen üýtgedip bolmajak tegelek burçlaryň bardygyny unutmaň.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select>Sypat bilen dolandyryşlar üçin multipledeslapky görnüşde birnäçe wariant görkezilýär.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Statik gözegçilik

Haçan-da bir formanyň içinde form belliginiň gapdalynda ýönekeý tekst goýmaly bolsaňyz, .form-control-staticsynpy a <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>

Fokus ýagdaýy

outlineKäbir forma dolandyryşlarynda deslapky stilleri aýyrýarys we box-shadowýerine ýerine ulanýarys :focus.

Demo `:focus`ýagdaýy

:focusAboveokardaky mysal giriş resminamalaryndaky ýagdaýy görkezmek üçin resminamalarymyzda adaty stilleri ulanýar .form-control.

Maýyp ýagdaý

disabledUlanyjynyň özara täsiriniň öňüni almak üçin girişde boolean atributyny goşuň . Öçürilen girişler has ýeňil görünýär we not-allowedkursor goşýar.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Öçürilen meýdanlar

Birbada ähli dolandyryşlary öçürmek üçin disabledatribut goşuň .<fieldset><fieldset>

Baglanyşygyň işleýşi barada duýduryş`<a>`

Düzgüne görä, brauzerler içindäki ähli ýerli dolandyryş dolandyryşlaryny (we elementlerini) <input>maýyp hasaplarlar <select>we klawiaturanyň hem-de syçanjygyň özara täsiriniň öňüni alarlar. Şeýle-de bolsa, görnüşiňizde elementler hem bar bolsa, bulara diňe bir stil berler . Düwmeler üçin maýyp ýagdaý (we esasanam labyr elementleri üçin kiçi bölümde) bölüminde bellenip geçilişi ýaly , bu CSS emlägi entek standartlaşdyrylanok we Opera 18 we aşakda, ýa-da Internet Explorer 11-de doly goldanylmaýar we ýeňiji bolýar klawiatura ulanyjylarynyň bu baglanyşyklara ünsi jemlemeginiň ýa-da işjeňleşdirmeginiň öňüni almaň. Howpsuz bolmak üçin şeýle baglanyşyklary öçürmek üçin ýörite JavaScript ulanyň.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Brauzeriň gabat gelmegi

disabled“Bootstrap” bu stilleri ähli brauzerlerde ulanjak bolsa, Internet Explorer 11 we aşakdakylar a -daky aýratynlygy doly goldamaýar <fieldset>. Bu brauzerlerdäki meýdançany öçürmek üçin ýörite JavaScript ulanyň.

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

Okaň

readonlyGiriş bahasynyň üýtgemeginiň öňüni almak üçin girişde boolean atributyny goşuň . Diňe okalýan girişler has ýeňil görünýär (edil ýapyk girişler ýaly), ýöne adaty kursory saklaň.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Kömek teksti

Blok derejesi forma dolandyryşlary üçin kömek tekstini.

Kömek tekstini forma dolandyryşlary bilen baglanyşdyrmak

Kömek teksti, atributy ulanmak bilen baglanyşykly forma gözegçilik bilen aç-açan baglanyşykly bolmaly aria-describedby. Bu, ulanyjy okyjylara ünsi jemlän ýa-da gireninde kömekçi tehnologiýalaryň - ekran okyjylary ýaly bu kömek tekstini yglan etmegini üpjün eder.

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

Barlag görkezilýär

“Bootstrap” ýalňyşlyk, duýduryş we forma dolandyryşlaryndaky üstünlik ýagdaýlary üçin tassyklama stillerini öz içine alýar. Ene elementini ulanmak .has-warning, goşmak .has-errorýa-da ulanmak. .has-successIslendik .control-label, .form-controlwe .help-blockşol elementiň içinde tassyklama stilleri bolar.

Kömekçi tehnologiýalara we reňkli ulanyjylara tassyklama ýagdaýyny bermek

Forma gözegçiliginiň ýagdaýyny görkezmek üçin bu tassyklama stillerini ulanmak diňe wizual, reňk esasly görkezijini üpjün edýär, bu ekran okyjylary ýaly kömekçi tehnologiýalaryň ulanyjylaryna ýa-da reňkli ulanyjylara berilmez.

Döwletiň alternatiw görkezijisiniň hem berilmegine göz ýetiriň. Mysal üçin, forma gözegçiliginiň <label>tekstine (aşakdaky kod mysalynda bolşy ýaly) ýagdaý barada bir görkezme goşup bilersiňiz, Glifikony.sr-only goşup bilersiňiz ( synpy ulanyp degişli alternatiw tekst bilen - Glifikon mysallaryna serediň ) ýa-da goşmaça kömek tekst bloky. Aýratyn-da kömekçi tehnologiýalar üçin nädogry forma gözegçilikleri hem bir aria-invalid="true"atribut belläp biler.

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

Goşmaça nyşanlar bilen

.has-feedbackŞeýle hem , dogry nyşan goşmak we goşmaça seslenme nyşanlaryny goşup bilersiňiz .

Seslenme nyşanlary diňe tekst <input class="form-control">elementleri bilen işleýär.

Nyşanlar, bellikler we giriş toparlary

Belliksiz girişler we sag tarapdaky goşmaçalar bilen giriş toparlary üçin seslenme nyşanlarynyň el bilen ýerleşdirilmegi talap edilýär. Elýeterlilik sebäpli ähli girişler üçin bellikler bilen üpjün edilmegiňiz maslahat berilýär. Etiketkalaryň görkezilmeginiň öňüni almak isleseňiz, olary .sr-onlysynp bilen gizläň. Etiketkasyz etmeli bolsaňyz top, seslenme nyşanynyň bahasyny sazlaň. Giriş toparlary üçin right, addonyň giňligine baglylykda bahany degişli piksel bahasyna sazlaň.

Nyşananyň manysyny kömekçi tehnologiýalara ýetirmek

Ekranyň okyjylary ýaly kömekçi tehnologiýalaryň - nyşanyň manysyny dogry ýetirýändigine göz ýetirmek üçin goşmaça gizlin tekst synp bilen goşulmaly .sr-onlywe ulanylyşy bilen baglanyşykly forma gözegçiligi bilen aç-açan baglanyşykly bolmaly aria-describedby. Ativea-da bolmasa, manysynyň (mysal üçin, belli bir tekst giriş meýdany üçin duýduryş barlygy) başga bir görnüşde berilmegini üpjün ediň, mysal <label>üçin forma gözegçilik bilen baglanyşykly hakyky teksti üýtgetmek.

Aşakdaky mysallarda tekstiň özünde degişli forma gözegçilikleriniň tassyklanyş ýagdaýy agzalsa-da <label>, ýokardaky usul ( .sr-onlyteksti ulanmak we aria-describedby) şekillendiriş maksatlary üçin girizildi.

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

Gorizontal we çyzyk görnüşindäki goşmaça nyşanlar

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

Gizlin ýazgyly goşmaça `.sr-only`nyşanlar

.sr-onlyFormany dolandyrmagy gizlemek üçin synpy ulansaňyz <label>(atribut ýaly beýleki bellikleme opsiýalaryny ulanmagyň ýerine aria-label), Bootstrap goşulandan soň nyşanyň ýagdaýyny awtomatiki düzer.

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

Dolandyryş ululygy

Classesaly synplary ulanyp beýiklikleri düzüň .input-lgwe şuňa meňzeş gözenek sütünlerini ulanyp giňlikleri düzüň .col-lg-*.

Boý ululygy

Düwme ululyklaryna laýyk gelýän has uzyn ýa-da gysga görnüşli dolandyryşlary dörediň.

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

Gorizontal görnüş toparynyň ululyklary

Çalt ululykdaky bellikler we goşmak arkaly içindäki dolandyryş .form-horizontaldolandyryşlary ..form-group-lg.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>

Sütüniň ululygy

Gerekli giňlikleri aňsatlyk bilen ýerine ýetirmek üçin girişleri sütün sütünlerine ýa-da islendik adaty ene elementine örtüň.

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

Düwme bellikleri

<a>Bir ýa - <button>da <input>elementdäki düwme sapaklaryny ulanyň .

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

Kontekst aýratyn ulanylyşy

<a>Düwme sapaklaryny we elementleri ulanyp boljakdygyna <button>garamazdan, diňe <button>deňiz we deňiz paneli komponentlerimizde elementler goldanýar.

Düwmeler hökmünde hereket edýän baglanyşyklar

Elementler düwmeler hökmünde hereket etmek üçin <a>ulanylsa - häzirki sahypadaky başga bir resminama ýa-da bölüme geçmegiň ýerine, sahypanyň işlemegine itergi berýän bolsa - olara degişli hem berilmelidir role="button".

Brauzeriň görkezilmegi

Iň oňat tejribe hökmünde, mümkin boldugyça kross-brauzeriň görkezilmegini üpjün etmek üçin elementi ulanmagy maslahat berýäris .<button>

Beýleki zatlaryň arasynda , Firefox <30-da esasly düwmeleriň sazlanmagynyň öňüni alýan, Firefox-daky beýleki düwmeleriň beýikligine laýyk gelmeýän birline-height näsazlyk bar <input>.

Görnüş

Elýeterli düwmäni çalt döretmek üçin elýeterli düwme sapaklarynyň islendigini ulanyň.

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

Kömekçi tehnologiýalara many bermek

Bir düwmä many goşmak üçin reňk ulanmak diňe wizual görkezijini üpjün edýär, bu ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirilmez. Reňk bilen görkezilen maglumatlaryň mazmundan (düwmäniň görünýän teksti) aç-açan ýa-da .sr-onlysynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Ölçegler

Uly ýa-da kiçi düwmeler barmy? Goşuň ýa-da .btn-lggoşmaça ululyklar üçin..btn-sm.btn-xs

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

Goşmak arkaly blok derejesindäki düwmeleri dörediň - ene-atanyň doly giňligini öz içine alýan düwmeler .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>

Işjeň ýagdaý

Işledilende düwmeler basylýar (has garaňky fon, has garaňky araçäk we kölege kölegesi bilen). Elementler üçin <button>bu amala aşyrylýar :active. <a>Elementler üçin .active. Şeýle-de bolsa, işjeň ýagdaýy programma taýdan köpeltmeli bolsaňyz , ulanyp .activebilersiňiz <button>(we atributyny goşuň).aria-pressed="true"

Düwme elementi

Pseudo-klas bolany üçin goşmak hökman däl :active, ýöne şol bir görnüşi mejbur etmeli bolsa, dowam et we goş .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>

Gämi elementi

.activeSynpy <a>düwmelere goşuň .

Esasy baglanyşyk Baglanyşyk

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

Maýyp ýagdaý

Düwmeleri yzyna ýitirip, ýapyk görnüşde görkeziň opacity.

Düwme elementi

Düwmelere disabledatribut goşuň .<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>

Brauzeriň gabat gelmegi

disabledAýratynlygy a goşsaňyz <button>, Internet Explorer 9 we ondan aşakdakylar düzedip bilmeýän nejis tekst kölegesi bilen tekst çal reňkini görkezer.

Gämi elementi

.disabledSynpy <a>düwmelere goşuň .

Esasy baglanyşyk Baglanyşyk

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

.disabledBu ýerde umumy synpa meňzeş peýdaly synp hökmünde ulanýarys .active, şonuň üçin prefiks talap edilmeýär.

Baglanyşyk funksiýasy

Bu synp s- pointer-events: noneleriň baglanyşyk funksiýasyny öçürmäge synanyşýar <a>, ýöne CSS emlägi entek standartlaşdyrylmandyr we Opera 18 we ondan aşakda ýa-da Internet Explorer 11-de doly goldanylmaýar. Mundan başga-da, goldaýan brauzerlerde-de pointer-events: none, klawiaturada nawigasiýa täsirsiz galýar, ýagny görýän klawiatura ulanyjylary we kömekçi tehnologiýalary ulanyjylar henizem bu baglanyşyklary işjeňleşdirip bilerler. Howpsuz bolmak üçin şeýle baglanyşyklary öçürmek üçin ýörite JavaScript ulanyň.

Jogaply suratlar

“Bootstrap 3” -däki şekilleri .img-responsivesynpyň üsti bilen täsirli edip bolýar. Bu , ene-atanyň elementine ajaýyp tereziniň bolmagy üçin we surata max-width: 100%;degişlidir height: auto;.display: block;

.img-responsiveSynpy ulanýan şekilleri merkezleşdirmek üçin , .center-blockýerine ulanyň .text-center. Ulanylyşy barada has giňişleýin maglumat üçin kömekçi synplar bölümine serediň ..center-block

SVG şekilleri we IE 8-10

Internet Explorer 8-10-da SVG şekilleri .img-responsivedeňeşdirilmedik ululykda. Muny düzetmek üçin width: 100% \9;zerur ýerinde goşuň. “Bootstrap” muny awtomatiki ulanmaýar, sebäbi beýleki surat formatlaryna kynçylyk döredýär.

<img src="..." class="img-responsive" alt="Responsive image">

Surat şekilleri

<img>Islendik taslamada şekilleri aňsatlyk bilen düzmek üçin bir elemente sapak goşuň .

Brauzeriň gabat gelmegi

Internet Explorer 8-iň tegelek burçlar üçin goldawynyň ýokdugyny ýadyňyzdan çykarmaň.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Kontekst reňkler

Birnäçe ähmiýetli peýdaly sapaklar bilen reňk arkaly many beriň. Bular baglanyşyklara hem ulanylyp bilner we edil adaty baglanyşyk stillerimiz ýaly garaňkyda garalar.

Fusce dapibus, tellus ac cursus commodo, gynama mauris nibh.

Nullam id dolor id nibh ultricies ulag serişdesi.

Duis mollis, commodo luctus, nisi erat porttitor ligula.

“Maecenas sed diamet eget risus varius blandit” amna däl.

Etiam porta sem maleuada magna mollis euismod.

Donec ullamcorper nulla metus däl auktor 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>

Aýratynlyk bilen iş salyşmak

Käwagt başga bir saýlaýjynyň aýratynlygy sebäpli ünsi synplary ulanyp bolmaýar. Köplenç, teksti <span>synp bilen ýazmak üçin ýeterlik iş bar.

Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden açykdygyna göz ýetiriň (kontekstdäki reňkler diňe tekstde / bellikde bar bolan manylary güýçlendirmek üçin ulanylýar) ýa-da .sr-onlysynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly goşulýar. .

Kontekst fonlary

Kontekstdäki tekst reňk synplaryna meňzeş bir elementiň fonuny islendik kontekst synpyna aňsatlyk bilen düzüň. Gämi bölekleri, edil tekst sapaklary ýaly, garaňkyda garalar.

Nullam id dolor id nibh ultricies ulag serişdesi.

Duis mollis, commodo luctus, nisi erat porttitor ligula.

“Maecenas sed diamet eget risus varius blandit” amna däl.

Etiam porta sem maleuada magna mollis euismod.

Donec ullamcorper nulla metus däl auktor 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>

Aýratynlyk bilen iş salyşmak

Käwagt başga bir saýlaýjynyň aýratynlygy sebäpli kontekstdäki fon sapaklary ulanylyp bilinmez. Käbir ýagdaýlarda, elementiň mazmunyny <div>synp bilen jemlemek üçin ýeterlik iş.

Kömekçi tehnologiýalara many bermek

Kontekstdäki reňklerde bolşy ýaly, reňk arkaly berlen islendik manynyň diňe görkeziji däl görnüşde berilmegine göz ýetiriň.

Nyşan ýapyň

Modallar we duýduryşlar ýaly mazmuny ýatyrmak üçin umumy ýakyn nyşany ulanyň.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Karetler

Açylýan funksiýany we ugruny görkezmek üçin kartetleri ulanyň. Bellenen karet açylýan menýularda awtomatiki tersine öwrüler .

<span class="caret"></span>

Çalt ýüzýär

Bir elementi synp bilen çepe ýa-da saga ýüzüň. !importantaýratynlyk meselelerinden gaça durmak üçin girizilýär. Sapaklary garyndy hökmünde hem ulanyp bolýar.

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

Merkeziň mazmun bloklary

Bir elementi display: blockwe merkezini düzüň margin. Garyndy we synp hökmünde bar.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

Ene elementinefloat goşup , aňsatlyk bilen arassalaň . Nikolas Gallagher tarapyndan meşhurlyk gazanan mikro arassalaýjy enjamdan peýdalanýar. Garyndy hökmünde hem ulanylyp bilner..clearfix

<!-- 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();
}

Mazmuny görkezmek we gizlemek

Bir elementi görkezmek ýa-da gizlemek ( şol sanda ekran okyjylary üçin.show ) we .hiddensynplary ulanmak bilen mejbur ediň. Bu synplar çalt ýüzüşler!important ýaly aýratyn gapma-garşylyklardan gaça durmak üçin ulanýarlar . Diňe blok derejesini üýtgetmek üçin elýeterlidir. Olary garyndy hökmünde hem ulanyp bolýar.

.hideelýeterlidir, ýöne ekranyň okyjylaryna elmydama täsir etmeýär we v3.0.1 -den könelýär. Munuň ýerine ulanyň .hiddenýa-da .sr-onlyýerine.

Mundan başga-da, .invisiblediňe bir elementiň görünişini üýtgetmek üçin ulanylyp bilner, ýagny displayüýtgedilmedi we element resminamanyň akymyna täsir edip biler.

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

Ekrany okaýjy we klawiatura nawigasiýa mazmuny

Ekrany okaýanlardan başga ähli enjamlara bir element gizläň .sr-only. Elementi ünsi jemläninde görkezmek üçin birleşdiriň (meselem, diňe klawiatura ulanyjy tarapyndan .sr-only) . Elýeterliligiň iň oňat tejribelerine.sr-only-focusable eýermek üçin zerurdyr . Garyndy hökmünde hem ulanylyp bilner.

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

Surat çalyşmak

.text-hideBir elementiň tekst mazmunyny fon şekili bilen çalyşmak üçin synpy ýa-da garyndyny ulanyň .

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Jübi telefony üçin has çalt ösüş üçin, bu peýdaly sapaklary media talaplary arkaly enjam arkaly mazmuny görkezmek we gizlemek üçin ulanyň. Şeýle hem çap edilende mazmuny üýtgetmek üçin peýdaly sapaklar bar.

Bulary çäkli esasda ulanmaga synanyşyň we şol bir sahypanyň düýbünden başga wersiýalaryny döretmekden saklanyň. Munuň ýerine, her enjamyň görkezişini doldurmak üçin ulanyň.

Elýeterli sapaklar

Görkeziş nokatlarynda mazmuny üýtgetmek üçin bar bolan synplaryň ýekeje ýa-da kombinasiýasyny ulanyň.

	Goşmaça kiçi enjamlarTelefonlar (<768px)	Kiçi enjamlarPlanşetler (≥768px)	Orta enjamlarIş stollary (≥992px)	Uly enjamlarIş stollary (≥1200px)
`.visible-xs-*`	Görünýän	Gizlenen	Gizlenen	Gizlenen
`.visible-sm-*`	Gizlenen	Görünýän	Gizlenen	Gizlenen
`.visible-md-*`	Gizlenen	Gizlenen	Görünýän	Gizlenen
`.visible-lg-*`	Gizlenen	Gizlenen	Gizlenen	Görünýän
`.hidden-xs`	Gizlenen	Görünýän	Görünýän	Görünýän
`.hidden-sm`	Görünýän	Gizlenen	Görünýän	Görünýän
`.hidden-md`	Görünýän	Görünýän	Gizlenen	Görünýän
`.hidden-lg`	Görünýän	Görünýän	Görünýän	Gizlenen

V3.2.0 ýagdaýyna görä, her nokat üçin synplar üç üýtgeşiklikde bolýar, aşakda görkezilen .visible-*-*her CSS emläk bahasy üçin.display

Sapaklar topary	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Şeýlelik bilen, goşmaça kiçi ( xs) ekranlar üçin, elýeterli .visible-*-*synplar : .visible-xs-block, .visible-xs-inlinewe.visible-xs-inline-block .

Sapaklar .visible-xs,, we bar, ýöne .visible-smv3.2.0 - den köne . Baglanyşykly elementleri üýtgetmek üçin goşmaça aýratyn ýagdaýlardan başga ýagdaýlarda takmynan deňdir ..visible-md.visible-lg.visible-*-block<table>

Sapaklary çap et

Adaty jogap beriş sapaklaryna meňzeş ýaly, çap etmek üçin mazmuny üýtgetmek üçin ulanyň.

Sapaklar	Brauzer	Çap et
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Gizlenen	Görünýän
`.hidden-print`	Görünýän	Gizlenen

Synp .visible-printhem bar, ýöne v3.2.0 görnüşinde köneldi . Baglanyşykly elementler .visible-print-blocküçin goşmaça aýratyn ýagdaýlardan başga, takmynan deňdir .<table>

Synag ýagdaýlary

Jogapkärçilikli peýdaly synplary barlamak üçin brauzeriňiziň ölçegini üýtgediň ýa-da dürli enjamlara ýükläň.

Görünýän ...

Greenaşyl bellikler elementiň häzirki görnüşiňizde görünýändigini görkezýär.

Goşmaça kiçi X x-kiçi görnüşde görünýär

Kiçi Small Kiçijik görnüşde görünýär

Orta Medium Orta görnüşde görünýär

Uly Large Uly görnüşde görünýär

Goşmaça kiçi we kiçi X x-kiçi we kiçi görnüşde görünýär

Orta we uly Medium Orta we uly görnüşde görünýär

Goşmaça kiçi we orta X x-kiçi we orta görnüşde görünýär

Kiçi we uly Small Kiçijik we uly görnüşde görünýär

Goşmaça kiçi we uly X x-kiçi we uly görnüşde görünýär

Kiçi we orta Small Kiçi we orta görnüşde görünýär

Gizlenen ...

Bu ýerde, ýaşyl bellikler elementiň häzirki görnüşiňizde gizlenendigini görkezýär.

Goşmaça kiçi X x-kiçi görnüşde gizlenýär

Kiçi Small Kiçijikde gizlenýär

Orta Medium Orta ýerde gizlenýär

Uly Large Uly ýerde gizlenýär

Goşmaça kiçi we kiçi X x-kiçi we kiçi görnüşde gizlenýär

Orta we uly Medium Orta we uly ýerde gizlenýär

Goşmaça kiçi we orta X x-kiçi we orta görnüşde gizlenýär

Kiçi we uly Small Kiçijik we uly ýerde gizlenýär

Goşmaça kiçi we uly X x-kiçi we uly ýerde gizlenýär

Kiçi we orta Small Kiçi we orta görnüşde gizlenýär

“Bootstrap” -yň CSS üýtgeýjiler, garyndylar we CSS-ni düzmek üçin funksiýalar ýaly goşmaça funksiýaly “Less” -iň üstünde gurulýar. Çeşmäni ulanmak isleýänler, düzülen CSS faýllarymyzyň ýerine az faýllar, çarçuwada ulanýan köp sanly üýtgeýjilerimizi we garyndylarymyzy ulanyp bilerler.

Grid üýtgeýjileri we garyndylary “Grid” ulgamy bölüminde görkezilýär .

Bootstrap düzmek

“Bootstrap” -y azyndan iki usulda ulanyp bolýar: düzülen CSS ýa-da çeşmesi Az faýllar bilen. Az faýllary düzmek üçin “Başlamak” bölümine serediň , zerur buýruklary işletmek üçin ösüş gurşawyňyzy nädip

Üçünji tarap düzmek gurallary “Bootstrap” bilen işläp biler, ýöne olary esasy toparymyz goldamaýar.

Üýtgeýjiler

Üýtgeýjiler, reňk, aralyk ýa-da şrift ýazgylary ýaly umumy ulanylýan bahalary merkezleşdirmegiň we paýlaşmagyň usuly hökmünde ulanylýar. Doly bökdençlik üçin Müşderi görmegiňizi haýyş edýäris .

Reňkler

Iki reňk shemasyny aňsatlyk bilen ulanyň: çal reňkli we semantik. Çal reňkli reňkler, köplenç ulanylýan gara reňklere çalt girişi üpjün edýär, semantik manyly kontekst bahalaryna bellenen dürli reňkleri öz içine alýar.

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

Bu reňk üýtgeýjilerinden haýsydyr birini ulanyň ýa-da taslamaňyz üçin has manyly üýtgeýänlere belläň.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Gaýgy

Sahypaňyzyň skeletiniň esasy elementlerini çalt özleşdirmek üçin az sanly üýtgeýji.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Salgylar

Baglanyşyklaryňyzy diňe bir baha bilen dogry reňk bilen aňsatlaşdyryň.

// 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;
  }
}

@link-hover-colorAwtomatiki usulda dogry reňk döretmek üçin “Less” -den başga bir ajaýyp gural bolan funksiýany ulanýandygyny ýadyňyzdan çykarmaň . Ulanyp bilersiňiz darken,, lightenwe saturate.desaturate

Tipografiýa

Birnäçe çalt üýtgeýjiler bilen ýazuw görnüşiňizi, tekst ululygyny, öňdebaryjy we başga zatlary aňsatlyk bilen düzüň. “Bootstrap” aňsat tipografiki garyndylary üpjün etmek üçin bulardan peýdalanýar.

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

Nyşanlar

Nyşanlaryňyzyň ýerleşýän ýerini we faýl adyny sazlamak üçin iki çalt üýtgeýji.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Komponentler

“Bootstrap” -daky komponentler umumy bahalary kesgitlemek üçin käbir üýtgeýän üýtgeýjileri ulanýarlar. Ine iň köp ulanylýanlar.

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

Satyjy garyndylar

Satyjy garyndylary, düzülen CSS-de ähli satyjy prefikslerini goşmak bilen birnäçe brauzeri goldamaga kömek edýän garyndylardyr.

Guty ululygy

Komponentleriň guty modelini ýekeje garyndy bilen täzeden düzüň. Mazmuny üçin Mozilla-dan bu peýdaly makalany görüň .

“ Autoprefixer” -iň girizilmegi bilen garyndy v3.2.0 görnüşinde köneldi . Yza gabat gelýänligi saklamak üçin Bootstrap, Bootstrap v4-e çenli garyndyny içerde ulanmagy dowam etdirer.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Tegelek burçlar

Häzirki wagtda ähli döwrebap brauzerler prefiksi bolmadyk border-radiusemlägi goldaýarlar. Şeýle bolansoň, garyşyk ýok .border-radius(), ýöne “Bootstrap” obýektiň belli bir tarapynda iki burçy çalt tegeleklemek üçin gysga ýollary öz içine alýar.

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

Guty (Drop) kölegeleri

box-shadowMaksatly diňleýjiňiz iň täze we iň uly brauzerleri we enjamlary ulanýan bolsa, emlägi diňe özüňiz ulanmagy unutmaň . Köne Android (v4-den öňki) we iOS enjamlary (iOS-dan öňki 5) üçin goldaw gerek bolsa, gerekli zatlary almak üçin könelişen garyndyny ulanyň.-webkit prefiksi

“ Bootstrap” adaty emlägi goldamaýan köne platformalary resmi taýdan goldamaýandygy sebäpli, garyndy v3.1.0 görnüşinde köneldi . Yza gabat gelýänligi saklamak üçin Bootstrap, Bootstrap v4-e çenli garyndyny içerde ulanmagy dowam etdirer.

Gutujy kölegeleriňizdäki reňkleri ulanmagy unutmaň, rgba()şonuň üçin olar fon bilen mümkin boldugyça bökdençsiz garyşýarlar.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Geçişler

Çeýeligi üçin birnäçe garyndy. Transitionhli geçiş maglumatlaryny biri bilen düzüň ýa-da zerur bolanda aýratyn gijikdirmäni we dowamlylygy kesgitläň.

“Autoprefixer ” -iň girizilmegi bilen garyndylar v3.2.0 görnüşinde köneldi . Yza gabat gelýänligi saklamak üçin Bootstrap, Bootstrap v4-e çenli garyndylary içerde ulanmagy dowam etdirer.

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

Üýtgeşmeler

Islendik bir zady aýlaň, masştablaň, terjime ediň (göçüriň) ýa-da siňdiriň.

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

Animasiýa

CSS3-iň ähli animasiýa häsiýetlerini bir deklarasiýada we beýleki garyndylary aýratyn häsiýetler üçin ulanmak üçin ýekeje garyndy.

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

Açlyk

Browserhli brauzerler üçin aç-açanlygy düzüň we filterIE8 üçin yza gaýdyp beriň.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Placeer eýesi teksti

Her ugurda forma gözegçilikleri üçin kontekst beriň.

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

Sütünler

Bir elementiň içinde CSS arkaly sütün dörediň.

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

Gradiýentler

Islendik iki reňki aňsatlyk bilen fon gradiýentine öwüriň. Has ösen we ugur kesgitläň, üç reňk ulanyň ýa-da radial gradient ulanyň. Mixeke garyşyk bilen size gerek boljak ähli prefiks sintaksisleri alarsyňyz.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Şeýle hem adaty iki reňkli, çyzykly gradientiň burçuny kesgitläp bilersiňiz:

#gradient > .directional(#333; #000; 45deg);

Saç kesmek stili gradienti gerek bolsa, bu hem aňsat. Diňe bir reňk görkeziň we aç-açan ak zolagy örteris.

#gradient > .striped(#333; 45deg);

Garynjany ýokaryk galdyryň we ýerine üç reňk ulanyň. Birinji reňk, ikinji reňk, ikinji reňkiň reňk duralgasy (25% ýaly göterim bahasy) we üçünji reňk bu garyndylar bilen düzüň:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Başlar! Haýsydyr bir gradienti aýyrmaly filterbolsaňyz, goşan IE-e mahsus bolan zatlary aýyrmagy unutmaň. .reset-filter()Miksini bilelikde ulanyp bilersiňiz background-image: none;.

Peýdaly garyndylar

Peýdaly garyndylar, belli bir maksada ýa-da meselä ýetmek üçin başgaça baglanyşykly CSS häsiýetlerini birleşdirýän garyndylardyr.

Clearfix

class="clearfix"Islendik elemente goşmagy ýatdan çykaryň we ýerine gerek .clearfix()ýerinde garyndyny goşuň. Nikolas Gallagheriň mikro arassalaýjysyny ulanýar .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Gorizontal merkezleşdirme

Ene-atasynyň içindäki islendik elementi çalt merkezleşdiriň. Talap widthýa max-width-da bellemek.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Kömekçi kömekçiler

Obýektiň ölçeglerini has aňsat kesgitläň.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Ölçegli tekstler

Islendik tekst ýa-da başga bir element üçin ölçeg ölçegini aňsatlyk bilen düzüň. Adaty brauzeriň özüni alyp barşynda kemçilikler ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Kesilen tekst

Teksti bir garyndy bilen ellips bilen aňsatlyk bilen kesiň. Elementiň blockýa-da inline-blockderejäniň bolmagyny talap edýär.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Retina şekilleri

Iki surat ýoluny we @ 1x şekil ölçeglerini kesgitläň we Bootstrap @ 2x media soragyny üpjün eder. Hyzmat etmek üçin köp suratyňyz bar bolsa, retina suratyňyzy CSS-ni bir media soragyna el bilen ýazmagy göz öňünde tutuň.

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

“Bootstrap” “Less” -iň üstünde gurlan hem bolsa, resmi Sass porty hem bar . Aýry-aýry GitHub ammarynda saklaýarys we täzelenmeleri skript bilen dolandyrýarys.

Näme girýär

Sass portunyň aýratyn reposy bar we birneme üýtgeşik tomaşaçylara hyzmat edýändigi sebäpli taslamanyň mazmuny esasy Bootstrap taslamasyndan düýpgöter tapawutlanýar. Bu, Sass portunyň mümkin boldugyça köp Sass esasly ulgamlar bilen sazlaşykly bolmagyny üpjün edýär.

.Ol	Düşündiriş
`lib/`	Ruby gymmat bahaly kody (Sass konfigurasiýasy, Rail we Compass integrasiýasy)
`tasks/`	Öwüriji skriptler (ýokary akymdan Sass-a öwrülýär)
`test/`	Toplama synaglary
`templates/`	Kompas paket manifeti
`vendor/assets/`	Sass, JavaScript we şrift faýllary
`Rakefile`	Dyrmaşmak we öwürmek ýaly içerki meseleler

Bu faýllaryň işleýändigini görmek üçin Sass portunyň GitHub ammaryna baryp görüň .

Gurnama

Sass üçin Bootstrap-y nädip gurmaly we ulanmalydygy barada maglumat üçin GitHub ammar okaýşyna ýüz tutuň . Iň täze çeşme we Rail, Compass we adaty Sass taslamalary bilen ulanmak üçin maglumatlary öz içine alýar.

Sass üçin bootstrap

CSS

Gysgaça syn

HTML5 doktip görnüşi

Ilki bilen ykjam

Tipografiýa we baglanyşyklar

Normalize.css

Konteýnerler

Grid ulgamy

Giriş

Mediýa soraglary

Grid görnüşleri

Mysal: Gorizontal

Mysal: Suwuk gap

Mysal: Jübi we iş stoly

Mysal: Jübi telefony, planşet, iş stoly

Mysal: Sütüniň örtügi

Jogapkär sütün täzeden başlaýar

Sütünleri öçürmek

Höwürtge sütünleri

Sütün sargyt

Az garyndylar we üýtgeýjiler

Üýtgeýjiler

Mixins

Mysal ulanylyşy

Tipografiýa

Ingsazgylar

h1. Bootstrap sözbaşy

h2. Bootstrap sözbaşy

h3. Bootstrap sözbaşy

h4. Bootstrap sözbaşy

h5. Bootstrap sözbaşy

h6. Bootstrap sözbaşy

h1. Bootstrap sözbaşy Ikinji tekst

h2. Bootstrap sözbaşy Ikinji tekst

h3. Bootstrap sözbaşy Ikinji tekst

h4. Bootstrap sözbaşy Ikinji tekst

h5. Bootstrap sözbaşy Ikinji tekst

h6. Bootstrap sözbaşy Ikinji tekst

Bedeniň göçürmesi

Gurluşyň göçürmesi

Az bilen gurlan

Tekst elementleri

Bellenen tekst

Öçürilen tekst

Ajaýyp tekst

Goýlan tekst

Aşakdaky tekst

Kiçi tekst

Batyr

Italýan

Alternatiw elementler

Düzediş sapaklary

Üýtgetme sapaklary

Gysgaltmalar

Esasy gysgaltma

Başlangyç

Salgylar

Bloknotlar

Bellenen bloknot

Blokkot görnüşleri

Çeşmäni atlandyrmak

Alternatiw displeýler

Sanawlar

Tertibi

Sargyt edildi

Düzedilmedik

Inline

Düşündiriş

Gorizontal düşündiriş

Awtomatik kesmek

Kod

Inline

Ulanyjy giriş

Esasy blok

Üýtgeýjiler

Mysal üçin çykyş

Tablisa

Esasy mysal

Zolakly hatarlar

Brauzeriň gabat gelmegi

Demo `:focus`ýagdaýy

Baglanyşygyň işleýşi barada duýduryş`<a>`

Gizlin ýazgyly goşmaça `.sr-only`nyşanlar