Добијте ги клучните делови од инфраструктурата на Bootstrap, вклучувајќи го и нашиот пристап за подобар, побрз и посилен веб-развој.

HTML5 doctype

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на мета-ознаката на приказот на приказот. Ова го оневозможува зумирањето, што значи дека корисниците можат само да скролуваат и резултира со тоа вашата страница да се чувствува малку повеќе како домашна апликација. Генерално, не го препорачуваме ова на секоја страница, затоа бидете внимателни!

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

Нормализирај.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) { ... }

Повремено ги прошируваме овие барања за медиуми за да вклучиме a 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 на повеќе уреди со практична табела.

	Екстра мали уреди Телефони (<768 пиксели)	Таблети за мали уреди (≥768 px)	Десктоп компјутери со средни уреди (≥992 px)	Десктоп компјутери за големи уреди (≥1200 px)
Однесување на мрежата	Хоризонтално во секое време	Собрано за почеток, хоризонтално над точките на прекин
Ширина на контејнерот	Никој (автоматски)	750 пиксели	970 пиксели	1170 пиксели
Префикс за класа	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# колони	12
Ширина на колоната	Автоматски	~ 62 пиксели	~ 81 пиксели	~ 97 пиксели
Ширина на олукот	30 px (15 px на секоја страна од колоната)
Вгнездени	Да
Поместувања	Да
Редење на колони	Да

Пример: Наредени-до-хоризонтални

Користејќи еден сет на .col-md-*класи на мрежа, можете да креирате основен мрежен систем кој започнува наредени на мобилни уреди и таблет уреди (повеќе од мал до мал опсег) пред да стане хоризонтален на десктоп (средни) уреди. Поставете ги колоните на мрежата во која било .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Пример: Контејнер со течност

Претворете го секој распоред на мрежа со фиксна ширина во распоред со целосна ширина со менување на вашиот најоддалечен .containerво .container-fluid.

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

Пример: мобилен и десктоп

Не сакате вашите колони едноставно да се собираат во помали уреди? Користете ги дополнителните класи на мрежа за мали и средни уреди со додавање .col-xs-* .col-md-*во вашите колони. Погледнете го примерот подолу за подобра идеја за тоа како функционира сето тоа.

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

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

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Пример: мобилен, таблет, десктоп

Надоградете го претходниот пример создавајќи уште подинамични и помоќни распореди со .col-sm-*класи на таблети.

.col-xs-12 .col-sm-6 .col-md-8

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

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Пример: Завиткување на колона

Ако повеќе од 12 колони се ставени во еден ред, секоја група дополнителни колони, како една единица, ќе се завитка во нова линија.

.col-xs-9

.col-xs-4
Бидејќи 9 + 4 = 13 > 12, ова див со 4 колони се завиткува на нова линија како една соседна единица.

.col-xs-6
Следните колони продолжуваат по новата линија.

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

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

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

.col-xs-6 .col-sm-3
Променете ја големината на вашиот приказ или проверете го на вашиот телефон на пример.

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

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

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

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

Покрај бришењето на колоните при одговорни точки на прекин, можеби ќе треба да ги ресетирате поместувањата, туркањата или повлекувањата . Погледнете го ова во акција во примерот на мрежата .

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

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

Поместување на колони

Поместете ги колоните надесно користејќи .col-md-offset-*класи. Овие класи ја зголемуваат левата маргина на колона по *колони. На пример, .col-md-offset-4се движи .col-md-4преку четири колони.

.col-md-4

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

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

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

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

Можете исто така да ги отфрлите поместувањата од пониските нивоа на мрежа со .col-*-offset-0класи.

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

Вгнездени колони

За да ја вгнездите вашата содржина со стандардната мрежа, додадете нова .rowи множество .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 вклучува помалку променливи и мешавини за брзо генерирање на сопствени едноставни, семантички распореди.

Променливи

Променливите го одредуваат бројот на колони, широчината на олукот и точката за пребарување на медиумот во која ќе започнат пловечките колони. Ги користиме за да ги генерираме претходно дефинираните класи на мрежа документирани погоре, како и за сопствените миксини наведени подолу.

