Документація та приклади оформлення таблиць (враховуючи їхнє поширене використання в плагінах JavaScript) за допомогою Bootstrap.
На цій сторінці
Огляд
Завдяки широкому використанню <table>елементів у сторонніх віджетах, таких як календарі та засоби вибору дати, таблиці Bootstrap доступні для вибору . Додайте базовий клас .tableдо будь-якого <table>, а потім розширте за допомогою наших додаткових класів-модифікаторів або власних стилів. Усі стилі таблиць не успадковуються в Bootstrap, тобто будь-які вкладені таблиці можуть бути стилізовані незалежно від батьківської.
Використовуючи найпростішу розмітку таблиць, ось як .tableвиглядають таблиці на базі Bootstrap.
#
Спочатку
Останній
Ручка
1
Марк
Отто
@mdo
2
Яків
Торнтон
@жирний
3
Пташка Ларрі
@twitter
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
Варіанти
Використовуйте контекстні класи для розфарбовування таблиць, рядків таблиць або окремих клітинок.
Клас
Заголовок
Заголовок
За замовчуванням
Стільниковий
Стільниковий
Первинний
Стільниковий
Стільниковий
Вторинний
Стільниковий
Стільниковий
Успіх
Стільниковий
Стільниковий
Небезпека
Стільниковий
Стільниковий
УВАГА
Стільниковий
Стільниковий
Інформація
Стільниковий
Стільниковий
світло
Стільниковий
Стільниковий
Темний
Стільниковий
Стільниковий
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
Передача значення допоміжним технологіям
Використання кольору для додання значення забезпечує лише візуальну індикацію, яка не буде передана користувачам допоміжних технологій, таких як програми зчитування з екрана. Переконайтеся, що інформація, позначена кольором, або очевидна з самого вмісту (наприклад, видимого тексту), або включена за допомогою альтернативних засобів, таких як додатковий текст, прихований разом із .visually-hiddenкласом.
Акцентні столи
Смугасті ряди
Використовуйте .table-stripedдля додавання смуг зебри до будь-якого рядка таблиці в <tbody>.
Ми починаємо з встановлення фону клітинки таблиці за допомогою --bs-table-bgспеціальної властивості. Потім усі варіанти таблиці встановлюють цю спеціальну властивість, щоб розфарбувати клітинки таблиці. Таким чином, ми не матимемо проблем, якщо напівпрозорі кольори використовуються як фон таблиці.
Потім ми додаємо тінь вставного поля до клітинок таблиці за допомогою box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);шару поверх будь-якого вказаного background-color. Оскільки ми використовуємо великий розкид і відсутність розмиття, колір буде монотонним. Оскільки --bs-table-accent-bgза замовчуванням не встановлено, ми не маємо тіні вікна за замовчуванням.
Якщо додано класи або .table-striped, для розфарбовування фону встановлюється напівпрозорий колір..table-hover.table-active--bs-table-accent-bg
Для кожного варіанту таблиці ми створюємо --bs-table-accent-bgколір із найвищим контрастом залежно від цього кольору. Наприклад, колір акценту .table-primaryтемніший, а .table-darkколір акценту – світліший.
Кольори тексту та рамки генеруються однаково, і їхні кольори успадковуються за замовчуванням.
Комірки таблиці <thead>завжди вертикально вирівняні донизу. Комірки таблиці <tbody>успадковують своє вирівнювання від <table>і за замовчуванням вирівнюються вгорі. Використовуйте класи вертикального вирівнювання , щоб повторно вирівняти, де це необхідно.
Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Ця комірка успадковується vertical-align: middle;від таблиці
Ця комірка успадковується vertical-align: middle;від таблиці
Ця комірка успадковується vertical-align: middle;від таблиці
Це деякий текст-заповнювач, призначений для того, щоб зайняти трохи вертикального простору, щоб продемонструвати, як працює вертикальне вирівнювання в попередніх клітинках.
Ця комірка успадковується vertical-align: bottom;від рядка таблиці
Ця комірка успадковується vertical-align: bottom;від рядка таблиці
Ця комірка успадковується vertical-align: bottom;від рядка таблиці
Це деякий текст-заповнювач, призначений для того, щоб зайняти трохи вертикального простору, щоб продемонструвати, як працює вертикальне вирівнювання в попередніх клітинках.
Ця комірка успадковується vertical-align: middle;від таблиці
Ця комірка успадковується vertical-align: middle;від таблиці
Ця комірка вирівнюється вгорі.
Це деякий текст-заповнювач, призначений для того, щоб зайняти трохи вертикального простору, щоб продемонструвати, як працює вертикальне вирівнювання в попередніх клітинках.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
Гніздування
Стилі меж, активні стилі та варіанти таблиць не успадковуються вкладеними таблицями.
Щоб запобігти витоку будь-яких> стилів у вкладені таблиці, ми використовуємо селектор дочірнього комбінатора ( ) у нашому CSS. Оскільки нам потрібно націлити всі tds і ths у thead, tbody, і tfoot, наш селектор виглядав би досить довгим без нього. Таким чином, ми використовуємо досить дивний .table > :not(caption) > * > *селектор для націлювання на всі tds і ths .table, але не на будь-яку потенційно вкладену таблицю.
Зауважте, що якщо ви додаєте <tr>s як прямі дочірні елементи таблиці, вони <tr>будуть загорнуті в a <tbody>за замовчуванням, таким чином наші селектори працюватимуть належним чином.
Анатомія
Голова столу
Подібно до таблиць і темних таблиць, використовуйте класи-модифікатори .table-lightабо .table-dark, щоб вони <thead>виглядали світло- або темно-сірими.
A <caption>функціонує як заголовок для таблиці. Це допомагає користувачам із програмами зчитування з екрана знайти таблицю, зрозуміти, про що йдеться, і вирішити, чи хочуть вони її прочитати.
Список користувачів
#
Спочатку
Останній
Ручка
1
Марк
Отто
@mdo
2
Яків
Торнтон
@жирний
3
Пташка Ларрі
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
Ви також можете розмістити <caption>на вершині таблиці за допомогою .caption-top.
Список користувачів
#
Спочатку
Останній
Ручка
1
Марк
Отто
@mdo
2
Яків
Торнтон
@жирний
3
Ларрі
птах
@twitter
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
Чуйні столи
Чуйні таблиці дозволяють легко прокручувати таблиці горизонтально. Зробіть будь-яку таблицю адаптивною для всіх вікон перегляду, обернувши a .tableз .table-responsive. Або виберіть максимальну точку зупину, з якою матимете адаптивну таблицю, використовуючи .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Вертикальне обрізання/обрізання
У адаптивних таблицях використовується функція overflow-y: hidden, яка відсікає будь-який вміст, що виходить за межі нижнього або верхнього краю таблиці. Зокрема, це може відрізати спадні меню та інші сторонні віджети.
Завжди чуйний
Через кожну точку розриву використовуйте .table-responsiveдля горизонтального прокручування таблиць.
Використовуйте .table-responsive{-sm|-md|-lg|-xl|-xxl}за потреби для створення адаптивних таблиць до певної точки зупину. Від цієї точки зупинки та вище таблиця працюватиме нормально й не прокручуватиметься горизонтально.
Ці таблиці можуть виглядати зламаними, доки їхні адаптивні стилі не будуть застосовані до певної ширини вікна перегляду.
Факторні змінні ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) використовуються для визначення контрасту у варіантах таблиці.
Окрім світлих і темних варіантів таблиці, кольори теми освітлюються $table-bg-levelзмінною.