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

HTML5 құжат түрі

Bootstrap белгілі бір HTML элементтерін және HTML5 құжат түрін пайдалануды қажет ететін 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. .rowБұл толтыру бірінші және соңғы бағанға арналған жолдарда s бойынша теріс маржа арқылы ауыстырылады .
Теріс маржа төменде келтірілген мысалдардың неліктен артта қалуы болып табылады. Бұл тор бағандарындағы мазмұн тордан тыс мазмұнмен қатарласуы үшін.
Тор бағандары кеңейткіңіз келетін он екі қолжетімді баған санын көрсету арқылы жасалады. Мысалы, үш бірдей баған үшеуін пайдаланады .col-xs-4.
Бір жолға 12-ден астам бағандар орналастырылса, қосымша бағандардың әрбір тобы бір бірлік ретінде жаңа жолға оралады.
Тор сыныптары экран ені тоқтау нүктесі өлшемдерінен үлкен немесе оған тең құрылғыларға қолданылады және кішірек құрылғыларға бағытталған тор сыныптарын қайта анықтайды. Сондықтан, мысалы, кез келген .col-md-*классты элементке қолдану оның орташа құрылғылардағы сәндеуіне ғана әсер етіп қоймайды, сонымен қатар .col-lg-*сынып жоқ болса, үлкен құрылғыларда да әсер етеді.

Осы принциптерді кодыңызға қолдану мысалдарын қараңыз.

БАҚ сұраулары

Тор жүйеміздегі негізгі тоқтау нүктелерін жасау үшін біз кіші файлдардағы келесі медиа сұрауларды пайдаланамыз.