@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. Наслов за подигање	Полузадебелување 36 пиксели
h2. Наслов за подигање	Полузадебелување 30 пиксели
h3. Наслов за подигање	Полузадебелување 24 пиксели
h4. Наслов за подигање	Полузадебелување 18 пиксели
h5. Наслов за подигање	Полузадебелување 14 пиксели
h6. Наслов за подигање	Полузадебелување 12 пиксели

<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. Заглавие за подигање Секундарен текст

h2. Заглавие за подигање Секундарен текст

h3. Заглавие за подигање Секундарен текст

h4. Заглавие за подигање Секундарен текст

h5. Заглавие за подигање Секундарен текст

h6. Заглавие за подигање Секундарен текст

<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-size14 px , со 1,428 . Ова се применува на и сите параграфи. Покрај тоа, (пасусите) добиваат долна маргина од половина од нивната пресметана висина на линијата (стандардно 10 px).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 ultrices 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.

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

<p>...</p>

Копија на водечкото тело

Направете пасус да се истакне со додавање .lead.

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

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

Изграден со помалку

Типографската скала се заснова на две помалку променливи во променливите.помалку : @font-size-baseи @line-height-base. Првата е основната големина на фонтот што се користи насекаде, а втората е висината на основната линија. Ги користиме тие променливи и некоја едноставна математика за да создадеме маргини, облоги и височини на линии од сите наши типови и многу повеќе. Приспособете ги и Bootstrap се прилагодува.

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

Обележан текст

За истакнување серија на текст поради неговата релевантност во друг контекст, користете ја <mark>ознаката.

Можете да ја користите ознаката за данагласитекст.

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

Избришан текст

За означување на блокови од текст што се избришани, користете ја <del>ознаката.

~~Оваа линија текст е наменета да се третира како избришан текст.~~

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

Текст со штрајк

За означување на блокови од текст кои повеќе не се релевантни, користете ја <s>ознаката.

~~Овој ред на текст треба да се третира како повеќе неточен.~~

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

Вметнат текст

За означување на дополнувањата на документот користете ја <ins>ознаката.

Овој ред текст е наменет да се третира како додаток на документот.

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

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

За да го подвлечете текстот, користете ја <u>ознаката.

Оваа линија текст ќе се прикажува како што е подвлечено

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

Користете ги стандардните ознаки за нагласување на HTML со лесни стилови.

Мал текст

За де-нагласување на линија или блокови од текст, користете ја <small>ознаката за да го поставите текстот на 85% од големината на родителот. Елементите за заглавие добиваат свои font-sizeза вгнездени <small>елементи.

Алтернативно можете да користите вграден елемент со .smallнаместо кој било <small>.

Овој ред текст е наменет да се третира како ситно печатење.

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

Задебелен

За нагласување фрагмент од текст со потешка тежина на фонтот.

Следниот дел од текстот е прикажан како задебелен текст .

<strong>rendered as bold text</strong>

Закосени букви

За нагласување на фрагмент од текст со закосени букви.

Следниот фрагмент од текстот е прикажан како курзив текст .

<em>rendered as italicized text</em>

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

Слободно користете <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
Цел број molestie lorem at massa
Фацилиза во претиум нисл аликет
Нула волутпат аликвам велит
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Енеан седат амет ерат нунц
Eget porttitor lorem

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

Нарачано

Список на ставки во кои редоследот е експлицитно важен.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Цел број molestie lorem at massa
Фацилиза во претиум нисл аликет
Нула волутпат аликвам велит
Faucibus porta lacus fringilla vel
Енеан седат амет ерат нунц
Eget porttitor lorem

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

Нестилизиран

Отстранете ја стандардната list-styleи левата маргина на ставките од списокот (само за деца од непосредна близина). Ова се однесува само на ставките од списокот на непосредни деца , што значи дека ќе треба да ја додадете класата и за сите вгнездени списоци.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Цел број molestie lorem at massa
Фацилиза во претиум нисл аликет
Нула волутпат аликвам велит
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Енеан седат амет ерат нунц
Eget porttitor lorem

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

