Научете ниската информация за ключовите части от инфраструктурата на Bootstrap, включително нашия подход към по-добро, по-бързо и по-силно уеб развитие.

HTML5 тип документ

Bootstrap използва определени HTML елементи и CSS свойства, които изискват използването на HTML5 doctype. Включете го в началото на всички ваши проекти.

<!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към мета тага на viewport. Това деактивира мащабирането, което означава, че потребителите могат само да превъртат и води до това вашият сайт да се чувства малко повече като родно приложение. Като цяло не препоръчваме това на всеки сайт, така че бъдете внимателни!

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

Типография и връзки

Bootstrap задава основен глобален дисплей, типография и стилове на връзки. По-конкретно ние:

Задайте background-color: #fff;наbody
Използвайте атрибутите @font-family-base, @font-size-base, и @line-height-baseкато наша типографска основа
Задайте глобалния цвят на връзката чрез @link-colorи приложете подчертаване на връзката само върху:hover

Тези стилове могат да бъдат намерени в scaffolding.less.

Normalize.css

За подобрено рендиране в различни браузъри използваме Normalize.css , проект на Николас Галахър и Джонатан Нийл .

Контейнери

Bootstrap изисква съдържащ елемент, за да обвие съдържанието на сайта и да постави нашата мрежова система. Можете да изберете един от двата контейнера, които да използвате във вашите проекти. Обърнете внимание, че поради paddingи много други, нито един контейнер не е вложен.

Използвайте .containerза реагиращ контейнер с фиксирана ширина.

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

Използвайте .container-fluidза контейнер с пълна ширина, обхващащ цялата ширина на прозореца за изглед.

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

Bootstrap включва бърза, мобилна първа флуидна мрежова система, която подходящо мащабира до 12 колони с увеличаване на размера на устройството или прозореца за изглед. Той включва предварително дефинирани класове за лесни опции за оформление, както и мощни миксини за генериране на повече семантични оформления .

Въведение

Мрежовите системи се използват за създаване на оформления на страници чрез поредица от редове и колони, които съдържат вашето съдържание. Ето как работи мрежовата система Bootstrap:

Редовете трябва да бъдат поставени в .container(фиксирана ширина) или .container-fluid(пълна ширина) за правилно подравняване и подплата.
Използвайте редове, за да създадете хоризонтални групи от колони.
Съдържанието трябва да бъде поставено в колони и само колони могат да бъдат непосредствени деца на редове.
Предварително дефинираните класове на мрежата като .rowи .col-xs-4са достъпни за бързо създаване на оформления на мрежата. По-малко миксини също могат да се използват за повече семантични оформления.
Колоните създават улуци (празнини между съдържанието на колоните) чрез padding. Тази подложка е изместена в редове за първата и последната колона чрез отрицателен марж на .rows.
Отрицателният марж е причината примерите по-долу да са отстъпени. Това е така, че съдържанието в колоните на мрежата е подредено със съдържание извън мрежата.
Колоните на мрежата се създават чрез указване на броя от дванадесет налични колони, които искате да обхванете. Например три еднакви колони биха използвали три .col-xs-4.
Ако повече от 12 колони са поставени в рамките на един ред, всяка група от допълнителни колони, като една единица, ще се пренесе на нов ред.
Класовете на мрежата се прилагат за устройства с ширина на екрана, по-голяма или равна на размерите на точката на прекъсване, и заместват класовете на мрежата, насочени към по-малки устройства. Следователно, например прилагането на който и да е .col-md-*клас към елемент не само ще повлияе на неговия стил на средни устройства, но и на големи устройства, ако .col-lg-*класът не присъства.

Вижте примерите за прилагане на тези принципи към вашия код.

Медийни запитвания

Ние използваме следните медийни заявки в нашите Less файлове, за да създадем ключовите точки на прекъсване в нашата мрежова система.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Понякога разширяваме тези медийни заявки, за да включим max-widthза ограничаване на CSS до по-тесен набор от устройства.

