Сазнајте у кратким цртама о кључним деловима Боотстрап инфраструктуре, укључујући наш приступ бољем, бржем и јачем веб развоју.

ХТМЛ5 тип документа

Боотстрап користи одређене ХТМЛ елементе и ЦСС својства која захтевају употребу ХТМЛ5 доцтипе. Укључите га на почетак свих својих пројеката.

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

Прво мобилни

Уз Боотстрап 2, додали смо опционе стилове прилагођене мобилним уређајима за кључне аспекте оквира. Уз Боотстрап 3, поново смо написали пројекат тако да буде прилагођен мобилним уређајима од самог почетка. Уместо додавања опционих мобилних стилова, они су испечени директно у језгро. У ствари, Боотстрап је први мобилни . Стилови за мобилне уређаје могу се наћи у целој библиотеци уместо у засебним датотекама.

Да бисте обезбедили правилно приказивање и зумирање додиром, додајте мета ознаку оквира за приказ у свој <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">

Типографија и везе

Боотстрап поставља основне глобалне стилове приказа, типографије и линкова. Конкретно, ми:

Поставите background-color: #fff;наbody
Користите атрибуте @font-family-base, @font-size-baseи @line-height-baseкао нашу типографску основу
Подесите глобалну боју везе преко @link-colorи примените подвучене везе само на:hover

Ови стилови се могу наћи у оквиру scaffolding.less.

Нормализе.цсс

За побољшано приказивање у више прегледача, користимо Нормализе.цсс , пројекат Николаса Галагера и Џонатана Нила .

Контејнери

Боотстрап захтева садржински елемент за омотавање садржаја сајта и смештај нашег система мреже. Можете одабрати један од два контејнера који ћете користити у својим пројектима. Имајте на уму да, због paddingи више од тога, ниједан контејнер није угнежђен.

Користите .containerза одговарајући контејнер фиксне ширине.

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

Користите .container-fluidза контејнер пуне ширине, који обухвата целу ширину вашег прозора за приказ.

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

Боотстрап укључује прилагодљиви, мобилни систем прве течне мреже који се на одговарајући начин повећава до 12 колона како се величина уређаја или оквира за приказ повећава. Укључује унапред дефинисане класе за једноставне опције распореда, као и моћне мешавине за генерисање више семантичких распореда .

Увод

Мрежни системи се користе за креирање изгледа страница кроз низ редова и колона у којима се налази ваш садржај. Ево како функционише систем мреже Боотстрап:

Редови морају бити постављени унутар .container(фиксне ширине) или .container-fluid(пуне ширине) ради правилног поравнања и попуњавања.
Користите редове да направите хоризонталне групе колона.
Садржај треба да буде смештен унутар колона, а само колоне могу бити непосредно потомци редова.
Унапред дефинисане класе мреже попут .rowи .col-xs-4доступне су за брзо прављење распореда мреже. Мање миксина се такође може користити за више семантичких распореда.
Колоне стварају олуке (празнине између садржаја колона) преко padding. Тај паддинг је померен у редовима за прву и последњу колону преко негативне маргине на .rowс.
Негативна маргина је разлог зашто су примери у наставку одмакнути. То је тако да је садржај унутар колона мреже поређан са садржајем који није у мрежи.
Мрежне колоне се креирају навођењем броја од дванаест доступних колона које желите да обухватите. На пример, три једнаке колоне би користиле три .col-xs-4.
Ако је више од 12 колона постављено у један ред, свака група додатних колона ће се, као једна јединица, премотати у нови ред.
Мрежне класе се примењују на уређаје са ширинама екрана већим или једнаким величинама тачке прекида и замењују класе мреже које су циљане на мање уређаје. Стога, нпр. примена било које .col-md-*класе на елемент неће утицати само на његов стил на средњим уређајима већ и на великим уређајима ако .col-lg-*класа није присутна.

Погледајте примере за примену ових принципа на ваш код.

Медијски упити

Користимо следеће медијске упите у нашим Лесс датотекама да бисмо креирали кључне тачке прекида у нашем систему мреже.

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

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

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

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

Повремено проширујемо ове медијске упите да бисмо укључили а max-widthда ограничимо ЦСС на ужи скуп уређаја.

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

Опције мреже

Погледајте како аспекти Боотстрап грид система функционишу на више уређаја помоћу практичног стола.

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

Пример: наслагано према хоризонтали

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

