Bootstrap инфраструктурасынын негизги бөлүктөрүн, анын ичинде жакшыраак, тезирээк жана күчтүү веб-иштеп чыгууга болгон мамилебизди билип алыңыз.

HTML5 документ түрү

Bootstrap HTML5 документ түрүн колдонууну талап кылган белгилүү HTML элементтерин жана CSS касиеттерин колдонот. Аны бардык долбоорлоруңуздун башына кошуңуз.

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

Биринчи мобилдик

Bootstrap 2 менен биз алкактын негизги аспектилери үчүн мобилдик ыңгайлуу стилдерди коштук. Bootstrap 3 менен биз долбоорду башынан эле мобилдик колдонууга ылайыктуу кылып кайра жаздык. Кошумча мобилдик стилдерди кошуунун ордуна, алар өзөккө бышырылган. Чынында, Bootstrap биринчи мобилдик болуп саналат . Мобилдик биринчи стилдерди өзүнчө файлдардын ордуна бүт китепканадан тапса болот.

Туура рендеринг жана тийүү масштабын камсыз кылуу үчүн көрүү портунун мета тегин<head> .

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

user-scalable=noКөрүү портунун мета тегине кошуу менен мобилдик түзмөктөрдө масштабдоо мүмкүнчүлүктөрүн өчүрө аласыз . Бул масштабдоону өчүрөт, башкача айтканда, колдонуучулар сыдыра алышат жана сайтыңыз бир аз жергиликтүү тиркемедей сезилет. Жалпысынан, биз муну ар бир сайтка сунуштабайбыз, андыктан этият болуңуз!

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

Типография жана шилтемелер

Bootstrap негизги глобалдык дисплейди, типографияны жана шилтеме стилдерин орнотот. Тактап айтканда, биз:

background-color: #fff;боюнча коюуbody
@font-family-base, @font-size-base, жана @line-height-baseатрибуттарды биздин типографиялык база катары колдонуңуз
Шилтеменин глобалдык түсүн коюңуз @link-colorжана шилтеменин астын сызууну гана колдонуңуз:hover

Бул стилдерди ичинде тапса болот scaffolding.less.

Normalize.css

Жакшыртылган кайчылаш браузер көрсөтүү үчүн, биз Normalize.css колдонобуз , Николас Галлахер жана Джонатан Нилдин долбоору .

Контейнерлер

Bootstrap сайттын мазмунун ороп, тор тутумубузду жайгаштыруу үчүн камтыган элементти талап кылат. Сиз долбоорлоруңузда колдонуу үчүн эки контейнердин бирин тандай аласыз. Көңүл буруңуз, анткени paddingжана башка нерселерден улам, бир дагы контейнер уяга жарабайт.

.containerЖооптуу белгиленген туурасы контейнер үчүн колдонуңуз .

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

.container-fluidКөрүү терезеңиздин бүт кеңдигин камтыган толук кеңдиктеги контейнер үчүн колдонуңуз .

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

Bootstrap жооп берүүчү, мобилдик биринчи суюктук тор тутумун камтыйт, ал шайман же көрүү терезесинин өлчөмү чоңойгон сайын 12 тилкеге чейин масштабдуу. Ал жөнөкөй жайгашуу варианттары үчүн алдын ала аныкталган класстарды , ошондой эле семантикалык макеттерди түзүү үчүн күчтүү аралашмаларды камтыйт .

Киришүү

Тор системалары мазмунуңузду камтыган бир катар саптар жана мамычалар аркылуу беттин макеттерин түзүү үчүн колдонулат. Бул жерде Bootstrap тор системасы кандай иштейт:

Катарлар туура тегиздөө жана толтуруу үчүн .container(туруктуу туурасы) же .container-fluid(толук туурасы) ичинде жайгаштырылышы керек.
Мамычалардын горизонталдуу топторун түзүү үчүн саптарды колдонуңуз.
Мазмун мамычалардын ичине жайгаштырылышы керек жана тилкелер гана саптардын дароо балдары болушу мүмкүн.
Алдын ала аныкталган тор класстары сыяктуу .rowжана .col-xs-4тордун макеттерин тез жасоо үчүн жеткиликтүү. Азыраак аралашмалар дагы семантикалык макеттер үчүн колдонулушу мүмкүн.
Мамычалар аркылуу арыктарды (колонна мазмунунун ортосундагы боштуктарды) түзөт padding. Бул толтуруу .rows боюнча терс маржа аркылуу биринчи жана акыркы тилке үчүн саптар боюнча алмаштырылат.
Терс маржа эмне үчүн төмөндөгү мисалдар артта калган. Бул тор мамычаларындагы мазмун тордон тышкары мазмун менен тизилип турушу үчүн.
Тор мамычалары сиз жайылгыңыз келген он эки жеткиликтүү мамычанын санын көрсөтүү менен түзүлөт. Мисалы, үч бирдей мамычалар үч колдонот .col-xs-4.
Эгерде бир катарга 12ден ашык мамычалар жайгаштырылса, кошумча мамычалардын ар бир тобу бир бирдик катары жаңы сапка оролот.
Тор класстары экрандын туурасы үзүү чекитинин өлчөмүнөн чоңураак же ага барабар болгон түзмөктөргө колдонулат жана кичирээк түзмөктөргө багытталган тор класстарын жокко чыгарат. Ошондуктан, мисалы, кандайдыр бир .col-md-*классты элементке колдонуу анын стилин орточо түзүлүштөрдө гана эмес, .col-lg-*класс жок болсо, чоң түзмөктөрдө да таасир этет.

Бул принциптерди кодуңузга колдонуу үчүн мисалдарды караңыз.

Медиа сурамдары

Тор тутумубузда негизги үзгүлтүккө учуроо чекиттерин түзүү үчүн Less файлдарыбызда төмөнкү медиа сурамдарды колдонобуз.