@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)
Поведение на мрежата	Хоризонтално през цялото време	Свито за начало, хоризонтално над точките на прекъсване
Ширина на контейнера	Няма (автоматично)	750 пиксела	970 пиксела	1170 пиксела
Префикс на класа	`.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, този div с ширина на 4 колони се обвива на нов ред като една съседна единица.

.col-xs-6
Следващите колони продължават по новия ред.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Отзивчивата колона се нулира

С наличните четири нива на мрежи със сигурност ще се натъкнете на проблеми, при които в определени точки на прекъсване вашите колони не се изчистват съвсем правилно, тъй като едната е по-висока от другата. За да коригирате това, използвайте комбинация от a .clearfixи нашите отзивчиви полезни класове .

.col-xs-6 .col-sm-3
Преоразмерете прозореца за изглед или го проверете на телефона си за пример.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

В допълнение към изчистването на колони при реагиращи точки на прекъсване, може да се наложи да нулирате отмествания, натискания или издърпвания . Вижте това в действие в примера на мрежата .

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

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

Изместване на колони

Преместете колони надясно с помощта на .col-md-offset-*класове. Тези класове увеличават лявото поле на колона по *колона. Например, .col-md-offset-4преминава .col-md-4през четири колони.

.col-md-4

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

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Можете също така да замените отместванията от по-ниските нива на мрежата с .col-*-offset-0класове.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Вложени колони

За да вложите съдържанието си в мрежата по подразбиране, добавете нова .rowи набор от .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-size14px , с 1,428 . Това се прилага към и всички параграфи. Освен това (параграфи) получават долно поле от половината от тяхната изчислена височина на реда (10px по подразбиране).line-height<body><p>

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

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Меценат sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Основно копие

Изпъкнете абзац, като добавите .lead.

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

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

Създаден с по-малко

Типографската скала се основава на две Less променливи във variables.less : @font-size-baseи @line-height-base. Първият е основният размер на шрифта, използван навсякъде, а вторият е основната височина на реда. Ние използваме тези променливи и някои прости математически изчисления, за да създадем полетата, подложките и височините на редовете на всички наши типове и други. Персонализирайте ги и Bootstrap се адаптира.

Вградени текстови елементи

Маркиран текст

За подчертаване на набор от текст поради неговата уместност в друг контекст, използвайте <mark>етикета.

Можете да използвате маркера 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вместо any <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>

Алтернативни елементи

Чувствайте се свободни да използвате <b>и <i>в HTML5. <b>има за цел да подчертава думи или фрази, без да придава допълнителна важност, докато <i>е предимно за глас, технически термини и т.н.

Класове за подравняване

Лесно подравнявайте текст към компоненти с класове за подравняване на текст.

Ляво подравнен текст.

Централно подравнен текст.

Дясно подравнен текст.

Подравнен текст.

Без пренасяне на текст.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Класове по трансформация

Трансформирайте текст в компоненти с класове за изписване на главни букви.

Текст с малки букви.

Текст с главни букви.

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

Съкращения

Стилизирано внедряване на 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. Цяло число posuere erat a ante.

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

Опции за блокови цитати

Промени в стила и съдържанието за прости вариации на стандарт <blockquote>.

Наименуване на източник

Добавете <footer>за идентифициране на източника. Увийте името на изходната работа в <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цяло число posuere erat a ante.

Някой известен в заглавието на източника

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

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

Добавете .blockquote-reverseза цитат с дясно подравнено съдържание.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цяло число posuere erat a ante.

Някой известен в заглавието на източника

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

Списъци

Неподредени

Списък с елементи, в които редът няма изрично значение.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Поръчан

Списък с елементи, в които редът има изрично значение.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in 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
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

В редица

Поставете всички елементи от списъка на един ред с display: inline-block;лека подложка.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Описание

Списък с термини със свързаните с тях описания.

Списъци с описания: Списъкът с описания е идеален за дефиниране на термини.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Малесуада порта: Etiam porta sem malesuada magna mollis euismod.

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

Хоризонтално описание

Подредете термини и описания <dl>един до друг. Започва подредено като <dl>s по подразбиране, но когато навигационната лента се разшири, това се прави и с тези.

Списъци с описания: Списъкът с описания е идеален за дефиниране на термини.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at 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-scrollableкласа, който ще зададе максимална височина от 350px и ще предостави лента за превъртане по оста y.

Променливи

За посочване на променливи използвайте <var>етикета.

y = m x + b

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

Примерен изход

За посочване на блокове примерен изход от програма използвайте <samp>етикета.

Този текст е предназначен да се третира като примерен резултат от компютърна програма.

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

Основен пример

За основен стил—лека подложка и само хоризонтални разделители—добавете основния клас .tableкъм всеки <table>. Може да изглежда супер излишно, но като се има предвид широкото използване на таблици за други добавки като календари и инструменти за избор на дата, ние избрахме да изолираме нашите персонализирани стилове на таблици.

Надпис на таблицата по избор.
#	Първо име	Фамилия	Потребителско име
1	Марк	Ото	@mdo
2	Джейкъб	Торнтън	@дебел
3	Лари	птицата	@туитър

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

Раирани редове

Използвайте .table-striped, за да добавите зебра към всеки ред на таблица в рамките на <tbody>.

Съвместимост между различни браузъри

Раираните таблици се стилизират чрез :nth-childCSS селектора, който не е наличен в Internet Explorer 8.

#	Първо име	Фамилия	Потребителско име
1	Марк	Ото	@mdo
2	Джейкъб	Торнтън	@дебел
3	Лари	птицата	@туитър

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

Маса с граници

Добавете .table-borderedза граници от всички страни на таблицата и клетките.

#	Първо име	Фамилия	Потребителско име
1	Марк	Ото	@mdo
2	Джейкъб	Торнтън	@дебел
3	Лари	птицата	@туитър

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

Задръжте редове

Добавете .table-hover, за да активирате състояние на задържане върху редове на таблица в рамките на <tbody>.

#	Първо име	Фамилия	Потребителско име
1	Марк	Ото	@mdo
2	Джейкъб	Торнтън	@дебел
3	Лари	птицата	@туитър

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

Съкратена таблица

Добавете .table-condensed, за да направите таблиците по-компактни, като намалите наполовина подложката на клетката.

#	Първо име	Фамилия	Потребителско име
1	Марк	Ото	@mdo
2	Джейкъб	Торнтън	@дебел
3	Птицата Лари		@туитър

<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класа.

Отзивчиви маси

Създайте адаптивни таблици, като обвиете всяка .table, .table-responsiveза да ги накарате да се превъртат хоризонтално на малки устройства (под 768px). Когато гледате на нещо, по-голямо от 768px, няма да видите разлика в тези таблици.

Вертикално изрязване/отрязване

Отзивчивите маси използват overflow-y: hidden, който изрязва всяко съдържание, което надхвърля долния или горния ръб на таблицата. По-специално, това може да отреже падащите менюта и други уиджети на трети страни.

Firefox и набори от полета

Firefox има някакъв неудобен стил на набор от полета, widthкойто пречи на отзивчивата таблица. Това не може да бъде отменено без специфичен за Firefox хак, който не предоставяме в Bootstrap:

@-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към вашия формуляр (който не трябва да бъде <form>) за ляво подравнени и вградени блокови контроли. Това се отнася само за формуляри в прозорци за изглед, които са с ширина най-малко 768px.

Може да изисква персонализирани ширини

Входовете и изборите са width: 100%;приложени по подразбиране в Bootstrap. В рамките на вградени формуляри ние нулираме това, width: auto;така че множество контроли да могат да се намират на един и същи ред. В зависимост от вашето оформление може да са необходими допълнителни персонализирани ширини.

Винаги добавяйте етикети

Екранните четци ще имат проблеми с вашите формуляри, ако не включите етикет за всеки вход. За тези вградени формуляри можете да скриете етикетите с помощта на .sr-onlyкласа. Има допълнителни алтернативни методи за предоставяне на етикет за помощни технологии, като aria-labelатрибута или aria-labelledby. titleАко нито един от тях не присъства, екранните четци могат да прибягнат до използването на placeholderатрибута, ако има такъв, но имайте предвид, че placeholderне се препоръчва използването на като заместител на други методи за етикетиране.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Хоризонтална форма

Използвайте предварително дефинираните мрежови класове на Bootstrap, за да подравните етикети и групи от контроли на формуляри в хоризонтално оформление чрез добавяне .form-horizontalкъм формуляра (което не е задължително да бъде <form>). Това променя .form-groups да се държи като редове от мрежата, така че няма нужда от .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Поддържани контроли

Примери за стандартни контроли на формуляр, поддържани в примерно оформление на формуляр.

Входове

Най-често срещаният контролен формуляр, текстови полета за въвеждане. Включва поддръжка за всички типове HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, и color.

Изисква се декларация за тип

Входящите данни ще бъдат напълно стилизирани само ако typeса правилно декларирани.

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

Входни групи

За да добавите интегриран текст или бутони преди и/или след който и да е текстово базиран <input>, проверете компонента на групата за въвеждане .

Текстово поле

Контрол на формуляр, който поддържа няколко реда текст. Променете 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>

Избира

Обърнете внимание, че много естествени менюта за избор – а именно в Safari и Chrome – имат заоблени ъгли, които не могат да се променят чрез border-radiusсвойства.

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

За <select>контроли с multipleатрибута по подразбиране се показват множество опции.

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

Статично управление

Когато трябва да поставите обикновен текст до етикет на формуляр във формуляр, използвайте .form-control-staticкласа на <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Състояние на фокус

Ние премахваме outlineстиловете по подразбиране на някои контроли на формуляри и прилагаме box-shadowвместо тях за :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>`