.цол-мд-1

.цол-мд-8

.цол-мд-4

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

.цол-кс-12 .цол-мд-8

.цол-кс-6 .цол-мд-4

.цол-кс-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-*класама таблета.

.цол-кс-12 .цол-см-6 .цол-мд-8

.цол-кс-6 .цол-мд-4

.цол-кс-6 .цол-см-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 колона постављено у један ред, свака група додатних колона ће се, као једна јединица, премотати у нови ред.

.цол-кс-9

.цол-кс-4
Пошто је 9 + 4 = 13 > 12, овај див ширине 4 колоне се умотава у нови ред као једна суседна јединица.

.цол-кс-6
Наредне колоне се настављају дуж новог реда.

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

Ресетована колона се ресетује

Са четири нивоа мрежа на располагању, сигурно ћете наићи на проблеме у којима се, на одређеним тачкама прекида, ваше колоне не чисте сасвим добро јер је једна виша од друге. Да бисте то поправили, користите комбинацију а .clearfixи наших одговарајућих услужних класа .

.цол-кс-6 .цол-см-3
Промените величину оквира за приказ или га погледајте на телефону за пример.

.цол-кс-6 .цол-см-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преко четири колоне.

.цол-мд-4

.цол-мд-4 .цол-мд-оффсет-4

.цол-мд-3 .цол-мд-оффсет-3

.цол-мд-6 .цол-мд-оффсет-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: .цол-см-9

Ниво 2: .цол-кс-8 .цол-см-6

Ниво 2: .цол-кс-4 .цол-см-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-*модификаторима.

.цол-мд-9 .цол-мд-пусх-3

.цол-мд-3 .цол-мд-пулл-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>

Мање миксина и варијабли

Поред унапред изграђених класа мреже за брзе распореде, Боотстрап укључује Мање променљивих и миксина за брзо генерисање сопствених једноставних, семантичких распореда.

Променљиве

Променљиве одређују број колона, ширину олука и тачку упита медија у којој ће почети плутајуће колоне. Користимо их да генеришемо унапред дефинисане класе мреже које су горе документоване, као и за прилагођене миксине наведене у наставку.

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

Микинс

Миксини се користе заједно са варијаблама мреже за генерисање семантичког ЦСС-а за појединачне колоне мреже.

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

Наслови

Сви ХТМЛ наслови, <h1>до <h6>, су доступни. .h1низ .h6класе су такође доступне, када желите да ускладите стил фонта наслова, али и даље желите да се ваш текст приказује у линији.

х1. Боотстрап наслов	Семиболд 36пк
х2. Боотстрап наслов	Семиболд 30пк
х3. Боотстрап наслов	Семиболд 24пк
х4. Боотстрап наслов	Семиболд 18пк
х5. Боотстрап наслов	Семиболд 14пк
х6. Боотстрап наслов	Семиболд 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класом.

х1. Боотстрап наслов Секундарни текст

х2. Боотстрап наслов Секундарни текст

х3. Боотстрап наслов Секундарни текст

х4. Боотстрап наслов Секундарни текст

х5. Боотстрап наслов Секундарни текст

х6. Боотстрап наслов Секундарни текст

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

Боди цопи

Боотстрап-ова глобална подразумевана величина font-sizeје 14пкline-height , са 1.428 . Ово се примењује на <body>и све параграфе. Поред тога, <p>(параграфи) добијају доњу маргину од половине своје израчунате висине линије (подразумевано 10 пиксела).

Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус. Нуллам ид долор ид нибх ултрициес вехицула.

Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус. Донец улламцорпер нулла нон метус ауцтор фрингилла. Дуис моллис, ест нон цоммодо луцтус, ниси ерат порттитор лигула, егет лациниа одио сем нец елит. Донец улламцорпер нулла нон метус ауцтор фрингилла.

Меценас сед диам егет рисус вариус бландит сит амет нон магна. Донец ид елит нон ми порта гравида ат егет метус. Дуис моллис, ест нон цоммодо луцтус, ниси ерат порттитор лигула, егет лациниа одио сем нец елит.

<p>...</p>

Копија главног тела

Истакните пасус додавањем .lead.

Вивамус сагиттис лацус вел аугуе лаореет рутрум фауцибус долор ауцтор. Дуис моллис, ест нон цоммодо луцтус.

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

Изграђен са мање