Во линија

Ставете ги сите ставки од списокот на една линија со display: inline-block;и малку светло полнење.

Лорем Ипсум
Phasellus iaculis
Nulla volutpat

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

Опис

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

Списоци со опис: Списокот со опис е совршен за дефинирање на поими.
Еуизмод: 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, но кога лентата за навигација ќе се прошири, направете ги и овие.

Списоци со опис: Списокот со опис е совршен за дефинирање на поими.
Еуизмод: 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класата, која ќе постави максимална висина од 350 пиксели и ќе обезбеди лента за лизгање со 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	Лери	птицата	@twitter

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

Редови со риги

Користете .table-stripedго за додавање зебра-ленти на кој било ред од табелата во рамките на <tbody>.

Компатибилност со вкрстени прелистувачи

Табелите со риги се стилизирани преку :nth-childизбирачот CSS, кој не е достапен во Internet Explorer 8.

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери	птицата	@twitter

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

Ограничена маса

Додадете .table-borderedза граници од сите страни на табелата и ќелиите.

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери	птицата	@twitter

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

Лебдете ги редовите

Додајте .table-hoverза да овозможите состојба на лебдење на редовите на табелата во рамките на <tbody>.

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери	птицата	@twitter

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

Кондензирана маса

Додадете .table-condensedза да ги направите масите покомпактни со преполовување на клеточното полнење.

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери птицата		@twitter

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

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

Користете контекстуални класи за да ги обоите редовите на табелата или поединечните ќелии.

Класа	Опис
`.active`	Ја применува бојата на лебдењето на одреден ред или ќелија
`.success`	Укажува на успешна или позитивна акција
`.info`	Укажува на неутрална информативна промена или акција
`.warning`	Покажува предупредување на кое можеби треба да му се посвети внимание
`.danger`	Укажува на опасно или потенцијално негативно дејство

#	Наслов на колона	Наслов на колона	Наслов на колона
1	Содржина на колона	Содржина на колона	Содржина на колона
2	Содржина на колона	Содржина на колона	Содржина на колона
3	Содржина на колона	Содржина на колона	Содржина на колона
4	Содржина на колона	Содржина на колона	Содржина на колона
5	Содржина на колона	Содржина на колона	Содржина на колона
6	Содржина на колона	Содржина на колона	Содржина на колона
7	Содржина на колона	Содржина на колона	Содржина на колона
8	Содржина на колона	Содржина на колона	Содржина на колона
9	Содржина на колона	Содржина на колона	Содржина на колона

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Пренесување значење на помошните технологии

Користењето боја за додавање значење на ред од табелата или на поединечна ќелија обезбедува само визуелна индикација, која нема да биде пренесена до корисниците на помошни технологии - како што се читачите на екранот. Осигурајте се дека информациите означени со бојата се очигледни од самата содржина (видливиот текст во соодветниот ред/ќелија на табелата), или се вклучени преку алтернативни средства, како што е дополнителен текст скриен со .sr-onlyкласата.

Одговорни табели

Создадете одговорни табели со завиткување на која било .tableза .table-responsiveда ги направите хоризонтално да лизгаат на мали уреди (под 768 пиксели). Кога гледате на нешто поголемо од 768 пиксели, нема да видите никаква разлика во овие табели.

Вертикално отсекување/отсекување

Одговорните табели користат 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>) за контроли лево порамнети и вградени блокови. Ова се однесува само на обрасци во рамките на приказите кои се широки најмалку 768 пиксели.

Може да бара сопствени ширини

Внесувањата и избирањата се width: 100%;стандардно применети во Bootstrap. Во рамките на вградените форми, го ресетираме тоа на width: auto;толку повеќе контроли можат да живеат на истата линија. Во зависност од вашиот распоред, може да бидат потребни дополнителни сопствени ширини.

Секогаш додавајте етикети