По подразбиране браузърите ще третират всички собствени контроли на формуляри ( <input>, <select>и <button>елементи) вътре <fieldset disabled>като дезактивирани, предотвратявайки взаимодействието както с клавиатура, така и с мишка върху тях. Ако обаче вашият формуляр включва и <a ... class="btn btn-*">елементи, на тях ще бъде даден само стил на pointer-events: none. Както е отбелязано в раздела за забранено състояние за бутони (и по-специално в подраздела за анкерни елементи), това свойство на CSS все още не е стандартизирано и не се поддържа напълно в Opera 18 и по-долу или в Internet Explorer 11 и спечели не пречи на потребителите на клавиатурата да могат да фокусират или активират тези връзки. Така че, за да сте в безопасност, използвайте персонализиран JavaScript, за да деактивирате такива връзки.

Съвместимост между различни браузъри

Въпреки че Bootstrap ще приложи тези стилове във всички браузъри, Internet Explorer 11 и по-стари не поддържат напълно disabledатрибута на <fieldset>. Използвайте персонализиран JavaScript, за да деактивирате набора от полета в тези браузъри.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Състояние само за четене

Добавете readonlyбулевия атрибут към вход, за да предотвратите промяна на стойността на входа. Входовете само за четене изглеждат по-леки (точно като деактивираните входове), но запазват стандартния курсор.

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