Типографска скала се заснива на две Мање променљиве у променљивим.мање : @font-size-baseи @line-height-base. Прва је основна величина фонта која се користи у целом, а друга је висина основне линије. Користимо те варијабле и неку једноставну математику да креирамо маргине, допуне и висине линија свих наших типова и још много тога. Прилагодите их и Боотстрап се прилагођава.

Инлине текстуални елементи

Означени текст

За истицање низа текста због његове релевантности у другом контексту, користите <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>

Искористите ХТМЛ-ове подразумеване ознаке за наглашавање са лаким стиловима.

Мали текст

За уклањање наглашавања уметнутог текста или блокова текста, користите <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>у ХТМЛ5. <b>има за циљ да истакне речи или фразе без преношења додатне важности, док <i>је углавном за глас, техничке термине итд.

Класе поравнања

Лако поново поравнајте текст са компонентама помоћу класа за поравнање текста.

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

Текст поравнат по средини.

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

Оправдани текст.

Нема преламања текста.

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

Трансформационе класе

Трансформишите текст у компоненте са класама великих слова.

Текст малим словима.

Текст великим словима.

Текст са великим словом.

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

Скраћенице

Стилизована имплементација ХТМЛ <abbr>елемента за скраћенице и акрониме за приказ проширене верзије при лебдењу. Скраћенице са titleатрибутом имају доњу ивицу са светлим тачкама и курсор помоћи при лебдењу, пружајући додатни контекст при лебдењу и корисницима помоћних технологија.

Основна скраћеница

Скраћеница речи атрибут је аттр .

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

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

Додајте .initialismскраћеници за мало мању величину фонта.

ХТМЛ је најбоља ствар од нарезаног хлеба.

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

Аддрессес

Представите контакт податке за најближег претка или цео рад. Сачувајте форматирање завршавајући све редове са <br>.

Твиттер, Инц.
1355 Маркет Стреет, Суите 900
Сан Францисцо, ЦА 94103
П: (123) 456-7890

Пуно име
фирст.ласт@екампле.цом

<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>било који ХТМЛ као цитат. За директне цитате препоручујемо <p>.

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.

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

Опције блок цитата

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

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

Додајте а <footer>за идентификацију извора. Умотајте име изворног дела у <cite>.

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.

Неко познат у наслову извора

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

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.

Неко познат у наслову извора

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

Листе

Унордеред

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

Лорем ипсум долор сит амет
Цонсецтетур адиписцинг елит
Интегер молестие лорем ат масса
Фацилисис ин претиум нисл аликует
Нулла волутпат аликуам велит
- Пхаселлус иацулис некуе
- Пурус содалес ултрициес
- Вестибулум лаореет порттитор сем
- Ац тристикуе либеро волутпат ат
Фауцибус порта лацус фрингилла вел
Аенеан сит амет ерат нунц
Егет порттитор лорем

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

Наручено

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

Лорем ипсум долор сит амет
Цонсецтетур адиписцинг елит
Интегер молестие лорем ат масса
Фацилисис ин претиум нисл аликует
Нулла волутпат аликуам велит
Фауцибус порта лацус фрингилла вел
Аенеан сит амет ерат нунц
Егет порттитор лорем

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

Унстилед

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

Лорем ипсум долор сит амет
Цонсецтетур адиписцинг елит
Интегер молестие лорем ат масса
Фацилисис ин претиум нисл аликует
Нулла волутпат аликуам велит
- Пхаселлус иацулис некуе
- Пурус содалес ултрициес
- Вестибулум лаореет порттитор сем
- Ац тристикуе либеро волутпат ат
Фауцибус порта лацус фрингилла вел
Аенеан сит амет ерат нунц
Егет порттитор лорем

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

У реду

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

Лорем ипсум
Пхаселлус иацулис
Нулла волутпат

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

Опис

Листа појмова са њиховим придруженим описима.

Листе описа: Листа описа је савршена за дефинисање појмова.
Еуисмод: Вестибулум ид лигула порта фелис еуисмод семпер егет лациниа одио сем нец елит.; Донец ид елит нон ми порта гравида ат егет метус.
Малесуада порта: Етиам порта сем малесуада магна моллис еуисмод.

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

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

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