Читателите на екранот ќе имаат проблем со вашите формулари ако не вклучите етикета за секој влез. За овие вградени форми, можете да ги скриете етикетите користејќи ја .sr-onlyкласата. Постојат дополнителни алтернативни методи за обезбедување ознака за помошни технологии, како што е атрибутот aria-label, aria-labelledbyили . titleАко ниту едно од овие не е присутно, читателите на екранот може да прибегнат кон користење на placeholderатрибутот, доколку е присутен, но имајте предвид дека употребата на placeholderкако замена за други методи за етикетирање не се препорачува.

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

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

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

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

Користете ги предефинираните мрежни класи на Bootstrap за да ги порамните етикетите и групите на контроли на форми во хоризонтален распоред со додавање .form-horizontalво формата (што не мора да биде <form>). Со тоа се менува .form-groupда се однесуваат како мрежни редови, така што нема потреба од .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стилови на некои контроли на формулари и применуваме a box-shadowна негово место за :focus.

Демо `:focus`држава

Горенаведениот пример за внесување користи сопствени стилови во нашата документација за да ја демонстрира :focusсостојбата на .form-control.

Состојба со инвалидитет

Додајте го disabledатрибутот boolean на влез за да спречите интеракции со корисникот. Оневозможените влезови изгледаат полесни и додаваат 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. Сепак, можете да користите .activeна <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атрибутот на a <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.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Справување со специфичноста

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

Пренесување значење на помошните технологии

Користењето боја за додавање значење обезбедува само визуелна индикација, која нема да биде пренесена до корисниците на помошни технологии - како што се читачите на екранот. Осигурете се дека информациите означени со бојата се очигледни од самата содржина (контекстуалните бои се користат само за зајакнување на значењето што е веќе присутно во текстот/ознаката), или се вклучени преку алтернативни средства, како што е дополнителен текст скриен со.sr-only класата .

Контекстуални позадини

Слично на класите на бои на контекстуален текст, лесно поставете ја позадината на елементот на која било контекстуална класа. Компонентите на сидрото ќе се затемнат при лебдењето, исто како и класите на текст.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Справување со специфичноста

Понекогаш контекстуалните класи на позадина не можат да се применат поради специфичноста на друг селектор. Во некои случаи, доволно решение е да ја завиткате содржината на вашиот елемент во а <div>со класата.

Пренесување значење на помошните технологии

Како и со контекстуалните бои , погрижете се секое значење пренесено преку бојата исто така да се пренесе во формат што не е чисто презентациски.

Затвори икона

Користете ја генеричката икона за затворање за отфрлање содржини како модали и предупредувања.

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

Карети

Користете картички за да ја покажете функционалноста и насоката на паѓачкото мени. Забележете дека стандардната табла автоматски ќе се смени во паѓачките менија .

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

Брзи плови

Поставете елемент налево или надесно со класа. !importantе вклучено за да се избегнат проблеми со специфичноста. Класите може да се користат и како мешавини.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Центрирајте блокови за содржина

Поставете елемент display: blockи центрирајте преку margin. Достапен како микс и класа.

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

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

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

Расчисти

Лесно исчистете ги floatсо додавање .clearfix на родителскиот елемент . Го користи микро чистотата популаризирана од Николас Галагер. Може да се користи и како микс.

<!-- Usage as a class -->
<div class="clearfix">...</div>

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

// Usage as a mixin
.element {
  .clearfix();
}

Прикажување и криење на содржината

Принудете елемент да биде прикажан или скриен ( вклучително и за читачи на екран ) со употреба на .showи .hiddenкласи. Овие класи се користат !importantза да се избегнат конфликти на специфичности, исто како и брзите плови . Тие се достапни само за менување на нивото на блок. Можат да се користат и како мешавини.

.hideе достапен, но не секогаш влијае на читачите на екранот и е застарен од верзијата 3.0.1. Користете .hiddenили .sr-onlyнаместо тоа.

Понатаму, .invisibleможе да се користи за префрлување само на видливоста на некој елемент, што значи дека тој displayне е изменет и елементот сè уште може да влијае на текот на документот.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Читач на екран и содржина за навигација со тастатура