Помощен текст

Помощен текст на ниво блок за контроли на формуляр.

Свързване на помощен текст с контроли на формуляр

Помощният текст трябва да бъде изрично свързан с контролата на формуляра, към която се отнася с помощта наaria-describedby атрибута. Това ще гарантира, че помощните технологии – като екранни четци – ще обявят този помощен текст, когато потребителят фокусира или влезе в контрола.

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Състояния на валидиране

Bootstrap включва стилове за валидиране за състояния на грешка, предупреждение и успех на контролите на формуляра. За да използвате, добавете .has-warning, .has-errorили .has-successкъм родителския елемент. Всякакви .control-label, .form-control, и.help-block в този елемент ще получи стиловете за валидиране.

Предаване на състояние на валидиране на помощни технологии и потребители с далтонисти

Използването на тези стилове за валидиране за обозначаване на състоянието на контрола на формуляр осигурява само визуална, базирана на цвят индикация, която няма да бъде предадена на потребители на помощни технологии – като екранни четци – или на потребители с далтонисти.

Уверете се, че е предоставена и алтернативна индикация за състояние. Например, можете да включите намек за състояние в самия <label>текст на контролата на формуляра (както е случаят в следния пример за код), да включите Glyphicon (с подходящ алтернативен текст, използвайки .sr-onlyкласа - вижте примерите за 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клас, така че не се изисква префикс.

Предупреждение относно функционалността на връзката

Този клас използва pointer-events: none, за да се опита да деактивира функционалността на връзката на <a>s, но това CSS свойство все още не е стандартизирано и не се поддържа напълно в Opera 18 и по-нови или в Internet Explorer 11. В допълнение, дори в браузъри, които поддържат pointer-events: none, клавиатурата навигацията остава незасегната, което означава, че зрящи потребители на клавиатура и потребители на помощни технологии все още ще могат да активират тези връзки. Така че, за да сте в безопасност, използвайте персонализиран JavaScript, за да деактивирате такива връзки.

Отзивчиви изображения

Изображенията в Bootstrap 3 могат да бъдат направени удобни за реагиране чрез добавяне на .img-responsiveкласа. Това се отнася max-width: 100%;и height: auto;за display: block;изображението, така че да се мащабира добре спрямо родителския елемент.

За центриране на изображения, които използват .img-responsiveкласа, използвайте .center-blockвместо .text-center. Вижте раздела за помощни класове за повече подробности относно .center-blockизползването.

SVG изображения и IE 8-10

В Internet Explorer 8-10 SVG изображенията .img-responsiveса с непропорционален размер. За да коригирате това, добавете, width: 100% \9;където е необходимо. Bootstrap не прилага това автоматично, тъй като причинява усложнения на други формати на изображения.

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

Форми на изображения

Добавете класове към <img>елемент, за да стилизирате лесно изображения във всеки проект.

Съвместимост между различни браузъри

Имайте предвид, че в Internet Explorer 8 липсва поддръжка за заоблени ъгли.

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

Контекстни цветове

Предайте значение чрез цвят с шепа акцентиращи полезни класове. Те могат да бъдат приложени и към връзки и ще потъмнеят при задържане на курсора на мишката точно като нашите стилове за връзки по подразбиране.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Меценат 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>

Справяне със спецификата

Понякога класовете за подчертаване не могат да бъдат приложени поради спецификата на друг селектор. В повечето случаи достатъчно заобиколно решение е да обвиете текста си в a <span>с класа.

Предаване на значение на помощните технологии

Използването на цвят за добавяне на смисъл осигурява само визуална индикация, която няма да бъде предадена на потребителите на помощни технологии – като екранни четци. Уверете се, че информацията, обозначена с цвета, е или очевидна от самото съдържание (контекстуалните цветове се използват само за подсилване на значението, което вече присъства в текста/маркирането), или е включена чрез алтернативни средства, като например допълнителен текст, скрит с .sr-onlyкласа .

Контекстуални фонове

Подобно на контекстните класове за цвят на текст, лесно задайте фона на елемент на всеки контекстуален клас. Компонентите на котвата ще потъмнеят при задържане, точно както текстовите класове.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Меценат 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>

Справяне със спецификата

Понякога контекстуалните фонови класове не могат да бъдат приложени поради спецификата на друг селектор. В някои случаи достатъчно заобиколно решение е да обвиете съдържанието на вашия елемент в a <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();
}

