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
мета-тег вікна перегляду. Це вимикає масштабування, тобто користувачі можуть лише прокручувати, і ваш сайт більше схожий на рідну програму. Загалом, ми не рекомендуємо це на кожному сайті, тому будьте обережні!
<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 і міксини для швидкого створення власних простих семантичних макетів.
Змінні визначають кількість стовпців, ширину межі та точку медіа-запиту, з якої починаються плаваючі стовпці. Ми використовуємо їх для генерації попередньо визначених класів сітки, задокументованих вище, а також для настроюваних міксинів, перелічених нижче.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
Міксини використовуються разом із змінними сітки для генерації семантичного CSS для окремих стовпців сітки.
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}
Ви можете змінювати змінні на власні значення або просто використовувати міксини зі значеннями за замовчуванням. Ось приклад використання параметрів за замовчуванням для створення макета з двох стовпців із проміжком між ними.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>
Доступні всі заголовки HTML <h1>
до <h6>
. .h1
наскрізні .h6
класи також доступні, коли ви хочете відповідати стилю шрифту заголовка, але все одно хочете, щоб ваш текст відображався в рядку.
h1. Заголовок Bootstrap |
Напівжирний 36px |
h2. Заголовок Bootstrap |
Напівжирний 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. Початковий заголовок Додатковий текст |
h2. Початковий заголовок Додатковий текст |
h3. Початковий заголовок Додатковий текст |
h4. Початковий заголовок Додатковий текст |
h5. Початковий заголовок Додатковий текст |
h6. Початковий заголовок Додатковий текст |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
Глобальне значення Bootstrap за умовчанням font-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 .
<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; }
}
Щоб отримати додаткові відомості, прочитайте цю відповідь Stack Overflow .
# | Заголовок таблиці | Заголовок таблиці | Заголовок таблиці | Заголовок таблиці | Заголовок таблиці | Заголовок таблиці |
---|---|---|---|---|---|---|
1 | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці |
2 | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці |
3 | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці |
# | Заголовок таблиці | Заголовок таблиці | Заголовок таблиці | Заголовок таблиці | Заголовок таблиці | Заголовок таблиці |
---|---|---|---|---|---|---|
1 | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці |
2 | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці |
3 | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці | Комірка таблиці |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Окремі елементи керування форми автоматично отримують певний глобальний стиль. Усі текстові <input>
, <textarea>
, і <select>
елементи з .form-control
встановлені width: 100%;
за замовчуванням. Оберніть етикетки та елементи керування .form-group
для оптимального інтервалу.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Не змішуйте групи форм безпосередньо з групами введення . Натомість вкладіть групу введення в групу форми.
Додайте .form-inline
до своєї форми (яка не обов’язково має бути <form>
) для елементів керування, вирівняних за лівим краєм і вбудованих блоків. Це стосується лише форм у вікнах перегляду, які мають ширину не менше 768 пікселів.
Введення та вибір width: 100%;
застосовано за замовчуванням у Bootstrap. У вбудованих формах ми скидаємо це значення, width: auto;
щоб кілька елементів керування могли розташовуватися в одному рядку. Залежно від вашого макета може знадобитися додаткова спеціальна ширина.
Програми зчитування з екрана матимуть проблеми з вашими формами, якщо ви не включите мітку для кожного введення. Для цих вбудованих форм ви можете приховати мітки за допомогою .sr-only
класу. Існують інші альтернативні методи надання мітки для допоміжних технологій, наприклад атрибут aria-label
, aria-labelledby
або . title
Якщо жоден із них відсутній, програми зчитування з екрана можуть вдатися до використання placeholder
атрибута, якщо він присутній, але зауважте, що використовувати placeholder
як заміну для інших методів позначення не рекомендується.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
Використовуйте попередньо визначені класи сітки Bootstrap, щоб вирівняти мітки та групи елементів керування форми в горизонтальному макеті, додавши .form-horizontal
до форми (що не обов’язково має бути <form>
). Це змінить .form-group
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
замість них a для :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
до батьківського елемента . Використовує мікроклірфікс , який популяризував Ніколас Галлахер. Також можна використовувати як міксин.
<!-- 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
для уникнення конфліктів специфічності, як і швидкі floats . Вони доступні лише для перемикання рівня блоку. Їх також можна використовувати як міксини.
.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()
Mixin не існує, але Bootstrap містить ярлики для швидкого округлення двох кутів на певній стороні об’єкта.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
Якщо ваша цільова аудиторія використовує найновіші та найкращі веб-переглядачі та пристрої, переконайтеся, що ви використовуєте цей box-shadow
ресурс самостійно. Якщо вам потрібна підтримка старіших пристроїв Android (до версії 4) і iOS (до версії iOS 5), скористайтеся застарілим міксином, щоб вибрати потрібний -webkit
префікс.
З версії 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);
Голови вгору! Якщо вам колись знадобиться видалити градієнт, обов’язково видаліть усі filter
додані вами елементи IE. Ви можете зробити це, використовуючи .reset-filter()
міксин поруч із background-image: none;
.
Службові міксини — це міксини, які поєднують не пов’язані властивості CSS для досягнення певної мети чи завдання.
Забудьте про додавання class="clearfix"
до будь-якого елемента, а натомість додайте .clearfix()
міксин, де потрібно. Використовує micro clearfix від Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
Швидке центрування будь-якого елемента в межах його батьківського елемента. Потрібна установка width
або max-width
.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
Простіше вказувати розміри об’єкта.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
Легко налаштуйте параметри зміни розміру для будь-якої текстової області чи будь-якого іншого елемента. За замовчуванням стандартна поведінка браузера ( both
).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
Легко обрізайте текст крапкою за допомогою одного міксина. Потрібно, щоб елемент був block
або був inline-block
рівнем.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
Укажіть два шляхи зображення та розміри зображення @1x, і Bootstrap надасть медіа-запит @2x. Якщо у вас є багато зображень для обслуговування, подумайте над тим, щоб написати CSS зображення сітківки вручну в одному медіа-запиті.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}
Хоча Bootstrap побудовано на Less, він також має офіційний порт Sass . Ми зберігаємо його в окремому репозиторії GitHub і обробляємо оновлення за допомогою сценарію перетворення.
Оскільки порт Sass має окреме репо та обслуговує дещо іншу аудиторію, вміст проекту значно відрізняється від основного проекту Bootstrap. Це забезпечує максимальну сумісність порту Sass із якомога більшою кількістю систем на основі Sass.
шлях | опис |
---|---|
lib/ |
Gem-код Ruby (конфігурація Sass, інтеграція Rails і Compass) |
tasks/ |
Сценарії конвертера (перетворення висхідного потоку Less на Sass) |
test/ |
Збірні тести |
templates/ |
Маніфест пакета Compass |
vendor/assets/ |
Sass, JavaScript і файли шрифтів |
Rakefile |
Внутрішні завдання, такі як рейк і конвертація |
Відвідайте репозиторій GitHub порту Sass, щоб побачити ці файли в дії.
Щоб отримати інформацію про те, як встановити та використовувати Bootstrap для Sass, зверніться до readme репозиторію GitHub . Це найновіше джерело та містить інформацію для використання з Rails, Compass і стандартними проектами Sass.