CSS
Глабальныя налады CSS, асноўныя элементы HTML, стылізаваныя і палепшаныя з дапамогай пашыраемых класаў, і пашыраная сістэма сеткі.
Глабальныя налады CSS, асноўныя элементы HTML, стылізаваныя і палепшаныя з дапамогай пашыраемых класаў, і пашыраная сістэма сеткі.
Атрымайце кароткія звесткі аб ключавых элементах інфраструктуры Bootstrap, у тым ліку аб нашым падыходзе да лепшай, больш хуткай і моцнай вэб-распрацоўкі.
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
.
Для паляпшэння візуалізацыі ў розных браўзерах мы выкарыстоўваем Normalize.css , праект Нікаласа Галахера і Джонатана Ніла .
Bootstrap патрабуе змяшчальнага элемента, каб абгарнуць змесціва сайта і размясціць нашу сістэму сеткі. Вы можаце выбраць адзін з двух кантэйнераў для выкарыстання ў сваіх праектах. Звярніце ўвагу, што з-за padding
і большага, ні адзін з кантэйнераў не ўкладваецца.
Выкарыстоўвайце .container
для адаптыўнага кантэйнера фіксаванай шырыні.
<div class="container">
...
</div>
Выкарыстоўвайце .container-fluid
для кантэйнера поўнай шырыні, які ахоплівае ўсю шырыню вашага акна прагляду.
<div class="container-fluid">
...
</div>
Bootstrap уключае ў сябе адаптыўную мабільную сістэму першай вадкай сеткі, якая належным чынам маштабуецца да 12 слупкоў па меры павелічэння памеру прылады або прагляду. Ён уключае загадзя вызначаныя класы для простых варыянтаў макета, а таксама магутныя міксіны для стварэння больш семантычных макетаў .
Сістэмы сеткі выкарыстоўваюцца для стварэння макетаў старонак праз шэраг радкоў і слупкоў, у якіх змяшчаецца ваш кантэнт. Вось як працуе сеткавая сістэма Bootstrap:
.container
(з фіксаванай шырынёй) або .container-fluid
(на поўную шырыню)..row
і .col-xs-4
даступныя для хуткага стварэння макетаў сеткі. Менш міксінаў таксама можна выкарыстоўваць для больш семантычных макетаў.padding
. Гэта запаўненне зрушана ў радках для першага і апошняга слупка праз адмоўнае поле на .row
s..col-xs-4
..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
.
<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-*
ў свае слупкі. Глядзіце прыклад ніжэй, каб лепш зразумець, як усё гэта працуе.
<!-- 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-*
класамі планшэтаў.
<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 слупкоў, кожная група дадатковых слупкоў будзе пераходзіць на новы радок як адно цэлае.
<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
і нашых спагадных класаў утыліт .
<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
па чатырох слупках.
<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 даступных слупкоў).
<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-*
мадыфікатараў.
<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 у 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>
.
<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>
Спіс элементаў, у якіх парадак відавочна не мае значэння.
<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><section></code> should be wrapped as inline.
Выкарыстоўваць<kbd>
каб пазначыць увод, які звычайна ўводзіцца з клавіятуры.
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 ёсць нейкі нязручны стыль набору палёў 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-group
s, каб паводзіць сябе як радкі сеткі, таму няма неабходнасці ў .row
.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Прыклады стандартных элементаў кіравання формамі, якія падтрымліваюцца ў прыкладзе макета формы.
Самы распаўсюджаны кантроль формы, тэкставыя палі ўводу. Уключае падтрымку ўсіх тыпаў HTML5: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, і color
.
Уводы будуць цалкам стылізаваныя толькі ў тым выпадку, калі яны type
правільна заяўлены.
<input type="text" class="form-control" placeholder="Text input">
Каб дадаць інтэграваны тэкст або кнопкі да і/ці пасля любога тэкставага элемента <input>
, праверце кампанент групы ўводу .
Элемент кіравання формай, які падтрымлівае некалькі радкоў тэксту. Пры неабходнасці змяніце rows
атрыбут.
<textarea class="form-control" rows="3"></textarea>
Сцяжкі прызначаны для выбару аднаго або некалькіх варыянтаў у спісе, у той час як радыё - для выбару аднаго варыянту з многіх.
Адключаныя сцяжкі і радыё падтрымліваюцца, але каб забяспечыць «недазволены» курсор пры навядзенні курсора на бацькоўскі элемент <label>
, вам трэба будзе дадаць .disabled
клас да бацькоўскага элемента .radio
, .radio-inline
, .checkbox
або .checkbox-inline
.
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—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
. Тым не менш, вы можаце выкарыстоўваць .active
on <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
выкарыстанні.
У 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();
}
Лёгка ачысціць float
s, дадаўшы .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>
-звязаных элементаў.
Змяніце памер браўзера або загрузіце яго на розных прыладах, каб праверыць спагадныя класы ўтыліт.
Зялёныя галачкі паказваюць, што элемент бачны ў вашым бягучым акне прагляду.
Тут зялёныя галачкі таксама паказваюць, што элемент схаваны ў вашым бягучым акне прагляду.
CSS Bootstrap пабудаваны на Less, прэпрацэсары з дадатковымі функцыямі, такімі як зменныя, міксіны і функцыі для кампіляцыі CSS. Тыя, хто хоча выкарыстоўваць зыходныя файлы Less замест нашых скампіляваных файлаў CSS, могуць выкарыстоўваць шматлікія зменныя і міксіны, якія мы выкарыстоўваем ва ўсім фреймворку.
Пераменныя сеткі і міксіны разглядаюцца ў раздзеле сістэмы сеткі .
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-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 для дасягнення пэўнай мэты або задачы.
Забудзьцеся аб даданні class="clearfix"
да любога элемента і замест гэтага дадайце .clearfix()
міксін, дзе гэта неабходна. Выкарыстоўваецца мікраклірфікс ад Нікаласа Галахера .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
Хутка адцэнтраваць любы элемент у яго бацькоўскім. Патрабуецца width
або max-width
быць усталяваны.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
Лягчэй указваць памеры прадмета.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
Лёгка наладзьце параметры змены памеру для любога тэкставага поля або любога іншага элемента. Па змаўчанні нармальныя паводзіны браўзера ( both
).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
Лёгка абразайце тэкст шматкроп'ем з дапамогай аднаго міксіна. Патрабуецца, каб элемент быў block
або inline-block
ўзровень.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
Укажыце два шляхі выявы і памеры выявы @1x, і Bootstrap прадаставіць медыя-запыт @2x. Калі ў вас ёсць шмат відарысаў для абслугоўвання, падумайце над тым, каб напісаць CSS выявы сятчаткі ўручную ў адным медыя-запыте.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}
Хоць Bootstrap пабудаваны на Less, ён таксама мае афіцыйны порт Sass . Мы захоўваем яго ў асобным рэпазітары GitHub і апрацоўваем абнаўленні з дапамогай сцэнарыя пераўтварэння.
Паколькі порт Sass мае асобнае сховішча і абслугоўвае крыху іншую аўдыторыю, змест праекта значна адрозніваецца ад асноўнага праекта Bootstrap. Гэта гарантуе, што порт Sass максімальна сумяшчальны з як мага большай колькасцю сістэм на базе Sass.
шлях | Апісанне |
---|---|
lib/ |
Код каштоўных камянёў Ruby (канфігурацыя Sass, інтэграцыя Rails і Compass) |
tasks/ |
Скрыпты пераўтварэння (пераход ад Less да Sass) |
test/ |
Складальныя тэсты |
templates/ |
Маніфест пакета Compass |
vendor/assets/ |
Sass, JavaScript і файлы шрыфтоў |
Rakefile |
Унутраныя задачы, такія як зграбанне і канвертаванне |
Наведайце рэпазітар GitHub порта Sass, каб убачыць гэтыя файлы ў дзеянні.
Для атрымання інфармацыі аб тым, як усталяваць і выкарыстоўваць Bootstrap для Sass, звярніцеся да readme рэпазітара GitHub . Гэта самая актуальная крыніца і змяшчае інфармацыю для выкарыстання з Rails, Compass і стандартнымі праектамі Sass.