Clearfix

Лесно изчистете floats чрез добавяне .clearfix към родителския елемент . Използва micro clearfix , популяризиран от Nicolas Gallagher. Може да се използва и като миксин.

<!-- 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класа или mixin, за да замените текстовото съдържание на елемент с фоново изображение.

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

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

За по-бързо разработка, удобна за мобилни устройства, използвайте тези помощни класове за показване и скриване на съдържание по устройство чрез медийна заявка. Включени са и полезни класове за превключване на съдържание при отпечатване.

Опитайте се да ги използвате ограничено и избягвайте да създавате напълно различни версии на един и същи сайт. Вместо това ги използвайте, за да допълните представянето на всяко устройство.

Налични класове

Използвайте един или комбинация от наличните класове за превключване на съдържание между точките на прекъсване на прозорците.

	Изключително малки устройстваТелефони (<768px)	Малки устройстваТаблети (≥768px)	Средни устройстваНастолни компютри (≥992px)	Големи устройстваНастолни компютри (≥1200px)
`.visible-xs-*`	Видими	Скрити	Скрити	Скрити
`.visible-sm-*`	Скрити	Видими	Скрити	Скрити
`.visible-md-*`	Скрити	Скрити	Видими	Скрити
`.visible-lg-*`	Скрити	Скрити	Скрити	Видими
`.hidden-xs`	Скрити	Видими	Видими	Видими
`.hidden-sm`	Видими	Скрити	Видими	Видими
`.hidden-md`	Видими	Видими	Скрити	Видими
`.hidden-lg`	Видими	Видими	Видими	Скрити