Сокриј елемент на сите уреди освен читачите на екран со .sr-only. Комбинирајте .sr-onlyсо .sr-only-focusableза да го прикажете елементот повторно кога е фокусиран (на пр. од корисник само со тастатура). Неопходно за следење на најдобрите практики за пристапност . Може да се користи и како микс.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Замена на сликата

Искористете ја .text-hideкласата или миксинот за да помогнете во замена на текстуалната содржина на елементот со слика во заднина.

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

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

За побрз развој пријателски за мобилни телефони, користете ги овие класи за помош за прикажување и криење содржина по уред преку барање за медиуми. Вклучени се и корисни класи за менување содржина при печатење.

Обидете се да ги користите овие на ограничена основа и избегнувајте да создавате сосема различни верзии на истата локација. Наместо тоа, користете ги за да ја надополните презентацијата на секој уред.

Достапни часови

Користете единечна или комбинација од достапните класи за префрлање на содржината низ точките на прекин на приказот.

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

Почнувајќи од верзијата 3.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-small и medium

Мали и големи ✔ Видливо на мали и големи

Екстра мали и големи ✔ Видливо на x-мали и големи

Мали и средни ✔ Видливо на мали и средни

Скриен на...

Овде, зелените ознаки исто така покажуваат дека елементот е скриен во вашата тековна порта за гледање.

Екстра мал ✔ Скриен на x-small

Мали ✔ Скриен на мали

Средно ✔ Скриен на медиум

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

Екстра мали и мали ✔ Скриен на x-small и small

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

Екстра мали и средни ✔ Скриен на x-small и medium

Мали и големи ✔ Скриен на мали и големи

Екстра мали и големи ✔ Скриен на x-мали и големи

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

CSS на Bootstrap е изграден на Less, препроцесор со дополнителна функционалност како променливи, миксини и функции за компајлирање CSS. Оние кои сакаат да ги користат изворните датотеки Less наместо нашите компајлирани CSS-датотеки, можат да ги користат бројните променливи и мешавини што ги користиме низ рамката.

Променливите на мрежата и мешаниците се опфатени во делот Grid system .

Составување на 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 ќе продолжи да го користи миксинот внатрешно до Bootstrap v4.

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

Заоблени агли

Денес сите модерни прелистувачи го поддржуваат border-radiusимотот без префикс. Како таков, нема .border-radius()миксин, но Bootstrap вклучува кратенки за брзо заокружување на два агли на одредена страна на објектот.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Сенки на кутија (капка).

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

Миксинот е застарен од v3.1.0, бидејќи Bootstrap официјално не ги поддржува застарените платформи кои не го поддржуваат стандардното својство. За да се зачува компатибилноста со наназад, Bootstrap ќе продолжи да го користи миксинот внатрешно до Bootstrap v4.

Бидете сигурни да користите rgba()бои во сенките на вашата кутија за да се спојат што е можно полесно со позадините.

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

Транзиции

Повеќе мешавини за флексибилност. Поставете ги сите информации за транзицијата со една или наведете посебно одложување и времетраење по потреба.

Миксините се застарени од v3.2.0, со воведувањето на Autoprefixer. За да се зачува компатибилноста со наназад, Bootstrap ќе продолжи да ги користи миксините внатрешно до Bootstrap v4.

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

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

Ротирајте, размерете, преведете (поместете) или искривете кој било предмет.

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

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

Анимации

Единствен микс за користење на сите својства за анимација на CSS3 во една декларација и други мешавини за индивидуални својства.

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

Непроѕирност

Поставете ја непроѕирноста за сите прелистувачи и обезбедете 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()миксин заедно background-image: none;.

Комунални мешавини

Utility mixins се миксини кои комбинираат инаку неповрзани CSS својства за да постигнат одредена цел или задача.

Расчисти

Заборавете на додавање class="clearfix"на кој било елемент и наместо тоа додадете го .clearfix()миксинот каде што е соодветно. Го користи микро-чистиот фикс од Николас Галагер .

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

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

Хоризонтално центрирање