/* 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)
Ұялы	Иә
Офсеттер	Иә
Бағанға тапсырыс беру	Иә

Мысал: қабаттасқан-көлденең

Тор сыныптарының жалғыз жинағын пайдалана отырып .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-бағандық кең div жаңа жолға бір іргелес бірлік ретінде оралады.

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

Жауап беретін баған қалпына келтірілді

Төрт деңгейлі торлар бар болса, сіз белгілі бір тоқтау нүктелерінде бағандарыңыз дұрыс тазаланбайтын мәселелерге тап боласыз, себебі біреуі екіншісінен биік. .clearfixМұны түзету үшін a және біздің жауап беретін утилиталар сыныптарының тіркесімін пайдаланыңыз .

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

Арықтарды алып тастаңыз

.row-no-guttersЖолдан және сыныппен бірге бағандардан ағындарды алып тастаңыз .

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

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

.col-xs-6

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Есеп айырысу бағандары

Класстарды пайдаланып бағандарды оңға жылжытыңыз .col-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және .col-sm-*бағандар жинағын қосыңыз .col-sm-*. Кірістірілген жолдар 12 немесе одан аз қосылатын бағандар жинағын қамтуы керек (барлық 12 қолжетімді бағанды пайдалану қажет емес).

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 тақырыбы	Жартылай қалың 36px
h2. Bootstrap тақырыбы	Жартылай қалың 30px
h3. Bootstrap тақырыбы	Жартылай қалың 24px
h4. Bootstrap тақырыбы	Жартылай қалың 18px
h5. Bootstrap тақырыбы	Жартылай қалың 14px
h6. Bootstrap тақырыбы	Жартылай қалың 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 болып табылады . Бұл және барлық абзацтарға қолданылады. Сонымен қатар, (параграфтар) жарты жолдың есептелген биіктігінің төменгі жиегін алады (әдепкі бойынша 10 пиксель).<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus. Көлік құралын пайдалану мүмкін емес.

Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Дүние моллис, est 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. Doec id elit non mi porta gravida және eget metus. Дүние моллис, est 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 : @font-size-baseжәне @line-height-base. Біріншісі - бүкіл қолданылатын негізгі қаріп өлшемі, екіншісі - негізгі жолдың биіктігі. Біз осы айнымалы мәндерді және кейбір қарапайым математиканы барлық түріміздің жиектерін, толтырғыштарын және жол биіктігін және т.б. жасау үшін қолданамыз. Оларды теңшеңіз және Bootstrap бейімделеді.

Кірістірілген мәтін элементтері

Белгіленген мәтін

Басқа контексте өзектілігіне байланысты мәтінді бөлектеу үшін <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>

Қалың

Қаріптің салмағы ауыр мәтін үзіндісін ерекшелеу үшін.

Мәтіннің келесі үзіндісі қалың мәтін түрінде берілген .

<strong>rendered as bold text</strong>

курсив

Мәтін үзіндісін курсивпен ерекшелеу үшін.

Мәтіннің келесі үзіндісі курсив мәтін ретінде көрсетіледі .

<em>rendered as italicized text</em>

Балама элементтер

HTML5 <b>- те қолдануға болады. Бұл қосымша маңыздылықсыз сөздерді немесе сөз тіркестерін ерекшелеуге арналған, ал көбінесе дауыс, техникалық терминдер және т.б.<i><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>

Қысқартулар

HTML тілінің стильдендірілген жүзеге асырылуы<abbr>Меңзердегі кеңейтілген нұсқаны көрсету үшін аббревиатуралар мен аббревиатураларға арналғанАтрибуттары бар аббревиатураларда 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>

Тырнақшалар

Құжатта басқа көзден алынған мазмұн блоктарын цитаталау үшін.

Әдепкі блок дәйексөз

<blockquote>Кез келген HTML -ді дәйексөз ретінде орап алыңыз . Тікелей тырнақшалар үшін біз <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүтін санды орындаңыз.

<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 elit. Бүтін санды орындаңыз.

Source Title бойынша танымал біреу

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Баламалы дисплейлер

.blockquote-reverseОң жаққа тураланған мазмұнды блоктау үшін қосыңыз .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүтін санды орындаңыз.

Source Title бойынша танымал біреу

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

Тізімдер

Ретсіз

Тапсырыс анық маңызды емес элементтер тізімі.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Массадағы бүтін molestie lorem
Pretium nisl aliquet ішіндегі жеңілдету
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Іріңді сода
- Vestibulum laoreet porttitor sem
- Тіріссіз еркіндікке ие болыңыз
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Тапсырыс берілді

Тапсырыс анық маңызды болатын элементтер тізімі .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Массадағы бүтін molestie lorem
Pretium nisl aliquet ішіндегі жеңілдету
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Стильсіз

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Массадағы бүтін molestie lorem
Pretium nisl aliquet ішіндегі жеңілдету
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Іріңді сода
- Vestibulum laoreet porttitor sem
- Тіріссіз еркіндікке ие болыңыз
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Кезекте

Барлық тізім элементтерін display: inline-block;жеңіл толтырғышпен бір жолға орналастырыңыз.

Lorem ipsum
Phasellus iaculis
Жоқ

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

Сипаттама

Олармен байланысты сипаттамалары бар терминдер тізімі.

Сипаттама тізімдері: Сипаттама тізімі терминдерді анықтау үшін өте қолайлы.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Doec id elit non mi porta gravida және eget metus.
Малесуада порта: 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.; Doec id elit non mi porta gravida және eget metus.
Малесуада порта: 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. Тар көрініс порттарында олар әдепкі жинақталған орналасуға өзгереді.

Кезекте

Кодтың кірістірілген үзінділерін арқылы ораңыз <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-scrollable350 пиксель максимум биіктігін орнататын және у осінің айналдыру жолағын қамтамасыз ететін сыныпты қосымша қосуға болады.

Айнымалылар

Айнымалы мәндерді көрсету үшін <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	Джейкоб	Торнтон	@май
3	Ларри	құс	@twitter

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

Жолақты жолдар

.table-stripedішіндегі кез келген кесте жолына зебра жолағын қосу үшін пайдаланыңыз <tbody>.

Кросс-браузер үйлесімділігі

Жолақты кестелер CSS селекторы арқылы стильденеді :nth-child, ол Internet Explorer 8-де жоқ.

#	Аты	Тек	Пайдаланушы аты
1	белгі	Отто	@mdo
2	Джейкоб	Торнтон	@май
3	Ларри	құс	@twitter

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

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

.table-borderedКесте мен ұяшықтардың барлық жағындағы жиектер үшін қосыңыз .

#	Аты	Тек	Пайдаланушы аты
1	белгі	Отто	@mdo
2	Джейкоб	Торнтон	@май
3	Ларри	құс	@twitter

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

Жолдарды жылжытыңыз

.table-hoverішінде кесте жолдарындағы меңзер күйін қосу үшін Қосу <tbody>.

#	Аты	Тек	Пайдаланушы аты
1	белгі	Отто	@mdo
2	Джейкоб	Торнтон	@май
3	Ларри	құс	@twitter

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

Қысқартылған үстел

.table-condensedҰяшық толтырғышын жартысына кесу арқылы кестелерді ықшамдау үшін қосыңыз .

#	Аты	Тек	Пайдаланушы аты
1	белгі	Отто	@mdo
2	Джейкоб	Торнтон	@май
3	Ларри құс		@twitter

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

Мәтінмәндік сыныптар

Кесте жолдарын немесе жеке ұяшықтарды бояу үшін мәтінмәндік сыныптарды пайдаланыңыз.

Сынып	Сипаттама
`.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-responsiveЕні 768 пиксельден асатын кез келген нәрсені көргенде, сіз бұл кестелерде ешқандай айырмашылықты көрмейсіз.

Тік кесу/қию

Жауапты кестелер кестенің overflow-y: hiddenтөменгі немесе жоғарғы жиектерінен тыс кез келген мазмұнды кесіп тастайтын параметрін пайдаланады. Атап айтқанда, бұл ашылмалы мәзірлерді және басқа үшінші тарап виджеттерін кесіп тастауы мүмкін.

Firefox және өрістер жиындары

widthFirefox- та жауап беретін кестеге кедергі келтіретін кейбір ыңғайсыз өрістер жиынтығы бар. Мұны 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>

Пішін топтарын енгізу топтарымен араластырмаңыз

Пішін топтарын енгізу топтарымен тікелей араластырмаңыз . Оның орнына енгізу тобын пішін тобының ішіне кірістіріңіз.

Кірістірілген пішін

Солға тураланған және кірістірілген блокты басқару элементтері үшін пішінге қосыңыз .form-inline(ол болуы міндетті емес ). Бұл ені кемінде 768 пиксель болатын көру порттары ішіндегі пішіндерге ғана қатысты.<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-groupБұл әрекетті орындау s мәнін тор жолдары ретінде өзгертеді , сондықтан қажет емес .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>Кез келген мәтінге негізделген мәтінге дейін және/немесе кейін біріктірілген мәтінді немесе түймелерді қосу үшін енгізу тобының құрамдас бөлігін тексеріңіз .

Мәтіндік аумақ

Мәтіннің бірнеше жолын қолдайтын пішінді басқару. 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>

Кірістірілген құсбелгілер мен радиолар

Бір жолда пайда болатын басқару элементтері үшін құсбелгілер немесе радиолар қатарында .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>

Таңдайды

border-radiusКөптеген жергілікті таңдау мәзірлерінің, атап айтқанда Safari және Chrome-да сипаттар арқылы өзгертуге болмайтын дөңгелек бұрыштары бар екенін ескеріңіз .

<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төлсипатты a мәніне қосыңыз .<fieldset><fieldset>

сілтеме функциясы туралы ескерту`<a>`

Әдепкі бойынша, браузерлер a ішіндегі барлық жергілікті пішін басқару элементтерін ( <input>, <select>және элементтер) ажыратылған ретінде қарастырып, олардағы пернетақта мен тінтуірдің өзара әрекеттесуіне жол бермейді. Дегенмен, пішініңізде элементтер болса, оларға тек мәнер беріледі . Түймелердің өшірілген күйі туралы бөлімде (және әсіресе якорь элементтеріне арналған ішкі бөлімде) атап өтілгендей , бұл CSS сипаты әлі стандартталмаған және Opera 18 және одан төмен нұсқаларында немесе Internet Explorer 11 нұсқаларында толық қолдау көрсетілмеген және жеңіп алған. ' пернетақта пайдаланушыларына осы сілтемелерді фокустау немесе белсендіру мүмкіндігін болдырмаңыз. Қауіпсіз болу үшін мұндай сілтемелерді өшіру үшін теңшелетін JavaScript пайдаланыңыз.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Кросс-браузер үйлесімділігі

disabledBootstrap бұл мәнерлерді барлық браузерлерде қолданса да, Internet Explorer 11 және одан төмен нұсқалары <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 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>мәтінінің өзінде қосуға болады (келесі код мысалындағы жағдай), Глифонды қосуға.sr-only ( сыныпты пайдаланатын сәйкес балама мәтінмен - Glyphicon мысалдарын қараңыз ) немесе ұсыну арқылы қосымша анықтамалық мәтін блогы. Арнайы көмекші технологиялар үшін жарамсыз пішін басқару элементтеріне де 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>шарлау және шарлау тақтасының құрамдастарында элементтерге ғана қолдау көрсетіледі.

Түйме ретінде әрекет ететін сілтемелер

Элементтер <a>ағымдағы беттегі басқа құжатқа немесе бөлімге өтудің орнына, бет ішіндегі функцияларды іске қосатын түймелер ретінде әрекет ету үшін пайдаланылса, оларға сәйкес таңба да берілуі керек role="button".

Браузер арасындағы рендеринг

Ең жақсы тәжірибе ретінде мүмкіндігінше элементті пайдалануды ұсынамыз<button> браузерлер арасындағы сәйкестікті қамтамасыз ету үшін

Басқа нәрселермен қатар Firefox <30 қатесі бар , ол бізге -негізделген түймелерді орнатуға кедергі келтіреді line-height, <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 <button>s пайдалана аласыз (және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.

Идентификатордың идентификаторы жоқ.

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сыныппен жасырылған қосымша мәтін сияқты балама құралдар арқылы енгізілгеніне көз жеткізіңіз. .

Мәтінмәндік фон

Мәтінмәндік мәтін түсінің сыныптарына ұқсас кез келген контекстік сыныпқа элементтің фонын оңай орнатыңыз. Анкерлік құрамдас бөліктер мәтін сыныптары сияқты меңзерді жылжытқанда күңгірттенеді.

Идентификатордың идентификаторы жоқ.

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>

Кареткалар

Ашылмалы функциялар мен бағытты көрсету үшін кареткаларды пайдаланыңыз. Ашылмалы мәзірлерде әдепкі каретка автоматты түрде өзгеретінін ескеріңіз .

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

Түзету

Негізгі элементкеfloat қосу арқылы s оңай тазалаңыз . Николас Галлахер танымал еткен микро тазалауды пайдаланады. Миксин ретінде де қолдануға болады..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-*-*әрбір CSS сипат мәні үшін бір нұсқада келеді .display

Сыныптар тобы	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 форматында көрінеді

Кішкентай ✔ Кішкентайда көрінеді

Орташа ✔ Орташада көрінеді

Үлкен ✔ Үлкен өлшемде көрінеді

Өте кішкентай және кішкентай ✔ x-small және small-да көрінеді

Орта және үлкен ✔ Орташа және үлкен өлшемде көрінеді

Қосымша шағын және орта ✔ x-кіші және орташа өлшемдерде көрінеді

Кіші және үлкен ✔ Кіші және үлкен көрінеді

Өте кішкентай және үлкен ✔ x-кіші және үлкен өлшемде көрінеді

Шағын және орта ✔ Шағын және ортада көрінеді

Жасырылған...

Мұнда жасыл құсбелгілер элементтің ағымдағы қарау терезесінде жасырылғанын да көрсетеді.

Өте кішкентай ✔ x-small ішінде жасырылған

Кішкентай ✔ Кішкенеге жасырылған

Орташа ✔ Орташа деңгейде жасырылған

Үлкен ✔ Үлкенге жасырылған

Өте кішкентай және кішкентай ✔ x-small және small-да жасырылған

Орта және үлкен ✔ Орташа және үлкен көлемде жасырылған

Қосымша шағын және орта ✔ x-кіші және орташа деңгейде жасырылған

Кіші және үлкен ✔ Кішкене және үлкенге жасырылады

Өте кішкентай және үлкен ✔ x-кіші және үлкенге жасырылған

Шағын және орта ✔ Шағын және ортада жасырылған

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

Тордың айнымалы мәндері мен араластырғыштары Тор жүйесі бөлімінде қамтылған .

Bootstrap құрастыру

Bootstrap кем дегенде екі жолмен пайдаланылуы мүмкін: құрастырылған CSS немесе бастапқы 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
@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 нұсқасы бойынша ескірген . Кері үйлесімділікті сақтау үшін 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 нұсқасы бойынша автопрефиксті енгізумен ескірген . Кері үйлесімділікті сақтау үшін 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 сипаттарын біріктіретін араластырғыштар.

Түзету

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 негізіндегі жүйелермен үйлесімді болуын қамтамасыз етеді.

Жол	Сипаттама
`lib/`	Ruby Gem коды (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 тақырыбы Қосымша мәтін

Негізгі көшірме

Негізгі корпустың көшірмесі

Аз салынған

Кірістірілген мәтін элементтері

Белгіленген мәтін

Жойылған мәтін

Сызық сызылған мәтін

Енгізілген мәтін

Асты сызылған мәтін

Шағын мәтін

Қалың

курсив

Балама элементтер

Теңестіру кластары

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

Қысқартулар

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

Инициализм

Мекенжайлар

Тырнақшалар

Әдепкі блок дәйексөз

Блоктау опциялары

Дереккөзді атау

Баламалы дисплейлер

Тізімдер

Ретсіз

Тапсырыс берілді

Стильсіз

Кезекте

Сипаттама

Көлденең сипаттама

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

Код

Кезекте

Пайдаланушы енгізуі

Негізгі блок

Айнымалылар

Шығару үлгісі

Кестелер

Негізгі мысал

Жолақты жолдар

Демо `:focus`күйі

сілтеме функциясы туралы ескерту`<a>`

Жасырын `.sr-only`белгілері бар қосымша белгішелер