От v3.2.0, .visible-*-*класовете за всяка точка на прекъсване се предлагат в три варианта, по един за всяка displayстойност на CSS свойство, изброено по-долу.

Група от класове	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Така че, например за много малки ( xs) екрани, наличните .visible-*-*класове са: .visible-xs-block, .visible-xs-inlineи .visible-xs-inline-block.

Класовете .visible-xs, .visible-sm, .visible-mdи .visible-lgсъщо съществуват, но са отхвърлени от v3.2.0 . Те са приблизително еквивалентни на .visible-*-block, с изключение на допълнителни специални случаи за <table>елементи, свързани с превключване.

Печат на класове

Подобно на обикновените адаптивни класове, използвайте ги за превключване на съдържание за печат.

Класове	Браузър	Печат
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Скрити	Видими
`.hidden-print`	Видими	Скрити

Класът .visible-printсъщо съществува, но е отхвърлен от v3.2.0. Той е приблизително еквивалентен на .visible-print-block, с изключение на допълнителни специални случаи за <table>-свързани елементи.

Тестови случаи

Преоразмерете браузъра си или заредете на различни устройства, за да тествате отзивчивите помощни класове.

Вижда се на...

Зелените отметки показват, че елементът е видим във вашия текущи прозорец.

Много малко ✔ Вижда се на x-small

малък ✔ Вижда се на малки

Среден ✔ Видимо на средно

Голям ✔ Вижда се в голям размер

Изключително малък и малък ✔ Вижда се на x-small и small

Средни и големи ✔ Вижда се на средни и големи

Изключително малки и средни ✔ Вижда се на x-малък и среден

Малки и големи ✔ Вижда се на малки и големи

Изключително малки и големи ✔ Вижда се на x-малък и голям

Малки и средни ✔ Вижда се на малки и средни

Скрит на...

Тук зелените отметки също показват, че елементът е скрит в текущия ви прозорец.

Много малко ✔ Скрито на x-small

малък ✔ Скрити на малки

Среден ✔ Скрит на среден

Голям ✔ Скрити на голямо

Изключително малък и малък ✔ Скрити на x-малки и малки

Средни и големи ✔ Скрити на средни и големи

Изключително малки и средни ✔ Hidden on x-small and medium

Small and large ✔ Скрити на малки и големи

Extra small and large ✔ Скрити на x-малки и големи

Малки и средни ✔ Hidden on small and medium

CSS на Bootstrap е изграден върху Less, препроцесор с допълнителна функционалност като променливи, миксини и функции за компилиране на CSS. Тези, които искат да използват изходните Less файлове вместо нашите компилирани CSS файлове, могат да се възползват от многобройните променливи и миксини, които използваме в цялата рамка.

Грид променливите и миксините са обхванати в раздела Грид система .

Компилиране на Bootstrap

Bootstrap може да се използва поне по два начина: с компилиран CSS или с изходните Less файлове. За да компилирате файловете Less, консултирайте се с раздела Първи стъпки за това как да настроите вашата среда за разработка, за да изпълнява необходимите команди.

Инструментите за компилиране на трети страни може да работят с Bootstrap, но не се поддържат от нашия основен екип.

Променливи

Променливите се използват в целия проект като начин за централизиране и споделяне на често използвани стойности като цветове, интервали или купчини шрифтове. За пълна разбивка, моля, вижте Персонализатора .

Цветове