/* 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-ти түзмөктөрдүн тар топтому менен чектейбиз.

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

Тор параметрлери

Bootstrap тор тутумунун аспектилери бир нече түзмөктөрдө кантип иштээрин карап көрүңүз.

	Кошумча кичинекей түзмөктөр Телефондор (<768px)	Чакан түзмөктөр Планшет (≥768px)	Орточо түзмөктөр Иш такталары (≥992px)	Чоң түзмөктөр Иш такталары (≥1200px)
Тордун жүрүм-туруму	Бардык убакта горизонталдуу	Баштоо үчүн жыйыштырылды, үзүү чекиттеринин үстүндө горизонталдуу
Контейнер туурасы	Жок (автоматтык)	750px	970px	1170px
Класс префикси	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# мамычалар	12
Мамычанын туурасы	Авто	~62px	~81px	~97px
Арыктын туурасы	30px (тилкенин ар бир тарабында 15px)
Nestable	Ооба
Оффсеттер	Ооба
Мамычаларды иреттөө	Ооба

Мисал: Үймө-горизонталдуу

Тор класстарынын бирдиктүү топтомун колдонуу менен .col-md-*, сиз мобилдик түзмөктөрдө жана планшеттик түзмөктөрдө (кошумча кичинеден кичинеге чейинки диапазон) башталып, иш үстөлүндө (орто) түзмөктөрдө горизонталдуу болгонго чейин негизги тор системасын түзө аласыз. Тор мамычаларын каалаган жерге жайгаштырыңыз .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>

Мисал: Суюктук контейнери

Каалаган туруктуу тууралыктагы тордун макеттерин толук кеңдикке .containerайландырыңыз .container-fluid.

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

Мисал: Мобилдик жана рабочий

Мамычаларыңыздын жөн эле кичинекей түзмөктөрдө топтолушун каалабайсызбы? .col-xs-* .col-md-*Мамычаларыңызга кошуу менен кошумча чакан жана орто түзмөк тор класстарын колдонуңуз . Мунун баары кантип иштээрин жакшыраак түшүнүү үчүн төмөнкү мисалды караңыз.

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

Мисал: Мобилдик, планшет, иш такта

Планшет .col-sm-*класстары менен дагы динамикалуу жана күчтүү макеттерди түзүү менен мурунку мисалды түзүңүз.

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

Мисал: Мамычаларды таңуу

Эгерде бир катарга 12ден ашык мамычалар жайгаштырылса, кошумча мамычалардын ар бир тобу бир бирдик катары жаңы сапка оролот.

.col-xs-9

.col-xs-4
9 + 4 = 13 > 12 болгондуктан, бул 4 мамычалык кең бөлүү жаңы сапка бир жанаша бирдик катары оролот.

.col-xs-6
Кийинки тилкелер жаңы сап боюнча уланат.

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

Жооптуу тилкелер баштапкы абалга келтирилет

Жеткиликтүү торлордун төрт деңгээли менен сиз кээ бир үзгүлтүккө учураган чекиттерде тилкелериңиз такыр туура эмес, бири экинчисинен бийик болгондуктан, көйгөйлөргө туш болосуз. Муну оңдоо үчүн a .clearfixжана биздин жооп берүүчү утилита класстарыбызды колдонуңуз .

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

Жооптуу үзгүлтүккө учуроо чекиттеринде тилкени тазалоодон тышкары, сиз офсеттерди, түртүүлөрдү же тартууларды баштапкы абалга келтиришиңиз керек болушу мүмкүн . Муну сетка мисалында аракетте караңыз .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Мамычаларды алмаштыруу

.col-md-offset-*Класстар аркылуу тилкелерди оңго жылдырыңыз . Бул класстар мамычанын сол четин *мамычаларга көбөйтөт. Мисалы, төрт мамычанын үстүнөн .col-md-offset-4жылдырат ..col-md-4

.col-md-4

.col-md-4 .col-md-offset-4

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

Сиз ошондой эле .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>

Уюшкан мамычалар

Мазмунуңузду демейки тор менен уялаштыруу үчүн, учурдагы тилкеге жаңы .rowжана мамычалар топтомун кошуңуз . Уюшкан саптар 12ге чейин же андан азыраак кошулган мамычалардын топтомун камтышы керек (бардык 12 жеткиликтүү мамычаны колдонуу талап кылынбайт)..col-sm-*.col-sm-*

1-деңгээл: .col-sm-9

2-деңгээл: .col-xs-8 .col-sm-6

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>

Мамычаларды иреттөө

Биздин орнотулган тор тилкелерибиздин тартибин .col-md-push-*жана .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>

Азыраак аралашмалар жана өзгөрмөлөр

Ыкчам макеттер үчүн алдын ала түзүлгөн тор класстарынан тышкары , Bootstrap өзүңүздүн жөнөкөй, семантикалык макеттериңизди тез жаратуу үчүн Less өзгөрмөлөрдү жана миксиндерди камтыйт.

Өзгөрмөлөр

Өзгөрмөлөр мамычалардын санын, каналдын туурасын жана калкып жүрүүчү мамычаларды баштоо үчүн медиа суроо чекитин аныктайт. Биз аларды жогоруда документтештирилген алдын ала аныкталган тор класстарын, ошондой эле төмөндө келтирилген ыңгайлаштырылган аралашмалар үчүн колдонобуз.

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

Миксиндер

Миксиндер тордун өзгөрмөлөрү менен бирге жеке тор мамычалары үчүн семантикалык CSS түзүү үчүн колдонулат.

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

Мисал колдонуу

Сиз өзгөрмөлөрдү өзүңүздүн жеке маанилериңизге өзгөртсөңүз болот, же жөн гана алардын демейки маанилери менен аралашмаларды колдоно аласыз. Бул жерде демейки жөндөөлөрдү колдонуунун мисалы, ортосунда боштук бар эки тилкелүү макетти түзүү.

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

рубрикалар

Бардык HTML аталыштары, <h1>аркылуу <h6>жеткиликтүү. .h1аркылуу .h6класстар да бар, анткени сиз рубриканын шрифт стилине дал келүүнү кааласаңыз, бирок дагы эле текстиңиз сапта көрсөтүлүшүн кааласаңыз.

h1. Bootstrap аталышы	Semibold 36px
h2. Bootstrap аталышы	Semibold 30px
h3. Bootstrap аталышы	Semibold 24px
h4. Bootstrap аталышы	Semibold 18px
h5. Bootstrap аталышы	Semibold 14px
h6. Bootstrap аталышы	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>Жалпы тег же .smallкласс менен каалаган темада жеңилирээк, кошумча текст түзүңүз .

h1. Bootstrap аталышы Кошумча текст

h2. Bootstrap аталышы Кошумча текст

h3. Bootstrap аталышы Кошумча текст

h4. Bootstrap аталышы Кошумча текст

h5. Bootstrap аталышы Кошумча текст

h6. Bootstrap аталышы Кошумча текст

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

Дененин көчүрмөсү

Bootstrap глобалдык font-sizeдемейки 14px , 1.428line-height менен . Бул жана бардык пункттарына карата колдонулат. Кошумчалай кетсек, (абзацтар) алардын эсептелген сызык бийиктигинин жарымынын төмөнкү четин алат (демейки боюнча 10px).<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Дуйс моллис, 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. Дуйс моллис, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Коргоочу корпустун көчүрмөсү

Кошуу менен абзацты өзгөчө кылыңыз .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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

Less менен курулган

Типографиялык масштаб өзгөрмөлөрдөгү эки Less өзгөрмөсүнө негизделген.less : @font-size-baseжана @line-height-base. Биринчиси - бүтүндөй колдонулган негизги шрифт-өлчөмү, экинчиси - базалык сызыктын бийиктиги. Биз ошол өзгөрмөлөрдү жана кээ бир жөнөкөй математиканы бардык түрүбүздүн жана башкалардын четтерин, толтургучтарын жана сызык бийиктиктерин түзүү үчүн колдонобуз. Аларды ыңгайлаштырыңыз жана Bootstrap ыңгайлашат.

Inline текст элементтери

Белгиленген текст

Башка контекстте актуалдуулугуна байланыштуу текстти бөлүп көрсөтүү үчүн <mark>тегди колдонуңуз.

Сиз белги белгисин колдоно аласызбөлүп көрсөтүүтекст.

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

Жок кылынган текст

Жок кылынган тексттин блокторун көрсөтүү үчүн <del>тегди колдонуңуз.

~~Тексттин бул сабы жок кылынган текст катары каралышы керек.~~

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

Чийилген текст

Тексттин актуалдуу эмес блокторун көрсөтүү үчүн <s>тегди колдонуңуз.

~~Тексттин бул сабы так эмес деп эсептелинет.~~

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

Киргизилген текст

Документке кошумчаларды көрсөтүү үчүн <ins>тегди колдонуңуз.

Тексттин бул сабы документке кошумча катары каралышы керек.

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

Асты сызылган текст

Тексттин астын сызуу үчүн <u>тегди колдонуңуз.

Тексттин бул сабы асты сызылгандай көрсөтүлөт

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

Жеңил стилдер менен HTMLдин демейки басым тегдерин колдонуңуз.

Чакан текст

Тексттин саптык же блокторун баса белгилөө үчүн, <small>тегди колдонуп, текстти ата-энеликтин 85% өлчөмүнө коюңуз. font-sizeРубрика элементтери уяланган элементтер үчүн өздөрүн алышат <small>.

.smallАльтернатива катары каалаган элементтин ордуна саптык элементти колдонсоңуз болот <small>.

Тексттин бул сабы жакшы басуу катары каралышы керек.

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

Bold

Оор шрифт-салмагы менен тексттин үзүндүсүн баса үчүн.

Төмөнкү тексттин үзүндүсү калың текст катары берилген .

<strong>rendered as bold text</strong>

курсив

Тексттин үзүндүсүн курсив менен баса белгилөө үчүн.

Төмөнкү тексттин үзүндүсү курсив текст катары көрсөтүлөт .

<em>rendered as italicized text</em>

Альтернативдик элементтер

Колдонуудан тартынбаңыз <b>жана <i>HTML5те. <b>кошумча маани бербестен сөздөрдү же сөз айкаштарын бөлүп көрсөтүү үчүн колдонулат, ал эми <i>негизинен үн, техникалык терминдер ж.б.у.с.

Тегиздөө класстары

Текстти тегиздөө класстары менен компоненттерге текстти оңой кайра тегиздөө.

Солго тегизделген текст.

Ортого тегизделген текст.

Оңго тегизделген текст.

Негизделген текст.

Текстти жабуу жок.

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

Трансформация класстары

Текстти баш тамгалар класстары менен компоненттерге которуу.

Кичирейтилген текст.

Чоң тамгалар менен жазылган текст.

Баш тамга менен жазылган текст.

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

Аббревиатуралар

<abbr>Аббревиатуралар жана аббревиатуралар үчүн HTML элементинин стилдештирилген ишке ашырылышы . Атрибуту бар аббревиатуралардын titleылдый жагындагы ачык чекиттери жана курсордогу жардам курсору бар, бул курсордогу жана жардамчы технологияларды колдонуучулар үчүн кошумча контекстти камсыз кылат.

Негизги аббревиатура

Аттрибут сөзүнүн аббревиатурасы attr болуп саналат .

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

Инициализм

.initialismБир аз кичирээк шрифт өлчөмү үчүн аббревиатурага кошуңуз .

HTML кесилген нандан бери эң жакшы нерсе.

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

Даректер

Жакынкы ата-баба же бүткүл иш органы үчүн байланыш маалыматын көрсөтүңүз. Бардык саптарды менен бүтүрүү менен форматтоо сакталсын <br>.

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

Толук аты-жөнү
[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

Документиңиздин ичиндеги башка булактан алынган мазмун блокторун цитата кылуу үчүн.

Демейки блокировка

Цитата катары <blockquote>каалаган HTMLди ороп алыңыз . Түз тырмакчаларды сунуштайбыз <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante.

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

Блокировка параметрлери

Стандарттагы жөнөкөй вариациялар үчүн стиль жана мазмун өзгөрөт <blockquote>.

Булакты атоо

<footer>Булакты аныктоо үчүн а кошуңуз . Булактын атын ороп алыңыз <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing элит. 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>

Альтернативдик дисплейлер

.blockquote-reverseОңго тегизделген мазмуну менен блокировка үчүн кошуңуз .

Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante.

Булак аталышында белгилүү бирөө

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

Тизмелер

Тартипсиз

Тартип ачык мааниге ээ болбогон нерселердин тизмеси .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
претиум nisl aliquet жылы Facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Анеан сит амет эрат нунц
Eget porttitor lorem

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

Заказ берди

Буйрутма ачык мааниге ээ болгон нерселердин тизмеси .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
претиум nisl aliquet жылы Facilisis
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Анеан сит амет эрат нунц
Eget porttitor lorem

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

Unstyled

Тизмедеги элементтердин демейки list-styleжана сол четтерин алып салыңыз (дароо балдар үчүн гана). Бул дароо балдардын тизмесинин элементтерине гана тиешелүү , демек, сиз каалаган уя салынган тизмелер үчүн классты да кошушуңуз керек болот.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
претиум nisl aliquet жылы Facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Анеан сит амет эрат нунц
Eget porttitor lorem

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

Inline

Тизмедеги бардык элементтерди бир сапка display: inline-block;жана бир аз толтуруу менен жайгаштырыңыз.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Description

Алар менен байланышкан сыпаттамалары менен терминдердин тизмеси.

Сүрөттөмө тизмелери: Сүрөттөмө тизмеси терминдерди аныктоо үчүн идеалдуу.
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>

Горизонталдуу сүрөттөмө

Терминдерди жана сыпаттамаларды <dl>катарлаш кылып түзүңүз. Демейки s сыяктуу тизилип башталат <dl>, бирок навигация тилкеси кеңейгенде, буларды жасайт.

Сүрөттөмө тизмелери: Сүрөттөмө тизмеси терминдерди аныктоо үчүн идеалдуу.
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>

Автоматтык кыскартуу

Горизонталдуу сүрөттөмө тизмелери менен сол тилкеге батпай өтө узун терминдерди кыскартат text-overflow. Тар көрүү портторунда алар демейки топтолгон макетке өзгөрөт.

Inline

Коддун саптык үзүндүлөрүн менен ороп алыңыз <code>.

Мисалы, <section>сап катары оролушу керек.

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

Колдонуучунун киргизүүсү

<kbd>Адатта клавиатура аркылуу киргизилүүчү киргизүүнү көрсөтүү үчүн колдонуңуз .

Каталогдорду которуштуруу үчүн cd, каталогдун аталышынан кийин териңиз.
Орнотууларды түзөтүү үчүн басыңыз 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>

Негизги блок

<pre>Коддун бир нече саптары үчүн колдонуңуз . Туура рендеринг үчүн коддогу бурчтуу кашаалардан качууну унутпаңыз.

<p>Үлгү тексти бул жерде...</p>

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

Каалоо боюнча сиз .pre-scrollableклассты кошо аласыз, ал 350px максимум бийиктигин орнотуп, Y огу сыдырма тилкесин камсыз кылат.

Өзгөрмөлөр

Өзгөрмөлөрдү көрсөтүү үчүн <var>тегди колдонуңуз.

y = m x + b

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

Үлгү чыгаруу

Блокторду көрсөтүү үчүн программадан үлгү чыгаруу <samp>тегди колдонуңуз.

Бул текст компьютердик программадан үлгү чыгаруу катары каралышы керек.

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

Негизги мисал

Негизги стилдештирүү үчүн — жеңил толтургуч жана горизонталдуу бөлгүчтөр .table— каалаган класска негизги классты кошуңуз <table>. Бул өтө ашыкча сезилиши мүмкүн, бирок календарлар жана даталарды тандоочулар сыяктуу башка плагиндер үчүн таблицаларды кеңири колдонууну эске алып, биз ыңгайлаштырылган стол стилдерибизди бөлүп алууну чечтик.

Таблицага кошумча жазуу.
#	Биринчи аты	Акыркы аты	Колдонуучунун аты
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри	чымчык	@twitter

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

Чаардуу катарлар

.table-stripedичиндеги каалаган таблица саптарына зебра тилкесин кошуу үчүн колдонуңуз <tbody>.

Браузердик шайкештик

Стилдүү таблицалар CSS селектору аркылуу :nth-childстилделет, ал Internet Explorer 8де жок.

#	Биринчи аты	Акыркы аты	Колдонуучунун аты
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри	чымчык	@twitter

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

Чектелген үстөл

.table-borderedЖадыбалдын жана уячалардын бардык тарабындагы чектерди кошуңуз .

#	Биринчи аты	Акыркы аты	Колдонуучунун аты
1	Марк	От��о	@mdo
2	Жакып	Торнтон	@fat
3	Ларри	чымчык	@twitter

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

Катарларды чаптоо

.table-hoverичинде таблицанын саптарында өтүүчү абалды иштетүү үчүн кошуу <tbody>.

#	Биринчи аты	Акыркы аты	Колдонуучунун аты
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри	чымчык	@twitter

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

Конденсацияланган стол

.table-condensedКлетка толтургучтарын экиге бөлүп, үстөлдөрдү компакттуу кылуу үчүн кошуңуз .

#	Биринчи аты	Акыркы аты	Колдонуучунун аты
1	Марк	Отто	@mdo
2	Жакып	Торнтон	@fat
3	Ларри куш		@twitter

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

Контексттик класстар

Таблица саптарын же айрым уячаларды боёо үчүн контексттик класстарды колдонуңуз.

Класс	Description
`.active`	Белгилүү бир сапка же уячага курсордун түсүн колдонот
`.success`	Ийгиликтүү же оң иш-аракетти көрсөтөт
`.info`	Нейтралдуу маалыматтык өзгөртүүнү же аракетти көрсөтөт
`.warning`	Көңүл бурууну талап кылган эскертүүнү көрсөтөт
`.danger`	Кооптуу же потенциалдуу терс аракетти көрсөтөт

#	Мамычанын аталышы	Мамычанын аталышы	Мамычанын аталышы
1	Мамыча мазмуну	Мамыча мазмуну	Мамыча мазмуну
2	Мамыча мазмуну	Мамыча мазмуну	Мамыча мазмуну
3	Мамыча мазмуну	Мамыча мазмуну	Мамыча мазмуну
4	Мамыча мазмуну	Мамыча мазмуну	Мамыча мазмуну
5	Мамыча мазмуну	Мамыча мазмуну	Мамыча мазмуну
6	Мамыча мазмуну	Мамыча мазмуну	Мамыча мазмуну
7	Мамыча мазмуну	Мамыча мазмуну	Мамыча мазмуну
8	Мамыча мазмуну	Мамыча мазмуну	Мамыча мазмуну
9	Мамыча мазмуну	Мамыча мазмуну	Мамыча мазмуну

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

Көмөкчү технологияларга маани берүү

Таблица сабына же жеке уячага маани кошуу үчүн түстү колдонуу визуалдык көрсөткүчтү гана берет, ал жардамчы технологиялардын колдонуучуларына жеткирилбейт – мисалы, экранды окуу. Түс менен белгиленген маалымат мазмундун өзүнөн (тиешелүү таблица сапындагы/уячасындагы көрүнүүчү текст) же .sr-onlyкласс менен жашырылган кошумча текст сыяктуу альтернативалуу каражаттар аркылуу камтылганын текшериңиз.

Жооптуу таблицалар

Чакан түзмөктөрдө (768 пикселден төмөн) горизонталдуу жылдыруу үчүн каалаганын .tableороп, жооп берүүчү таблицаларды түзүңүз . .table-responsive768 пикселден чоңураак нерсени көргөндө, сиз бул таблицаларда эч кандай айырманы көрбөйсүз.

Вертикалдуу кесүү/кесүү

Жооптуу таблицалар overflow-y: hiddenүстөлдүн астыңкы же үстүнкү четтеринен ашкан бардык мазмунду өчүрүүчү колдонот. Атап айтканда, бул ачылуучу менюларды жана башка үчүнчү тараптын виджеттерин кесип алат.

Firefox жана талаалар топтому

Firefox'тун ыңгайсыз талаа стили widthбар, алар жооп берүүчү таблицага тоскоол болот. Муну биз Bootstrapде камсыз кылбаган Firefox-ка тиешелүү бузукулуктарсыз жокко чыгаруу мүмкүн эмес :

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

Көбүрөөк маалымат алуу үчүн бул Stack Overflow жообун окуңуз .

#	Таблицанын аталышы	Таблицанын аталышы	Таблицанын аталышы	Таблицанын аталышы	Таблицанын аталышы	Таблицанын аталышы
1	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы
2	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы
3	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы

#	Таблицанын аталышы	Таблицанын аталышы	Таблицанын аталышы	Таблицанын аталышы	Таблицанын аталышы	Таблицанын аталышы
1	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы
2	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы
3	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы	Таблица клеткасы

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

Негизги мисал

Жеке форманы башкаруу автоматтык түрдө кээ бир глобалдык стилди алат. Бардык тексттик <input>, <textarea>, жана <select>элементтери демейки боюнча .form-controlкоюлган . Оптималдуу аралык үчүн width: 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>

Форма топторун киргизүү топтору менен аралаштырбаңыз

Форма топторун киргизүү топтору менен түз аралаштырбаңыз . Анын ордуна, форма тобунун ичине киргизүү тобун уя салыңыз.

Inline форма

Солго тегизделген жана саптык блокторду башкаруу элементтери үчүн формаңызга кошуңуз .form-inline(ал болушу шарт эмес ). Бул туурасы жок дегенде 768px болгон көрүнүштөр ичиндеги формаларга гана тиешелүү.<form>

Ыңгайлаштырылган тууралыктарды талап кылышы мүмкүн

Киргизүүлөр жана тандоолор width: 100%;Bootstrap ичинде демейки боюнча колдонулат. Саптык формалардын ичинде биз width: auto;бир сапта бир нече башкаруу элементтери болушу үчүн баштапкы абалга келтиребиз. Сиздин планыңызга жараша, кошумча ыңгайлаштырылган тууралар талап кылынышы мүмкүн.

Ар дайым энбелгилерди кошуңуз

Ар бир киргизүү үчүн энбелги кошпосоңуз, экранды окугучтар формаларыңызда кыйынчылыктарга туш болушат. Бул саптык формалар үчүн .sr-onlyкласстын жардамы менен энбелгилерди жашыра аласыз. aria-label, aria-labelledbyже titleатрибут сыяктуу жардамчы технологиялар үчүн энбелги берүүнүн дагы альтернативалуу ыкмалары бар. Эгерде булардын бири да жок болсо, экранды окугандар placeholderатрибутту колдонушу мүмкүн, эгерде бар болсо, бирок placeholderбашка этикеткалоо ыкмаларын алмаштыруу катары колдонуу сунушталбайт.

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

Горизонталдык форма

Формага кошуу менен энбелгилерди жана форма башкаруу элементтеринин топторун горизонталдуу жайгаштыруу үчүн Bootstrap'тын алдын ала аныкталган тор класстарын колдонуңуз .form-horizontal(ал болушу шарт эмес <form>). Ушундай кылуу менен .form-groups сетка саптары сыяктуу иш алып барышат, андыктан .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>

Колдоого алынган башкаруу элементтери

Үлгү форма макетинде колдоого алынган стандарттык форманы башкаруу элементтеринин мисалдары.

Киргизүүлөр

Көбүнчө форманы башкаруу, текстке негизделген киргизүү талаалары. Бардык HTML5 түрлөрүн колдоону камтыйт: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, жана color.

Декларация түрү талап кылынат

typeКиргизүүлөр туура жарыяланганда гана толук стилделет .

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

Киргизүү топтору

Интегралдык текстти же баскычтарды кандайдыр бир текстке негизделгенге чейин жана/же кошуу үчүн <input>, киргизүү тобунун компонентин текшериңиз .

Textarea

Тексттин бир нече саптарын колдогон форманы башкаруу. rowsКерек болсо атрибутун өзгөртүңүз .

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

Белгилөө кутучалары жана радиолор

Белгилөө кутучалары тизмедеги бир же бир нече варианттарды тандоо үчүн, ал эми радиолор көптөрдүн арасынан бир параметрди тандоо үчүн.

Өчүрүлгөн белги кутучалары жана үналгылар колдоого алынат, бирок ата-эненин курсорунда "уруксат берилбеген" курсорду көрсөтүү үчүн классты ата -энеге , , , же <label>.кошушуңуз керек болот ..disabled.radio.radio-inline.checkbox.checkbox-inline

Демейки (жыйылган)

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

Inline белгилөө кутучалары жана радиолор

Бир сапта пайда болгон башкаруу элементтери үчүн бир катар белги кутучаларындагы .checkbox-inlineже класстарды колдонуңуз ..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>

Белги тексти жок белгилөө кутучалары жана радиолор

ичинде текст жок болсо <label>, киргизүү сиз күткөндөй жайгаштырылат. Учурда сапта эмес белги кутучаларында жана радиолордо гана иштейт. Көмөкчү технологиялар үчүн белгинин кандайдыр бир түрүн дагы эле камсыз кылууну унутпаңыз (мисалы, 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>

Тандайт

Көптөгөн жергиликтүү тандалган менюлардын, тагыраак айтканда, Safari жана Chrome-да тегеректелген бурчтары бар, аларды border-radiusкасиеттери аркылуу өзгөртүүгө болбойт.

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

<select>Атрибуту бар башкаруу элементтери үчүн демейки multipleбоюнча бир нече варианттар көрсөтүлөт.

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

Статикалык башкаруу

Сиз форманын ичиндеги форма энбелгисинин жанына жөнөкөй текстти коюу керек болгондо, .form-control-staticклассты колдонуңуз <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>

Фокус абалы

outlineКээ бир форма башкаруу элементтериндеги демейки стилдерди алып салып, box-shadowанын ордуна a колдонобуз :focus.

Демо `:focus`абалы

Жогорудагы мисал киргизүү биздин документациядагы абалды көрсөтүү үчүн ыңгайлаштырылган стилдерди :focusколдонот .form-control.

Өчүрүлгөн абал

disabledКолдонуучунун өз ара аракеттенүүсүн алдын алуу үчүн киргизүүгө логикалык атрибутун кошуңуз . Өчүрүлгөн киргизүүлөр жеңилирээк көрүнөт жана not-allowedкурсорду кошот.

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

Өчүрүлгөн талаа топтомдору

Дароо ичиндеги бардык башкаруу элементтерин өчүрүү үчүн disabledатрибутун кошуңуз .<fieldset><fieldset>

Шилтеменин иштеши жөнүндө эскертүү`<a>`

Демейки боюнча, браузерлер а ичиндеги бардык түпкү форманы башкаруу элементтерин ( <input>, <select>жана <button>элементтерди) <fieldset disabled>өчүрүлгөн катары карап, аларда клавиатура менен чычкандын өз ара аракеттенүүсүн алдын алат. Бирок, эгерде сиздин формаңызда <a ... class="btn btn-*">элементтер бар болсо, аларга стили гана берилет pointer-events: none. Баскычтардын өчүрүлгөн абалы жөнүндө бөлүмдө (айрыкча, анкер элементтери үчүн бөлүмдө) белгиленгендей, бул CSS касиети стандартташтырылган эмес жана Opera 18 жана андан төмөн, же Internet Explorer 11де толук колдоого алынбайт жана утуп алган 'Клавиатура колдонуучуларына бул шилтемелерди фокустоого же активдештирүүгө жол бербеңиз. Коопсуз болуу үчүн, мындай шилтемелерди өчүрүү үчүн ыңгайлаштырылган JavaScript колдонуңуз.

Браузердик шайкештик

Bootstrap бул стилдерди бардык браузерлерде колдонсо да, Internet Explorer 11 жана андан төмөн disabledверсиялар <fieldset>. Бул браузерлерде талаалар топтомун өчүрүү үчүн ыңгайлаштырылган JavaScript колдонуңуз.

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

Окуу үчүн гана абал

readonlyКиргизүүнүн маанисин өзгөртүүгө жол бербөө үчүн киргизүүгө логикалык атрибутун кошуңуз . Окуу үчүн гана киргизүүлөр жеңилирээк көрүнөт (өчүрүлгөн киргизүүлөр сыяктуу), бирок стандарттык курсорду сактап калат.

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

Жардам тексти

Форма башкаруу элементтери үчүн блок деңгээлиндеги жардам тексти.

Жардам текстин форманы башкаруу элементтери менен байланыштыруу

Жардам тексти форманы башкаруу менен ачык байланыштырылышы керек, ал aria-describedbyатрибутту колдонууга тиешелүү. Бул жардамчы технологиялар – мисалы, экранды окугучтар – колдонуучу фокустаганда же башкарууга киргенде бул жардам текстин жарыялоосун камсыздайт.

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

Текшерүү мамлекеттери

Bootstrap форманы башкаруу элементтериндеги ката, эскертүү жана ийгилик абалын текшерүү стилдерин камтыйт. .has-warningКолдонуу үчүн , .has-error, же .has-successнегизги элементке кошуңуз . Ошол элементтин ичиндеги каалаган .control-label, .form-control, жана .help-blockтекшерүү стилдерин алат.

Көмөкчү технологияларга жана түс сокур колдонуучуларга валидация абалын жеткирүү

Форманы башкаруунун абалын белгилөө үчүн бул валидация стилдерин колдонуу визуалдык, түскө негизделген индикацияны гана камсыз кылат, ал жардамчы технологиялардын колдонуучуларына – мисалы, экранды окугучтарга – же түс сокур колдонуучуларга жеткирилбейт.

Мамлекеттин альтернативдүү көрсөткүчү да камсыз кылынышын камсыз кылуу. Мисалы, сиз форманы башкаруунун <label>текстинин өзүнө абал тууралуу ишаратты камтый аласыз (төмөндөгү код мисалында болгондой), Глифконду (классты колдонуу менен ылайыктуу альтернативалуу текст менен - Glyphicon мисалдарын.sr-only караңыз ) камтый аласыз. кошумча жардам текст блогу. Өзгөчө жардамчы технологиялар үчүн жараксыз форманы башкаруу элементтерине да атрибут ыйгарылышы мүмкүн .aria-invalid="true"

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

Кошумча иконалар менен

Сиз ошондой эле кошумча пикир сүрөтчөлөрүн .has-feedbackжана туура сөлөкөтүн кошо аласыз.

Пикир иконалар тексттик <input class="form-control">элементтер менен гана иштейт.

Пиктограммалар, энбелгилер жана киргизүү топтору

Пикир сүрөтчөлөрүн кол менен жайгаштыруу энбелгиси жок киргизүүлөр жана оң жактагы кошумчасы бар киргизүү топтору үчүн талап кылынат. Жеткиликтүүлүк үчүн бардык киргизүүлөр үчүн энбелгилерди берүү сунушталат. Эгер сиз энбелгилердин көрсөтүлүшүнө бөгөт койгуңуз келсе, аларды .sr-onlyкласс менен жашырыңыз. Эгер сиз энбелгисиз жасашыңыз керек болсо top, пикир белгисинин маанисин тууралаңыз. Киргизүү топтору үчүн кошумчаңыздын rightтуурасына жараша маанини тиешелүү пикселдик мааниге тууралаңыз.

Иконанын маанисин жардамчы технологияларга жеткирүү

Жардамчы технологиялар – мисалы, экранды окугучтар – сөлөкөттүн маанисин туура жеткирүү үчүн, кошумча жашыруун текст .sr-onlyкласска киргизилиши жана аны колдонууга тиешелүү форманы башкаруу менен ачык байланыштырылышы керек aria-describedby. Же болбосо, маанини (мисалы, белгилүү бир текст киргизүү талаасы үчүн эскертүү бар экенин) башка формада, мисалы <label>форманы башкаруу менен байланышкан актуалдуу текстти өзгөртүүнү камсыз кылыңыз.

Төмөнкү мисалдар тексттин өзүндө алардын тиешелүү форманы башкаруу элементтеринин валидация абалы жөнүндө айтылганына карабастан, <label>жогорудагы ыкма ( .sr-onlyтекст жана aria-describedby) иллюстрациялык максаттар үчүн киргизилген.

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

Горизонталдык жана саптык формадагы кошумча иконалар

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

`.sr-only`Жашыруун энбелгилери бар кошумча иконалар

Эгерде сиз .sr-onlyклассты форманы башкарууну жашыруу үчүн колдонсоңуз <label>(атрибут сыяктуу башка энбелгилөө опцияларын колдонуунун ордуна aria-label), Bootstrap ал кошулгандан кийин анын ордун автоматтык түрдө тууралайт.

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

Өлчөмдү көзөмөлдөө

сыяктуу класстарды колдонуу менен бийиктиктерди, ал эми сыяктуу .input-lgтор тилке класстарын колдонуп, туурасын коюңуз .col-lg-*.

Бийиктиктин өлчөмү

Баскычтын өлчөмдөрүнө дал келген узунураак же кыскараак форма башкаруу элементтерин түзүңүз.

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

Горизонталдык форманын топторунун өлчөмдөрү

же .form-horizontalкошуу менен энбелгилерди тез өлчөп, башкаруу элементтерин түзүңүз ..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>

Колонна өлчөмү

Киргизүүлөрдү торчо мамычаларга же каалаган ыңгайлаштырылган негизги элементке ороп, каалаган кеңдикти оңой эле киргизүү.

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

Баскыч тегдери

<a>, <button>, же <input>элементтеги баскыч класстарын колдонуңуз .

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Контексттик колдонуу

<a>Баскыч класстарын жана <button>элементтерде колдонсо болот , бирок <button>биздин navbar жана navbar компоненттерибизде элементтер гана колдоого алынат.

Шилтемелер баскыч катары иштейт

Эгерде <a>элементтер учурдагы барактын ичиндеги башка документке же бөлүмгө өтүүнүн ордуна, барак ичиндеги функцияларды ишке киргизүү үчүн баскычтар катары колдонулса, аларга да тиешелүү role="button".

Браузердик рендеринг

Мыкты тажрыйба катары, браузерлер аралык рендерингдин дал келишин камсыз кылуу үчүн мүмкүн болушунча элементти колдонууну сунуштайбыз .<button>

Башка нерселер менен катар, Firefox <30да катаline-height бар, ал бизге of- based баскычтарды коюуга тоскоол болуп <input>, алар Firefox'тун башка баскычтарынын бийиктигине так дал келбейт.

Параметрлер

Стилдүү баскычты тез түзүү үчүн жеткиликтүү баскыч класстарынын каалаганын колдонуңуз.

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

Көмөкчү технологияларга маани берүү

Баскычка маани кошуу үчүн түстү колдонуу визуалдык көрсөткүчтү гана камсыз кылат, ал жардамчы технологиялардын колдонуучуларына – мисалы, экранды окугучтарга жеткирилбейт. Түс менен белгиленген маалымат мазмундун өзүнөн (баскычтын көрүнүүчү тексти) ачык-айкын болушун же .sr-onlyкласс менен жашырылган кошумча текст сыяктуу альтернативалуу каражаттар аркылуу камтылганын текшериңиз.

Өлчөмдөрү

Чоңураак же кичине баскычтарды каалайсызбы? Кошумча өлчөмдөр үчүн .btn-lg, .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>

кошуу менен блок деңгээлиндеги баскычтарды түзүңүз - ата-эненин толук туурасын камтыган баскычтар .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>

Активдүү абал

Активдүү болгондо баскычтар басылганда пайда болот (кара фон, караңгы чек ара жана кыстарылган көлөкө менен). Элементтер үчүн <button>бул аркылуу жасалат :active. Элементтер үчүн <a>, ал менен жасалат .active. Бирок, эгер сиз активдүү абалды программалык түрдө кайталашыңыз керек болсо, .activeon s колдоно аласыз <button>(жана атрибутту кошо аласыз).aria-pressed="true"

Баскыч элементи

Кошуунун кереги жок :active, анткени бул псевдокласс, бирок ошол эле көрүнүштү мажбурлоо керек болсо, улантыңыз жана кошуңуз .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>

Анкер элементи

.activeКлассты <a>баскычтарга кошуңуз .

Негизги шилтеме Шилтеме

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

Өчүрүлгөн абал

баскычтары менен кайра өчүп, аларды чыкылдатпагандай кылыңыз opacity.

Баскыч элементи

disabledБаскычтарга атрибут кошуңуз <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>

Браузердик шайкештик

disabledЭгер сиз атрибутун кошсоңуз <button>, Internet Explorer 9 жана ылдыйкы версиялары текстти боз түскө боёйт, аны биз оңдой албайбыз.

Анкер элементи

.disabledКлассты <a>баскычтарга кошуңуз .

Негизги шилтеме Шилтеме

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

Биз .disabledбул жерде жалпы класска окшош пайдалуу класс катары колдонобуз .active, ошондуктан эч кандай префикс талап кылынбайт.

Шилтеменин функциялык эскертүүсү

Бул класс s pointer-events: noneшилтемесинин функциясын өчүрүүгө аракет кылат <a>, бирок ал CSS касиети стандартташтырылган эмес жана Opera 18 жана андан төмөн, же Internet Explorer 11де толук колдоого алынбайт. Мындан тышкары, pointer-events: none, клавиатураны колдогон браузерлерде да навигация таасири тийбейт, башкача айтканда, клавиатураны көрө албаган колдонуучулар жана жардамчы технологияларды колдонуучулар дагы эле бул шилтемелерди иштете алышат. Коопсуз болуу үчүн, мындай шилтемелерди өчүрүү үчүн ыңгайлаштырылган JavaScript колдонуңуз.

Жооптуу сүрөттөр

.img-responsiveBootstrap 3деги сүрөттөр классты кошуу аркылуу жооп берүүгө ылайыктуу болушу мүмкүн . Бул ата-энелик элементке жакшы масштабдалышы үчүн жана сүрөткө max-width: 100%;тиешелүү height: auto;.display: block;

.img-responsiveКласс колдонулган сүрөттөрдү борборлош үчүн , .center-blockордуна колдонуңуз .text-center. Колдонуу жөнүндө көбүрөөк маалымат алуу үчүн жардамчы класстары бөлүмүн караңыз ..center-block

SVG сүрөттөрү жана IE 8-10

Internet Explorer 8-10до SVG сүрөттөрү .img-responsiveпропорционалдуу эмес өлчөмдө болот. Муну оңдоо үчүн width: 100% \9;, зарыл болгон жерде кошуңуз. Bootstrap муну автоматтык түрдө колдонбойт, анткени ал башка сүрөт форматтарына кыйынчылык жаратат.

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

Сүрөт формалары

<img>Каалаган долбоордо сүрөттөрдү оңой стилдөө үчүн элементке класстарды кошуңуз .

Браузердик шайкештик

Internet Explorer 8 тегеректелген бурчтар үчүн колдоого ээ эмес экенин унутпаңыз.

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

Контексттик түстөр

Бир нече басым пайдалуу класстар менен түс аркылуу маанини жеткириңиз. Булар шилтемелерге да колдонулушу мүмкүн жана биздин демейки шилтеме стилдерибиз сыяктуу эле, курсорду карагыла.

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>

Конкреттүүлүк менен мамиле кылуу

Кээде басым класстары башка селектордун өзгөчөлүгүнө байланыштуу колдонулушу мүмкүн эмес. <span>Көпчүлүк учурларда, жетиштүү убактылуу чечүү үчүн класс менен текстти ороп болуп саналат.

Көмөкчү технологияларга маани берүү

Маани кошуу үчүн түстү колдонуу визуалдык көрсөткүчтү гана камсыз кылат, ал жардамчы технологиялардын колдонуучуларына – мисалы, экранды окугучтарга жеткирилбейт. Түс менен белгиленген маалымат мазмундун өзүнөн даана көрүнүп турушун камсыз кылыңыз (контексттик түстөр текстте/белгилөөдө мурунтан эле бар болгон маанини бекемдөө үчүн гана колдонулат) же .sr-onlyкласс менен жашырылган кошумча текст сыяктуу альтернативалуу каражаттар аркылуу камтылган. .

Контексттик фон

Тексттин контексттик түс класстарына окшоп, элементтин фонун каалаган контексттик класска оңой эле коюңуз. Анкер компоненттери, текст класстары сыяктуу эле, курсорду көздөй караңгылайт.

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>

Конкреттүүлүк менен мамиле кылуу

Кээде башка селектордун өзгөчөлүгүнөн улам контексттик фон класстары колдонулушу мүмкүн эмес. <div>Кээ бир учурларда, сиздин элементиңиздин мазмунун класс менен ороп коюу жетиштүү .

Көмөкчү технологияларга маани берүү

Контексттик түстөрдөгүдөй эле , түс аркылуу берилген ар кандай маани да таза презентация эмес форматта берилгенин текшериңиз.

Жабуу сөлөкөтү

Модаль жана эскертүүлөр сыяктуу мазмунду четке кагуу үчүн жалпы жабуу сөлөкөтүн колдонуңуз.

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

Carets

Ашылма функцияларды жана багытты көрсөтүү үчүн кареткаларды колдонуңуз. Демейки каретка ачылуучу менюларда автоматтык түрдө тескери болорун эске алыңыз .

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

Тез сүзүү

Класс менен элементти солго же оңго сүзүү. !importantконкреттүүлүк маселелерин болтурбоо үчүн киргизилген. Класстар аралашма катары да колдонулушу мүмкүн.

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

Борбордук мазмун блоктору

элементти коюу display: blockжана аркылуу ортого салуу margin. Миксин жана класс катары жеткиликтүү.

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

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

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

Clearfix

Аталык элементкеfloat кошуу менен сдерди оңой тазалаңыз . Николас Галлахер тарабынан таанылган микро тазалоону колдонот . Миксин катары да колдонсо болот..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();
}

Мазмунду көрсөтүү жана жашыруу

Элементти жана класстарды колдонуу менен көрсөтүүгө же жашырууга ( анын ичинде экранды окуу үчүн ) мажбурлаңыз. Бул класстар спецификалык конфликттерди болтурбоо үчүн колдонушат, тез калкып чыгуулар сыяктуу . Алар блок деңгээлин которуу үчүн гана жеткиликтүү. Алар аралашма катары да колдонсо болот..show.hidden!important

.hideжеткиликтүү, бирок ал дайыма эле экранды окугучтарга таасир эте бербейт жана v3.0.1ден баштап эскирген. .hiddenАнын ордуна же колдонуңуз .sr-only.

Андан тышкары, .invisibleэлементтин көрүнүшүн гана которуштуруу үчүн колдонулушу мүмкүн, башкача displayайтканда, ал өзгөртүлбөйт жана элемент дагы эле документтин агымына таасир этиши мүмкүн.

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

Экранды окугуч жана клавиатура багыттоо мазмуну

Элементти экранды окугучтардан башка бардык түзмөктөргө жашырыңыз .sr-only. Элемент фокусталганда (мисалы, клавиатурада гана колдонуучу тарабынан) кайра көрсөтүү үчүн .sr-onlyменен бириктириңиз . Жеткиликтүүлүктүн эң мыкты тажрыйбаларын аткаруу.sr-only-focusable үчүн зарыл . Микс катары да колдонсо болот.

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

Сүрөт алмаштыруу

.text-hideЭлементтин тексттик мазмунун фон сүрөтү менен алмаштырууга жардам берүү үчүн классты же миксинди колдонуңуз.

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

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

Тезирээк мобилдик ыңгайлуу иштеп чыгуу үчүн, медиа сурам аркылуу түзмөк боюнча мазмунду көрсөтүү жана жашыруу үчүн бул пайдалуу класстарды колдонуңуз. Басылып чыкканда мазмунду которуштуруу үчүн пайдалуу класстар да камтылган.

Аларды чектелген негизде колдонууга аракет кылыңыз жана бир эле сайттын такыр башка версияларын түзүүдөн качыңыз. Анын ордуна, аларды ар бир түзмөктүн презентациясын толуктоо үчүн колдонуңуз.

Жеткиликтүү класстар

Мазмунду көрүү портунун үзгүлтүккө учурашы үчүн которуштуруу үчүн жеткиликтүү класстардын жалгыз же айкалышын колдонуңуз.

	Кошумча кичинекей түзмөктөрТелефондор (<768px)	Чакан түзмөктөрПланшеттер (≥768px)	Орто түзмөктөрИш такталары (≥992px)	Чоң аппараттарИш такталары (≥1200px)
`.visible-xs-*`	Көрүнүүчү	Жашырылган	Жашырылган	Жашырылган
`.visible-sm-*`	Жашырылган	Көрүнүүчү	Жашырылган	Жашырылган
`.visible-md-*`	Жашырылган	Жашырылган	Көрүнүүчү	Жашырылган
`.visible-lg-*`	Жашырылган	Жашырылган	Жашырылган	Көрүнүүчү
`.hidden-xs`	Жашырылган	Көрүнүүчү	Көрүнүүчү	Көрүнүүчү
`.hidden-sm`	Көрүнүүчү	Жашырылган	Көрүнүүчү	Көрүнүүчү
`.hidden-md`	Көрүнүүчү	Көрүнүүчү	Жашырылган	Көрүнүүчү
`.hidden-lg`	Көрүнүүчү	Көрүнүүчү	Көрүнүүчү	Жашырылган

v3.2.0 боюнча, .visible-*-*ар бир үзүү чекити үчүн класстар үч вариацияда болот, displayтөмөндө көрсөтүлгөн ар бир CSS касиетинин мааниси үчүн бирден.

Класстар тобу	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Ошентип, кошумча кичинекей ( xs) экрандар үчүн, мисалы, жеткиликтүү .visible-*-*класстар: .visible-xs-block, .visible-xs-inline, жана .visible-xs-inline-block.

.visible-xs, .visible-sm, .visible-md, жана класстары .visible-lgда бар, бирок v3.2.0 боюнча эскирген . Алар болжол менен -ге эквиваленттүү , бирок -байланыштуу элементтерди .visible-*-blockкоторуу үчүн кошумча өзгөчө учурларды кошпогондо .<table>

Класстарды басып чыгаруу

Кадимки жооп берүүчү класстарга окшоп, аларды басып чыгаруу үчүн мазмунду которуштуруу үчүн колдонуңуз.

Класстар	Браузер	Басып чыгаруу
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Жашырылган	Көрүнүүчү
`.hidden-print`	Көрүнүүчү	Жашырылган

Класс .visible-printдагы бар, бирок v3.2.0 боюнча эскирген. Бул болжолдуу түрдө -ге барабар, - байланыштуу элементтер .visible-print-blockүчүн кошумча өзгөчө учурларды кошпогондо .<table>

Сыноо иштери

Серепчиңиздин өлчөмүн өзгөртүңүз же жооп берүүчү утилита класстарын сынап көрүү үчүн башка түзмөктөргө жүктөңүз.

Төмөнкүдө көрүнөт...

Жашыл белгилер элемент учурдагы көрүү терезеңизде көрүнүп турганын билдирет.

Өтө кичинекей ✔ x-small'да көрүнөт

Small ✔ Кичинекейде көрүнөт

Орто ✔ Ортодо көрүнүп турат

Чоң ✔ Чоңунан көрүнүп турат

Кошумча кичинекей жана кичинекей ✔ x-кичине жана кичинеде көрүнөт

Орто жана чоң ✔ Орто жана чоң өлчөмдө көрүнөт

Кошумча чакан жана орто ✔ x-кичи жана ортодо көрүнөт

Кичине жана чоң ✔ Кичине жана чоңго көрүнүп турат

Кошумча кичинекей жана чоң ✔ x-кичине жана чоңу көрүнүп турат

Чакан жана орто ✔ Чакан жана ортодо көрүнөт

Жашырылган...

Бул жерде, жашыл белгилер, ошондой эле элемент учурдагы көрүү терезеңизде жашырылганын көрсөтөт.

Өтө кичинекей ✔ x-smallда жашырылган

Small ✔ Кичинекейге жашырылган

Орто ✔ Ортодо жашырылган

Чоң ✔ Чоңуна жашырылган

Кошумча кичинекей жана кичинекей ✔ x-кичине жана кичинеге жашырылган

Орто жана чоң ✔ Орто жана чоңдордо жашырылган

Кошумча чакан жана орто ✔ x-кичине жана ортодо жашырылган

Кичине жана чоң ✔ Кичине жана чоңго жашырылган

Кошумча кичинекей жана чоң ✔ x-кичи жана чоңу боюнча жашырылган

Чакан жана орто ✔ Чакан жана ортодо жашырылган

Bootstrap'тин CSS'и Less'те курулган, өзгөрмөлөр, миксиндер жана CSS компиляциясы үчүн функциялар сыяктуу кошумча функциялары бар препроцессор. Биздин компиляцияланган CSS файлдарынын ордуна Less булак файлдарын колдонууну каалагандар биз алкакта колдонгон көптөгөн өзгөрмөлөрдү жана аралашмаларды колдоно алышат.

Тор өзгөрмөлөрү жана аралашмалар Тор системасы бөлүмүндө камтылган .

Bootstrap компиляциясы

Bootstrap кеминде эки жол менен колдонулушу мүмкүн: компиляцияланган CSS же булак Less файлдары менен. Less файлдарын компиляциялоо үчүн Баштоо бөлүмүнө кайрылыңыз , керектүү буйруктарды иштетүү үчүн иштеп чыгуу чөйрөңүздү кантип орнотуу керектиги үчүн

Үчүнчү тараптын компиляция куралдары Bootstrap менен иштеши мүмкүн, бирок алар биздин негизги команда тарабынан колдоого алынбайт.

Өзгөрмөлөр

Өзгөрмөлөр бүтүндөй долбоордо түстөр, аралыктар же шрифт стектери сыяктуу кеңири колдонулган баалуулуктарды борборлоштуруу жана бөлүшүү жолу катары колдонулат. Толук бөлүштүрүү үчүн , Ыңгайлаштыргычты караңыз .

Түстөр

Эки түс схемасын оңой колдонуңуз: боз түстүү жана семантикалык. Боз түстөр кара түстүн кеңири колдонулган түстөрүнө тез жетүүнү камсыз кылат, ал эми семантикалык мааниге мазмундуу контексттик баалуулуктарга дайындалган ар кандай түстөрдү камтыйт.

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

Бул түс өзгөрмөлөрүнүн каалаганын ошол бойдон колдонуңуз же аларды долбооруңуз үчүн маанилүүраак өзгөрмөлөргө кайра дайындаңыз.

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

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

Scaffolding

Сайтыңыздын скелетинин негизги элементтерин тез ыңгайлаштыруу үчүн бир нече өзгөрмөлөр.

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

Шилтемелер

Шилтемелериңизди бир гана маани менен туура түс менен оңой стилдеңиз.

// 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-colorбул функция Lessтин дагы бир укмуштуу куралын автоматтык түрдө туура ачуучу түстү жаратат. darkenСиз , lighten, saturate, жана колдоно аласыз desaturate.

Типография

Бир нече тез өзгөрмөлөр менен шрифтиңизди, тексттин өлчөмүн, алдыңкы жана башкаларды оңой орнотуңуз. Bootstrap аларды оңой типографиялык аралашмаларды камсыз кылуу үчүн колдонот.

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

Иконалар

Сиздин иконаларыңыздын жайгашкан жерин жана файл атын ыңгайлаштыруу үчүн эки тез өзгөрмө.

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

Компоненттер

Bootstrap ичиндеги компоненттер жалпы маанилерди орнотуу үчүн кээ бир демейки өзгөрмөлөрдү колдонушат. Бул жерде көбүнчө колдонулган.

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

Сатуучу аралашмалар

Сатуучу миксиндер - бул сиздин компиляцияланган CSS'иңизге бардык тиешелүү сатуучу префикстерин кошуу менен бир нече браузерлерди колдоого жардам берүү үчүн аралашмалар.

Коробканын өлчөмү

Компоненттериңиздин куту моделин бир аралаштыруу менен баштапкы абалга келтириңиз. Контекст үчүн Mozilla бул пайдалуу макаласын караңыз .

Миксин v3.2.0 версиясында эскирген, Autoprefixer киргизилген. Артка шайкештикти сактоо үчүн Bootstrap миксинди Bootstrap v4 чейин колдонууну улантат.

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

Тегеректелген бурчтар

Бүгүнкү күндө бардык заманбап браузерлер префикссиз border-radiusмүлктү колдойт. Ошентип, эч кандай .border-radius()микс жок, бирок Bootstrap объекттин белгилүү бир тарабындагы эки бурчун тез тегеректөө үчүн жарлыктарды камтыйт.

.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-shadowЭгерде сиздин максаттуу аудиторияңыз эң акыркы жана эң мыкты браузерлерди жана түзмөктөрдү колдонуп жатса, мүлктү өз алдынча колдонууну унутпаңыз . Эгер сизге эски Android (v4 чейин) жана iOS түзмөктөрүн (iOS 5ке чейинки) колдоо керек болсо, талап кылынган префиксти алуу үчүн эскирген миксинди колдонуңуз .-webkit

Bootstrap стандарттык касиетти колдобогон эскирген платформаларды расмий түрдө колдоого албагандыктан, миксин v3.1.0 боюнча эскирген. Артка шайкештикти сактоо үчүн Bootstrap миксинди Bootstrap v4 чейин колдонууну улантат.

rgba()Фон менен мүмкүн болушунча кемчиликсиз айкалышкандыктан, кутуча көлөкөлөрүңүздө түстөрдү колдонууну унутпаңыз .

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

Өткөөлдөр

Ийкемдүүлүк үчүн бир нече аралашмалар. Бардык өткөөл маалыматты бирөө менен коюңуз же керек болсо өзүнчө кечиктирүүнү жана узактыгын көрсөтүңүз.

Миксиндер v3.2.0 жана Autoprefixer киргизүү менен эскирди. Артка шайкештикти сактоо үчүн, Bootstrap Bootstrap v4 чейин микстерди ички колдонууну улантат.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Трансформациялар

Кандайдыр бир объектти айлантыңыз, масштабыңыз, которуңуз (жылдырыңыз) же кыйгачлаңыз.

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

Анимациялар

CSS3тин бардык анимация касиеттерин бир декларацияда жана жеке касиеттер үчүн башка миксиндер колдонуу үчүн бирдиктүү миксин.

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

Тунук эмес

Бардык браузерлер үчүн тунуктукту орнотуңуз жана filterIE8 үчүн кайтарымдуулукту камсыз кылыңыз.

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

Толтуруучу текст

Ар бир талаада форманы башкаруу үчүн контекстти камсыз кылыңыз.

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

Мамычалар

Бир элементтин ичинде CSS аркылуу мамычаларды жаратыңыз.

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

Градиенттер

Каалаган эки түстү фон градиентине оңой айландырыңыз. Өркүндөтүлүп, багытты орнотуңуз, үч түстү колдонуңуз же радиалдык градиентти колдонуңуз. Бир миксин менен сизге керектүү бардык префикстүү синтаксистерди аласыз.

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

Сиз ошондой эле стандарттуу эки түстүү, сызыктуу градиенттин бурчун белгилей аласыз:

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

Эгер сизге чач тарач стилиндеги градиент керек болсо, бул да оңой. Жөн гана бир түстү көрсөтсөңүз, биз тунук ак тилкени каптайбыз.

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

Анын ордуна үч түстү колдонуңуз. Биринчи түстү, экинчи түстү, экинчи түстүн түсүн токтотууну (25% сыяктуу пайыздык маанини) жана үчүнчү түстү ушул аралашмалар менен коюңуз:

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

Көңүл бургула! Эгер сиз градиентти алып салышыңыз керек болсо, filterсиз кошкон бардык IE-спецификалык файлдарды алып салууну унутпаңыз. Сиз муну менен .reset-filter()бирге миксинди колдонсоңуз болот background-image: none;.

Пайдалуу аралашмалар

Пайдалуу миксиндер белгилүү бир максатка же тапшырмага жетүү үчүн башка байланышы жок CSS касиеттерин бириктирген аралашмалар.

Clearfix

class="clearfix"Кандайдыр бир элементке кошууну унутуп , анын ордуна .clearfix()керектүү жерде миксинди кошуңуз. Николас Галлахердин микро тазалоону колдонот .

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

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

Горизонталдык борборлоштуруу

Каалаган элементти анын ата-энесинин ичинде тез ортого салыңыз. Талап кылат widthже max-widthорнотулат.

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

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

Өлчөмдү аныктоочу жардамчылар

Объекттин өлчөмдөрүн оңой көрсөтүңүз.

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

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

Өлчөмдөрү өзгөрүлүүчү текст аймактары

Каалаган текст аймагы же башка элемент үчүн өлчөмүн өзгөртүү параметрлерин оңой конфигурациялаңыз. Демейки серепчинин жүрүм-турумуна ( both).

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

Текстти кыскартуу

Текстти эллипс менен бир микс менен оңой кыскартыңыз. Элементтин болушун blockже inline-blockдеңгээлин талап кылат.

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

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

Ретинанын сүрөттөрү

Эки сүрөт жолун жана @1x сүрөттүн өлчөмдөрүн көрсөтүңүз, ошондо Bootstrap @2x медиа сурамын камсыздайт. Эгер сизде кызмат кыла турган көптөгөн сүрөттөрүңүз болсо, бир медиа суроосуна кол менен торчо сүрөтүңүздү CSS жазууну карап көрүңүз.

.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ке курулганына карабастан, анын расмий Sass порту да бар . Биз аны өзүнчө GitHub репозиторийинде сактайбыз жана жаңыртууларды конверсия скрипти менен иштетебиз.

Эмне камтылган

Sass портунда өзүнчө репо бар жана бир аз башкача аудиторияга кызмат кылгандыктан, долбоордун мазмуну негизги Bootstrap долбоорунан абдан айырмаланат. Бул Sass портунун мүмкүн болушунча көп Sass негизиндеги системалар менен шайкеш келишин камсыздайт.

Жол	Description
`lib/`	Ruby асыл коду (Sass конфигурациясы, Rails жана Compass интеграциясы)
`tasks/`	Конвертер скрипттери (жогорку агым боюнча Less Sassга айлануу)
`test/`	Компиляция тесттери
`templates/`	Компас пакетинин манифести
`vendor/assets/`	Sass, JavaScript жана шрифт файлдары
`Rakefile`	Тырмоо жана айландыруу сыяктуу ички милдеттер

Бул файлдарды иш жүзүндө көрүү үчүн Sass портунун GitHub репозиторийине баш багыңыз .

Орнотуу

Bootstrap for Sass кантип орнотуу жана колдонуу жөнүндө маалымат алуу үчүн GitHub репозиторийинин Readme бөлүмүнө кайрылыңыз . Бул эң акыркы булак жана Rails, Compass жана стандарттуу Sass долбоорлору менен колдонуу үчүн маалыматты камтыйт.

Sass үчүн жүктөөчү

CSS

Обзор

HTML5 документ түрү

Биринчи мобилдик

Типография жана шилтемелер

Normalize.css

Контейнерлер

Тор системасы

Киришүү

Медиа сурамдары

Тор параметрлери

Мисал: Үймө-горизонталдуу

Мисал: Суюктук контейнери

Мисал: Мобилдик жана рабочий

Мисал: Мобилдик, планшет, иш такта

Мисал: Мамычаларды таңуу

Жооптуу тилкелер баштапкы абалга келтирилет

Мамычаларды алмаштыруу

Уюшкан мамычалар

Мамычаларды иреттөө

Азыраак аралашмалар жана өзгөрмөлөр

Өзгөрмөлөр

Миксиндер

Мисал колдонуу

Типография

рубрикалар

h1. Bootstrap аталышы

h2. Bootstrap аталышы

h3. Bootstrap аталышы

h4. Bootstrap аталышы

h5. Bootstrap аталышы

h6. Bootstrap аталышы

h1. Bootstrap аталышы Кошумча текст

h2. Bootstrap аталышы Кошумча текст

h3. Bootstrap аталышы Кошумча текст

h4. Bootstrap аталышы Кошумча текст

h5. Bootstrap аталышы Кошумча текст

h6. Bootstrap аталышы Кошумча текст

Дененин көчүрмөсү

Коргоочу корпустун көчүрмөсү

Less менен курулган

Inline текст элементтери

Белгиленген текст

Жок кылынган текст

Чийилген текст

Киргизилген текст

Асты сызылган текст

Чакан текст

Bold

курсив

Альтернативдик элементтер

Тегиздөө класстары

Трансформация класстары

Аббревиатуралар

Негизги аббревиатура

Инициализм

Даректер

Blockquotes

Демейки блокировка

Блокировка параметрлери

Булакты атоо

Альтернативдик дисплейлер

Тизмелер

Тартипсиз

Заказ берди

Unstyled

Inline

Description

Горизонталдуу сүрөттөмө

Автоматтык кыскартуу

Code

Inline

Колдонуучунун киргизүүсү

Негизги блок

Өзгөрмөлөр

Үлгү чыгаруу

Таблицалар

Негизги мисал

Чаардуу катарлар

Браузердик шайкештик

Демо `:focus`абалы

Шилтеменин иштеши жөнүндө эскертүү`<a>`

`.sr-only`Жашыруун энбелгилери бар кошумча иконалар