Брзо центрирајте го секој елемент во неговиот родител. Бара widthили max-widthда се постави.

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

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

Помошници за одредување на големината

Полесно наведете ги димензиите на објектот.

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

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

Области со текстура со можност за промена на големината

Лесно конфигурирајте ги опциите за промена на големината за која било област на текст или кој било друг елемент. Стандардно до нормално однесување на прелистувачот ( both).

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

Скратување на текст

Лесно скратете го текстот со елипса со едно мешање. Бара елементот да биде blockили inline-blockниво.

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

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

Слики на мрежницата

Наведете две патеки на сликата и димензиите на сликата @1x, а Bootstrap ќе обезбеди @2x медиумско барање. Ако имате многу слики за сервирање, размислете да ја напишете вашата слика од мрежницата CSS рачно во едно барање за медиумите.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Додека Bootstrap е изграден на Less, тој има и официјална Sass порта . Го одржуваме во посебно складиште на GitHub и се справуваме со ажурирањата со скрипта за конверзија.

Што е вклучено

Бидејќи пристаништето Sass има посебно складиште и опслужува малку поинаква публика, содржината на проектот многу се разликува од главниот проект Bootstrap. Ова осигурува дека пристаништето Sass е што е можно покомпатибилно со што е можно повеќе системи базирани на Sass.

Пат	Опис
`lib/`	Код за скапоцен камен од руби (Sass конфигурација, Rails и Compass интеграции)
`tasks/`	Скрипти за конвертор (превртување нагоре Less во Sass)
`test/`	Тестови за компилација
`templates/`	Манифест на пакетот компас
`vendor/assets/`	Sass, JavaScript и датотеки со фонтови
`Rakefile`	Внатрешни задачи, како што се гребло и конвертирање

Посетете го складиштето GitHub на пристаништето Sass за да ги видите овие датотеки во акција.

Инсталација

За информации за тоа како да инсталирате и користите Bootstrap за Sass, консултирајте се со складиштето readme на GitHub . Тој е најсовремен извор и вклучува информации за употреба со Rails, Compass и стандардните Sass проекти.

Bootstrap за Sass

CSS

Преглед

HTML5 doctype

Мобилниот прво

Типографија и врски

Нормализирај.css

Контејнери

Мрежен систем

Вовед

Прашања за медиумите

Опции за мрежа

Пример: Наредени-до-хоризонтални

Пример: Контејнер со течност

Пример: мобилен и десктоп

Пример: мобилен, таблет, десктоп

Пример: Завиткување на колона

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

Поместување на колони

Вгнездени колони

Редење на колони

Помалку мешавини и променливи

Променливи

Мешавини

Пример за употреба

Типографија

Наслови

h1. Наслов за подигање

h2. Наслов за подигање

h3. Наслов за подигање

h4. Наслов за подигање

h5. Наслов за подигање

h6. Наслов за подигање

h1. Заглавие за подигање Секундарен текст

h2. Заглавие за подигање Секундарен текст

h3. Заглавие за подигање Секундарен текст

h4. Заглавие за подигање Секундарен текст

h5. Заглавие за подигање Секундарен текст

h6. Заглавие за подигање Секундарен текст

Тело копија

Копија на водечкото тело

Изграден со помалку

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

Обележан текст

Избришан текст

Текст со штрајк

Вметнат текст

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

Мал текст

Задебелен

Закосени букви

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

Класи за усогласување

Часови за трансформација

Кратенки

Основна кратенка

Иницијализам

Адреси

Блокцитати

Стандарден блок цитат

Опции за блокирање на цитати

Именување на извор

Алтернативни прикази

Списоци

Ненарачана

Нарачано

Нестилизиран

Во линија

Опис

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

Автоматско скратување

Код

Во линија

Кориснички внес

Основен блок

Променливи

Излез на примерок

Табели

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

Редови со риги

Компатибилност со вкрстени прелистувачи

Демо `:focus`држава

Забелешка за функционалноста на врската на`<a>`

Изборни икони со скриени `.sr-only`етикети