Използвайте лесно две цветови схеми: сива скала и семантична. Цветовете в сивата скала осигуряват бърз достъп до често използвани нюанси на черното, докато семантичните включват различни цветове, присвоени на значими контекстуални стойности.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Използвайте която и да е от тези цветови променливи такива, каквито са, или ги пренасочете към по-значими променливи за вашия проект.

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

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

Скеле

Няколко променливи за бързо персонализиране на ключови елементи от скелета на вашия сайт.

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

Връзки

Лесно стилизирайте връзките си с правилния цвят само с една стойност.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Имайте предвид, че @link-hover-colorизползва функция, друг страхотен инструмент от Less, за автоматично създаване на правилния цвят на курсора. Можете да използвате darken, lighten, saturateи desaturate.

Типография

Лесно задайте вашия шрифт, размер на текста, водещи букви и други с няколко бързи променливи. Bootstrap ги използва и за осигуряване на лесни типографски миксини.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Икони

Две бързи променливи за персонализиране на местоположението и името на файла на вашите икони.

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

Компоненти

Компонентите в Bootstrap използват някои променливи по подразбиране за задаване на общи стойности. Ето най-често използваните.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Миксини на доставчици

Миксините на доставчици са миксини, които подпомагат поддръжката на множество браузъри чрез включване на всички съответни префикси на доставчици във вашия компилиран CSS.

Оразмеряване на кутията

Нулирайте модела на кутията на вашите компоненти с един миксин. За контекст вижте тази полезна статия от Mozilla .

Миксинът е отхвърлен от v3.2.0, с въвеждането на Autoprefixer. За да запази обратната съвместимост, Bootstrap ще продължи да използва mixin вътрешно до 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()mixin, но 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 (Drop) сенки

Ако вашата целева аудитория използва най-новите и най-добрите браузъри и устройства, уверете се, че просто използвате box-shadowсобствеността самостоятелно. Ако имате нужда от поддръжка за по-стари устройства с Android (преди v4) и iOS (преди iOS 5), използвайте остарелия mixin, за да изберете необходимия -webkitпрефикс.

Mixin е отхвърлен от v3.1.0, тъй като Bootstrap не поддържа официално остарелите платформи, които не поддържат стандартното свойство. За да запази обратната съвместимост, Bootstrap ще продължи да използва mixin вътрешно до Bootstrap v4.

Не забравяйте да използвате rgba()цветове в сенките на кутията, така че да се слеят възможно най-безпроблемно с фона.

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

Преходи

Множество миксини за гъвкавост. Задайте цялата информация за прехода с едно или посочете отделно забавяне и продължителност, ако е необходимо.

Миксините са отхвърлени от v3.2.0, с въвеждането на Autoprefixer. За да запази обратната съвместимост, Bootstrap ще продължи да използва миксините вътрешно до Bootstrap v4.

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

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

Завъртете, мащабирайте, преместете (преместете) или изкривете всеки обект.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Анимации

Един миксин за използване на всички анимационни свойства на CSS3 в една декларация и други миксини за отделни свойства.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Непрозрачност

Задайте непрозрачността за всички браузъри и осигурете filterрезервен вариант за IE8.

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

Горе главата! Ако някога се наложи да премахнете градиент, не забравяйте да премахнете всеки специфичен за IE, filterкойто може да сте добавили. Можете да направите това, като използвате .reset-filter()mixin заедно с background-image: none;.

Помощни миксини

Помощните миксини са миксини, които комбинират иначе несвързани CSS свойства за постигане на конкретна цел или задача.

Clearfix

Забравете добавянето class="clearfix"към всеки елемент и вместо това добавете .clearfix()mixin, където е подходящо. Използва micro clearfix от Nicolas Gallagher .

// 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/`	Манифест на пакет Compass
`vendor/assets/`	Sass, JavaScript и файлове с шрифтове
`Rakefile`	Вътрешни задачи, като рейк и конвертиране

Посетете хранилището на GitHub на порта Sass, за да видите тези файлове в действие.

Инсталация

За информация как да инсталирате и използвате Bootstrap за Sass, вижте readme на хранилището на GitHub . Това е най-актуалният източник и включва информация за използване с Rails, Compass и стандартни Sass проекти.

Bootstrap за 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`етикети