Листе описа: Листа описа је савршена за дефинисање појмова.
Еуисмод: Вестибулум ид лигула порта фелис еуисмод семпер егет лациниа одио сем нец елит.; Донец ид елит нон ми порта гравида ат егет метус.
Малесуада порта: Етиам порта сем малесуада магна моллис еуисмод.
Фелис еуисмод семпер егет лациниа: Фусце дапибус, теллус ац цурсус цоммодо, тортор маурис цондиментум нибх, ут ферментум масса јусто сит амет рисус.

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

<п>Пример текста овде...</п>

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

Опционо можете да додате .pre-scrollableкласу, која ће поставити максималну висину од 350 пиксела и обезбедити траку за померање на и-оси.

Променљиве

За означавање променљивих користите <var>ознаку.

и = м к + б

<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	Марк	Отто	@мдо
2	Јацоб	Тхорнтон	@дебео
3	Ларри	птица	@твиттер

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

Пругасти редови

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

Компатибилност са више претраживача

Пругасте табеле су стилизоване преко :nth-childЦСС селектора, који није доступан у Интернет Екплорер-у 8.

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

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

Бордед табле

Додајте .table-borderedза ивице на свим странама табеле и ћелија.

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

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

Лебдећи редови

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

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

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

Згуснута табела

Додајте .table-condensedда столови буду компактнији тако што ћете преполовити пуњење ћелија.

#	Име	Презиме	Корисничко име
1	Марк	Отто	@мдо
2	Јацоб	Тхорнтон	@дебео
3	Птица Лари		@твиттер

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

Контекстуалне класе

Користите контекстуалне класе за бојење редова табеле или појединачних ћелија.

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

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

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

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

Преношење значења помоћним технологијама

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

Респонсиве таблес

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

Вертикално одсецање/одсецање

Прилагодљиве табеле користе overflow-y: hidden, који одсеца сваки садржај који иде даље од доње или горње ивице табеле. Конкретно, ово може да исече падајуће меније и друге виџете треће стране.

Фирефок и сетови поља

Фирефок има неки незгодан стил скупа поља widthкоји омета табелу која реагује. Ово се не може заменити без хаковања специфичног за Фирефок који не пружамо у Боотстрапу:

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

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

#	Наслов табеле	Наслов табеле	Наслов табеле	Наслов табеле	Наслов табеле	Наслов табеле
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%;подразумевано примењени у Боотстрап-у. Унутар уметнутих образаца то ресетујемо тако да 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>

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

Користите Боотстрап-ове унапред дефинисане мрежне класе да поравнате ознаке и групе контрола обрасца у хоризонталном распореду додавањем .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>

Подржане контроле

Примери стандардних контрола обрасца подржани у примеру изгледа обрасца.

Инпутс

Најчешћа контрола обрасца, поља за унос заснована на тексту. Укључује подршку за све типове ХТМЛ5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telи color.

Потребна је декларација типа

Уноси ће бити потпуно стилизовани само ако су typeправилно декларисани.

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

Групе уноса

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

Тектареа

Контрола обрасца која подржава више редова текста. Промените rowsатрибут по потреби.

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

Поља за потврду и радио

Поља за потврду служе за бирање једне или више опција на листи, док су радио уређаји за избор једне опције из више.

Подржани су онемогућени потврдни оквири и радио станице, али да бисте обезбедили „недозвољени“ курсор при лебдењу над родитељем <label>, мораћете да додате .disabledкласу у родитељ .radio, .radio-inline, .checkboxили .checkbox-inline.

Подразумевано (наслагано)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Инлине поља за потврду и радио

Користите .checkbox-inlineили .radio-inlineкласе на низу поља за потврду или радија за контроле које се појављују на истој линији.

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Поља за потврду и радио уређаји без текста ознаке

