CSS
Глабальныя налады CSS, асноўныя элементы HTML, стылізаваныя і палепшаныя з дапамогай пашыраемых класаў, і пашыраная сістэма сеткі.
Агляд
Атрымайце кароткія звесткі аб ключавых элементах інфраструктуры Bootstrap, у тым ліку аб нашым падыходзе да лепшай, больш хуткай і моцнай вэб-распрацоўкі.
Тып дакумента HTML5
Bootstrap выкарыстоўвае пэўныя элементы HTML і ўласцівасці CSS, якія патрабуюць выкарыстання дакумента HTML5. Уключыце яго ў пачатку ўсіх вашых праектаў.
<!DOCTYPE html>
<html lang="en">
...
</html>Перш за ўсё мабільны
У Bootstrap 2 мы дадалі дадатковыя стылі, зручныя для мабільных прылад, для ключавых аспектаў структуры. З дапамогай Bootstrap 3 мы з самага пачатку перапісалі праект, каб ён стаў зручным для мабільных прылад. Замест таго, каб дадаваць дадатковыя стылі для мабільных прылад, яны запечаны прама ў сутнасці. Фактычна, Bootstrap перш за ўсё мабільны . Стылі Mobile First можна знайсці ва ўсёй бібліятэцы, а не ў асобных файлах.
Каб забяспечыць належнае адлюстраванне і сэнсарнае маштабаванне, дадайце метатэг акна прагляду ў свой <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Вы можаце адключыць магчымасці маштабавання на мабільных прыладах, дадаўшы user-scalable=noў метатэг viewport. Гэта адключае маштабаванне, што азначае, што карыстальнікі могуць толькі пракручваць, і ў выніку ваш сайт будзе больш падобны на роднае прыкладанне. Увогуле, мы не рэкамендуем гэта на кожным сайце, таму будзьце асцярожныя!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Тыпаграфіка і спасылкі
Bootstrap задае асноўныя глабальныя стылі адлюстравання, тыпаграфікі і спасылак. У прыватнасці, мы:
- Усталяваць
background-color: #fff;на стbody - Выкарыстоўвайце атрыбуты
@font-family-base,@font-size-base, і ў якасці нашай друкарскай базы@line-height-base - Усталюйце глабальны колер спасылкі праз
@link-colorі прымяніце падкрэсліванне спасылкі толькі на:hover
Гэтыя стылі можна знайсці ў scaffolding.less.
Нармалізаваць.css
Для паляпшэння візуалізацыі ў розных браўзерах мы выкарыстоўваем Normalize.css , праект Нікаласа Галахера і Джонатана Ніла .
Кантэйнеры
Bootstrap патрабуе змяшчальнага элемента, каб абгарнуць змесціва сайта і размясціць нашу сістэму сеткі. Вы можаце выбраць адзін з двух кантэйнераў для выкарыстання ў сваіх праектах. Звярніце ўвагу, што з-за paddingі большага, ні адзін з кантэйнераў не ўкладваецца.
Выкарыстоўвайце .containerдля адаптыўнага кантэйнера фіксаванай шырыні.
<div class="container">
...
</div>Выкарыстоўвайце .container-fluidдля кантэйнера поўнай шырыні, які ахоплівае ўсю шырыню вашага акна прагляду.
<div class="container-fluid">
...
</div>Сеткавая сістэма
Bootstrap уключае ў сябе адаптыўную мабільную сістэму першай вадкай сеткі, якая належным чынам маштабуецца да 12 слупкоў па меры павелічэння памеру прылады або прагляду. Ён уключае загадзя вызначаныя класы для простых варыянтаў макета, а таксама магутныя міксіны для стварэння больш семантычных макетаў .
Уводзіны
Сістэмы сеткі выкарыстоўваюцца для стварэння макетаў старонак праз шэраг радкоў і слупкоў, у якіх змяшчаецца ваш кантэнт. Вось як працуе сеткавая сістэма Bootstrap:
- Для правільнага выраўноўвання і запаўнення радкі павінны размяшчацца ў межах
.container(з фіксаванай шырынёй) або.container-fluid(на поўную шырыню). - Выкарыстоўвайце радкі для стварэння гарызантальных груп слупкоў.
- Змесціва павінна размяшчацца ў слупках, і толькі слупкі могуць быць непасрэднымі даччынымі элементамі радкоў.
- Загадзя вызначаныя класы сеткі, такія як
.rowі.col-xs-4даступныя для хуткага стварэння макетаў сеткі. Менш міксінаў таксама можна выкарыстоўваць для больш семантычных макетаў. - Слупкі ствараюць жолабы (прамежкі паміж змесцівам слупкоў) праз
padding. Гэта запаўненне зрушана ў радках для першага і апошняга слупка праз адмоўнае поле на.rows. - Адмоўная маржа з'яўляецца прычынай таго, што прыклады ніжэй маюць адступ. Гэта адбываецца так, што змесціва ў слупках сеткі выраўноўваецца з несеткавым змесцівам.
- Слупкі сеткі ствараюцца шляхам указання колькасці дванаццаці даступных слупкоў, якія вы хочаце ахапіць. Напрыклад, тры роўныя слупкі будуць выкарыстоўваць тры
.col-xs-4. - Калі ў адным радку размешчана больш за 12 слупкоў, кожная група дадатковых слупкоў будзе пераходзіць на новы радок як адно цэлае.
- Класы сеткі прымяняюцца да прылад з шырынёй экрана, большай або роўнай памерам кропкі супыну, і перавызначаюць класы сеткі, прызначаныя для меншых прылад. Такім чынам, напрыклад, прымяненне любога
.col-md-*класа да элемента паўплывае не толькі на яго стыль на сярэдніх прыладах, але і на вялікіх прыладах, калі.col-lg-*клас адсутнічае.
Звярніце ўвагу на прыклады прымянення гэтых прынцыпаў у вашым кодзе.
Медыя-запыты
Мы выкарыстоўваем наступныя медыя-запыты ў нашых файлах Less, каб стварыць ключавыя кропкі супыну ў нашай сетцы.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }Час ад часу мы пашыраем гэтыя медыя-запыты, max-widthкаб абмежаваць CSS больш вузкім наборам прылад.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }Параметры сеткі
Паглядзіце, як аспекты сеткавай сістэмы Bootstrap працуюць на некалькіх прыладах з дапамогай зручнай табліцы.
| Вельмі маленькія прылады Тэлефоны (<768 пікселяў) | Малыя прылады Планшэты (≥768 пікселяў) | Сярэднія прылады Настольныя кампутары (≥992 пікселяў) | Вялікія прылады Настольныя кампутары (≥1200 пікселяў) | |
|---|---|---|---|---|
| Паводзіны сеткі | Увесь час гарызантальна | Згорнута для пачатку, гарызантальна над кропкамі перапынку | ||
| Шырыня кантэйнера | Няма (аўта) | 750 пікселяў | 970 пікселяў | 1170 пікселяў |
| Прэфікс класа | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # слупкоў | 12 | |||
| Шырыня слупка | Аўто | ~62 пікселяў | ~81 пікс | ~97 пікселяў |
| Шырыня жолабы | 30 пікселяў (15 пікселяў з кожнага боку слупка) | |||
| Нестабільны | так | |||
| Залікі | так | |||
| Упарадкаванне слупкоў | так | |||
Прыклад: складваецца па гарызанталі
Выкарыстоўваючы адзіны набор .col-md-*класаў сетак, вы можаце стварыць базавую сістэму сетак, якая спачатку складзена ў стос на мабільных прыладах і планшэтах (ад вельмі малога да малога дыяпазону), перш чым стане гарызантальнай на настольных (сярэдніх) прыладах. Размесціце слупкі сеткі ў любым месцы .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Прыклад: ёмістасць для вадкасці
Ператварыце любы макет сеткі з фіксаванай шырынёй у макет поўнай шырыні, змяніўшы крайні .containerна .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Прыклад: мабільны і працоўны стол
Не хочаце, каб вашыя калонкі проста складваліся ў меншыя прылады? Выкарыстоўвайце дадатковыя малыя і сярэднія класы сеткі прылад, дадаючы .col-xs-* .col-md-*ў свае слупкі. Глядзіце прыклад ніжэй, каб лепш зразумець, як усё гэта працуе.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Прыклад: мабільны тэлефон, планшэт, працоўны стол
Абапірайцеся на папярэдні прыклад, ствараючы яшчэ больш дынамічныя і магутныя макеты з .col-sm-*класамі планшэтаў.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>Прыклад: перанос слупкоў
Калі ў адным радку размешчана больш за 12 слупкоў, кожная група дадатковых слупкоў будзе пераходзіць на новы радок як адно цэлае.
.col-xs-9
.col-xs-4
Паколькі 9 + 4 = 13 > 12, гэты div з 4 слупкоў пераносіцца ў новы радок як адна сумежная адзінка.
Паколькі 9 + 4 = 13 > 12, гэты div з 4 слупкоў пераносіцца ў новы радок як адна сумежная адзінка.
.col-xs-6
Наступныя слупкі працягваюцца ўздоўж новага радка.
Наступныя слупкі працягваюцца ўздоўж новага радка.
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>Спагадны слупок скідаецца
З чатырма даступнымі ярусамі сеткі вы абавязкова сутыкнецеся з праблемамі, калі ў пэўных кропках разрыву вашы слупкі не ачышчаюцца зусім правільна, бо адзін вышэйшы за другі. Каб выправіць гэта, выкарыстоўвайце камбінацыю a .clearfixі нашых спагадных класаў утыліт .
.col-xs-6 .col-sm-3
Змяніце памер акна прагляду або праверце яго на тэлефоне для прыкладу.
Змяніце памер акна прагляду або праверце яго на тэлефоне для прыкладу.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>У дадатак да ачысткі слупкоў у адаптыўных кропках супыну вам можа спатрэбіцца скінуць зрухі, штуршкі або выцягванні . Паглядзіце гэта ў дзеянні ў прыкладзе сеткі .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>Зрушэнне слупкоў
Перамясціць слупкі ўправа з дапамогай .col-md-offset-*класаў. Гэтыя класы павялічваюць левае поле слупка за слупком *. Напрыклад, .col-md-offset-4перамяшчаецца .col-md-4па чатырох слупках.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Вы таксама можаце перавызначыць зрухі ад ніжніх узроўняў сеткі з дапамогай .col-*-offset-0класаў.
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>Укладзеныя слупкі
Каб укласці свой кантэнт у сетку па змаўчанні, дадайце новы .rowі набор .col-sm-*слупкоў у існуючы .col-sm-*слупок. Укладзеныя радкі павінны ўключаць набор слупкоў, якія ў суме складаюць 12 або менш (неабавязкова выкарыстоўваць усе 12 даступных слупкоў).
Узровень 1: .col-sm-9
Узровень 2: .col-xs-8 .col-sm-6
Узровень 2: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>Упарадкаванне слупкоў
Лёгка змяняйце парадак нашых убудаваных слупкоў сеткі з дапамогай класаў .col-md-push-*- .col-md-pull-*мадыфікатараў.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>Менш міксінаў і зменных
У дадатак да загадзя створаных класаў сеткі для хуткай раскладкі, Bootstrap уключае Less variables і mixins для хуткай генерацыі вашых уласных простых семантычных макетаў.
Пераменныя
Зменныя вызначаюць колькасць слупкоў, шырыню жолаба і кропку медыя-запыту, з якой пачынаюцца плаваючыя слупкі. Мы выкарыстоўваем іх для стварэння загадзя вызначаных класаў сеткі, задакументаваных вышэй, а таксама для карыстальніцкіх міксінаў, пералічаных ніжэй.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Міксіны
Міксіны выкарыстоўваюцца ў спалучэнні са зменнымі сеткі для стварэння семантычнага CSS для асобных слупкоў сеткі.
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}Прыклад выкарыстання
Вы можаце змяніць зменныя на ўласныя карыстальніцкія значэнні або проста выкарыстоўваць міксіны з іх значэннямі па змаўчанні. Вось прыклад выкарыстання налад па змаўчанні для стварэння макета ў два слупкі з прамежкам паміж імі.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>Тыпаграфіка
Загалоўкі
Усе загалоўкі HTML, <h1>да <h6>, даступныя. .h1скразныя .h6класы таксама даступныя, калі вы хочаце, каб стыль шрыфта адпавядаў загалоўку, але пры гэтым хочаце, каб ваш тэкст адлюстроўваўся ў радку.
h1. Загаловак Bootstrap |
Паўтлусты 36 пікселяў |
h2. Загаловак Bootstrap |
Паўтлусты 30 пікселяў |
h3. Загаловак Bootstrap |
Паўтлусты 24 пікселя |
h4. Загаловак Bootstrap |
Паўтлусты 18 пікселяў |
h5. Загаловак Bootstrap |
Паўтлусты 14 пікселяў |
h6. Загаловак Bootstrap |
Паўтлусты 12 пікселяў |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>Стварыце больш лёгкі другасны тэкст у любым загалоўку з агульным <small>тэгам або .smallкласам.
h1. Загаловак Bootstrap Другасны тэкст |
h2. Загаловак Bootstrap Другасны тэкст |
h3. Загаловак Bootstrap Другасны тэкст |
h4. Загаловак Bootstrap Другасны тэкст |
h5. Загаловак Bootstrap Другасны тэкст |
h6. Загаловак Bootstrap Другасны тэкст |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>Асноўная копія
Глабальнае значэнне Bootstrap па змаўчанні font-sizeскладае 14 пікселяў з line-heightзначэннем 1,428 . Гэта датычыцца <body>і ўсіх абзацаў. Акрамя таго, <p>(абзацы) атрымліваюць ніжняе поле роўнае палове іх вылічанай вышыні радка (10 пікселяў па змаўчанні).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Мецэнат sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>Вядучая асноўная копія
Вылучыце абзац, дадаўшы .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>Пабудаваны з Less
Тыпаграфічны маштаб заснаваны на дзвюх зменных Less у variables.less : @font-size-baseі @line-height-base. Першы - гэта базавы памер шрыфта, які выкарыстоўваецца паўсюль, а другі - базавая вышыня лініі. Мы выкарыстоўваем гэтыя зменныя і некаторую простую матэматыку для стварэння палёў, водступаў і вышынь радкоў для ўсіх нашых тыпаў і шмат іншага. Наладзьце іх, і Bootstrap адаптуецца.
Убудаваныя тэкставыя элементы
Пазначаны тэкст
Каб вылучыць фрагмент тэксту з-за яго рэлевантнасці ў іншым кантэксце, выкарыстоўвайце <mark>тэг.
Вы можаце выкарыстоўваць пазнаку длявылучыцьтэкст.
You can use the mark tag to <mark>highlight</mark> text.Выдалены тэкст
Для абазначэння блокаў тэксту, якія былі выдаленыя, выкарыстоўвайце <del>тэг.
Гэты радок тэксту павінен разглядацца як выдалены тэкст.
<del>This line of text is meant to be treated as deleted text.</del>Закрэслены тэкст
Для абазначэння блокаў тэксту, якія больш не актуальныя, выкарыстоўвайце <s>тэг.
Гэты радок тэксту павінен разглядацца як недакладны.
<s>This line of text is meant to be treated as no longer accurate.</s>Устаўлены тэкст
Для абазначэння дапаўненняў у дакуменце выкарыстоўвайце <ins>тэг.
Гэты радок тэксту павінен разглядацца як дадатак да дакумента.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Падкрэслены тэкст
Каб падкрэсліць тэкст, выкарыстоўвайце <u>тэг.
Гэты радок тэксту будзе адлюстроўвацца як падкрэслены
<u>This line of text will render as underlined</u>Скарыстайцеся стандартнымі тэгамі вылучэння HTML з лёгкімі стылямі.
Дробны тэкст
Для зняцця выдзялення радкоў або блокаў тэксту выкарыстоўвайце <small>тэг, каб усталяваць тэкст памерам 85% ад бацькоўскага памеру. Элементы загалоўка атрымліваюць свае ўласныя font-sizeдля ўкладзеных <small>элементаў.
У якасці альтэрнатывы вы можаце выкарыстоўваць убудаваны элемент .smallзамест любога <small>.
Гэты радок тэксту павінен разглядацца як дробны шрыфт.
<small>This line of text is meant to be treated as fine print.</small>Тлусты
Для вылучэння фрагмента тэксту з большай таўшчынёй шрыфта.
Наступны фрагмент тэксту адлюстроўваецца тлустым шрыфтам .
<strong>rendered as bold text</strong>Курсіў
Для вылучэння фрагмента тэксту курсівам.
Наступны фрагмент тэксту адлюстраваны курсівам .
<em>rendered as italicized text</em>Чаргуйце элементы
Не саромейцеся выкарыстоўваць <b>і <i>ў HTML5. <b>прызначана для вылучэння слоў або фраз без перадачы дадатковай важнасці, у той час як <i>у асноўным для голасу, тэхнічных тэрмінаў і г.д.
Класы выраўноўвання
Лёгка выраўноўвайце тэкст па кампанентах з дапамогай класаў выраўноўвання тэксту.
Тэкст выраўнаваны па левым краі.
Тэкст выраўнаваны па цэнтры.
Тэкст выраўнаваны па правым краі.
Выраўнаваны тэкст.
Няма пераносу тэксту.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>Класы трансфармацыі
Пераўтварэнне тэксту ў кампанентах з дапамогай класаў капіталізацыі тэксту.
Тэкст у малым рэгістры.
Тэкст у верхнім рэгістры.
Тэкст з вялікай літары.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Скарачэнні
Стылізаваная рэалізацыя элемента HTML <abbr>для абрэвіятур і абрэвіятур для паказу разгорнутай версіі пры навядзенні курсора. Абрэвіятуры з titleатрыбутам маюць светлую пункцірную ніжнюю мяжу і даведачны курсор пры навядзенні курсора, забяспечваючы дадатковы кантэкст пры навядзенні курсора і карыстальнікам дапаможных тэхналогій.
Асноўная абрэвіятура
Абрэвіятура слова attr - attr .
<abbr title="attribute">attr</abbr>Ініцыялізм
Дадайце .initialismда абрэвіятуры крыху меншы памер шрыфта.
HTML - гэта лепшае з часоў нарэзанага хлеба.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Адрасы
Прадстаўце кантактную інфармацыю для бліжэйшага продка або ўсёй працы. Захавайце фарматаванне, заканчваючы ўсе радкі на <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Поўнае імя
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Поўнае імя
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>Цытаты
Для цытавання блокаў кантэнту з іншай крыніцы ў вашым дакуменце.
Цытата па змаўчанні
Абгарніце <blockquote>любы HTML у якасці цытаты. Для прамых двукоссяў мы рэкамендуем <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Параметры блокавых цытат
Змены стылю і зместу для простых варыяцый стандарту <blockquote>.
Называнне крыніцы
Дадайце <footer>для ідэнтыфікацыі крыніцы. Абгарніце назву зыходнага твора ў <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>Альтэрнатыўныя дысплеі
Дадайце .blockquote-reverseдля цытаты з выраўнаваным па правым краі змесцівам.
<blockquote class="blockquote-reverse">
...
</blockquote>Спісы
Неўпарадкаваны
Спіс элементаў, у якіх парадак відавочна не мае значэння.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Цэлы лік нападаў lorem і маса
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Замовілі
Спіс элементаў, у якіх парадак відавочна мае значэнне .
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Цэлы лік нападаў lorem і маса
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Нестыляваны
Выдаліце стандартнае list-styleі левае поле для элементаў спісу (толькі для непасрэдных даччыных элементаў). Гэта адносіцца толькі да непасрэдных даччыных элементаў спісу , што азначае, што вам таксама трэба будзе дадаць клас для любых укладзеных спісаў.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Цэлы лік нападаў lorem і маса
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>У радку
Размясціце ўсе элементы спіса ў адным радку з display: inline-block;лёгкай пракладкай.
- Lorem ipsum
- Phasellus iaculis
- Нула волютпат
<ul class="list-inline">
<li>...</li>
</ul>Апісанне
Спіс тэрмінаў з адпаведнымі апісаннямі.
- Спісы апісанняў
- Спіс апісанняў ідэальна падыходзіць для вызначэння тэрмінаў.
- Эўізмод
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Порта Малесуада
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Гарызантальнае апісанне
Выбудуйце тэрміны і апісанні <dl>побач. Пачынаецца са стэкам, як па змаўчанні <dl>, але калі панэль навігацыі пашыраецца, пашыраюцца і гэтыя.
- Спісы апісанняў
- Спіс апісанняў ідэальна падыходзіць для вызначэння тэрмінаў.
- Эўізмод
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Порта Малесуада
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Аўтаматычнае абразанне
Гарызантальныя спісы апісанняў будуць абрэзаць тэрміны, якія занадта доўгія, каб змясціцца ў левым слупку text-overflow. У больш вузкіх акнах прагляду яны зменяцца на макет са стосам па змаўчанні.
Код
У радку
Абгарніце ўбудаваныя фрагменты кода<code> .
Напрыклад,
<section>трэба абгарнуць як убудаваны.
For example, <code><section></code> should be wrapped as inline.Карыстальніцкі ўвод
Выкарыстоўваць<kbd> каб пазначыць увод, які звычайна ўводзіцца з клавіятуры.
Для пераключэння каталогаў увядзіце,
cdа затым назву каталога.
Каб змяніць налады, націсніце ctrl + ,
Каб змяніць налады, націсніце ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>Базавы блок
Выкарыстоўвайце <pre>для некалькіх радкоў кода. Не забудзьцеся зняць любыя вуглавыя дужкі ў кодзе для правільнай візуалізацыі.
<p>Узор тэксту тут...</p>
<pre><p>Sample text here...</p></pre>Пры жаданні вы можаце дадаць.pre-scrollable клас, які будзе ўсталёўваць максімальную вышыню 350 пікселяў і забяспечваць паласу пракруткі па восі Y.
Пераменныя
Для ўказання зменных выкарыстоўвайце <var>тэг.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Прыклад выхаду
Для ўказання блокаў узору вываду з праграмы выкарыстоўвайце <samp>тэг.
Гэты тэкст павінен разглядацца як узор выхаду з кампутарнай праграмы.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Табліцы
Базавы прыклад
Для асноўнага стылю — лёгкая абіўка і толькі гарызантальныя падзельнікі — дадайце базавы клас .tableу любы <table>. Гэта можа здацца надзвычай залішнім, але, улічваючы шырокае выкарыстанне табліц для іншых плагінаў, такіх як календары і выбар дат, мы вырашылі ізаляваць нашы ўласныя стылі табліц.
| # | Імя | Прозвішча | Імя карыстальніка |
|---|---|---|---|
| 1 | Марк | Ота | @mdo |
| 2 | Якаў | Торнтан | @тоўсты |
| 3 | Лары | птушка |
<table class="table">
...
</table>Паласатыя шэрагі
Выкарыстоўвайце .table-striped, каб дадаць зебрападобныя паласы ў любы радок табліцы ў <tbody>.
Кросбраузерная сумяшчальнасць
Табліцы з палосамі афармляюцца з дапамогай :nth-childселектара CSS, які недаступны ў Internet Explorer 8.
| # | Імя | Прозвішча | Імя карыстальніка |
|---|---|---|---|
| 1 | Марк | Ота | @mdo |
| 2 | Якаў | Торнтан | @тоўсты |
| 3 | Лары | птушка |
<table class="table table-striped">
...
</table>Абрамлены стол
Дадайце .table-borderedдля межаў з усіх бакоў табліцы і вочак.
| # | Імя | Прозвішча | Імя карыстальніка |
|---|---|---|---|
| 1 | Марк | Ота | @mdo |
| 2 | Якаў | Торнтан | @тоўсты |
| 3 | Лары | птушка |
<table class="table table-bordered">
...
</table>Навядзіце радкі
Дадайце .table-hover, каб уключыць стан навядзення на радкі табліцы ў <tbody>.
| # | Імя | Прозвішча | Імя карыстальніка |
|---|---|---|---|
| 1 | Марк | Ота | @mdo |
| 2 | Якаў | Торнтан | @тоўсты |
| 3 | Лары | птушка |
<table class="table table-hover">
...
</table>Сціснутая табліца
Дадайце .table-condensed, каб зрабіць табліцы больш кампактнымі, скараціўшы пракладку вочак напалову.
| # | Імя | Прозвішча | Імя карыстальніка |
|---|---|---|---|
| 1 | Марк | Ота | @mdo |
| 2 | Якаў | Торнтан | @тоўсты |
| 3 | Птушка Лары | ||
<table class="table table-condensed">
...
</table>Кантэкстныя заняткі
Выкарыстоўвайце кантэкстныя класы для афарбоўкі радкоў табліцы або асобных вочак.
| Клас | Апісанне |
|---|---|
.active |
Прымяняе колер навядзення да пэўнага радка або ячэйкі |
.success |
Паказвае на паспяховае або станоўчае дзеянне |
.info |
Пазначае нейтральную інфарматыўную змену або дзеянне |
.warning |
Пазначае папярэджанне, якое можа запатрабаваць увагі |
.danger |
Паказвае на небяспечнае або патэнцыйна негатыўнае дзеянне |
| # | Загаловак слупка | Загаловак слупка | Загаловак слупка |
|---|---|---|---|
| 1 | Змест слупка | Змест слупка | Змест слупка |
| 2 | Змест слупка | Змест слупка | Змест слупка |
| 3 | Змест слупка | Змест слупка | Змест слупка |
| 4 | Змест слупка | Змест слупка | Змест слупка |
| 5 | Змест слупка | Змест слупка | Змест слупка |
| 6 | Змест слупка | Змест слупка | Змест слупка |
| 7 | Змест слупка | Змест слупка | Змест слупка |
| 8 | Змест слупка | Змест слупка | Змест слупка |
| 9 | Змест слупка | Змест слупка | Змест слупка |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>Перадача значэння дапаможных тэхналогій
Выкарыстанне колеру для дадання сэнсу радку табліцы або асобнай ячэйцы забяспечвае толькі візуальную індыкацыю, якая не будзе перададзена карыстальнікам дапаможных тэхналогій, такіх як праграмы чытання з экрана. Пераканайцеся, што інфармацыя, пазначаная колерам, відавочная з самага зместу (бачны тэкст у адпаведным радку/ячэйцы табліцы), або ўключана з дапамогай альтэрнатыўных сродкаў, такіх як дадатковы тэкст, схаваны з дапамогай.sr-only класам.
Адаптыўныя табліцы
Стварыце адаптыўныя табліцы, абгарнуўшы любы .tableў.table-responsive каб прымусіць іх пракручвацца гарызантальна на невялікіх прыладах (менш за 768 пікселяў). Пры праглядзе на што-небудзь шырынёй больш за 768 пікселяў вы не ўбачыце ніякай розніцы ў гэтых табліцах.
Вертыкальнае абразанне/абсячэнне
Адаптыўныя табліцы выкарыстоўваюць overflow-y: hidden, які выразае любы кантэнт, які выходзіць за ніжні або верхні край табліцы. У прыватнасці, гэта можа адрэзаць выпадальныя меню і іншыя віджэты іншых вытворцаў.
Firefox і наборы палёў
У Firefox ёсць нейкі нязручны стыль набору палёў width, які перашкаджае адаптыўнай табліцы. Гэта нельга перавызначыць без узлому Firefox, які мы не даем у Bootstrap:
@-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%;прымяняюцца па змаўчанні ў Bootstrap. Ва ўбудаваных формах мы скідаем гэта, width: auto;каб некалькі элементаў кіравання маглі знаходзіцца ў адным радку. У залежнасці ад вашага макета можа спатрэбіцца дадатковая нестандартная шырыня.
Заўсёды дадавайце меткі
Праграма чытання з экрана будзе мець праблемы з вашымі формамі, калі вы не ўключыце метку для кожнага ўводу. Для гэтых убудаваных формаў вы можаце схаваць меткі з дапамогай .sr-onlyкласа. Існуюць іншыя альтэрнатыўныя метады прадастаўлення меткі для дапаможных тэхналогій, такія як атрыбут aria-label, aria-labelledbyабо . titleКалі ніводнага з іх няма, праграмы чытання з экрана могуць выкарыстоўваць placeholderатрыбут, калі ён ёсць, але звярніце ўвагу, што выкарыстанне placeholderў якасці замены для іншых метадаў маркіроўкі не рэкамендуецца.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>Гарызантальная форма
Выкарыстоўвайце загадзя вызначаныя класы сеткі Bootstrap, каб выраўнаваць цэтлікі і групы элементаў кіравання формы ў гарызантальным макеце шляхам дадання .form-horizontalў форму (якая неабавязкова павінна быць <form>). Гэта змяняе .form-groups, каб паводзіць сябе як радкі сеткі, таму няма неабходнасці ў .row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>Падтрымліваюцца элементы кіравання
Прыклады стандартных элементаў кіравання формамі, якія падтрымліваюцца ў прыкладзе макета формы.
Уваходы
Самы распаўсюджаны кантроль формы, тэкставыя палі ўводу. Уключае падтрымку ўсіх тыпаў HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, і color.
Патрабуецца дэкларацыя тыпу
Уводы будуць цалкам стылізаваныя толькі ў тым выпадку, калі яны typeправільна заяўлены.
<input type="text" class="form-control" placeholder="Text input">Уваходныя групы
Каб дадаць інтэграваны тэкст або кнопкі да і/ці пасля любога тэкставага элемента <input>, праверце кампанент групы ўводу .
Тэкставае поле
Элемент кіравання формай, які падтрымлівае некалькі радкоў тэксту. Пры неабходнасці змяніце rowsатрыбут.
<textarea class="form-control" rows="3"></textarea>Сцяжкі і радыё
Сцяжкі прызначаны для выбару аднаго або некалькіх варыянтаў у спісе, у той час як радыё - для выбару аднаго варыянту з многіх.
Адключаныя сцяжкі і радыё падтрымліваюцца, але каб забяспечыць «недазволены» курсор пры навядзенні курсора на бацькоўскі элемент <label>, вам трэба будзе дадаць .disabledклас да бацькоўскага элемента .radio, .radio-inline, .checkboxабо .checkbox-inline.
Па змаўчанні (у стос)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—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—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>Убудаваныя сцяжкі і радыё
Выкарыстоўвайце класы .checkbox-inlineабо .radio-inlineна шэрагу сцяжкоў або радыё для элементаў кіравання, якія з'яўляюцца ў адным радку.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>Сцяжкі і радыё без тэксту надпісу
Калі ў вас няма тэксту ў <label>, увод размешчаны так, як вы чакаеце. У цяперашні час працуе толькі на неўбудаваных сцяжках і радыё. Не забудзьце пазначыць некаторую форму дапаможных тэхналогій (напрыклад, выкарыстанне aria-label).
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>Выбірае
Звярніце ўвагу, што многія родныя меню выбару, а менавіта ў Safari і Chrome, маюць закругленыя куты, якія нельга змяніць праз border-radiusуласцівасці.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Для <select>элементаў кіравання з multipleатрыбутам некалькі параметраў паказваюцца па змаўчанні.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Статычны кантроль
Калі вам трэба размясціць звычайны тэкст побач з этыкеткай формы ў форме, выкарыстоўвайце .form-control-staticклас на <p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>Стан факусіроўкі
Мы выдаляем outlineстылі па змаўчанні з некаторых элементаў кіравання формай і ўжываем box-shadowзамест іх для :focus.
Дэманстрацыйны :focusстан
Прыведзены вышэй прыклад уводу выкарыстоўвае ўласныя стылі ў нашай дакументацыі, каб прадэманстраваць :focusстан на .form-control.
Інвалідны стан
Дадайце disabledлагічны атрыбут да ўводу, каб прадухіліць узаемадзеянне карыстальніка. Адключаныя ўводы выглядаюць святлей і дадаюць not-allowedкурсор.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Адключаныя наборы палёў
Дадайце disabledатрыбут у a , каб адначасова <fieldset>адключыць усе элементы кіравання ў межах .<fieldset>
Засцярога адносна функцыянальнасці спасылак<a>
Па змаўчанні браўзеры будуць разглядаць усе ўласныя элементы кіравання формай ( <input>, <select>і <button>элементы) унутры <fieldset disabled>як адключаныя, прадухіляючы ўзаемадзеянне з імі як клавіятурай, так і мышшу. Аднак, калі ваша форма таксама ўключае <a ... class="btn btn-*">элементы, ім будзе нададзены толькі стыль pointer-events: none. Як было адзначана ў раздзеле аб адключаным стане для кнопак (і ў прыватнасці ў падраздзеле для прывязных элементаў), гэта ўласцівасць CSS яшчэ не стандартызавана і не цалкам падтрымліваецца ў Opera 18 і ніжэй або ў Internet Explorer 11, і выйграла Не перашкаджае карыстальнікам клавіятуры засяродзіцца або актываваць гэтыя спасылкі. Такім чынам, каб быць у бяспецы, выкарыстоўвайце ўласны JavaScript, каб адключыць такія спасылкі.
Кросбраузерная сумяшчальнасць
У той час як Bootstrap будзе прымяняць гэтыя стылі ва ўсіх браўзерах, Internet Explorer 11 і ніжэй не цалкам падтрымліваюць disabledатрыбут на <fieldset>. Выкарыстоўвайце карыстальніцкі JavaScript, каб адключыць набор палёў у гэтых браўзерах.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>Стан толькі для чытання
Дадайце readonlyлагічны атрыбут да ўводу, каб прадухіліць змяненне значэння ўводу. Уводы толькі для чытання выглядаюць больш светлымі (як і адключаныя), але захоўваюць стандартны курсор.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Тэкст даведкі
Тэкст даведкі на ўзроўні блока для элементаў кіравання формай.
Звязванне тэксту даведкі з элементамі кіравання формай
Тэкст даведкі павінен быць відавочна звязаны з элементам кіравання формай, да якога ён адносіцца, выкарыстоўваючы aria-describedbyатрыбут. Гэта гарантуе, што дапаможныя тэхналогіі - такія як праграмы чытання з экрана - будуць агучваць гэты тэкст даведкі, калі карыстальнік засяроджваецца або ўводзіць элемент кіравання.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>Станы праверкі
Bootstrap уключае стылі праверкі памылак, папярэджанняў і паспяховых станаў у элементах кіравання формамі. Каб выкарыстоўваць, дадайце .has-warning, .has-error, або .has-successда бацькоўскага элемента. Любы .control-label, .form-control, і .help-blockўнутры гэтага элемента атрымаюць стылі праверкі.
Перадача стану праверкі карыстальнікам дапаможных тэхналогій і дальтонікам
Выкарыстанне гэтых стыляў праверкі для абазначэння стану элемента кіравання формай забяспечвае толькі візуальную каляровую індыкацыю, якая не будзе перададзена карыстальнікам дапаможных тэхналогій - такіх як праграмы чытання з экрана - або карыстальнікам з дальтонікам.
Пераканайцеся, што таксама прадастаўляецца альтэрнатыўнае ўказанне стану. Напрыклад, вы можаце ўключыць падказку аб стане ў сам <label>тэкст элемента кіравання формай (як у выпадку з наступным прыкладам кода), уключыць Glyphicon (з адпаведным альтэрнатыўным тэкстам з выкарыстаннем .sr-onlyкласа - гл. прыклады Glyphicon ), або шляхам прадастаўлення дадатковы тэкставы блок даведкі. Спецыяльна для дапаможных тэхналогій несапраўдным элементам кіравання формай таксама можа быць прызначаны aria-invalid="true"атрыбут.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>З дадатковымі значкамі
Вы таксама можаце дадаць дадатковыя значкі зваротнай сувязі з даданнем .has-feedbackзначка і правага значка.
Значкі зваротнай сувязі працуюць толькі з тэкставымі <input class="form-control">элементамі.
Значкі, этыкеткі і групы ўводу
Для ўводаў без цэтліка і для груп уводу з надбудовай справа патрабуецца ручное размяшчэнне значкоў зваротнай сувязі . Настойліва рэкамендуецца пазначаць цэтлікі для ўсіх уводаў з меркаванняў даступнасці. Калі вы хочаце забараніць паказ цэтлікаў, схавайце іх з дапамогай .sr-onlyкласа. Калі вы павінны абысціся без этыкетак, адрэгулюйце topзначэнне значка зваротнай сувязі. Для груп уводу адрэгулюйце адпаведнае rightзначэнне ў пікселях у залежнасці ад шырыні вашага адона.
Перадача значэння значка дапаможным тэхналогіям
Каб пераканацца, што дапаможныя тэхналогіі - такія як праграмы чытання з экрана - правільна перадаюць значэнне значка, дадатковы схаваны тэкст павінен быць уключаны ў .sr-onlyклас і відавочна звязаны з элементам кіравання формай, да якога ён адносіцца aria-describedby. У якасці альтэрнатывы пераканайцеся, што значэнне (напрыклад, той факт, што ёсць папярэджанне для пэўнага поля ўводу тэксту) перадаецца ў іншай форме, напрыклад, змяняючы тэкст фактычнага элемента <label>кіравання формай.
Нягледзячы на тое, што ў наступных прыкладах ужо згадваецца стан праверкі адпаведных элементаў кіравання формамі ў самім <label>тэксце, прыведзеная вышэй тэхніка (з выкарыстаннем .sr-onlyтэксту і aria-describedby) была ўключана ў ілюстрацыйных мэтах.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>Дадатковыя значкі ў гарызантальнай і ўбудаванай форме
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>Дадатковыя значкі са схаванымі .sr-onlyцэтлікамі
Калі вы выкарыстоўваеце .sr-onlyклас, каб схаваць элементы кіравання формы <label>(замест выкарыстання іншых параметраў маркіроўкі, такіх як aria-labelатрыбут), Bootstrap аўтаматычна адкарэктуе становішча значка пасля таго, як ён будзе дададзены.
(поспех)
@
(поспех)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>Кантрольны памер
Усталюйце вышыню з дапамогай такіх класаў .input-lg, а шырыню - з дапамогай класаў слупкоў сеткі, такіх як .col-lg-*.
Памер вышыні
Стварыце больш высокія або карацейшыя элементы кіравання формы, якія адпавядаюць памерам кнопак.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>Гарызантальная форма памераў групы
Хутка змяняйце памер цэтлікаў і элементаў кіравання формамі .form-horizontal, дадаючы .form-group-lgабо .form-group-sm.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>Прамер калоны
Абгарніце ўводы ў слупкі сеткі або любы карыстальніцкі бацькоўскі элемент, каб лёгка забяспечыць жаданую шырыню.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>Гузікі
Тэгі для кнопак
Выкарыстоўвайце класы кнопак на <a>, <button>, або<input> элементаў
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">Ужыванне ў залежнасці ад кантэксту
У той час як класы кнопак можна выкарыстоўваць для элементаў <a>і <button>, у нашых кампанентах nav і navbar падтрымліваюцца толькі <button>элементы.
Спасылкі, якія выконваюць ролю кнопак
Калі <a>элементы выкарыстоўваюцца ў якасці кнопак - запускаюць функцыянальнасць унутры старонкі, а не пераходзяць да іншага дакумента або раздзела на бягучай старонцы - ім таксама трэба надаць адпаведны role="button".
Кросбраўзерны рэндэрынг
У якасці лепшай практыкі мы настойліва рэкамендуем выкарыстоўваць <button>элемент, калі гэта магчыма , каб забяспечыць адпаведны рэндэрынг у розных браўзерах.
Сярод іншага, ёсць памылка ў Firefox <30 , якая перашкаджае нам усталёўваць кнопкі line-heightна <input>аснове -, з-за чаго яны не зусім супадаюць па вышыні з іншымі кнопкамі ў Firefox.
Параметры
Выкарыстоўвайце любы з даступных класаў кнопак, каб хутка стварыць стыльную кнопку.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>Перадача значэння дапаможных тэхналогій
Выкарыстанне колеру для дадання сэнсу кнопцы забяспечвае толькі візуальную індыкацыю, якая не будзе перададзена карыстальнікам дапаможных тэхналогій, такіх як праграмы чытання з экрана. Пераканайцеся, што інфармацыя, пазначаная колерам, альбо відавочная з самага змесціва (бачнага тэксту кнопкі), альбо ўключана з дапамогай альтэрнатыўных сродкаў, такіх як дадатковы тэкст, схаваны разам з .sr-onlyкласам.
Памеры
Любіце большыя ці меншыя гузікі? Дадайце .btn-lg, .btn-sm, або .btn-xsдля дадатковых памераў.
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>Стварыце кнопкі ўзроўню блока — тыя, што ахопліваюць поўную шырыню бацькоўскага — шляхам дадання .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>Актыўны стан
Кнопкі будуць выглядаць націснутымі (з больш цёмным фонам, больш цёмнай рамкай і ўстаўленай ценем), калі яны актыўныя. Для <button>элементаў гэта робіцца праз :active. Для <a>элементаў гэта робіцца з дапамогай .active. Тым не менш, вы можаце выкарыстоўваць .activeon <button>s (і ўключыць aria-pressed="true"атрыбут), калі вам спатрэбіцца паўтарыць актыўны стан праграмным шляхам.
Кнопкавы элемент
Няма неабходнасці дадаваць :active, бо гэта псеўда-клас, але калі вам трэба зрабіць аднолькавы знешні выгляд, дадайце .active.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>Анкерны элемент
Дадайце .activeклас да <a>кнопак.
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>Інвалідны стан
Зрабіце так, каб кнопкі выглядалі непрыдатнымі для націску, вярнуўшы іх з дапамогай opacity.
Кнопкавы элемент
Дадайце disabledатрыбут да <button>кнопак.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>Кросбраузерная сумяшчальнасць
Калі вы дадасце disabledатрыбут у <button>, Internet Explorer 9 і ніжэй будуць афарбоўваць тэкст у шэры колер з непрыемным тэкставым ценем, які мы не можам выправіць.
Анкерны элемент
Дадайце .disabledклас да <a>кнопак.
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>Мы выкарыстоўваем .disabledтут у якасці карыснага класа, падобнага да звычайнага .activeкласа, таму прэфікс не патрабуецца.
Папярэджанне аб функцыянальнасці спасылкі
Гэты клас выкарыстоўвае pointer-events: none, каб паспрабаваць адключыць функцыю спасылкі <a>s, але гэта ўласцівасць CSS яшчэ не стандартызавана і не цалкам падтрымліваецца ў Opera 18 і ніжэй або ў Internet Explorer 11. Акрамя таго, нават у браўзерах, якія падтрымліваюць pointer-events: none, клавіятура навігацыя застаецца без уплыву, гэта значыць, што відушчыя карыстальнікі клавіятуры і карыстальнікі дапаможных тэхналогій па-ранейшаму змогуць актываваць гэтыя спасылкі. Такім чынам, каб быць у бяспецы, выкарыстоўвайце ўласны JavaScript, каб адключыць такія спасылкі.
Малюнкі
Спагадныя выявы
Выявы ў Bootstrap 3 можна зрабіць зручнымі праз даданне .img-responsiveкласа. Гэта адносіцца max-width: 100%;і height: auto;да display: block;выявы, каб яна прыгожа маштабавалася да бацькоўскага элемента.
Для цэнтравання малюнкаў, якія выкарыстоўваюць .img-responsiveклас, выкарыстоўвайце .center-blockзамест .text-center. Глядзіце раздзел дапаможных класаў для больш падрабязнай інфармацыі аб .center-blockвыкарыстанні.
Выявы SVG і IE 8-10
У Internet Explorer 8-10 выявы SVG .img-responsiveмаюць непрапарцыйны памер. Каб выправіць гэта, дадайце, width: 100% \9;дзе неабходна. Bootstrap не прымяняе гэта аўтаматычна, бо гэта выклікае ўскладненні для іншых фарматаў малюнкаў.
<img src="..." class="img-responsive" alt="Responsive image">Формы малюнка
Дадайце класы да <img>элемента, каб лёгка стылізаваць выявы ў любым праекце.
Кросбраузерная сумяшчальнасць
Майце на ўвазе, што ў Internet Explorer 8 адсутнічае падтрымка закругленых кутоў.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Дапаможныя заняткі
Кантэкстныя колеры
Перадайце сэнс з дапамогай колеру з некалькімі акцэнтаванымі карыснымі класамі. Яны таксама могуць прымяняцца да спасылак і цямнеюць пры навядзенні курсора гэтак жа, як нашы стылі спасылак па змаўчанні.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Мецэнат sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>Маючы справу са спецыфікай
Часам класы націску не могуць быць прыменены з-за спецыфікі іншага селектара. У большасці выпадкаў дастатковым абыходным шляхам з'яўляецца абгарнуць тэкст у <span>клас.
Перадача значэння дапаможных тэхналогій
Выкарыстанне колеру для дадання сэнсу забяспечвае толькі візуальную індыкацыю, якая не будзе перададзена карыстальнікам дапаможных тэхналогій, такіх як праграмы чытання з экрана. Пераканайцеся, што інфармацыя, пазначаная колерам, відавочная з самага змесціва (кантэкстныя колеры выкарыстоўваюцца толькі для ўзмацнення сэнсу, які ўжо прысутнічае ў тэксце/разметцы), або ўключана з дапамогай альтэрнатыўных сродкаў, такіх як дадатковы тэкст, схаваны з .sr-onlyкласам .
Кантэкстныя фоны
Падобна кантэкстным класам колеру тэксту, лёгка ўсталяваць фон элемента для любога кантэкстнага класа. Якарныя кампаненты будуць цямнець пры навядзенні, як і тэкставыя класы.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Мецэнат sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>Маючы справу са спецыфікай
Часам кантэкстныя фонавыя класы не могуць быць ужытыя з-за спецыфікі іншага селектара. У некаторых выпадках дастатковым абыходным шляхам з'яўляецца абгарнуць змесціва вашага элемента ў <div>з класам.
Перадача значэння дапаможных тэхналогій
Як і ў выпадку з кантэкстнымі колерамі , пераканайцеся, што любое значэнне, якое перадаецца праз колер, таксама перадаецца ў фармаце, які не з'яўляецца чыста прэзентацыйным.
Значок закрыцця
Выкарыстоўвайце агульны значок закрыцця для адхілення змесціва, напрыклад мадалаў і абвестак.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Карэткі
Каб пазначыць функцыянальнасць выпадальнага меню і кірунак, выкарыстоўвайце ўстаўкі. Заўважце, што ў выпадальных меню стандартная ўводка аўтаматычна адмяняецца .
<span class="caret"></span>Хуткія паплаўкі
Перамяшчаць элемент злева або справа з дапамогай класа. !importantуключаны, каб пазбегнуць праблем са спецыфікай. Класы таксама можна выкарыстоўваць як міксіны.
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}Цэнтраваць блокі кантэнту
Усталюйце элемент display: blockі адцэнтруйце яго праз margin. Даступны як міксін і клас.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Clearfix
Лёгка ачысціць floats, дадаўшы .clearfix да бацькоўскага элемента . Выкарыстоўвае micro clearfix , які папулярызаваў Нікалас Галахер. Можа таксама выкарыстоўвацца як міксін.
<!-- 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клас або mixin, каб дапамагчы замяніць тэкставае змесціва элемента фонавым малюнкам.
<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значэння ўласцівасці CSS, пералічанага ніжэй.
| Група заняткаў | CSSdisplay |
|---|---|
.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>-звязаных элементаў.
Тэставыя прыклады
Змяніце памер браўзера або загрузіце яго на розных прыладах, каб праверыць спагадныя класы ўтыліт.
Бачна на...
Зялёныя галачкі паказваюць, што элемент бачны ў вашым бягучым акне прагляду.
Вельмі маленькі
✔ Бачны на x-small
Маленькі
✔ Бачны на малых
Сярэдні
✔ Бачны на сярэднім
Вялікі
✔ Бачны ў вялікім памеры
✔ Бачны на x-small і small
✔ Бачны на сярэдніх і вялікіх
✔ Бачны на х-малым і сярэднім
✔ Бачны на малых і вялікіх
✔ Бачны на x-малым і вялікім
✔ Бачны на малых і сярэдніх
Схаваны на...
Тут зялёныя галачкі таксама паказваюць, што элемент схаваны ў вашым бягучым акне прагляду.
Выкарыстоўваючы Less
CSS Bootstrap пабудаваны на Less, прэпрацэсары з дадатковымі функцыямі, такімі як зменныя, міксіны і функцыі для кампіляцыі CSS. Тыя, хто хоча выкарыстоўваць зыходныя файлы Less замест нашых скампіляваных файлаў CSS, могуць выкарыстоўваць шматлікія зменныя і міксіны, якія мы выкарыстоўваем ва ўсім фреймворку.
Пераменныя сеткі і міксіны разглядаюцца ў раздзеле сістэмы сеткі .
Кампіляцыя Bootstrap
Bootstrap можна выкарыстоўваць як мінімум двума спосабамі: са скампіляваным CSS або з зыходнымі файламі Less. Каб скампіляваць файлы Less, звярніцеся да раздзела "Пачатак працы" , каб даведацца, як наладзіць асяроддзе распрацоўкі для выканання неабходных каманд.
Інструменты кампіляцыі іншых вытворцаў могуць працаваць з Bootstrap, але яны не падтрымліваюцца нашай асноўнай камандай.
Пераменныя
Зменныя выкарыстоўваюцца ва ўсім праекце як спосаб цэнтралізацыі і сумеснага выкарыстання часта выкарыстоўваюцца значэнняў, такіх як колеры, інтэрвалы або стэкі шрыфтоў. Для поўнай разбіўкі, калі ласка, звярніцеся да наладчыка .
Колеры
Лёгка выкарыстоўвайце дзве каляровыя схемы: адценні шэрага і семантычную. Колеры адценняў шэрага забяспечваюць хуткі доступ да звычайна выкарыстоўваных адценняў чорнага, у той час як семантычныя ўключаюць розныя колеры, прызначаныя для значных кантэкстных значэнняў.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;Выкарыстоўвайце любую з гэтых каляровых зменных, як яны ёсць, або пераназначце іх больш значным зменным для вашага праекта.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Будаўнічыя лясы
Некалькі зменных для хуткай налады ключавых элементаў шкілета вашага сайта.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Спасылкі
Лёгка аформіце свае спасылкі ў правільны колер з адным значэннем.
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}Звярніце ўвагу, што @link-hover-colorвыкарыстоўвае функцыю, яшчэ адзін цудоўны інструмент ад Less, для аўтаматычнага стварэння патрэбнага колеру пры навядзенні. Вы можаце выкарыстоўваць darken, lighten, saturateі desaturate.
Тыпаграфіка
З дапамогай некалькіх хуткіх зменных лёгка ўсталюйце шрыфт, памер тэксту, інтэрнацыянал і інш. Bootstrap таксама выкарыстоўвае іх для забеспячэння простых друкарскіх міксінаў.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;Значкі
Дзве хуткія зменныя для наладжвання месцазнаходжання і імя файла вашых значкоў.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Кампаненты
Кампаненты Bootstrap выкарыстоўваюць некаторыя зменныя па змаўчанні для ўстаноўкі агульных значэнняў. Вось найбольш часта выкарыстоўваюцца.
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;Міксіны пастаўшчыка
Міксіны пастаўшчыка - гэта міксіны, якія дапамагаюць падтрымліваць некалькі браўзераў шляхам уключэння ўсіх адпаведных прэфіксаў пастаўшчыка ў ваш скампіляваны CSS.
Памер скрынкі
Скіньце мадэль скрынкі вашых кампанентаў з дапамогай аднаго міксіна. Для кантэксту глядзіце гэты карысны артыкул ад Mozilla .
Міксін састарэў , пачынаючы з версіі 3.2.0, з увядзеннем Autoprefixer. Для захавання зваротнай сумяшчальнасці Bootstrap будзе працягваць унутранае выкарыстанне міксіна да версіі Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Скругленыя куты
border-radiusСёння ўсе сучасныя браўзеры падтрымліваюць уласцівасць без прэфікса . Такім чынам, міксіна няма .border-radius(), але Bootstrap змяшчае цэтлікі для хуткага закруглення двух вуглоў на пэўным баку аб'екта.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}Box (Drop) цені
Калі ваша мэтавая аўдыторыя выкарыстоўвае найноўшыя і найлепшыя браўзеры і прылады, пераканайцеся, што вы карыстаецеся box-shadowўласнасцю самастойна. Калі вам патрэбна падтрымка старых прылад Android (да версіі 4) і iOS (да iOS 5), выкарыстоўвайце састарэлы міксін, каб падабраць неабходны-webkit прэфікс.
Mixin састарэў з версіі 3.1.0, паколькі Bootstrap афіцыйна не падтрымлівае састарэлыя платформы, якія не падтрымліваюць стандартную ўласцівасць. Для захавання зваротнай сумяшчальнасці Bootstrap будзе працягваць унутранае выкарыстанне міксіна да версіі Bootstrap v4.
Абавязкова выкарыстоўвайце rgba()колеры ў вашых ценях, каб яны як мага лепш зліваліся з фонам.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Пераходы
Некалькі міксінаў для гнуткасці. Усталюйце для ўсіх звестак аб пераходзе адну або ўкажыце асобную затрымку і працягласць, калі неабходна.
Міксіны састарэлі з версіі 3.2.0 з увядзеннем Autoprefixer. Каб захаваць зваротную сумяшчальнасць, Bootstrap будзе працягваць выкарыстоўваць унутраныя міксіны да версіі Bootstrap v4.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}Пераўтварэнні
Паварот, маштабаванне, пераклад (перамяшчэнне) або перакос любога аб'екта.
Міксіны састарэлі з версіі 3.2.0 з увядзеннем Autoprefixer. Каб захаваць зваротную сумяшчальнасць, Bootstrap будзе працягваць выкарыстоўваць унутраныя міксіны да версіі Bootstrap v4.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}Анімацыі
Адзіны міксін для выкарыстання ўсіх уласцівасцей анімацыі CSS3 у адной дэкларацыі і іншыя міксіны для асобных уласцівасцей.
Міксіны састарэлі з версіі 3.2.0 з увядзеннем Autoprefixer. Каб захаваць зваротную сумяшчальнасць, Bootstrap будзе працягваць выкарыстоўваць унутраныя міксіны да версіі Bootstrap v4.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}Непразрыстасць
Усталюйце непразрыстасць для ўсіх браўзераў і забяспечце filterрэзервовы варыянт для IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Тэкст запаўняльніка
Дайце кантэкст для элементаў кіравання формай у кожным полі.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}Стоўбцы
Стварайце слупкі з дапамогай CSS у адным элеменце.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}Градыенты
Лёгка ператварыце любыя два колеры ў фонавы градыент. Станьце больш прасунутымі і задайце кірунак, выкарыстоўвайце тры колеры або выкарыстоўвайце радыяльны градыент. З дапамогай аднаго міксіна вы атрымаеце ўвесь патрэбны сінтаксіс з прэфіксамі.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Вы таксама можаце задаць кут стандартнага двухколернага лінейнага градыенту:
#gradient > .directional(#333; #000; 45deg);Калі вам патрэбен градыент у стылі цырульніцкай палоскі, гэта таксама лёгка. Проста ўкажыце адзіны колер, і мы накладзем напаўпразрыстую белую паласу.
#gradient > .striped(#333; 45deg);Павялічце стаўку і выкарыстоўвайце замест гэтага тры колеры. Усталюйце першы колер, другі колер, каляровую кропку другога колеру (працэнтнае значэнне, напрыклад, 25%) і трэці колер з дапамогай гэтых міксінаў:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Галаву ўверх! Калі вам калі-небудзь спатрэбіцца выдаліць градыент, не забудзьцеся выдаліць усе спецыфічныя для IE, якія filterвы маглі дадаць. Вы можаце зрабіць гэта, выкарыстоўваючы .reset-filter()міксін побач background-image: none;.
Карысныя міксіны
Карысныя міксіны - гэта міксіны, якія аб'ядноўваюць не звязаныя ў іншым выпадку ўласцівасці CSS для дасягнення пэўнай мэты або задачы.
Clearfix
Забудзьцеся аб даданні class="clearfix"да любога элемента і замест гэтага дадайце .clearfix()міксін, дзе гэта неабходна. Выкарыстоўваецца мікраклірфікс ад Нікаласа Галахера .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Гарызантальнае цэнтраванне
Хутка адцэнтраваць любы элемент у яго бацькоўскім. Патрабуецца widthабо max-widthбыць усталяваны.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Памочнікі па памеры
Лягчэй указваць памеры прадмета.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Тэкставыя вобласці з магчымасцю змены памеру
Лёгка наладзьце параметры змены памеру для любога тэкставага поля або любога іншага элемента. Па змаўчанні нармальныя паводзіны браўзера ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Скарачэнне тэксту
Лёгка абразайце тэкст шматкроп'ем з дапамогай аднаго міксіна. Патрабуецца, каб элемент быў blockабо inline-blockўзровень.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Выявы сятчаткі
Укажыце два шляхі выявы і памеры выявы @1x, і Bootstrap прадаставіць медыя-запыт @2x. Калі ў вас ёсць шмат відарысаў для абслугоўвання, падумайце над тым, каб напісаць CSS выявы сятчаткі ўручную ў адным медыя-запыте.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}Выкарыстанне Sass
Хоць Bootstrap пабудаваны на Less, ён таксама мае афіцыйны порт Sass . Мы захоўваем яго ў асобным рэпазітары GitHub і апрацоўваем абнаўленні з дапамогай сцэнарыя пераўтварэння.
Што ўваходзіць
Паколькі порт Sass мае асобнае сховішча і абслугоўвае крыху іншую аўдыторыю, змест праекта значна адрозніваецца ад асноўнага праекта Bootstrap. Гэта гарантуе, што порт Sass максімальна сумяшчальны з як мага большай колькасцю сістэм на базе Sass.
| шлях | Апісанне |
|---|---|
lib/ |
Код каштоўных камянёў Ruby (канфігурацыя Sass, інтэграцыя Rails і Compass) |
tasks/ |
Скрыпты пераўтварэння (пераход ад Less да Sass) |
test/ |
Складальныя тэсты |
templates/ |
Маніфест пакета Compass |
vendor/assets/ |
Sass, JavaScript і файлы шрыфтоў |
Rakefile |
Унутраныя задачы, такія як зграбанне і канвертаванне |
Наведайце рэпазітар GitHub порта Sass, каб убачыць гэтыя файлы ў дзеянні.
Ўстаноўка
Для атрымання інфармацыі аб тым, як усталяваць і выкарыстоўваць Bootstrap для Sass, звярніцеся да readme рэпазітара GitHub . Гэта самая актуальная крыніца і змяшчае інфармацыю для выкарыстання з Rails, Compass і стандартнымі праектамі Sass.