Ако немате текст унутар <label>, унос је позициониран онако како бисте очекивали. Тренутно ради само на неинлајн оквирима за потврду и радијима. Не заборавите да и даље обезбедите неки облик ознаке за помоћне технологије (на пример, коришћење aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Бира

Имајте на уму да многи изворни изборни менији — наиме у Сафарију и Цхроме-у — имају заобљене углове који се не могу мењати путем border-radiusсвојстава.

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

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

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

Статичка контрола

Када треба да поставите обичан текст поред ознаке обрасца унутар обрасца, користите .form-control-staticкласу на <p>.

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

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

Стање фокуса

Уклањамо подразумеване outlineстилове на неким контролама обрасца и примењујемо а box-shadowуместо њега за :focus.

Демо `:focus`стање

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

Дисаблед стате

Додајте disabledлогички атрибут на улаз да бисте спречили интеракције корисника. Онемогућени улази изгледају светлије и додају not-allowedкурсор.

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

Онемогућени скупови поља

Додајте disabledатрибут а да бисте истовремено <fieldset>онемогућили све контроле у оквиру .<fieldset>

Упозорење о функционалности везе`<a>`

Подразумевано, прегледачи ће третирати све изворне контроле обрасца ( <input>и елементе) унутар а као онемогућене, спречавајући интеракције <select>и тастатуре и миша на њима. Међутим, ако ваш образац такође укључује елементе, њима ће бити дат само стил . Као што је наведено у одељку о онемогућеном стању дугмади (и посебно у пододељку за елементе сидра), ово ЦСС својство још увек није стандардизовано и није у потпуности подржано у Опера 18 и старијим верзијама, или у Интернет Екплорер-у 11, и победило је не спречава кориснике тастатуре да се фокусирају или активирају ове везе. Да бисте били сигурни, користите прилагођени ЈаваСцрипт да бисте онемогућили такве везе.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Компатибилност са више претраживача

Док ће Боотстрап применити ове стилове у свим прегледачима, Интернет Екплорер 11 и старији не подржавају у потпуности disabledатрибут на <fieldset>. Користите прилагођени ЈаваСцрипт да бисте онемогућили скуп поља у овим прегледачима.

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

Стања валидације

Боотстрап укључује стилове валидације за грешке, упозорења и стања успеха на контролама обрасца. Да бисте користили, додајте .has-warning, .has-errorили .has-successродитељском елементу. Било који .control-label, .form-control, и .help-blockунутар тог елемента ће добити стилове валидације.

Преношење стања валидације помоћним технологијама и далтонистима

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

Обезбедите и алтернативну индикацију стања. На пример, можете да укључите наговештај о стању у самом <label>тексту контроле обрасца (као што је случај у следећем примеру кода), да укључите глификон (са одговарајућим алтернативним текстом користећи .sr-onlyкласу – погледајте примере глификона ) или тако што ћете обезбедити додатни блок текста помоћи . Посебно за помоћне технологије, неважећим контролама обрасца такође се може доделити aria-invalid="true"атрибут.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Са опционим иконама

Такође можете додати опционе иконе повратних информација уз додатак .has-feedbackи десне иконе.

Иконе за повратне информације раде само са текстуалним <input class="form-control">елементима.

Иконе, ознаке и групе уноса

Ручно позиционирање икона повратних информација је потребно за улазе без ознаке и за групе улаза са додатком на десној страни. Препоручујемо вам да обезбедите ознаке за све уносе из разлога приступачности. Ако желите да спречите да се ознаке приказују, сакријте их помоћу .sr-onlyкласе. Ако морате без ознака, подесите topвредност иконе за повратне информације. За групе уноса, подесите rightвредност на одговарајућу вредност пиксела у зависности од ширине вашег додатка.

Преношење значења иконе на помоћне технологије

Да би се осигурало да помоћне технологије – као што су читачи екрана – исправно преносе значење иконе, додатни скривени текст треба да буде укључен у .sr-onlyкласу и експлицитно повезан са контролом обрасца на коју се односи коришћење aria-describedby. Алтернативно, обезбедите да се значење (на пример, чињеница да постоји упозорење за одређено поље за унос текста) пренесе у неком другом облику, као што је промена текста стварне која је <label>повезана са контролом обрасца.

Иако следећи примери већ помињу стање валидације њихових одговарајућих контрола форме у самом <label>тексту, горња техника (користећи .sr-onlyтекст и aria-describedby) је укључена у илустративне сврхе.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Опционе иконе у хоризонталном и линијском облику

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Опционе иконе са скривеним `.sr-only`ознакама

Ако користите .sr-onlyкласу да сакријете контролу обрасца <label>(уместо да користите друге опције означавања, као што је aria-labelатрибут), Боотстрап ће аутоматски прилагодити положај иконе када се дода.

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

Између осталог, постоји грешка у Фирефок-у <30 која нас спречава да поставимо дугмад заснована line-heightна <input>-заснованој, због чега они не одговарају тачно висини других дугмади у Фирефок-у.

Опције

Користите било коју од доступних класа дугмади да бисте брзо креирали стилизовано дугме.

<!-- 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>с (и укључити aria-pressed="true"атрибут) ако треба да програмски реплицирате активно стање.

Елемент дугмета

Нема потребе за додавањем :activeјер је то псеудо-класа, али ако треба да форсирате исти изглед, само напред и додајте .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Анцхор елемент

Додајте .activeкласу <a>дугмадима.

Примарна веза Линк

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Дисаблед стате

Учините да дугмад изгледају на које се не може кликнути тако што ћете их избледети помоћу opacity.

Елемент дугмета

Додајте disabledатрибут <button>дугмадима.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Компатибилност са више претраживача

Ако додате disabledатрибут у <button>, Интернет Екплорер 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>с, али то ЦСС својство још увек није стандардизовано и није у потпуности подржано у Опери 18 и старијим верзијама или у Интернет Екплорер-у 11. Поред тога, чак и у прегледачима који подржавају pointer-events: none, тастатура навигација остаје непромењена, што значи да ће корисници тастатуре који виде и корисници помоћних технологија и даље моћи да активирају ове везе. Да бисте били сигурни, користите прилагођени ЈаваСцрипт да бисте онемогућили такве везе.

Респонсиве имагес

Слике у Боотстрап-у 3 могу да буду прилагођене прилагођавању путем додавања .img-responsiveкласе. Ово се односи max-width: 100%;и height: auto;на display: block;слику тако да се лепо прилагођава родитељском елементу.

Да бисте центрирали слике које користе .img-responsiveкласу, користите .center-blockуместо .text-center. Погледајте одељак Помоћне класе за више детаља о .center-blockкоришћењу.

СВГ слике и ИЕ 8-10

У Интернет Екплорер-у 8-10, СВГ слике са .img-responsiveсу непропорционалне величине. Да бисте ово поправили, додајте width: 100% \9;где је потребно. Боотстрап ово не примењује аутоматски јер изазива компликације код других формата слика.

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

Облици слике

Додајте класе <img>елементу да бисте лако стилизовали слике у било ком пројекту.

Компатибилност са више претраживача

Имајте на уму да Интернет Екплорер 8 нема подршку за заобљене углове.

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

Контекстуалне боје

Пренесите значење кроз боју уз прегршт корисних класа за наглашавање. Они се такође могу применити на везе и затамњеће се при преласку миша, баш као и наши подразумевани стилови веза.

Фусце дапибус, теллус ац цурсус цоммодо, тортор маурис нибх.

Нуллам ид долор ид нибх ултрициес вехицула ут ид елит.

Дуис моллис, ест нон цоммодо луцтус, ниси ерат порттитор лигула.

Меценас сед диам егет рисус вариус бландит сит амет нон магна.

Етиам порта сем малесуада магна моллис еуисмод.

Донец улламцорпер нулла нон метус ауцтор фрингилла.

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

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

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

Нуллам ид долор ид нибх ултрициес вехицула ут ид елит.

Дуис моллис, ест нон цоммодо луцтус, ниси ерат порттитор лигула.

Меценас сед диам егет рисус вариус бландит сит амет нон магна.

Етиам порта сем малесуада магна моллис еуисмод.

Донец улламцорпер нулла нон метус ауцтор фрингилла.

<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 пиксела)	Средњи уређајиСтони рачунари (≥992 пиксела)	Велики уређајиСтони рачунари (≥1200 пиксела)
`.visible-xs-*`	Видљиво	Сакривен	Сакривен	Сакривен
`.visible-sm-*`	Сакривен	Видљиво	Сакривен	Сакривен
`.visible-md-*`	Сакривен	Сакривен	Видљиво	Сакривен
`.visible-lg-*`	Сакривен	Сакривен	Сакривен	Видљиво
`.hidden-xs`	Сакривен	Видљиво	Видљиво	Видљиво
`.hidden-sm`	Видљиво	Сакривен	Видљиво	Видљиво
`.hidden-md`	Видљиво	Видљиво	Сакривен	Видљиво
`.hidden-lg`	Видљиво	Видљиво	Видљиво	Сакривен

Од верзије 3.2.0, .visible-*-*класе за сваку тачку прекида долазе у три варијације, по једна за сваку displayвредност ЦСС својства која је наведена у наставку.

Група часова	ЦСС`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такође постоје, али су застареле од в3.2.0 . Они су приближно еквивалентни са .visible-*-block, осим са додатним посебним случајевима за <table>елементе који се односе на пребацивање.

Штампај часове

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

класе	Претраживач	Принт
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Сакривен	Видљиво
`.hidden-print`	Видљиво	Сакривен

Класа .visible-printтакође постоји, али је застарела од в3.2.0. Приближно је еквивалентно .visible-print-block, осим са додатним посебним случајевима за <table>елементе повезане.

Тест случајева

Промените величину прегледача или учитајте на различите уређаје да бисте тестирали прилагодљиве услужне класе.

Видљиво на...

Зелене ознаке за потврду означавају да је елемент видљив у вашем тренутном прозору за приказ.

Веома мали ✔ Видљиво на к-смалу

Мала ✔ Видљиво на малим

Средње ✔ Видљиво на медијуму

Велики ✔ Видљиво на великом

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

Средње и велике ✔ Видљиво на средњим и великим

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

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

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

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

Скривен на...

Овде, зелене ознаке за потврду такође означавају да је елемент скривен у вашем тренутном прозору за приказ.

Веома мали ✔ Скривен на к-смалу

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

Средње ✔ Скривен на медијуму

Велики ✔ Скривен на великом

Екстра мали и мали ✔ Скривен на х-малим и малим

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

Екстра мали и средњи ✔ Скривен на к-малим и средњим

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

Екстра мали и велики ✔ Скривено на х-малим и великим

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

Боотстрап-ов ЦСС је изграђен на Лессу, претпроцесору са додатном функционалношћу као што су променљиве, миксини и функције за компајлирање ЦСС-а. Они који желе да користе изворне датотеке Лесс уместо наших компајлираних ЦСС датотека могу користити бројне варијабле и миксине које користимо у оквиру оквира.

Грид варијабле и миксини су покривени у одељку Грид систем .

Компајлирање Боотстрапа

Боотстрап се може користити на најмање два начина: са преведеним ЦСС-ом или са изворним Лесс датотекама. Да бисте компајлирали Лесс датотеке, консултујте одељак Први кораци како бисте подесили своје развојно окружење за покретање потребних команди.

Алати за компилацију треће стране могу да раде са Боотстрапом, али их наш главни тим не подржава.

Променљиве

Променљиве се користе током целог пројекта као начин да се централизују и деле уобичајено коришћене вредности као што су боје, размаци или групе фонтова. За потпуни преглед, погледајте Цустомизер .

Боје

Лако користите две шеме боја: сиву и семантичку. Боје у нијансама сиве омогућавају брз приступ уобичајеним нијансама црне, док семантичке укључују различите боје које су додељене смисленим контекстуалним вредностима.

@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користи функцију, још једну сјајну алатку из Лесса, да аутоматски креира праву боју лебдења. Можете користити darken, lighten, saturate, и desaturate.

Типографија

Лако подесите фонт, величину текста, почетак и још много тога уз неколико брзих променљивих. Боотстрап их такође користи да обезбеди лаке типографске мешавине.

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

Компоненте

Компоненте кроз Боотстрап користе неке подразумеване променљиве за постављање уобичајених вредности. Ево најчешће коришћених.

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

Вендор микинс

Миксини добављача су миксини који помажу у подршци више претраживача укључивањем свих релевантних префикса добављача у ваш преведени ЦСС.

Величина кутије

Ресетујте модел кутије ваших компоненти са једним мешањем. За контекст, погледајте овај корисни чланак из Мозиле .

Миксин је застарео од в3.2.0, са увођењем Аутопрефикер-а. Да би сачувао компатибилност уназад, Боотстрап ће наставити да користи мешавину интерно до Боотстрап в4.

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

.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својство. Ако вам је потребна подршка за старије Андроид (пре-в4) и иОС уређаје (пре-иОС 5), користите застарели микс да покупите потребан -webkitпрефикс.

Миксин је застарео од в3.1.0, пошто Боотстрап званично не подржава застареле платформе које не подржавају стандардно својство. Да би сачувао компатибилност уназад, Боотстрап ће наставити да користи мешавину интерно до Боотстрап в4.

Обавезно користите 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;
}

Прелази

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

Миксини су застарели од в3.2.0, са увођењем Аутопрефикер-а. Да би сачувао компатибилност уназад, Боотстрап ће наставити да користи миксине интерно до Боотстрап в4.

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

Анимације

Један миксин за коришћење свих ЦСС3 својстава анимације у једној декларацији и других миксина за појединачна својства.

.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резервну верзију за ИЕ8.

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

Колумне

Генеришите колоне преко ЦСС-а у оквиру једног елемента.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Градијента

Лако претворите било које две боје у градијент позадине. Будите напреднији и поставите правац, користите три боје или користите радијални градијент. Са једним мешањем добијате све синтаксе са префиксом које ће вам требати.

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

Такође можете одредити угао стандардног двобојног линеарног градијента:

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

Ако вам је потребан градијент у стилу берберина, и то је лако. Само наведите једну боју и ми ћемо прекрити провидну белу траку.

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

Повећајте цену и уместо тога користите три боје. Подесите прву боју, другу боју, стопу боје друге боје (процентуална вредност попут 25%) и трећу боју са овим мешавинама:

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

Главу горе! Ако икада будете морали да уклоните градијент, обавезно уклоните све специфичне за ИЕ које filterсте можда додали. То можете учинити користећи .reset-filter()микин уз background-image: none;.

Утилити микинс

Услужни миксини су миксини који комбинују иначе неповезана својства ЦСС-а да би се постигао одређени циљ или задатак.

Цлеарфик

Заборавите додавање 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();
}

Ретина слике

Наведите две путање слике и димензије слике @1к, а Боотстрап ће обезбедити медијски упит @2к. Ако имате много слика за послуживање, размислите о писању ЦСС слике мрежњаче ручно у једном медијском упиту.

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

Док је Боотстрап изграђен на Лесс-у, он такође има званични Сасс порт . Одржавамо га у засебном ГитХуб спремишту и обрађујемо ажурирања помоћу скрипте за конверзију.

Шта је укључено

Пошто Сасс порт има посебан репо и служи мало другачијој публици, садржај пројекта се у великој мери разликује од главног пројекта Боотстрап. Ово осигурава да је Сасс порт што је могуће више компатибилан са Сасс системима.

Пут	Опис
`lib/`	Руби гем код (Сасс конфигурација, интеграције Раилс и Цомпасс)
`tasks/`	Скрипте за претварање (претварање узводно Лесс у Сасс)
`test/`	Компилацијски тестови
`templates/`	Манифест пакета Компас
`vendor/assets/`	Сасс, ЈаваСцрипт и датотеке фонтова
`Rakefile`	Интерни задаци, као што су грабљење и конверзија

Посетите ГитХуб спремиште Сасс порта да бисте видели ове датотеке у акцији.

Инсталација

За информације о томе како да инсталирате и користите Боотстрап за Сасс, консултујте реадме ГитХуб спремиште . То је најновији извор и укључује информације за коришћење са Раилс, Цомпасс и стандардним Сасс пројектима.

Боотстрап за Сасс

ЦСС

Преглед

ХТМЛ5 тип документа

Прво мобилни

Типографија и везе

Нормализе.цсс

Контејнери

Систем мреже

Увод

Медијски упити

Опције мреже

Пример: наслагано према хоризонтали

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

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

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

Пример: Обмотавање колоне

Ресетована колона се ресетује

Оффсетинг колоне

Угнеждене колоне

Редослед колона

Мање миксина и варијабли

Променљиве

Микинс

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

Типографија

Наслови

х1. Боотстрап наслов

х2. Боотстрап наслов

х3. Боотстрап наслов

х4. Боотстрап наслов

х5. Боотстрап наслов

х6. Боотстрап наслов

х1. Боотстрап наслов Секундарни текст

х2. Боотстрап наслов Секундарни текст

х3. Боотстрап наслов Секундарни текст

х4. Боотстрап наслов Секундарни текст

х5. Боотстрап наслов Секундарни текст

х6. Боотстрап наслов Секундарни текст

Боди цопи

Копија главног тела

Изграђен са мање

Инлине текстуални елементи

Означени текст

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

Прецртан текст

Уметнут текст

Подвучени текст

Мали текст

Одважан

Курзив

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

Класе поравнања

Трансформационе класе

Скраћенице

Основна скраћеница

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

Аддрессес

Блоцккуотес

Подразумевани блок цитат

Опције блок цитата

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

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

Листе

Унордеред

Наручено

Унстилед

У реду

Опис

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

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

Код

У реду

Унос корисника

Основни блок

Променљиве

Сампле оутпут

Табле

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

Пругасти редови

Компатибилност са више претраживача

Демо `:focus`стање

Упозорење о функционалности везе`<a>`

Опционе иконе са скривеним `.sr-only`ознакама